feat: refs #6123 update VnCheckbox and VnLv components for improved info

src/components/common/VnCheckbox.vue

@@ -34,7 +34,7 @@ const checkboxModel = computed({
         />
         <QIcon
             v-if="info"
-            v-bind="$attrs"
+            v-bind="$attrs.infoAttrs"
             class="cursor-info q-ml-sm"
             name="info"
             size="sm"

src/components/ui/VnLv.vue

@@ -3,6 +3,7 @@ import { dashIfEmpty } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import { useClipboard } from 'src/composables/useClipboard';
 import { computed } from 'vue';
+import VnCheckbox from '../common/VnCheckbox.vue';
 
 const $props = defineProps({
     label: { type: String, default: null },
@@ -30,10 +31,11 @@ const val = computed(() => $props.value);
 </script>
 <template>
     <div class="vn-label-value" :data-cy="`${$attrs['data-cy'] ?? 'vnLv'}${label ?? ''}`">
-        <QCheckbox
+        <VnCheckbox
             v-if="typeof value === 'boolean'"
             v-model="val"
             :label="label"
+            :info="info"
             disable
             dense
             size="sm"

src/css/app.scss

@@ -180,7 +180,7 @@ select:-webkit-autofill {
 
 .disabled {
     & .q-checkbox__label {
-        color: var(--vn-text-color);
+        color: var(--vn-label-color);
     }
     & .q-checkbox__inner {
         color: var(--vn-label-color);
@@ -359,4 +359,4 @@ input::-webkit-inner-spin-button {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-}
+}

src/pages/Zone/ZoneControl.vue

@@ -104,6 +104,14 @@ function setFooter(data) {
 }
 </script>
 <template>
+    <FetchData
+        ref="fetchDataRef"
+        url="ProductionConfigs"
+        :filter="{
+            fields: ['isZoneClosedByExpeditionActivated', 'minTicketsToCloseZone'],
+        }"
+        @on-fetch="(data) => (productionConfig = data[0])"
+    />
     <QDialog v-model="productionConfigDialogRef" :class="['vn-row', 'wrap']">
         <FormModelPopup
             url-update="ProductionConfigs/1"
@@ -148,17 +156,6 @@ function setFooter(data) {
                 auto-load
             >
                 <template #top-left>
-                    <FetchData
-                        ref="fetchDataRef"
-                        url="ProductionConfigs"
-                        :filter="{
-                            fields: [
-                                'isZoneClosedByExpeditionActivated',
-                                'minTicketsToCloseZone',
-                            ],
-                        }"
-                        @on-fetch="(data) => (productionConfig = data[0])"
-                    />
                     <VnRow>
                         <VnLv
                             :label="t('minTicketsToCloseZone')"
@@ -168,7 +165,7 @@ function setFooter(data) {
                         <VnLv
                             :label="t('isZoneClosedByExpeditionActivated')"
                             :value="productionConfig?.isZoneClosedByExpeditionActivated"
-                            style="max-width: 100%"
+                            style="color: red !important"
                             info="test"
                         />
                         <QBtn