@dolanske/vui 0.3.1 → 0.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": false,
   "description": "Brother in Christ there's a new UI library ",
   "author": "dolanske",

package/src/components/Accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
-import { ref, useTemplateRef, watch, watchEffect } from 'vue'
+import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 import './accordion.scss'
 
 export interface AccordionProps {
@@ -58,10 +58,12 @@ defineExpose({
   isOpen,
 })
 
-useResizeObserver(contentRef, ([entry]) => {
-  if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
-    contentMaxHeight.value = entry.contentRect.height || 0
-  }
+onMounted(() => {
+  useResizeObserver(contentRef, ([entry]) => {
+    if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
+      contentMaxHeight.value = entry.contentRect.height || 0
+    }
+  })
 })
 </script>
 

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -2,7 +2,7 @@
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { Icon } from '@iconify/vue'
 import { useClipboard } from '@vueuse/core'
-import { onBeforeMount, useSlots, useTemplateRef } from 'vue'
+import { onMounted, useSlots, useTemplateRef } from 'vue'
 import Flex from '../Flex/Flex.vue'
 import './copy-clipboard.scss'
 
@@ -36,7 +36,7 @@ const {
 })
 const slots = useSlots()
 
-onBeforeMount(() => {
+onMounted(() => {
   if (!isSupported.value) {
     console.error('Clipboard API is not supported. This component will not work')
   }

package/src/components/Dropdown/Dropdown.vue

@@ -53,7 +53,7 @@ onClickOutside(dropdownRef, (event) => {
 })
 
 const anchorWidth = computed(() => {
-  if (!expand)
+  if (!expand || !window)
     return 0
   return anchorRef.value?.getBoundingClientRect().width
 })

package/src/components/Input/Dropzone.vue

@@ -2,7 +2,7 @@
 import type { InputProps } from './Input.vue'
 import { Icon } from '@iconify/vue'
 import { useEventListener } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import Flex from '../Flex/Flex.vue'
 import Input from './Input.vue'
 
@@ -25,11 +25,13 @@ function onSubmitHandler(e: any, isFromField?: boolean) {
 
 const dropzoneRef = useTemplateRef<HTMLDivElement>('dropzone')
 
-useEventListener(dropzoneRef, 'dragenter', onSubmitHandler, false)
-useEventListener(dropzoneRef, 'dragleave', onSubmitHandler, false)
-useEventListener(dropzoneRef, 'dragover', onSubmitHandler, false)
-useEventListener(dropzoneRef, 'drop', onSubmitHandler, false)
-useEventListener(dropzoneRef, 'input', e => onSubmitHandler(e, true), false)
+onMounted(() => {
+  useEventListener(dropzoneRef, 'dragenter', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'dragleave', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'dragover', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'drop', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'input', e => onSubmitHandler(e, true), false)
+})
 </script>
 
 <template>

package/src/components/Table/Cell.vue

@@ -4,7 +4,7 @@ import { computed, useSlots, useTemplateRef } from 'vue'
 const slots = useSlots()
 const contextRef = useTemplateRef<HTMLTableCellElement>('context')
 const computedStyle = computed(() => {
-  if (!slots.context)
+  if (!slots.context || !window)
     return {}
   const width = contextRef.value?.getBoundingClientRect().width ?? 0
   return {

package/src/components/Tabs/Tabs.vue

@@ -27,6 +27,9 @@ const underlineRef = useTemplateRef('underline')
 const tabsRef = useTemplateRef('tabs')
 
 function computeUnderlinePosition() {
+  if (!window)
+    return
+
   if (tabsRef.value && underlineRef.value) {
     const activeBounds = tabsRef.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
     const parentBounds = tabsRef.value.getBoundingClientRect()
@@ -39,6 +42,8 @@ function computeUnderlinePosition() {
 }
 
 onMounted(() => {
+  useEventListener(window, 'resize', computeUnderlinePosition)
+
   watch(
     [active, () => expand],
     computeUnderlinePosition,
@@ -48,8 +53,6 @@ onMounted(() => {
     },
   )
 })
-
-useEventListener(window, 'resize', computeUnderlinePosition)
 </script>
 
 <template>