@dolanske/vui 0.3.0 → 0.3.2

package/package.json

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

package/src/App.vue

@@ -26,7 +26,7 @@ const tab = ref('components')
     <div v-if="tab === 'components'">
       <h1 class="mb-xl">
         Hii
-        <span class="counter text-color-accent">12</span>
+        <span class="counter text-color-accent">129</span>
       </h1>
       <p>I am down</p>
 
@@ -35,17 +35,13 @@ const tab = ref('components')
       <Divider />
 
       <Tooltip>
-        <span>Hello world</span>
+        <span cl>Hello world</span>
         <template #tooltip>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi! Nobis maxime neque cumque, in a amet voluptatibus tenetur dicta eos delectus illo soluta aliquam voluptatum nulla? In, incidunt asperiores?
           </p>
         </template>
       </Tooltip>
-
-      <Button size="l">
-        Hii
-      </Button>
     </div>
     <div v-else-if="tab === 'typography'" class="typeset" :style="{ maxWidth: '688px', margin: 'auto' }">
       <h1>The Joke Tax Chronicles</h1>

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/Accordion/accordion.scss

@@ -27,7 +27,6 @@
       &:hover {
         text-decoration: inherit;
         text-underline-offset: inherit;
-
         background-color: var(--color-button-gray);
       }
     }
@@ -67,6 +66,7 @@
 
     svg {
       transition: var(--transition);
+      color: var(--color-text-light);
     }
   }
 

package/src/components/Avatar/avatar.scss

@@ -27,6 +27,10 @@
   background-color: var(--color-bg-raised);
   font-weight: 500;
 
+  svg {
+    color: var(--color-text-light);
+  }
+
   strong {
     display: block;
     font-size: var(--font-size-s);

package/src/components/Button/Button.vue

@@ -12,6 +12,8 @@ interface Props {
   // Provide URL to turn button into anchor
   // href?: string
   // target?: string
+
+  // State props
   loading?: boolean
   expand?: boolean
   square?: boolean
@@ -67,6 +69,7 @@ const padding = computed(() => {
     class="vui-button"
     :class="[{ loading, expand, disabled, plain, active, icon, square, dashed }, `vui-button-variant-${variant}`]"
     :disabled
+    role="button"
     :style="{
       '--button-height': height,
       '--button-padding': padding,

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
 })
@@ -71,10 +71,15 @@ const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
 
 <template>
   <div
-    ref="anchor" class="vui-dropdown-trigger-wrap" :style="{
+    ref="anchor"
+    class="vui-dropdown-trigger-wrap"
+    :style="{
       minWidth: mW,
       width: w,
     }"
+    role="button"
+    :aria-expanded="showMenu"
+    :aria-haspopup="true"
   >
     <slot name="trigger" :open :is-open="showMenu" :close :toggle />
   </div>

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/Popout/popout.scss

@@ -4,4 +4,5 @@
   min-width: 80px;
   background-color: var(--color-bg-raised);
   border-radius: var(--border-radius-m);
+  z-index: 1000;
 }

package/src/components/Select/select.scss

@@ -32,6 +32,7 @@
         .vui-button-slot svg {
           width: 14px;
           height: 14px;
+          color: var(--color-text-light);
         }
       }
 

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

@@ -14,7 +14,13 @@ const id = computed(() => props.id ?? props.label)
 </script>
 
 <template>
-  <button class="vui-tab" :data-tab-id="id" :class="{ disabled: props.disabled }" role="tab">
+  <button
+    class="vui-tab"
+    :data-tab-id="id"
+    :class="{ disabled: props.disabled }"
+    role="tab"
+    :name="id"
+  >
     <Icon v-if="props.icon" :icon="props.icon" />
     {{ props.label }}
   </button>

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>

package/src/components/Tabs/tabs.scss

@@ -60,6 +60,7 @@
     svg {
       width: 20px;
       height: 20px;
+      color: var(--color-text-light);
     }
 
     &:hover,

package/src/components/Tooltip/Tooltip.vue

@@ -57,6 +57,7 @@ const id = useId()
 <template>
   <div
     ref="popoutAnchor"
+    class="inline-block"
     :aria-describedby="id"
     @mouseenter="hoverAnchor = true"
     @mouseleave="hoverAnchor = false"

package/src/style/core.scss

@@ -131,6 +131,11 @@ body {
   min-height: 100dvh;
 }
 
+// Set base icon color
+.iconify {
+  color: var(--color-text-light);
+}
+
 @include meta.load-css('typography.scss');
 @include meta.load-css('layout.scss');
 @include meta.load-css('animation.scss');

package/src/style/fonts.scss

@@ -18,6 +18,36 @@ $colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
 
 @each $color in $colors {
   .text-color-#{$color} {
-    font-size: var(--color-text-#{$color});
+    color: var(--color-text-#{$color});
   }
 }
+
+// Font weights
+
+.text-light {
+  font-weight: 300;
+}
+
+.text-regular {
+  font-weight: 400;
+}
+
+.text-medium {
+  font-weight: 500;
+}
+
+.text-semibold {
+  font-weight: 600;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.text-extra-bold {
+  font-weight: 800;
+}
+
+.text-black {
+  font-weight: 900;
+}

package/src/style/layout.scss

@@ -19,10 +19,25 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   }
 }
 
-// Sizes
+// Layout
+.flex {
+  display: flex;
+}
 
-// Paddings & margins
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
 
+// Sizes
+// Paddings & margins
 .mx-auto {
   margin-inline: auto;
 }
@@ -112,30 +127,10 @@ $sizes: 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
 }
 
 // Z-index
-.z-0 {
-  z-index: 0;
-}
+$zindexes: 0, 10, 20, 30, 40, 50, auto;
 
-.z-10 {
-  z-index: 10;
-}
-
-.z-20 {
-  z-index: 20;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
-.z-40 {
-  z-index: 40;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
-.z-auto {
-  z-index: auto;
+@each $zindex in $zindexes {
+  .z-#{$zindex} {
+    z-index: $zindex;
+  }
 }

package/src/style/typography.scss

@@ -223,7 +223,6 @@ dl {
 article,
 .typeset {
   width: 100%;
-  // overflow: hidden;
 
   ol,
   ul {
@@ -236,7 +235,7 @@ article,
       margin-bottom: var(--space-m);
       font-size: var(--font-size-m);
       position: relative;
-      padding-left: 32px;
+      padding-left: 28px;
 
       & > ul {
         margin-top: 0;
@@ -245,7 +244,7 @@ article,
       &:before {
         content: '';
         position: absolute;
-        top: 3px;
+        top: 5px;
         left: 12px;
       }
 
@@ -261,7 +260,7 @@ article,
         width: 6px;
         height: 6px;
         border-radius: 100%;
-        background-color: var(--color-text-light);
+        background-color: var(--color-text-lighter);
       }
     }
   }

package/src/style/utils.scss

@@ -32,4 +32,5 @@ mark {
   color: var(--color-text);
   background-color: var(--color-button-gray-hover);
   font-weight: 400;
+  padding-inline: 4px;
 }