@dolanske/vui 0.2.0 → 0.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "description": "Brother in Christ there's a new UI library ",
   "author": "dolanske",
@@ -11,7 +11,11 @@
     "type": "git",
     "url": "https://github.com/dolanske/vui.git"
   },
-  "keywords": ["vue", "vue3", "component"],
+  "keywords": [
+    "vue",
+    "vue3",
+    "component"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/App.vue

@@ -1,9 +1,12 @@
 <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 Tab from './components/Tabs/Tab.vue'
+
 import Tabs from './components/Tabs/Tabs.vue'
+import Tooltip from './components/Tooltip/Tooltip.vue'
 
 const tab = ref('components')
 </script>
@@ -21,11 +24,24 @@ const tab = ref('components')
     </div>
 
     <div v-if="tab === 'components'">
-      <Divider size="65px" :margin="32">
-        <Avatar />
-      </Divider>
+      <h1 class="mb-xl">
+        Hii
+        <span class="counter text-color-accent">129</span>
+      </h1>
+      <p>I am down</p>
+
+      <Avatar :size="80" />
+
+      <Divider />
 
-      <br>
+      <Tooltip>
+        <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>
     </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.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/Alert/alert.scss

@@ -22,7 +22,7 @@
 
     strong {
       display: block;
-      font-size: var(--font-size-l);
+      font-size: var(--font-size-m);
       font-weight: 550;
       margin-bottom: 6px;
     }

package/src/components/Avatar/Avatar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Sizes } from '../../shared/types'
 import { Icon } from '@iconify/vue'
-import { useCssVar } from '@vueuse/core'
-import { ref, useTemplateRef, watch } from 'vue'
+import { ref } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
 import { Size } from '../../shared/types'
 import './avatar.scss'
 
@@ -20,31 +20,17 @@ const {
 } = defineProps<Props>()
 
 const showFallback = ref(false)
-
-// For some reason CSS variable assignemnt in scoped <style> is broken, so we
-// have to go this way instead.
-const avatarRef = useTemplateRef('avatar')
-const avatarSize = useCssVar('--avatar-size', avatarRef)
-watch(() => size, (val) => {
-  avatarSize.value = (() => {
-    if (typeof val == 'number') {
-      return `${val}px`
-    }
-    switch (size) {
-      case Size.s: return '28px'
-      case Size.l: return '48px'
-      case Size.m:
-      default: return '36px'
-    }
-  })()
-})
 </script>
 
 <template>
   <div
-    ref="avatar"
     class="vui-avatar"
     :class="[`vui-avatar-size-${typeof size === 'number' ? 'm' : size}`]"
+    :style="{
+      ...(typeof size === 'number' && {
+        '--avatar-size': formatUnitValue(size),
+      }),
+    }"
   >
     <img v-if="url && !showFallback" :src="url" @error="showFallback = true">
     <strong v-else>

package/src/components/Avatar/avatar.scss

@@ -2,7 +2,7 @@
   --avatar-size: 36px;
 
   &.vui-avatar-size-s {
-    // --avatar-size: 28px;
+    --avatar-size: 28px;
 
     strong {
       font-size: var(--font-size-xs);
@@ -10,7 +10,7 @@
   }
 
   &.vui-avatar-size-l {
-    // --avatar-size: 48px;
+    --avatar-size: 48px;
 
     strong {
       font-size: var(--font-size-m);
@@ -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
@@ -43,7 +45,7 @@ const {
   dashed,
 } = defineProps<Props>()
 
-const h = computed(() => {
+const height = computed(() => {
   switch (size) {
     case Size.s: return '24px'
     case Size.l: return '40px'
@@ -52,7 +54,7 @@ const h = computed(() => {
   }
 })
 
-const p = computed(() => {
+const padding = computed(() => {
   switch (size) {
     case Size.s: return '5px'
     case Size.l: return '16px'
@@ -67,6 +69,11 @@ const p = 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,
+    }"
   >
     <Spinner size="s" />
     <div class="vui-button-slot">
@@ -81,10 +88,3 @@ const p = computed(() => {
     </div>
   </button>
 </template>
-
-<style scoped>
-.vui-button {
-  --button-height: v-bind(h);
-  --button-padding: v-bind(p);
-}
-</style>

package/src/components/Divider/Divider.vue

@@ -24,7 +24,13 @@ const m = computed(() => formatUnitValue(margin))
 </script>
 
 <template>
-  <div class="vui-divider" :class="{ vertical }">
+  <div
+    class="vui-divider" :class="{ vertical }" :style="{
+      margin: m,
+      width: w,
+      height: h,
+    }"
+  >
     <div v-if="$slots.default" class="vui-divider-slot">
       <slot />
     </div>
@@ -32,13 +38,7 @@ const m = computed(() => formatUnitValue(margin))
 </template>
 
 <style lang="scss" scoped>
-.vui-divider {
-  margin: v-bind(m);
-  width: v-bind(w);
-  height: v-bind(h);
-
-  &:before {
-    border-width: v-bind(bW);
-  }
+.vui-divider:before {
+  border-width: v-bind(bW);
 }
 </style>

package/src/components/Drawer/Drawer.vue

@@ -2,7 +2,7 @@
 import type { DrawerPortalProps, DrawerRootProps } from 'vaul-vue'
 import type { Sizes, VueClass } from '../../shared/types'
 import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
-import { computed, useId } from 'vue'
+import { computed, onMounted, useId } from 'vue'
 import './drawer.scss'
 
 interface Props {
@@ -59,6 +59,12 @@ const mW = computed(() => {
 })
 
 const id = useId()
+
+onMounted(() => {
+  if (!document.querySelector('vaul-drawer-wrapper')) {
+    console.error('Your root component is missing \'vaul-drawer-wrapper\' attribute. \n Without it the <Drawer /> component will not be functional.')
+  }
+})
 </script>
 
 <template>
@@ -85,7 +91,7 @@ const id = useId()
 
 <style lang="scss" scoped>
 :global(body) {
-  transition: var(--transition-quick);
+  transition: var(--transition-fast);
   background-color: var(--color-bg);
 }
 </style>

package/src/components/Drawer/drawer.scss

@@ -31,6 +31,6 @@
     top: 12px;
     border-radius: 3px;
     background-color: var(--color-border-strong);
-    transition: var(--transition-quick);
+    transition: var(--transition-fast);
   }
 }

package/src/components/Dropdown/Dropdown.vue

@@ -70,7 +70,17 @@ const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
 </script>
 
 <template>
-  <div ref="anchor" class="vui-dropdown-trigger-wrap">
+  <div
+    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>
 
@@ -88,11 +98,6 @@ const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
 </template>
 
 <style scoped lang="scss">
-.vui-dropdown {
-  min-width: v-bind(mW);
-  width: v-bind(w);
-}
-
 .dropdown-enter-active,
 .dropdown-leave-active {
   transition: 0.1s opacity ease-in-out;

package/src/components/Dropdown/dropdown.scss

@@ -58,6 +58,10 @@
     svg {
       width: 16px;
       height: 16px;
+
+      path {
+        color: var(--color-text-light);
+      }
     }
   }
 

package/src/components/Flex/Flex.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { Sizes } from '../../shared/types'
+import type { Space } from '../../shared/types'
 import { computed } from 'vue'
-import { useActualGap } from '../../shared/composables'
 
 export interface FlexProps {
   inline?: boolean
@@ -13,7 +12,7 @@ export interface FlexProps {
   rowReverse?: boolean
   columnReverse?: boolean
 
-  gap?: Sizes | number
+  gap?: Space | number
 
   // NOTE: Add more if needed
   justifyStart?: boolean
@@ -35,7 +34,7 @@ export interface FlexProps {
 const props = defineProps<FlexProps>()
 
 // Flex gap
-const ag = useActualGap(props.gap)
+const ag = computed(() => `var(--space-${props.gap})`)
 
 // Flex direction
 const ad = computed(() => {
@@ -91,19 +90,17 @@ const aH = computed(() => props.expand ? '100%' : 'auto')
 </script>
 
 <template>
-  <div class="vui-flex">
+  <div
+    class="vui-flex" :style="{
+      display: aY,
+      flexWrap: aW,
+      flexDirection: ad,
+      justifyContent: aj,
+      gap: ag,
+      alignItems: aA,
+      width: aH,
+    }"
+  >
     <slot />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-flex {
-  display: v-bind(aY);
-  flex-wrap: v-bind(aW);
-  flex-direction: v-bind(ad);
-  justify-content: v-bind(aj);
-  gap: v-bind(ag);
-  align-items: v-bind(aA);
-  width: v-bind(aH);
-}
-</style>

package/src/components/Grid/Grid.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { Sizes } from '../../shared/types'
+import type { Space } from '../../shared/types'
 import { computed } from 'vue'
-import { useActualGap } from '../../shared/composables'
 import { createArray } from '../../shared/helpers'
 
 /**
@@ -10,7 +9,7 @@ import { createArray } from '../../shared/helpers'
 
 interface Props {
   inline?: boolean
-  gap?: Sizes | number
+  gap?: Space | number
   rows?: number | string
   columns?: number | string
   areas?: string[]
@@ -18,7 +17,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const aG = useActualGap(props.gap)
+const ag = computed(() => `var(--space-${props.gap})`)
 
 const aTC = computed(() => {
   if (typeof props.columns === 'number') {
@@ -43,17 +42,13 @@ const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
 
 <template>
   <div
-    class="vui-grid"
+    class="vui-grid" :style="{
+      display: aD,
+      gap: ag,
+      gridTemplateColumns: aTC,
+      gridTemplateRows: aTR,
+    }"
   >
     <slot />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-grid {
-  display: v-bind(aD);
-  gap: v-bind(aG);
-  grid-template-columns: v-bind(aTC);
-  grid-template-rows: v-bind(aTR);
-}
-</style>

package/src/components/Input/Textarea.vue

@@ -56,6 +56,11 @@ const fS = computed(() => autoResize ? 'content' : 'auto')
         :placeholder
         :required
         :max="limit"
+        :style="{
+          resize: r,
+          // @ts-expect-error Early-adoption CSS attribute
+          fieldSizing: fS,
+        }"
       />
     </div>
     <p v-if="limit" class="vui-input-limit">
@@ -69,10 +74,3 @@ const fS = computed(() => autoResize ? 'content' : 'auto')
     <slot name="after" />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-input-container .vui-input textarea {
-  resize: v-bind(r);
-  field-sizing: v-bind(fS);
-}
-</style>

package/src/components/OTP/otp.scss

@@ -15,7 +15,7 @@
       border: 1px solid var(--color-border-strong);
       color: var(--color-text);
       z-index: 1;
-      font-size: var(--font-size-l);
+      font-size: var(--font-size-m);
       outline: 0 solid var(--color-text-light);
       transition: var(--transition);
 
@@ -47,7 +47,6 @@
         }
       }
 
-      // TODO: animate blinking cursor
       &.active {
         z-index: 2;
         outline-width: 2px;

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

@@ -80,13 +80,11 @@ const bC = computed(() => color)
       'fixed-active': progressAmount > 0 && progressAmount < 100,
     }"
   >
-    <div class="vui-progress-indicator" />
+    <div
+      class="vui-progress-indicator" :style="{
+        width: w,
+        backgroundColor: bC,
+      }"
+    />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-progress-indicator {
-  width: v-bind(w);
-  background-color: v-bind(bC);
-}
-</style>

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

@@ -33,13 +33,11 @@ const h = computed(() => formatUnitValue(circle ? (width || height) : height))
 </script>
 
 <template>
-  <div class="vui-skeleton" />
+  <div
+    class="vui-skeleton" :style="{
+      borderRadius: bR,
+      width: w,
+      height: h,
+    }"
+  />
 </template>
-
-<style lang="scss" scoped>
-.vui-skeleton {
-  border-radius: v-bind(bR);
-  width: v-bind(w);
-  height: v-bind(h);
-}
-</style>

package/src/components/Spinner/Spinner.vue

@@ -32,13 +32,11 @@ const bW = computed(() => {
 </script>
 
 <template>
-  <div :class="{ size }" class="vui-spinner" />
+  <div
+    :class="{ size }" class="vui-spinner" :style="{
+      width: w,
+      height: w,
+      borderWidth: bW,
+    }"
+  />
 </template>
-
-<style lang="scss">
-.vui-spinner {
-  width: v-bind(w);
-  height: v-bind(w);
-  border-width: v-bind(bW);
-}
-</style>

package/src/components/Table/table.scss

@@ -59,7 +59,7 @@
       font-size: var(--font-size-ms);
       border: none;
       border-left: none !important;
-      transition: var(--transition-quick);
+      transition: var(--transition-fast);
       position: relative;
       z-index: 1;
 

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 }">
+  <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

@@ -56,6 +56,7 @@ useEventListener(window, 'resize', computeUnderlinePosition)
   <div
     ref="tabs"
     class="vui-tabs"
+    role="tablist"
     :class="[
       { expand, disabled },
       variant === 'default'

package/src/components/Tabs/tabs.scss

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

package/src/components/Toast/toast.ts

@@ -1,5 +1,3 @@
-// share some tiny global state
-
 import { ref } from 'vue'
 
 interface ToastAction {
@@ -68,25 +66,3 @@ export function pushToast(title: string, options?: ToastOptions): Toast {
 export function removeToast(id: number): void {
   toasts.value.delete(id)
 }
-
-//////
-
-// export const toastError: NewToastFn = (title, options) => {
-//   return pushToast('error', title, options)
-// }
-
-// export const toastSuccess: NewToastFn = (title, options) => {
-//   return pushToast('success', title, options)
-// }
-
-// export const toastInfo: NewToastFn = (title, options) => {
-//   return pushToast('info', title, options)
-// }
-
-// export const toastNeutral: NewToastFn = (title, options) => {
-//   return pushToast('neutral', title, options)
-// }
-
-// export const toastWarning: NewToastFn = (title, options) => {
-//   return pushToast('warning', title, options)
-// }

package/src/components/Tooltip/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { Placement } from '../../shared/types'
-import { ref, useTemplateRef, watch } from 'vue'
+import { ref, useId, useTemplateRef, watch } from 'vue'
 import Popout from '../Popout/Popout.vue'
 import './tooltip.scss'
 
@@ -50,18 +50,22 @@ watch(hoverAnchor, (isHovering) => {
     showTooltip.value = false
   }
 })
+
+const id = useId()
 </script>
 
 <template>
   <div
     ref="popoutAnchor"
+    class="inline-block"
+    :aria-describedby="id"
     @mouseenter="hoverAnchor = true"
     @mouseleave="hoverAnchor = false"
   >
     <slot />
   </div>
   <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
       <slot name="tooltip" />
     </Popout>
   </Transition>