From a337bdf4746ee8bf617f0972640dd19f22c92dc5 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Tue, 28 Jan 2025 08:30:38 +0100
Subject: [PATCH 1/7] feat: refs #7411 add VnCheckbox component with info
 support

---
 src/components/common/VnCheckbox.vue | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/common/VnCheckbox.vue

diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
new file mode 100644
index 000000000..60a2379f7
--- /dev/null
+++ b/src/components/common/VnCheckbox.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [Boolean],
+        default: null,
+    },
+    label: {
+        type: String,
+        default: null,
+    },
+    info: {
+        type: String,
+        default: null,
+    },
+});
+
+const isChecked = computed({
+  get: () => $props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+</script>
+
+<template>
+    <div>
+        <QCheckbox
+            :label="$props.label"
+            v-model="isChecked"
+        />
+        <QIcon v-if="$props.info" class="cursor-info q-ml-sm" name="info" size="sm">
+            <QTooltip>
+                {{ $props.info }}
+            </QTooltip>
+        </QIcon>
+    </div>
+</template>
-- 
2.40.1


From f7c93c841668958b7efb96053a8d12295584e0b8 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Tue, 28 Jan 2025 08:39:35 +0100
Subject: [PATCH 2/7] refactor: refs #7411 remove unnecessary $props prefix

---
 src/components/common/VnCheckbox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
index 60a2379f7..28890f09b 100644
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@@ -28,12 +28,12 @@ const isChecked = computed({
 <template>
     <div>
         <QCheckbox
-            :label="$props.label"
+            :label="label"
             v-model="isChecked"
         />
-        <QIcon v-if="$props.info" class="cursor-info q-ml-sm" name="info" size="sm">
+        <QIcon v-if="info" class="cursor-info q-ml-sm" name="info" size="sm">
             <QTooltip>
-                {{ $props.info }}
+                {{ info }}
             </QTooltip>
         </QIcon>
     </div>
-- 
2.40.1


From d0a0d19be2804e7f8f82f23057a30971eec36050 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Tue, 28 Jan 2025 14:16:59 +0100
Subject: [PATCH 3/7] feat: refs #7411 integrate VnCheckbox component across
 multiple forms with info support

---
 src/components/RefundInvoiceForm.vue          | 15 +++----
 src/components/TransferInvoiceForm.vue        | 15 +++----
 src/components/common/VnCheckbox.vue          |  2 +-
 .../Account/Card/AccountDescriptorMenu.vue    | 17 +++-----
 .../Customer/Card/CustomerFiscalData.vue      | 30 ++++++--------
 src/pages/Item/Card/ItemBasicData.vue         | 39 +++++++------------
 .../Supplier/Card/SupplierFiscalData.vue      | 22 +++++------
 .../Ticket/Card/BasicData/TicketBasicData.vue | 14 +++----
 8 files changed, 60 insertions(+), 94 deletions(-)

diff --git a/src/components/RefundInvoiceForm.vue b/src/components/RefundInvoiceForm.vue
index 590acede0..6dcb8b390 100644
--- a/src/components/RefundInvoiceForm.vue
+++ b/src/components/RefundInvoiceForm.vue
@@ -9,6 +9,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const $props = defineProps({
     invoiceOutData: {
@@ -131,15 +132,11 @@ const refund = async () => {
                         :required="true"
                     /> </VnRow
                 ><VnRow>
-                    <div>
-                        <QCheckbox
-                            :label="t('Inherit warehouse')"
-                            v-model="invoiceParams.inheritWarehouse"
-                        />
-                        <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                            <QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
-                        </QIcon>
-                    </div>
+                    <VnCheckbox
+                        v-model="invoiceParams.inheritWarehouse"
+                        :label="t('Inherit warehouse')"
+                        :info="t('Inherit warehouse tooltip')"
+                    />
                 </VnRow>
             </template>
         </FormPopup>
diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index aa71070d6..c4ef1454a 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -10,6 +10,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import VnCheckbox from './common/VnCheckbox.vue';
 
 const $props = defineProps({
     invoiceOutData: {
@@ -186,15 +187,11 @@ const makeInvoice = async () => {
                     />
                 </VnRow>
                 <VnRow>
-                    <div>
-                        <QCheckbox
-                            :label="t('Bill destination client')"
-                            v-model="checked"
-                        />
-                        <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                            <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
-                        </QIcon>
-                    </div>
+                    <VnCheckbox
+                        v-model="checked"
+                        :label="t('Bill destination client')"
+                        :info="t('transferInvoiceInfo')"
+                    />
                 </VnRow>
             </template>
         </FormPopup>
diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
index 28890f09b..e3bd4de66 100644
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@@ -31,7 +31,7 @@ const isChecked = computed({
             :label="label"
             v-model="isChecked"
         />
-        <QIcon v-if="info" class="cursor-info q-ml-sm" name="info" size="sm">
+        <QIcon v-if="info" class="cursor-info q-ml-sm" name="info" size="sm" v-bind="$attrs">
             <QTooltip>
                 {{ info }}
             </QTooltip>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index ccf029e44..dab8ea442 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -12,6 +12,7 @@ import VnInputPassword from 'src/components/common/VnInputPassword.vue';
 import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const $props = defineProps({
     hasAccount: {
@@ -121,18 +122,12 @@ onMounted(() => {
         :promise="sync"
     >
         <template #customHTML>
-            {{ shouldSyncPassword }}
-            <QCheckbox
-                :label="t('account.card.actions.sync.checkbox')"
+            <VnCheckbox
                 v-model="shouldSyncPassword"
-                class="full-width"
-                clearable
-                clear-icon="close"
-            >
-                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
-                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
-                </QIcon></QCheckbox
-            >
+                :label="t('account.card.actions.sync.checkbox')"
+                :info="t('account.card.actions.sync.tooltip')"
+                color="primary"
+            />
             <VnInputPassword
                 v-if="shouldSyncPassword"
                 :label="t('login.password')"
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index 8f2c4efb0..f2b6b1147 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -110,14 +111,11 @@ function handleLocation(data, location) {
             </VnRow>
             <VnRow>
                 <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
-                <div>
-                    <QCheckbox :label="t('globals.isVies')" v-model="data.isVies" />
-                    <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                        <QTooltip>
-                            {{ t('whenActivatingIt') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                <VnCheckbox
+                    v-model="data.isVies"
+                    :label="t('globals.isVies')"
+                    :info="t('whenActivatingIt')"    
+                />
             </VnRow>
 
             <VnRow>
@@ -129,17 +127,11 @@ function handleLocation(data, location) {
             </VnRow>
 
             <VnRow>
-                <div>
-                    <QCheckbox
-                        :label="t('Is equalizated')"
-                        v-model="data.isEqualizated"
-                    />
-                    <QIcon class="cursor-info q-ml-sm" name="info" size="sm">
-                        <QTooltip>
-                            {{ t('inOrderToInvoice') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                <VnCheckbox                    
+                    v-model="data.isEqualizated"
+                    :label="t('Is equalizated')"
+                    :info="t('inOrderToInvoice')"
+                />
                 <QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
             </VnRow>
 
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index 4c96401f3..163e90ee0 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -11,6 +11,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterItemForm from 'src/components/FilterItemForm.vue';
 import CreateIntrastatForm from './CreateIntrastatForm.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -209,30 +210,20 @@ const onIntrastatCreated = (response, formData) => {
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div>
-                    <QCheckbox
-                        v-model="data.isFragile"
-                        :label="t('item.basicData.isFragile')"
-                        class="q-mr-sm"
-                    />
-                    <QIcon name="info" class="cursor-pointer" size="xs">
-                        <QTooltip max-width="300px">
-                            {{ t('item.basicData.isFragileTooltip') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
-                <div>
-                    <QCheckbox
-                        v-model="data.isPhotoRequested"
-                        :label="t('item.basicData.isPhotoRequested')"
-                        class="q-mr-sm"
-                    />
-                    <QIcon name="info" class="cursor-pointer" size="xs">
-                        <QTooltip>
-                            {{ t('item.basicData.isPhotoRequestedTooltip') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                <VnCheckbox
+                    v-model="data.isFragile"
+                    :label="t('item.basicData.isFragile')"
+                    :info="t('item.basicData.isFragileTooltip')"
+                    class="q-mr-sm"
+                    size="xs"
+                />
+                <VnCheckbox
+                    v-model="data.isPhotoRequested"
+                    :label="t('item.basicData.isPhotoRequested')"
+                    :info="t('item.basicData.isPhotoRequestedTooltip')"
+                    class="q-mr-sm"
+                    size="xs"
+                />
             </VnRow>
             <VnRow>
                 <VnInput
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index e569eb236..ecee5b76b 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -182,18 +183,11 @@ function handleLocation(data, location) {
                         v-model="data.isTrucker"
                         :label="t('supplier.fiscalData.isTrucker')"
                     />
-                    <div class="row items-center">
-                        <QCheckbox v-model="data.isVies" :label="t('globals.isVies')" />
-                        <QIcon name="info" size="xs" class="cursor-pointer q-ml-sm">
-                            <QTooltip>
-                                {{
-                                    t(
-                                        'When activating it, do not enter the country code in the ID field.'
-                                    )
-                                }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
+                    <VnCheckbox
+                        v-model="data.isVies"
+                        :label="t('globals.isVies')" 
+                        :info="t('whenActivatingIt')" 
+                    />
                 </div>
             </VnRow>
         </template>
@@ -201,6 +195,8 @@ function handleLocation(data, location) {
 </template>
 
 <i18n>
+en:
+    whenActivatingIt: When activating it, do not enter the country code in the ID field.
 es:
-    When activating it, do not enter the country code in the ID field.: Al activarlo, no informar el código del país en el campo nif
+    whenActivatingIt: Al activarlo, no informar el código del país en el campo nif.
 </i18n>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicData.vue b/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
index c6a85c287..bdbc20693 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'filters/index';
 import { useRole } from 'src/composables/useRole';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const haveNegatives = defineModel('haveNegatives', { type: Boolean, required: true });
 const formData = defineModel({ type: Object, required: true });
@@ -182,22 +183,19 @@ onMounted(async () => {
         </QCard>
         <QCard
             v-if="haveNegatives"
-            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            class="q-pa-xs q-mb-md q-ma-md color-vn-text"
             bordered
             flat
             style="border-color: black"
         >
             <QCardSection horizontal class="flex row items-center">
-                <QCheckbox
-                    :label="t('basicData.withoutNegatives')"
+                <VnCheckbox
                     v-model="formData.withoutNegatives"
+                    :label="t('basicData.withoutNegatives')"
+                    :info="t('basicData.withoutNegativesInfo')"
                     :toggle-indeterminate="false"
+                    size="xs"
                 />
-                <QIcon name="info" size="xs" class="q-ml-sm">
-                    <QTooltip max-width="350px">
-                        {{ t('basicData.withoutNegativesInfo') }}
-                    </QTooltip>
-                </QIcon>
             </QCardSection>
         </QCard>
     </QDrawer>
-- 
2.40.1


From 2e0575052c97de2ea7a6c53a103809ac1738c33a Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Tue, 28 Jan 2025 14:23:28 +0100
Subject: [PATCH 4/7] refactor: refs #7411 update VnCheckbox component to use
 defineModel for modelValue binding

---
 src/components/common/VnCheckbox.vue | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
index e3bd4de66..09b054e54 100644
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@@ -1,13 +1,9 @@
 <script setup>
-import { computed } from 'vue';
+import { defineModel } from 'vue';
 
-const emit = defineEmits(['update:modelValue']);
+const modelValue = defineModel({ type: Boolean, default: false });
 
 const $props = defineProps({
-    modelValue: {
-        type: [Boolean],
-        default: null,
-    },
     label: {
         type: String,
         default: null,
@@ -17,19 +13,13 @@ const $props = defineProps({
         default: null,
     },
 });
-
-const isChecked = computed({
-  get: () => $props.modelValue,
-  set: (value) => emit('update:modelValue', value),
-});
-
 </script>
 
 <template>
     <div>
         <QCheckbox
             :label="label"
-            v-model="isChecked"
+            v-model="modelValue"
         />
         <QIcon v-if="info" class="cursor-info q-ml-sm" name="info" size="sm" v-bind="$attrs">
             <QTooltip>
-- 
2.40.1


From cc07cc78247d25b66a9c76e3c1a436fe26cdb62e Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Fri, 31 Jan 2025 08:50:35 +0100
Subject: [PATCH 5/7] refactor: refs #7411 update VnCheckbox component to use
 v-bind for attributes

---
 src/components/common/VnCheckbox.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
index 09b054e54..9c379cc33 100644
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@@ -4,10 +4,6 @@ import { defineModel } from 'vue';
 const modelValue = defineModel({ type: Boolean, default: false });
 
 const $props = defineProps({
-    label: {
-        type: String,
-        default: null,
-    },
     info: {
         type: String,
         default: null,
@@ -18,10 +14,16 @@ const $props = defineProps({
 <template>
     <div>
         <QCheckbox
-            :label="label"
+            v-bind="$attrs"
             v-model="modelValue"
         />
-        <QIcon v-if="info" class="cursor-info q-ml-sm" name="info" size="sm" v-bind="$attrs">
+        <QIcon 
+            v-if="info" 
+            v-bind="$attrs"
+            class="cursor-info q-ml-sm" 
+            name="info" 
+            size="sm"
+        >
             <QTooltip>
                 {{ info }}
             </QTooltip>
-- 
2.40.1


From c8754ae4df282a4869f9ca0595014cefbdccb768 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Fri, 31 Jan 2025 08:51:24 +0100
Subject: [PATCH 6/7] refactor: refs #7411 add clearable and clear-icon
 properties to sync password checkbox

---
 src/pages/Account/Card/AccountDescriptorMenu.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index dab8ea442..2792ca963 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -126,6 +126,8 @@ onMounted(() => {
                 v-model="shouldSyncPassword"
                 :label="t('account.card.actions.sync.checkbox')"
                 :info="t('account.card.actions.sync.tooltip')"
+                clearable
+                clear-icon="close"
                 color="primary"
             />
             <VnInputPassword
-- 
2.40.1


From 18da0e992264a393f780aaf6c8236ff57f892d41 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Mon, 10 Feb 2025 09:42:34 +0100
Subject: [PATCH 7/7] refactor: refs #7411 bind event listeners to QCheckbox in
 VnCheckbox component

---
 src/components/common/VnCheckbox.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/VnCheckbox.vue b/src/components/common/VnCheckbox.vue
index 9c379cc33..6f701b97e 100644
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@@ -15,6 +15,7 @@ const $props = defineProps({
     <div>
         <QCheckbox
             v-bind="$attrs"
+            v-on="$attrs"
             v-model="modelValue"
         />
         <QIcon 
-- 
2.40.1