@livestorm/ui-vue 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -34,54 +34,59 @@
     "style.js"
   ],
   "dependencies": {
+    "@livestorm/ui-icons": "^4.0.0",
+    "@livestorm/ui-tokens": "^4.0.0",
     "@lottiefiles/dotlottie-vue": "^0.11.16",
     "@tanstack/vue-form": "^1.33.0",
+    "@tanstack/vue-table": "^9.1.2",
     "@vueuse/core": "^14.3.0",
+    "culori": "^4.0.2",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-vue": "^8.6.0",
     "i18next": "^26.3.4",
+    "inter-ui": "^4.1.1",
     "mitt": "^3.0.1",
     "reka-ui": "^2.9.10",
-    "vue-frimousse": "^0.1.4",
-    "@livestorm/ui-tokens": "^3.0.0",
-    "@livestorm/ui-icons": "^3.0.0"
+    "vaul-vue": "^0.4.1",
+    "vue-frimousse": "^0.1.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@iconify-json/ph": "^1.2.2",
     "@iconify/utils": "^3.1.4",
-    "@storybook/addon-a11y": "^10.5.5",
+    "@livestorm/dev-utils": "1.0.0",
+    "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-coverage": "^3.0.2",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.5",
-    "@storybook/addon-links": "^10.5.5",
-    "@storybook/addon-themes": "^10.5.5",
-    "@storybook/addon-vitest": "^10.5.5",
-    "@storybook/vue3-vite": "^10.5.5",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/vue3-vite": "^10.6.0",
     "@tailwindcss/vite": "^4.3.2",
+    "@types/culori": "^4.0.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
-    "@vitest/browser": "^4.1.9",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/coverage-v8": "^4.1.9",
-    "@vitest/ui": "^4.1.9",
+    "@vitest/browser": "^5.0.1",
+    "@vitest/browser-playwright": "^5.0.1",
+    "@vitest/coverage-v8": "^5.0.1",
+    "@vitest/ui": "^5.0.1",
     "@vue/test-utils": "^2.4.11",
-    "chromatic": "^18.1.0",
+    "chromatic": "^18.7.2",
     "eslint": "^9.39.4",
     "eslint-plugin-storybook": "^10.5.5",
     "happy-dom": "^20.10.6",
     "playwright": "^1.61.1",
-    "storybook": "^10.5.5",
+    "storybook": "^10.6.0",
     "tailwindcss": "^4.3.2",
     "typescript": "^6.0.3",
-    "vite": "^7.3.6",
-    "vitest": "^4.1.9",
-    "vitest-browser-vue": "^2.1.0",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.1",
+    "vitest-browser-vue": "^3.1.0",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.8",
-    "@livestorm/dev-utils": "1.0.0"
+    "vue-tsc": "^3.3.8"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",

package/src/components/Toast/LayoutToasts.vue

@@ -2,7 +2,7 @@
 import { computed, getCurrentInstance } from 'vue'
 import type { ResponsiveGlobalComponentProperty } from '../../utils/responsive.types'
 import { useResponsive } from '../../utils/responsive'
-import { useToasts, type ToastOptions } from './toastDSV2'
+import { MAX_ITEMS_DISPLAYED, useToasts } from './toastDSV2'
 import ToastMessage from './ToastMessage.vue'
 
 const app = getCurrentInstance()
@@ -13,11 +13,13 @@ if (!app) {
 // back to the shared singleton so no plugin registration is required.
 const responsive = computed(() => (app.appContext.config.globalProperties.$responsive ?? useResponsive()) as ResponsiveGlobalComponentProperty)
 
-const MAX_ITEMS_DISPLAYED = 3
+const { toasts, closeToast, cancelCloseTimer, restartToast } = useToasts()
 
-const { toasts, closeToast, cancelCloseTimer, openToast } = useToasts()
+const visible = computed(() => toasts.value.slice(0, MAX_ITEMS_DISPLAYED))
 
-const hasLockedToast = computed(() => toasts.value.some(toast => toast.locked))
+// Read off the visible window, not the queue: a locked toast waiting its turn
+// would otherwise raise the blocking overlay with nothing on screen to act on.
+const hasLockedToast = computed(() => visible.value.some(toast => toast.options.locked))
 
 function onBeforeLeave (el: Element) {
   const bounds = el.getBoundingClientRect()
@@ -37,27 +39,33 @@ function onBeforeLeave (el: Element) {
     <div
       v-if="hasLockedToast"
       data-testid="layout-toasts-locked"
-      class="bg-alpha-black-300 fixed inset-0 z-[8000]"
+      class="bg-alpha-black-300 fixed inset-0 z-blocking"
     />
   </transition>
+  <!-- The live region is the container, not the toast: it has to be in the DOM
+       before a toast is inserted for the insertion to be announced. Atomic is
+       off so only the new toast is read out, not the whole stack again. -->
   <TransitionGroup
     name="list"
     tag="div"
-    :class="!responsive?.mobile ? 'm-8 max-w-md w-full' : 'm-4 right-0'"
-    class="fixed left-0 bottom-0 flex flex-col gap-2 z-max"
+    role="status"
+    aria-live="polite"
+    aria-atomic="false"
+    :class="!responsive?.mobile ? 'm-8 max-w-md w-full left-0 supports-[left:anchor(--a_right)]:left-[anchor(--ui-shell-side-menu_right,0px)]' : 'm-4 left-0 right-0'"
+    class="fixed bottom-0 flex flex-col gap-2 z-max [view-transition-name:layout-toasts]"
     @before-leave="onBeforeLeave"
   >
     <div
-      v-for="item of toasts.slice(0, MAX_ITEMS_DISPLAYED)"
+      v-for="item of visible"
       :key="item.id"
       class="w-full sm:max-w-[400px]"
     >
       <ToastMessage
-        v-bind="item"
-        class="bg-surface-neutral-bg-main p-3 rounded-2xl"
+        v-bind="item.options"
+        :timer-started-at="item.timerStartedAt"
         @close="closeToast(item.id)"
         @mouseenter="cancelCloseTimer(item.id)"
-        @mouseleave="item.time ? openToast({ id: item.id } as ToastOptions) : null"
+        @mouseleave="restartToast(item.id)"
         @confirm="item.confirmEventHook.trigger(undefined)"
         @cancel="item.cancelEventHook.trigger(undefined)"
       />

package/src/components/Toast/ToastMessage.vue

@@ -1,20 +1,44 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
-// * The explicit import here helps the Storybook
-// * but prevents the frontend from UiButton.
-// * We either have the frontend app working or the Storybook working.
-// import UiButton from '../UiButton/UiButton.vue'
+import { computed, ref, watch } from 'vue'
+import UiAvatar from '../UiAvatar/UiAvatar.vue'
+import UiButton from '../UiButton/UiButton.vue'
 
-import type { ToastOptions } from './toastDSV2'
-import useThemeAndModes from '../../composables/useThemeAndModes'
+import type { ToastBaseOptions } from './toastDSV2'
+import type { ThemeColorType } from '../../theme'
+import type { ButtonColor } from '../../composables/useButtonStyles'
 
-type ToastMessageProps = Partial<ToastOptions>
+// The alerting type tints the primary action and the progress fill alike.
+const ACTION_COLOR: Record<ThemeColorType, ButtonColor> = {
+  info: 'primary',
+  alert: 'error',
+  warning: 'warning',
+  success: 'success',
+}
+
+// Tailwind's extractor can't see interpolated class names, so this holds
+// complete literals rather than building `bg-actions-${x}-idle` at runtime.
+const PROGRESS_BG: Record<ThemeColorType, string> = {
+  info: 'bg-actions-primary-idle',
+  alert: 'bg-actions-danger-idle',
+  warning: 'bg-actions-warning-idle',
+  success: 'bg-actions-success-idle',
+}
+
+type ToastMessageProps = Partial<ToastBaseOptions> & {
+  /**
+   * When the store started the current run of the close timer, so the bar can
+   * animate again. Not a caller-facing option — `LayoutToasts` passes it.
+   */
+  timerStartedAt?: number
+}
 
 const props = withDefaults(defineProps<ToastMessageProps>(), {
   type: 'info',
   locked: false,
   closable: true,
+  actionsSize: 'md',
   confirmHrefTarget: '_blank',
+  timerStartedAt: undefined,
 })
 
 const emit = defineEmits([
@@ -43,127 +67,158 @@ const modalIcon = computed(() => {
   }
 })
 
+const testId = computed(() => `toast-message-${String(props.id)}`)
+
+// Only a plain href can be targeted: a `confirmTo` route resolves in the app.
+const confirmTarget = computed(() => (props.confirmHref ? props.confirmHrefTarget : undefined))
+
+const hasMessage = computed(() => Boolean(props.message || props.messageComponent))
+// A component may render block content, so it gets a block wrapper. Text
+// without a title is the headline, so it takes the title's tag and styling.
+const messageTag = computed(() => (props.messageComponent ? 'div' : (props.title ? 'p' : 'span')))
+const messageClass = computed(() => (props.title
+  ? 'text-content-text-md-medium text-text-neutral-secondary'
+  : 'text-content-text-md-bold text-text-neutral-base'))
+
+const confirmButtonColor = computed(() => ACTION_COLOR[props.confirmColor ?? props.type])
+const progressBarColor = computed(() => PROGRESS_BG[props.type])
+
 const startTimer = ref(false)
 const hovered = ref(false)
 
-const enableProgressBar = computed(() => props.progessIndeterminate || (props.time && ['success', 'info'].includes(props.type)))
+const enableProgressBar = computed(() => props.progressIndeterminate || Boolean(props.time))
 
-function onMouseleave () {
-  hovered.value = false
-  emit('mouseleave')
+function playProgressBar () {
+  if (!props.time) return
 
-  // Reset the progress bar animation
-  if (props.time) {
-    startTimer.value = false
+  startTimer.value = false
 
-    setTimeout(() => {
-      startTimer.value = true
-    }, 100)
-  }
-}
-
-if (props.time) {
-  // The delay is used to trigger the CSS transition
+  // The delay is what lets the CSS transition start over from zero.
   setTimeout(() => {
     startTimer.value = true
   }, 100)
 }
 
-const Toast = ref<HTMLElement | undefined>()
-const { addElementToWatch } = useThemeAndModes()
-onMounted(() => {
-  if (Toast.value) {
-    addElementToWatch(
-      'content',
-      {
-        selector: '[data-name="ui-toast-message"]',
-        element: Toast.value,
-        modeOverride: 'light',
-      })
-  }
-})
+// Every restart the store performs, including the one LayoutToasts asks for
+// when the pointer leaves.
+watch(() => props.timerStartedAt, playProgressBar)
+
+function onMouseleave () {
+  hovered.value = false
+  emit('mouseleave')
+
+  // Rendered on its own there is no store to restart the bar for us.
+  if (props.timerStartedAt === undefined) playProgressBar()
+}
+
+playProgressBar()
 </script>
 
 <template>
   <div
-    class=" relative grid grid-flow-col grid-rows-[auto_auto_auto] sm:grid-rows-1 sm:grid-cols-[auto_1fr_auto] items-start p-4 bg-surface-neutral-bg-main shadow-shadows-drop-shadow-lg rounded-xl gap-x-0 overflow-hidden"
-    :data-testid="`toast-message-${String(id)}`"
+    class=" relative grid grid-flow-col grid-rows-[auto_auto_auto] sm:grid-rows-1 sm:grid-cols-[auto_1fr_auto] items-start p-4 bg-surface-neutral-bg-main shadow-shadows-drop-shadow-2xl rounded-container gap-x-0 overflow-hidden"
+    :data-testid="testId"
     data-colors-semantic="light"
     data-name="ui-toast-message"
     @mouseenter="hovered = true, emit('mouseenter')"
     @mouseleave="onMouseleave"
   >
+    <!-- Sits in the text column, not the icon one, so the actions below stay
+         aligned with the content instead of being pushed into the gap. -->
     <div
       v-if="props.component"
-      ref="Toast"
-      class="flex-1 min-w-0"
+      class="flex-1 min-w-0 sm:col-start-2"
     >
       <component
-        :is="{...props.component}"
+        :is="props.component"
         v-bind="props.componentProps"
       />
     </div>
     <template v-else>
-      <!-- TODO: handle DSV2 tokens -->
       <template v-if="enableProgressBar">
         <div
           v-if="time"
-          ref="Toast"
-          class="absolute opacity-100 transition-opacity duration-300 h-1 bg-grey-100 top-0 left-0 w-full"
+          class="absolute opacity-100 transition-opacity duration-150 h-1 bg-actions-neutral-idle-alpha-light top-0 left-0 w-full"
           :class="{
             'opacity-0!': hovered
           }"
         >
           <div
             v-if="time"
+            data-testid="toast-progress"
             class="h-full w-0 ease-linear duration-1000"
-            :class="[startTimer ? 'w-full transition-all': 'transition-none', {
-              'bg-green-600': props.type === 'success',
-              'bg-livestorm-600': props.type === 'info'
-            }]"
+            :class="[startTimer ? 'w-full transition-all': 'transition-none', progressBarColor]"
             :style="{
               transitionDuration: `${(props.time as number)/1000}s`
             }"
           />
         </div>
         <div
-          v-else-if="props.progessIndeterminate"
-          class="absolute h-1 bg-grey-100 top-0 left-0 w-full"
+          v-else-if="props.progressIndeterminate"
+          class="absolute h-1 bg-actions-neutral-idle-alpha-light top-0 left-0 w-full"
         >
-          <div class="animate-progress-indeterminate w-full h-full bg-red-600 origin-left-right" />
+          <div
+            class="animate-progress-indeterminate w-full h-full origin-left-right"
+            :class="progressBarColor"
+          />
         </div>
       </template>
 
-      <div class="shrink-0">
+      <!-- The 2px inset mirrors the icon-container padding in Figma, which
+           optically centres the glyph against the title's cap height. The
+           avatar is its own 24px box in the design and sits flush instead. -->
+      <div
+        class="shrink-0"
+        :class="{ 'pl-0.5 pt-0.5': !props.avatar }"
+      >
+        <UiAvatar
+          v-if="props.avatar"
+          v-bind="props.avatar"
+          size="xs"
+          class="mr-3 mb-2 sm:mb-0"
+        />
         <div
-          v-if="modalIcon"
-          class="size-5 mr-3 shrink-0 mb-2 sm:mb-0"
+          v-else-if="modalIcon"
+          class="size-4 mr-3 shrink-0 mb-2 sm:mb-0"
           :class="modalIcon"
         />
       </div>
       <div class="flex flex-col flex-1 sm:row-start-1 min-w-0 wrap-break-word">
         <span
-          v-if="props.title || props.message"
+          v-if="props.title"
           class="text-content-text-md-bold text-text-neutral-base"
-        >{{ props.title || props.message }}</span>
-        <p
-          v-if="props.title && props.message"
-          class="text-content-text-md-regular"
+        >{{ props.title }}</span>
+        <component
+          :is="messageTag"
+          v-if="hasMessage"
+          :class="messageClass"
         >
-          {{ props.message }}
-        </p>
+          <component
+            :is="props.messageComponent"
+            v-if="props.messageComponent"
+            v-bind="props.messageComponentProps"
+          />
+          <template v-else>
+            {{ props.message }}
+          </template>
+        </component>
         <p
           v-if="props.info"
-          class="text-content-text-md-regular text-text-neutral-subtle mt-1"
+          class="text-content-text-md-medium text-text-neutral-secondary mt-1"
         >
           {{ props.info }}
         </p>
       </div>
     </template>
 
-    <div class="row-start-1 h-4 w-8 justify-self-end">
+    <!-- The wrapper carries the condition, not the button: it is the grid's
+         third track, so leaving it behind would reserve its width for nothing
+         and squeeze the text column on a locked toast. -->
+    <div
+      v-if="!props.locked && props.closable"
+      class="row-start-1 sm:col-start-3 h-4 w-8 justify-self-end"
+    >
       <UiButton
-        v-if="!props.locked && props.closable"
         :data-testid="`toast-close-${String(props.id)}`"
         color="neutral"
         variant="tertiary"
@@ -184,9 +239,10 @@ onMounted(() => {
         v-if="props.confirmLabel"
         :href="props.confirmHref"
         :to="props.confirmTo"
-        :target="props.confirmHrefTarget"
+        :target="confirmTarget"
         :icon="props.confirmIcon"
-        color="primary"
+        :color="confirmButtonColor"
+        :size="props.actionsSize"
         variant="cta"
         class="w-full sm:w-auto"
         @click="$emit('confirm', $event)"
@@ -196,8 +252,9 @@ onMounted(() => {
 
       <UiButton
         v-if="props.cancelLabel"
-        color="neutral-invert"
-        variant="cta"
+        color="neutral"
+        variant="secondary"
+        :size="props.actionsSize"
         class="w-full sm:w-auto"
         @click="$emit('cancel')"
       >