@dolanske/vui 1.1.4 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",
@@ -14,7 +14,9 @@
   "keywords": [
     "vue",
     "vue3",
-    "component"
+    "component",
+    "component library",
+    "vue3 components"
   ],
   "exports": {
     ".": {
@@ -49,25 +51,25 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
-    "@types/node": "^22.14.1",
+    "@types/node": "^22.15.14",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^13.1.0",
-    "sass": "^1.86.3",
+    "sass": "^1.87.0",
     "vaul-vue": "^0.4.1",
     "vite-plugin-dts": "^4.5.3",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.12.0",
-    "@iconify/vue": "^4.3.0",
+    "@antfu/eslint-config": "^4.13.0",
+    "@iconify/vue": "^5.0.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.25.0",
+    "eslint": "^9.26.0",
     "eslint-plugin-format": "^1.0.1",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.2",
-    "vitest": "^3.1.1",
-    "vue-tsc": "^2.2.8"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3",
+    "vue-tsc": "^2.2.10"
   }
 }

package/src/components/Accordion/AccordionGroup.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { VNode } from 'vue'
 import type { AccordionProps } from './Accordion.vue'
-import type Accordion from './Accordion.vue'
-import { useTemplateRef } from 'vue'
+import { useId } from 'vue'
+import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
 // Renderless component which is used to house multiple accordions which can be triggered together in some way
 
 interface Props {
@@ -14,30 +13,37 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: AccordionProps }>
-}>()
+const slots = defineSlots()
 
-const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordion')
+// Since accordions do not have a child parent, we need to group them by a
+// common id
+const id = useId()
+
+const flattened = useFlattenedSlot<AccordionProps>(slots.default)
 
 function handleAccordionOpen(newIndex: number) {
-  if (!accordionRefs.value || !props.single)
+  if (!props.single)
     return
 
-  accordionRefs.value.forEach((item, index) => {
+  const grouped = document.querySelectorAll(`[data-accordion-group-id=${id}]`)
+
+  grouped.forEach((item, index) => {
     if (index !== newIndex) {
-      item.close()
+      // @ts-expect-error We do a little accessin'
+      item.__vnode.ctx.exposed.close()
     }
   })
 }
+
+enforceSlotType(flattened, 'Accordion')
 </script>
 
 <template>
   <component
     :is="item"
-    v-for="(item, index) of slots.default()"
-    ref="accordion"
+    v-for="(item, index) of flattened"
     :key="item"
+    :data-accordion-group-id="id"
     @open="handleAccordionOpen(index)"
   />
 </template>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -1,7 +1,6 @@
 <script setup lang='ts'>
-import type { VNode } from 'vue'
-import type { BreadcrumbItemProps } from './BreadcrumbItem.vue'
 import { Icon } from '@iconify/vue'
+import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
 import './breadcrumbs.scss'
 
 interface Props {
@@ -12,16 +11,16 @@ const {
   separator = 'ph:caret-right',
 } = defineProps<Props>()
 
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: BreadcrumbItemProps }>
-}>()
+const slots = defineSlots()
+const flattened = useFlattenedSlot(slots.default)
+enforceSlotType(flattened, 'BreadcrumbItem')
 </script>
 
 <template>
   <ul class="vui-breadcrumbs">
-    <template v-for="(vnode, index) of slots.default()" :key="vnode.props?.label || index">
+    <template v-for="(vnode, index) of flattened" :key="vnode.props?.label || index">
       <component :is="vnode" />
-      <template v-if="index !== slots.default().length - 1">
+      <template v-if="index !== flattened.length - 1">
         <Icon v-if="separator.length > 1 && separator.includes(':')" class="vui-breadcrumb-custom-separator" :icon="separator" />
         <span v-else class="vui-breadcrumb-custom-separator">{{ separator }}</span>
       </template>

package/src/components/Button/button.scss

@@ -95,6 +95,7 @@
     opacity: 0;
     position: absolute;
     pointer-events: none;
+    --spinner-color: var(--color-text);
   }
 
   // Variants
@@ -166,6 +167,10 @@
       color: var(--color-text-invert);
       background-color: var(--color-button-fill);
 
+      .vui-spinner {
+        --spinner-color: var(--color-text-invert);
+      }
+
       svg,
       path {
         color: var(--color-text-invert);

package/src/components/Divider/divider.scss

@@ -30,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    & > *:first-child { 
+    & > *:first-child {
       outline: 3px solid var(--color-bg);
     }
   }

package/src/components/Dropdown/Dropdown.vue

@@ -113,7 +113,6 @@ onMounted(() => {
     :placement
     :style="{
       minWidth: expand ? w : mW,
-      width: w,
       maxHeight: formatUnitValue(maxHeight),
     }"
   >

package/src/components/Kbd/KbdGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type Kbd from './Kbd.vue'
 import { useMagicKeys, whenever } from '@vueuse/core'
+import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
 
 /**
  * Can be used to wrap multiple <Kbd /> elements and triggers the callback when
@@ -11,13 +11,14 @@ const emits = defineEmits<{
   trigger: []
 }>()
 
-const slots = defineSlots<{
-  default: () => Array<typeof Kbd>
-}>()
+const slots = defineSlots()
 const keys = useMagicKeys()
 
+const flattened = useFlattenedSlot(slots.default)
+enforceSlotType(flattened, 'Kbd')
+
 whenever(
-  keys[slots.default().map(vnode => vnode.props.keys).join('+')],
+  keys[flattened.value.map(vnode => vnode.props.keys).join('+')],
   () => emits('trigger'),
 )
 </script>

package/src/components/Radio/RadioGroup.vue

@@ -1,7 +1,6 @@
 <script setup lang='ts'>
 import type { FlexProps } from '../Flex/Flex.vue'
-import type Radio from './Radio.vue'
-import { watchEffect } from 'vue'
+import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
 import Flex from '../Flex/Flex.vue'
 
 interface Props extends FlexProps {
@@ -13,24 +12,19 @@ const {
   ...flexProps
 } = defineProps<Props>()
 
-const slots = defineSlots<{
-  default: () => Array<typeof Radio>
-}>()
+const slots = defineSlots()
 
 const checked = defineModel()
 
-watchEffect(() => {
-  if (slots.default().some(s => s.type.__name !== 'Radio')) {
-    console.error('You can only pass `<Radio />` components as children.')
-  }
-})
+const flattened = useFlattenedSlot(slots.default)
+enforceSlotType(flattened, 'Radio')
 </script>
 
 <template>
   <Flex v-bind="flexProps">
     <Component
       :is="vnode"
-      v-for="vnode of slots.default()"
+      v-for="vnode of flattened"
       :key="vnode.props.value"
       v-bind="vnode.props"
       v-model="checked"

package/src/components/Select/Select.vue

@@ -48,7 +48,7 @@ const {
 } = defineProps<Props>()
 
 const selected = defineModel<SelectOption[] | undefined>()
-const trigger = useTemplateRef('trigger')
+const triggerRef = useTemplateRef('trigger')
 
 //
 function setValue(option: SelectOption) {
@@ -128,7 +128,7 @@ const id = useId()
 
 <template>
   <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 })">
+    <Dropdown ref="dropdown" :expand @close="triggerRef?.focus({ preventScroll: true })">
       <template #trigger="{ toggle, isOpen }">
         <div class="vui-input vui-select-trigger-content">
           <label v-if="label" :for="id">{{ label }}</label>

package/src/components/Select/select.scss

@@ -1,6 +1,7 @@
 .vui-input-container {
   &.vui-select {
     width: auto;
+    min-width: 96px;
 
     &.expand {
       .vui-dropdown-trigger-wrap,

package/src/components/Sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { useCssVar, useMouseInElement, useTimeoutFn, watchThrottled } from '@vueuse/core'
-import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
+import { computed, onBeforeMount, useSlots, useTemplateRef } from 'vue'
 import { isNil } from '../../shared/helpers'
 import './sidebar.scss'
 
@@ -26,12 +26,12 @@ interface Props {
   floaty?: boolean
 }
 
-const sidebar = useTemplateRef('sidebar')
+const sidebarRef = useTemplateRef('sidebar')
 const open = defineModel<boolean>({
   default: true,
 })
 const slots = useSlots()
-const offset = useCssVar('--vui-sidebar-float-offset', sidebar, {
+const offset = useCssVar('--vui-sidebar-float-offset', sidebarRef, {
   initialValue: '8px',
 })
 
@@ -61,10 +61,10 @@ const { start, stop, isPending } = useTimeoutFn(() => {
 
 const APPEAR_OFFSET = 32
 
-const wrap = useTemplateRef('wrap')
-const { elementX } = useMouseInElement(wrap)
+const wrapEl = useTemplateRef('wrap')
+const { elementX } = useMouseInElement(wrapEl)
 
-onMounted(() => {
+onBeforeMount(() => {
   if (props.appear && open.value) {
     open.value = false
   }
@@ -92,6 +92,7 @@ watchThrottled(elementX, (pos) => {
   }
 }, {
   throttle: 100,
+  immediate: true,
 })
 </script>
 

package/src/components/Tabs/Tab.vue

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

package/src/components/Tabs/Tabs.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { VNode } from 'vue'
 import type { TabProps } from './Tab.vue'
 import { useResizeObserver } from '@vueuse/core'
 import { onMounted, useTemplateRef, watch } from 'vue'
+import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
 import './tabs.scss'
 
 interface Props {
@@ -17,11 +17,7 @@ const {
   variant = 'default',
 } = defineProps<Props>()
 
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: TabProps }>
-  start: unknown
-  end: unknown
-}>()
+const slots = defineSlots()
 
 const active = defineModel()
 
@@ -56,6 +52,10 @@ onMounted(() => {
     },
   )
 })
+
+const flattened = useFlattenedSlot<TabProps>(slots.default)
+
+enforceSlotType(flattened, 'Tab')
 </script>
 
 <template>
@@ -71,14 +71,14 @@ onMounted(() => {
     ]"
   >
     <slot name="start" />
-    <Component
-      :is="vnode"
-      v-for="vnode of slots.default()"
-      :key="vnode.props.label"
-      :class="{ active: vnode.props.label === active }"
-      @click="active = vnode.props.label"
-    />
-    <template v-if="slots.end">
+    <template v-for="vnode of flattened" :key="vnode.props.value">
+      <Component
+        :is="vnode"
+        :class="{ active: vnode.props.value === active }"
+        @click="active = vnode.props.value"
+      />
+    </template>
+    <template v-if="$slots.end">
       <div v-if="!!!expand" class="flex-1" />
       <slot name="end" />
     </template>

package/src/components/Tabs/tabs.scss

@@ -16,8 +16,8 @@
     .vui-tab-underline {
       border-bottom: none;
       background-color: var(--color-bg-lowered);
-      top: 4px;
-      bottom: 4px;
+      top: 3px;
+      bottom: 3px;
       z-index: -1;
       border-radius: var(--border-radius-m);
     }

package/src/examples/ExampleAccordions.vue

@@ -1,7 +1,14 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
 import Accordion from '../components/Accordion/Accordion.vue'
 import AccordionGroup from '../components/Accordion/AccordionGroup.vue'
 import Grid from '../components/Grid/Grid.vue'
+
+const dynamicAccordions = ref([
+  'First',
+  'Second',
+  'Third',
+])
 </script>
 
 <template>
@@ -16,18 +23,15 @@ import Grid from '../components/Grid/Grid.vue'
         <Accordion label="Open details" class="mb-xl">
           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
         </Accordion>
+        <Accordion label="Open Two" class="mb-xl">
+          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
+        </Accordion>
 
         <div class="mb-xl" />
 
         <strong class="block mb-s">Group</strong>
-        <AccordionGroup single>
-          <Accordion label="First">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
-          </Accordion>
-          <Accordion label="Second">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
-          </Accordion>
-          <Accordion label="Third">
+        <AccordionGroup>
+          <Accordion v-for="item in dynamicAccordions" :key="item" :label="item">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
           </Accordion>
         </AccordionGroup>
@@ -42,13 +46,7 @@ import Grid from '../components/Grid/Grid.vue'
 
         <strong class="block mb-s">Card group</strong>
         <AccordionGroup single>
-          <Accordion card label="First" class="mb-xs">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
-          </Accordion>
-          <Accordion card label="Second" class="mb-xs">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
-          </Accordion>
-          <Accordion card label="Third" class="mb-xs">
+          <Accordion v-for="item in dynamicAccordions" :key="item" :label="item" card class="mb-xs">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
           </Accordion>
         </AccordionGroup>

package/src/examples/ExampleButtons.vue

@@ -75,7 +75,7 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon</th>
+          <th>Square + icon</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" />
@@ -83,7 +83,7 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon + small</th>
+          <th>Square + icon + small</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="s" />
@@ -91,13 +91,21 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon + large</th>
+          <th>Square + icon + large</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="l" />
             </Flex>
           </td>
         </tr>
+        <tr>
+          <th>Loading</th>
+          <td>
+            <Flex gap="s">
+              <Button v-for="btn in variants" :key="btn" :variant="btn" loading size="l" />
+            </Flex>
+          </td>
+        </tr>
         <tr>
           <th>Icon + text</th>
           <td>

package/src/examples/ExampleFlexGrid.vue

@@ -59,8 +59,8 @@ const cols = ref(3)
           <th>Justify props</th>
           <td>
             <Flex>
-              <code>justify-start</code><code>justify-end</code><code>justify-center</code>
-              <code>space-between</code><code>space-around</code><code>space-evenly</code>
+              <code>x-start</code><code>x-end</code><code>x-center</code>
+              <code>x-between</code><code>x-around</code><code>x-evenly</code>
             </Flex>
           </td>
         </tr>
@@ -68,8 +68,8 @@ const cols = ref(3)
           <th>Align props</th>
           <td>
             <Flex>
-              <code>align-start</code><code>align-end</code><code>y-center</code>
-              <code>align-baseline</code>
+              <code>y-start</code><code>y-end</code><code>y-center</code>
+              <code>y-baseline</code>
             </Flex>
           </td>
         </tr>

package/src/examples/ExampleInputs.vue

@@ -184,8 +184,10 @@ const selected2 = ref([])
         </option>
       </select>
     </Grid>
+    <div class="inline-block">
+      <Select :options="longOptions" label="Short" show-clear />
+    </div>
     <Divider :size="48" />
-
     <h6 class="mb-l">
       OTP
     </h6>

package/src/examples/ExamplePopouts.vue

@@ -4,7 +4,7 @@ import Button from '../components/Button/Button.vue'
 import Flex from '../components/Flex/Flex.vue'
 import Popout from '../components/Popout/Popout.vue'
 
-const anch = useTemplateRef('anch')
+const anchRef = useTemplateRef('anch')
 const open = ref(false)
 </script>
 
@@ -26,7 +26,7 @@ const open = ref(false)
         This popout has offset of <code>32</code> and its placement is <code>bottom-start</code>. It also has an attached event to <code>clickOutside</code> which is fired when user clicks outside of the popout. In that case, we manually close it.
       </p>
     </Flex>
-    <Popout v-if="open" :anchor="anch" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
+    <Popout v-if="open" :anchor="anchRef" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
       <h3>Popout content</h3>
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!</p>
     </Popout>

package/src/examples/ExampleSidebars.vue

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import { useStorage } from '@vueuse/core'
 import { ref } from 'vue'
 import Avatar from '../components/Avatar/Avatar.vue'
 import Button from '../components/Button/Button.vue'
@@ -6,8 +7,11 @@ import DropdownItem from '../components/Dropdown/DropdownItem.vue'
 import Flex from '../components/Flex/Flex.vue'
 import Grid from '../components/Grid/Grid.vue'
 import Sidebar from '../components/Sidebar/Sidebar.vue'
+import Switch from '../components/Switch/Switch.vue'
+
+const s1 = useStorage('sidebar-open', false)
+const s1Mini = useStorage('sidebar-mini', true)
 
-const s1 = ref(true)
 const s2 = ref(true)
 const s3 = ref(true)
 </script>
@@ -38,7 +42,6 @@ const s3 = ref(true)
             <DropdownItem icon="ph:phone">
               Contact
             </DropdownItem>
-
             <template #footer>
               <Flex y-center>
                 <Avatar size="m" />
@@ -107,9 +110,12 @@ const s3 = ref(true)
       </div>
 
       <div>
-        <span class="mb-m block">Mini </span>
+        <Flex y-center x-star class="mb-m">
+          <span class="block">Mini</span>
+          <Switch v-model="s1Mini" />
+        </Flex>
         <div class="vui-sidebar-layout" :style="{ height: '512px' }">
-          <Sidebar v-model="s2" mini>
+          <Sidebar v-model="s2" :mini="s1Mini">
             <template #header>
               <Flex y-center>
                 <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">