@innertia-solutions/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/ui",
-  "version": "0.1.4",
+  "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)
+  }
+})