@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiPane/UiPaneContent.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { reactiveOmit, useMutationObserver, useScroll } from '@vueuse/core'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  DialogTitle,
+  useForwardPropsEmits,
+  VisuallyHidden,
+} from 'reka-ui'
+import { computed, onMounted, ref, useAttrs, useSlots } from 'vue'
+import { useTranslate } from '../../utils/i18n'
+import UiButton from '../UiButton/UiButton.vue'
+
+export type UiPaneSize = 'sm' | 'lg'
+export type UiPaneOrientation = 'horizontal' | 'vertical'
+
+export interface UiPaneContentProps extends DialogContentProps {
+  /**
+   * Header title, also used as the pane's accessible name
+   */
+  title?: string
+  /**
+   * Density of the header, padding and title
+   * @values sm, lg
+   */
+  size?: UiPaneSize
+  /**
+   * Layout of the footer actions: in a row, or stacked full width
+   * @values horizontal, vertical
+   */
+  orientation?: UiPaneOrientation
+  hideClose?: boolean
+  closeButtonAriaLabel?: string
+  /**
+   * Removes the body padding, for full-bleed content
+   */
+  noPadding?: boolean
+  /**
+   * When false, a click outside or Escape no longer closes the pane:
+   * only the close button or the consumer's own actions do
+   */
+  dismissible?: boolean
+  /**
+   * Any CSS width, for content with a fixed width of its own (an email's 600px column).
+   * Still capped to the viewport.
+   */
+  width?: string
+}
+
+// Attributes belong on the pane itself, not on the portal root.
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<UiPaneContentProps>(), {
+  title: undefined,
+  size: 'lg',
+  orientation: 'horizontal',
+  hideClose: false,
+  closeButtonAriaLabel: undefined,
+  noPadding: false,
+  dismissible: true,
+  width: undefined,
+})
+
+const emits = defineEmits<DialogContentEmits>()
+
+// Our own props must not reach DialogContent, where `title` would become a native tooltip.
+const contentProps = reactiveOmit(props, 'title', 'size', 'orientation', 'hideClose', 'closeButtonAriaLabel', 'noPadding', 'dismissible', 'width')
+const forwarded = useForwardPropsEmits(contentProps, emits)
+
+const slots = useSlots()
+const attrs = useAttrs()
+const translate = useTranslate()
+
+const closeAriaLabel = computed(() => props.closeButtonAriaLabel ?? translate('general_close'))
+const accessibleTitle = computed(() => (attrs['aria-label'] as string) || translate('general_dialog_title'))
+
+// Non-modal, the page stays usable: only a click outside or Escape dismisses the pane.
+// Focus leaving it (tabbing back to the page, a menu restoring focus to its trigger) must not.
+function keepOpenOnFocusOutside (event: Event) {
+  event.preventDefault()
+}
+
+function preventUnlessDismissible (event: Event) {
+  if (!props.dismissible) event.preventDefault()
+}
+
+// Portaled to the body so no stacking context of the page can cover it, the pane takes the
+// color mode of the place it is declared, as if it rendered there.
+const anchor = ref<HTMLElement | null>(null)
+const colorModeHost = ref<HTMLElement | null>(null)
+const colorMode = ref<string>()
+
+function syncColorMode () {
+  colorMode.value = colorModeHost.value?.getAttribute('data-colors-semantic') ?? undefined
+}
+
+onMounted(() => {
+  colorModeHost.value = anchor.value?.closest<HTMLElement>('[data-colors-semantic]') ?? null
+  syncColorMode()
+})
+
+useMutationObserver(colorModeHost, syncColorMode, { attributeFilter: ['data-colors-semantic'] })
+
+const hasHeader = computed(() => !!props.title || !!slots.header || !props.hideClose)
+
+const body = ref<HTMLElement | null>(null)
+const { y: bodyScrollTop } = useScroll(body)
+
+const isLarge = computed(() => props.size === 'lg')
+const spacing = computed(() => isLarge.value ? 'p-6' : 'p-4')
+
+const bodyClasses = computed(() => {
+  if (props.noPadding) return ''
+
+  return [
+    isLarge.value ? 'px-6 pb-6' : 'px-4 pb-4',
+    !hasHeader.value && (isLarge.value ? 'pt-6' : 'pt-4'),
+  ]
+})
+
+const footerClasses = computed(() => props.orientation === 'vertical'
+  ? 'flex flex-col gap-2 *:w-full'
+  : 'flex items-center justify-end gap-2')
+</script>
+
+<template>
+  <span
+    ref="anchor"
+    hidden
+  />
+  <DialogPortal>
+    <!-- The pane has no description slot; opt out of reka's one unless the consumer points to its own. -->
+    <DialogContent
+      data-testid="ui-pane-content"
+      v-bind="{ 'aria-describedby': undefined, ...forwarded, ...$attrs }"
+      :class="[
+        'ui-pane-content fixed top-3 right-3 bottom-3 z-pane flex flex-col overflow-hidden',
+        !width && 'w-[560px]',
+        'max-w-[calc(100vw-1.5rem)]',
+        'bg-surface-neutral-300 shadow-shadows-drop-shadow-2xl rounded-container',
+        'focus:outline-hidden focus-indicator-none',
+      ]"
+      :style="width ? { width } : undefined"
+      :data-colors-semantic="colorMode"
+      @focus-outside="keepOpenOnFocusOutside"
+      @pointer-down-outside="preventUnlessDismissible"
+      @escape-key-down="preventUnlessDismissible"
+    >
+      <VisuallyHidden
+        v-if="!title"
+        as-child
+      >
+        <DialogTitle>{{ accessibleTitle }}</DialogTitle>
+      </VisuallyHidden>
+
+      <div
+        v-if="hasHeader"
+        data-testid="ui-pane-header"
+        :class="['relative z-1 flex min-h-10 shrink-0 items-center box-content', spacing, isLarge ? 'gap-6' : 'gap-4', bodyScrollTop > 0 && 'shadow-elevation-level-1']"
+      >
+        <DialogTitle
+          v-if="title"
+          :class="['min-w-0 break-words text-text-neutral-base', isLarge ? 'text-title-md-bold' : 'text-title-sm-bold']"
+        >
+          {{ title }}
+        </DialogTitle>
+
+        <div
+          v-if="$slots.header"
+          class="flex min-w-0 flex-1 items-center"
+        >
+          <slot name="header" />
+        </div>
+
+        <!-- Not UiDialogClose: it pins itself to light, and the pane follows the mode around it -->
+        <DialogClose
+          v-if="!hideClose"
+          as-child
+        >
+          <UiButton
+            variant="tertiary"
+            color="neutral"
+            size="md"
+            icon="i-ph-x"
+            data-testid="ui-pane-close"
+            class="ml-auto shrink-0"
+            :aria-label="closeAriaLabel"
+          />
+        </DialogClose>
+      </div>
+
+      <div
+        ref="body"
+        data-testid="ui-pane-body"
+        :class="['min-h-0 flex-1 overflow-y-auto', bodyClasses]"
+      >
+        <slot />
+      </div>
+
+      <div
+        v-if="$slots.footer"
+        data-testid="ui-pane-footer"
+        :class="['shrink-0 border-t border-divider', spacing, footerClasses]"
+      >
+        <slot name="footer" />
+      </div>
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<style scoped>
+/* Own keyframes, like UiDialogContent: reka waits for `animationend` before unmounting. */
+@keyframes ui-pane-in {
+  from { opacity: 0; transform: translateX(1rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes ui-pane-out {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(1rem); }
+}
+
+.ui-pane-content[data-state='open'] {
+  animation: ui-pane-in 200ms ease-out both;
+}
+
+.ui-pane-content[data-state='closed'] {
+  animation: ui-pane-out 150ms ease-in both;
+}
+</style>

package/src/components/UiPane/UiPaneTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DialogTrigger v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/components/UiPane/index.ts

@@ -0,0 +1,12 @@
+export { default as UiPane } from './UiPane.vue'
+export { default as UiPaneTrigger } from './UiPaneTrigger.vue'
+export { default as UiPaneContent } from './UiPaneContent.vue'
+export type { UiPaneContentProps, UiPaneOrientation, UiPaneSize } from './UiPaneContent.vue'
+
+export {
+  DialogClose,
+  type DialogRootProps,
+  type DialogRootEmits,
+  type DialogContentProps,
+  type DialogContentEmits,
+} from 'reka-ui'

package/src/components/UiPopover/UiPopoverContent.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
-      class="rounded-lg shadow-shadows-drop-shadow-lg border ui-popover-content animate-scale-in z-50"
+      class="rounded-container shadow-shadows-drop-shadow-lg border border-container-border ui-popover-content z-overlay"
     >
       <slot />
     </PopoverContent>
@@ -20,7 +20,27 @@ const forwarded = useForwardPropsEmits(props, emits)
 </template>
 
 <style>
+/* Unscoped: reka gives the scope id to its popper wrapper, not this content. */
 .ui-popover-content {
   transform-origin: var(--reka-popover-content-transform-origin, center);
 }
+
+/* Local keyframes: reka waits for the closing animation before unmounting. */
+@keyframes ui-popover-scale-in {
+  from { opacity: 0; transform: scale(0.6); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes ui-popover-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.6); }
+}
+
+:where(.ui-popover-content[data-state='open']) {
+  animation: ui-popover-scale-in 150ms ease-out both;
+}
+
+.ui-popover-content[data-state='closed'] {
+  animation: ui-popover-scale-out 100ms ease-in both;
+}
 </style>

package/src/components/UiProgress/UiProgress.vue

@@ -66,11 +66,11 @@ const sizeClass = computed(() => {
 @reference '@livestorm/ui-tokens/output/supernova/index.css';
 
 .ui-progress-root {
-  @apply relative w-full bg-actions-neutral-active-overlay overflow-hidden rounded-lg;
+  @apply relative w-full bg-actions-neutral-active-overlay overflow-hidden rounded-full;
 }
 
 .ui-progress-indicator {
-  @apply h-full w-full rounded-lg transition-transform duration-[660ms];
+  @apply h-full w-full rounded-full transition-transform duration-[660ms];
   transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
 }
 

package/src/components/UiRating/UiRating.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+import type { AcceptableValue, RadioGroupItemEmits } from 'reka-ui'
+import type { RatingSize } from './types'
+
+interface UiRatingProps {
+  /**
+   * The selected star, from 1 to `max`. `null` means no selection.
+   * @default null
+   */
+  modelValue?: number | null
+  /**
+   * Number of stars
+   * @default 5
+   */
+  max?: number
+  /**
+   * Caption under each star, in star order. The caption is also the star's
+   * accessible name; a star without one is named by its number.
+   */
+  labels?: string[]
+  /**
+   * Size of the stars
+   * @default 'md'
+   */
+  size?: RatingSize
+  /**
+   * Whether the rating only displays its value. The stars stay focusable so
+   * the value can be read, but cannot be changed.
+   * @default false
+   */
+  readonly?: boolean
+  /**
+   * Whether the rating is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether a rating is required
+   * @default false
+   */
+  required?: boolean
+  /**
+   * Name attribute, submitted with the form via a hidden input
+   */
+  name?: string
+}
+
+const props = withDefaults(defineProps<UiRatingProps>(), {
+  modelValue: null,
+  max: 5,
+  labels: undefined,
+  size: 'md',
+  readonly: false,
+  disabled: false,
+  required: false,
+  name: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const STAR_SIZE_CLASSES: Record<RatingSize, string> = {
+  sm: 'size-4',
+  md: 'size-6',
+  lg: 'size-8',
+}
+
+type StarState = 'empty' | 'preview' | 'selected'
+type StarFill = 'empty' | 'selected'
+
+const STAR_FILL_CLASSES: Record<StarFill, string> = {
+  empty: 'i-ph-star text-text-neutral-tertiary',
+  selected: 'i-ph-star-fill text-actions-primary-idle',
+}
+
+// The pressed overlay stands in for the hover one, too faint on a glyph. It darkens
+// the empty outline and lightens the primary fill, as it does on a primary button.
+const STAR_OVERLAY_CLASSES: Record<StarFill, string> = {
+  empty: 'i-ph-star-fill text-actions-neutral-pressed-overlay',
+  selected: 'i-ph-star-fill text-actions-neutral-invert-pressed-overlay',
+}
+
+// Vertical padding keeps every star inside a hit area of at least 32px high
+const ITEM_PADDING_CLASSES: Record<RatingSize, string> = {
+  sm: 'py-2',
+  md: 'py-1',
+  lg: 'py-1',
+}
+
+// Every star gets the same fixed column, wider with captions so their length
+// never changes the star spacing. Only sm trades the 32px hit width for density.
+const ITEM_WIDTH_CLASSES: Record<RatingSize, { plain: string, captioned: string }> = {
+  sm: { plain: 'w-6', captioned: 'w-12' },
+  md: { plain: 'w-8', captioned: 'w-12' },
+  lg: { plain: 'w-10', captioned: 'w-15' },
+}
+
+// Mirror the value locally so the stars follow a selection even when the
+// consumer does not bind v-model (uncontrolled usage)
+const currentValue = ref<number | null>(props.modelValue)
+
+watch(() => props.modelValue, (value) => {
+  currentValue.value = value
+})
+
+const hoveredValue = ref<number | null>(null)
+
+const isInteractive = computed(() => !props.readonly && !props.disabled)
+
+// A rating locked under the pointer drops the preview straight away
+const previewValue = computed(() => isInteractive.value ? hoveredValue.value : null)
+
+const hasCaptions = computed(() => (props.labels?.length ?? 0) > 0)
+
+const rootClasses = computed(() => [
+  'flex w-fit gap-1',
+  { 'opacity-50': props.disabled },
+])
+
+const cursorClass = computed(() => {
+  if (props.disabled) {
+    return 'cursor-not-allowed'
+  }
+  if (props.readonly) {
+    return 'cursor-default'
+  }
+  return 'cursor-pointer'
+})
+
+const itemClasses = computed(() => [
+  'group/star flex flex-col items-center gap-2 rounded-md',
+  ITEM_PADDING_CLASSES[props.size],
+  ITEM_WIDTH_CLASSES[props.size][hasCaptions.value ? 'captioned' : 'plain'],
+  cursorClass.value,
+])
+
+function starFill(value: number): StarFill {
+  return value <= (currentValue.value ?? 0) ? 'selected' : 'empty'
+}
+
+// Past the selection only the added stars preview; within it, the stars up to
+// the pointer do. The rest of the selection stays as it is.
+function starState(value: number): StarState {
+  const selected = currentValue.value ?? 0
+  const preview = previewValue.value
+
+  if (preview !== null) {
+    const previewFrom = preview > selected ? selected + 1 : 1
+    if (value >= previewFrom && value <= preview) {
+      return 'preview'
+    }
+  }
+  return starFill(value)
+}
+
+function starClasses(value: number): string[] {
+  return [STAR_SIZE_CLASSES[props.size], STAR_FILL_CLASSES[starFill(value)]]
+}
+
+function overlayClasses(value: number): string[] {
+  return [STAR_SIZE_CLASSES[props.size], STAR_OVERLAY_CLASSES[starFill(value)]]
+}
+
+// An empty caption counts as a missing one, so the star keeps its number as a name
+function labelFor(value: number): string | undefined {
+  return props.labels?.[value - 1] || undefined
+}
+
+// A star without a caption keeps its number as a visually hidden name
+function captionClasses(value: number): string {
+  if (!labelFor(value)) {
+    return 'sr-only'
+  }
+  return 'text-content-legends-medium-md text-center wrap-break-word text-text-neutral-secondary group-data-[state=checked]/star:text-text-primary-base'
+}
+
+function onUpdateModelValue(value: AcceptableValue) {
+  currentValue.value = value as number
+  emit('update:modelValue', value as number)
+}
+
+function onSelect(event: RadioGroupItemEmits['select'][0]) {
+  if (props.readonly) {
+    event.preventDefault()
+  }
+}
+
+function onMouseEnter(value: number) {
+  if (isInteractive.value) {
+    hoveredValue.value = value
+  }
+}
+
+function onMouseLeave() {
+  hoveredValue.value = null
+}
+
+// RadioGroupRoot is a generic component, so InstanceType<typeof RadioGroupRoot> can't be used
+const rootRef = ref<ComponentPublicInstance | null>(null)
+
+// Focuses the selected star, or the first one when nothing is selected
+function focus() {
+  const root = rootRef.value?.$el as HTMLElement | undefined
+  const star = root?.querySelector<HTMLElement>('[role="radio"][aria-checked="true"]') ??
+    root?.querySelector<HTMLElement>('[role="radio"]')
+  star?.focus()
+}
+
+defineExpose({ focus })
+</script>
+
+<template>
+  <RadioGroupRoot
+    ref="rootRef"
+    :model-value="currentValue"
+    :disabled="disabled"
+    :required="required"
+    :name="name"
+    :loop="false"
+    :aria-readonly="readonly || undefined"
+    :class="rootClasses"
+    @update:model-value="onUpdateModelValue"
+    @mouseleave="onMouseLeave"
+  >
+    <RadioGroupItem
+      v-for="value in max"
+      :key="value"
+      :value="value"
+      :class="itemClasses"
+      @select="onSelect"
+      @mouseenter="onMouseEnter(value)"
+    >
+      <!-- The star under the pointer grows a little so the hovered one stands out of the preview -->
+      <span
+        aria-hidden="true"
+        class="relative motion-safe:transition-transform"
+        :class="[STAR_SIZE_CLASSES[size], { 'scale-110': previewValue === value }]"
+      >
+        <span
+          data-testid="ui-rating-star"
+          :data-state="starState(value)"
+          :class="starClasses(value)"
+        />
+        <span
+          v-if="starState(value) === 'preview'"
+          data-testid="ui-rating-star-overlay"
+          class="absolute inset-0"
+          :class="overlayClasses(value)"
+        />
+      </span>
+      <span :class="captionClasses(value)">{{ labelFor(value) ?? value }}</span>
+    </RadioGroupItem>
+  </RadioGroupRoot>
+</template>

package/src/components/UiRating/types.ts

@@ -0,0 +1 @@
+export type RatingSize = 'sm' | 'md' | 'lg'

package/src/components/UiRoomButton/UiRoomButton.vue

@@ -4,6 +4,7 @@ import UiTooltipProvider from "../UiTooltip/UiTooltipProvider.vue";
 import UiTooltip from "../UiTooltip/UiTooltip.vue";
 import UiTooltipTrigger from "../UiTooltip/UiTooltipTrigger.vue";
 import UiTooltipContent from "../UiTooltip/UiTooltipContent.vue";
+import UiSpinnerIcon from "../UiLoader/UiSpinnerIcon.vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -14,6 +15,7 @@ withDefaults(
         icon?: string;
         tooltip?: string;
         tooltipSide?: "top" | "bottom" | "left" | "right";
+        tooltipDisabled?: boolean;
         disabled?: boolean;
         active?: boolean;
         loading?: boolean;
@@ -22,6 +24,7 @@ withDefaults(
         variant: "ghost",
         color: "neutral",
         tooltipSide: "top",
+        tooltipDisabled: false,
     },
 );
 
@@ -31,7 +34,7 @@ const isIconOnly = computed(() => !slots.default);
 
 <template>
   <UiTooltipProvider v-if="tooltip">
-    <UiTooltip>
+    <UiTooltip :disabled="tooltipDisabled">
       <UiTooltipTrigger as-child>
         <button
           v-bind="$attrs"
@@ -55,27 +58,10 @@ const isIconOnly = computed(() => !slots.default);
           ]"
           :disabled="disabled || loading"
         >
-          <svg
+          <UiSpinnerIcon
             v-if="loading"
             class="size-5 shrink-0 animate-spin"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              class="opacity-20"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            />
-            <path
-              class="opacity-100"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
+          />
           <div
             v-else-if="icon"
             class="size-5 shrink-0"
@@ -115,27 +101,10 @@ const isIconOnly = computed(() => !slots.default);
     ]"
     :disabled="disabled || loading"
   >
-    <svg
+    <UiSpinnerIcon
       v-if="loading"
       class="size-5 shrink-0 animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-20"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="opacity-100"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
+    />
     <div
       v-else-if="icon"
       class="size-5 shrink-0"
@@ -156,7 +125,7 @@ const isIconOnly = computed(() => !slots.default);
 }
 
 .ui-room-button--ghost.ui-room-button--neutral:not(:disabled):hover {
-    background: rgba(245, 247, 252, 0.1);
+    background: var(--color-actions-neutral-hover-overlay, rgba(245, 247, 252, 0.1));
 }
 
 .ui-room-button--ghost.ui-room-button--danger {
@@ -182,7 +151,7 @@ const isIconOnly = computed(() => !slots.default);
 }
 
 .ui-room-button--glass.ui-room-button--neutral:not(:disabled):hover {
-    background: rgba(245, 247, 252, 0.1);
+    background: var(--color-actions-neutral-hover-overlay, rgba(245, 247, 252, 0.1));
 }
 
 .ui-room-button--ghost.ui-room-button--primary {