@dolanske/vui 0.5.0 → 1.0.1

package/src/components/Progress/Progress.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
+import { whenever } from '@vueuse/core'
+import { computed, onMounted, useTemplateRef, watch, watchEffect } from 'vue'
+import { clamp, delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
 import './progress.scss'
 
 interface Props {
@@ -30,10 +31,14 @@ const {
   height,
 } = defineProps<Props>()
 
+const emit = defineEmits<{
+  done: []
+}>()
+
 const progressAmount = defineModel<number>({
   default: 0,
   set(value) {
-    return Math.min(value, 100)
+    return clamp(0, 100, value)
   },
 })
 
@@ -49,6 +54,8 @@ watchEffect(() => {
   }
 })
 
+whenever(() => fake, fakeIncrement)
+
 // Automatically / randomly increment but never reach 100% until
 async function fakeIncrement() {
   if (fake && progressAmount.value < 100) {
@@ -59,15 +66,21 @@ async function fakeIncrement() {
     }
     else {
       progressAmount.value += randomMinMax(1, 10)
-      await delay(randomMinMax(200, 1000))
+      await delay(randomMinMax(200, 12000))
     }
     fakeIncrement()
   }
 }
 
+watch(progressAmount, (v) => {
+  if (v >= 100) {
+    emit('done')
+  }
+})
+
 onMounted(fakeIncrement)
 
-const w = computed(() => `${progressAmount.value}%`)
+const w = computed(() => `${clamp(0, 100, progressAmount.value)}%`)
 const bC = computed(() => color)
 </script>
 

package/src/components/Progress/progress.scss

@@ -5,7 +5,7 @@
   width: 100%;
   position: relative;
   border-radius: 999px;
-  background-color: var(--color-bg-lowered);
+  background-color: var(--color-bg-raised);
   overflow: hidden;
   height: var(--vui-progress-height);
 
@@ -39,3 +39,9 @@
     transition: var(--transition-slow);
   }
 }
+
+:root.light {
+  .vui-progress-indicator {
+    background-color: var(--);
+  }
+}

package/src/components/Radio/Radio.vue

@@ -7,12 +7,14 @@ export interface RadioProps {
   label?: string
   disabled?: boolean
   value: any
+  accent?: boolean
 }
 
 const {
   label,
   disabled,
   value,
+  accent,
 } = defineProps<RadioProps>()
 const slots = defineSlots()
 const checked = defineModel()
@@ -21,8 +23,8 @@ const isChecked = computed(() => value === checked.value)
 </script>
 
 <template>
-  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
-    <input :id v-model="checked" type="radio" :value :checked="isChecked">
+  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked, accent }">
+    <input :id v-model="checked" type="radio" :value :checked="isChecked" :disabled>
     <label :for="id">
       <span class="vui-radio-icon">
         <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />

package/src/components/Radio/radio.scss

@@ -5,18 +5,21 @@
     .vui-radio-icon svg {
       color: var(--color-text);
     }
+
+    &.accent .vui-radio-icon svg {
+      color: var(--color-accent);
+    }
   }
 
   &.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-
-    .vui-radio-icon svg path {
-      color: var(--color-text-lighter) !important;
+    .vui-radio-icon {
+      opacity: 0.25;
+      cursor: not-allowed;
     }
 
-    input + label p {
-      color: var(--color-text-lighter);
+    input + label .vui-radio-content {
+      opacity: 0.4;
+      cursor: not-allowed;
     }
   }
 
@@ -38,6 +41,7 @@
     position: absolute;
     overflow: hidden;
     outline: none !important;
+    opacity: 0;
 
     &:focus-visible + label .vui-radio-icon {
       outline: 2px solid var(--color-text);
@@ -59,10 +63,16 @@
           display: flex;
           align-items: center;
           min-height: var(--radio-size);
-          font-size: var(--font-size-ms);
+          font-size: var(--font-size-m);
           // line-height: var(--radio-size);
         }
       }
     }
   }
 }
+
+:root.light {
+  .vui-radio.checked.accent .vui-radio-icon svg {
+    color: var(--color-accent);
+  }
+}

package/src/components/Select/Select.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable ts/consistent-type-definitions -->
 <script setup lang='ts' generic="T">
 import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { computed, onMounted, ref, useId, useTemplateRef } from 'vue'
 import { searchString } from '../../shared/helpers'
 import Button from '../Button/Button.vue'
 import Dropdown from '../Dropdown/Dropdown.vue'
@@ -28,6 +28,8 @@ type Props = {
   search?: boolean
   maxActiveOptions?: number
   showClear?: boolean
+  disabled?: boolean
+  errors?: string[]
 }
 
 const {
@@ -39,11 +41,14 @@ const {
   options,
   single = true,
   search,
-  maxActiveOptions = 3,
+  maxActiveOptions,
   showClear,
+  disabled,
+  errors = [] as string[],
 } = defineProps<Props>()
 
 const selected = defineModel<SelectOption[] | undefined>()
+const trigger = useTemplateRef('trigger')
 
 //
 function setValue(option: SelectOption) {
@@ -68,7 +73,7 @@ function setValue(option: SelectOption) {
       if (!selected.value) {
         selected.value = [option]
       }
-      else {
+      else if (!maxActiveOptions || (selected.value.length < maxActiveOptions)) {
         selected.value?.push(option)
       }
     }
@@ -97,7 +102,7 @@ const renderPlaceholder = computed(() => {
     return selected.value[0].label
 
   // If amount of selected exceeds the active capacity
-  if (selected.value.length > maxActiveOptions) {
+  if (selected.value.length > 3) {
     return `${selected.value.length} selected`
   }
 
@@ -117,42 +122,59 @@ function clearValue() {
   selected.value = undefined
   dropdownRef.value?.close()
 }
+
+const id = useId()
 </script>
 
 <template>
-  <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
-    <Dropdown ref="dropdown" :expand>
+  <div class="vui-input-container vui-select" :class="{ expand, required, readonly, disabled, 'has-errors': errors.length > 0 }">
+    <Dropdown ref="dropdown" :expand @close="trigger?.focus({ preventScroll: true })">
       <template #trigger="{ toggle, isOpen }">
         <div class="vui-input vui-select-trigger-content">
-          <label v-if="label" for="id">{{ label }}</label>
+          <label v-if="label" :for="id">{{ label }}</label>
           <p v-if="hint" class="vui-input-hint">
             {{ hint }}
           </p>
 
-          <button class="vui-input-style vui-select-trigger-container" @click="toggle">
+          <button
+            :id
+            ref="trigger"
+            class="vui-input-style vui-select-trigger-container"
+            :class="{ 'has-value': selected && selected.length > 0 }"
+            :disabled
+            @click="toggle"
+          >
             <span>
               {{ renderPlaceholder }}
             </span>
-            <Button
-              v-if="showClear && !required && selected"
-              plain
-              icon="ph:x"
-              square
-              size="s"
-              @click.stop="clearValue"
-            />
+            <template v-if="showClear && !required && selected">
+              <div class="flex-1" />
+              <Button
+                plain
+                icon="ph:x"
+                square
+                size="s"
+
+                @click.stop="clearValue"
+              />
+            </template>
             <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
           </button>
         </div>
       </template>
 
       <template #default="{ close, isOpen }">
-        <DropdownTitle v-if="search">
+        <DropdownTitle v-if="search" sticky>
           <Input
             v-model="searchStr"
             placeholder="Search..."
             :focus="isOpen"
-          />
+            expand
+          >
+            <template #start>
+              <Icon icon="ph:magnifying-glass" />
+            </template>
+          </Input>
         </DropdownTitle>
 
         <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
@@ -176,5 +198,14 @@ function clearValue() {
         </DropdownItem>
       </template>
     </Dropdown>
+
+    <p v-if="maxActiveOptions && !single" class="vui-input-limit">
+      {{ `${selected ? selected.length : 0}/${maxActiveOptions}` }}
+    </p>
+    <ul v-if="errors.length > 0" class="vui-input-errors">
+      <li v-for="err in errors" :key="err">
+        {{ err }}
+      </li>
+    </ul>
   </div>
 </template>

package/src/components/Select/select.scss

@@ -1,5 +1,7 @@
 .vui-input-container {
   &.vui-select {
+    width: auto;
+
     &.expand {
       .vui-dropdown-trigger-wrap,
       .vui-dropdown-trigger-content {
@@ -7,7 +9,22 @@
       }
     }
 
+    &.disabled {
+      .vui-input-style {
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: var(--color-border);
+        }
+      }
+    }
+
     .vui-select-trigger-container {
+      &.has-value span {
+        color: var(--color-text);
+        font-weight: var(--font-weight-medium);
+      }
+
       span {
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -30,8 +47,6 @@
         margin-right: -6px;
 
         .vui-button-slot svg {
-          width: 14px;
-          height: 14px;
           color: var(--color-text-light);
         }
       }
@@ -42,3 +57,21 @@
     }
   }
 }
+
+select {
+  display: block;
+  height: var(--interactive-el-height);
+  line-height: var(--interactive-el-height);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-s);
+  padding-inline: var(--space-xs);
+  transition: var(--transition-fast);
+  z-index: 1;
+  font-size: var(--font-size-m);
+  color: var(--color-text);
+
+  &:hover {
+    border-color: var(--color-border-strong);
+  }
+}

package/src/components/Sheet/Sheet.vue

@@ -55,14 +55,20 @@ const baseTransform = computed(() => {
             <div class="flex-1">
               <slot name="header" :close />
             </div>
-            <Button square icon="ph:x" @click="open = false" />
+            <Button plain square icon="ph:x" @click="open = false" />
           </div>
 
-          <Divider v-if="separator && $slots.header" :space="1" />
+          <Divider v-if="separator && $slots.header" :size="1" />
 
           <div v-if="$slots.default" class="vui-sheet-content">
             <slot :close />
           </div>
+
+          <Divider v-if="separator && $slots.footer" :size="1" />
+
+          <div class="vui-sheet-footer">
+            <slot name="footer" :close />
+          </div>
         </div>
       </Backdrop>
     </Transition>

package/src/components/Sheet/sheet.scss

@@ -10,24 +10,32 @@
     top: 0;
     border-bottom: 1px solid var(--color-border);
     height: auto;
+    border-bottom-right-radius: var(--border-radius-l);
+    border-bottom-left-radius: var(--border-radius-l);
   }
 
   &.vui-sheet-position-bottom {
     bottom: 0;
     border-top: 1px solid var(--color-border);
     height: auto;
+    border-top-right-radius: var(--border-radius-l);
+    border-top-left-radius: var(--border-radius-l);
   }
 
   &.vui-sheet-position-right {
     right: 0;
     top: 0;
     border-left: 1px solid var(--color-border);
+    border-top-left-radius: var(--border-radius-l);
+    border-bottom-left-radius: var(--border-radius-l);
   }
 
   &.vui-sheet-position-left {
     left: 0;
     top: 0;
     border-right: 1px solid var(--color-border);
+    border-top-right-radius: var(--border-radius-l);
+    border-bottom-right-radius: var(--border-radius-l);
   }
 
   &.vui-sheet-position-top,
@@ -36,6 +44,7 @@
     width: 100%;
   }
 
+  .vui-sheet-footer,
   .vui-sheet-header,
   .vui-sheet-content {
     width: 100%;

package/src/components/Sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { useCssVar, useMouse, useTimeoutFn, watchThrottled } from '@vueuse/core'
-import { computed, useSlots, useTemplateRef } from 'vue'
+import { useCssVar, useMouseInElement, useTimeoutFn, watchThrottled } from '@vueuse/core'
+import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
 import { isNil } from '../../shared/helpers'
 import './sidebar.scss'
 
@@ -27,18 +27,21 @@ interface Props {
 }
 
 const sidebar = useTemplateRef('sidebar')
-const open = defineModel<boolean>()
+const open = defineModel<boolean>({
+  default: true,
+})
 const slots = useSlots()
 const offset = useCssVar('--vui-sidebar-float-offset', sidebar, {
   initialValue: '8px',
 })
 
 const width = computed(() => {
-  if (props.mini)
-    return `65px`
+  if (props.mini) {
+    return props.floaty ? '73px' : `65px`
+  }
   if (!props.floaty)
     return `${props.width}px`
-  return `calc(${props.width}px - ${offset.value})`
+  return `calc(${props.width}px + ${offset.value})`
 })
 
 const slotProps = computed(() => ({
@@ -46,19 +49,29 @@ const slotProps = computed(() => ({
   floaty: props.floaty,
   width: props.width,
   open,
+  close: () => open.value = false,
 }))
 
 // Sidebar `appear` implementation
 const { start, stop, isPending } = useTimeoutFn(() => {
-  open.value = true
+  if (props.appear) {
+    open.value = true
+  }
 }, 250)
 
 const APPEAR_OFFSET = 32
 
-const { x } = useMouse()
+const wrap = useTemplateRef('wrap')
+const { elementX } = useMouseInElement(wrap)
+
+onMounted(() => {
+  if (props.appear && open.value) {
+    open.value = false
+  }
+})
 
-watchThrottled(x, (pos) => {
-  if (!props.appear)
+watchThrottled(elementX, (pos) => {
+  if (!props.appear || (pos <= APPEAR_OFFSET && pos >= 0 && isPending.value))
     return
 
   if (pos <= APPEAR_OFFSET && pos >= 0 && !open.value && !isPending.value) {
@@ -83,7 +96,7 @@ watchThrottled(x, (pos) => {
 </script>
 
 <template>
-  <div class="vui-sidebar-outer" :style="{ width }" :class="{ open }">
+  <div ref="wrap" class="vui-sidebar-outer" :style="{ width }" :class="{ open }">
     <aside ref="sidebar" class="vui-sidebar" :class="{ open, floaty: props.floaty, mini: props.mini }" :style="{ width: `${props.mini ? 65 : props.width}px` }">
       <div v-if="slots.header" class="vui-sidebar-header">
         <slot name="header" v-bind="slotProps" />

package/src/components/Sidebar/sidebar.scss

@@ -2,12 +2,12 @@
 .vui-sidebar-layout {
   display: flex;
   flex-wrap: nowrap;
-  gap: 32px;
+  gap: 0;
+  height: 100vh;
   position: relative;
 
   main {
     flex: 1;
-    padding: 2rem;
   }
 
   .vui-sidebar-outer {
@@ -22,11 +22,11 @@
 .vui-sidebar {
   --vui-sidebar-float-offset: 8px;
   display: flex;
+  height: 100%;
   flex-direction: column;
   gap: var(--space-sm);
-  height: 100vh;
   width: 224px;
-  position: fixed;
+  position: absolute;
   top: 0;
   z-index: 50;
   background-color: var(--color-bg);
@@ -47,7 +47,7 @@
     top: var(--vui-sidebar-float-offset);
     left: var(--vui-sidebar-float-offset);
     bottom: var(--vui-sidebar-float-offset);
-    height: calc(100vh - calc(var(--vui-sidebar-float-offset) * 2));
+    height: calc(100% - calc(var(--vui-sidebar-float-offset) * 2));
     border-radius: var(--border-radius-m);
     border: 1px solid var(--color-border);
     transform: translateX(calc(-100% - calc(var(--vui-sidebar-float-offset) * 2)));
@@ -76,6 +76,7 @@
       position: absolute;
       inset: 0;
       overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 

package/src/components/Spinner/spinner.scss

@@ -1,5 +1,6 @@
 .vui-spinner {
-  --spinner-color: var(--color-text);
+  --spinner-color: var(--color-border-accent);
+
   aspect-ratio: 1;
   border-radius: 50%;
   border: 3px solid var(--spinner-color);

package/src/components/Switch/Switch.vue

@@ -5,17 +5,18 @@ import './switch.scss'
 interface Props {
   label?: string
   disabled?: boolean
+  accent?: boolean
 }
 
-const { label, disabled } = defineProps<Props>()
+const { label, disabled, accent } = defineProps<Props>()
 const slots = defineSlots()
 const checked = defineModel<boolean>()
 const id = useId()
 </script>
 
 <template>
-  <div class="vui-switch" :class="{ disabled, checked }">
-    <input :id v-model="checked" type="checkbox">
+  <div class="vui-switch" :class="{ disabled, checked, accent }">
+    <input :id v-model="checked" type="checkbox" :disabled>
     <label :for="id">
       <div class="vui-switch-icon">
         <span class="vui-switch-indicator" />

package/src/components/Switch/switch.scss

@@ -1,9 +1,27 @@
 .vui-switch {
   --switch-size: 24px;
 
-  &.checked .vui-switch-icon .vui-switch-indicator {
-    left: calc(100% - 24px);
-    background-color: var(--color-text);
+  &.checked {
+    .vui-switch-icon .vui-switch-indicator {
+      left: calc(100% - 24px);
+      background-color: var(--color-text);
+    }
+
+    &.accent .vui-switch-icon .vui-switch-indicator {
+      background-color: var(--color-accent);
+    }
+  }
+
+  &.disabled {
+    .vui-switch-icon {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    input + label .vui-switch-content {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   }
 
   .vui-switch-icon {
@@ -12,7 +30,7 @@
     border-radius: 22px;
     background-color: var(--color-bg-raised);
     position: relative;
-    cursor: pointer;
+    cursor: default;
 
     .vui-switch-indicator {
       display: block;
@@ -22,7 +40,7 @@
       width: 20px;
       height: 20px;
       border-radius: 100%;
-      background-color: var(--color-bg);
+      background-color: var(--color-text-lighter);
       transition: var(--transition);
     }
   }
@@ -33,6 +51,7 @@
     position: absolute;
     overflow: hidden;
     outline: none !important;
+    opacity: 0;
 
     &:focus-visible + label .vui-switch-icon {
       outline: 2px solid var(--color-text);
@@ -52,9 +71,23 @@
         &:is(p) {
           height: var(--switch-size);
           line-height: var(--switch-size);
-          font-size: var(--font-size-ms);
+          font-size: var(--font-size-m);
         }
       }
     }
   }
 }
+
+:root.light {
+  .vui-switch .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-bg-lowered);
+  }
+
+  .vui-switch.checked.accent .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-accent);
+  }
+
+  .vui-switch.checked .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-text);
+  }
+}

package/src/components/Table/{Header.vue → Head.vue}

@@ -40,18 +40,18 @@ const sortStateBind = computed(() => {
 
 <template>
   <th>
-    <div v-if="props.header" class="vui-table-th-content">
+    <div v-if="props.header || $slots.default" class="vui-table-th-content">
       <slot>
-        {{ props.header.label }}
+        {{ props.header?.label }}
       </slot>
       <Button
-        v-if="props.sort"
+        v-if="props.sort && props.header"
         class="vui-table-sort-button"
         v-bind="sortStateBind"
-        :class="{ active: !!props.header.sortKey }"
         size="s"
-        plain
+        :plain="!!!props.header.sortKey"
         square
+        variant="gray"
         @click="props.header.sortToggle"
       />
     </div>