@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiTable/UiTableActionsCell.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, inject, ref, unref, useSlots } from 'vue'
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+import { useTranslate } from '../../utils/i18n'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
+
+/**
+ * Host for trailing row actions. Place it as the last cell of a row, under a
+ * UiTableActionsHeaderCell. The overlay variants reveal the actions over the
+ * preceding cells on row hover or keyboard focus; the menu variant renders a
+ * persistent trigger instead. Without content it renders an empty cell, for
+ * rows that have no actions.
+ */
+export interface UiTableActionsCellProps {
+  /**
+   * `default` masks the cells behind the actions with a row-state backdrop,
+   * for bare buttons per the Figma spec. `floating` drops the backdrop for
+   * self-contained content that brings its own surface, like a UiActionBar.
+   * `menu` tucks the actions behind an always-visible trigger button that
+   * opens them in a popover on click — no hover needed, so it also works
+   * on touch devices.
+   * @default 'default'
+   */
+  variant?: 'default' | 'floating' | 'menu'
+  /**
+   * Accessible label of the menu trigger. Defaults to the built-in
+   * "More actions" label.
+   */
+  menuLabel?: string
+  /**
+   * Keeps the overlay actions shown without row hover or focus, e.g. while
+   * a menu they opened is open.
+   * @default false
+   */
+  revealed?: boolean
+}
+
+const props = withDefaults(defineProps<UiTableActionsCellProps>(), {
+  variant: 'default',
+  menuLabel: undefined,
+  revealed: false,
+})
+
+const slots = useSlots()
+
+const translate = useTranslate()
+
+const size = inject(UI_TABLE_SIZE_KEY, ref<UiTableSize>('md'))
+
+const heightClass = computed(() => (unref(size) === 'lg' ? 'h-16' : 'h-12'))
+
+const overlayVisibilityClass = computed(() => (
+  props.revealed
+    ? 'pointer-events-auto opacity-100'
+    : 'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100'
+))
+
+const overlayVariantClass = computed(() => (
+  props.variant === 'floating'
+    ? 'pr-3'
+    : 'ui-table__actions--backdrop gap-2 rounded-r-table-row py-1 pl-2 pr-3'
+))
+
+const emptyCellClasses = computed(() => [heightClass.value, props.variant === 'menu' ? 'ui-table__empty-menu-cell' : 'ui-table__zero-width-cell'])
+
+const menuOpen = ref(false)
+const menuContent = ref<HTMLElement | null>(null)
+
+const menuTriggerLabel = computed(() => props.menuLabel ?? translate('general_table_more-actions'))
+
+// Land the opening focus on the container, not the first action: focusing
+// an action would immediately pop its tooltip.
+function onMenuOpenAutoFocus (event: Event) {
+  event.preventDefault()
+  menuContent.value?.focus()
+}
+</script>
+
+<template>
+  <td
+    v-if="!slots.default"
+    class="p-0"
+    :class="emptyCellClasses"
+  />
+  <td
+    v-else-if="variant === 'menu'"
+    class="ui-table__menu-cell relative px-3 text-right"
+    :class="heightClass"
+    @click.stop
+    @keydown.stop
+  >
+    <PopoverRoot v-model:open="menuOpen">
+      <PopoverTrigger
+        :aria-label="menuTriggerLabel"
+        class="inline-flex size-button-sm cursor-pointer items-center justify-center rounded-button-sm align-middle text-actions-neutral-idle transition-colors hover:bg-actions-neutral-hover-overlay"
+      >
+        <span class="i-ph-dots-three size-4 shrink-0" />
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          side="bottom"
+          align="end"
+          :side-offset="4"
+          class="z-overlay"
+          @open-auto-focus="onMenuOpenAutoFocus"
+        >
+          <!-- Row action menus are one-shot: picking an action closes them. -->
+          <div
+            ref="menuContent"
+            tabindex="-1"
+            class="focus-indicator-none outline-none"
+            @click="menuOpen = false"
+          >
+            <slot />
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+  </td>
+  <td
+    v-else
+    class="ui-table__actions-cell ui-table__zero-width-cell sticky right-0 w-0 p-0"
+    :class="heightClass"
+  >
+    <div
+      class="ui-table__actions absolute inset-y-0 right-0 flex items-center transition-opacity"
+      :class="[overlayVisibilityClass, overlayVariantClass]"
+      data-testid="ui-table-actions"
+      @click.stop
+      @keydown.stop
+    >
+      <slot />
+    </div>
+  </td>
+</template>

package/src/components/UiTable/UiTableActionsHeaderCell.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useTranslate } from '../../utils/i18n'
+
+/**
+ * Header of the trailing actions column, paired with UiTableActionsCell. The
+ * column takes no width of its own: overlay actions sit over the row end and
+ * menu triggers size it. It names the column for assistive tech.
+ */
+const translate = useTranslate()
+</script>
+
+<template>
+  <th
+    scope="col"
+    class="w-0 p-0"
+  >
+    <span class="sr-only">{{ translate('general_table_more-actions') }}</span>
+  </th>
+</template>

package/src/components/UiTable/UiTableBody.vue

@@ -1,5 +1,20 @@
+<script setup lang="ts">
+export interface UiTableBodyProps {
+  /**
+   * Starts the zebra on the first row, so a body that follows another body
+   * with an odd number of rows keeps the stripes alternating.
+   * @default false
+   */
+  zebraOffset?: boolean
+}
+
+withDefaults(defineProps<UiTableBodyProps>(), {
+  zebraOffset: false,
+})
+</script>
+
 <template>
-  <tbody>
+  <tbody :data-zebra-offset="zebraOffset ? '' : undefined">
     <slot />
   </tbody>
 </template>

package/src/components/UiTable/UiTableCell.vue

@@ -1,26 +1,43 @@
 <script setup lang="ts">
-import { inject, computed, unref, type Ref } from 'vue'
+import { computed, inject, ref, unref } from 'vue'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
 
-const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
-const isEven = inject<boolean>('rowIsEven', false)
-const hoverEffect = inject<Ref<boolean>>('hoverEffect')
+export interface UiTableCellProps {
+  /**
+   * Renders an en dash (–), the convention for missing values.
+   * @default false
+   */
+  empty?: boolean
+  /**
+   * Content alignment. Textual data stays left-aligned; reserve `right` for numeric data.
+   * @default 'left'
+   */
+  align?: 'left' | 'right'
+}
 
-const cellClasses = computed(() => ({
-  'h-10': unref(variant) === 'condensed',
-  'h-20': unref(variant) === 'large',
-  'bg-surface-neutral-alpha-100': isEven,
-  'group-hover:bg-surface-neutral-alpha-200': unref(hoverEffect) && isEven,
-  'group-hover:bg-surface-neutral-alpha-100': unref(hoverEffect) && !isEven,
-  'first:rounded-l-md': true,
-  'last:rounded-r-md': true,
-}))
+withDefaults(defineProps<UiTableCellProps>(), {
+  empty: false,
+  align: 'left',
+})
+
+const size = inject(UI_TABLE_SIZE_KEY, ref<UiTableSize>('md'))
+
+const sizeClasses = computed(() => (
+  unref(size) === 'lg'
+    ? 'h-16 text-content-text-md-medium'
+    : 'h-12 text-content-legends-medium-md'
+))
 </script>
 
 <template>
   <td
-    :class="cellClasses"
-    class="px-3 overflow-hidden text-ellipsis transition-colors"
+    :class="[sizeClasses, align === 'right' ? 'text-right' : 'text-left']"
+    class="overflow-hidden px-3 text-ellipsis text-text-neutral-base transition-colors"
   >
-    <slot />
+    <span
+      v-if="empty"
+      class="text-text-neutral-secondary"
+    >–</span>
+    <slot v-else />
   </td>
 </template>

package/src/components/UiTable/UiTableHeader.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { inject, computed, unref, type Ref } from 'vue'
+import { computed, inject, ref, unref } from 'vue'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
 
-const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+const size = inject(UI_TABLE_SIZE_KEY, ref<UiTableSize>('md'))
 
 const headerClasses = computed(() => ({
-  'h-10': unref(variant) === 'condensed',
-  'h-12': unref(variant) === 'large',
-  'sticky top-0 z-20': true,
+  'h-10': unref(size) === 'md',
+  'h-12': unref(size) === 'lg',
+  'sticky top-0 z-20 bg-surface-neutral-bg-main': true,
 }))
 </script>
 

package/src/components/UiTable/UiTableHeaderCell.vue

@@ -1,19 +1,71 @@
 <script setup lang="ts">
-import { inject, computed, unref, type Ref } from 'vue'
+import { computed, inject, ref, unref } from 'vue'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
 
-const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+export type UiTableSortDirection = 'asc' | 'desc' | 'none'
 
-const cellClasses = computed(() => ({
-  'h-10': unref(variant) === 'condensed',
-  'h-12': unref(variant) === 'large',
-}))
+export interface UiTableHeaderCellProps {
+  /**
+   * Renders the sort affordance and makes the header interactive.
+   * Sorting itself stays in the consumer: listen to `sort` and update `sort-direction`.
+   * @default false
+   */
+  sortable?: boolean
+  /**
+   * Current sort direction, controlled by the consumer.
+   * @default 'none'
+   */
+  sortDirection?: UiTableSortDirection
+  /**
+   * Content alignment. Textual data stays left-aligned; reserve `right` for numeric data.
+   * @default 'left'
+   */
+  align?: 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<UiTableHeaderCellProps>(), {
+  sortable: false,
+  sortDirection: 'none',
+  align: 'left',
+})
+
+const emit = defineEmits<{
+  sort: []
+}>()
+
+const size = inject(UI_TABLE_SIZE_KEY, ref<UiTableSize>('md'))
+
+const heightClass = computed(() => (unref(size) === 'lg' ? 'h-12' : 'h-10'))
+
+const ariaSort = computed(() => {
+  if (!props.sortable) return undefined
+  return ({ asc: 'ascending', desc: 'descending', none: 'none' } as const)[props.sortDirection]
+})
 </script>
 
 <template>
   <th
-    :class="cellClasses"
-    class="px-3 py-1 text-left text-content-legends-bold-md text-text-neutral-tertiary"
+    scope="col"
+    :aria-sort="ariaSort"
+    :class="[heightClass, align === 'right' ? 'text-right' : 'text-left', sortable ? 'p-0' : 'px-3 pt-1 pb-2.5']"
+    class="align-bottom text-content-legends-bold-md text-text-neutral-tertiary"
   >
-    <slot />
+    <button
+      v-if="sortable"
+      type="button"
+      class="group/sort flex size-full items-end justify-start gap-2 rounded-row px-3 pt-1 pb-2.5 transition-colors hover:text-text-neutral-base focus-visible:text-text-neutral-base"
+      :class="align === 'right' ? 'flex-row-reverse text-right' : 'text-left'"
+      @click="emit('sort')"
+    >
+      <slot />
+      <span
+        class="size-3 shrink-0 transition-opacity"
+        :class="[
+          sortDirection === 'asc' ? 'i-ph-caret-up' : 'i-ph-caret-down',
+          sortDirection === 'none' ? 'opacity-0 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100' : 'opacity-100',
+        ]"
+      />
+    </button>
+    <slot v-else />
   </th>
 </template>

package/src/components/UiTable/UiTableRow.vue

@@ -1,26 +1,62 @@
 <script setup lang="ts">
-import { inject, computed, provide, unref, type Ref } from 'vue'
+import { computed } from 'vue'
 
 export interface UiTableRowProps {
-  isEven?: boolean
+  /**
+   * Marks the row as selected.
+   * @default false
+   */
+  selected?: boolean
+  /**
+   * Makes the row interactive: hover feedback, pointer cursor and keyboard focus.
+   * @default false
+   */
+  clickable?: boolean
+  /**
+   * The row hosts a link stretched over it: positions the row for the link
+   * and gives it the hover and focus tone.
+   * @default false
+   */
+  linked?: boolean
+  /**
+   * Takes part in the table zebra. Turn it off for a row that is not a data
+   * row, such as an overlay over the rows: it is neither striped nor counted.
+   * @default true
+   */
+  zebra?: boolean
 }
 
-const props = defineProps<UiTableRowProps>()
+const props = withDefaults(defineProps<UiTableRowProps>(), {
+  selected: false,
+  clickable: false,
+  linked: false,
+  zebra: true,
+})
 
-const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+const rowClasses = computed(() => ({ 'cursor-pointer': props.clickable, relative: props.linked }))
 
-provide('rowIsEven', props.isEven)
+const emit = defineEmits<{
+  click: [event: MouseEvent | KeyboardEvent]
+}>()
 
-const rowClasses = computed(() => ({
-  'h-12': unref(variant) === 'condensed',
-  'h-20': unref(variant) === 'large',
-}))
+function onActivate (event: MouseEvent | KeyboardEvent) {
+  if (!props.clickable) return
+  emit('click', event)
+}
 </script>
 
 <template>
   <tr
-    :class="rowClasses"
     class="group"
+    :class="rowClasses"
+    :data-clickable="clickable ? '' : undefined"
+    :data-linked="linked ? '' : undefined"
+    :data-selected="selected ? '' : undefined"
+    :data-zebra-skip="zebra ? undefined : ''"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onActivate"
+    @keydown.enter.self="onActivate"
+    @keydown.space.self.prevent="onActivate"
   >
     <slot />
   </tr>

package/src/components/UiTable/context.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type UiTableSize = 'md' | 'lg'
+
+export const UI_TABLE_SIZE_KEY: InjectionKey<Ref<UiTableSize>> = Symbol('ui-table-size')

package/src/components/UiTable/index.ts

@@ -1,6 +1,10 @@
 export { default as UiTable } from './UiTable.vue'
 export { default as UiTableHeader } from './UiTableHeader.vue'
 export { default as UiTableHeaderCell } from './UiTableHeaderCell.vue'
+export { default as UiTableActionsHeaderCell } from './UiTableActionsHeaderCell.vue'
 export { default as UiTableBody } from './UiTableBody.vue'
 export { default as UiTableRow } from './UiTableRow.vue'
 export { default as UiTableCell } from './UiTableCell.vue'
+export { default as UiTableActionsCell } from './UiTableActionsCell.vue'
+export type { UiTableSize } from './context'
+export type { UiTableSortDirection } from './UiTableHeaderCell.vue'

package/src/components/UiTabs/UiTabs.vue

@@ -23,22 +23,23 @@ export interface UiTabsProps {
   modelValue: string
   /** Size of the tabs */
   size?: 'sm' | 'md'
+  /** Horizontal alignment of the tabs inside the component */
+  align?: 'start' | 'center'
 }
 
 const props = withDefaults(defineProps<UiTabsProps>(), {
   size: 'md',
+  align: 'start',
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const slots = defineSlots<{
+defineSlots<{
   badge?(props: { tab: Tab }): unknown
 }>()
 
-const hasBadgeSlot = computed(() => !!slots.badge)
-
 const sizeClasses = computed(() => {
   return {
     container: 'gap-4',
@@ -124,17 +125,12 @@ function handleKeydown (event: KeyboardEvent, currentValue: string) {
 }
 
 function updateIndicatorPosition () {
-  if (!tabsContainer.value) return
-
   const activeButton = tabRefs.value.get(props.modelValue)
   if (!activeButton) return
 
-  const containerRect = tabsContainer.value.getBoundingClientRect()
-  const buttonRect = activeButton.getBoundingClientRect()
-
   indicatorStyle.value = {
-    transform: `translateX(${buttonRect.left - containerRect.left}px)`,
-    width: `${buttonRect.width}px`,
+    transform: `translateX(${activeButton.offsetLeft}px)`,
+    width: `${activeButton.offsetWidth}px`,
   }
 }
 
@@ -152,7 +148,7 @@ onMounted(async () => {
   updateIndicatorPosition()
 })
 
-useResizeObserver(tabsContainer, debouncedUpdatePosition)
+useResizeObserver(() => [tabsContainer.value, ...tabRefs.value.values()], debouncedUpdatePosition)
 
 onBeforeUnmount(() => {
   tabRefs.value.clear()
@@ -160,62 +156,61 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="ui-tabs border-b border-borders-neutral-light relative">
-    <div
-      ref="tabsContainer"
-      role="tablist"
-      class="flex items-center"
-      :class="sizeClasses.container"
-    >
-      <button
-        v-for="tab in tabs"
-        :key="tab.value"
-        :ref="(el) => setTabRef(el, tab.value)"
-        type="button"
-        role="tab"
-        :aria-selected="isActive(tab.value)"
-        :aria-disabled="tab.disabled"
-        :data-testid="tab.testId"
-        :tabindex="isActive(tab.value) ? 0 : -1"
-        class="relative outline-none flex items-center gap-2 cursor-pointer font-semibold transition-colors duration-150"
-        :class="[
-          sizeClasses.tab,
-          sizeClasses.text,
-          {
-            'text-actions-primary-idle': isActive(tab.value),
-            'text-actions-neutral-idle-alpha-strong hover:text-actions-neutral-idle': !isActive(tab.value) && !tab.disabled,
-            'text-actions-neutral-idle-alpha-strong cursor-not-allowed opacity-50': tab.disabled,
-          },
-        ]"
-        :disabled="tab.disabled"
-        @click="selectTab(tab.value)"
-        @keydown="handleKeydown($event, tab.value)"
+  <div class="ui-tabs border-b border-divider">
+    <!-- The 1px bottom overlap lays the indicator over the border -->
+    <div class="relative -mb-px overflow-x-auto [scrollbar-width:none]">
+      <div
+        ref="tabsContainer"
+        role="tablist"
+        class="flex items-center"
+        :class="[sizeClasses.container, { 'justify-center-safe': align === 'center' }]"
       >
-        <span
-          v-if="tab.icon"
-          :class="tab.icon"
-          class="size-5"
-        />
-        <span>{{ tab.label }}</span>
-        <div
-          v-if="hasBadgeSlot"
-          class="w-4 h-4"
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          :ref="(el) => setTabRef(el, tab.value)"
+          type="button"
+          role="tab"
+          :aria-selected="isActive(tab.value)"
+          :aria-disabled="tab.disabled"
+          :data-testid="tab.testId"
+          :tabindex="isActive(tab.value) ? 0 : -1"
+          class="relative outline-none flex shrink-0 items-center gap-2 whitespace-nowrap cursor-pointer font-semibold transition-colors duration-150"
+          :class="[
+            sizeClasses.tab,
+            sizeClasses.text,
+            {
+              'text-actions-primary-idle': isActive(tab.value),
+              'text-actions-neutral-idle-alpha-strong hover:text-actions-neutral-idle': !isActive(tab.value) && !tab.disabled,
+              'text-actions-neutral-idle-alpha-strong cursor-not-allowed opacity-50': tab.disabled,
+            },
+          ]"
+          :disabled="tab.disabled"
+          @click="selectTab(tab.value)"
+          @keydown="handleKeydown($event, tab.value)"
         >
+          <span
+            v-if="tab.icon"
+            :class="tab.icon"
+            class="size-5"
+          />
+          <span>{{ tab.label }}</span>
           <slot
             name="badge"
             :tab="tab"
           />
-        </div>
-      </button>
+        </button>
+      </div>
+
+      <!-- Sliding indicator -->
+      <div
+        data-testid="ui-tabs-indicator"
+        class="absolute bottom-0 left-0 h-0.5 bg-actions-primary-idle transition-[transform,width] duration-[250ms] ease-out will-change-[transform,width]"
+        :style="{
+          transform: indicatorStyle.transform,
+          width: indicatorStyle.width,
+        }"
+      />
     </div>
-
-    <!-- Sliding indicator -->
-    <div
-      class="absolute -bottom-px left-0 h-0.5 bg-actions-primary-idle transition-[transform,width] duration-[250ms] ease-out will-change-[transform,width]"
-      :style="{
-        transform: indicatorStyle.transform,
-        width: indicatorStyle.width,
-      }"
-    />
   </div>
 </template>

package/src/components/UiTag/UiTag.types.ts

@@ -0,0 +1,28 @@
+export type UiTagSize = 'xxs' | 'xs' | 'sm' | 'md'
+
+export type UiTagColor = 'primary' | 'neutral' | 'danger' | 'warning' | 'success' | 'neutral-invert'
+
+export type UiTagVariant = 'light' | 'strong'
+
+export interface UiTagProps {
+  /**
+   * Size of the tag
+   */
+  size?: UiTagSize
+  /**
+   * Color variant of the tag
+   */
+  color?: UiTagColor
+  /**
+   * Variant of the tag
+   */
+  variant?: UiTagVariant
+  /**
+   * Label text for the tag
+   */
+  label?: string
+  /**
+   * Whether to show hover effects
+   */
+  withHoverEffect?: boolean
+}