owntone-server/web-src/src/components/ControlSettingIntegerField.vue
2025-02-04 22:00:48 +01:00

47 lines
1.0 KiB
Vue

<template>
<control-setting
:category="category"
:disabled="disabled"
:name="name"
:placeholder="placeholder"
>
<template #label>
<slot name="label" />
</template>
<template #input="{ setting, update }">
<input
class="input"
inputmode="numeric"
min="0"
:placeholder="placeholder"
:value="setting.value"
@input="update($event, sanitise)"
/>
</template>
<template #help>
<slot name="help" />
</template>
</control-setting>
</template>
<script>
import ControlSetting from '@/components/ControlSetting.vue'
export default {
name: 'ControlSettingIntegerField',
components: { ControlSetting },
props: {
category: { required: true, type: String },
disabled: Boolean,
name: { required: true, type: String },
placeholder: { default: '', type: String }
},
methods: {
sanitise(target) {
const value = parseInt(target.value.replace(/\D+/gu, ''), 10) || 0
return (target.value = value)
}
}
}
</script>