@verdnatura/vn-front-lib 0.1.3 → 0.1.5

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 {

package/lib/utils/advancedFilters.js

@@ -6,7 +6,7 @@ export const advancedFilters = {
         label: 'equal',
         operator: defaultOperator,
         default: true,
-        expr: (value) => value,
+        expr: (value) => parseValue(value),
         localEval: (a, b) => a == b,
         isBasic: true,
     },
@@ -14,7 +14,7 @@ export const advancedFilters = {
         icon: '≠',
         label: 'distinct',
         operator: 'neq',
-        expr: (value) => ({ neq: value }),
+        expr: (value) => ({ neq: parseValue(value) }),
         isNegation: true,
         localEval: (a, b) => a != b,
     },
@@ -23,7 +23,7 @@ export const advancedFilters = {
         label: 'include',
         operator: 'inq',
         isArray: true,
-        expr: (value) => ({ inq: value }),
+        expr: (value) => ({ inq: parseValue(value) }),
         localEval: (a, b) => b.includes(a),
     },
     nin: {
@@ -31,7 +31,7 @@ export const advancedFilters = {
         label: 'exclude',
         operator: 'nin',
         isArray: true,
-        expr: (value) => ({ nin: value }),
+        expr: (value) => ({ nin: parseValue(value) }),
         isNegation: true,
         localEval: (a, b) => !b.includes(a),
     },
@@ -56,7 +56,7 @@ export const advancedFilters = {
         icon: '<',
         label: 'lessThan',
         operator: 'lt',
-        expr: (value) => ({ lt: value }),
+        expr: (value) => ({ lt: parseValue(value) }),
         localEval: (a, b) => a < b,
         isInput: true,
     },
@@ -65,7 +65,7 @@ export const advancedFilters = {
         label: 'greaterThan',
         operator: 'gt',
         isInput: true,
-        expr: (value) => ({ gt: value }),
+        expr: (value) => ({ gt: parseValue(value) }),
         localEval: (a, b) => a > b,
     },
     lte: {
@@ -73,7 +73,7 @@ export const advancedFilters = {
         label: 'lessThanEqualTo',
         operator: 'lte',
         isInput: true,
-        expr: (value) => ({ lte: value }),
+        expr: (value) => ({ lte: parseValue(value) }),
         localEval: (a, b) => a <= b,
     },
     gte: {
@@ -81,7 +81,7 @@ export const advancedFilters = {
         label: 'greaterThanEqualTo',
         operator: 'gte',
         isInput: true,
-        expr: (value) => ({ gte: value }),
+        expr: (value) => ({ gte: parseValue(value) }),
         localEval: (a, b) => a >= b,
     },
     null: {
@@ -123,3 +123,16 @@ function matchesLike(a, b) {
 
     return new RegExp(`^${pattern}$`, 'i').test(source);
 }
+
+function parseValue(value) {
+    if (!isDate(value)) return value;
+    // YYYY-MM-DD
+    return new Intl.DateTimeFormat('en-CA').format(new Date(value));
+}
+
+function isDate(value) {
+    return (
+        value instanceof Date ||
+        (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value?.split('T')[0]))
+    );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verdnatura/vn-front-lib",
-    "version": "0.1.3",
+    "version": "0.1.5",
     "description": "Vue 3 component and composable library",
     "license": "GPL-3.0",
     "author": "Verdnatura Levante SL",
@@ -56,7 +56,6 @@
     },
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^11.2.5",
-        "@quasar/vite-plugin": "^1.12.0",
         "@vitejs/plugin-vue": "^6.0.8",
         "@vue/test-utils": "^2.4.11",
         "axios": "^1.18.1",