@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/Toast/LayoutToasts.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
+import type { ResponsiveGlobalComponentProperty } from '../../utils/responsive.types'
+import { useToasts, type ToastOptions } from './toastDSV2'
+import ToastMessage from './ToastMessage.vue'
+
+const app = getCurrentInstance()
+if (!app) {
+  throw new Error('No current instance found')
+}
+const responsive = computed(() => app.appContext.config.globalProperties.$responsive as ResponsiveGlobalComponentProperty)
+
+const MAX_ITEMS_DISPLAYED = 3
+
+const { toasts, closeToast, cancelCloseTimer, openToast } = useToasts()
+
+const hasLockedToast = computed(() => toasts.value.some(toast => toast.locked))
+
+function onBeforeLeave (el: Element) {
+  const bounds = el.getBoundingClientRect()
+  const { style } = el as HTMLElement
+  style.top = `${bounds.top}px`
+  style.left = `${bounds.left}px`
+  style.width = `${bounds.width}px`
+  style.height = `${bounds.height}px`
+}
+</script>
+
+<template>
+  <transition
+    :duration="200"
+    appear
+  >
+    <div
+      v-if="hasLockedToast"
+      data-testid="layout-toasts-locked"
+      class="bg-alpha-black-300 fixed inset-0 z-[8000]"
+    />
+  </transition>
+  <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"
+    @before-leave="onBeforeLeave"
+  >
+    <div
+      v-for="item of toasts.slice(0, MAX_ITEMS_DISPLAYED)"
+      :key="item.id"
+      class="w-full sm:max-w-[400px]"
+    >
+      <ToastMessage
+        v-bind="item"
+        class="bg-surface-neutral-bg-main p-3 rounded-2xl"
+        @close="closeToast(item.id)"
+        @mouseenter="cancelCloseTimer(item.id)"
+        @mouseleave="item.time ? openToast({ id: item.id } as ToastOptions) : null"
+        @confirm="item.confirmEventHook.trigger(undefined)"
+        @cancel="item.cancelEventHook.trigger(undefined)"
+      />
+    </div>
+  </TransitionGroup>
+</template>

package/src/components/Toast/ToastMessage.vue

@@ -0,0 +1,208 @@
+<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 type { ToastOptions } from './toastDSV2'
+import useThemeAndModes from '../../composables/useThemeAndModes'
+
+type ToastMessageProps = Partial<ToastOptions>
+
+const props = withDefaults(defineProps<ToastMessageProps>(), {
+  type: 'info',
+  locked: false,
+  closable: true,
+  confirmHrefTarget: '_blank',
+})
+
+const emit = defineEmits([
+  'close',
+  'confirm',
+  'cancel',
+  'mouseenter',
+  'mouseleave',
+])
+
+// @todo: make composable function since also used for modal icon
+const modalIcon = computed(() => {
+  if (props.customIcon) return props.customIcon
+
+  switch (props.type) {
+    case 'alert':
+      return 'i-ls-x-circle !text-text-danger-base'
+    case 'warning':
+      return 'i-ls-alert-triangle !text-text-warning-base'
+    case 'info':
+      return 'i-ls-info text-text-primary-base'
+    case 'success':
+      return 'i-ls-check-circle text-text-success-base'
+    default:
+      return undefined
+  }
+})
+
+const startTimer = ref(false)
+const hovered = ref(false)
+
+const enableProgressBar = computed(() => props.progessIndeterminate || (props.time && ['success', 'info'].includes(props.type)))
+
+function onMouseleave () {
+  hovered.value = false
+  emit('mouseleave')
+
+  // Reset the progress bar animation
+  if (props.time) {
+    startTimer.value = false
+
+    setTimeout(() => {
+      startTimer.value = true
+    }, 100)
+  }
+}
+
+if (props.time) {
+  // The delay is used to trigger the CSS transition
+  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',
+      })
+  }
+})
+</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)}`"
+    data-colors-semantic="light"
+    data-name="ui-toast-message"
+    @mouseenter="hovered = true, emit('mouseenter')"
+    @mouseleave="onMouseleave"
+  >
+    <div
+      v-if="props.component"
+      ref="Toast"
+      class="flex-1 min-w-0"
+    >
+      <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="{
+            'opacity-0!': hovered
+          }"
+        >
+          <div
+            v-if="time"
+            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'
+            }]"
+            :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"
+        >
+          <div class="animate-progress-indeterminate w-full h-full bg-red-600 origin-left-right" />
+        </div>
+      </template>
+
+      <div class="shrink-0">
+        <div
+          v-if="modalIcon"
+          class="w-4 h-4 mt-0.5 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"
+          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.message }}
+        </p>
+        <p
+          v-if="props.info"
+          class="text-content-text-md-regular text-text-neutral-subtle mt-1"
+        >
+          {{ props.info }}
+        </p>
+      </div>
+    </template>
+
+    <div class="row-start-1 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"
+        icon="i-ls-x"
+        size="md"
+        aria-label="close"
+        class="-top-[10px] -right-[2px] sm:row-start-1"
+        @click="emit('close')"
+        @keydown.enter="emit('close')"
+      />
+    </div>
+
+    <div
+      v-if="props.confirmLabel || props.cancelLabel"
+      class="row-start-3 col-start-1 col-end-3 w-full grid sm:flex sm:col-start-2 mt-3 gap-2 justify-self-end"
+    >
+      <UiButton
+        v-if="props.confirmLabel"
+        :href="props.confirmHref"
+        :to="props.confirmTo"
+        :target="props.confirmHrefTarget"
+        :icon="props.confirmIcon"
+        color="primary"
+        variant="cta"
+        class="w-full sm:w-auto"
+        @click="$emit('confirm', $event)"
+      >
+        {{ props.confirmLabel }}
+      </UiButton>
+
+      <UiButton
+        v-if="props.cancelLabel"
+        color="neutral-invert"
+        variant="cta"
+        class="w-full sm:w-auto"
+        @click="$emit('cancel')"
+      >
+        {{ props.cancelLabel }}
+      </UiButton>
+    </div>
+  </div>
+</template>

package/src/components/Toast/toastDSV2.ts

@@ -0,0 +1,151 @@
+import { ref } from 'vue'
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { createEventHook, type EventHook } from '@vueuse/core'
+
+import type { ThemeColorType } from '../../theme'
+
+let uid = 1
+
+export type ToastType = 'alert'|'warning'|'info'|'success'
+
+const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info'>, number> = {
+  success: 3 * 1000,
+  info: 7 * 1000,
+}
+
+export interface ToastOptions {
+  message: string
+  id?: PropertyKey
+  title?: string
+  info?: string
+  type?: ThemeColorType
+  time?: number | boolean // if time is explicitly false, the toast will not auto-close
+  progessIndeterminate?: boolean
+  customIcon?: string
+  confirmLabel?: string
+  confirmHref?: string
+  confirmHrefTarget?: '_blank'|'_self'
+  confirmTo?: RouteLocationRaw
+  confirmIcon?: string
+  confirmColor?: ThemeColorType
+  cancelLabel?: string
+  locked?: boolean
+  closable?: boolean
+  component?: Component
+  componentProps?: Record<string, unknown>
+}
+
+interface ToastItem {
+  id: PropertyKey
+  message: string
+  title?: string
+  info?: string
+  type?: ThemeColorType
+  icon?: string
+  time?: number
+  locked?: boolean
+  progessIndeterminate?: boolean
+  closeTimer: any
+  confirmEventHook: EventHook
+  cancelEventHook: EventHook
+}
+
+const toasts = ref<ToastItem[]>([])
+
+export function useToasts () {
+  return {
+    toasts,
+    closeToast,
+    openToast,
+    cancelCloseTimer,
+  }
+}
+
+export function openToast (options: ToastOptions) {
+  let id: PropertyKey
+  let item = toasts.value.find(item => item.id === options.id)
+  const confirmEventHook = createEventHook<void>()
+  const cancelEventHook = createEventHook<void>()
+
+  if (item) {
+    id = item.id
+    Object.assign(item, {
+      ...options,
+    })
+
+    const restartTimer = options.id && Object.keys(options).length === 1
+    if (restartTimer) {
+      startTimer(item)
+    }
+  } else {
+    id = options.id ?? uid++
+
+    const type = options.type || 'info'
+    const typeWithTimer = type === 'success' || type === 'info'
+    // `true` picks the per-type default; a number is used as-is; `false`
+    // (or unset) means no auto-close — normalized to undefined so the timer
+    // is never started.
+    const time = options.time === true
+      ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
+      : (typeof options.time === 'number' ? options.time : undefined)
+    item = {
+      ...options,
+      id,
+      closeTimer: null,
+      confirmEventHook,
+      cancelEventHook,
+      time,
+      type,
+    }
+
+    toasts.value.push(item)
+
+    startTimer(item)
+  }
+
+  return {
+    id,
+    close: () => {
+      closeToast(id)
+    },
+    onConfirm: confirmEventHook.on,
+    onCancel: cancelEventHook.on,
+  }
+}
+
+export function closeToast (id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (item) {
+    clearTimeout(item.closeTimer)
+    removeToast(id)
+  }
+}
+
+export function cancelCloseTimer (id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (item) {
+    clearTimeout(item.closeTimer)
+  }
+}
+
+export function resetToasts () {
+  toasts.value = []
+}
+
+function removeToast (id: PropertyKey) {
+  const index = toasts.value.findIndex(item => item.id === id)
+  if (index !== -1) {
+    toasts.value.splice(index, 1)
+  }
+}
+
+function startTimer (item: ToastItem): void {
+  if (item.time) {
+    item.closeTimer = setTimeout(
+      () => {
+        closeToast(item.id)
+      }, item.time
+    )
+  }
+}

package/src/components/UiActionBar/UiActionBar.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { ActionBarOrientation, ActionBarPosition, ActionBarSize } from './types'
+import { ACTION_BAR_CONTEXT_KEY } from './types'
+
+interface UiActionBarProps {
+  /**
+   * Lays the items out in a horizontal bar (default) or a vertical rail,
+   * matching the two variants in the design system.
+   */
+  orientation?: ActionBarOrientation
+  size?: ActionBarSize
+  /**
+   * Anchors the bar to a corner of its nearest positioned ancestor.
+   * When set, the bar is rendered `absolute` — the parent must be `relative`.
+   * Leave undefined (default) to keep the bar in normal flow and position it
+   * yourself.
+   */
+  position?: ActionBarPosition
+  /**
+   * Distance (in Tailwind spacing units) from the anchored edges when
+   * `position` is set. Defaults to `3` (12px).
+   */
+  offset?: number
+  /**
+   * Accessible label for the toolbar landmark. Defaults to "Actions".
+   */
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<UiActionBarProps>(), {
+  orientation: 'horizontal',
+  size: 'md',
+  position: undefined,
+  offset: 3,
+  ariaLabel: 'Actions',
+})
+
+provide(ACTION_BAR_CONTEXT_KEY, {
+  orientation: computed<ActionBarOrientation>(() => props.orientation),
+  size: computed<ActionBarSize>(() => props.size),
+})
+
+const isVertical = computed(() => props.orientation === 'vertical')
+
+// Inner padding follows the design tokens (space-0-5 = 2px).
+const sizeClasses = computed(() => (props.size === 'sm' ? 'p-0.5 gap-0.5' : 'p-1 gap-0.5'))
+
+// When `position` is set, anchor the bar to an edge of its positioned
+// ancestor. Offsets are inline styles (rem) so any `offset` value works
+// without relying on Tailwind JIT seeing dynamic class names. `center-*`
+// pins the bar to 50% on the vertical axis and shifts it back by half its
+// own height so it sits exactly centered.
+const positionStyle = computed<Record<string, string>>(() => {
+  if (!props.position) return {}
+  const gap = `${props.offset * 0.25}rem`
+  const [vertical, horizontal] = props.position.split('-')
+
+  if (vertical === 'center') {
+    return {
+      top: '50%',
+      transform: 'translateY(-50%)',
+      [horizontal]: gap,
+    }
+  }
+
+  return {
+    [vertical]: gap,
+    [horizontal]: gap,
+  }
+})
+</script>
+
+<template>
+  <div
+    role="toolbar"
+    :aria-label="ariaLabel"
+    :aria-orientation="orientation"
+    data-testid="ui-action-bar"
+    class="inline-flex items-center bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg"
+    :class="[sizeClasses, { 'flex-col': isVertical, 'absolute z-10': position }]"
+    :style="positionStyle"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/UiActionBar/UiActionBarItem.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipPortal,
+  TooltipArrow,
+} from 'reka-ui'
+import type { RouteLocationRaw } from 'vue-router'
+import { ACTION_BAR_CONTEXT_KEY } from './types'
+
+interface UiActionBarItemProps {
+  /** Icon class, e.g. `i-ls-trash`. */
+  icon?: string
+  /** Visible/accessible label. Required so icon-only items stay accessible. */
+  label: string
+  /**
+   * Optional icon class rendered next to the label inside the hover tooltip —
+   * e.g. `i-ls-external-link` to flag that the action opens in a new tab.
+   * Only shown for icon-only items (the tooltip is suppressed when
+   * `showLabel` is set).
+   */
+  tooltipIcon?: string
+  /**
+   * When false (default), only the icon shows and the label is exposed as a
+   * hover tooltip + aria-label. Set true to render the label inline next to
+   * the icon (used for primary/secondary actions like "Promote").
+   */
+  showLabel?: boolean
+  disabled?: boolean
+  /** Render as a router-link instead of a button. */
+  to?: RouteLocationRaw
+  /** Render as an anchor instead of a button. */
+  href?: string
+  /**
+   * Marks the item as a toggle and reflects its on/off state. When set, the
+   * item renders `aria-pressed` and shows a pressed background while `true`.
+   * Leave undefined for a normal (non-toggle) action — no `aria-pressed` is
+   * emitted in that case.
+   */
+  active?: boolean
+}
+
+const props = withDefaults(defineProps<UiActionBarItemProps>(), {
+  icon: undefined,
+  tooltipIcon: undefined,
+  showLabel: false,
+  disabled: false,
+  to: undefined,
+  href: undefined,
+  active: undefined,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const ctx = inject(ACTION_BAR_CONTEXT_KEY, null)
+const size = computed(() => ctx?.size.value ?? 'md')
+const orientation = computed(() => ctx?.orientation.value ?? 'horizontal')
+
+// Icon-only items get a tooltip; labeled items don't need one.
+const showTooltip = computed(() => !props.showLabel)
+const tooltipSide = computed(() => (orientation.value === 'vertical' ? 'right' : 'bottom'))
+
+const component = computed(() => {
+  if (props.disabled) return { is: 'button', props: { type: 'button', disabled: true } }
+  if (props.to) return { is: 'router-link', props: { to: props.to } }
+  if (props.href) return { is: 'a', props: { href: props.href } }
+  return { is: 'button', props: { type: 'button' } }
+})
+
+const sizeClasses = computed(() => {
+  const square = size.value === 'sm' ? 'size-8' : 'size-10'
+  // Labeled items grow with their text instead of staying square.
+  const padded = size.value === 'sm' ? 'h-8 px-2.5 gap-1' : 'h-10 px-3 gap-1.5'
+  return props.showLabel ? padded : square
+})
+
+const iconSizeClass = computed(() => (size.value === 'sm' ? 'size-4' : 'size-5'))
+const textClass = computed(() => (size.value === 'sm' ? 'text-action-button-sm' : 'text-action-button-md'))
+
+// Persistent pressed background when the item is an active toggle. Uses the
+// dedicated neutral "active" token so an active-but-not-hovered toggle stays
+// visually distinct from a merely hovered item.
+const stateClasses = computed(() => ({
+  'bg-actions-neutral-active-overlay': props.active === true,
+}))
+
+function onClick (event: MouseEvent) {
+  if (props.disabled) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+  // Release focus after activating. When the bar is revealed on hover/focus
+  // (a common pattern — `group-hover` / `group-focus-within` on a row), a
+  // lingering focus would keep it visible after the pointer leaves. Blurring
+  // lets the reveal collapse once the cursor moves away.
+  ;(event.currentTarget as HTMLElement | null)?.blur()
+}
+</script>
+
+<template>
+  <TooltipProvider
+    v-if="showTooltip"
+    :delay-duration="300"
+  >
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <component
+          :is="component.is"
+          v-bind="component.props"
+          :aria-label="label"
+          :aria-pressed="active"
+          data-testid="ui-action-bar-item"
+          class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+               text-actions-neutral-idle
+               hover:bg-actions-neutral-hover-overlay
+               focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+               disabled:opacity-50 disabled:cursor-not-allowed"
+          :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+          @click="onClick"
+        >
+          <span
+            v-if="icon"
+            :class="[icon, iconSizeClass]"
+            class="shrink-0"
+          />
+        </component>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent
+          :side="tooltipSide"
+          :side-offset="8"
+          data-colors-semantic="light"
+          class="inline-flex items-center justify-center gap-1.5 py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg
+                 data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95"
+        >
+          {{ label }}
+          <span
+            v-if="tooltipIcon"
+            :class="tooltipIcon"
+            class="size-3.5 shrink-0"
+            aria-hidden="true"
+          />
+          <TooltipArrow
+            :width="10"
+            :height="5"
+            class="fill-surface-neutral-invert-bg-alpha"
+          />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+
+  <component
+    :is="component.is"
+    v-else
+    v-bind="component.props"
+    :aria-label="label"
+    :aria-pressed="active"
+    data-testid="ui-action-bar-item"
+    class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
+           text-actions-neutral-idle
+           hover:bg-actions-neutral-hover-overlay
+           focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+           disabled:opacity-50 disabled:cursor-not-allowed"
+    :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+    @click="onClick"
+  >
+    <span
+      v-if="icon"
+      :class="[icon, iconSizeClass]"
+      class="shrink-0"
+    />
+    <span class="whitespace-nowrap">{{ label }}</span>
+  </component>
+</template>