@livestorm/ui-vue 3.0.0 → 4.0.0

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'
+}