@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -26,6 +26,7 @@ import {
 import type { Color } from 'reka-ui'
 import { UiDropdown, UiDropdownTrigger, UiDropdownContent, UiDropdownItem } from '../UiDropdown'
 import type { ColorFormat, UiColorPickerPreset, UiColorPickerProps, UiColorPickerSwatchSize } from './types'
+import { useControlShape } from '../../composables/useControlShape'
 
 const props = withDefaults(defineProps<UiColorPickerProps>(), {
   modelValue: undefined,
@@ -54,8 +55,8 @@ const presetsLabel = computed<string | null>(() => {
 // Preset selector swatch sizes; the selection check icon scales to half the swatch.
 // maxPerRow is how many swatches (at that size + gap) fit the panel's content width.
 const SWATCH_SIZE_CLASSES: Record<UiColorPickerSwatchSize, { swatch: string; swatchPickerList: string; indicatorWrapper: string; indicator: string; maxPerRow: number }> = {
-  sm: { swatch: 'size-6', swatchPickerList: 'gap-2', indicatorWrapper: 'ring-2', indicator: 'h-3 w-3', maxPerRow: 8 },
-  lg: { swatch: 'size-12', swatchPickerList: 'gap-4', indicatorWrapper: 'ring-4', indicator: 'h-4 w-4', maxPerRow: 4 },
+  sm: { swatch: 'size-6', swatchPickerList: 'gap-2', indicatorWrapper: 'ring-2', indicator: 'size-3', maxPerRow: 8 },
+  lg: { swatch: 'size-12', swatchPickerList: 'gap-4', indicatorWrapper: 'ring-4', indicator: 'size-5', maxPerRow: 4 },
 }
 const swatchSizeClasses = computed(() => SWATCH_SIZE_CLASSES[props.presetConfig?.swatchSize ?? 'lg'])
 
@@ -124,10 +125,12 @@ const MODE_CHANNELS: Record<Exclude<ColorFormat, 'hex'>, ChannelDef[]> = {
   ],
 }
 
+const fieldShape = useControlShape('field', 'md')
+
 // Shared styling for each bordered value box (the hex field and each channel field).
 // The mode switcher is a separate bordered box (the dropdown trigger draws its own).
 const FIELD_BOX_CLASS =
-  'flex h-full items-center rounded-lg border border-solid border-borders-neutral-strong bg-actions-neutral-idle-alpha-light transition-all focus-within:border-actions-primary-idle-alpha-strong'
+  'flex h-full items-center border border-solid border-control-field-border bg-control-field-bg transition-all focus-within:bg-control-field-bg-focus has-[input:focus-visible]:focus-ring'
 
 // Detect a value's mode. reka represents hex as space 'rgb', so hex must be
 // matched on the '#' prefix; rgb/hsl/hsb (and hsv→hsb) come from normalizeColor.
@@ -268,14 +271,14 @@ watch(
       color-space="hsb"
       x-channel="saturation"
       y-channel="brightness"
-      class="relative h-[189px] w-full rounded-md"
+      class="relative h-[189px] w-full rounded-row"
       :class="{ 'cursor-not-allowed': disabled }"
       @update:color="onColorUpdate"
       @change-end="onCommit"
     >
       <ColorAreaArea
         :style="style"
-        class="absolute inset-0 rounded-md"
+        class="absolute inset-0 rounded-row"
       >
         <ColorAreaThumb class="group size-6 rounded-full border-4 border-actions-neutral-invert-idle transition-shadow hover:cursor-pointer hover:shadow-md">
           <span class="pointer-events-none absolute -inset-1 rounded-full bg-actions-primary-hover-overlay opacity-0 transition-opacity group-hover:opacity-100" />
@@ -322,13 +325,13 @@ watch(
     <div
       v-if="showCustomControls"
       data-testid="ui-color-picker-field"
-      class="flex h-10 w-full items-center gap-2"
-      :class="{ 'cursor-not-allowed opacity-50': disabled }"
+      class="flex w-full items-center gap-2"
+      :class="[fieldShape.height, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <!-- Mode switcher — its own bordered box; hidden when only one mode is available -->
       <div
         v-if="showSwitcher"
-        class="h-full w-20 shrink-0"
+        class="h-full w-21 shrink-0"
       >
         <UiDropdown
           v-model="colorMode"
@@ -357,12 +360,12 @@ watch(
         :model-value="internalColor"
         :disabled="disabled"
         color-space="hsb"
-        :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 gap-1.5 px-3']"
+        :class="[FIELD_BOX_CLASS, fieldShape.radius, 'min-w-0 flex-1 gap-1.5 px-3']"
         @update:color="onColorUpdate"
       >
         <ColorSwatch
           :color="internalColor"
-          class="size-4 shrink-0 rounded-[5px] border border-borders-neutral-light bg-(--reka-color-swatch-color)"
+          class="size-4 shrink-0 rounded-check border border-borders-neutral-light bg-(--reka-color-swatch-color)"
         />
         <Label
           :for="fieldId"
@@ -386,7 +389,7 @@ watch(
           :disabled="disabled"
           :color-space="colorMode"
           :channel="ch.channel"
-          :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 justify-center px-2']"
+          :class="[FIELD_BOX_CLASS, fieldShape.radius, 'min-w-0 flex-1 justify-center px-2']"
           @update:color="onColorUpdate"
         >
           <ColorFieldInput
@@ -456,7 +459,7 @@ watch(
                 class="absolute inset-0 flex items-center justify-center rounded-full bg-actions-neutral-hover-overlay opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
               >
                 <div
-                  class="i-ls-check-circle-fill text-text-neutral-invert-tertiary"
+                  class="i-ph-check-circle-fill text-text-neutral-invert-tertiary"
                   :class="swatchSizeClasses.indicator"
                 />
               </span>
@@ -472,7 +475,7 @@ watch(
             :class="swatchSizeClasses.indicatorWrapper"
           >
             <div
-              class="i-ls-check-circle-fill text-text-neutral-invert-base"
+              class="i-ph-check-circle-fill text-text-neutral-invert-base"
               :class="swatchSizeClasses.indicator"
             />
           </span>

package/src/components/UiCombobox/UiCombobox.types.ts

@@ -0,0 +1,52 @@
+import type { FieldSize } from '../../composables/useControlShape'
+
+export type UiComboboxSize = FieldSize
+
+export interface UiComboboxOption {
+  value: string
+  label: string
+  description?: string
+  disabled?: boolean
+  /** Shown instead of the description, typically why the option is disabled. */
+  hint?: string
+}
+
+export interface UiComboboxGroup<T extends UiComboboxOption = UiComboboxOption> {
+  label: string
+  options: T[]
+}
+
+/** A selectable row after the options, picked like an option but emitted as `action`. `icon` is a complete icon class such as `i-ph-user-plus`. */
+export interface UiComboboxAction {
+  id: string
+  label: string
+  icon?: string
+  disabled?: boolean
+}
+
+export interface UiComboboxProps<T extends UiComboboxOption = UiComboboxOption> {
+  modelValue?: string
+  items?: UiComboboxGroup<T>[]
+  /** Selectable rows after the options. */
+  actions?: UiComboboxAction[]
+  loading?: boolean
+  size?: UiComboboxSize
+  placeholder?: string
+  disabled?: boolean
+  label?: string
+  ariaLabel?: string
+  /** Translated result count, announced through a polite live region while the list is open. */
+  resultsLabel?: string
+  id?: string
+  /** Rows shown before the list scrolls, with a peek of the next one. All rows show when unset. */
+  maxVisibleOptions?: number
+  /** Options show a checkbox and the list stays open after a pick, so several can be picked in a row. */
+  multiple?: boolean
+  /** Values of the options shown checked when `multiple` is set. Picking one of them emits `deselect`. */
+  selected?: string[]
+  /**
+   * 'trigger' matches the list to the field. 'compact' caps it at 480px, so on a wide field part of the
+   * page behind stays visible, such as a list that updates while picking.
+   */
+  width?: 'trigger' | 'compact'
+}

package/src/components/UiCombobox/UiCombobox.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts" generic="T extends UiComboboxOption">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxViewport,
+} from 'reka-ui'
+import { computed, nextTick, ref, watch } from 'vue'
+import CheckboxGlyph from '../UiInputCheckbox/CheckboxGlyph.vue'
+import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import { useControlShape } from '../../composables/useControlShape'
+import type { UiComboboxAction, UiComboboxOption, UiComboboxProps, UiComboboxSize } from './UiCombobox.types'
+
+const props = withDefaults(defineProps<UiComboboxProps<T>>(), {
+  modelValue: '',
+  items: () => [],
+  actions: () => [],
+  loading: false,
+  size: 'md',
+  placeholder: undefined,
+  disabled: false,
+  label: undefined,
+  ariaLabel: undefined,
+  resultsLabel: undefined,
+  id: undefined,
+  maxVisibleOptions: undefined,
+  multiple: false,
+  selected: () => [],
+  width: 'trigger',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:open': [open: boolean]
+  'select': [option: T]
+  'deselect': [option: T]
+  'action': [id: string]
+}>()
+
+const slots = defineSlots<{
+  item?: (props: { option: T }) => unknown
+  empty?: () => unknown
+  action?: (props: { action: UiComboboxAction }) => unknown
+  /** Pinned under the options, outside their scroll: `close` closes the list. Hidden from assistive tech, so keep anything focusable out of the Tab order (`tabindex="-1"`) and redundant with Escape. */
+  footer?: (props: { close: () => void }) => unknown
+}>()
+
+const FIELD_PADDING: Record<UiComboboxSize, string> = {
+  sm: 'px-2 gap-1',
+  md: 'px-3 gap-1.5',
+  lg: 'px-4 gap-2',
+  xl: 'px-4 gap-2',
+}
+
+const ITEM_CLASSES = 'focus-indicator-none group/option flex items-center gap-2 min-h-10 px-3 py-1.5 rounded-row cursor-pointer outline-hidden transition-colors duration-150 text-content-text-md-regular text-text-neutral-base data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay data-disabled:opacity-50 data-disabled:cursor-not-allowed'
+
+const shape = useControlShape('field', () => props.size)
+const open = ref(false)
+
+const fieldClasses = computed(() => [
+  'relative flex items-center w-full border transition-all duration-150',
+  'bg-control-field-bg border-control-field-border',
+  'focus-within:bg-control-field-bg-focus has-[input:focus-visible]:focus-ring',
+  "before:content-[''] before:absolute before:-inset-px before:rounded-[inherit] before:pointer-events-none before:opacity-0 before:transition-opacity before:bg-actions-neutral-hover-overlay [&>*]:relative",
+  props.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:not-focus-within:before:opacity-100',
+  shape.value.height,
+  shape.value.radius,
+  FIELD_PADDING[props.size],
+])
+
+const WIDTH_CLASSES = {
+  trigger: 'w-(--reka-combobox-trigger-width)',
+  compact: 'w-[min(var(--reka-combobox-trigger-width),30rem)]',
+} as const
+
+const options = computed(() => props.items.flatMap(group => group.options))
+const hasContent = computed(() => options.value.length > 0 || props.actions.length > 0 || (!!slots.empty && !props.loading))
+
+const viewport = ref<{ $el: HTMLElement } | null>(null)
+const viewportMaxHeight = ref<string>()
+
+async function fitVisibleOptions () {
+  viewportMaxHeight.value = undefined
+  if (!open.value || !props.maxVisibleOptions) return
+  await nextTick()
+  const element = viewport.value?.$el
+  const peeked = element?.querySelectorAll('[role=option]')[props.maxVisibleOptions]
+  if (!element || !peeked) return
+  const row = peeked.getBoundingClientRect()
+  viewportMaxHeight.value = `${row.top + row.height / 2 - element.getBoundingClientRect().top + element.scrollTop}px`
+}
+
+watch([open, () => props.items, () => props.actions, () => props.maxVisibleOptions], fitVisibleOptions, { flush: 'post' })
+
+function onOpenChange (value: boolean) {
+  if (open.value === value) return
+  open.value = value
+  emit('update:open', value)
+}
+
+defineExpose({
+  /** Closes the list, for a pick that leads somewhere else, such as a dialog. */
+  close: () => onOpenChange(false),
+})
+
+// Reka hands back the whole checked list; the one value that differs from `selected` is the pick.
+function onMultipleValueChange (values: unknown[]) {
+  const action = props.actions.find(candidate => values.includes(candidate))
+  if (action) {
+    emit('action', action.id)
+    emit('update:modelValue', '')
+    onOpenChange(false)
+    return
+  }
+  const added = values.find(value => !props.selected.includes(value as string))
+  const removed = props.selected.find(value => !values.includes(value))
+  const picked = options.value.find(option => option.value === (added ?? removed))
+  if (!picked) return
+  if (added === undefined) emit('deselect', picked)
+  else emit('select', picked)
+}
+
+function onValueChange (value: unknown) {
+  if (props.multiple) {
+    onMultipleValueChange(Array.isArray(value) ? value : [])
+    return
+  }
+  if (props.actions.includes(value as UiComboboxAction)) {
+    emit('action', (value as UiComboboxAction).id)
+  } else {
+    const picked = options.value.find(option => option.value === value)
+    if (picked) emit('select', picked)
+  }
+  emit('update:modelValue', '')
+}
+</script>
+
+<template>
+  <UiFieldWrapper
+    :id="id"
+    :label="label"
+  >
+    <template #default="{ fieldId }">
+      <ComboboxRoot
+        :model-value="multiple ? selected : null"
+        :open="open"
+        :multiple="multiple"
+        :disabled="disabled"
+        ignore-filter
+        open-on-click
+        :reset-search-term-on-blur="false"
+        :reset-search-term-on-select="false"
+        @update:model-value="onValueChange"
+        @update:open="onOpenChange"
+      >
+        <ComboboxAnchor :class="fieldClasses">
+          <ComboboxInput
+            :id="fieldId"
+            :model-value="modelValue"
+            :placeholder="placeholder"
+            :aria-label="ariaLabel"
+            :aria-expanded="open && hasContent"
+            class="flex-1 min-w-0 bg-transparent outline-none text-content-text-md-regular text-text-neutral-base placeholder:text-control-placeholder disabled:cursor-not-allowed"
+            data-testid="ui-combobox-input"
+            @update:model-value="emit('update:modelValue', $event)"
+          />
+          <span
+            v-if="loading"
+            class="size-4 shrink-0 rounded-full border-2 border-current border-t-transparent animate-spin text-text-neutral-tertiary"
+            data-testid="ui-combobox-loader"
+          />
+        </ComboboxAnchor>
+
+        <ComboboxPortal>
+          <ComboboxContent
+            position="popper"
+            align="start"
+            :side-offset="8"
+            data-colors-semantic="light"
+            :aria-busy="loading || undefined"
+            :hide-when-empty="!hasContent"
+            :class="WIDTH_CLASSES[width]"
+            class="focus-indicator-none z-overlay flex flex-col p-1 rounded-container border border-container-border bg-surface-neutral-bg-main shadow-shadows-drop-shadow-lg max-w-(--reka-combobox-content-available-width) max-h-(--reka-combobox-content-available-height)"
+          >
+            <ComboboxViewport
+              ref="viewport"
+              class="flex flex-col gap-1 min-h-0 max-h-[300px] rounded-row"
+              :style="{ maxHeight: viewportMaxHeight }"
+            >
+              <div
+                v-if="slots.empty && options.length === 0 && !loading"
+                class="px-3 py-2 text-content-text-md-regular text-text-neutral-secondary"
+                data-testid="ui-combobox-empty"
+              >
+                <slot name="empty" />
+              </div>
+
+              <ComboboxGroup
+                v-for="(group, index) in items"
+                :key="`${index}-${group.label}`"
+                class="flex flex-col gap-1"
+              >
+                <ComboboxLabel class="px-3 pt-2 pb-1 text-content-legends-bold-md text-text-neutral-tertiary">
+                  {{ group.label }}
+                </ComboboxLabel>
+                <ComboboxItem
+                  v-for="option in group.options"
+                  :key="option.value"
+                  :value="option.value"
+                  :disabled="option.disabled"
+                  :text-value="option.label"
+                  :class="ITEM_CLASSES"
+                  data-testid="ui-combobox-option"
+                >
+                  <CheckboxGlyph
+                    v-if="multiple"
+                    :checked="selected.includes(option.value)"
+                    :disabled="option.disabled"
+                  />
+                  <slot
+                    name="item"
+                    :option="option"
+                  >
+                    <span class="flex flex-col min-w-0 py-1">
+                      <span class="truncate text-content-text-md-medium">{{ option.label }}</span>
+                      <span
+                        v-if="option.hint || option.description"
+                        class="truncate text-content-legends-medium-md text-text-neutral-secondary"
+                      >
+                        {{ option.hint ?? option.description }}
+                      </span>
+                    </span>
+                  </slot>
+                </ComboboxItem>
+              </ComboboxGroup>
+
+              <ComboboxItem
+                v-for="action in actions"
+                :key="action.id"
+                :value="action"
+                :disabled="action.disabled"
+                :text-value="action.label"
+                :class="ITEM_CLASSES"
+                data-testid="ui-combobox-action"
+              >
+                <slot
+                  name="action"
+                  :action="action"
+                >
+                  <span
+                    v-if="action.icon"
+                    class="size-4 shrink-0"
+                    :class="action.icon"
+                    aria-hidden="true"
+                  />
+                  <span class="truncate">{{ action.label }}</span>
+                </slot>
+              </ComboboxItem>
+            </ComboboxViewport>
+
+            <!--
+              The whole card is the listbox, which may only hold options: the footer is a pointer shortcut,
+              hidden from assistive tech, and Escape stays the keyboard way out. pointerdown is prevented so a
+              click here keeps the focus in the field.
+            -->
+            <div
+              v-if="slots.footer"
+              class="flex items-center gap-2 shrink-0 -mx-1 -mb-1 mt-1 pl-4 pr-2 py-2 border-t border-container-border"
+              aria-hidden="true"
+              data-testid="ui-combobox-footer"
+              @pointerdown.prevent
+            >
+              <slot
+                name="footer"
+                :close="() => onOpenChange(false)"
+              />
+            </div>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </ComboboxRoot>
+
+      <div
+        class="sr-only"
+        aria-live="polite"
+        data-testid="ui-combobox-live"
+      >
+        {{ open && resultsLabel ? resultsLabel : '' }}
+      </div>
+    </template>
+  </UiFieldWrapper>
+</template>

package/src/components/UiCombobox/index.ts

@@ -0,0 +1,2 @@
+export { default as UiCombobox } from './UiCombobox.vue'
+export * from './UiCombobox.types'

package/src/components/UiDataTable/UiDataTable.types.ts

@@ -0,0 +1,47 @@
+export interface UiDataTableColumn<TData> {
+  /**
+   * Unique column id. Also names the per-column slots:
+   * `#cell-<id>` and `#header-<id>`.
+   */
+  id: string
+  /** Header label. An empty string renders an empty header cell. */
+  header: string
+  /**
+   * Row property rendered by default. Omit for columns rendered
+   * entirely through their `#cell-<id>` slot.
+   */
+  accessorKey?: keyof TData & string
+  /**
+   * Shows the sort affordance on the header. Sorting logic stays in the
+   * consumer: bind `v-model:sorting` and sort/refetch the data yourself.
+   * @default false
+   */
+  sortable?: boolean
+  /**
+   * Content alignment. Textual data stays left-aligned; reserve `right`
+   * for numeric data.
+   * @default 'left'
+   */
+  align?: 'left' | 'right'
+  /** Fixed column width as a CSS value (e.g. '160px', '20%'). */
+  width?: string
+  /**
+   * Minimum column width as a CSS length (e.g. '160px'). The column never
+   * shrinks below it: when the columns do not fit, the table grows wider
+   * than its region, which scrolls horizontally.
+   */
+  minWidth?: string
+  /**
+   * Keeps the header and the values of the column on one line: the column
+   * grows to fit them instead of wrapping, and the table grows wider than
+   * its region when needed, as with `minWidth`.
+   * @default false
+   */
+  nowrap?: boolean
+}
+
+export interface UiDataTableSort {
+  /** Column id being sorted. */
+  id: string
+  direction: 'asc' | 'desc'
+}