@dolanske/vui 0.4.0 → 1.0.0

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,7 @@
 <script setup lang='ts'>
-import { useCssVar, useMouse } from '@vueuse/core'
-import { computed, useSlots, useTemplateRef, watch } 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'
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,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(() => ({
@@ -45,28 +49,54 @@ const slotProps = computed(() => ({
   floaty: props.floaty,
   width: props.width,
   open,
+  close: () => open.value = false,
 }))
 
-const { x } = useMouse()
+// Sidebar `appear` implementation
+const { start, stop, isPending } = useTimeoutFn(() => {
+  if (props.appear) {
+    open.value = true
+  }
+}, 250)
+
+const APPEAR_OFFSET = 32
+
+const wrap = useTemplateRef('wrap')
+const { elementX } = useMouseInElement(wrap)
+
+onMounted(() => {
+  if (props.appear && open.value) {
+    open.value = false
+  }
+})
 
-let appearActive = true
-watch(x, (pos) => {
-  if (!props.appear)
+watchThrottled(elementX, (pos) => {
+  if (!props.appear || (pos <= APPEAR_OFFSET && pos >= 0 && isPending.value))
     return
 
-  if (pos < 20 && !open.value) {
-    open.value = true
-    appearActive = true
+  if (pos <= APPEAR_OFFSET && pos >= 0 && !open.value && !isPending.value) {
+    start()
   }
-  else if (appearActive && pos > props.width) {
+  else if (isPending.value) {
+    stop()
+  }
+
+  const openWidth = props.mini
+    ? 65
+    : props.floaty
+      ? props.width
+      : props.width - (isNil(offset.value) ? 0 : Number(offset.value?.replace('px', '')))
+
+  if ((pos > APPEAR_OFFSET + openWidth || pos < 0) && open.value) {
     open.value = false
-    appearActive = false
   }
+}, {
+  throttle: 100,
 })
 </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,13 +40,22 @@
       width: 20px;
       height: 20px;
       border-radius: 100%;
-      background-color: var(--color-bg);
+      background-color: var(--color-text-lighter);
       transition: var(--transition);
     }
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+    opacity: 0;
+
+    &:focus-visible + label .vui-switch-icon {
+      outline: 2px solid var(--color-text);
+    }
 
     & + label {
       display: grid;
@@ -44,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>

package/src/components/Table/{Table.vue → Root.vue}

@@ -50,7 +50,7 @@ const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
     }"
   >
     <table>
-      <thead>
+      <thead v-if="$slots.header">
         <tr>
           <slot name="header" />
         </tr>
@@ -59,7 +59,7 @@ const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
         <slot name="body" />
       </tbody>
     </table>
-    <div class="vui-table-pagination-wrap">
+    <div v-if="$slots.pagination" class="vui-table-pagination-wrap">
       <slot name="pagination" />
     </div>
   </div>

package/src/components/Table/SelectRow.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import type { BaseRow, TableSelectionProvide } from './table'
 import { computed, inject } from 'vue'
+import { isObjectInSet } from '../../shared/helpers'
 import Button from '../Button/Button.vue'
 import { TableSelectionProvideSymbol } from './table'
 
@@ -14,7 +15,7 @@ const {
   selectRow,
   selectedRows,
 } = inject(TableSelectionProvideSymbol) as TableSelectionProvide
-const isSelected = computed(() => selectedRows.value.has(props.row))
+const isSelected = computed(() => isObjectInSet(selectedRows.value, props.row))
 </script>
 
 <template>

package/src/components/Table/index.ts

@@ -0,0 +1,7 @@
+import Cell from './Cell.vue'
+import Head from './Head.vue'
+import Root from './Root.vue'
+import SelectAll from './SelectAll.vue'
+import SelectRow from './SelectRow.vue'
+
+export { Cell, Head, Root, SelectAll, SelectRow }

package/src/components/Table/table.scss

@@ -47,16 +47,28 @@
     tr {
       border: none;
 
+      &:first-child td {
+        border-top: 0 !important;
+      }
+
       &:has(.vui-table-interactive-cell.selected) {
         td {
           background-color: var(--color-bg-raised);
         }
       }
+
+      &:last-child td {
+        border-bottom: 0;
+      }
+    }
+
+    th {
+      border-top: 0 !important;
     }
 
     th,
     td {
-      font-size: var(--font-size-ms);
+      font-size: var(--font-size-m);
       border: none;
       border-left: none !important;
       transition: var(--transition-fast);
@@ -72,6 +84,7 @@
         height: auto;
         padding-inline: var(--space-xs);
         padding-block: 0;
+        vertical-align: middle;
 
         &.selected .vui-button.icon .vui-button-slot svg path {
           color: var(--color-text) !important;
@@ -107,24 +120,25 @@
 
     th {
       .vui-table-th-content {
-        color: var(--color-text-light);
+        color: var(--color-text);
         font-size: var(--font-size-xs);
         text-transform: uppercase;
-        font-weight: 500;
+        font-weight: var(--font-weight-semibold);
         display: flex;
         justify-content: flex-start;
         align-items: center;
         gap: var(--space-xs);
 
         .vui-table-sort-button:not(.active) svg path {
-          color: var(--color-text-lighter);
+          color: var(--color-text-light);
         }
       }
     }
   }
 
   .vui-table-pagination-wrap {
-    padding: var(--space-s) var(--space-m);
+    padding: var(--space-xs) var(--space-m);
+    border-top: 1px solid var(--color-border);
 
     p {
       font-size: var(--font-size-s);
@@ -132,3 +146,9 @@
     }
   }
 }
+
+:root.light {
+  .vui-table-container table tr:has(.vui-table-interactive-cell.selected) td {
+    background-color: var(--color-bg-medium);
+  }
+}

package/src/components/Table/table.ts

@@ -38,7 +38,7 @@ interface TableOptionsInput {
 }
 
 // eslint-disable-next-line ts/explicit-function-return-type
-export function defineTable<const Dataset extends Array<BaseRow>>(
+export function defineTable<const Dataset extends any[]>(
   computedDataset: MaybeRefOrGetter<Dataset>,
   tableOptions?: TableOptionsInput,
 ) {
@@ -139,7 +139,7 @@ export function defineTable<const Dataset extends Array<BaseRow>>(
   })
 
   const headers = computed(() => Object
-    .keys($data.value[0])
+    .keys($data.value[0] || {})
     .map((key) => {
       return {
         label: key,
@@ -212,7 +212,11 @@ export function defineTable<const Dataset extends Array<BaseRow>>(
       selectedRows.value = new Set()
     }
     else {
-      selectedRows.value = new Set($data.value.map(row => row))
+      const data = new Set<BaseRow>()
+      for (const item of $data.value) {
+        data.add(item)
+      }
+      selectedRows.value = new Set(data)
     }
   }
 

package/src/components/Tabs/Tab.vue

@@ -1,27 +1,25 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 
 export interface TabProps {
   disabled?: boolean
-  id?: string
-  label: string
+  label?: string
   icon?: string
 }
-
 const props = defineProps<TabProps>()
-const id = computed(() => props.id ?? props.label)
 </script>
 
 <template>
   <button
     class="vui-tab"
-    :data-tab-id="id"
+    :data-tab-id="label"
     :class="{ disabled: props.disabled }"
     role="tab"
-    :name="id"
+    :name="label"
   >
-    <Icon v-if="props.icon" :icon="props.icon" />
-    {{ props.label }}
+    <slot>
+      <Icon v-if="props.icon" :icon="props.icon" />
+      {{ props.label }}
+    </slot>
   </button>
 </template>

package/src/components/Tabs/Tabs.vue

@@ -18,6 +18,8 @@ const {
 
 const slots = defineSlots<{
   default: () => Array<VNode & { props: TabProps }>
+  start: unknown
+  end: unknown
 }>()
 
 const active = defineModel()
@@ -67,13 +69,18 @@ onMounted(() => {
         : `vui-tabs-variant-${variant}`,
     ]"
   >
+    <slot name="start" />
     <Component
       :is="vnode"
       v-for="vnode of slots.default()"
       :key="vnode.props.id"
-      :class="{ active: vnode.props.id === active }"
-      @click="active = vnode.props.id"
+      :class="{ active: vnode.props.label === active }"
+      @click="active = vnode.props.label"
     />
+    <template v-if="slots.end">
+      <div v-if="!!!expand" class="flex-1" />
+      <slot name="end" />
+    </template>
 
     <Transition name="fade" appear>
       <div ref="underline" class="vui-tab-underline" />

package/src/components/Tabs/tabs.scss

@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   gap: 4px;
+  align-items: center;
   border-bottom: 1px solid var(--color-border);
   position: relative;
 
@@ -49,9 +50,10 @@
     align-items: center;
     justify-content: center;
     padding: 0 10px;
-    font-size: var(--font-size-ms);
+    font-size: var(--font-size-m);
     position: relative;
-    color: var(--color-text-light);
+    color: var(--color-text-lighter);
+    font-weight: var(--font-weight-medium);
     transition: var(--transition);
     cursor: default;
     gap: var(--space-xs);
@@ -72,8 +74,14 @@
   .vui-tab-underline {
     transition: var(--transition);
     display: block;
-    border-bottom: 1px solid var(--color-text);
+    border-bottom: 2px solid var(--color-text);
     position: absolute;
     bottom: 0;
   }
 }
+
+:root.light {
+  .vui-tabs.vui-tabs-variant-filled {
+    background-color: var(--color-bg-medium);
+  }
+}

package/src/components/Toast/Toasts.vue

@@ -14,6 +14,11 @@ import './toast.scss'
             <p v-if="toast.description">
               {{ toast.description }}
             </p>
+            <Component
+              :is="toast.body"
+              v-if="toast.body"
+              v-bind="{ data: toast.bodyProps, toastId }"
+            />
           </div>
           <Button v-if="toast.action" @click="toast.action.handler(toast.id)">
             {{ toast.action.label }}

package/src/components/Toast/toast.scss

@@ -14,8 +14,8 @@
       display: flex;
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius-m);
-      padding: var(--space-m) var(--space-s);
-      background-color: var(--color-bg);
+      padding: var(--space-m);
+      background-color: var(--color-bg-lowered);
       width: 100%;
       align-items: center;
       gap: var(--space-m);
@@ -29,6 +29,10 @@
           margin-bottom: var(--space-xs);
           display: block;
           font-size: var(--font-size-m);
+
+          &:only-child {
+            margin: 0;
+          }
         }
 
         p {

package/src/components/Toast/toast.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'vue'
 import { ref } from 'vue'
 
 interface ToastAction {
@@ -10,6 +11,8 @@ interface ToastOptions {
   timeout?: number
   action?: ToastAction
   description?: string
+  body?: Component
+  bodyProps?: object
 }
 
 interface Toast {
@@ -20,6 +23,8 @@ interface Toast {
   createdAt: number
   expiresAt: number
   description?: string
+  body?: Component
+  bodyProps?: object
 }
 
 // Store in a ref so the toast component can import it
@@ -44,6 +49,8 @@ export function pushToast(title: string, options?: ToastOptions): Toast {
     action: parsedOptions.action,
     createdAt: Date.now(),
     expiresAt: Date.now() + parsedOptions.timeout,
+    body: parsedOptions.body,
+    bodyProps: parsedOptions.bodyProps ?? {},
   }
 
   toasts.value.set(id, newToast)