- Cataloghi: BestSeller, Novità

src/components/CMySize/CMySize.ts

@@ -21,6 +21,8 @@ export default defineComponent({
       default: () => ({
         width: '',
         height: '',
+        gap: '',
+        fit: '',
       }),
     },
     label: {
@@ -37,6 +39,11 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    fit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     addstr: {
       type: Boolean,
       required: false,
@@ -75,6 +82,9 @@ export default defineComponent({
     function modifValueGap(value: any) {
       emit('update:modelValue', { ...internalModel, gap: value });
     }
+    function modifValueFit(value: any) {
+      emit('update:modelValue', { ...internalModel, fit: value });
+    }
 
     function modifValueRatio(value: any) {
       // modifValueWidth(0)
@@ -104,8 +114,10 @@ export default defineComponent({
       modifValueHeight,
       modifValueRatio,
       modifValueGap,
+      modifValueFit,
       internalModel,
       ratio,
+      tools,
       keepRatio,
     }
   }

src/components/CMySize/CMySize.vue

@@ -28,7 +28,7 @@
         :disable="!keepRatio"
         @update:model-value="modifValueRatio"
       ></CMySlider>
-      
+
       <CMySlider
         label="Width:"
         v-model="internalModel.width"
@@ -57,6 +57,21 @@
         addstr="px"
         @update:model-value="modifValueGap"
       ></CMySlider>
+      <q-select
+        v-if="fit"
+        v-model="internalModel.fit"
+        :options="tools.SelectListFit"
+        label="Dimensione Img"
+        options-dense
+        dense
+        emit-value
+        map-options
+        style="width: 120px"
+        @update:model-value="modifValueFit"
+        fill-input
+        text-color="white"
+      >
+      </q-select>
     </div>
   </div>
 </template>