@dolanske/vui 0.3.1 → 0.3.3

package/package.json

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

package/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Avatar from './components/Avatar/Avatar.vue'
-import Button from './components/Button/Button.vue'
 import Divider from './components/Divider/Divider.vue'
+import Flex from './components/Flex/Flex.vue'
 import Tab from './components/Tabs/Tab.vue'
 
 import Tabs from './components/Tabs/Tabs.vue'
@@ -30,7 +30,12 @@ const tab = ref('components')
       </h1>
       <p>I am down</p>
 
-      <Avatar :size="80" />
+      <Flex>
+        <Avatar size="s" />
+        <Avatar size="m" />
+        <Avatar size="l" />
+        <Avatar :size="128" />
+      </Flex>
 
       <Divider />
 

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/Avatar/Avatar.vue

@@ -25,7 +25,7 @@ const showFallback = ref(false)
 <template>
   <div
     class="vui-avatar"
-    :class="[`vui-avatar-size-${typeof size === 'number' ? 'm' : size}`]"
+    :class="[`vui-avatar-size-${typeof size === 'number' ? 'l' : size}`]"
     :style="{
       ...(typeof size === 'number' && {
         '--avatar-size': formatUnitValue(size),

package/src/components/Avatar/avatar.scss

@@ -13,7 +13,7 @@
     --avatar-size: 48px;
 
     strong {
-      font-size: var(--font-size-m);
+      font-size: var(--font-size-l);
     }
   }
 
@@ -29,11 +29,13 @@
 
   svg {
     color: var(--color-text-light);
+    font-size: inherit;
   }
 
   strong {
     display: block;
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-ms);
+    line-height: 1;
   }
 
   img {

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>
@@ -72,6 +75,8 @@ useEventListener(window, 'resize', computeUnderlinePosition)
       @click="active = vnode.props.id"
     />
 
-    <div ref="underline" class="vui-tab-underline" />
+    <Transition name="fade" appear>
+      <div ref="underline" class="vui-tab-underline" />
+    </Transition>
   </div>
 </template>