@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Tabs/Tabs.vue

@@ -1,82 +1,89 @@
-<script setup lang="ts">
-import type { TabProps } from './Tab.vue'
-import { useEventListener } from '@vueuse/core'
-import { onMounted, useTemplateRef, type VNode, watch } from 'vue'
-import './tabs.scss'
-
-interface Props {
-  variant?: 'default' | 'filled'
-  expand?: boolean
-  disabled?: boolean
-}
-
-const {
-  expand,
-  disabled,
-  variant = 'default',
-} = defineProps<Props>()
-
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: TabProps }>
-}>()
-
-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(() => {
-  useEventListener(window, 'resize', computeUnderlinePosition)
-
-  watch(
-    [active, () => expand],
-    computeUnderlinePosition,
-    {
-      immediate: true,
-      flush: 'post',
-    },
-  )
-})
-</script>
-
-<template>
-  <div
-    ref="tabs"
-    class="vui-tabs"
-    role="tablist"
-    :class="[
-      { expand, disabled },
-      variant === 'default'
-        ? ''
-        : `vui-tabs-variant-${variant}`,
-    ]"
-  >
-    <Component
-      :is="vnode"
-      v-for="vnode of slots.default()"
-      :key="vnode.props.id"
-      :class="{ active: vnode.props.id === active }"
-      @click="active = vnode.props.id"
-    />
-
-    <Transition name="fade" appear>
-      <div ref="underline" class="vui-tab-underline" />
-    </Transition>
-  </div>
-</template>
+<script setup lang="ts">
+import type { TabProps } from './Tab.vue'
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, useTemplateRef, type VNode, watch } from 'vue'
+import './tabs.scss'
+
+interface Props {
+  variant?: 'default' | 'filled'
+  expand?: boolean
+  disabled?: boolean
+}
+
+const {
+  expand,
+  disabled,
+  variant = 'default',
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & { props: TabProps }>
+  start: unknown
+  end: unknown
+}>()
+
+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',
+    },
+  )
+})
+</script>
+
+<template>
+  <div
+    ref="tabs"
+    class="vui-tabs"
+    role="tablist"
+    :class="[
+      { expand, disabled },
+      variant === 'default'
+        ? ''
+        : `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"
+    />
+    <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" />
+    </Transition>
+  </div>
+</template>

package/src/components/Tabs/tabs.scss

@@ -1,79 +1,80 @@
-.vui-tabs {
-  display: flex;
-  width: 100%;
-  gap: 4px;
-  border-bottom: 1px solid var(--color-border);
-  position: relative;
-
-  &.vui-tabs-variant-filled {
-    background-color: var(--color-bg-raised);
-    border-bottom: none;
-    z-index: 1;
-    border-radius: var(--border-radius-m);
-    padding-inline: 4px;
-
-    .vui-tab-underline {
-      border-bottom: none;
-      background-color: var(--color-bg-lowered);
-      top: 4px;
-      bottom: 4px;
-      z-index: -1;
-      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-ms);
-    position: relative;
-    color: var(--color-text-light);
-    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: 1px solid var(--color-text);
-    position: absolute;
-    bottom: 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: 1;
+    border-radius: var(--border-radius-m);
+    padding-inline: 4px;
+
+    .vui-tab-underline {
+      border-bottom: none;
+      background-color: var(--color-bg-lowered);
+      top: 4px;
+      bottom: 4px;
+      z-index: -1;
+      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-ms);
+    position: relative;
+    color: var(--color-text-light);
+    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: 1px solid var(--color-text);
+    position: absolute;
+    bottom: 0;
+  }
+}

package/src/components/Toast/Toasts.vue

@@ -1,47 +1,47 @@
-<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>
-          </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>
+<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>
+          </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,41 +1,41 @@
-.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) var(--space-s);
-      background-color: var(--color-bg);
-      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);
-        }
-
-        p {
-          color: var(--color-text-lighter);
-          font-size: var(--font-size-s);
-        }
-      }
-    }
-  }
-}
+.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) var(--space-s);
+      background-color: var(--color-bg);
+      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);
+        }
+
+        p {
+          color: var(--color-text-lighter);
+          font-size: var(--font-size-s);
+        }
+      }
+    }
+  }
+}

package/src/components/Toast/toast.ts

@@ -1,68 +1,68 @@
-import { ref } from 'vue'
-
-interface ToastAction {
-  label: string
-  handler: (toastId: number) => void
-}
-
-interface ToastOptions {
-  persist?: boolean
-  timeout?: number
-  action?: ToastAction
-  description?: string
-}
-
-interface Toast {
-  id: number
-  // type: ToastType
-  title: string
-  action?: ToastAction
-  createdAt: number
-  expiresAt: number
-  description?: string
-}
-
-// 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,
-  }
-
-  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)
-}
+import { ref } from 'vue'
+
+interface ToastAction {
+  label: string
+  handler: (toastId: number) => void
+}
+
+interface ToastOptions {
+  persist?: boolean
+  timeout?: number
+  action?: ToastAction
+  description?: string
+}
+
+interface Toast {
+  id: number
+  // type: ToastType
+  title: string
+  action?: ToastAction
+  createdAt: number
+  expiresAt: number
+  description?: string
+}
+
+// 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,
+  }
+
+  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)
+}