@pgcorp/ui-kit 0.1.0

package/src/components/shared/controls/SMenuSurface.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    ref="surfaceRef"
+    v-bind="ownedAttrs.bindings()"
+    class="s-menu-surface"
+    :data-density="density"
+    :data-orientation="orientation"
+    :data-menu-depth="depth"
+    role="menu"
+    :aria-label="label"
+    :aria-orientation="orientation"
+    @keydown="handleKeydown"
+    @focusout="handleFocusout"
+  >
+    <template v-for="item in items" :key="item.id">
+      <SMenuSeparator v-if="item.kind === 'separator'" :entry-id="item.id" />
+      <SMenuItem
+        v-else
+        :entry="item"
+        :submenu-open="activeSubmenu?.id === item.id"
+        @select="selectItem(item, $event)"
+        @open-submenu="openSubmenu(item.id, true)"
+        @pointer-intent="handlePointerIntent(item)"
+      />
+    </template>
+    <teleport to="body">
+      <SMenuLayer
+        v-if="activeSubmenu"
+        ref="submenuLayerRef"
+        kind="submenu"
+        :landmark-label="`${label}: ${activeSubmenu.label}`"
+        :position="submenuPosition"
+        :z-index="submenuZIndex"
+      >
+        <SMenuSurface
+          ref="submenuSurfaceRef"
+          :label="`${label}: ${activeSubmenu.label}`"
+          :items="activeSubmenu.children"
+          :density="density"
+          orientation="vertical"
+          :autofocus="submenuAutofocus"
+          @escape="closeSubmenu('escape')"
+          @submenu-back="closeSubmenu('escape')"
+          @dismiss-tree="emit('dismiss-tree')"
+          @select="forwardSelection"
+          @tab="emit('tab', $event)"
+        />
+      </SMenuLayer>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { useMenuLayer } from '../../../internal/useMenuLayer'
+import { menuContextKey, menuDepthKey } from '../_internal/menuContext'
+import type { MenuDensity, MenuItemRegistration } from '../_internal/menuContext'
+import SMenuItem from '../_internal/SMenuItem.vue'
+import SMenuLayer from '../_internal/SMenuLayer.vue'
+import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
+import SMenuSeparator from '../_internal/SMenuSeparator.vue'
+import {
+  validateSMenuEntries,
+  type SMenuActivationEvent,
+  type SMenuEntry,
+  type SMenuInteractiveEntry,
+  type SMenuSelectableEntry,
+  type SMenuSubmenu,
+} from './menu'
+
+export type SMenuDensity = MenuDensity
+
+defineOptions({ inheritAttrs: false })
+export interface Props {
+  label: string
+  items: readonly SMenuEntry[]
+  density?: SMenuDensity
+  orientation?: 'vertical' | 'horizontal'
+  autofocus?: boolean
+  initialFocus?: 'first' | 'last'
+}
+
+/** Типизированная focus-поверхность для menu owners без DOM queries. / Typed focus surface for menu owners without DOM queries. */
+export interface SMenuSurfaceApi {
+  focusFirst: () => void
+  focusLast: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  density: 'comfortable',
+  orientation: 'vertical',
+  autofocus: false,
+  initialFocus: 'first',
+})
+const emit = defineEmits<{
+  escape: []
+  'focus-exit': [event: FocusEvent]
+  select: [item: SMenuSelectableEntry, event: SMenuActivationEvent]
+  tab: [event: KeyboardEvent]
+  'submenu-back': []
+  'dismiss-tree': []
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SMenuSurface', owner: 'menu root' })
+useInteractiveLeafRegistration({ owner: 'SMenuSurface' })
+
+const parentDepth = inject(menuDepthKey, -1)
+const depth = parentDepth + 1
+provide(menuDepthKey, depth)
+const surfaceRef = ref<HTMLElement | null>(null)
+const registrations = new Map<string, MenuItemRegistration>()
+provide(menuContextKey, {
+  density: toRef(props, 'density'),
+  register: (registration) => {
+    if (registrations.has(registration.entryId)) {
+      throw new Error(`SMenuSurface: duplicate mounted entry id '${registration.entryId}'`)
+    }
+    registrations.set(registration.entryId, registration)
+    return () => registrations.delete(registration.entryId)
+  },
+})
+
+const activeSubmenuId = ref<string | null>(null)
+const submenuAutofocus = ref(true)
+const submenuLayerRef = ref<SMenuLayerApi | null>(null)
+const submenuSurfaceRef = ref<SMenuSurfaceApi | null>(null)
+const submenuLayerElement = computed(() => submenuLayerRef.value?.getElement() ?? null)
+const {
+  position: submenuPosition,
+  zIndex: submenuZIndex,
+  open: openSubmenuLayer,
+  close: closeSubmenuLayer,
+} = useMenuLayer(submenuLayerElement, {
+  onDismiss: (reason) => {
+    activeSubmenuId.value = null
+    if (reason === 'outside') emit('dismiss-tree')
+  },
+})
+const activeSubmenu = computed<SMenuSubmenu | null>(() => {
+  const item = props.items.find((entry) => entry.id === activeSubmenuId.value)
+  return item?.kind === 'submenu' ? item : null
+})
+
+let typeaheadBuffer = ''
+let typeaheadTimer: ReturnType<typeof setTimeout> | null = null
+
+const orderedRegistrations = (): MenuItemRegistration[] => [...registrations.values()]
+  .filter((item) => item.element().isConnected)
+  .sort((left, right) => {
+    const relation = left.element().compareDocumentPosition(right.element())
+    if (relation & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+    if (relation & Node.DOCUMENT_POSITION_PRECEDING) return 1
+    return 0
+  })
+
+const focusItem = (items: MenuItemRegistration[], index: number): void => {
+  for (const item of items) item.setTabStop(false)
+  const item = items[index]
+  if (!item) return
+  item.setTabStop(true)
+  item.focus()
+}
+
+const focusFirst = (): void => {
+  const items = orderedRegistrations()
+  if (items.length > 0) focusItem(items, 0)
+}
+const focusLast = (): void => {
+  const items = orderedRegistrations()
+  if (items.length > 0) focusItem(items, items.length - 1)
+}
+
+const validateContract = (): void => {
+  if (typeof props.label !== 'string' || !props.label.trim()) {
+    throw new TypeError('SMenuSurface: label must be a non-empty string')
+  }
+  validateSMenuEntries(props.items)
+}
+
+const moveFocus = (direction: 1 | -1): void => {
+  const items = orderedRegistrations()
+  if (items.length === 0) return
+  const currentIndex = items.findIndex((item) => item.isFocused())
+  const origin = currentIndex < 0 ? (direction === 1 ? -1 : 0) : currentIndex
+  focusItem(items, (origin + direction + items.length) % items.length)
+}
+
+const focusByTypeahead = (key: string): void => {
+  const normalizedKey = key.toLocaleLowerCase()
+  typeaheadBuffer += normalizedKey
+  if (typeaheadTimer) clearTimeout(typeaheadTimer)
+  typeaheadTimer = setTimeout(() => {
+    typeaheadBuffer = ''
+    typeaheadTimer = null
+  }, 500)
+
+  const search = [...typeaheadBuffer].every((character) => character === normalizedKey)
+    ? normalizedKey
+    : typeaheadBuffer
+  const items = orderedRegistrations()
+  if (items.length === 0) return
+  const currentIndex = items.findIndex((item) => item.isFocused())
+  const ordered = [...items.slice(currentIndex + 1), ...items.slice(0, currentIndex + 1)]
+  const match = ordered.find((item) => item.label().trim().toLocaleLowerCase().startsWith(search))
+  if (match) focusItem(items, items.indexOf(match))
+}
+
+async function openSubmenu(entryId: string, autofocus: boolean): Promise<void> {
+  const entry = props.items.find((candidate) => candidate.id === entryId)
+  const registration = registrations.get(entryId)
+  if (entry?.kind !== 'submenu' || entry.disabled || !registration) return
+  if (activeSubmenuId.value === entryId) {
+    if (autofocus) await nextTick(() => submenuSurfaceRef.value?.focusFirst())
+    return
+  }
+  if (activeSubmenuId.value) closeSubmenuLayer('outside')
+  submenuAutofocus.value = autofocus
+  activeSubmenuId.value = entryId
+  await openSubmenuLayer(
+    { type: 'element', element: registration.element(), align: 'left', placement: 'inline' },
+    registration.element(),
+  )
+  if (autofocus) await nextTick(() => submenuSurfaceRef.value?.focusFirst())
+}
+
+function closeSubmenu(reason: 'escape' | 'outside'): void {
+  if (!activeSubmenuId.value) return
+  closeSubmenuLayer(reason)
+  activeSubmenuId.value = null
+}
+
+function handlePointerIntent(item: SMenuInteractiveEntry): void {
+  if (item.kind === 'submenu' && !item.disabled) {
+    void openSubmenu(item.id, false)
+  } else if (activeSubmenuId.value) closeSubmenu('outside')
+}
+
+function selectItem(item: SMenuInteractiveEntry, event: SMenuActivationEvent): void {
+  if (item.kind === 'submenu' || item.disabled) return
+  emit('select', item, event)
+}
+
+function forwardSelection(item: SMenuSelectableEntry, event: SMenuActivationEvent): void {
+  emit('select', item, event)
+}
+
+function focusedRegistration(): MenuItemRegistration | undefined {
+  return orderedRegistrations().find((item) => item.isFocused())
+}
+
+const handleKeydown = (event: KeyboardEvent): void => {
+  const eventTarget = event.target
+  if (
+    event.currentTarget !== eventTarget
+    && !orderedRegistrations().some((registration) => registration.ownsEventTarget(eventTarget))
+  ) return
+  if (event.key === 'Tab') {
+    emit('tab', event)
+    return
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('escape')
+    return
+  }
+  const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+  const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+  if (props.orientation === 'vertical' && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+    const current = focusedRegistration()
+    event.preventDefault()
+    if (event.key === 'ArrowRight' && current?.hasSubmenu()) void openSubmenu(current.entryId, true)
+    else if (event.key === 'ArrowLeft' && depth > 0) emit('submenu-back')
+    return
+  }
+  if (event.key === nextKey || event.key === previousKey) {
+    event.preventDefault()
+    moveFocus(event.key === nextKey ? 1 : -1)
+    return
+  }
+  if (props.orientation === 'horizontal' && event.key === 'ArrowDown') {
+    const current = focusedRegistration()
+    if (current?.hasSubmenu()) {
+      event.preventDefault()
+      void openSubmenu(current.entryId, true)
+    }
+    return
+  }
+  if (event.key === 'Home' || event.key === 'End') {
+    event.preventDefault()
+    if (event.key === 'Home') focusFirst()
+    else focusLast()
+    return
+  }
+  if (event.key === 'Enter' || event.key === ' ') {
+    const current = focusedRegistration()
+    if (current) {
+      current.activate(event)
+    }
+    return
+  }
+  if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+    focusByTypeahead(event.key)
+  }
+}
+
+const handleFocusout = (event: FocusEvent): void => {
+  const nextTarget = event.relatedTarget
+  if (nextTarget instanceof Node && (
+    surfaceRef.value?.contains(nextTarget) || submenuLayerElement.value?.contains(nextTarget)
+  )) return
+  emit('focus-exit', event)
+}
+
+onMounted(() => {
+  if (props.autofocus) nextTick(props.initialFocus === 'last' ? focusLast : focusFirst)
+})
+watch(
+  () => [props.label, props.items] as const,
+  () => {
+    validateContract()
+    if (activeSubmenuId.value && !activeSubmenu.value) closeSubmenu('outside')
+  },
+  { immediate: true, deep: true },
+)
+onBeforeUnmount(() => {
+  if (typeaheadTimer) clearTimeout(typeaheadTimer)
+})
+
+defineExpose<SMenuSurfaceApi>({ focusFirst, focusLast })
+</script>
+
+<style lang="postcss" src="./SMenuSurface.css" scoped></style>

package/src/components/shared/controls/SSegmentedControl.css

@@ -0,0 +1,38 @@
+@reference "../../../styles/reference.css";
+
+.s-segmented-control__group {
+  @apply inline-grid min-w-0 grid-flow-col auto-cols-fr rounded-md border border-surface-300 bg-surface-100 p-0.5 shadow-sm dark:border-surface-700 dark:bg-surface-900;
+}
+
+.s-segmented-control__item {
+  @apply min-w-0 rounded-md border border-transparent bg-transparent px-5 py-2.5 text-sm font-semibold text-surface-600 hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-50 dark:text-surface-300 dark:hover:bg-surface-800;
+}
+
+.s-segmented-control__item:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-segmented-control__item[data-size='sm'] {
+  @apply px-2.5 py-1.5 text-xs;
+}
+
+.s-segmented-control__item[aria-checked='true'] {
+  @apply bg-primary-50 text-primary-700 dark:bg-primary-950/40 dark:text-primary-300;
+}
+
+.s-segmented-control__group[data-invalid='true'] {
+  @apply border-danger-500 dark:border-danger-400;
+}
+
+.s-segmented-control__group[data-readonly='true'] .s-segmented-control__item {
+  @apply cursor-default hover:bg-transparent dark:hover:bg-transparent;
+}
+
+.s-segmented-control__group[data-readonly='true'] .s-segmented-control__item[aria-checked='true'] {
+  @apply hover:bg-primary-50 dark:hover:bg-primary-950/40;
+}
+
+.s-segmented-control__group[data-option-wrap='nowrap'] .s-segmented-control__item {
+  white-space: nowrap;
+}

package/src/components/shared/controls/SSegmentedControl.vue

@@ -0,0 +1,134 @@
+<template>
+  <SFieldGroup
+    v-bind="ownedAttrs.bindings()"
+    :id="id"
+    :label="label"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :required="required"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+  >
+    <template #default="group">
+      <div
+        class="s-segmented-control__group"
+        :data-size="size"
+        :data-option-wrap="optionWrap"
+        :data-invalid="group.invalid || undefined"
+        :data-readonly="group.readonly || undefined"
+        role="radiogroup"
+        :aria-labelledby="group.labelId"
+        :aria-describedby="group.describedBy"
+        :aria-invalid="group.invalid || undefined"
+        :aria-required="group.required || undefined"
+        :aria-readonly="group.readonly || undefined"
+      >
+        <button
+          v-for="option in options"
+          :key="optionToken(option)"
+          :ref="(element) => roving.register(option.value, resolveNativeElement(element))"
+          class="s-segmented-control__item"
+          :data-size="size"
+          type="button"
+          :aria-checked="option.value === modelValue"
+          :disabled="group.disabled || option.disabled"
+          role="radio"
+          :tabindex="option.value === focusableValue ? 0 : -1"
+          :title="option.title"
+          @click="selectOption(option)"
+          @keydown="roving.handleKeydown($event, option.value)"
+        >{{ option.label }}</button>
+      </div>
+    </template>
+  </SFieldGroup>
+</template>
+
+<script lang="ts">
+import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
+
+/** Одна option сегментированного выбора. / One segmented selection option. */
+export type SegmentedControlOption<T extends PublicSelectionKey = string> = {
+  value: T
+  label: string
+  title?: string
+  disabled?: boolean
+}
+
+/** Публичный field/radiogroup-контракт сегментированного выбора. / Public segmented field/radiogroup contract. */
+export interface Props<T extends PublicSelectionKey = string> {
+  modelValue: T
+  options: readonly SegmentedControlOption<T>[]
+  label: string
+  id?: string
+  helpText?: string
+  errorMessage?: string
+  required?: boolean
+  invalid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  size?: 'sm' | 'md'
+  optionWrap?: 'wrap' | 'nowrap'
+}
+</script>
+
+<script setup lang="ts" generic="T extends SelectionKey = string">
+import { computed } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { selectionKeyToken, useSelectionRoving } from '../_internal/useSelectionRoving'
+import type { SelectionKey } from '../_internal/useSelectionRoving'
+import SFieldGroup from './SFieldGroup.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  id: undefined,
+  helpText: undefined,
+  errorMessage: undefined,
+  required: false,
+  invalid: false,
+  disabled: false,
+  readonly: false,
+  size: 'md',
+  optionWrap: 'wrap',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: T]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SSegmentedControl', owner: 'field group root' })
+useInteractiveLeafRegistration({ owner: 'SSegmentedControl' })
+
+function selectOption(option: SegmentedControlOption<T>): void {
+  if (props.disabled || props.readonly || option.disabled) {
+    return
+  }
+  emit('update:modelValue', option.value)
+}
+
+const rovingOptions = computed(() => props.options.map((option) => ({
+  value: option.value,
+  disabled: props.disabled || option.disabled,
+})))
+const roving = useSelectionRoving({
+  options: rovingOptions,
+  selectedValue: computed(() => props.modelValue),
+  select: (value) => {
+    if (!props.disabled && !props.readonly) emit('update:modelValue', value)
+  },
+  component: 'SSegmentedControl',
+})
+const focusableValue = roving.focusableValue
+const optionToken = (option: SegmentedControlOption<T>): string => selectionKeyToken(
+  'SSegmentedControl',
+  option.value,
+  'option.value',
+)
+const resolveNativeElement = (element: Element | ComponentPublicInstance | null): HTMLElement | null => (
+  element instanceof HTMLElement ? element : null
+)
+</script>
+
+<style lang="postcss" src="./SSegmentedControl.css" scoped></style>

package/src/components/shared/controls/SSelect.css

@@ -0,0 +1,12 @@
+/*
+  Стили компонента SSelect на базе Headless UI.
+*/
+@reference "../../../styles/reference.css";
+
+.s-select-anchor {
+  @apply w-full min-w-0;
+}
+
+.s-select-layer {
+  @apply max-w-[calc(100vw-1rem)];
+}