@innertia-solutions/innertia-nuxt 0.1.1

package/components/MobileLoginPicker.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import * as TablerIcons from '@tabler/icons-vue'
+import { IconArrowRight } from '@tabler/icons-vue'
+import type { AppDefinition } from '~/configs/apps'
+
+const props = defineProps<{
+  /** Apps a mostrar como opciones de login. */
+  options: AppDefinition[]
+  /** Título personalizable. */
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  /** Emitido cuando el usuario elige un app — el padre se encarga de navegar y recordar la elección. */
+  pick: [app: AppDefinition]
+}>()
+
+const heading = computed(() => props.title ?? '¿Cómo quieres ingresar?')
+
+function resolveIcon(name?: string) {
+  if (!name) return null
+  return (TablerIcons as Record<string, unknown>)[name] ?? null
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col bg-white dark:bg-slate-950">
+    <!-- Header con logo -->
+    <div class="flex items-center justify-center px-6 pt-10 pb-8">
+      <img src="/isologo-light.png" alt="Asetio" class="h-8 dark:hidden" />
+      <img src="/isologo-dark.png" alt="Asetio" class="h-8 hidden dark:block" />
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 flex items-start justify-center px-6">
+      <div class="w-full max-w-sm space-y-6">
+        <div class="text-center space-y-1.5">
+          <h1 class="text-2xl font-bold text-slate-900 dark:text-white">
+            {{ heading }}
+          </h1>
+          <p class="text-sm text-slate-600 dark:text-slate-400">
+            Elige el tipo de acceso para continuar.
+          </p>
+        </div>
+
+        <!-- Opciones -->
+        <div class="space-y-3">
+          <button
+            v-for="app in options"
+            :key="app.path"
+            type="button"
+            class="group w-full flex items-center gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-4 text-left hover:border-violet-300 dark:hover:border-violet-700 hover:bg-violet-50/50 dark:hover:bg-violet-900/10 transition-colors"
+            @click="emit('pick', app)"
+          >
+            <div class="shrink-0 size-11 rounded-xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center group-hover:bg-violet-200 dark:group-hover:bg-violet-900/50 transition-colors">
+              <component
+                v-if="resolveIcon(app.icon)"
+                :is="resolveIcon(app.icon)"
+                class="size-5 text-violet-600 dark:text-violet-400"
+              />
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="text-base font-semibold text-slate-900 dark:text-white">
+                {{ app.label }}
+              </div>
+              <div v-if="app.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-2">
+                {{ app.description }}
+              </div>
+            </div>
+            <IconArrowRight class="shrink-0 size-5 text-slate-400 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-6 py-6 text-center">
+      <p class="text-xs text-slate-400 dark:text-slate-600">
+        © {{ new Date().getFullYear() }} {{ $config.public.appName ?? 'Asetio' }}
+      </p>
+    </div>
+  </div>
+</template>

package/components/Modal/Base.vue

@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title:      { type: String,  default: '' },
+  size:       { type: String,  default: 'md' },
+  loading:    { type: Boolean, default: false },
+  closable:   { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    :closable="closable && !loading"
+    :backdrop-dismiss="closable && !loading"
+    :show-footer="!!$slots.footer"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="emit('close')"
+  >
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </Modal>
+</template>

package/components/Modal/DeleteConfirm.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  modelValue:  { type: Boolean, default: false },
+  title:       { type: String, default: 'Confirmar eliminación' },
+  message:     { type: String, default: 'Esta acción es irreversible. ¿Estás seguro de que deseas continuar?' },
+  confirmText: { type: String, default: 'Eliminar' },
+  cancelText:  { type: String, default: 'Cancelar' },
+  loading:     { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
+
+const close = () => {
+  if (props.loading) return
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    :title="title"
+    size="sm"
+    :closable="!loading"
+    :backdrop-dismiss="!loading"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <p class="text-sm text-muted-foreground">{{ message }}</p>
+
+    <div class="flex justify-end gap-2 mt-5">
+      <AppButton
+        :text="cancelText"
+        severity="secondary"
+        size="sm"
+        :disabled="loading"
+        @click="close"
+      />
+      <AppButton
+        :text="confirmText"
+        severity="danger"
+        size="sm"
+        :loading="loading"
+        @click="$emit('confirm')"
+      />
+    </div>
+  </Modal>
+</template>

package/components/Modal.vue

@@ -0,0 +1,103 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title:      { type: String, default: '' },
+  size:       { type: String, default: 'md', validator: v => ['xs','sm','md','lg','xl','2xl','3xl','fullscreen'].includes(v) },
+  closable:   { type: Boolean, default: true },
+  backdropDismiss: { type: Boolean, default: true },
+  showHeader: { type: Boolean, default: true },
+  showFooter: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`
+
+const sizeClass = computed(() => ({
+  xs: 'max-w-xs', sm: 'max-w-sm', md: 'max-w-md',
+  lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl', fullscreen: 'max-w-full',
+}[props.size] ?? 'max-w-md'))
+
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+const onBackdrop = (e) => {
+  if (e.target === e.currentTarget && props.backdropDismiss && props.closable) close()
+}
+
+const onEsc = (e) => { if (e.key === 'Escape' && props.modelValue && props.closable) close() }
+
+watch(() => props.modelValue, v => {
+  document.body.style.overflow = v ? 'hidden' : ''
+})
+
+onMounted(() => document.addEventListener('keydown', onEsc))
+onUnmounted(() => {
+  document.removeEventListener('keydown', onEsc)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport v-if="modelValue" to="body">
+    <Transition name="modal" appear>
+      <div
+        class="fixed inset-0 z-[9999] bg-black/40 dark:bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
+        role="dialog"
+        tabindex="-1"
+        :aria-labelledby="`${modalId}-label`"
+        @click="onBackdrop"
+      >
+        <div
+          :class="['bg-card border border-card-line rounded-xl shadow-xl w-full modal-content', sizeClass]"
+          @click.stop
+        >
+          <!-- Header -->
+          <div v-if="showHeader" class="flex items-center justify-between px-5 py-4 border-b border-card-line">
+            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-foreground">
+              <slot name="header">{{ title }}</slot>
+            </h3>
+            <button
+              v-if="closable"
+              type="button"
+              class="size-7 flex items-center justify-center rounded-lg text-muted-foreground hover:text-muted-foreground-1 hover:bg-muted-hover transition-colors"
+              @click="close"
+            >
+              <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Body -->
+          <div class="p-5">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="showFooter" class="flex items-center justify-end gap-2 px-5 py-4 border-t border-card-line">
+            <slot name="footer">
+              <AppButton v-if="closable" text="Cerrar" severity="secondary" size="sm" @click="close" />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active { transition: opacity 0.15s ease; }
+.modal-enter-from,
+.modal-leave-to      { opacity: 0; }
+
+.modal-enter-from .modal-content,
+.modal-leave-to .modal-content  { transform: scale(0.97) translateY(-8px); opacity: 0; }
+.modal-enter-to .modal-content,
+.modal-leave-from .modal-content { transform: scale(1) translateY(0); opacity: 1; }
+.modal-content { transition: transform 0.15s ease, opacity 0.15s ease; }
+</style>

package/components/Nav/Tabs.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+interface Tab {
+  label: string
+  to: string
+  icon?: any
+  exact?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[]
+  color?: string
+  activeClass?: string
+}>(), {
+  color: 'blue',
+})
+
+const colorTextClass = computed(() => ({
+  blue:   'text-blue-600   dark:text-blue-400',
+  gray:   'text-foreground',
+  slate:  'text-foreground',
+  green:  'text-green-600  dark:text-green-400',
+  amber:  'text-amber-600  dark:text-amber-400',
+  red:    'text-red-600    dark:text-red-400',
+  purple: 'text-purple-600 dark:text-purple-400',
+  rose:   'text-rose-600   dark:text-rose-400',
+}[props.color] ?? 'text-blue-600 dark:text-blue-400'))
+
+const resolvedActiveClass = computed(() =>
+  props.activeClass ?? `bg-card shadow-sm ${colorTextClass.value}`
+)
+
+const route = useRoute()
+
+const isActive = (tab: Tab) =>
+  tab.exact ? route.path === tab.to : route.path.startsWith(tab.to)
+</script>
+
+<template>
+  <div class="flex items-center gap-x-1 p-1 bg-surface border border-card-line rounded-xl w-fit">
+    <NuxtLink
+      v-for="tab in tabs"
+      :key="tab.to"
+      :to="tab.to"
+      class="flex items-center gap-x-2 px-4 py-2 text-xs font-bold rounded-lg transition-all"
+      :class="isActive(tab)
+        ? resolvedActiveClass
+        : 'text-muted-foreground hover:text-foreground'"
+    >
+      <component :is="tab.icon" v-if="tab.icon" class="size-4" />
+      {{ tab.label }}
+    </NuxtLink>
+  </div>
+</template>

package/components/PermissionsTree.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { IconSearch, IconFolder, IconFolderOpen, IconKey, IconStack2 } from '@tabler/icons-vue'
+
+const props = defineProps({
+  apps:        { type: Array, default: () => [] },   // [{ app, app_label, groups: [{ category, category_alias, permissions }] }]
+  modelValue:  { type: Array, default: () => [] },   // selected permission names
+  readonly:    { type: Boolean, default: false },
+  folderColor: { type: String, default: 'gray' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const folderColorClass = computed(() => ({
+  gray:   'text-slate-400 dark:text-slate-500',
+  blue:   'text-blue-400 dark:text-blue-500',
+  amber:  'text-amber-400 dark:text-amber-500',
+  green:  'text-green-400 dark:text-green-500',
+  purple: 'text-purple-400 dark:text-purple-500',
+  rose:   'text-rose-400 dark:text-rose-500',
+}[props.folderColor] ?? 'text-slate-400 dark:text-slate-500'))
+
+const search = ref('')
+
+// Flatten all permissions for search
+const filteredApps = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  if (!q) return props.apps
+
+  return props.apps
+    .map(app => ({
+      ...app,
+      groups: app.groups
+        .map(g => ({
+          ...g,
+          permissions: g.permissions.filter(p =>
+            p.name.toLowerCase().includes(q) || (p.description ?? '').toLowerCase().includes(q)
+          ),
+        }))
+        .filter(g => g.permissions.length > 0),
+    }))
+    .filter(app => app.groups.length > 0)
+})
+
+const visibleApps = computed(() => {
+  if (!props.readonly) return filteredApps.value
+  return filteredApps.value
+    .map(app => ({
+      ...app,
+      groups: app.groups
+        .map(g => ({
+          ...g,
+          permissions: g.permissions.filter(p => props.modelValue.includes(p.name)),
+        }))
+        .filter(g => g.permissions.length > 0),
+    }))
+    .filter(app => app.groups.length > 0)
+})
+
+// Collapse state — keyed as "app" or "app::category"
+const collapsed = ref({})
+
+watch(search, (q) => {
+  if (!q.trim()) return
+  filteredApps.value.forEach(app => {
+    collapsed.value[app.app] = false
+    app.groups.forEach(g => { collapsed.value[`${app.app}::${g.category}`] = false })
+  })
+})
+
+function isCollapsed(key) { return collapsed.value[key] ?? false }
+function toggle(key) { collapsed.value[key] = !collapsed.value[key] }
+
+function isSelected(name) { return props.modelValue.includes(name) }
+
+function appPermNames(app) {
+  return app.groups.flatMap(g => g.permissions.map(p => p.name))
+}
+
+function groupPermNames(group) {
+  return group.permissions.map(p => p.name)
+}
+
+function appState(app) {
+  const names = appPermNames(app)
+  const n = names.filter(n => props.modelValue.includes(n)).length
+  return n === 0 ? 'none' : n === names.length ? 'all' : 'partial'
+}
+
+function groupState(group) {
+  const names = groupPermNames(group)
+  const n = names.filter(n => props.modelValue.includes(n)).length
+  return n === 0 ? 'none' : n === names.length ? 'all' : 'partial'
+}
+
+function toggleApp(app) {
+  const names = appPermNames(app)
+  const next = appState(app) === 'all'
+    ? props.modelValue.filter(n => !names.includes(n))
+    : [...new Set([...props.modelValue, ...names])]
+  emit('update:modelValue', next)
+}
+
+function toggleGroup(group) {
+  const names = groupPermNames(group)
+  const next = groupState(group) === 'all'
+    ? props.modelValue.filter(n => !names.includes(n))
+    : [...new Set([...props.modelValue, ...names])]
+  emit('update:modelValue', next)
+}
+
+function togglePermission(name) {
+  const next = isSelected(name)
+    ? props.modelValue.filter(n => n !== name)
+    : [...props.modelValue, name]
+  emit('update:modelValue', next)
+}
+
+function setIndeterminate(el, state) {
+  if (el) el.indeterminate = state === 'partial'
+}
+
+function appSelectedCount(app) {
+  return appPermNames(app).filter(n => props.modelValue.includes(n)).length
+}
+function appTotalCount(app) { return appPermNames(app).length }
+function groupSelectedCount(group) {
+  return groupPermNames(group).filter(n => props.modelValue.includes(n)).length
+}
+</script>
+
+<template>
+  <div class="w-full space-y-2">
+
+    <!-- Search -->
+    <div class="relative">
+      <IconSearch class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-slate-400 pointer-events-none" />
+      <input
+        v-model="search"
+        type="search"
+        placeholder="Buscar permiso…"
+        class="w-full pl-7 pr-3 py-1.5 text-xs bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md text-slate-700 dark:text-slate-300 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500/40 focus:border-blue-400"
+      />
+    </div>
+
+    <!-- Tree -->
+    <div class="rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden text-sm">
+
+      <div v-if="visibleApps.length === 0" class="px-3 py-6 text-center text-xs text-slate-400 dark:text-slate-500">
+        {{ search ? 'Sin resultados.' : readonly ? 'Sin permisos asignados.' : 'Sin permisos disponibles.' }}
+      </div>
+
+      <template v-for="(app, ai) in visibleApps" :key="app.app">
+
+        <!-- ── App row (level 1) ── -->
+        <div
+          class="flex items-center gap-1.5 px-2 py-1.5 cursor-pointer select-none bg-slate-100 dark:bg-slate-800 hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors"
+          :class="ai > 0 ? 'border-t border-slate-200 dark:border-slate-700' : ''"
+          @click="toggle(app.app)"
+        >
+          <input
+            v-if="!readonly"
+            type="checkbox"
+            class="size-3 rounded border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-0 cursor-pointer shrink-0"
+            :checked="appState(app) === 'all'"
+            :ref="el => setIndeterminate(el, appState(app))"
+            @click.stop
+            @change="toggleApp(app)"
+          />
+          <IconStack2 class="size-3.5 shrink-0" :class="folderColorClass" />
+          <span class="font-bold text-slate-700 dark:text-slate-200 flex-1 truncate tracking-wide uppercase text-[11px]">
+            {{ app.app_label || app.app }}
+          </span>
+          <span class="text-[11px] tabular-nums text-slate-400 dark:text-slate-500 shrink-0">
+            {{ readonly
+              ? appTotalCount(app)
+              : `${appSelectedCount(app)}/${appTotalCount(app)}`
+            }}
+          </span>
+        </div>
+
+        <template v-if="!isCollapsed(app.app)">
+          <template v-for="(group, gi) in app.groups" :key="group.category">
+
+            <!-- ── Category row (level 2) ── -->
+            <div
+              class="flex items-center gap-1 border-t border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/40 hover:bg-slate-100 dark:hover:bg-slate-800/70 transition-colors cursor-pointer select-none"
+              @click="toggle(`${app.app}::${group.category}`)"
+            >
+              <!-- indent line -->
+              <div class="flex items-center shrink-0 pl-3" style="width:32px">
+                <div class="flex flex-col items-center h-full" style="width:10px">
+                  <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700" />
+                  <div class="w-2.5 h-px bg-slate-200 dark:bg-slate-700" />
+                  <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700"
+                    :class="gi === app.groups.length - 1 ? 'opacity-0' : ''" />
+                </div>
+              </div>
+
+              <input
+                v-if="!readonly"
+                type="checkbox"
+                class="size-3 rounded border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-0 cursor-pointer shrink-0"
+                :checked="groupState(group) === 'all'"
+                :ref="el => setIndeterminate(el, groupState(group))"
+                @click.stop
+                @change="toggleGroup(group)"
+              />
+              <IconFolderOpen v-if="!isCollapsed(`${app.app}::${group.category}`)" class="size-3.5 shrink-0" :class="folderColorClass" />
+              <IconFolder     v-else                                                class="size-3.5 shrink-0" :class="folderColorClass" />
+
+              <span class="font-semibold text-slate-600 dark:text-slate-300 flex-1 truncate py-1">
+                {{ group.category_alias ?? group.category }}
+              </span>
+              <span class="text-[11px] tabular-nums text-slate-400 dark:text-slate-500 pr-2 shrink-0">
+                {{ readonly
+                  ? group.permissions.length
+                  : `${groupSelectedCount(group)}/${group.permissions.length}`
+                }}
+              </span>
+            </div>
+
+            <!-- ── Permission rows (level 3) ── -->
+            <template v-if="!isCollapsed(`${app.app}::${group.category}`)">
+              <div
+                v-for="(perm, pi) in group.permissions"
+                :key="perm.name"
+                class="flex items-center gap-1 border-t border-slate-100 dark:border-slate-800 hover:bg-blue-50/50 dark:hover:bg-blue-500/5 transition-colors"
+                :class="!readonly ? 'cursor-pointer' : ''"
+                @click="!readonly && togglePermission(perm.name)"
+              >
+                <!-- double indent line -->
+                <div class="flex items-center shrink-0 pl-3" style="width:52px">
+                  <div class="flex flex-col items-center h-full mr-1" style="width:10px">
+                    <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700" />
+                    <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700"
+                      :class="gi === app.groups.length - 1 ? 'opacity-0' : ''" />
+                  </div>
+                  <div class="flex flex-col items-center h-full" style="width:10px">
+                    <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700" />
+                    <div class="w-2.5 h-px bg-slate-200 dark:bg-slate-700" />
+                    <div class="w-px flex-1 bg-slate-200 dark:bg-slate-700"
+                      :class="pi === group.permissions.length - 1 ? 'opacity-0' : ''" />
+                  </div>
+                </div>
+
+                <div class="shrink-0 flex items-center justify-center w-3.5">
+                  <input
+                    v-if="!readonly"
+                    type="checkbox"
+                    class="size-3 rounded border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-0 cursor-pointer"
+                    :checked="isSelected(perm.name)"
+                    @click.stop
+                    @change="togglePermission(perm.name)"
+                  />
+                  <span v-else class="size-1.5 rounded-full bg-green-500 block" />
+                </div>
+
+                <IconKey class="size-3 text-slate-400 dark:text-slate-500 shrink-0" />
+                <span class="font-mono text-slate-700 dark:text-slate-300 truncate flex-1 py-1">{{ perm.name }}</span>
+                <span class="text-slate-400 dark:text-slate-500 truncate hidden sm:block pr-2" style="max-width:240px">
+                  {{ perm.description ?? '' }}
+                </span>
+              </div>
+            </template>
+
+          </template>
+        </template>
+
+      </template>
+    </div>
+  </div>
+</template>