@verdnatura/vn-front-lib 0.0.10 → 0.0.12

package/dist/utils.js

@@ -0,0 +1,131 @@
+import e from "axios";
+//#region lib/utils/advancedFilters.js
+var t = "eq", n = {
+	eq: {
+		icon: "=",
+		label: "equal",
+		operator: "eq",
+		default: !0,
+		expr: (e) => e,
+		localEval: (e, t) => e == t,
+		isBasic: !0
+	},
+	neq: {
+		icon: "≠",
+		label: "distinct",
+		operator: "neq",
+		expr: (e) => ({ neq: e }),
+		isNegation: !0,
+		localEval: (e, t) => e != t
+	},
+	inq: {
+		icon: "∈",
+		label: "include",
+		operator: "inq",
+		isArray: !0,
+		expr: (e) => ({ inq: e }),
+		localEval: (e, t) => t.includes(e)
+	},
+	nin: {
+		icon: "∉",
+		label: "exclude",
+		operator: "nin",
+		isArray: !0,
+		expr: (e) => ({ nin: e }),
+		isNegation: !0,
+		localEval: (e, t) => !t.includes(e)
+	},
+	like: {
+		icon: "%",
+		label: "contains",
+		operator: "like",
+		isInput: !0,
+		expr: (e) => ({ like: i(e, `%${e}%`) }),
+		localEval: (e, t) => a(e, t)
+	},
+	nlike: {
+		icon: "≁",
+		label: "notContains",
+		operator: "nlike",
+		isInput: !0,
+		expr: (e) => ({ nlike: i(e, `%${e}%`) }),
+		isNegation: !0,
+		localEval: (e, t) => !a(e, t)
+	},
+	lt: {
+		icon: "<",
+		label: "lessThan",
+		operator: "lt",
+		expr: (e) => ({ lt: e }),
+		localEval: (e, t) => e < t,
+		isInput: !0
+	},
+	gt: {
+		icon: ">",
+		label: "greaterThan",
+		operator: "gt",
+		isInput: !0,
+		expr: (e) => ({ gt: e }),
+		localEval: (e, t) => e > t
+	},
+	lte: {
+		icon: "≤",
+		label: "lessThanEqualTo",
+		operator: "lte",
+		isInput: !0,
+		expr: (e) => ({ lte: e }),
+		localEval: (e, t) => e <= t
+	},
+	gte: {
+		icon: "≥",
+		label: "greaterThanEqualTo",
+		operator: "gte",
+		isInput: !0,
+		expr: (e) => ({ gte: e }),
+		localEval: (e, t) => e >= t
+	},
+	null: {
+		icon: "∅",
+		label: "null",
+		operator: "null",
+		expr: () => ({ eq: null }),
+		localEval: (e) => e == null,
+		isBasic: !0,
+		isNullable: !0
+	},
+	notNull: {
+		icon: "≠",
+		label: "notNull",
+		operator: "notNull",
+		expr: () => ({ neq: null }),
+		localEval: (e) => e != null,
+		isBasic: !0,
+		isNullable: !0
+	}
+}, r = Object.values(n);
+function i(e, t) {
+	return e.includes("%") ? e : t;
+}
+function a(e, t) {
+	let n = e == null ? "" : String(e), r = (t == null ? "" : String(t)).replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/%/g, ".*").replace(/_/g, ".");
+	return RegExp(`^${r}$`, "i").test(n);
+}
+//#endregion
+//#region lib/utils/trackAnalytics.js
+var o = /* @__PURE__ */ new Set();
+async function s() {
+	try {
+		let { data: t } = await e.get("AnalyticPaths");
+		t.forEach((e) => o.add(e.path));
+	} catch (e) {
+		console.error("Error loading allowed paths:", e);
+	}
+}
+async function c(t, n) {
+	o.size || await s(), o.has(n) && e.post("AnalyticEvents", {
+		name: t,
+		path: n
+	});
+}
+//#endregion
+export { n as advancedFilters, r as advancedFiltersList, t as defaultOperator, c as trackAnalyticEvent };

package/dist/vn-front-lib.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./components-bhz_GJoK.cjs"),t=require("./useRequired-BviE2qpV.cjs");require("./composables.cjs");function n(t){for(let n in e.t)t.component(n,e.t[n])}var r={install:n};exports.VnFetch=e.n,exports.VnInput=e.r,exports.default=r,exports.useRequired=t.t,exports.useValidator=t.n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./composables-CoozYWaG.cjs"),t=require("./components-DImdPW9s.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.d,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.p,exports.useArrayData=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.y,exports.useState=e.t,exports.useValidator=e.b;

package/dist/vn-front-lib.css

@@ -1,2 +1,2 @@
-.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:var(--q-color-primary);transform:scale(1.2)}
+.q-card[data-v-f01eb4e4]{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-ffc76361]{color:#000}.q-card[data-v-ffc76361]{padding:32px}
 /*$vite$:1*/

package/dist/vn-front-lib.js

@@ -1,10 +1,9 @@
-import { n as e, r as t, t as n } from "./components-vVkogsiW.js";
-import { n as r, t as i } from "./useRequired-CTxBp3qy.js";
-import "./composables.js";
+import { a as e, b as t, c as n, d as r, f as i, i as a, l as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p, y as m } from "./composables-CAk9XaOa.js";
+import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./components-D0b_k2T_.js";
 //#region lib/main.js
-function a(e) {
-	for (let t in n) e.component(t, n[t]);
+function S(e) {
+	for (let t in x) e.component(t, x[t]);
 }
-var o = { install: a };
+var C = { install: S };
 //#endregion
-export { e as VnFetch, t as VnInput, o as default, i as useRequired, r as useValidator };
+export { b as VnConfirm, y as VnFetch, _ as VnForm, g as VnInput, v as VnSkeletonForm, h as VnSpinner, C as default, s as fetchLocalData, r as focusFirstInput, e as getObjectByKeys, c as getObjectDifferences, u as getRemoteAndLocalParams, d as isComparableObject, n as isSameValue, a as requestData, l as tMobile, i as useArrayData, p as useNotify, o as useObjectComparison, m as useRequired, f as useState, t as useValidator };

package/lib/components/dialogs/VnConfirm.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    icon: {
+        type: String,
+        default: null,
+    },
+    title: {
+        type: String,
+        default: null,
+    },
+    message: {
+        type: [String, Boolean],
+        default: null,
+    },
+    data: {
+        type: Object,
+        required: false,
+        default: null,
+    },
+    promise: {
+        type: Function,
+        required: false,
+        default: null,
+    },
+    persistent: {
+        type: Boolean,
+        default: false,
+    },
+    closable: {
+        type: Boolean,
+        default: true,
+    },
+    cardClass: {
+        type: String,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['confirm', 'cancel', ...useDialogPluginComponent.emits]);
+defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent();
+
+const title = props.title || t('Confirm');
+const message =
+    props.message ||
+    (props.message !== false ? t('Are you sure you want to continue?') : false);
+
+const isLoading = ref(false);
+
+async function confirm() {
+    isLoading.value = true;
+    if (props.promise) {
+        try {
+            await props.promise(props.data);
+        } finally {
+            isLoading.value = false;
+        }
+    }
+    onDialogOK(props.data);
+}
+
+function cancel() {
+    emit('cancel');
+    onDialogCancel();
+}
+</script>
+<template>
+    <QDialog ref="dialogRef" :persistent="persistent" @hide="onDialogHide">
+        <QCard class="q-pa-sm" :class="cardClass">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6">{{ title }}</span>
+                <QSpace />
+                <QBtn
+                    v-if="closable"
+                    icon="close"
+                    :disable="isLoading"
+                    flat
+                    round
+                    dense
+                    @click="cancel()"
+                />
+            </QCardSection>
+            <QCardSection class="q-pb-none" data-cy="VnConfirm_message">
+                <span v-if="message !== false" v-html="message" />
+            </QCardSection>
+            <QCardSection class="row items-center q-pt-none">
+                <slot name="custom-html"></slot>
+            </QCardSection>
+            <QCardActions v-if="$slots.actions" align="right">
+                <slot name="actions" :actions="{ confirm, cancel }"></slot>
+            </QCardActions>
+            <QCardActions v-else align="right">
+                <QBtn
+                    :label="t('globals.cancel')"
+                    color="primary"
+                    :disable="isLoading"
+                    flat
+                    @click="cancel()"
+                    data-cy="VnConfirm_cancel"
+                />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    :title="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="confirm()"
+                    unelevated
+                    autofocus
+                    data-cy="VnConfirm_confirm"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    min-width: 350px;
+    white-space: pre-line;
+}
+</style>
+
+<i18n>
+es:
+    Confirm: Confirmar
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+</i18n>

package/lib/components/feedback/VnSkeletonForm.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />
+    </div>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />
+    </div>
+    <div class="row q-gutter-md q-mb-md">
+        <QSkeleton type="QInput" class="col" square />
+        <QSkeleton type="QInput" class="col" square />
+    </div>
+</template>

package/lib/components/feedback/VnSpinner.vue

@@ -0,0 +1,63 @@
+<script setup>
+defineProps({
+    size: {
+        type: String,
+        default: '40px',
+    },
+    noTransition: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const sizeMap = {
+    xs: '16px',
+    sm: '24px',
+    md: '40px',
+    lg: '56px',
+    xl: '72px',
+};
+</script>
+<template>
+    <Transition v-if="!noTransition" name="vn-spinner-fade" appear>
+        <div
+            class="vn-spinner"
+            :style="{ width: sizeMap[size] || size, height: sizeMap[size] || size }"
+        ></div>
+    </Transition>
+    <div
+        v-else
+        class="vn-spinner"
+        :style="{ width: sizeMap[size] || size, height: sizeMap[size] || size }"
+    ></div>
+</template>
+<style scoped>
+.vn-spinner {
+    min-width: 16px;
+    min-height: 16px;
+    border: 3px solid color-mix(in srgb, var(--vn-label-color) 15%, transparent);
+    border-top-color: var(--q-primary);
+    border-radius: 50%;
+    animation: vn-spin 0.7s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
+    box-sizing: border-box;
+}
+
+@keyframes vn-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.vn-spinner-fade-enter-active,
+.vn-spinner-fade-leave-active {
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+}
+
+.vn-spinner-fade-enter-from,
+.vn-spinner-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.6);
+}
+</style>

package/lib/components/index.js

@@ -1,2 +1,6 @@
+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 VnInput } from './inputs/VnInput.vue';
 export { default as VnFetch } from './models/VnFetch.vue';
+export { default as VnForm } from './models/VnForm.vue';

package/lib/components/inputs/VnInput.vue

@@ -37,6 +37,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    clearOnHover: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const model = defineModel({ default: null });
@@ -177,6 +181,7 @@ onMounted(() => {
                 <QIcon
                     name="close"
                     size="xs"
+                    v-show="!clearOnHover || hover"
                     class="cursor-pointer"
                     :style="{
                         visibility: