@dolanske/vui 0.1.5 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "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,20 +1,19 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Accordion from './components/Accordion/Accordion.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')
-
-const count = ref(10)
 </script>
 
 <template>
   <main vaul-drawer-wrapper>
-    <Tabs v-model="tab" expand variant="filled">
+    <Tabs v-model="tab" expand>
       <Tab id="home" label="Home" icon="ph:house" />
       <Tab id="components" label="Components" />
       <Tab id="typography" label="Typography" />
@@ -23,21 +22,30 @@ const count = ref(10)
     <div v-if="tab === 'home'">
       home
     </div>
+
     <div v-if="tab === 'components'">
-      <Button @click="count += 10">
-        Increase!!!
-      </Button>
+      <h1 class="mb-xl">
+        Hii
+        <span class="counter text-color-accent">12</span>
+      </h1>
+      <p>I am down</p>
 
-      <Accordion>
-        <template #header>
-          Hiiii
+      <Avatar :size="80" />
+
+      <Divider />
+
+      <Tooltip>
+        <span>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>
-        <p v-for="item in count" :key="item">
-          I am a bro
-        </p>
-      </Accordion>
+      </Tooltip>
 
-      <br>
+      <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

@@ -7,6 +7,7 @@ import './accordion.scss'
 export interface AccordionProps {
   open?: boolean
   label?: string
+  card?: boolean
 }
 
 const props = defineProps<AccordionProps>()
@@ -17,7 +18,6 @@ const emits = defineEmits<{
 
 const isOpen = ref(false)
 const contentRef = useTemplateRef('content')
-// const contentChild = useTemplateRef('content-child')
 const contentMaxHeight = ref(0)
 
 watchEffect(() => {
@@ -66,7 +66,7 @@ useResizeObserver(contentRef, ([entry]) => {
 </script>
 
 <template>
-  <div class="vui-accordion" :class="{ open: isOpen }">
+  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card }">
     <!-- Completely custom header which needs to be styled and implemented by the developer -->
     <slot v-if="$slots.trigger" name="trigger" :open :close :toggle :is-open />
     <button v-else class="vui-accordion-header" @click="isOpen = !isOpen">
@@ -76,8 +76,12 @@ useResizeObserver(contentRef, ([entry]) => {
       <Icon icon="ph:caret-down" />
     </button>
 
-    <div class="vui-accordion-content" :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }">
-      <div ref="content">
+    <div
+      class="vui-accordion-content"
+      :aria-hidden="!isOpen"
+      :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }"
+    >
+      <div ref="content" class="vui-accordtion-content-inner">
         <slot />
       </div>
     </div>

package/src/components/Accordion/accordion.scss

@@ -4,12 +4,49 @@
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 0;
 
+  &.is-card {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-m);
+
+    &.open {
+      padding-bottom: 0;
+
+      .vui-accordion-header {
+        border-block-width: 1px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    .vui-accordion-header {
+      padding-inline: var(--space-m);
+      border-bottom: 0px solid var(--color-border);
+      text-decoration: inherit;
+      border-radius: var(--border-radius-m);
+
+      &:hover {
+        text-decoration: inherit;
+        text-underline-offset: inherit;
+
+        background-color: var(--color-button-gray);
+      }
+    }
+
+    .vui-accordtion-content-inner {
+      padding: var(--space-m);
+    }
+  }
+
   &.open {
     padding-bottom: var(--space-m);
 
     .vui-accordion-header svg {
       transform: rotate(180deg);
     }
+
+    .vui-accordion-content {
+      visibility: visible;
+    }
   }
 
   .vui-accordion-header {
@@ -31,8 +68,6 @@
     svg {
       transition: var(--transition);
     }
-
-    // padding-bottom: var(--w);
   }
 
   .vui-accordion-content {
@@ -40,5 +75,6 @@
     width: 100%;
     max-height: 0;
     overflow: hidden;
+    visibility: hidden;
   }
 }

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

@@ -2,17 +2,19 @@
 import type { Sizes } from '../../shared/types'
 import { Icon } from '@iconify/vue'
 import { ref } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
+import { Size } from '../../shared/types'
 import './avatar.scss'
 
 interface Props {
-  size?: Sizes
+  size?: Sizes | number
   url?: string
   fallback?: string
   icon?: string
 }
 
 const {
-  size = 'm',
+  size = Size.m,
   url,
   fallback,
 } = defineProps<Props>()
@@ -23,7 +25,12 @@ const showFallback = ref(false)
 <template>
   <div
     class="vui-avatar"
-    :class="[`vui-avatar-size-${size}`]"
+    :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

@@ -1,8 +1,8 @@
 .vui-avatar {
-  --button-size: 36px;
+  --avatar-size: 36px;
 
   &.vui-avatar-size-s {
-    --button-size: 28px;
+    --avatar-size: 28px;
 
     strong {
       font-size: var(--font-size-xs);
@@ -10,15 +10,15 @@
   }
 
   &.vui-avatar-size-l {
-    --button-size: 48px;
+    --avatar-size: 48px;
 
     strong {
       font-size: var(--font-size-m);
     }
   }
 
-  width: var(--button-size);
-  height: var(--button-size);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   border-radius: 100%;
   display: flex;
   align-items: center;

package/src/components/Button/Button.vue

@@ -43,7 +43,7 @@ const {
   dashed,
 } = defineProps<Props>()
 
-const actualHeight = computed(() => {
+const height = computed(() => {
   switch (size) {
     case Size.s: return '24px'
     case Size.l: return '40px'
@@ -52,7 +52,7 @@ const actualHeight = computed(() => {
   }
 })
 
-const actualPadding = computed(() => {
+const padding = computed(() => {
   switch (size) {
     case Size.s: return '5px'
     case Size.l: return '16px'
@@ -67,6 +67,10 @@ const actualPadding = computed(() => {
     class="vui-button"
     :class="[{ loading, expand, disabled, plain, active, icon, square, dashed }, `vui-button-variant-${variant}`]"
     :disabled
+    :style="{
+      '--button-height': height,
+      '--button-padding': padding,
+    }"
   >
     <Spinner size="s" />
     <div class="vui-button-slot">
@@ -81,10 +85,3 @@ const actualPadding = computed(() => {
     </div>
   </button>
 </template>
-
-<style scoped>
-.vui-button {
-  --button-height: v-bind(actualHeight);
-  --button-padding: v-bind(actualPadding);
-}
-</style>

package/src/components/Calendar/Calendar.vue

@@ -14,6 +14,8 @@ const props = withDefaults(defineProps<VueDatePickerProps & {
   format: 'dd/MM/yyyy HH:mm',
   expand: false,
 })
+
+const ICON_SIZE = 18
 </script>
 
 <template>
@@ -26,28 +28,28 @@ const props = withDefaults(defineProps<VueDatePickerProps & {
   >
     <!-- Icon slots -->
     <template #input-icon>
-      <Icon :width="18" :height="18" icon="ph:calendar-blank" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
     </template>
     <template #calendar-icon>
-      <Icon :width="18" :height="18" icon="ph:calendar-blank" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
     </template>
     <template #clear-icon>
-      <Icon :width="18" :height="18" icon="ph:x" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:x" />
     </template>
     <template #clock-icon>
-      <Icon :width="18" :height="18" icon="ph:clock" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:clock" />
     </template>
     <template #arrow-left>
-      <Icon :width="18" :height="18" icon="ph:caret-left" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-left" />
     </template>
     <template #arrow-right>
-      <Icon :width="18" :height="18" icon="ph:caret-right" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-right" />
     </template>
     <template #arrow-up>
-      <Icon :width="18" :height="18" icon="ph:caret-up" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-up" />
     </template>
     <template #arrow-down>
-      <Icon :width="18" :height="18" icon="ph:caret-down" />
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-down" />
     </template>
 
     <!-- Content slots -->

package/src/components/Card/Card.vue

@@ -33,13 +33,13 @@ const {
       <slot name="header-end" />
     </div>
 
-    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :size="1" />
+    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :space="1" />
 
     <div v-if="$slots.default" class="vui-card-content">
       <slot />
     </div>
 
-    <Divider v-if="(separators || footerSeparator) && $slots.footer" :size="1" />
+    <Divider v-if="(separators || footerSeparator) && $slots.footer" :space="1" />
 
     <div v-if="$slots.footer" class="vui-card-footer">
       <slot name="footer" />

package/src/components/Checkbox/Checkbox.vue

@@ -34,7 +34,10 @@ const id = useId()
       type="checkbox"
       :disabled
       :checked="checkedProp"
-      @change="emit('change', ($event.target as HTMLInputElement).checked)"
+      @change="(e) => {
+        if (disabled) return
+        emit('change', (e.target as HTMLInputElement).checked)
+      }"
     >
     <label :for="id">
       <span class="vui-checkbox-icon">

package/src/components/Checkbox/checkbox.scss

@@ -9,19 +9,24 @@
 
   &.disabled {
     cursor: not-allowed;
-    pointer-events: none;
 
-    .vui-checkbox-icon svg path {
-      color: var(--color-text-lighter);
+    .vui-checkbox-icon {
+      pointer-events: none;
+      svg path {
+        color: var(--color-text-lighter);
+      }
     }
 
-    input + label p {
-      color: var(--color-text-lighter);
+    input + label {
+      cursor: not-allowed;
+
+      p {
+        color: var(--color-text-lighter);
+      }
     }
   }
 
   .vui-checkbox-icon {
-    cursor: pointer;
     width: var(--checkbox-size);
     height: var(--checkbox-size);
 
@@ -52,6 +57,7 @@
           align-items: center;
           min-height: var(--checkbox-size);
           font-size: var(--font-size-ms);
+          align-self: flex-start;
           // line-height: var(--checkbox-size);
         }
       }

package/src/components/Divider/Divider.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
 import './divider.scss'
 
 interface Props {
   thickness?: number
-  size?: number
+  size?: number | string
   vertical?: boolean
-  width?: number
-  height?: number
-  margin?: string
+  margin?: string | number
 }
 
 const {
@@ -16,15 +16,19 @@ const {
   vertical,
   margin = '0',
 } = defineProps<Props>()
+
+const h = computed(() => formatUnitValue(size))
+const w = computed(() => vertical ? h.value : 'initial')
+const bW = computed(() => `${thickness}px`)
+const m = computed(() => formatUnitValue(margin))
 </script>
 
 <template>
   <div
     class="vui-divider" :class="{ vertical }" :style="{
-      ...(vertical && { width: `${size}px` }),
-      height: `${size}px`,
-      borderWidth: `${thickness}px`,
-      margin,
+      margin: m,
+      width: w,
+      height: h,
     }"
   >
     <div v-if="$slots.default" class="vui-divider-slot">
@@ -32,3 +36,9 @@ const {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.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 {
@@ -40,15 +40,17 @@ const {
   portalProps,
   handle = true,
 } = defineProps<Props>()
+
 const open = defineModel<boolean>()
 
-const containerMaxWidth = computed(() => {
+const mW = computed(() => {
   if (typeof containerSize === 'string') {
     if (containerClass === 'full') {
       return '100%'
     }
     else {
-      return `var(--container-${containerSize})`
+      return getComputedStyle(document.documentElement)
+        .getPropertyValue(`--container-${containerSize}`)
     }
   }
   else {
@@ -57,6 +59,12 @@ const containerMaxWidth = 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>
@@ -69,12 +77,8 @@ const id = useId()
   >
     <DrawerPortal v-bind="portalProps">
       <DrawerOverlay class="vui-drawer-overlay" />
-      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handlk': handle === false }" :aria-describedby="id">
-        <div
-          class="vui-drawer-container container" :class="containerClass" :style="{
-            maxWidth: containerMaxWidth,
-          }"
-        >
+      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handle': handle === false }" :aria-describedby="id">
+        <div :key="mW" class="vui-drawer-container container" :class="containerClass" :style="{ 'max-width': mW }">
           <DrawerTitle class="visually-hidden" :name="id">
             {{ title }}
           </DrawerTitle>
@@ -87,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,19 +31,6 @@
     top: 12px;
     border-radius: 3px;
     background-color: var(--color-border-strong);
-    transition: var(--transition-quick);
+    transition: var(--transition-fast);
   }
-
-  // .vui-drawer-container {
-  //   width: 100%;
-  //   max-width: 756px;
-  //   margin-inline: auto;
-  // }
-}
-
-.vui-drawer-overlay {
-  // opacity: 0.4;
-  // position: fixed;
-  // inset: 0;
-  // background-color: var(--color-bg-lowered);
 }

package/src/components/Dropdown/Dropdown.vue

@@ -1,12 +1,13 @@
 <script setup lang='ts'>
-import type { Placement } from '@floating-ui/vue'
 import type { MaybeElement } from '@vueuse/core'
+import type { Placement } from '../../shared/types'
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
 import Popout from '../Popout/Popout.vue'
 import './dropdown.scss'
 
-interface Props {
+export interface Props {
   /**
    * Tooltip placement related to the anchor
    */
@@ -24,7 +25,7 @@ interface Props {
 const {
   placement = 'bottom-start',
   expand,
-  minWidth,
+  minWidth = 156,
 } = defineProps<Props>()
 
 const anchorRef = useTemplateRef<HTMLDivElement>('anchor')
@@ -63,10 +64,18 @@ defineExpose({
   toggle,
   isOpen: showMenu,
 })
+
+const mW = computed(() => formatUnitValue(minWidth))
+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,
+    }"
+  >
     <slot name="trigger" :open :is-open="showMenu" :close :toggle />
   </div>
 
@@ -77,17 +86,13 @@ defineExpose({
       :anchor="anchorRef"
       class="vui-dropdown"
       :placement
-      :style="{
-        minWidth: `${minWidth ?? 156}px`,
-        ...(expand && { width: `${anchorWidth}px` }),
-      }"
     >
       <slot :open :close :toggle :is-open="showMenu" />
     </Popout>
   </Transition>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .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);
+      }
     }
   }