@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -1,98 +0,0 @@
-<template>
-  <li
-    ref="optionRef"
-    :id="id"
-    class="s-listbox-option__control"
-    :data-appearance="appearance"
-    :data-focused="focused || active || undefined"
-    :title="title ?? label"
-    :aria-label="appearance === 'color' ? label : undefined"
-    role="option"
-    :aria-selected="selected"
-    :aria-disabled="disabled || undefined"
-    :tabindex="-1"
-    @focus="focused = true"
-    @blur="focused = false"
-    @mousedown="onMousedown"
-    @mouseenter="emit('hover')"
-    @click.stop="select"
-  >
-    <span class="s-listbox-option__main" :data-appearance="appearance">
-      <SMarker v-if="marker" :marker="marker" :size="appearance === 'color' ? 'lg' : 'sm'" />
-      <span v-if="appearance === 'select'" class="s-listbox-option__label" :data-selected="selected || undefined">
-        {{ label }}
-      </span>
-    </span>
-    <span v-if="selected" class="s-listbox-option__check" :data-appearance="appearance" aria-hidden="true">
-      <Check />
-    </span>
-  </li>
-</template>
-
-<script setup lang="ts">
-import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
-import { Check } from '../../icons/sputnigUiIcons'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import SMarker from './SMarker.vue'
-import { listboxContextKey } from '../_internal/listboxContext'
-import type { SMarker as MarkerContract } from '../_internal/markerContract'
-
-export interface Props {
-  registrationToken: string
-  label: string
-  selected: boolean
-  disabled?: boolean
-  appearance?: 'select' | 'color'
-  marker?: MarkerContract
-  title?: string
-  id?: string
-  active?: boolean
-  focusOnSelect?: boolean
-}
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  appearance: 'select',
-  marker: undefined,
-  title: undefined,
-  id: undefined,
-  active: false,
-  focusOnSelect: true,
-})
-
-const emit = defineEmits<{
-  select: []
-  hover: []
-}>()
-useInteractiveLeafRegistration({ owner: 'SListboxOption' })
-const context = inject(listboxContextKey)
-if (!context) throw new Error('SListboxOption must be used inside SListbox')
-const focused = ref(false)
-const optionRef = ref<HTMLLIElement | null>(null)
-let unregister: (() => void) | undefined
-const select = (): void => {
-  if (props.disabled) return
-  if (props.focusOnSelect) optionRef.value?.focus()
-  emit('select')
-}
-const onMousedown = (event: MouseEvent): void => {
-  if (!props.focusOnSelect) event.preventDefault()
-}
-onMounted(() => {
-  const element = optionRef.value
-  if (!(element instanceof HTMLLIElement)) throw new Error('SListboxOption: option element is unavailable')
-  unregister = context.register({
-    element,
-    token: props.registrationToken,
-    activate: select,
-    disabled: () => props.disabled,
-    label: () => props.label,
-    selected: () => props.selected,
-  })
-})
-onBeforeUnmount(() => unregister?.())
-</script>
-
-<style lang="postcss" src="./SListboxOption.css" scoped></style>

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

@@ -1,41 +0,0 @@
-<template>
-  <span
-    v-bind="ownedAttrs.bindings()"
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-marker"
-    :data-size="size"
-    :style="customProperties"
-    aria-hidden="true"
-  />
-</template>
-
-<script lang="ts">
-export { createCustomMarker } from '../_internal/markerContract'
-export type { SCustomMarker, SMarker, SMarkerTone } from '../_internal/markerContract'
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import { createCustomMarker, S_MARKER_TONES, type SMarker } from '../_internal/markerContract'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{ marker: SMarker; size?: 'sm' | 'lg' }>(), { size: 'sm' })
-const ownedAttrs = useOwnedAttrs({ component: 'SMarker', owner: 'marker root' })
-const MARKER_TONES = [...S_MARKER_TONES, 'custom'] as const
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'SMarker',
-  'marker.tone',
-  props.marker.tone,
-  MARKER_TONES,
-))
-const customProperties = computed(() => {
-  if (props.marker.tone !== 'custom') return undefined
-  createCustomMarker(props.marker.color)
-  return { '--s-marker-custom-color': props.marker.color }
-})
-</script>
-
-<style lang="postcss" src="./SMarker.css" scoped></style>

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

@@ -1,333 +0,0 @@
-<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/SRange.vue

@@ -1,129 +0,0 @@
-<template>
-  <SField
-    :control-id="inputId"
-    :label="label"
-    :disabled="disabled"
-    :readonly="readonly"
-    :required="required"
-    :help-text="helpText"
-    :error-message="errorMessage"
-    :invalid="invalid"
-  >
-    <template #default="field">
-      <div class="s-range">
-        <input
-          v-bind="ownedAttrs.bindings()"
-          :id="field.controlId"
-          class="s-range__input"
-          type="range"
-          :min="validatedMin"
-          :max="validatedMax"
-          :step="validatedStep"
-          :value="validatedValue"
-          :disabled="field.disabled"
-          :aria-invalid="field.invalid || undefined"
-          :aria-readonly="field.readonly || undefined"
-          :aria-required="field.required || undefined"
-          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
-          @input="onInput"
-        />
-        <output v-if="showValue" class="s-range__value" :for="field.controlId">
-          {{ validatedValue }}
-        </output>
-      </div>
-    </template>
-  </SField>
-</template>
-
-<script setup lang="ts">
-import { computed, useId } from 'vue'
-import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveOptionalDomId } from '../../../internal/runtimeContract'
-import SField from './SField.vue'
-
-defineOptions({ inheritAttrs: false })
-
-export interface Props {
-  modelValue: number
-  min: number
-  max: number
-  step?: number
-  label: string
-  id?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  invalid?: boolean
-  helpText?: string
-  errorMessage?: string
-  showValue?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  step: 1,
-  id: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  invalid: false,
-  helpText: undefined,
-  errorMessage: undefined,
-  showValue: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-function finiteNumber(field: string, value: number): number {
-  if (!Number.isFinite(value)) {
-    throw new TypeError(`SRange: ${field} должен быть конечным числом / must be a finite number`)
-  }
-  return value
-}
-
-const validatedMin = computed(() => finiteNumber('min', props.min))
-const validatedMax = computed(() => {
-  const value = finiteNumber('max', props.max)
-  if (value <= validatedMin.value) {
-    throw new RangeError('SRange: max должен быть больше min / max must be greater than min')
-  }
-  return value
-})
-const validatedStep = computed(() => {
-  const value = finiteNumber('step', props.step)
-  if (value <= 0) {
-    throw new RangeError('SRange: step должен быть больше нуля / step must be greater than zero')
-  }
-  return value
-})
-const validatedValue = computed(() => {
-  const value = finiteNumber('modelValue', props.modelValue)
-  if (value < validatedMin.value || value > validatedMax.value) {
-    throw new RangeError('SRange: modelValue должен находиться внутри [min, max] / must be within [min, max]')
-  }
-  return value
-})
-
-const generatedId = useId()
-const inputId = computed(() => resolveOptionalDomId('SRange', 'id', props.id, `s-range-${generatedId}`))
-const ownedAttrs = useOwnedAttrs({ component: 'SRange', owner: 'native range input' })
-useInteractiveLeafRegistration({ owner: 'SRange' })
-
-function onInput(event: Event): void {
-  const target = event.currentTarget
-  if (!(target instanceof HTMLInputElement)) {
-    throw new TypeError('SRange: input event owner must be the native range input')
-  }
-  if (props.readonly) {
-    target.value = String(validatedValue.value)
-    return
-  }
-  const value = Number(target.value)
-  finiteNumber('input value', value)
-  emit('update:modelValue', value)
-}
-</script>
-
-<style lang="postcss" src="./SRange.css" scoped></style>