@innertia-solutions/ui 0.1.5 → 0.1.6

package/components/Forms/SelectServer.vue

@@ -1,198 +1,38 @@
 <script setup>
 // Props del componente
 const props = defineProps({
-  // Endpoint para la carga (SSR)
-  endpoint: {
-    type: String,
-    required: true,
-  },
-
-  listFormat: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
-
-  perPage: {
-    type: Number,
-    required: false,
-    default: 15,
-  },
-
-  initialOptions: {
-    type: Array,
-    required: false,
-    default: () => [],
-  },
-
-  // v-model binding
-  modelValue: {
-    type: [String, Number, Array, Object],
-    required: false,
-    default: null,
-  },
-
-  // Basic configuration
-  placeholder: {
-    type: String,
-    required: false,
-    default: "Seleccionar opción...",
-  },
-
-  // Size configuration
-  size: {
-    type: String,
-    required: false,
-    default: "sm",
-    validator: (value) => ["xs", "sm", "md", "lg"].includes(value),
-  },
-
-  // Style configuration
-  class: {
-    type: String,
-    required: false,
-    default: "",
-  },
-
-  severity: {
-    type: String,
-    required: false,
-    default: "primary",
-    validator: (value) =>
-      ["primary", "secondary", "success", "danger", "warning", "info"].includes(
-        value
-      ),
-  },
-
-  // Functional properties
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  searchable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  loading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  clearable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  // Search configuration
-  searchPlaceholder: {
-    type: String,
-    required: false,
-    default: "Buscar...",
-  },
-
-  minSearchLength: {
-    type: Number,
-    required: false,
-    default: 0,
-  },
-
-  searchLimit: {
-    type: Number,
-    required: false,
-    default: 0,
-  },
-
-  // Multiple selection configuration
-  tagsMode: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  showCounter: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  maxSelection: {
-    type: Number,
-    required: false,
-    default: 0,
-  },
-
-  // Form integration
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-
-  // Event control
-  emitFocusEvents: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-
-  // Validation
-  errorMessage: {
-    type: String,
-    required: false,
-    default: "",
-  },
-
-  successMessage: {
-    type: String,
-    required: false,
-    default: "",
-  },
-
-  // Advanced options
-  allowEmpty: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
-
-  closeOnSelect: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
-
-  // Campo personalizable para mostrar como texto/label
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label",
-  },
-
-  // Campo personalizable para el valor real
-  valueKey: {
-    type: String,
-    required: false,
-    default: "id",
-  },
-
-  // Campo personalizable para descripción adicional
-  descriptionKey: {
-    type: String,
-    required: false,
-    default: "description",
-  },
+  // Endpoint para la carga desde API
+  endpoint: { type: String, required: true },
+  listFormat: { type: Boolean, default: true },
+  perPage: { type: Number, default: 15 },
+  initialOptions: { type: Array, default: () => [] },
+
+  // v-model
+  modelValue: { type: [String, Number, Array, Object], default: null },
+
+  // Form wrapper
+  label: { type: String, default: "" },
+  placeholder: { type: String, default: "Seleccionar..." },
+  hint: { type: String, default: "" },
+  error: { type: String, default: "" },
+
+  // Functional
+  multiple: { type: Boolean, default: false },
+  searchable: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: "Buscar..." },
+  minSearchLength: { type: Number, default: 0 },
+  tagsMode: { type: Boolean, default: false },
+  showCounter: { type: Boolean, default: false },
+  maxSelection: { type: Number, default: 0 },
+  allowEmpty: { type: Boolean, default: true },
+  closeOnSelect: { type: Boolean, default: true },
+
+  // Claves de campo
+  labelKey: { type: String, default: "name" },
+  valueKey: { type: String, default: "id" },
+  descriptionKey: { type: String, default: "description" },
 });
 
 // Emits
@@ -490,13 +330,8 @@ const sizeClasses = computed(() => {
 
 // Computed classes for validation states
 const validationClasses = computed(() => {
-  if (props.errorMessage) {
-    return "border-red-500";
-  }
-  if (props.successMessage) {
-    return "border-emerald-500";
-  }
-  return "border-gray-200 dark:border-slate-700";
+  if (props.error) return "border-red-400 dark:border-red-500";
+  return "border-slate-200 dark:border-slate-700";
 });
 
 // Combined select classes
@@ -662,6 +497,12 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="space-y-1.5">
+    <!-- Label -->
+    <label v-if="label" class="block text-sm font-medium text-slate-700 dark:text-slate-300">
+      {{ label }}
+    </label>
+
   <div class="relative" ref="selectRef">
     <!-- Hidden input for form integration -->
     <input v-if="name" type="hidden" :name="name" :value="multiple
@@ -876,11 +717,10 @@ onMounted(() => {
     </Transition>
 
     <!-- Validation messages -->
-    <div v-if="errorMessage" class="mt-1 text-sm text-red-600 dark:text-red-400">
-      {{ errorMessage }}
-    </div>
-    <div v-if="successMessage" class="mt-1 text-sm text-green-600 dark:text-green-400">
-      {{ successMessage }}
-    </div>
+  </div>
+
+    <!-- Error / Hint -->
+    <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
+    <p v-else-if="hint" class="text-xs text-slate-400 dark:text-slate-500">{{ hint }}</p>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Innertia Solutions — Nuxt UI layer: components and composables",
   "keywords": [
     "nuxt",
@@ -22,7 +22,8 @@
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",
-    "vue": ">=3.0.0"
+    "vue": ">=3.0.0",
+    "preline": ">=2.0.0"
   },
   "devDependencies": {
     "nuxt": "^3.16.0",

package/plugins/preline.client.ts

@@ -0,0 +1,77 @@
+declare global {
+  interface Window {
+    HSStaticMethods?: { autoInit?: () => void }
+    HSSelect?: new (el: HTMLElement) => { destroy?: () => void }
+    HSThemeAppearance?: { init?: () => void }
+  }
+}
+
+export default defineNuxtPlugin(async () => {
+  if (!process.client) return
+
+  try {
+    await import('preline')
+
+    const initPreline = () => {
+      try { window.HSStaticMethods?.autoInit?.() } catch (_) {}
+      try { window.HSThemeAppearance?.init?.() } catch (_) {}
+    }
+
+    const performMultipleInits = () => {
+      initPreline()
+      setTimeout(initPreline, 50)
+      setTimeout(initPreline, 200)
+      setTimeout(initPreline, 500)
+    }
+
+    // Inicialización inicial
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', performMultipleInits)
+    } else {
+      nextTick(performMultipleInits)
+    }
+
+    const nuxtApp = useNuxtApp()
+
+    // Re-inicializar en cada cambio de página
+    nuxtApp.hooks.hook('page:finish', () => {
+      requestAnimationFrame(performMultipleInits)
+    })
+
+    nuxtApp.hooks.hookOnce('app:mounted', () => {
+      performMultipleInits()
+    })
+
+    // MutationObserver: reinicializar cuando aparezcan elementos Preline en el DOM
+    const observer = new MutationObserver((mutations) => {
+      const hasPreline = mutations.some(({ addedNodes }) =>
+        Array.from(addedNodes).some((node) => {
+          if (node.nodeType !== Node.ELEMENT_NODE) return false
+          const el = node as Element
+          return (
+            el.querySelector?.('[data-hs-overlay],[data-hs-dropdown],[data-hs-select]') ||
+            el.hasAttribute?.('data-hs-overlay') ||
+            el.hasAttribute?.('data-hs-dropdown') ||
+            el.hasAttribute?.('data-hs-select') ||
+            (typeof el.className === 'string' && el.className.includes('hs-'))
+          )
+        })
+      )
+      if (hasPreline) {
+        setTimeout(initPreline, 10)
+        setTimeout(initPreline, 100)
+      }
+    })
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () =>
+        observer.observe(document.body, { childList: true, subtree: true })
+      )
+    } else {
+      observer.observe(document.body, { childList: true, subtree: true })
+    }
+
+  } catch (e) {
+    console.warn('[innertia-ui] Error al cargar Preline:', e)
+  }
+})