@innertia-solutions/innertia-nuxt 0.1.1

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-card transition-colors cursor-pointer text-foreground py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+  const validation = "border-card-line";
+  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-muted-foreground': !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-muted-hover 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-muted-foreground 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-dropdown border border-dropdown-line 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-muted-hover flex items-center text-sm',
+              isOptionSelected(option) ? 'bg-muted' : '',
+            ]"
+            @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-foreground 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-muted-foreground text-sm">
+          Sin opciones
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

package/components/Table/Grid.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { IconSearch } from '@tabler/icons-vue'
+
+// Grid / card layout view — wraps DataTable with viewMode="grid"
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  columns: { type: Array, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  cached: { type: Boolean, default: true },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+  gridClass: { type: String, default: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' },
+  clickRowToOpen: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['row-click', 'loaded'])
+
+const search = ref('')
+const tableRef = ref(null)
+
+const reload = () => tableRef.value?.reload()
+const clearCache = () => tableRef.value?.clearCache()
+
+defineExpose({ reload, clearCache })
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-if="showSearch" class="relative">
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      </div>
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+    </div>
+
+    <DataTable
+      ref="tableRef"
+      :endpoint="endpoint"
+      :columns="columns"
+      :name="name"
+      :params="params"
+      :search="search"
+      :cached="cached"
+      :click-row-to-open="clickRowToOpen"
+      view-mode="grid"
+      :grid-class="gridClass"
+      @row-click="emit('row-click', $event)"
+      @loaded="emit('loaded', $event)"
+    >
+      <!-- Card slot: pass through for custom card rendering -->
+      <template v-if="$slots.card" #card="slotProps">
+        <slot name="card" v-bind="slotProps" />
+      </template>
+    </DataTable>
+  </div>
+</template>

package/components/Table/Kanban.vue

@@ -0,0 +1,188 @@
+<script setup>
+import { IconLoader2, IconPlus } from '@tabler/icons-vue'
+import { useQueryClient } from '@tanstack/vue-query'
+
+// Kanban board: states as columns, HTML5 DnD, optimistic updates
+// Usage: <TableKanban endpoint="..." :states="[{key:'todo',label:'Pendiente',color:'slate'}]" state-key="status" ... />
+
+const props = defineProps({
+  endpoint: { type: String, required: true },     // POST endpoint returning paginated list
+  name: { type: String, required: true },          // used as queryKey base
+  params: { type: Object, default: () => ({}) },
+  stateKey: { type: String, default: 'status' },   // field in row that holds the state key
+  states: {                                         // column definitions
+    type: Array,
+    required: true,
+    // [{ key: 'todo', label: 'Pendiente', color: 'slate' }]
+    // color = tailwind color name: slate|red|yellow|green|blue|indigo|purple|pink
+  },
+  moveMutation: { type: Function, default: null }, // (id, newState) => Promise — called on drop
+  perPage: { type: Number, default: 50 },
+})
+
+const emit = defineEmits(['move', 'card-click'])
+
+const api = useApi()
+const queryClient = useQueryClient()
+
+// ─── Fetch all rows ───────────────────────────────────────────────────────────
+const loading = ref(false)
+const rows = ref([])
+
+const fetchAll = async () => {
+  loading.value = true
+  try {
+    const res = await api.post(props.endpoint, { perPage: props.perPage, ...props.params })
+    rows.value = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
+  } catch (e) {
+    console.error('[Kanban] fetch error', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(fetchAll)
+
+watch(() => props.params, fetchAll, { deep: true })
+
+// ─── Rows grouped by state ────────────────────────────────────────────────────
+const columnRows = computed(() => {
+  const map = {}
+  for (const s of props.states) map[s.key] = []
+  for (const row of rows.value) {
+    const state = row[props.stateKey]
+    if (map[state]) map[state].push(row)
+  }
+  return map
+})
+
+// ─── DnD ─────────────────────────────────────────────────────────────────────
+const draggedId = ref(null)
+const draggedFromState = ref(null)
+const dragOverState = ref(null)
+
+const onDragStart = (row, state) => {
+  draggedId.value = row.id
+  draggedFromState.value = state
+}
+
+const onDragOver = (e, state) => {
+  e.preventDefault()
+  dragOverState.value = state
+}
+
+const onDragLeave = () => { dragOverState.value = null }
+
+const onDrop = async (targetState) => {
+  dragOverState.value = null
+  if (!draggedId.value || draggedFromState.value === targetState) {
+    draggedId.value = null
+    draggedFromState.value = null
+    return
+  }
+
+  const id = draggedId.value
+  const fromState = draggedFromState.value
+  draggedId.value = null
+  draggedFromState.value = null
+
+  // Optimistic update
+  const idx = rows.value.findIndex(r => r.id === id)
+  if (idx >= 0) rows.value[idx] = { ...rows.value[idx], [props.stateKey]: targetState }
+
+  emit('move', { id, from: fromState, to: targetState })
+
+  if (props.moveMutation) {
+    try {
+      await props.moveMutation(id, targetState)
+    } catch (e) {
+      // Rollback
+      const ridx = rows.value.findIndex(r => r.id === id)
+      if (ridx >= 0) rows.value[ridx] = { ...rows.value[ridx], [props.stateKey]: fromState }
+      console.error('[Kanban] move failed, rolled back', e)
+    }
+  }
+}
+
+// ─── Color map ────────────────────────────────────────────────────────────────
+const colorMap = {
+  slate:  { header: 'bg-surface text-foreground', over: 'ring-2 ring-slate-400' },
+  red:    { header: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300',       over: 'ring-2 ring-red-400' },
+  yellow: { header: 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300', over: 'ring-2 ring-yellow-400' },
+  green:  { header: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300', over: 'ring-2 ring-green-400' },
+  blue:   { header: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',   over: 'ring-2 ring-blue-400' },
+  indigo: { header: 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300', over: 'ring-2 ring-indigo-400' },
+  purple: { header: 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300', over: 'ring-2 ring-purple-400' },
+  pink:   { header: 'bg-pink-50 dark:bg-pink-900/20 text-pink-700 dark:text-pink-300',   over: 'ring-2 ring-pink-400' },
+}
+
+const getColors = (state) => colorMap[state.color ?? 'slate'] ?? colorMap.slate
+
+const reload = () => fetchAll()
+defineExpose({ reload, rows })
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <div v-if="loading" class="flex items-center justify-center py-16 gap-2 text-slate-400">
+      <IconLoader2 class="size-5 animate-spin" stroke="1.5" />
+      <span class="text-sm">Cargando...</span>
+    </div>
+
+    <!-- Board -->
+    <div v-else class="flex gap-4 overflow-x-auto pb-4">
+      <div
+        v-for="state in states"
+        :key="state.key"
+        class="flex-shrink-0 w-72 flex flex-col rounded-xl border border-card-line overflow-hidden transition-shadow"
+        :class="dragOverState === state.key ? getColors(state).over : ''"
+        @dragover="onDragOver($event, state.key)"
+        @dragleave="onDragLeave"
+        @drop="onDrop(state.key)"
+      >
+        <!-- Column header -->
+        <div :class="['px-4 py-3 flex items-center justify-between', getColors(state).header]">
+          <span class="font-semibold text-sm">{{ state.label }}</span>
+          <span class="text-xs font-bold bg-white/60 dark:bg-black/20 rounded-full px-2 py-0.5">
+            {{ columnRows[state.key]?.length ?? 0 }}
+          </span>
+        </div>
+
+        <!-- Cards -->
+        <div class="flex-1 flex flex-col gap-2 p-3 bg-muted min-h-24">
+          <div
+            v-for="row in columnRows[state.key]"
+            :key="row.id"
+            draggable="true"
+            @dragstart="onDragStart(row, state.key)"
+            class="bg-card border border-card-line rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
+            :class="draggedId === row.id ? 'opacity-40' : ''"
+            @click="emit('card-click', row)"
+          >
+            <slot name="card" :row="row" :state="state">
+              <!-- Default card -->
+              <div class="space-y-1">
+                <div
+                  v-for="(val, key) in Object.fromEntries(Object.entries(row).filter(([k]) => k !== props.stateKey).slice(0, 3))"
+                  :key="key"
+                  class="text-sm"
+                >
+                  <span class="text-muted-foreground text-xs capitalize">{{ key }}: </span>
+                  <span class="text-foreground font-medium">{{ val }}</span>
+                </div>
+              </div>
+            </slot>
+          </div>
+
+          <div
+            v-if="!columnRows[state.key]?.length"
+            class="flex-1 flex items-center justify-center py-6 text-sm text-muted-foreground-2"
+          >
+            Sin elementos
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Table/List.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { IconSearch, IconLoader2 } from '@tabler/icons-vue'
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+// Infinite scroll list — fetches next page when sentinel enters viewport
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  searchPlaceholder: { type: String, default: 'Buscar...' },
+  showSearch: { type: Boolean, default: true },
+  perPage: { type: Number, default: 20 },
+})
+
+const emit = defineEmits(['row-click'])
+
+const api = useApi()
+const search = ref('')
+const sentinel = ref(null)
+
+let searchTimeout = null
+const debouncedSearch = ref('')
+watch(search, (v) => {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
+})
+
+const queryKey = computed(() => [props.name, 'infinite', debouncedSearch.value, props.params])
+
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
+  queryKey,
+  queryFn: ({ pageParam = 1 }) =>
+    api.post(props.endpoint, {
+      search: debouncedSearch.value,
+      page: pageParam,
+      perPage: props.perPage,
+      ...props.params,
+    }),
+  getNextPageParam: (lastPage) => {
+    const meta = lastPage?.meta ?? lastPage
+    if (!meta?.current_page || !meta?.last_page) return undefined
+    return meta.current_page < meta.last_page ? meta.current_page + 1 : undefined
+  },
+  initialPageParam: 1,
+})
+
+const rows = computed(() => data.value?.pages.flatMap(p => p?.data ?? (Array.isArray(p) ? p : [])) ?? [])
+
+// Intersection observer for auto-load
+let observer = null
+onMounted(() => {
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && hasNextPage.value && !isFetchingNextPage.value) {
+      fetchNextPage()
+    }
+  }, { rootMargin: '200px' })
+  if (sentinel.value) observer.observe(sentinel.value)
+})
+onBeforeUnmount(() => observer?.disconnect())
+
+watch(sentinel, (el) => {
+  if (el && observer) observer.observe(el)
+})
+
+const reload = () => refetch()
+defineExpose({ reload, rows })
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div v-if="showSearch" class="relative">
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      </div>
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+    </div>
+
+    <!-- Loading skeleton -->
+    <div v-if="isLoading" class="space-y-2">
+      <div
+        v-for="i in 8"
+        :key="i"
+        class="h-16 bg-surface rounded-xl animate-pulse"
+      />
+    </div>
+
+    <!-- Rows -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="row in rows"
+        :key="row.id ?? JSON.stringify(row)"
+        class="bg-card border border-card-line rounded-xl px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
+        @click="emit('row-click', row)"
+      >
+        <slot name="item" :row="row">
+          <!-- Default: show first few keys -->
+          <div class="flex flex-wrap gap-x-6 gap-y-1">
+            <div
+              v-for="(val, key) in Object.fromEntries(Object.entries(row).slice(0, 4))"
+              :key="key"
+              class="text-sm"
+            >
+              <span class="text-muted-foreground text-xs">{{ key }}: </span>
+              <span class="text-foreground">{{ val }}</span>
+            </div>
+          </div>
+        </slot>
+      </div>
+
+      <div v-if="rows.length === 0" class="text-center py-12 text-muted-foreground text-sm">
+        Sin resultados
+      </div>
+    </div>
+
+    <!-- Sentinel + loader -->
+    <div ref="sentinel" class="flex justify-center py-4">
+      <div v-if="isFetchingNextPage" class="flex items-center gap-2 text-sm text-slate-400">
+        <IconLoader2 class="size-4 animate-spin" stroke="1.5" />
+        Cargando más...
+      </div>
+    </div>
+  </div>
+</template>