- cataloghi...

- fix: condividi su Telegram non funzionava errore sull'immagine

src/components/CBorders/CBorders.ts

@@ -0,0 +1,67 @@
+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,
+    }
+  }
+})

src/components/CBorders/CBorders.vue

@@ -0,0 +1,59 @@
+<template>
+  <div style="width: 380px">
+    <q-banner
+      rounded
+      dense
+      class="bg-orange-2 text-red"
+      color="primary q-title"
+      style="text-align: center"
+    >
+      {{ label }}
+    </q-banner>
+
+    <div class="row">
+      <CMySlider
+        label="Top:"
+        v-model="internalModel.top"
+        :min="10"
+        :max="3000"
+        color="green"
+        addstr="px"
+        @update:model-value="modifValueTop"
+      ></CMySlider>
+      <CMySlider
+        label="Bottom:"
+        v-model="internalModel.bottom"
+        :min="10"
+        :max="3000"
+        color="red"
+        addstr="px"
+        @update:model-value="modifValueBottom"
+      ></CMySlider>
+      <CMySlider
+        label="Left:"
+        v-model="internalModel.left"
+        :min="10"
+        :max="3000"
+        color="orange"
+        addstr="px"
+        @update:model-value="modifValueLeft"
+      ></CMySlider>
+      <CMySlider
+        label="Right:"
+        v-model="internalModel.right"
+        :min="10"
+        :max="3000"
+        color="fuchsia"
+        addstr="px"
+        @update:model-value="modifValueRight"
+      ></CMySlider>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CBorders.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CBorders.scss';
+</style>

src/components/CBorders/index.ts

@@ -0,0 +1 @@
+export {default as CBorders} from './CBorders.vue'