@pgcorp/ui-kit 0.2.0 → 0.3.1

package/src/components/shared/controls/SLink.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'vue'
 import type {
   HistoryState,
   LocationQueryRaw,
@@ -67,19 +66,4 @@ export type RouterLinkDestination = LinkDestinationOptions & {
 /** Строгий XOR-контракт обычного destination. / Strict XOR contract for an ordinary destination. */
 export type LinkDestination = HrefLinkDestination | RouterLinkDestination
 
-/** Canonical presentation/state API owned by SLink. */
-export interface LinkPresentationProps {
-  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
-  readonly external?: boolean
-  readonly active?: boolean
-  readonly disabled?: boolean
-  readonly width?: 'fit' | 'full'
-  readonly size?: 'inherit' | 'sm' | 'md'
-  readonly underline?: 'hover' | 'always' | 'none'
-  readonly wrap?: 'normal' | 'anywhere'
-  readonly contentKind?: 'text' | 'identifier'
-  readonly leadingIcon?: Component
-}
-
-/** Полный discriminated public props contract SLink. / Complete discriminated public SLink props contract. */
-export type SLinkProps = LinkDestination & LinkPresentationProps
+export type { LinkPresentationProps, Props as SLinkProps } from './SLink.vue'

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type Component,
   computed,
   type VNodeChild,
 } from 'vue'
@@ -12,13 +13,36 @@ import {
   type PassiveContentContract,
 } from '../../../internal/passiveContentContract'
 import type {
-  SLinkProps,
+  LinkBrowsingTarget,
+  LinkRouterTarget,
 } from './SLink'
 
 defineOptions({ inheritAttrs: false })
 
+/** Canonical presentation/state API owned by SLink. */
+export interface LinkPresentationProps {
+  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
+  readonly external?: boolean
+  readonly active?: boolean
+  readonly disabled?: boolean
+  readonly width?: 'fit' | 'full'
+  readonly size?: 'inherit' | 'sm' | 'md'
+  readonly underline?: 'hover' | 'always' | 'none'
+  readonly wrap?: 'normal' | 'anywhere'
+  readonly contentKind?: 'text' | 'identifier'
+  readonly leadingIcon?: Component
+}
+
+interface LinkDestinationOptions {
+  readonly target?: LinkBrowsingTarget
+  readonly rel?: string
+}
+
 /** Exact href/to XOR plus the canonical link presentation API. */
-export type Props = SLinkProps
+export type Props = LinkPresentationProps & LinkDestinationOptions & (
+  | { readonly href: string; readonly to?: never }
+  | { readonly href?: never; readonly to: LinkRouterTarget }
+)
 
 const props = withDefaults(defineProps<Props>(), {
   href: undefined,

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

@@ -6,6 +6,7 @@
     :data-variant="resolvedVariant"
     :data-invalid="resolvedInvalid || undefined"
     :data-readonly="resolvedReadonly || undefined"
+    :data-focus-mode="resolvedFocusMode"
     role="listbox"
     :aria-label="resolvedLabel"
     :aria-multiselectable="resolvedSelectionMode === 'multiple' || undefined"
@@ -17,23 +18,31 @@
     <SListboxOption
       v-if="resolvedClearOptionLabel"
       :registration-token="CLEAR_OPTION_TOKEN"
+      :id="optionId(CLEAR_OPTION_TOKEN)"
       :label="resolvedClearOptionLabel"
       :title="resolvedClearOptionLabel"
       :selected="modelValue === null"
       :disabled="resolvedDisabled"
       :appearance="optionAppearance"
+      :active="activeToken === CLEAR_OPTION_TOKEN"
+      :focus-on-select="resolvedFocusMode === 'roving'"
+      @hover="setActiveToken(CLEAR_OPTION_TOKEN)"
       @select="clearSelection"
     />
     <template v-for="entry in inventory.entries" :key="entry.token">
       <SListboxOption
         v-if="entry.kind === 'option'"
         :registration-token="entry.record.token"
+        :id="optionId(entry.record.token)"
         :label="entry.record.option.label"
         :title="entry.record.option.title ?? entry.record.option.label"
         :selected="selectedTokens.has(entry.record.token)"
         :disabled="resolvedDisabled || entry.record.option.disabled"
         :marker="entry.record.option.marker"
         :appearance="optionAppearance"
+        :active="activeToken === entry.record.token"
+        :focus-on-select="resolvedFocusMode === 'roving'"
+        @hover="setActiveToken(entry.record.token)"
         @select="selectOption(entry.record.token)"
       />
       <SListboxGroup
@@ -46,12 +55,16 @@
           v-for="record in entry.records"
           :key="record.token"
           :registration-token="record.token"
+          :id="optionId(record.token)"
           :label="record.option.label"
           :title="record.option.title ?? record.option.label"
           :selected="selectedTokens.has(record.token)"
           :disabled="resolvedDisabled || record.option.disabled"
           :marker="record.option.marker"
           :appearance="optionAppearance"
+          :active="activeToken === record.token"
+          :focus-on-select="resolvedFocusMode === 'roving'"
+          @hover="setActiveToken(record.token)"
           @select="selectOption(record.token)"
         />
       </SListboxGroup>
@@ -73,6 +86,8 @@ import type {
 } from '../_internal/selectionContract'
 
 export type SListboxVariant = 'select' | 'color'
+export type SListboxFocusMode = 'roving' | 'activedescendant'
+export type SListboxMoveIntent = 'next' | 'previous' | 'first' | 'last'
 export type SListboxOption<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOption<TKey>
 export type SListboxOptionGroup<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOptionGroup<TKey>
 export type SListboxEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>
@@ -106,6 +121,8 @@ interface SharedProps<TKey extends PublicSelectionKey> {
   emptyLabel?: string
   clearOptionLabel?: string
   id?: string
+  focusMode?: SListboxFocusMode
+  activeValue?: TKey | null
 }
 
 export type SListboxProps<
@@ -154,9 +171,12 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   emptyLabel: 'Нет доступных вариантов',
   clearOptionLabel: undefined,
   id: undefined,
+  focusMode: 'roving',
+  activeValue: undefined,
 })
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
+  'update:activeValue': [value: TKey | null]
   'option-keydown': [payload: SListboxOptionKeydownPayload<TKey>]
   escape: []
   tab: [event: KeyboardEvent]
@@ -187,6 +207,9 @@ const contract = computed(() => {
     disabled: validateBoolean('SListbox', 'disabled', props.disabled),
     readonly: validateBoolean('SListbox', 'readonly', props.readonly),
     invalid: validateBoolean('SListbox', 'invalid', props.invalid),
+    focusMode: validateExactString(
+      'SListbox', 'focusMode', props.focusMode, ['roving', 'activedescendant'] as const,
+    ),
     selectionMode,
     clearOptionLabel,
   }
@@ -199,6 +222,7 @@ const resolvedDisabled = computed(() => contract.value.disabled)
 const resolvedReadonly = computed(() => contract.value.readonly)
 const resolvedInvalid = computed(() => contract.value.invalid)
 const resolvedSelectionMode = computed(() => contract.value.selectionMode)
+const resolvedFocusMode = computed(() => contract.value.focusMode)
 const resolvedClearOptionLabel = computed(() => contract.value.clearOptionLabel)
 const selectionState = computed(() => {
   const resolvedInventory = resolveSelectionInventory<TKey>('SListbox', props.options)
@@ -213,6 +237,25 @@ const inventory = computed(() => selectionState.value.inventory)
 const selectedTokens = computed(() => selectionState.value.selectedTokens)
 const optionAppearance = computed(() => resolvedVariant.value === 'color' ? 'color' : 'select')
 const CLEAR_OPTION_TOKEN = 'clear-option'
+const activeToken = computed(() => {
+  if (resolvedFocusMode.value === 'roving') return undefined
+  if (resolvedSelectionMode.value !== 'single') {
+    throw new Error('SListbox: activedescendant focus mode supports single selection only')
+  }
+  if (props.activeValue === undefined) {
+    throw new TypeError('SListbox: activeValue is required in activedescendant focus mode')
+  }
+  if (props.activeValue === null) return null
+  const token = selectionKeyToken('SListbox', props.activeValue, 'activeValue')
+  if (!inventory.value.optionsByToken.has(token)) {
+    throw new Error('SListbox: activeValue does not match any option')
+  }
+  return token
+})
+
+function optionId(token: string): string {
+  return `${resolvedId.value}-option-${encodeURIComponent(token)}`
+}
 
 function emitModelValue(value: TKey | null | readonly TKey[]): void {
   if (contract.value.selectionMode === 'multiple') {
@@ -281,6 +324,7 @@ function enabledRegistrations(): ListboxOptionRegistration[] {
 function initializeTabstop(): void {
   const options = enabledRegistrations()
   for (const option of registrations) option.element.tabIndex = -1
+  if (resolvedFocusMode.value === 'activedescendant') return
   const selected = options.find((option) => option.selected())
   const target = selected ?? options[0]
   if (target) target.element.tabIndex = 0
@@ -300,6 +344,56 @@ function focusOption(target: ListboxOptionRegistration, options = enabledRegistr
   target.element.focus()
 }
 
+function setActiveToken(token: string): void {
+  if (resolvedFocusMode.value !== 'activedescendant') return
+  const target = enabledRegistrations().find((option) => option.token === token)
+  if (!target) return
+  emit('update:activeValue', optionValue(target))
+}
+
+function activeRegistration(options: ListboxOptionRegistration[]): ListboxOptionRegistration | undefined {
+  const token = activeToken.value
+  return token === undefined || token === null
+    ? undefined
+    : options.find((option) => option.token === token)
+}
+
+function initializeActive(): void {
+  if (resolvedFocusMode.value !== 'activedescendant') {
+    throw new Error('SListbox: initializeActive is available only in activedescendant focus mode')
+  }
+  const options = enabledRegistrations()
+  const target = activeRegistration(options) ?? options.find((option) => option.selected()) ?? options[0]
+  if (target) emit('update:activeValue', optionValue(target))
+}
+
+function moveActive(intent: SListboxMoveIntent): void {
+  if (resolvedFocusMode.value !== 'activedescendant') {
+    throw new Error('SListbox: moveActive is available only in activedescendant focus mode')
+  }
+  const options = enabledRegistrations()
+  if (options.length === 0) return
+  const current = activeRegistration(options)
+  const currentIndex = current === undefined ? -1 : options.indexOf(current)
+  const nextIndex = intent === 'first'
+    ? 0
+    : intent === 'last'
+      ? options.length - 1
+      : intent === 'next'
+        ? (Math.max(currentIndex, -1) + 1) % options.length
+        : (currentIndex <= 0 ? options.length : currentIndex) - 1
+  const target = options[nextIndex]
+  if (target) emit('update:activeValue', optionValue(target))
+}
+
+function selectActive(): void {
+  if (resolvedFocusMode.value !== 'activedescendant') {
+    throw new Error('SListbox: selectActive is available only in activedescendant focus mode')
+  }
+  if (resolvedReadonly.value || resolvedDisabled.value) return
+  activeRegistration(enabledRegistrations())?.activate()
+}
+
 function currentOption(
   options: ListboxOptionRegistration[],
   event: KeyboardEvent,
@@ -319,6 +413,7 @@ function optionValue(registration: ListboxOptionRegistration): TKey | null {
 }
 
 function handleKeydown(event: KeyboardEvent): void {
+  if (resolvedFocusMode.value === 'activedescendant') return
   if (event.key === 'Tab') {
     emit('tab', event)
     return
@@ -376,13 +471,16 @@ function handleKeydown(event: KeyboardEvent): void {
 }
 
 function focusSelectedOrFirst(): void {
+  if (resolvedFocusMode.value !== 'roving') {
+    throw new Error('SListbox: focusSelectedOrFirst is available only in roving focus mode')
+  }
   const options = enabledRegistrations()
   const target = options.find((option) => option.selected()) ?? options[0]
   if (target) focusOption(target, options)
 }
 
 onBeforeUnmount(() => { if (typeaheadTimer) clearTimeout(typeaheadTimer) })
-defineExpose({ focusSelectedOrFirst })
+defineExpose({ focusSelectedOrFirst, initializeActive, moveActive, selectActive })
 </script>
 
 <style lang="postcss" src="./SListbox.css" scoped></style>

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

@@ -1,9 +1,10 @@
 <template>
   <li
     ref="optionRef"
+    :id="id"
     class="s-listbox-option__control"
     :data-appearance="appearance"
-    :data-focused="focused || undefined"
+    :data-focused="focused || active || undefined"
     :title="title ?? label"
     :aria-label="appearance === 'color' ? label : undefined"
     role="option"
@@ -12,6 +13,8 @@
     :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">
@@ -42,6 +45,9 @@ export interface Props {
   appearance?: 'select' | 'color'
   marker?: MarkerContract
   title?: string
+  id?: string
+  active?: boolean
+  focusOnSelect?: boolean
 }
 
 defineOptions({ inheritAttrs: false })
@@ -51,10 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
   appearance: 'select',
   marker: undefined,
   title: undefined,
+  id: undefined,
+  active: false,
+  focusOnSelect: true,
 })
 
 const emit = defineEmits<{
   select: []
+  hover: []
 }>()
 useInteractiveLeafRegistration({ owner: 'SListboxOption' })
 const context = inject(listboxContextKey)
@@ -64,9 +74,12 @@ const optionRef = ref<HTMLLIElement | null>(null)
 let unregister: (() => void) | undefined
 const select = (): void => {
   if (props.disabled) return
-  optionRef.value?.focus()
+  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')

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

@@ -0,0 +1,48 @@
+@reference "../../../styles/reference.css";
+
+.s-switch-control {
+  @apply relative inline-flex shrink-0 items-center;
+  width: 2.5rem;
+  height: 1.5rem;
+}
+
+.s-switch-input {
+  @apply absolute inset-0 z-10 m-0 cursor-pointer opacity-0;
+}
+
+.s-switch-track {
+  @apply flex h-5 w-9 items-center rounded-full border border-surface-300 bg-surface-200 p-0.5 transition-colors;
+  @apply dark:border-surface-600 dark:bg-surface-700;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-thumb {
+  @apply block h-3.5 w-3.5 rounded-full bg-surface-0 shadow-sm transition-transform;
+  @apply dark:bg-surface-100;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-input:checked + .s-switch-track {
+  @apply border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400;
+}
+
+.s-switch-input:checked + .s-switch-track > .s-switch-thumb {
+  transform: translateX(1rem);
+}
+
+.s-switch-input:not(:disabled):hover + .s-switch-track {
+  @apply border-primary-500 dark:border-primary-400;
+}
+
+.s-switch-input:focus-visible + .s-switch-track {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-switch-input:disabled {
+  @apply cursor-not-allowed;
+}
+
+.s-switch-input:disabled + .s-switch-track {
+  @apply border-surface-200 bg-surface-100 opacity-70 dark:border-surface-700 dark:bg-surface-800;
+}

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

@@ -0,0 +1,109 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    layout="inline"
+  >
+    <template #default="field">
+      <span class="s-switch-control">
+        <input
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          type="checkbox"
+          role="switch"
+          class="s-switch-input"
+          :checked="checkedValue"
+          :disabled="field.disabled"
+          :required="field.required"
+          :aria-checked="checkedValue"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @click.stop="onClick"
+          @change="onChange"
+        />
+        <span class="s-switch-track" aria-hidden="true">
+          <span class="s-switch-thumb" />
+        </span>
+      </span>
+    </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: boolean
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  id: undefined,
+})
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  click: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch input' })
+useInteractiveLeafRegistration({ owner: 'SSwitch' })
+
+const generatedInputId = useId()
+const inputId = computed(() => resolveOptionalDomId(
+  'SSwitch',
+  'id',
+  props.id,
+  `s-switch-${generatedInputId}`,
+))
+const checkedValue = computed(() => {
+  if (typeof props.modelValue !== 'boolean') {
+    throw new TypeError('SSwitch: modelValue must be boolean')
+  }
+  return props.modelValue
+})
+
+function onChange(event: Event): void {
+  if (props.readonly) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SSwitch: change event owner must be the native switch input')
+  }
+  emit('update:modelValue', target.checked)
+}
+
+function onClick(event: MouseEvent): void {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="postcss" src="./SSwitch.css" scoped></style>

package/src/components/shared/controls/_internal/SInlineTokenSurface.vue

@@ -4,6 +4,7 @@ import {
   createTextVNode,
   defineComponent,
   h,
+  type Component,
   type ComponentPublicInstance,
   type PropType,
 } from 'vue'
@@ -14,7 +15,9 @@ import type { InlineTokenEditorSegmentContract } from '../../../../internal/inli
 import type { OwnedAttributeBindings } from '../../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../../internal/passiveContentContract'
 import { validateBoundedInteger } from '../../../../internal/runtimeContract'
-import SButton, { type Props as SButtonProps } from '../SButton.vue'
+import SButton, { type SButtonActionProps } from '../SButton.vue'
+
+const actionButtonComponent: Component = SButton
 
 /** Текст визуального caret helper. / Visual caret-helper text. */
 export const INLINE_TOKEN_EDITOR_VISUAL_CARET_TEXT = '\u200B'
@@ -35,7 +38,7 @@ export type InlineTokenElementRef = (
   refs: Record<string, unknown>,
 ) => void
 
-interface InlineTokenActionButtonBindings extends SButtonProps {
+interface InlineTokenActionButtonBindings extends SButtonActionProps {
   readonly 'aria-label': string
   readonly title?: string
   readonly onClick: (event: MouseEvent) => void
@@ -161,7 +164,7 @@ export default defineComponent({
             onClick: (event) => emitTokenAction(event, action, segment),
             onKeydown: stopKeyPropagation,
           }
-      return h(SButton, { ...bindings, key: action })
+      return h(actionButtonComponent, { ...bindings, key: action })
     }
 
     return () => h('div', {

package/src/components/shared/data-display/SChip.css

@@ -0,0 +1,59 @@
+@reference "../../../styles/reference.css";
+
+.s-chip {
+  @apply inline-flex min-w-0 items-center rounded-full font-medium;
+}
+
+.s-chip[data-size='md'] {
+  @apply min-h-7 gap-1.5 px-2.5 text-xs;
+}
+
+.s-chip[data-size='md'][data-closable='true'] {
+  @apply pr-1;
+}
+
+.s-chip[data-size='sm'] {
+  @apply min-h-6 gap-1 px-2 text-[11px] leading-4;
+}
+
+.s-chip[data-size='sm'][data-closable='true'] {
+  @apply pr-0.5;
+}
+
+.s-chip__icon {
+  @apply inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center;
+}
+
+.s-chip__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-chip__label {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.s-chip[data-disabled='true'] {
+  @apply opacity-60;
+}
+
+.s-chip[data-severity='primary'] {
+  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
+}
+.s-chip[data-severity='secondary'] {
+  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
+}
+.s-chip[data-severity='success'] {
+  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
+}
+.s-chip[data-severity='info'] {
+  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
+}
+.s-chip[data-severity='warn'] {
+  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
+}
+.s-chip[data-severity='danger'] {
+  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
+}
+.s-chip[data-severity='contrast'] {
+  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
+}