@sewadah/selaras 0.3.0 → 0.3.2

package/dist/runtime/components/Tabs.d.vue.ts

@@ -15,6 +15,12 @@ export interface TabsProps {
     variant?: TabsVariants['variant'];
     defaultValue?: string;
     modelValue?: string;
+    /** Direction of the tab list and its keyboard navigation. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Unmount inactive panels. Set to false to preserve their content and local state. @default true */
+    unmountOnHide?: boolean;
+    /** Enables horizontal scrolling and overflow controls when the tabs do not fit. */
+    scrollable?: boolean;
     /** The active tab's text and underline accent. @default 'primary' */
     color?: ColorRole;
     ui?: UiProp<TabsThemeSlots>;
@@ -22,14 +28,48 @@ export interface TabsProps {
 export interface TabsEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_27: {
+declare function scrollLeft(): void;
+declare function scrollRight(): void;
+declare var __VLS_10: {
+    buttonProps: {
+        type: "button";
+        disabled: boolean;
+        'aria-label': string;
+        onClick: typeof scrollLeft;
+    };
+    scroll: typeof scrollLeft;
+    disabled: boolean;
+    ariaLabel: string;
+}, __VLS_19: {
+    class: unknown[];
+}, __VLS_43: {
     item: TabItem;
     index: number;
-}, __VLS_41: string, __VLS_42: {};
+}, __VLS_50: {
+    buttonProps: {
+        type: "button";
+        disabled: boolean;
+        'aria-label': string;
+        onClick: typeof scrollRight;
+    };
+    scroll: typeof scrollRight;
+    disabled: boolean;
+    ariaLabel: string;
+}, __VLS_59: {
+    class: unknown[];
+}, __VLS_73: string, __VLS_74: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+    [K in NonNullable<typeof __VLS_73>]?: (props: typeof __VLS_74) => any;
+} & {
+    'scroll-left'?: (props: typeof __VLS_10) => any;
+} & {
+    'scroll-left-icon'?: (props: typeof __VLS_19) => any;
+} & {
+    label?: (props: typeof __VLS_43) => any;
+} & {
+    'scroll-right'?: (props: typeof __VLS_50) => any;
 } & {
-    label?: (props: typeof __VLS_27) => any;
+    'scroll-right-icon'?: (props: typeof __VLS_59) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
-import { computed } from "vue";
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
 import { tabsTheme } from "../theme/tabs";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -11,19 +14,131 @@ const props = defineProps({
   variant: { type: null, required: false },
   defaultValue: { type: String, required: false },
   modelValue: { type: String, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  unmountOnHide: { type: Boolean, required: false, default: true },
+  scrollable: { type: Boolean, required: false },
   color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
-defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
 const theme = useComponentTheme("tabs", tabsTheme);
+const icons = useIcons();
+const messages = useMessages();
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const ui = computed(() => theme.value({ variant: props.variant, color: effectiveColor.value }));
+const horizontalScrollable = computed(() => props.scrollable && props.orientation === "horizontal");
+const ui = computed(() => theme.value({ variant: props.variant, color: effectiveColor.value, orientation: props.orientation, scrollable: horizontalScrollable.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const scrollRootProps = computed(() => resolveSlot(ui.value.scrollRoot, props.ui?.scrollRoot));
+const scrollViewportProps = computed(() => resolveSlot(ui.value.scrollViewport, props.ui?.scrollViewport));
+const scrollButtonProps = computed(() => resolveSlot(ui.value.scrollButton, props.ui?.scrollButton));
+const scrollIconProps = computed(() => resolveSlot(ui.value.scrollIcon, props.ui?.scrollIcon));
 const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
 const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
 const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const scrollRootEl = ref();
+const scrollViewportEl = ref();
+const hasOverflow = ref(false);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+const leftButtonProps = computed(() => ({
+  "type": "button",
+  "disabled": !canScrollLeft.value,
+  "aria-label": messages.value.scrollTabsLeft,
+  "onClick": scrollLeft
+}));
+const rightButtonProps = computed(() => ({
+  "type": "button",
+  "disabled": !canScrollRight.value,
+  "aria-label": messages.value.scrollTabsRight,
+  "onClick": scrollRight
+}));
+let resizeObserver;
+function tabList() {
+  return scrollViewportEl.value?.querySelector('[role="tablist"]');
+}
+function updateScrollState() {
+  const root = scrollRootEl.value;
+  const viewport = scrollViewportEl.value;
+  const list = tabList();
+  if (!horizontalScrollable.value || !root || !viewport || !list) {
+    hasOverflow.value = false;
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
+  }
+  hasOverflow.value = list.scrollWidth > root.clientWidth + 1;
+  const listRect = list.getBoundingClientRect();
+  const viewportRect = viewport.getBoundingClientRect();
+  canScrollLeft.value = hasOverflow.value && listRect.left < viewportRect.left - 1;
+  canScrollRight.value = hasOverflow.value && listRect.right > viewportRect.right + 1;
+}
+function scrollBehavior() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ? "auto" : "smooth";
+}
+function scrollTabs(direction) {
+  const viewport = scrollViewportEl.value;
+  if (!viewport)
+    return;
+  viewport.scrollBy({ left: direction * viewport.clientWidth * 0.8, behavior: scrollBehavior() });
+}
+function scrollLeft() {
+  scrollTabs(-1);
+}
+function scrollRight() {
+  scrollTabs(1);
+}
+function scrollActiveIntoView(behavior = "auto") {
+  if (!horizontalScrollable.value)
+    return;
+  const viewport = scrollViewportEl.value;
+  const active = tabList()?.querySelector('[role="tab"][data-state="active"]');
+  if (!viewport || !active)
+    return;
+  const viewportRect = viewport.getBoundingClientRect();
+  const activeRect = active.getBoundingClientRect();
+  const delta = activeRect.left < viewportRect.left ? activeRect.left - viewportRect.left : activeRect.right > viewportRect.right ? activeRect.right - viewportRect.right : 0;
+  if (delta)
+    viewport.scrollBy({ left: delta, behavior });
+}
+const instance = getCurrentInstance();
+const isControlled = () => Object.hasOwn(instance?.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance?.vnode.props ?? {}, "model-value");
+async function onValueChange(value) {
+  emit("update:modelValue", value);
+  if (isControlled())
+    return;
+  await nextTick();
+  scrollActiveIntoView(scrollBehavior());
+}
+function onResize() {
+  updateScrollState();
+  scrollActiveIntoView();
+}
+onMounted(async () => {
+  await nextTick();
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(onResize);
+    for (const element of [scrollRootEl.value, scrollViewportEl.value, tabList()]) {
+      if (element)
+        resizeObserver.observe(element);
+    }
+  }
+  window.addEventListener("resize", onResize);
+  onResize();
+});
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  window.removeEventListener("resize", onResize);
+});
+watch(() => props.modelValue, async () => {
+  await nextTick();
+  scrollActiveIntoView(scrollBehavior());
+});
+watch(horizontalScrollable, async () => {
+  await nextTick();
+  onResize();
+});
 function itemValue(item, index) {
   return item.value ?? String(index);
 }
@@ -33,25 +148,63 @@ function itemValue(item, index) {
   <TabsRoot
     :default-value="defaultValue"
     :model-value="modelValue"
+    :orientation="orientation"
+    :unmount-on-hide="unmountOnHide"
     :data-selaras-color="effectiveColor"
     v-bind="rootProps"
-    @update:model-value="(value) => $emit('update:modelValue', value)"
+    @update:model-value="(value) => onValueChange(value)"
   >
-    <TabsList v-bind="listProps">
-      <TabsTrigger
-        v-for="(item, index) in items"
-        :key="itemValue(item, index)"
-        :value="itemValue(item, index)"
-        :disabled="item.disabled"
-        v-bind="triggerProps"
+    <div ref="scrollRootEl" v-bind="scrollRootProps">
+      <slot
+        v-if="horizontalScrollable && hasOverflow"
+        name="scroll-left"
+        :button-props="leftButtonProps"
+        :scroll="scrollLeft"
+        :disabled="leftButtonProps.disabled"
+        :aria-label="leftButtonProps['aria-label']"
+      >
+        <Button variant="ghost" color="neutral" size="sm" square :ui="{ base: scrollButtonProps }" v-bind="leftButtonProps">
+          <template #icon="{ class: iconClass }">
+            <slot name="scroll-left-icon" :class="[iconClass, scrollIconProps.class]">
+              <Icon :name="icons.chevronLeft" aria-hidden="true" v-bind="scrollIconProps" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+      </slot>
+      <div ref="scrollViewportEl" v-bind="scrollViewportProps" @scroll="updateScrollState">
+        <TabsList v-bind="listProps">
+          <TabsTrigger
+            v-for="(item, index) in items"
+            :key="itemValue(item, index)"
+            :value="itemValue(item, index)"
+            :disabled="item.disabled"
+            v-bind="triggerProps"
+          >
+            <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
+            <slot name="label" :item="item" :index="index">
+              {{ item.label }}
+            </slot>
+          </TabsTrigger>
+          <TabsIndicator aria-hidden="true" v-bind="indicatorProps" />
+        </TabsList>
+      </div>
+      <slot
+        v-if="horizontalScrollable && hasOverflow"
+        name="scroll-right"
+        :button-props="rightButtonProps"
+        :scroll="scrollRight"
+        :disabled="rightButtonProps.disabled"
+        :aria-label="rightButtonProps['aria-label']"
       >
-        <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
-        <slot name="label" :item="item" :index="index">
-          {{ item.label }}
-        </slot>
-      </TabsTrigger>
-      <TabsIndicator aria-hidden="true" v-bind="indicatorProps" />
-    </TabsList>
+        <Button variant="ghost" color="neutral" size="sm" square :ui="{ base: scrollButtonProps }" v-bind="rightButtonProps">
+          <template #icon="{ class: iconClass }">
+            <slot name="scroll-right-icon" :class="[iconClass, scrollIconProps.class]">
+              <Icon :name="icons.chevronRight" aria-hidden="true" v-bind="scrollIconProps" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+      </slot>
+    </div>
     <TabsContent
       v-for="(item, index) in items"
       :key="itemValue(item, index)"

package/dist/runtime/components/Tabs.vue.d.ts

@@ -15,6 +15,12 @@ export interface TabsProps {
     variant?: TabsVariants['variant'];
     defaultValue?: string;
     modelValue?: string;
+    /** Direction of the tab list and its keyboard navigation. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Unmount inactive panels. Set to false to preserve their content and local state. @default true */
+    unmountOnHide?: boolean;
+    /** Enables horizontal scrolling and overflow controls when the tabs do not fit. */
+    scrollable?: boolean;
     /** The active tab's text and underline accent. @default 'primary' */
     color?: ColorRole;
     ui?: UiProp<TabsThemeSlots>;
@@ -22,14 +28,48 @@ export interface TabsProps {
 export interface TabsEmits {
     'update:modelValue': [value: string];
 }
-declare var __VLS_27: {
+declare function scrollLeft(): void;
+declare function scrollRight(): void;
+declare var __VLS_10: {
+    buttonProps: {
+        type: "button";
+        disabled: boolean;
+        'aria-label': string;
+        onClick: typeof scrollLeft;
+    };
+    scroll: typeof scrollLeft;
+    disabled: boolean;
+    ariaLabel: string;
+}, __VLS_19: {
+    class: unknown[];
+}, __VLS_43: {
     item: TabItem;
     index: number;
-}, __VLS_41: string, __VLS_42: {};
+}, __VLS_50: {
+    buttonProps: {
+        type: "button";
+        disabled: boolean;
+        'aria-label': string;
+        onClick: typeof scrollRight;
+    };
+    scroll: typeof scrollRight;
+    disabled: boolean;
+    ariaLabel: string;
+}, __VLS_59: {
+    class: unknown[];
+}, __VLS_73: string, __VLS_74: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+    [K in NonNullable<typeof __VLS_73>]?: (props: typeof __VLS_74) => any;
+} & {
+    'scroll-left'?: (props: typeof __VLS_10) => any;
+} & {
+    'scroll-left-icon'?: (props: typeof __VLS_19) => any;
+} & {
+    label?: (props: typeof __VLS_43) => any;
+} & {
+    'scroll-right'?: (props: typeof __VLS_50) => any;
 } & {
-    label?: (props: typeof __VLS_27) => any;
+    'scroll-right-icon'?: (props: typeof __VLS_59) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/runtime/components/Textarea.vue

@@ -29,6 +29,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const field = useFormField();
+const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const textareaId = computed(() => props.id ?? field?.id);
 const textareaInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
@@ -78,7 +79,7 @@ watch(() => props.modelValue, resize);
 </script>
 
 <template>
-  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
+  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" :data-selaras-field-leading="icon ? '' : void 0" v-bind="rootProps">
     <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <textarea
       :id="textareaId"
@@ -86,7 +87,7 @@ watch(() => props.modelValue, resize);
       data-ui-group-item
       :value="modelValue"
       :name="name ?? field?.name"
-      :placeholder="placeholder"
+      :placeholder="effectivePlaceholder"
       :rows="rows"
       :disabled="disabled"
       :aria-invalid="textareaInvalid || void 0"

package/dist/runtime/components/Timeline.d.vue.ts

@@ -0,0 +1,19 @@
+import type { TimelineItem, TimelineProps, TimelineSlots } from '../utils/timeline-contracts.js';
+declare const __VLS_export: <Item extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TimelineProps<Item>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<Item>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Timeline.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from "vue";
+import { timelineTheme } from "../theme/timeline";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  orientation: { type: String, required: false, default: "vertical" },
+  align: { type: String, required: false, default: "start" },
+  size: { type: String, required: false, default: "md" },
+  color: { type: null, required: false, default: "primary" },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const theme = useComponentTheme("timeline", timelineTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color, "primary"));
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  align: props.align,
+  size: props.size,
+  color: effectiveColor.value
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const isHorizontal = computed(() => props.orientation === "horizontal");
+const slotProps = (item, index) => ({ item, index });
+function itemUi(item, slot) {
+  return resolveSlot(ui.value[slot], item.ui?.[slot] ?? props.ui?.[slot]);
+}
+function contentPlacement(index) {
+  if (props.align !== "alternate")
+    return void 0;
+  if (isHorizontal.value)
+    return applyClassPrefix(index % 2 === 0 ? "row-start-1" : "row-start-3");
+  return applyClassPrefix(index % 2 === 0 ? "col-start-3 text-start" : "col-start-1 text-end");
+}
+</script>
+
+<template>
+  <ol
+    :data-selaras-color="effectiveColor"
+    :data-orientation="orientation"
+    :data-align="align"
+    v-bind="rootProps"
+  >
+    <li
+      v-for="(item, index) in items"
+      :key="item.id ?? index"
+      :data-selaras-color="resolveRegisteredColorRole(item.color ?? color, 'primary')"
+      :class="item.class"
+      v-bind="itemUi(item, 'item')"
+    >
+      <div v-bind="itemUi(item, 'track')">
+        <span
+          aria-hidden="true"
+          :data-marker-type="item.icon ? 'icon' : $slots.marker ? 'custom' : 'dot'"
+          v-bind="itemUi(item, 'marker')"
+        >
+          <slot name="marker" v-bind="slotProps(item, index)">
+            <Icon v-if="item.icon" :name="item.icon" v-bind="itemUi(item, 'icon')" />
+          </slot>
+        </span>
+        <template v-if="index < items.length - 1">
+          <span aria-hidden="true" v-bind="itemUi(item, 'connector')">
+            <slot name="connector" v-bind="slotProps(item, index)" />
+          </span>
+        </template>
+      </div>
+
+      <div v-if="item.slot && $slots[item.slot]" :class="contentPlacement(index)" v-bind="itemUi(item, 'content')">
+        <slot :name="item.slot" v-bind="slotProps(item, index)" />
+      </div>
+      <slot v-else-if="$slots.item" name="item" v-bind="slotProps(item, index)" />
+      <div v-else :class="contentPlacement(index)" v-bind="itemUi(item, 'content')">
+        <slot name="content" v-bind="slotProps(item, index)">
+          <div v-if="item.date || $slots.date" v-bind="itemUi(item, 'date')">
+            <slot name="date" v-bind="slotProps(item, index)">
+              <time v-if="item.datetime" :datetime="item.datetime">{{ item.date }}</time>
+              <template v-else>
+                {{ item.date }}
+              </template>
+            </slot>
+          </div>
+          <div v-if="item.title || $slots.title" v-bind="itemUi(item, 'title')">
+            <slot name="title" v-bind="slotProps(item, index)">
+              {{ item.title }}
+            </slot>
+          </div>
+          <div v-if="item.description || $slots.description" v-bind="itemUi(item, 'description')">
+            <slot name="description" v-bind="slotProps(item, index)">
+              {{ item.description }}
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </li>
+  </ol>
+</template>

package/dist/runtime/components/Timeline.vue.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineItem, TimelineProps, TimelineSlots } from '../utils/timeline-contracts.js';
+declare const __VLS_export: <Item extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TimelineProps<Item>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<Item>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Toast.d.vue.ts

@@ -1,6 +1,15 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition as ToastPositionType, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
+export type ToastPosition = ToastPositionType;
 export interface ToastProps {
+    /** Where the toast viewport is pinned. @default 'bottom-right' */
+    position?: ToastPositionType;
+    /** Shows every toast separately instead of layering them into a stack that fans open on hover. @default false */
+    expand?: boolean;
+    /** Default visibility time in milliseconds; a toast's own duration takes precedence. @default 5000 */
+    duration?: number;
+    /** Maximum number of toasts shown at once; older toasts are removed when the limit is reached. @default 5 */
+    max?: number;
     ui?: UiProp<ToastThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Toast.vue

@@ -1,30 +1,116 @@
 <script setup>
 import { ToastPortal, ToastViewport } from "reka-ui";
-import { computed, onUnmounted } from "vue";
+import { computed, onUnmounted, ref, watch } from "vue";
 import { useToastService } from "../internal/programmatic-services";
 import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
+import { FALLBACK_TOAST_HEIGHT, layoutToastStack, placeToast, TOAST_EXIT_DURATION } from "../internal/toast-stack";
 import ToastItemRenderer from "../internal/ToastItemRenderer.vue";
 import { toastTheme } from "../theme/toast";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 const props = defineProps({
+  position: { type: null, required: false },
+  expand: { type: Boolean, required: false, default: false },
+  duration: { type: Number, required: false, default: 5e3 },
+  max: { type: Number, required: false, default: 5 },
   ui: { type: Object, required: false }
 });
-const { toasts, remove, dispose } = useToastService();
+const { toasts, remove, setMax, dispose } = useToastService();
 const theme = useComponentTheme("toast", toastTheme);
-const ui = computed(() => theme.value());
-const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
-onUnmounted(dispose);
+const position = computed(() => props.position ?? "bottom-right");
+const lift = computed(() => position.value.startsWith("top") ? 1 : -1);
+const hovered = ref(false);
+const focused = ref(false);
+const expanded = computed(() => props.expand || hovered.value || focused.value);
+const ui = computed(() => theme.value({ position: position.value, expand: expanded.value }));
+const rendered = ref([]);
+const toastHeights = ref(/* @__PURE__ */ new Map());
+const leaving = ref(/* @__PURE__ */ new Set());
+const exitTimers = /* @__PURE__ */ new Map();
+watch(() => [...toasts.value], (queued) => {
+  const queuedIds = new Set(queued.map((toast) => toast.id));
+  const departing = rendered.value.filter((toast) => !queuedIds.has(toast.id));
+  if (departing.length) {
+    const next = new Set(leaving.value);
+    for (const toast of departing) {
+      next.add(toast.id);
+      if (!exitTimers.has(toast.id))
+        exitTimers.set(toast.id, setTimeout(finishExit, TOAST_EXIT_DURATION, toast.id));
+    }
+    leaving.value = next;
+  }
+  rendered.value = [...queued, ...departing].sort((a, b) => a.id - b.id);
+}, { immediate: true });
+function finishExit(id) {
+  exitTimers.delete(id);
+  rendered.value = rendered.value.filter((toast) => toast.id !== id);
+  const next = new Set(leaving.value);
+  next.delete(id);
+  leaving.value = next;
+  const heights = new Map(toastHeights.value);
+  heights.delete(id);
+  toastHeights.value = heights;
+}
+const stacked = computed(() => rendered.value.filter((toast) => !leaving.value.has(toast.id)).reverse());
+const layout = computed(() => layoutToastStack(
+  stacked.value.map((toast) => toastHeights.value.get(toast.id) ?? FALLBACK_TOAST_HEIGHT),
+  expanded.value
+));
+const placements = computed(() => {
+  const byId = /* @__PURE__ */ new Map();
+  stacked.value.forEach((toast, index) => byId.set(toast.id, placeToast(index, layout.value, expanded.value, lift.value)));
+  return byId;
+});
+const viewportProps = computed(() => {
+  const resolved = resolveSlot(ui.value.viewport, props.ui?.viewport);
+  const height = layout.value.height ? { height: `calc(${layout.value.height}px + 2rem)` } : void 0;
+  return { ...resolved, style: [height, resolved.style] };
+});
+function updateToastHeight(id, height) {
+  if (!Number.isFinite(height) || height <= 0 || toastHeights.value.get(id) === height)
+    return;
+  const next = new Map(toastHeights.value);
+  next.set(id, height);
+  toastHeights.value = next;
+}
+function onFocusOut(event) {
+  const viewport = event.currentTarget;
+  if (!viewport?.contains(event.relatedTarget))
+    focused.value = false;
+}
+watch(() => props.max, setMax, { immediate: true });
+onUnmounted(() => {
+  for (const timer of exitTimers.values())
+    clearTimeout(timer);
+  exitTimers.clear();
+  dispose();
+});
 </script>
 
 <template>
   <ProgrammaticTheme
-    v-for="toast in toasts"
+    v-for="toast in rendered"
     :key="toast.id"
     :snapshot="toast._theme"
   >
-    <ToastItemRenderer :toast="toast" :ui="props.ui" @remove="remove" />
+    <ToastItemRenderer
+      :toast="toast"
+      :ui="props.ui"
+      :duration="props.duration"
+      :expand="expanded"
+      :position="position"
+      :placement="placements.get(toast.id)"
+      :leaving="leaving.has(toast.id)"
+      @remove="remove"
+      @resize="updateToastHeight(toast.id, $event)"
+    />
   </ProgrammaticTheme>
   <ToastPortal>
-    <ToastViewport v-bind="viewportProps" />
+    <ToastViewport
+      v-bind="viewportProps"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+      @focusin="focused = true"
+      @focusout="onFocusOut"
+    />
   </ToastPortal>
 </template>