una-nuxt-module 1.0.2

package/dist/runtime/components/shared/containers/JsonViewer.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="json-container-view">
+    <h5>{{ props.title }}:</h5>
+    <VueJsonPretty :data />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  data: { type: Object, default: {} },
+  title: { type: String, default: "Data" },
+});
+</script>

package/dist/runtime/components/shared/dates/DatePicker.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-menu v-model="openCalendar" :close-on-content-click="false">
+    <template v-slot:activator="{ props }">
+      <v-text-field
+        :aria-label="label"
+        :disabled="disabled"
+        :label="label"
+        :readonly="true"
+        :required="required"
+        :rules="rules"
+        :title="title"
+        color="primary"
+        persistent-placeholder
+        v-bind="props"
+        v-model="formattedDate"
+        variant="outlined"
+      />
+    </template>
+
+    <v-date-picker
+      color="primary"
+      elevation="4"
+      hide-actions
+      title=""
+      v-model="date"
+    >
+      <template v-slot:header>
+        <div />
+      </template>
+
+      <template v-slot:actions>
+        <div class="mt-n10 d-flex justify-space-between w-100">
+          <v-btn
+            @click="date = null"
+            color="primary"
+            density="compact"
+            text="Borrar"
+          />
+          <v-btn
+            @click="openCalendar = false"
+            color="primary"
+            density="compact"
+            text="Cerrar"
+          />
+        </div>
+      </template>
+    </v-date-picker>
+  </v-menu>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, type PropType } from "vue";
+import { useDate } from "vuetify";
+import type { TVuetifyDateFormat } from "../../../types";
+import { EVuetifyDateFormats } from "../../../enums";
+
+const dateFormatter = useDate();
+
+const openCalendar = ref(false);
+
+const date = defineModel<Date | null>("date", { required: true });
+
+const props = defineProps({
+  disabled: { type: Boolean, default: false },
+  displayFormat: {
+    type: String as PropType<TVuetifyDateFormat>,
+    required: false,
+    default: EVuetifyDateFormats.fullDateWithWeekday,
+  },
+  label: { type: String, required: true },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  rules: { type: Array as PropType<Array<any>>, required: false, default: [] },
+  title: { type: String, required: true },
+});
+
+const formattedDate = computed(() => {
+  if (date.value) {
+    return dateFormatter.format(date.value, props.displayFormat);
+  }
+  return props.required ? "Seleccione una fecha..." : "";
+});
+
+watch(date, () => {
+  openCalendar.value = false;
+});
+</script>
+
+<style>
+.v-overlay__content:has(>.v-date-picker){min-width:auto!important}.v-picker-title{padding:0!important}
+</style>

package/dist/runtime/components/shared/dialogs/DialogConfirmDelete.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-dialog
+    v-model="appStatusStore.openDialogDelete"
+    persistent
+    max-width="500"
+  >
+    <v-card :title="$t('Components.Dialogs.Delete.Title')" class="py-2">
+      <template v-slot:prepend>
+        <v-icon icon="mdi-delete" color="error" />
+      </template>
+
+      <template v-slot:actions>
+        <div class="d-flex justify-space-between w-100 px-2 pt-4">
+          <BtnCancel @on-cancel="handleCancel" />
+          <BtnConfirm @on-confirm="emit('on-delete')" />
+        </div>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useAppStatusStore } from "../../../stores/appStatus";
+
+const appStatusStore = useAppStatusStore();
+
+const emit = defineEmits(["on-delete"]);
+
+const handleCancel = () => {
+  appStatusStore.SET_OPEN_DIALOG_DELETE(false);
+};
+</script>

package/dist/runtime/components/shared/dialogs/DialogExportTable.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-dialog
+    v-model="appStatusStore.openDialogExport"
+    persistent
+    max-width="500"
+  >
+    <v-card :title="$t('Components.Dialogs.Export.Title')" class="py-2">
+      <template v-slot:prepend>
+        <v-icon icon="mdi-arrow-collapse-down" color="primary" />
+      </template>
+
+      <template v-slot:text>
+        <div class="pt-4">
+          <v-chip-group v-model="exportTypesSelected" multiple mandatory>
+            <v-chip variant="outlined" filter color="primary"> PDF </v-chip>
+            <v-chip variant="outlined" filter color="primary"> CSV </v-chip>
+            <v-chip variant="outlined" filter color="primary"> EXCEL </v-chip>
+          </v-chip-group>
+        </div>
+      </template>
+
+      <template v-slot:actions>
+        <div class="d-flex justify-space-between w-100 px-2 pt-4">
+          <BtnCancel @on-cancel="handleCancel" />
+          <BtnConfirm @on-confirm="emit('on-export')" />
+        </div>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const appStatusStore = useAppStatusStore();
+
+const exportTypesSelected = ref([0]);
+
+const emit = defineEmits(["on-export"]);
+
+const handleCancel = () => {
+  appStatusStore.SET_OPEN_DIALOG_EXPORT(false);
+};
+</script>

package/dist/runtime/components/shared/feedback/LoadingSession.vue

@@ -0,0 +1,17 @@
+<!-- TODO: Embellecer este componente -->
+<template>
+  <v-sheet
+    class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4"
+    elevation="4"
+    height="250"
+    max-width="800"
+    width="100%"
+    rounded
+  >
+    <div>
+      <h2 class="text-h4 font-weight-black text-primary">
+        Iniciando sesión...
+      </h2>
+    </div>
+  </v-sheet>
+</template>

package/dist/runtime/components/shared/feedback/SnackBar.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <v-snackbar
+      :color="appStatusStore.hasError ? 'error' : 'success'"
+      :timeout="4000"
+      location="top right"
+      v-model="appStatusStore.showInfo"
+    >
+      <h4>{{ appStatusStore.info?.title }}</h4>
+      <div class="mt-1">
+        {{ appStatusStore.info?.description }}
+      </div>
+
+      <template v-slot:actions>
+        <v-btn
+          @click="appStatusStore.SET_SHOW_INFO(false)"
+          density="compact"
+          icon="mdi-close-circle-outline"
+          rounded="lg"
+          variant="text"
+        >
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { useAppStatusStore } from "../../../stores/appStatus";
+
+const appStatusStore = useAppStatusStore();
+
+// TODO: AGREGAR UNA CUENTA REGRESIVA DE CUANTO FALTA PARA QUE EL SNACKBAR SE CIERRE
+onMounted(() => {});
+</script>

package/dist/runtime/components/shared/forms/FormBuilder/FieldBuilder.vue

@@ -0,0 +1,251 @@
+<template>
+  <v-text-field
+    v-if="field.type == EFormField.TEXT"
+    :aria-label="field.label"
+    :counter="castToFieldText(field).maxlength"
+    :disabled="field.disabled"
+    :label="field.label"
+    :required="field.required"
+    :rules="field.rules"
+    :title="field.title"
+    @keypress="validateTextFieldInput($event, castToFieldText(field))"
+    color="primary"
+    persistent-placeholder
+    v-model="formState[field.key as keyof typeof formState]"
+    variant="outlined"
+  />
+
+  <v-textarea
+    v-else-if="field.type == EFormField.TEXTAREA"
+    :aria-label="field.label"
+    :counter="castToFieldTextArea(field).maxlength"
+    :disabled="field.disabled"
+    :label="field.label"
+    :no-resize="!castToFieldTextArea(field).resizable"
+    :required="field.required"
+    :rows="castToFieldTextArea(field).rows"
+    :rules="field.rules"
+    :title="field.title"
+    @keypress="validateTextAreaFieldInput($event, castToFieldTextArea(field))"
+    color="primary"
+    persistent-placeholder
+    v-model="formState[field.key as keyof typeof formState]"
+    variant="outlined"
+  />
+
+  <v-text-field
+    v-else-if="field.type == EFormField.NUMBER"
+    :aria-label="field.label"
+    :disabled="field.disabled"
+    :label="field.label"
+    :max="castToFieldNumber(field).max"
+    :min="castToFieldNumber(field).min"
+    :required="field.required"
+    :rules="field.rules"
+    :title="field.title"
+    @keypress="validateNumberFieldInput($event, castToFieldNumber(field))"
+    color="primary"
+    persistent-placeholder
+    type="number"
+    v-model="formState[field.key as keyof typeof formState]"
+    variant="outlined"
+    :counter="castToFieldNumber(field).maxlength"
+  />
+
+  <!-- <CustomDatePicker
+    v-else-if="field.type == EFormField.DATE"
+    :field="castToFieldDate(field)"
+    v-model:date="formState[field.key as keyof typeof formState]"
+  /> -->
+
+  <v-autocomplete
+    v-else-if="field.type == EFormField.SELECT"
+    :item-title="castToFieldSelect(field).itemTitle"
+    :item-value="castToFieldSelect(field).itemValue"
+    :items="castToFieldSelect(field).items"
+    :label="field.label"
+    :placeholder="field.placeHolder"
+    :return-object="castToFieldSelect(field).returnObject"
+    :rules="field.rules"
+    :title="field.title"
+    auto-select-first
+    clearable
+    color="primary"
+    density="compact"
+    no-data-text="No hay datos que coincidan con el criterio de búsqueda..."
+    persistent-placeholder
+    v-model="formState[field.key as keyof typeof formState]"
+    variant="outlined"
+  />
+
+  <v-radio-group
+    v-else-if="field.type == EFormField.RADIOBUTTON"
+    :aria-label="field.label"
+    :label="
+      castToFieldRadioButton(field).labelLocation == 'TOP'
+        ? field.label
+        : undefined
+    "
+    :disabled="field.disabled"
+    :inline="castToFieldRadioButton(field).inline"
+    :required="field.required"
+    :rules="field.rules"
+    :title="field.title"
+    color="primary"
+    v-model="formState[field.key as keyof typeof formState]"
+  >
+    <template
+      v-slot:prepend
+      v-if="castToFieldRadioButton(field).labelLocation == 'LEFT'"
+    >
+      <v-label :text="castToFieldRadioButton(field).label" />
+    </template>
+
+    <v-radio
+      v-for="(item, i) in castToFieldRadioButton(field).items"
+      :label="item.label"
+      :value="item.value"
+    />
+  </v-radio-group>
+
+  <v-switch
+    v-else-if="field.type == EFormField.SWITCH"
+    :aria-label="field.label"
+    :indeterminate="castToFieldSwitch(field).indeterminate ?? false"
+    :inset="castToFieldSwitch(field).inset"
+    :disabled="field.disabled"
+    :false-value="castToFieldSwitch(field).falseValue ?? false"
+    :label="field.label"
+    :required="field.required"
+    :rules="field.rules"
+    :title="field.title"
+    :true-value="castToFieldSwitch(field).trueValue ?? true"
+    color="primary"
+    v-model="formState[field.key as keyof typeof formState]"
+  >
+    <template v-slot:prepend>
+      <v-label :text="castToFieldSwitch(field).labelPrepend" />
+    </template>
+  </v-switch>
+
+  <v-checkbox
+    v-else-if="field.type == EFormField.CHECKBOX"
+    :aria-label="field.label"
+    :disabled="field.disabled"
+    :false-value="castToFieldCheckBox(field).falseValue ?? false"
+    :indeterminate="castToFieldCheckBox(field).indeterminate"
+    :label="field.label"
+    :required="field.required"
+    :rules="field.rules"
+    :title="field.title"
+    :true-value="castToFieldCheckBox(field).trueValue ?? true"
+    color="primary"
+    v-model="formState[field.key as keyof typeof formState]"
+  />
+
+  <div v-else class="text-error">
+    {{ "DECLARATION MISSED FOR FIELD " + field.type + " IN FORMBUILDER" }}
+  </div>
+</template>
+
+<script lang="ts" setup generic="T">
+import { type PropType } from "vue";
+import type {
+  TFormBuilderField,
+  IFormBuilderFieldText,
+  IFormBuilderFieldTextArea,
+  IFormBuilderFieldNumber,
+  IFormBuilderFieldDate,
+  IFormBuilderFieldSelect,
+  IFormBuilderFieldCheckBox,
+  IFormBuilderFieldRadioButton,
+  IFormBuilderFieldSwitch,
+} from "../../../../types";
+import { EFormField } from "../../../../enums";
+import onlyNumbers from "../../../../utils/onlyNumbers";
+
+const formState = defineModel<T>("formState", { required: true });
+
+const props = defineProps({
+  field: { type: Object as PropType<TFormBuilderField>, required: true },
+});
+
+// #region INPUT VALIDATION METHODS
+const validateTextFieldInput = (event: any, field: IFormBuilderFieldText) => {
+  const expect = (event.target.value.toString() +
+    event.key.toString()) as string;
+
+  if (field.maxlength && expect.length > field.maxlength) {
+    event.preventDefault();
+  }
+
+  return true;
+};
+
+const validateTextAreaFieldInput = (
+  event: any,
+  field: IFormBuilderFieldTextArea
+) => {
+  const expect = (event.target.value.toString() +
+    event.key.toString()) as string;
+
+  if (field.maxlength && expect.length > field.maxlength) {
+    event.preventDefault();
+  }
+
+  return true;
+};
+
+const validateNumberFieldInput = (
+  event: any,
+  field: IFormBuilderFieldNumber
+) => {
+  const expect = (event.target.value.toString() +
+    event.key.toString()) as string;
+
+  if (!onlyNumbers(expect)) {
+    event.preventDefault();
+  }
+
+  if (field.maxlength && expect.length > field.maxlength) {
+    event.preventDefault();
+  }
+
+  return true;
+};
+// #endregion
+
+// #region CAST METHODS
+const castToFieldText = (field: Object) => {
+  return field as IFormBuilderFieldText;
+};
+
+const castToFieldTextArea = (field: Object) => {
+  return field as IFormBuilderFieldTextArea;
+};
+
+const castToFieldNumber = (field: Object) => {
+  return field as IFormBuilderFieldNumber;
+};
+
+const castToFieldDate = (field: Object) => {
+  return field as IFormBuilderFieldDate;
+};
+
+const castToFieldSelect = (field: Object) => {
+  return field as IFormBuilderFieldSelect;
+};
+
+const castToFieldCheckBox = (field: Object) => {
+  return field as IFormBuilderFieldCheckBox;
+};
+
+const castToFieldRadioButton = (field: Object) => {
+  return field as IFormBuilderFieldRadioButton;
+};
+
+const castToFieldSwitch = (field: Object) => {
+  return field as IFormBuilderFieldSwitch;
+};
+// #endregion
+</script>

package/dist/runtime/components/shared/forms/FormBuilder/FieldSlotMissed.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-text-field
+    :placeholder="`Content slot for field '${field.label}' is missed.`"
+    :title="'Slot missed!'"
+    bg-color="error"
+    color="error"
+    persistent-placeholder
+    readonly
+    variant="outlined"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import type { IFormBuilderFieldSlot } from "../../../../types";
+
+const props = defineProps({
+  field: { type: Object as PropType<IFormBuilderFieldSlot>, required: true },
+});
+</script>