@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiTable/UiTable.vue

@@ -1,24 +1,114 @@
 <script setup lang="ts">
 import { provide, toRef } from 'vue'
+import { UI_TABLE_SIZE_KEY, type UiTableSize } from './context'
 
 export interface UiTableProps {
-  variant?: 'condensed' | 'large'
-  hoverEffect?: boolean
+  /**
+   * Row heights: `md` = 40px header / 48px rows, `lg` = 48px header / 64px rows.
+   * @default 'md'
+   */
+  size?: UiTableSize
+  /**
+   * Alternating row backgrounds. Preferred over row dividers for readability.
+   * @default true
+   */
+  zebra?: boolean
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
-  variant: 'condensed',
-  hoverEffect: false,
+  size: 'md',
+  zebra: true,
 })
 
-provide('tableVariant', toRef(props, 'variant'))
-provide('hoverEffect', toRef(props, 'hoverEffect'))
+provide(UI_TABLE_SIZE_KEY, toRef(props, 'size'))
 </script>
 
 <template>
-  <div class="w-full">
-    <table class="w-full border-separate border-spacing-0">
+  <div
+    class="ui-table relative flow-root w-fit min-w-full overflow-y-clip"
+    :class="{ 'ui-table--zebra': zebra }"
+  >
+    <table class="-my-0.5 w-full border-separate border-spacing-x-0 border-spacing-y-0.5">
       <slot />
     </table>
   </div>
 </template>
+
+<style scoped>
+/*
+ * Row backgrounds live here rather than on the cells so the zebra stripe,
+ * hover and selected overlays stack the way the Figma spec layers them:
+ * zebra is a background-color, state overlays are background-image
+ * gradients painted on top of it.
+ */
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])) > td),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])) > td) {
+  background-color: var(--color-surface-neutral-alpha-100);
+}
+
+.ui-table :deep(tbody > tr[data-clickable]:hover > td),
+.ui-table :deep(tbody > tr[data-clickable]:focus-visible > td),
+.ui-table :deep(tbody > tr[data-linked]:hover > td),
+.ui-table :deep(tbody > tr[data-linked]:focus-within > td),
+.ui-table :deep(tbody > tr:has(> .ui-table__actions-cell):hover > td) {
+  background-image: linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay));
+}
+
+.ui-table :deep(tbody > tr[data-selected] > td),
+.ui-table :deep(tbody > tr[data-selected]:hover > td) {
+  background-image: linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay));
+}
+
+.ui-table :deep(tbody > tr > td:first-child) {
+  border-top-left-radius: var(--radius-table-row);
+  border-bottom-left-radius: var(--radius-table-row);
+}
+
+/*
+ * A zero-width trailing cell cannot show the row end, so the cell before it
+ * rounds it. A menu column is zero-width when no row has a menu.
+ */
+.ui-table :deep(tbody > tr > td:last-child),
+.ui-table :deep(tbody > tr > td:has(+ .ui-table__zero-width-cell)),
+.ui-table :deep(table:not(:has(.ui-table__menu-cell)) > tbody > tr > td:has(+ .ui-table__empty-menu-cell)) {
+  border-top-right-radius: var(--radius-table-row);
+  border-bottom-right-radius: var(--radius-table-row);
+}
+
+/*
+ * The trailing actions backdrop (default variant only) masks the cells it
+ * overlays, so it mirrors the effective row background: opaque base plus
+ * the same stacked overlays. The floating variant carries no backdrop —
+ * its content (e.g. a UiActionBar) brings its own surface.
+ */
+.ui-table :deep(.ui-table__actions--backdrop) {
+  background-color: var(--color-surface-neutral-bg-main);
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])) .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])) .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+
+.ui-table :deep(tbody > tr:hover .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay));
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr:nth-child(even of :not([data-zebra-skip])):hover .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr:nth-child(odd of :not([data-zebra-skip])):hover .ui-table__actions--backdrop) {
+  background-image:
+    linear-gradient(var(--color-actions-primary-hover-overlay), var(--color-actions-primary-hover-overlay)),
+    linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+
+.ui-table :deep(tbody > tr[data-selected]:hover .ui-table__actions--backdrop) {
+  background-image: linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay));
+}
+
+.ui-table--zebra :deep(tbody:not([data-zebra-offset]) > tr[data-selected]:nth-child(even of :not([data-zebra-skip])):hover .ui-table__actions--backdrop),
+.ui-table--zebra :deep(tbody[data-zebra-offset] > tr[data-selected]:nth-child(odd of :not([data-zebra-skip])):hover .ui-table__actions--backdrop) {
+  background-image:
+    linear-gradient(var(--color-actions-primary-active-overlay), var(--color-actions-primary-active-overlay)),
+    linear-gradient(var(--color-surface-neutral-alpha-100), var(--color-surface-neutral-alpha-100));
+}
+</style>

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'