@innertia-solutions/innertia-nuxt 0.1.27 → 0.1.28

package/components/App/IconButton.vue

@@ -0,0 +1,41 @@
+<script setup>
+/**
+ * <App.IconButton> — botón de solo ícono (acciones de fila, toolbars).
+ * Uso:
+ *   <App.IconButton :icon="IconPencil" label="Editar" to="/ruta" />
+ *   <App.IconButton :icon="IconTrash" label="Eliminar" variant="danger" @click="..." />
+ */
+const props = defineProps({
+  icon: { type: [Object, Function], required: true },
+  label: { type: String, default: '' }, // title + aria-label
+  size: { type: String, default: 'md', validator: (v) => ['sm', 'md'].includes(v) },
+  variant: { type: String, default: 'default', validator: (v) => ['default', 'danger', 'primary'].includes(v) },
+  to: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+
+const boxSize = computed(() => (props.size === 'sm' ? 'size-7' : 'size-8'))
+const iconSize = computed(() => (props.size === 'sm' ? 'size-3.5' : 'size-4'))
+const variantClass = computed(() => ({
+  default: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800',
+  danger:  'text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10',
+  primary: 'text-slate-400 hover:text-primary hover:bg-primary/10',
+}[props.variant] || ''))
+</script>
+
+<template>
+  <NuxtLink
+    v-if="to" :to="to" :title="label || undefined" :aria-label="label || undefined"
+    class="inline-flex items-center justify-center rounded-lg transition-colors"
+    :class="[boxSize, variantClass]"
+  >
+    <component :is="icon" :class="iconSize" :stroke-width="1.5" />
+  </NuxtLink>
+  <button
+    v-else type="button" :disabled="disabled" :title="label || undefined" :aria-label="label || undefined"
+    class="inline-flex items-center justify-center rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+    :class="[boxSize, variantClass]"
+  >
+    <component :is="icon" :class="iconSize" :stroke-width="1.5" />
+  </button>
+</template>

package/components/App/SegmentedControl.vue

@@ -0,0 +1,32 @@
+<script setup>
+/**
+ * <App.SegmentedControl> — control segmentado / toggle horizontal.
+ * Uso:
+ *   <App.SegmentedControl v-model="view" :options="[{value:'kanban',icon:IconLayoutKanban},{value:'table',icon:IconTable}]" />
+ *   <App.SegmentedControl v-model="tab" :options="[{value:'a',label:'Regular'},{value:'b',label:'PIE'}]" />
+ */
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean], default: null },
+  options: { type: Array, required: true }, // [{ value, label?, icon? }]
+  size: { type: String, default: 'sm', validator: (v) => ['sm', 'md'].includes(v) },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const pad = computed(() => (props.size === 'md' ? 'px-3.5 py-2 text-sm' : 'px-3 py-1.5 text-sm'))
+const iconSize = computed(() => (props.size === 'md' ? 'size-4' : 'size-4'))
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-1 rounded-lg bg-muted p-1">
+    <button
+      v-for="o in options" :key="String(o.value)" type="button"
+      @click="emit('update:modelValue', o.value)"
+      :title="o.label || undefined"
+      class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors"
+      :class="[pad, modelValue === o.value ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground']"
+    >
+      <component :is="o.icon" v-if="o.icon" :class="iconSize" :stroke-width="1.5" />
+      <span v-if="o.label">{{ o.label }}</span>
+    </button>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",