@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Tabs/Tab.vue

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

package/src/components/Tabs/Tabs.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-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 {
-  variant?: 'default' | 'filled'
-  expand?: boolean
-  disabled?: boolean
-}
-
-const {
-  expand,
-  disabled,
-  variant = 'default',
-} = defineProps<Props>()
-
-const slots = defineSlots()
-
-const active = defineModel()
-
-// Underline calculation
-const underlineRef = useTemplateRef('underline')
-const tabsRef = useTemplateRef('tabs')
-
-function computeUnderlinePosition() {
-  if (!window)
-    return
-
-  if (tabsRef.value && underlineRef.value) {
-    const activeBounds = tabsRef.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
-    const parentBounds = tabsRef.value.getBoundingClientRect()
-    if (!activeBounds || !parentBounds)
-      return
-
-    underlineRef.value.style.width = `${activeBounds.width}px`
-    underlineRef.value.style.left = `${activeBounds.left - parentBounds.left}px`
-  }
-}
-
-onMounted(() => {
-  useResizeObserver(tabsRef, computeUnderlinePosition)
-
-  watch(
-    [active, () => expand],
-    computeUnderlinePosition,
-    {
-      immediate: true,
-      flush: 'post',
-    },
-  )
-})
-
-const flattened = useFlattenedSlot<TabProps>(slots.default)
-
-enforceSlotType(flattened, 'Tab')
-</script>
-
-<template>
-  <div
-    ref="tabs"
-    class="vui-tabs"
-    role="tablist"
-    :class="[
-      { expand, disabled },
-      variant === 'default'
-        ? ''
-        : `vui-tabs-variant-${variant}`,
-    ]"
-  >
-    <slot name="start" />
-    <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>
-
-    <Transition name="fade" appear>
-      <div v-if="active" ref="underline" class="vui-tab-underline" />
-    </Transition>
-  </div>
-</template>

package/src/components/Tabs/tabs.scss

@@ -1,87 +0,0 @@
-.vui-tabs {
-  display: flex;
-  width: 100%;
-  gap: 4px;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  position: relative;
-
-  &.vui-tabs-variant-filled {
-    background-color: var(--color-bg-raised);
-    border-bottom: none;
-    z-index: var(--z-default);
-    border-radius: var(--border-radius-m);
-    padding-inline: 4px;
-
-    .vui-tab-underline {
-      border-bottom: none;
-      background-color: var(--color-bg-lowered);
-      top: 3px;
-      bottom: 3px;
-      z-index: var(--z-behind);
-      border-radius: var(--border-radius-m);
-    }
-  }
-
-  &.disabled .vui-tab,
-  .vui-tab.disabled {
-    pointer-events: none;
-    color: var(--color-text-lighter);
-
-    &.active {
-      color: var(--color-text-lighter) !important;
-    }
-  }
-
-  &.disabled {
-    .vui-tab-underline {
-      border-color: var(--color-text-lighter);
-    }
-  }
-
-  &.expand .vui-tab {
-    flex: 1;
-  }
-
-  .vui-tab {
-    display: flex;
-    height: 40px;
-    // place-content: center;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
-    font-size: var(--font-size-m);
-    position: relative;
-    color: var(--color-text-lighter);
-    font-weight: var(--font-weight-medium);
-    transition: var(--transition);
-    cursor: default;
-    gap: var(--space-xs);
-    border-radius: var(--border-radius-m);
-
-    svg {
-      width: 20px;
-      height: 20px;
-      color: var(--color-text-light);
-    }
-
-    &:hover,
-    &.active {
-      color: var(--color-text);
-    }
-  }
-
-  .vui-tab-underline {
-    transition: var(--transition);
-    display: block;
-    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

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import Button from '../Button/Button.vue'
-import { toasts } from './toast'
-import './toast.scss'
-</script>
-
-<template>
-  <Teleport to="body">
-    <div class="vui-toast-wrapper">
-      <TransitionGroup name="toast" tag="ul" class="vui-toast-list">
-        <li v-for="[toastId, toast] in toasts" :key="toastId" class="vui-toast-item">
-          <div class="vui-toast-item-content">
-            <strong>{{ toast.title }}</strong>
-            <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 }}
-          </Button>
-        </li>
-      </TransitionGroup>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.toast-move,
-.toast-enter-active,
-.toast-leave-active {
-  transition: var(--transition);
-}
-
-.toast-enter-from {
-  opacity: 0;
-  transform: translateY(24px) scale(0.95);
-}
-
-.toast-leave-to {
-  opacity: 0;
-  transform: translateY(-24px) scale(0.95);
-}
-
-.toast-leave-active {
-  position: absolute;
-}
-</style>

package/src/components/Toast/toast.scss

@@ -1,45 +0,0 @@
-.vui-toast-wrapper {
-  position: fixed;
-  bottom: 32px;
-  right: 32px;
-  width: 100%;
-  max-width: 392px;
-
-  .vui-toast-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xs);
-
-    .vui-toast-item {
-      display: flex;
-      border: 1px solid var(--color-border);
-      border-radius: var(--border-radius-m);
-      padding: var(--space-m);
-      background-color: var(--color-bg-lowered);
-      width: 100%;
-      align-items: center;
-      gap: var(--space-m);
-      box-shadow: var(--box-shadow);
-
-      .vui-toast-item-content {
-        flex: 1;
-
-        strong {
-          color: var(--color-text);
-          margin-bottom: var(--space-xs);
-          display: block;
-          font-size: var(--font-size-m);
-
-          &:only-child {
-            margin: 0;
-          }
-        }
-
-        p {
-          color: var(--color-text-lighter);
-          font-size: var(--font-size-s);
-        }
-      }
-    }
-  }
-}

package/src/components/Toast/toast.ts

@@ -1,75 +0,0 @@
-import type { Component } from 'vue'
-import { ref } from 'vue'
-
-interface ToastAction {
-  label: string
-  handler: (toastId: number) => void
-}
-
-interface ToastOptions {
-  persist?: boolean
-  timeout?: number
-  action?: ToastAction
-  description?: string
-  body?: Component
-  bodyProps?: object
-}
-
-interface Toast {
-  id: number
-  // type: ToastType
-  title: string
-  action?: ToastAction
-  createdAt: number
-  expiresAt: number
-  description?: string
-  body?: Component
-  bodyProps?: object
-}
-
-// Store in a ref so the toast component can import it
-export const toasts = ref(new Map<number, Toast>())
-
-// Simple incremental id system
-let id = 0
-
-// function toast(type: ToastType, title: string, options?: ToastOptions): Toast {
-export function pushToast(title: string, options?: ToastOptions): Toast {
-  const parsedOptions = Object.assign({
-    persist: false,
-    timeout: 7000,
-  }, options)
-
-  const newToast = {
-    id,
-    // type,
-    title,
-    persist: parsedOptions.persist,
-    description: parsedOptions.description,
-    action: parsedOptions.action,
-    createdAt: Date.now(),
-    expiresAt: Date.now() + parsedOptions.timeout,
-    body: parsedOptions.body,
-    bodyProps: parsedOptions.bodyProps ?? {},
-  }
-
-  toasts.value.set(id, newToast)
-
-  // If options include timeout (by default) remove the toast after timeout
-  // passes
-  if (!parsedOptions.persist) {
-    setTimeout((_id: number) => {
-      toasts.value.delete(_id)
-      // Pass Id as an optional argument, becasue by the time it is executed the
-      // Id will have been increased
-    }, parsedOptions.timeout, id)
-  }
-
-  id++
-
-  return newToast
-}
-
-export function removeToast(id: number): void {
-  toasts.value.delete(id)
-}

package/src/components/Tooltip/Tooltip.vue

@@ -1,78 +0,0 @@
-<script setup lang='ts'>
-import type { Placement } from '../../shared/types'
-import { computed, ref, useId, useTemplateRef, watch } from 'vue'
-import Popout from '../Popout/Popout.vue'
-import './tooltip.scss'
-
-interface Props {
-  /**
-   * Tooltip placement related to the anchor
-   */
-  placement?: Placement
-  /**
-   * Amount of time user should hover the anchor until the tooltip shows up
-   */
-  delay?: number
-}
-
-const {
-  placement,
-  delay = 0,
-} = defineProps<Props>()
-
-const popoutAnchorRef = useTemplateRef('popoutAnchor')
-// Track if user is hovering the anchor
-const hoverAnchor = ref(false)
-
-// Display tooltip
-const showTooltip = ref(false)
-
-let timeoutId: NodeJS.Timeout
-watch(hoverAnchor, (isHovering) => {
-  if (isHovering) {
-    if (!delay || delay <= 0) {
-      showTooltip.value = true
-      return
-    }
-
-    clearTimeout(timeoutId)
-
-    timeoutId = setTimeout(() => {
-      // Need to reference the ref itself as this will execute without the
-      // outside scope (as far as I know tbh)
-      if (hoverAnchor.value) {
-        showTooltip.value = true
-      }
-    }, delay)
-  }
-  else {
-    clearTimeout(timeoutId)
-    showTooltip.value = false
-  }
-})
-
-const id = useId()
-const anchor = computed(() => popoutAnchorRef.value?.children[0] as HTMLElement | null)
-</script>
-
-<template>
-  <div
-    ref="popoutAnchor"
-    class="popout-anchor"
-    :aria-describedby="id"
-    @mouseenter="hoverAnchor = true"
-    @mouseleave="hoverAnchor = false"
-  >
-    <slot />
-  </div>
-  <Popout :id :visible="showTooltip" :anchor class="vui-tooltip" :placement>
-    <slot name="tooltip" />
-  </Popout>
-</template>
-
-<style scoped lang="scss">
-.popout-anchor {
-  display: contents;
-  width: fit-content;
-}
-</style>

package/src/components/Tooltip/tooltip.scss

@@ -1,5 +0,0 @@
-.vui-tooltip {
-  padding: var(--space-xs) var(--space-s);
-  max-width: 512px;
-  background-color: var(--color-bg-raised);
-}

package/src/examples/ExampleAccordions.vue

@@ -1,69 +0,0 @@
-<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>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Accordion
-    </h3>
-
-    <Grid :columns="2" gap="xl">
-      <div>
-        <strong class="block mb-s text-semibold">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>
-        <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 text-semibold">Group</strong>
-        <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>
-      </div>
-      <div>
-        <strong class="block mb-s text-semibold">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 text-semibold">Card group</strong>
-        <AccordionGroup single>
-          <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>
-      </div>
-
-      <div>
-        <strong class="block mb-s text-semibold">Unstyled</strong>
-        <p class="mb-m">
-          In some cases, we need a fully custom animated component which hides content.
-        </p>
-        <Accordion class="mb-xl" unstyled>
-          <template #header>
-            <p>Open details</p>
-          </template>
-          <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>
-    </Grid>
-  </div>
-</template>

package/src/examples/ExampleAlerts.vue

@@ -1,78 +0,0 @@
-<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 y-center x-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

@@ -1,44 +0,0 @@
-<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>