@innertia-solutions/ui 0.1.0

package/components/Forms/Select.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from "vue";
+
+const props = defineProps<{
+  options: { value: string; label: string }[];
+}>();
+
+const modelValue = defineModel<string | null>({ default: null });
+
+const selectRef = ref<HTMLSelectElement | null>(null);
+
+const reinitHsSelect = async () => {
+  await nextTick();
+
+  const el = selectRef.value;
+  if (!el) return;
+
+  const instance = window.HSSelect?.getInstance?.(el);
+  if (instance?.destroy) instance.destroy();
+
+  new window.HSSelect(el);
+};
+
+watch(
+  () => props.options,
+  async () => {
+    await reinitHsSelect();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  reinitHsSelect();
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <!-- Fallback mientras se monta en el cliente -->
+    <template #fallback>
+      <div
+        class="h-12 bg-slate-100 dark:bg-slate-800 animate-pulse rounded-lg"
+      ></div>
+    </template>
+    <div class="relative">
+      <select
+        ref="selectRef"
+        class="hs-select w-full"
+        :value="modelValue"
+        @change="(e) => modelValue?.value ? modelValue.value = (e.target as HTMLSelectElement).value : null"
+        data-hs-select='{
+          "placeholder": "Select option...",
+          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
+          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-slate-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-slate-600",
+          "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-slate-200 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-slate-700",
+          "optionClasses": "py-2 px-4 w-full text-sm text-slate-800 cursor-pointer hover:bg-slate-100 rounded-lg focus:outline-hidden focus:bg-slate-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-200 dark:focus:bg-slate-800",
+          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
+        }'
+      >
+        <option disabled value="">Selecciona</option>
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+
+      <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+        <svg
+          class="shrink-0 size-4 text-slate-500 dark:text-slate-500"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m7 15 5 5 5-5"></path>
+          <path d="m7 9 5-5 5 5"></path>
+        </svg>
+      </div>
+    </div>
+  </ClientOnly>
+</template>

package/components/Modal/DeleteConfirm.vue

@@ -0,0 +1,163 @@
+<template>
+  <Modal
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    size="sm"
+    :closable="!loading"
+    :backdrop-dismiss="!loading"
+    :show-header="false"
+    :show-footer="false"
+  >
+    <!-- Close Button -->
+    <div class="absolute top-3 right-3">
+      <button
+        type="button"
+        :disabled="loading"
+        class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-400 dark:focus:bg-gray-600"
+        aria-label="Close"
+        @click="closeModal"
+      >
+        <span class="sr-only">Cerrar</span>
+        <svg
+          class="shrink-0 size-4"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="p-5 sm:p-10">
+      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">
+        {{ title || "Confirmar eliminación" }}
+      </h3>
+      <p class="mt-2 text-sm text-gray-500 dark:text-gray-500">
+        {{
+          message ||
+          "Esta acción es irreversible. ¿Estás seguro de que deseas continuar?"
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="pb-5 px-5 sm:px-10 flex justify-center items-center gap-x-3">
+      <button
+        type="button"
+        :disabled="loading"
+        class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-xl border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700"
+        @click="closeModal"
+      >
+        {{ cancelText || "Cancelar" }}
+      </button>
+      <button
+        type="button"
+        :class="[
+          'py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-xl border border-transparent text-white disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden',
+          dangerMode
+            ? 'bg-red-500 hover:bg-red-600 focus:bg-red-600'
+            : 'bg-purple-500 hover:bg-purple-600 focus:bg-purple-600',
+        ]"
+        :disabled="loading"
+        @click="handleConfirm"
+      >
+        <svg
+          v-if="loading"
+          class="w-4 h-4 animate-spin mr-1"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+          ></path>
+        </svg>
+        {{ loading ? loadingText : confirmText || "Confirmar" }}
+      </button>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  message: {
+    type: String,
+    default: "",
+  },
+  confirmText: {
+    type: String,
+    default: "",
+  },
+  cancelText: {
+    type: String,
+    default: "",
+  },
+  loadingText: {
+    type: String,
+    default: "Procesando...",
+  },
+  dangerMode: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// Emits
+const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
+
+// State
+const loading = ref(false);
+
+// Exponer loading para que el padre pueda controlarlo
+defineExpose({
+  loading,
+  setLoading: (value) => { loading.value = value },
+  closeModal: () => {
+    loading.value = false;
+    emit("update:modelValue", false);
+  }
+});
+
+// Methods
+const closeModal = () => {
+  if (!loading.value) {
+    emit("update:modelValue", false);
+    emit("cancel");
+  }
+};
+
+const handleConfirm = () => {
+  if (loading.value) return; // Prevenir doble click
+  
+  loading.value = true;
+  
+  // Emitir el evento confirm
+  emit("confirm");
+  
+  // El loading se mantiene activo
+  // Para desactivarlo, el padre debe llamar a una función o cerrar el modal
+};
+</script>

package/components/Table/DownloadDropdown.vue

@@ -0,0 +1,111 @@
+<script setup>
+import {
+  IconFileTypeXls,
+  IconCodeDots,
+  IconFileTypePdf,
+  IconFileTypeCsv,
+  IconDownload,
+} from "@tabler/icons-vue";
+
+const props = defineProps({
+  tableRef: { type: Object, required: true },
+});
+
+const exportAllPages = ref(true);
+const exportFilteredRows = ref(true);
+
+const exportTable = (format) => {
+  if (props.tableRef) {
+    props.tableRef.exportTable(
+      format,
+      exportAllPages.value,
+      exportFilteredRows.value
+    );
+  }
+};
+</script>
+<template>
+  <div
+    class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-block"
+  >
+    <button
+      id="hs-as-table-table-export-dropdown"
+      type="button"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
+      aria-haspopup="menu"
+      aria-expanded="false"
+      aria-label="Dropdown"
+    >
+      <IconDownload class="shrink-0 size-4" stroke="1.5" />
+      Exportar
+    </button>
+    <div
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-slate-200 min-w-48 z-10 bg-white shadow-md rounded-lg p-2 mt-2 dark:divide-slate-700 dark:bg-slate-800 dark:border dark:border-slate-700 border-t border-slate-200 dark:border-slate-700"
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="hs-as-table-table-export-dropdown"
+    >
+      <div class="py-2 first:pt-0 last:pb-0">
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('xlsx')"
+        >
+          <IconFileTypeXls class="shrink-0 size-5" stroke="1.5" />
+          Excel
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('csv')"
+        >
+          <IconFileTypeCsv class="shrink-0 size-5" stroke="1.5" />
+          CSV
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('pdf')"
+        >
+          <IconFileTypePdf class="shrink-0 size-5" stroke="1.5" />
+          PDF
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('json')"
+        >
+          <IconCodeDots class="shrink-0 size-5" stroke="1.5" />
+          JSON
+        </a>
+      </div>
+      <!-- checkbox - todas las paginas -->
+      <div
+        class="flex flex-col gap-y-2 py-2 px-3"
+        data-hs-dropdown-ignore-click
+      >
+        <label
+          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+        >
+          <input
+            type="checkbox"
+            v-model="exportAllPages"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+          />
+          Todas las páginas
+        </label>
+
+        <label
+          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+        >
+          <input
+            type="checkbox"
+            v-model="exportFilteredRows"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+          />
+          Solo filas filtradas
+        </label>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Table/FilterDropdown.vue

@@ -0,0 +1,226 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "Seleccionar...",
+  },
+  optionLabelKey: {
+    type: String,
+    default: "label",
+  },
+  optionValueKey: {
+    type: String,
+    default: "value",
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  menuClass: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const isOpen = ref(false);
+const dropdownRef = ref(null);
+
+const getOptionLabel = (option) => option?.[props.optionLabelKey] ?? option?.label ?? "";
+const getOptionValue = (option) => option?.[props.optionValueKey] ?? option?.value ?? null;
+
+const hasSelection = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+
+const selectedOption = computed(() =>
+  props.options.find((option) => getOptionValue(option) === props.modelValue),
+);
+
+const displayText = computed(() => {
+  if (!selectedOption.value) return props.placeholder;
+  return getOptionLabel(selectedOption.value) || props.placeholder;
+});
+
+const selectClasses = computed(() => {
+  const base =
+    "relative w-full rounded-lg border bg-white dark:bg-slate-800 transition-colors cursor-pointer text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+  const validation = "border-gray-200 dark:border-slate-700";
+  const disabled = props.disabled ? "opacity-50 cursor-not-allowed" : "";
+  return `${base} ${validation} ${disabled}`;
+});
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectOption = (option) => {
+  const selectedValue = getOptionValue(option);
+  const nextValue = props.modelValue === selectedValue ? null : selectedValue;
+  emit("update:modelValue", nextValue);
+  emit("change", nextValue);
+  closeDropdown();
+};
+
+const clearSelection = () => {
+  emit("update:modelValue", null);
+  emit("change", null);
+  closeDropdown();
+};
+
+const isOptionSelected = (option) => getOptionValue(option) === props.modelValue;
+
+const handleClickOutside = (event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    closeDropdown();
+  }
+};
+
+onMounted(() => document.addEventListener("mousedown", handleClickOutside));
+onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside));
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative w-full">
+    <button
+      type="button"
+      :class="selectClasses"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      @click="toggleDropdown"
+    >
+      <div class="flex items-center justify-between w-full">
+        <span
+          class="truncate flex-1 text-left pr-10"
+          :class="{
+            'text-gray-400 dark:text-slate-500': !hasSelection,
+            'text-slate-900 dark:text-white': hasSelection,
+          }"
+        >
+          <slot name="display" :selected-option="selectedOption" :display-text="displayText">
+            {{ displayText }}
+          </slot>
+        </span>
+
+        <span
+          v-if="clearable && hasSelection && !disabled"
+          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
+          role="button"
+          tabindex="0"
+          @click.stop="clearSelection"
+          @keydown.enter.prevent="clearSelection"
+          @keydown.space.prevent="clearSelection"
+        >
+          <svg class="size-3.5 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+
+        <div class="absolute top-1/2 end-3 -translate-y-1/2">
+          <svg
+            class="shrink-0 size-3.5 text-gray-500 dark:text-gray-500 transition-transform"
+            :class="{ 'rotate-180': isOpen }"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-show="isOpen"
+        :class="[
+          'absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl max-h-60 overflow-auto',
+          menuClass,
+        ]"
+      >
+        <div v-if="options.length">
+          <button
+            v-for="option in options"
+            :key="getOptionValue(option)"
+            type="button"
+            :class="[
+              'w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-700 flex items-center text-sm',
+              isOptionSelected(option) ? 'bg-slate-50 dark:bg-slate-700/50' : '',
+            ]"
+            @click="selectOption(option)"
+          >
+            <slot name="option" :option="option" :selected="isOptionSelected(option)">
+              <div class="flex items-center flex-1 min-w-0">
+                <span
+                  v-if="option.dot"
+                  class="relative flex-shrink-0 size-2.5 flex items-center justify-center mr-2.5"
+                >
+                  <span
+                    v-if="option.pulse"
+                    :class="['animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', option.dot]"
+                  />
+                  <span :class="['relative inline-flex rounded-full size-2.5', option.dot]" />
+                </span>
+                <span class="font-bold text-slate-800 dark:text-slate-200 truncate">
+                  {{ getOptionLabel(option) }}
+                </span>
+              </div>
+            </slot>
+
+            <svg
+              v-if="isOptionSelected(option)"
+              class="w-4 h-4 text-slate-500 ml-2 shrink-0"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div v-else class="px-3 py-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+          Sin opciones
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>