@dolanske/vui 0.5.0 → 1.0.1

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

@@ -1,7 +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, type VNode, watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, useTemplateRef, watch } from 'vue'
 import './tabs.scss'
 
 interface Props {
@@ -74,8 +75,8 @@ onMounted(() => {
       :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" />

package/src/components/Tabs/tabs.scss

@@ -50,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);
@@ -73,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)

package/src/components/Tooltip/Tooltip.vue

@@ -16,7 +16,7 @@ interface Props {
 }
 
 const {
-  placement = 'bottom',
+  placement,
   delay = 0,
 } = defineProps<Props>()
 
@@ -66,21 +66,21 @@ const id = useId()
   >
     <slot />
   </div>
-  <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
-      <slot name="tooltip" />
-    </Popout>
-  </Transition>
+  <!-- <Transition name="tooltip"> -->
+  <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+    <slot name="tooltip" />
+  </Popout>
+  <!-- </Transition> -->
 </template>
 
-<style scoped>
+<!-- <style scoped>
 .tooltip-enter-active,
 .tooltip-leave-active {
-  transition: 0.1s opacity ease-in-out;
+  transition: var(--transition-fast);
 }
 
 .tooltip-enter-from,
 .tooltip-leave-to {
   opacity: 0;
 }
-</style>
+</style> -->

package/src/components/Tooltip/tooltip.scss

@@ -1,4 +1,8 @@
 .vui-tooltip {
   padding: var(--space-s);
   max-width: 512px;
+  background-color: var(--color-bg-raised);
 }
+
+// :root.light {
+// }

package/src/examples/ExampleAccordions.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import Accordion from '../components/Accordion/Accordion.vue'
+import AccordionGroup from '../components/Accordion/AccordionGroup.vue'
+import Grid from '../components/Grid/Grid.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Accordion
+    </h3>
+
+    <Grid :columns="2" gap="xl">
+      <div>
+        <strong class="block mb-s">Base</strong>
+        <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>
+
+        <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">
+            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>
+      </div>
+      <div>
+        <strong class="block mb-s">Card</strong>
+        <Accordion label="Open details" card>
+          <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">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">
+            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>
+      </div>
+    </Grid>
+  </div>
+</template>

package/src/examples/ExampleAlerts.vue

@@ -0,0 +1,78 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import Alert from '../components/Alert/Alert.vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const variants = ['neutral', 'danger', 'warning', 'success', 'info'] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Alerts
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant>
+                We'd like to get in touch about your car's extended warranty.
+              </Alert>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant filled>
+                We'd like to get in touch about your car's extended warranty.
+              </Alert>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Title + description</th>
+          <td>
+            <Flex column>
+              <Alert
+                v-for="variant in variants"
+                :key="variant"
+                :variant
+                title="Warranty discounts 2025"
+                description="We'd like to get in touch about your car's extended warranty."
+              />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Title + description + filled</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant title="Warranty discounts 2025" filled description="We'd like to get in touch about your car's extended warranty." />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom</th>
+          <td>
+            <Alert variant="warning">
+              <Flex align-center space-between>
+                <p>Unfortunately we can't help you.</p>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:x" />
+                  </template>
+                  Ignore
+                </Button>
+              </Flex>
+            </Alert>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleAvatars.vue

@@ -0,0 +1,44 @@
+<script setup lang='ts'>
+import Avatar from '../components/Avatar/Avatar.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const variants = ['s', 'm', 'l', 96] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Avatars
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base S, M, L  <br> + custom size</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Photo</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size url="https://i.imgur.com/bHWgZfD.jpeg" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Abbreviation</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size>
+                AB
+              </Avatar>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleBadges.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import Badge from '../components/Badge/Badge.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const variants = ['neutral', 'danger', 'warning', 'success', 'info', 'accent'] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Badges
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Flex>
+              <Badge v-for="variant in variants" :key="variant" :variant>
+                Badge
+              </Badge>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Outline</th>
+          <td>
+            <Flex>
+              <Badge v-for="variant in variants" :key="variant" :variant outline>
+                Badge
+              </Badge>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Flex>
+              <Badge v-for="variant in variants" :key="variant" :variant filled>
+                Badge
+              </Badge>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleBreadcrumbs.vue

@@ -0,0 +1,46 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import BreadcrumbItem from '../components/Breadcrumbs/BreadcrumbItem.vue'
+import Breadcrumbs from '../components/Breadcrumbs/Breadcrumbs.vue'
+import Button from '../components/Button/Button.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Breadcrumbs
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base with links</th>
+          <td>
+            <Breadcrumbs>
+              <BreadcrumbItem label="Home" href="#" />
+              <BreadcrumbItem label="About" href="#" />
+              <BreadcrumbItem label="You" />
+            </Breadcrumbs>
+          </td>
+        </tr>
+        <tr>
+          <th>With components</th>
+          <td>
+            <Breadcrumbs>
+              <BreadcrumbItem label="Home" href="#" />
+              <BreadcrumbItem label="About" href="#" />
+              <BreadcrumbItem>
+                <Button size="s">
+                  Switch
+                  <template #end>
+                    <Icon icon="ph:caret-down" />
+                  </template>
+                </Button>
+              </BreadcrumbItem>
+            </Breadcrumbs>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>