@verdnatura/vn-front-lib 0.1.4 → 0.1.6

package/dist/composables.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./composables-yeEr4YMb.cjs");exports.fetchLocalData=e.n,exports.focusFirstInput=e.p,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return e.d}}),exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.h,exports.useArrayData=e.m,exports.useGlobalMessages=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.g,exports.useState=e.t,exports.useValidator=e._;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./composables-BTfGi73U.cjs");exports.fetchLocalData=e.n,exports.focusFirstInput=e.p,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return e.d}}),exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.h,exports.useArrayData=e.m,exports.useGlobalMessages=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.g,exports.useState=e.t,exports.useValidator=e._;

package/dist/composables.js

@@ -1,2 +1,2 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-BDoUoFC_.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-xGr9z2hA.js";
 export { u as fetchLocalData, f as focusFirstInput, t as getObjectByKeys, d as getObjectDifferences, p as getRemoteAndLocalParams, r as i18n, m as isComparableObject, n as isSameValue, s as requestData, o as tMobile, l as useArrayData, i as useGlobalMessages, g as useNotify, c as useObjectComparison, a as useRequired, h as useState, e as useValidator };

package/dist/vn-front-lib.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./composables-yeEr4YMb.cjs"),t=require("./components-Bzkod14A.cjs");function n(n,r={}){for(let e in t.t)n.component(e,t.t[e]);e.f(r.i18n)}var r={install:n};exports.VnConfirm=t.l,exports.VnDate=t.o,exports.VnFetch=t.r,exports.VnForm=t.n,exports.VnInput=t.a,exports.VnInputDate=t.i,exports.VnSkeletonForm=t.c,exports.VnSpinner=t.s,exports.default=r,exports.fetchLocalData=e.n,exports.focusFirstInput=e.p,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return e.d}}),exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.h,exports.useArrayData=e.m,exports.useGlobalMessages=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.g,exports.useState=e.t,exports.useValidator=e._;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./components-S2tB-VQF.cjs"),t=require("./composables-BTfGi73U.cjs");function n(n,r={}){for(let t in e.t)n.component(t,e.t[t]);t.f(r.i18n)}var r={install:n};exports.VnConfirm=e.l,exports.VnDate=e.o,exports.VnFetch=e.r,exports.VnForm=e.n,exports.VnInput=e.a,exports.VnInputDate=e.i,exports.VnSkeletonForm=e.c,exports.VnSpinner=e.s,exports.default=r,exports.fetchLocalData=t.n,exports.focusFirstInput=t.p,exports.getObjectByKeys=t.a,exports.getObjectDifferences=t.o,exports.getRemoteAndLocalParams=t.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return t.d}}),exports.isComparableObject=t.s,exports.isSameValue=t.c,exports.requestData=t.i,exports.tMobile=t.h,exports.useArrayData=t.m,exports.useGlobalMessages=t.f,exports.useNotify=t.u,exports.useObjectComparison=t.l,exports.useRequired=t.g,exports.useState=t.t,exports.useValidator=t._;

package/dist/vn-front-lib.css

@@ -1,2 +1,2 @@
-.q-card[data-v-67508d3b]{white-space:pre-line;min-width:350px}.vn-spinner[data-v-e5edebae]{border:3px solid color-mix(in srgb, var(--vn-label-color) 15%, transparent);border-top-color:var(--q-primary);box-sizing:border-box;border-radius:50%;min-width:16px;min-height:16px;animation:.7s cubic-bezier(.4,.15,.6,.85) infinite vn-spin-e5edebae}@keyframes vn-spin-e5edebae{to{transform:rotate(360deg)}}.vn-spinner-fade-enter-active[data-v-e5edebae],.vn-spinner-fade-leave-active[data-v-e5edebae]{transition:opacity .3s,transform .3s}.vn-spinner-fade-enter-from[data-v-e5edebae],.vn-spinner-fade-leave-to[data-v-e5edebae]{opacity:0;transform:scale(.6)}.q-date[data-v-2705e766]{width:245px;min-width:unset}.q-date[data-v-2705e766] .q-date__calendar{padding-bottom:0}.q-date[data-v-2705e766] .q-date__view{min-height:245px;padding:8px}.q-date[data-v-2705e766] .q-date__calendar-days-container{min-height:160px;height:unset}.q-date[data-v-2705e766] .q-date__header{height:60px;padding:2px 2px 5px 12px}.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:var(--q-color-primary);transform:scale(1.2)}.q-notifications[data-v-4f7a49f7]{color:#000}.q-card[data-v-4f7a49f7]{padding:32px}
+.q-card[data-v-087d2dc1]{white-space:pre-line;min-width:350px}.vn-spinner[data-v-e5edebae]{border:3px solid color-mix(in srgb, var(--vn-label-color) 15%, transparent);border-top-color:var(--q-primary);box-sizing:border-box;border-radius:50%;min-width:16px;min-height:16px;animation:.7s cubic-bezier(.4,.15,.6,.85) infinite vn-spin-e5edebae}@keyframes vn-spin-e5edebae{to{transform:rotate(360deg)}}.vn-spinner-fade-enter-active[data-v-e5edebae],.vn-spinner-fade-leave-active[data-v-e5edebae]{transition:opacity .3s,transform .3s}.vn-spinner-fade-enter-from[data-v-e5edebae],.vn-spinner-fade-leave-to[data-v-e5edebae]{opacity:0;transform:scale(.6)}.q-date[data-v-8338d4d1]{width:245px;min-width:unset}.q-date[data-v-8338d4d1] .q-date__calendar{padding-bottom:0}.q-date[data-v-8338d4d1] .q-date__view{min-height:245px;padding:8px}.q-date[data-v-8338d4d1] .q-date__calendar-days-container{min-height:160px;height:unset}.q-date[data-v-8338d4d1] .q-date__header{height:60px;padding:2px 2px 5px 12px}.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:var(--q-color-primary);transform:scale(1.2)}.q-notifications[data-v-addfa85d]{color:#000}.q-card[data-v-addfa85d]{padding:32px}
 /*$vite$:1*/

package/dist/vn-front-lib.js

@@ -1,5 +1,5 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-BDoUoFC_.js";
-import { a as _, c as v, i as y, l as b, n as x, o as S, r as C, s as w, t as T } from "./components-CGtJrHS1.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-xGr9z2hA.js";
+import { a as _, c as v, i as y, l as b, n as x, o as S, r as C, s as w, t as T } from "./components-juAevl7-.js";
 //#region lib/main.js
 function E(e, t = {}) {
 	for (let t in T) e.component(t, T[t]);

package/lib/components/dialogs/VnConfirm.vue

@@ -1,6 +1,15 @@
 <script setup>
 import { ref } from 'vue';
 import * as quasarPkg from 'quasar';
+import {
+    QDialog,
+    QCard,
+    QCardSection,
+    QCardActions,
+    QAvatar,
+    QSpace,
+    QBtn,
+} from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -42,7 +51,11 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['confirm', 'cancel', ...quasarPkg.useDialogPluginComponent.emits]);
+const emit = defineEmits([
+    'confirm',
+    'cancel',
+    ...quasarPkg.useDialogPluginComponent.emits,
+]);
 defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =

package/lib/components/feedback/VnSkeletonForm.vue

@@ -1,3 +1,6 @@
+<script setup>
+import { QSkeleton } from 'quasar';
+</script>
 <template>
     <div class="row q-gutter-md q-mb-md">
         <QSkeleton type="QInput" class="col" square />

package/lib/components/inputs/VnDate.vue

@@ -1,34 +1,35 @@
 <script setup>
-const model = defineModel({type: [String, Number], default: ""});
+import { QDate } from 'quasar';
+const model = defineModel({ type: [String, Number], default: '' });
 </script>
 <template>
-  <QDate
-    v-model="model"
-    :today-btn="true"
-    :options="$attrs.options"
-    autocomplete="off"
-  />
+    <QDate
+        v-model="model"
+        :today-btn="true"
+        :options="$attrs.options"
+        autocomplete="off"
+    />
 </template>
 <style lang="scss" scoped>
 .q-date {
-  width: 245px;
-  min-width: unset;
+    width: 245px;
+    min-width: unset;
 
-  :deep(.q-date__calendar) {
-    padding-bottom: 0;
-  }
-  :deep(.q-date__view) {
-    min-height: 245px;
-    padding: 8px;
-  }
-  :deep(.q-date__calendar-days-container) {
-    min-height: 160px;
-    height: unset;
-  }
+    :deep(.q-date__calendar) {
+        padding-bottom: 0;
+    }
+    :deep(.q-date__view) {
+        min-height: 245px;
+        padding: 8px;
+    }
+    :deep(.q-date__calendar-days-container) {
+        min-height: 160px;
+        height: unset;
+    }
 
-  :deep(.q-date__header) {
-    padding: 2px 2px 5px 12px;
-    height: 60px;
-  }
+    :deep(.q-date__header) {
+        padding: 2px 2px 5px 12px;
+        height: 60px;
+    }
 }
 </style>

package/lib/components/inputs/VnInput.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref, useAttrs, nextTick, onMounted } from 'vue';
+import { QInput, QIcon, QTooltip } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRequired } from 'lib/composables/useRequired';
 

package/lib/components/inputs/VnInputDate.vue

@@ -1,39 +1,39 @@
 <script setup>
-import {nextTick, watch, computed, ref, useAttrs} from "vue";
-import {useI18n} from "vue-i18n";
-import {date, getCssVar} from "quasar";
-import VnDate from "./VnDate.vue";
+import { nextTick, watch, computed, ref, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date, getCssVar, QInput, QIcon, QTooltip, QMenu, QDialog } from 'quasar';
+import VnDate from './VnDate.vue';
 import { useRequired } from '@verdnatura/vn-front-lib/composables';
 
 const $attrs = useAttrs();
-const {t} = useI18n();
-const {isRequired, requiredFieldRule} = useRequired($attrs);
-const model = defineModel({type: [String, Date, Object]});
+const { t } = useI18n();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
+const model = defineModel({ type: [String, Date, Object] });
 
 const $props = defineProps({
-  isOutlined: {
-    type: Boolean,
-    default: false,
-  },
-  showEvent: {
-    type: Boolean,
-    default: true,
-  },
-  hideYearNavigation: {
-    type: Boolean,
-    default: false,
-  },
-  clearOnHover: {
-    type: Boolean,
-    default: false,
-  },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+    showEvent: {
+        type: Boolean,
+        default: true,
+    },
+    hideYearNavigation: {
+        type: Boolean,
+        default: false,
+    },
+    clearOnHover: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const vnInputDateRef = ref(null);
-const errColor = getCssVar("negative");
-const textColor = ref("");
+const errColor = getCssVar('negative');
+const textColor = ref('');
 
-const dateFormat = "DD/MM/YYYY";
+const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
 const hover = ref();
 
@@ -41,232 +41,232 @@ const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 
 const val = computed(() => model.value?.neq || model.value?.nin || model.value);
 const inputTitle = computed(() => {
-  if (!val.value) return;
-  return Array.isArray(val.value)
-    ? val.value.map((v) => date.formatDate(new Date(v), dateFormat)).join(", ")
-    : date.formatDate(new Date(val.value), dateFormat);
+    if (!val.value) return;
+    return Array.isArray(val.value)
+        ? val.value.map((v) => date.formatDate(new Date(v), dateFormat)).join(', ')
+        : date.formatDate(new Date(val.value), dateFormat);
 });
 const popupDate = computed(() => {
-  const dateToFormat = Array.isArray(val.value) ? val.value[0] : val.value;
-  return dateToFormat
-    ? date.formatDate(new Date(dateToFormat), "YYYY/MM/DD")
-    : dateToFormat;
+    const dateToFormat = Array.isArray(val.value) ? val.value[0] : val.value;
+    return dateToFormat
+        ? date.formatDate(new Date(dateToFormat), 'YYYY/MM/DD')
+        : dateToFormat;
 });
 const styleAttrs = computed(() => {
-  return $props.isOutlined
-    ? {
-        dense: true,
-        outlined: true,
-        rounded: true,
-      }
-    : {};
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
 });
 
-const inputValue = ref("");
-const dataCy = $attrs["data-cy"] ?? $attrs.label;
-const menuDataCy = dataCy + "_menu";
-const inputDataCy = dataCy + "_inputDate";
+const inputValue = ref('');
+const dataCy = $attrs['data-cy'] ?? $attrs.label;
+const menuDataCy = dataCy + '_menu';
+const inputDataCy = dataCy + '_inputDate';
 
 const validateAndCleanInput = (value) => {
-  if (!value && $attrs.clearable) {
-    inputValue.value = null;
-    model.value = null;
-    return;
-  }
-  inputValue.value = value.replace(/[^0-9./-]/g, "");
+    if (!value && $attrs.clearable) {
+        inputValue.value = null;
+        model.value = null;
+        return;
+    }
+    inputValue.value = value.replace(/[^0-9./-]/g, '');
 };
 
 const manageDate = (date) => {
-  if (!date) return;
-  inputValue.value = date.split("/").reverse().join("/");
-  formatDate();
-  isPopupOpen.value = false;
+    if (!date) return;
+    inputValue.value = date.split('/').reverse().join('/');
+    formatDate();
+    isPopupOpen.value = false;
 };
 
 watch(
-  () => model.value,
-  () => {
-    const dateToFormat = Array.isArray(val.value) ? val.value[0] : val.value;
-    inputValue.value = dateToFormat
-      ? date.formatDate(new Date(dateToFormat), dateFormat)
-      : "";
-  },
-  {immediate: true},
+    () => model.value,
+    () => {
+        const dateToFormat = Array.isArray(val.value) ? val.value[0] : val.value;
+        inputValue.value = dateToFormat
+            ? date.formatDate(new Date(dateToFormat), dateFormat)
+            : '';
+    },
+    { immediate: true },
 );
 
 watch(isPopupOpen, (val) => {
-  if (val && $props.hideYearNavigation) {
-    nextTick(() => {
-      const navButtons = ["back", "type", "forward"];
-      document.querySelectorAll(`.q-date__navigation`).forEach((parent) => {
-        for (let i = 0; i < navButtons.length; i++) {
-          if (parent.lastElementChild)
-            parent.removeChild(parent.lastElementChild);
-        }
-      });
-    });
-  }
+    if (val && $props.hideYearNavigation) {
+        nextTick(() => {
+            const navButtons = ['back', 'type', 'forward'];
+            document.querySelectorAll(`.q-date__navigation`).forEach((parent) => {
+                for (let i = 0; i < navButtons.length; i++) {
+                    if (parent.lastElementChild)
+                        parent.removeChild(parent.lastElementChild);
+                }
+            });
+        });
+    }
 });
 
 const formatDate = () => {
-  let value = inputValue.value;
-  if (!value || value === model.value) {
-    textColor.value = "";
-    return;
-  }
-  const regex =
-    /^([0]?[1-9]|[12][0-9]|3[01])([./-])([0]?[1-9]|1[0-2])([./-](\d{1,4}))?$/;
-  if (!regex.test(value)) {
-    textColor.value = errColor;
-    return;
-  }
+    let value = inputValue.value;
+    if (!value || value === model.value) {
+        textColor.value = '';
+        return;
+    }
+    const regex =
+        /^([0]?[1-9]|[12][0-9]|3[01])([./-])([0]?[1-9]|1[0-2])([./-](\d{1,4}))?$/;
+    if (!regex.test(value)) {
+        textColor.value = errColor;
+        return;
+    }
 
-  value = value.replace(/[.-]/g, "/");
-  const parts = value.split("/");
-  if (parts.length < 2) {
-    textColor.value = errColor;
-    return;
-  }
+    value = value.replace(/[.-]/g, '/');
+    const parts = value.split('/');
+    if (parts.length < 2) {
+        textColor.value = errColor;
+        return;
+    }
 
-  let [day, month, year] = parts;
-  if (day.length === 1) day = "0" + day;
-  if (month.length === 1) month = "0" + month;
+    let [day, month, year] = parts;
+    if (day.length === 1) day = '0' + day;
+    if (month.length === 1) month = '0' + month;
 
-  const currentYear = Date.vnNew().getFullYear();
-  if (!year) year = currentYear;
-  const millennium = currentYear.toString().slice(0, 1);
+    const currentYear = Date.vnNew().getFullYear();
+    if (!year) year = currentYear;
+    const millennium = currentYear.toString().slice(0, 1);
 
-  switch (year.length) {
-    case 1:
-      year = `${millennium}00${year}`;
-      break;
-    case 2:
-      year = `${millennium}0${year}`;
-      break;
-    case 3:
-      year = `${millennium}${year}`;
-      break;
-    case 4:
-      break;
-  }
+    switch (year.length) {
+        case 1:
+            year = `${millennium}00${year}`;
+            break;
+        case 2:
+            year = `${millennium}0${year}`;
+            break;
+        case 3:
+            year = `${millennium}${year}`;
+            break;
+        case 4:
+            break;
+    }
 
-  let isoCandidate = `${year}/${month}/${day}`;
-  isoCandidate = date.formatDate(
-    new Date(isoCandidate).toISOString(),
-    "YYYY-MM-DDTHH:mm:ss.SSSZ",
-  );
-  const [isoYear, isoMonth, isoDay] = isoCandidate.split("-").map((e) => parseInt(e));
-  const parsedDate = new Date(isoYear, isoMonth - 1, isoDay);
+    let isoCandidate = `${year}/${month}/${day}`;
+    isoCandidate = date.formatDate(
+        new Date(isoCandidate).toISOString(),
+        'YYYY-MM-DDTHH:mm:ss.SSSZ',
+    );
+    const [isoYear, isoMonth, isoDay] = isoCandidate.split('-').map((e) => parseInt(e));
+    const parsedDate = new Date(isoYear, isoMonth - 1, isoDay);
 
-  const isValidDate =
-    parsedDate instanceof Date &&
-    !isNaN(parsedDate) &&
-    parsedDate.getFullYear() === parseInt(year) &&
-    parsedDate.getMonth() === parseInt(month) - 1 &&
-    parsedDate.getDate() === parseInt(day);
+    const isValidDate =
+        parsedDate instanceof Date &&
+        !isNaN(parsedDate) &&
+        parsedDate.getFullYear() === parseInt(year) &&
+        parsedDate.getMonth() === parseInt(month) - 1 &&
+        parsedDate.getDate() === parseInt(day);
 
-  if (!isValidDate) {
-    textColor.value = errColor;
-    return;
-  }
+    if (!isValidDate) {
+        textColor.value = errColor;
+        return;
+    }
 
-  if (val.value) {
-    const originalVal = Array.isArray(val.value) ? val.value[0] : val.value;
-    const original =
-      originalVal instanceof Date ? originalVal : new Date(originalVal);
-    parsedDate.setHours(
-      original.getHours(),
-      original.getMinutes(),
-      original.getSeconds(),
-      original.getMilliseconds(),
-    );
-  }
+    if (val.value) {
+        const originalVal = Array.isArray(val.value) ? val.value[0] : val.value;
+        const original =
+            originalVal instanceof Date ? originalVal : new Date(originalVal);
+        parsedDate.setHours(
+            original.getHours(),
+            original.getMinutes(),
+            original.getSeconds(),
+            original.getMilliseconds(),
+        );
+    }
 
-  const iso = parsedDate.toISOString();
-  if (model.value?.neq) model.value = {neq: iso};
-  else if (model.value?.nin) model.value = {nin: [...model.value.nin, iso]};
-  else model.value = iso;
+    const iso = parsedDate.toISOString();
+    if (model.value?.neq) model.value = { neq: iso };
+    else if (model.value?.nin) model.value = { nin: [...model.value.nin, iso] };
+    else model.value = iso;
 
-  textColor.value = "";
+    textColor.value = '';
 };
 
 const handleEnter = (event) => {
-  formatDate();
+    formatDate();
 
-  nextTick(() => {
-    const newEvent = new KeyboardEvent("keydown", {
-      key: "Enter",
-      code: "Enter",
-      bubbles: true,
-      cancelable: true,
+    nextTick(() => {
+        const newEvent = new KeyboardEvent('keydown', {
+            key: 'Enter',
+            code: 'Enter',
+            bubbles: true,
+            cancelable: true,
+        });
+        vnInputDateRef.value?.$el?.dispatchEvent(newEvent);
     });
-    vnInputDateRef.value?.$el?.dispatchEvent(newEvent);
-  });
 };
 </script>
 
 <template>
-  <div @mouseover="hover = true" @mouseleave="hover = false">
-    <QInput
-      ref="vnInputDateRef"
-      v-model="inputValue"
-      class="vn-input-date"
-      placeholder="dd/mm/aaaa"
-      v-bind="{...$attrs, ...styleAttrs}"
-      :class="{required: isRequired}"
-      :rules="mixinRules"
-      :clearable="false"
-      :input-style="{color: textColor}"
-      :input-class="{'text-strike': !!(model?.neq || model?.nin)}"
-      :title="inputTitle"
-      @click="isPopupOpen = !isPopupOpen"
-      @keydown="isPopupOpen = false"
-      @focusout="formatDate"
-      @keydown.enter.prevent="handleEnter"
-      hide-bottom-space
-      :data-cy="inputDataCy"
-      @update:model-value="validateAndCleanInput"
-      autocomplete="off"
-    >
-      <template #append>
-        <QIcon
-          name="close"
-          size="xs"
-          class="cursor-pointer"
-          v-if="
-            ($attrs.clearable == undefined || $attrs.clearable) &&
-            (!clearOnHover || hover) &&
-            inputValue &&
-            !$attrs.disable
-          "
-          @click="
-            vnInputDateRef.focus();
-            inputValue = null;
-            model = null;
-            isPopupOpen = false;
-          "
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            ref="vnInputDateRef"
+            v-model="inputValue"
+            class="vn-input-date"
+            placeholder="dd/mm/aaaa"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: isRequired }"
+            :rules="mixinRules"
+            :clearable="false"
+            :input-style="{ color: textColor }"
+            :input-class="{ 'text-strike': !!(model?.neq || model?.nin) }"
+            :title="inputTitle"
+            @click="isPopupOpen = !isPopupOpen"
+            @keydown="isPopupOpen = false"
+            @focusout="formatDate"
+            @keydown.enter.prevent="handleEnter"
+            hide-bottom-space
+            :data-cy="inputDataCy"
+            @update:model-value="validateAndCleanInput"
+            autocomplete="off"
         >
-          <QTooltip>{{ t("Remove") }}</QTooltip>
-        </QIcon>
-      </template>
-      <QMenu
-        v-if="$q.screen.gt.xs"
-        transition-show="scale"
-        transition-hide="scale"
-        v-model="isPopupOpen"
-        anchor="bottom left"
-        self="top start"
-        :no-focus="true"
-        :no-parent-event="true"
-        :data-cy="menuDataCy"
-      >
-        <VnDate v-model="popupDate" @update:model-value="manageDate" />
-      </QMenu>
-      <QDialog v-else v-model="isPopupOpen">
-        <VnDate v-model="popupDate" @update:model-value="manageDate" />
-      </QDialog>
-    </QInput>
-  </div>
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    class="cursor-pointer"
+                    v-if="
+                        ($attrs.clearable == undefined || $attrs.clearable) &&
+                        (!clearOnHover || hover) &&
+                        inputValue &&
+                        !$attrs.disable
+                    "
+                    @click="
+                        vnInputDateRef.focus();
+                        inputValue = null;
+                        model = null;
+                        isPopupOpen = false;
+                    "
+                >
+                    <QTooltip>{{ t('Remove') }}</QTooltip>
+                </QIcon>
+            </template>
+            <QMenu
+                v-if="$q.screen.gt.xs"
+                transition-show="scale"
+                transition-hide="scale"
+                v-model="isPopupOpen"
+                anchor="bottom left"
+                self="top start"
+                :no-focus="true"
+                :no-parent-event="true"
+                :data-cy="menuDataCy"
+            >
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+            </QMenu>
+            <QDialog v-else v-model="isPopupOpen">
+                <VnDate v-model="popupDate" @update:model-value="manageDate" />
+            </QDialog>
+        </QInput>
+    </div>
 </template>
 <i18n>
     es:

package/lib/components/models/VnForm.vue

@@ -4,6 +4,7 @@ import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import * as quasarPkg from 'quasar';
+import { QInnerLoading, QForm, QCard, QCardSection, QBtnGroup, QBtn } from 'quasar';
 import {
     useState,
     useValidator,

package/lib/composables/useNotify.js

@@ -1,4 +1,4 @@
-import * as quasar from 'quasar';
+import { Notify } from 'quasar';
 import { i18n } from './useGlobalMessages';
 
 export function useNotify() {
@@ -14,7 +14,7 @@ export function useNotify() {
             icon: icon ? icon : defaultIcons[type],
             ...opts,
         };
-        quasar.Notify.create(payload);
+        Notify.create(payload);
     };
 
     return {