@dolanske/vui 1.0.4 → 1.1.1

package/src/components/Tabs/Tabs.vue

@@ -1,90 +1,90 @@
-<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 './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.label"
-      :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" />
-    </Transition>
-  </div>
-</template>
+<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 './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.label"
+      :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" />
+    </Transition>
+  </div>
+</template>

package/src/components/Tabs/tabs.scss

@@ -1,87 +1,87 @@
-.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-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);
-  }
-}
+.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-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 +1,52 @@
-<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>
+<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 +1,45 @@
-.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);
-        }
-      }
-    }
-  }
-}
+.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);
+        }
+      }
+    }
+  }
+}