@verdnatura/vn-front-lib 0.0.13 → 0.1.0

package/dist/composables.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./composables-BRRRUB-j.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-BTDp8DJ1.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-DKarSsx2.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-CAAnziP1.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-BRRRUB-j.cjs"),t=require("./components-cImd3SSZ.cjs");function n(e){for(let n in t.t)e.component(n,t.t[n])}var r={install:n};exports.VnConfirm=t.s,exports.VnFetch=t.r,exports.VnForm=t.n,exports.VnInput=t.i,exports.VnSkeletonForm=t.o,exports.VnSpinner=t.a,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-zdOTH0ZE.cjs"),t=require("./composables-BTDp8DJ1.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)}.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-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}
 /*$vite$:1*/

package/dist/vn-front-lib.js

@@ -1,9 +1,10 @@
-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-DKarSsx2.js";
-import { a as _, i as v, n as y, o as b, r as x, s as S, t as C } from "./components-D0h9vBQX.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-CAAnziP1.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-BN97tI4h.js";
 //#region lib/main.js
-function w(e) {
-	for (let t in C) e.component(t, C[t]);
+function E(e, t = {}) {
+	for (let t in T) e.component(t, T[t]);
+	i(t.i18n);
 }
-var T = { install: w };
+var D = { install: E };
 //#endregion
-export { S as VnConfirm, x as VnFetch, y as VnForm, v as VnInput, b as VnSkeletonForm, _ as VnSpinner, T as default, 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 };
+export { b as VnConfirm, S as VnDate, C as VnFetch, x as VnForm, _ as VnInput, y as VnInputDate, v as VnSkeletonForm, w as VnSpinner, D as default, 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/lib/components/index.js

@@ -1,6 +1,8 @@
 export { default as VnConfirm } from './dialogs/VnConfirm.vue';
 export { default as VnSkeletonForm } from './feedback/VnSkeletonForm.vue';
 export { default as VnSpinner } from './feedback/VnSpinner.vue';
+export { default as VnDate } from './inputs/VnDate.vue';
 export { default as VnInput } from './inputs/VnInput.vue';
+export { default as VnInputDate } from './inputs/VnInputDate.vue';
 export { default as VnFetch } from './models/VnFetch.vue';
 export { default as VnForm } from './models/VnForm.vue';

package/lib/components/inputs/VnDate.vue

@@ -0,0 +1,34 @@
+<script setup>
+const model = defineModel({type: [String, Number], default: ""});
+</script>
+<template>
+  <QDate
+    v-model="model"
+    :today-btn="true"
+    :options="$attrs.options"
+    autocomplete="off"
+  />
+</template>
+<style lang="scss" scoped>
+.q-date {
+  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__header) {
+    padding: 2px 2px 5px 12px;
+    height: 60px;
+  }
+}
+</style>

package/lib/components/inputs/VnInputDate.vue

@@ -0,0 +1,275 @@
+<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 { 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 $props = defineProps({
+  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 dateFormat = "DD/MM/YYYY";
+const isPopupOpen = ref();
+const hover = ref();
+
+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);
+});
+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 styleAttrs = computed(() => {
+  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 validateAndCleanInput = (value) => {
+  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;
+};
+
+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},
+);
+
+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);
+        }
+      });
+    });
+  }
+});
+
+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;
+  }
+
+  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;
+
+  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;
+  }
+
+  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);
+
+  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(),
+    );
+  }
+
+  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 = "";
+};
+
+const handleEnter = (event) => {
+  formatDate();
+
+  nextTick(() => {
+    const newEvent = new KeyboardEvent("keydown", {
+      key: "Enter",
+      code: "Enter",
+      bubbles: true,
+      cancelable: true,
+    });
+    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;
+          "
+        >
+          <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:
+        Open date: Abrir fecha
+        Remove: Eliminar
+</i18n>

package/lib/composables/useGlobalMessages.js

@@ -1,12 +1,15 @@
+import { load } from 'js-yaml';
+
 export let i18n;
 export function useGlobalMessages(_i18n) {
     i18n = _i18n;
     const files = import.meta.glob('../i18n/locale/*.yml', {
         eager: true,
         import: 'default',
+        query: '?raw',
     });
     for (const [file, content] of Object.entries(files)) {
         const lang = file.split('/').pop().split('.')[0];
-        i18n.global.mergeLocaleMessage(lang, { vnFrontLib: content });
+        i18n.global.mergeLocaleMessage(lang, load(content));
     }
 }

package/lib/main.js

@@ -1,11 +1,13 @@
 export * from './components';
 export * from './composables';
 import * as components from './components';
+import { useGlobalMessages } from './composables/useGlobalMessages';
 
-function install(app) {
+function install(app, options = {}) {
     for (const name in components) {
         app.component(name, components[name]);
     }
+    useGlobalMessages(options.i18n);
 }
 
 export default {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verdnatura/vn-front-lib",
-    "version": "0.0.13",
+    "version": "0.1.0",
     "description": "Vue 3 component and composable library",
     "license": "GPL-3.0",
     "author": "Verdnatura Levante SL",
@@ -52,7 +52,7 @@
         "fmt:check": "oxfmt --check"
     },
     "devDependencies": {
-        "@intlify/unplugin-vue-i18n": "^11.2.4",
+        "@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",
@@ -77,5 +77,8 @@
         "vue": ">=3.5.0",
         "vue-i18n": ">=9.0.0",
         "vue-router": ">=4.5.0"
+    },
+    "dependencies": {
+        "js-yaml": "^5.4.2"
     }
 }