68 lines
1.6 KiB
TypeScript
Executable File
68 lines
1.6 KiB
TypeScript
Executable File
import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
|
|
import { IBorder, IOperators, ISize } from 'model'
|
|
|
|
import { useI18n } from '@/boot/i18n'
|
|
import { useQuasar } from 'quasar'
|
|
|
|
import { CMySlider } from '@src/components/CMySlider'
|
|
|
|
import { shared_consts } from '@/common/shared_vuejs'
|
|
|
|
export default defineComponent({
|
|
name: 'CBorders',
|
|
emits: ['update:modelValue'],
|
|
components: { CMySlider },
|
|
props: {
|
|
modelValue: {
|
|
type: Object as PropType<IBorder>,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
disable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
|
|
const internalModel = reactive({ ...props.modelValue })
|
|
|
|
function modifValueTop(value: any) {
|
|
emit('update:modelValue', { ...internalModel, top: value });
|
|
}
|
|
|
|
function modifValueBottom(value: any) {
|
|
emit('update:modelValue', { ...internalModel, bottom: value });
|
|
}
|
|
|
|
function modifValueLeft(value: any) {
|
|
emit('update:modelValue', { ...internalModel, left: value });
|
|
}
|
|
|
|
function modifValueRight(value: any) {
|
|
emit('update:modelValue', { ...internalModel, right: value });
|
|
}
|
|
|
|
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
|
|
watch(() => props.modelValue, (newModel: any) => {
|
|
Object.assign(internalModel, newModel);
|
|
}, { immediate: true });
|
|
|
|
return {
|
|
t,
|
|
shared_consts,
|
|
modifValueTop,
|
|
modifValueBottom,
|
|
modifValueLeft,
|
|
modifValueRight,
|
|
internalModel,
|
|
}
|
|
}
|
|
})
|