@indielayer/ui 0.2.1 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -28,6 +28,7 @@
       "import": "./lib/esm/index.js",
       "require": "./lib/cjs/index.js"
     },
+    "./nuxt": "./src/nuxt.js",
     "./tailwind.preset": "./lib/tailwind.preset.js",
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
   },
@@ -72,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0b123b75fa7b3de0053171156690dd14672f538f"
+  "gitHead": "bc828716102b0e6063aa0db9cd74c84e46fbe9a7"
 }

package/src/components/collapse/Collapse.vue

@@ -82,19 +82,22 @@ export default {
     return {
       collapsed: !this.expanded,
       maxHeight: !this.expanded ? 0 : 'auto',
+      observer: null,
     }
   },
 
   beforeMount() {
-    window.addEventListener('resize', this.resizeContent)
+    window.addEventListener('resize', this.onResize)
   },
 
   beforeUnmount() {
-    window.removeEventListener('resize', this.resizeContent)
+    this.observer.disconnect()
+    window.removeEventListener('resize', this.onResize)
   },
 
   mounted() {
-    this.resizeContent()
+    this.observer = new ResizeObserver(this.onResize)
+    this.observer.observe(this.$refs.content)
   },
 
   methods: {
@@ -103,10 +106,10 @@ export default {
 
       this.collapsed = !this.collapsed
       this.$emit('toggle', this.collapsed)
-      this.resizeContent()
+      this.onResize()
     },
 
-    resizeContent() {
+    onResize() {
       if (this.collapsed) {
         this.maxHeight = 0
       } else {

package/src/components/textarea/Textarea.vue

@@ -123,6 +123,12 @@ export default {
     }
   },
 
+  data() {
+    return {
+      observer: null,
+    }
+  },
+
   watch: {
     modelValue() {
       setTimeout(this.resize)
@@ -133,11 +139,14 @@ export default {
   },
 
   mounted() {
-    this.resize()
+    this.observer = new ResizeObserver(this.resize)
+    this.observer.observe(this.$refs.focusRef)
+
     window.addEventListener('resize', this.resize)
   },
 
   beforeUnmount() {
+    this.observer.disconnect()
     window.removeEventListener('resize', this.resize)
   },
 

package/src/nuxt.js

@@ -0,0 +1,19 @@
+import { join } from 'pathe'
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule((nuxt) => ({
+  async setup(options) {
+    nuxt.hook('components:dirs', (dirs) => {
+      dirs.push({
+        path: join(__dirname, 'components'),
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+
+      // temp import XTab - would be XTabsTab
+      dirs.push({
+        path: join(__dirname, 'components/tabs'),
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+    })
+  },
+}))