@verdnatura/vn-front-lib 0.0.9 → 0.0.11

package/dist/vn-front-lib.js

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

@@ -0,0 +1,65 @@
+<script setup>
+import {onMounted} from "vue";
+import axios from "axios";
+
+const $props = defineProps({
+  autoLoad: {
+    type: Boolean,
+    default: false,
+  },
+  url: {
+    type: String,
+    default: "",
+  },
+  filter: {
+    type: Object,
+    default: null,
+  },
+  where: {
+    type: Object,
+    default: null,
+  },
+  sortBy: {
+    type: String,
+    default: "",
+  },
+  limit: {
+    type: [String, Number],
+    default: "",
+  },
+  params: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["onFetch"]);
+defineExpose({fetch});
+
+onMounted(async () => {
+  if ($props.autoLoad) {
+    await fetch();
+  }
+});
+
+async function fetch(fetchFilter = {}) {
+  try {
+    const filter = {...fetchFilter, ...$props.filter}; // eslint-disable-line vue/no-dupe-keys
+    if ($props.where && !fetchFilter.where) filter.where = $props.where;
+    if ($props.sortBy) filter.order = $props.sortBy;
+    if ($props.limit) filter.limit = $props.limit;
+
+    const {data} = await axios.get($props.url, {
+      params: {filter: JSON.stringify(filter), ...$props.params},
+    });
+
+    emit("onFetch", data);
+    return data;
+  } catch (e) {
+    //
+  }
+}
+</script>
+<template>
+  <template></template>
+</template>