@dolanske/vui 0.1.4 → 0.2.0

package/package.json

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

package/src/App.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Accordion from './components/Accordion/Accordion.vue'
-import Button from './components/Button/Button.vue'
-import Flex from './components/Flex/Flex.vue'
-import Input from './components/Input/Input.vue'
+import Avatar from './components/Avatar/Avatar.vue'
+import Divider from './components/Divider/Divider.vue'
 import Tab from './components/Tabs/Tab.vue'
 import Tabs from './components/Tabs/Tabs.vue'
 
 const tab = ref('components')
-const value = ref('')
 </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" />
@@ -22,28 +19,13 @@ const value = ref('')
     <div v-if="tab === 'home'">
       home
     </div>
-    <div v-if="tab === 'components'">
-      <Flex>
-        <Button variant="success">
-          Hello
-        </Button>
-        <Button variant="success" plain>
-          Hello
-        </Button>
-        <Button variant="success" active>
-          Hello
-        </Button>
-
-        {{ value }}
 
-        <Button variant="success" disabled>
-          Hello
-        </Button>
-      </Flex>
+    <div v-if="tab === 'components'">
+      <Divider size="65px" :margin="32">
+        <Avatar />
+      </Divider>
 
-      <Accordion label="Hi">
-        <Input v-model="value" />
-      </Accordion>
+      <br>
     </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,11 +1,13 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
 import { ref, useTemplateRef, watch, watchEffect } from 'vue'
 import './accordion.scss'
 
 export interface AccordionProps {
   open?: boolean
   label?: string
+  card?: boolean
 }
 
 const props = defineProps<AccordionProps>()
@@ -55,10 +57,16 @@ defineExpose({
   toggle,
   isOpen,
 })
+
+useResizeObserver(contentRef, ([entry]) => {
+  if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
+    contentMaxHeight.value = entry.contentRect.height || 0
+  }
+})
 </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">
@@ -68,8 +76,14 @@ defineExpose({
       <Icon icon="ph:caret-down" />
     </button>
 
-    <div ref="content" class="vui-accordion-content" :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }">
-      <slot />
+    <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>
   </div>
 </template>

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

@@ -1,29 +1,50 @@
 <script setup lang="ts">
 import type { Sizes } from '../../shared/types'
 import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
+import { useCssVar } from '@vueuse/core'
+import { ref, useTemplateRef, watch } from 'vue'
+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>()
 
 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-${size}`]"
+    :class="[`vui-avatar-size-${typeof size === 'number' ? 'm' : 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 h = computed(() => {
   switch (size) {
     case Size.s: return '24px'
     case Size.l: return '40px'
@@ -52,7 +52,7 @@ const actualHeight = computed(() => {
   }
 })
 
-const actualPadding = computed(() => {
+const p = computed(() => {
   switch (size) {
     case Size.s: return '5px'
     case Size.l: return '16px'
@@ -84,7 +84,7 @@ const actualPadding = computed(() => {
 
 <style scoped>
 .vui-button {
-  --button-height: v-bind(actualHeight);
-  --button-padding: v-bind(actualPadding);
+  --button-height: v-bind(h);
+  --button-padding: v-bind(p);
 }
 </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,19 +16,29 @@ 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,
-    }"
-  >
+  <div class="vui-divider" :class="{ vertical }">
     <div v-if="$slots.default" class="vui-divider-slot">
       <slot />
     </div>
   </div>
 </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);
+  }
+}
+</style>

package/src/components/Drawer/Drawer.vue

@@ -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 {
@@ -69,12 +71,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>

package/src/components/Drawer/drawer.scss

@@ -33,17 +33,4 @@
     background-color: var(--color-border-strong);
     transition: var(--transition-quick);
   }
-
-  // .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,6 +64,9 @@ defineExpose({
   toggle,
   isOpen: showMenu,
 })
+
+const mW = computed(() => formatUnitValue(minWidth))
+const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
 </script>
 
 <template>
@@ -77,17 +81,18 @@ 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">
+.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/Input/Input.vue

@@ -23,6 +23,7 @@ export interface InputProps {
   multiple?: boolean
   min?: number
   max?: number
+  disabled?: boolean
 }
 
 const {
@@ -40,6 +41,7 @@ const {
   min,
   max,
   errors = [] as string[],
+  disabled,
 } = defineProps<InputProps>()
 
 const model = defineModel<string | number>({
@@ -76,7 +78,7 @@ const renderLimit = computed(() => {
 </script>
 
 <template>
-  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0 }">
+  <div class="vui-input-container" :class="{ expand, disabled, required, readonly, 'has-errors': errors.length > 0 }">
     <slot name="before" />
     <div class="vui-input">
       <label v-if="label" for="id">{{ label }}</label>
@@ -100,6 +102,7 @@ const renderLimit = computed(() => {
           :accept
           :multiple
           :min
+          :disabled
         >
         <slot name="end" />
       </Flex>

package/src/components/Input/Textarea.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InputProps } from './Input.vue'
-import { useId } from 'vue'
+import { computed, useId } from 'vue'
 import '../Input/input.scss'
 
 type Props = Omit<InputProps, 'type'> & {
@@ -35,6 +35,9 @@ const model = defineModel<string>({
   },
 })
 const id = useId()
+
+const r = computed(() => resize === true ? 'both' : (resize || 'initial'))
+const fS = computed(() => autoResize ? 'content' : 'auto')
 </script>
 
 <template>
@@ -53,11 +56,6 @@ const id = useId()
         :placeholder
         :required
         :max="limit"
-        :style="{
-          'resize': resize === true ? 'both' : (resize || 'initial'),
-          // @ts-expect-error This is only supported in chrome for now
-          'field-sizing': autoResize ? 'content' : 'auto',
-        }"
       />
     </div>
     <p v-if="limit" class="vui-input-limit">
@@ -71,3 +69,10 @@ const id = useId()
     <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/Input/input.scss

@@ -17,6 +17,11 @@
 
   width: 224px;
 
+  &.disabled input,
+  &.disabled textarea {
+    cursor: not-allowed;
+  }
+
   &.expand {
     width: 100%;
   }
@@ -26,10 +31,14 @@
     color: var(--input-color-text-red);
   }
 
-  &.readonly .vui-input input {
-    pointer-events: none;
-    color: var(--input-color-text-light);
-    border-color: var(--input-color-border-weak);
+  &.readonly .vui-input {
+    input,
+    textarea,
+    .vui-input-style {
+      pointer-events: none;
+      color: var(--input-color-text-light);
+      border-color: var(--input-color-border-weak);
+    }
   }
 
   &.has-errors {