- Cataloghi: qualita di stampa e margini

src/components/CMySize/CMySize.ts

@@ -4,6 +4,8 @@ import { IOperators, ISize } from 'model'
 import { useI18n } from '@/boot/i18n'
 import { useQuasar } from 'quasar'
 
+import { tools } from '@store/Modules/tools'
+
 import { CMySlider } from '@src/components/CMySlider'
 
 import { shared_consts } from '@/common/shared_vuejs'
@@ -40,19 +42,50 @@ export default defineComponent({
     const $q = useQuasar()
     const { t } = useI18n()
 
+    const ratio = ref(<number>0)
+    const keepRatio = ref(false)
+
     const internalModel = reactive({ ...props.modelValue })
 
-    function modifValueWidth(value: any) {
+    function modifValueWidth(value: any, changeratio: boolean = true) {
       emit('update:modelValue', { ...internalModel, width: value });
+
+      if (keepRatio.value && changeratio) {
+        let ris = tools.getValueAndSuffix(value)
+        let myheight = ris.value * ( 1 / ratio.value)
+        modifValueHeight(myheight + ris.suffix, false)
+      }
     }
 
-    function modifValueHeight(value: any) {
+    function modifValueHeight(value: any, changeratio: boolean = true) {
       emit('update:modelValue', { ...internalModel, height: value });
+
+      if (keepRatio.value && changeratio) {
+        let ris = tools.getValueAndSuffix(value)
+        let mywidth = ris.value * (ratio.value)
+        modifValueWidth(mywidth+ ris.suffix, false)
+      }
+    }
+
+    function modifValueRatio(value: any) {
+      // modifValueWidth(0)
+
     }
 
     // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
     watch(() => props.modelValue, (newModel: any) => {
       Object.assign(internalModel, newModel);
+
+      if (internalModel.height && internalModel.width) {
+        const heightValue = parseFloat(internalModel.height) || 1;
+
+        if (heightValue === 0) {
+          ratio.value = parseFloat(internalModel.width) / 1; // Usa 1 come fallback
+        } else {
+          ratio.value = parseFloat(internalModel.width) / heightValue;
+        }
+      }
+
     }, { immediate: true });
 
     return {
@@ -60,7 +93,10 @@ export default defineComponent({
       shared_consts,
       modifValueWidth,
       modifValueHeight,
+      modifValueRatio,
       internalModel,
+      ratio,
+      keepRatio,
     }
   }
 })

src/components/CMySize/CMySize.vue

@@ -11,6 +11,24 @@
     </q-banner>
 
     <div v-if="internalModel" class="column">
+      <q-toggle
+        v-model="keepRatio"
+        push
+        label="Mantieni le proporzioni"
+        rounded
+        glossy
+        toggle-color="primary"
+      ></q-toggle>
+      <CMySlider
+        label="Ratio"
+        v-model="ratio"
+        :min="0.3"
+        :max="1.8"
+        color="green"
+        :disable="!keepRatio"
+        @update:model-value="modifValueRatio"
+      ></CMySlider>
+      
       <CMySlider
         label="Width:"
         v-model="internalModel.width"