@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,106 +0,0 @@
-<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"
-        v-bind="radioGroup.groupBindings({
-          labelledBy: group.labelId,
-          describedBy: group.describedBy,
-          required: group.required,
-          invalid: group.invalid,
-        })"
-      >
-        <button
-          v-for="option in options"
-          :key="radioGroup.optionToken(option.value)"
-          :ref="radioGroup.optionRef(option.value)"
-          class="s-segmented-control__item"
-          :data-size="size"
-          :title="option.title"
-          v-bind="radioGroup.optionBindings(option)"
-        >{{ 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 { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { useRadioGroup } from '../_internal/useRadioGroup'
-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' })
-const radioGroup = useRadioGroup({
-  options: computed(() => props.options),
-  selectedValue: computed(() => props.modelValue),
-  disabled: computed(() => props.disabled),
-  readonly: computed(() => props.readonly),
-  update: (value) => emit('update:modelValue', value),
-  component: 'SSegmentedControl',
-})
-</script>
-
-<style lang="postcss" src="./SSegmentedControl.css" scoped></style>

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

@@ -1,340 +0,0 @@
-<template>
-  <SField
-    :control-id="contract.inputId"
-    :label="contract.label"
-    :required="contract.required"
-    :help-text="contract.helpText"
-    :error-message="contract.errorMessage"
-    :invalid="contract.invalid"
-    :disabled="contract.disabled"
-    :readonly="contract.readonly"
-  >
-    <template #default="field">
-      <div ref="anchorRef" class="s-select-anchor">
-        <SComboboxTrigger
-          ref="triggerRef"
-          :id="field.controlId"
-          :title="contract.title"
-          :accessible-label="accessibleLabel"
-          :expanded="isOpen"
-          :controls="listboxId"
-          :display-value="displayValue"
-          :placeholder="contract.placeholder"
-          :marker="contract.triggerMarker ?? selectedOption?.marker"
-          :size="contract.size"
-          :disabled="field.disabled"
-          :invalid="field.invalid"
-          :described-by="mergeIdReferences(selectOwnedAttrs['aria-describedby'], field.describedBy)"
-          :required="field.required"
-          :readonly="field.readonly"
-          :test-id="selectOwnedAttrs['data-testid']"
-          :test="selectOwnedAttrs['data-test']"
-          :task-mapping-internal-value="selectOwnedAttrs['data-task-mapping-internal-value']"
-          :task-mapping-kind="selectOwnedAttrs['data-task-mapping-kind']"
-          :appearance="contract.appearance"
-          :width="contract.appearance === 'swatch' ? 'auto' : 'full'"
-          @toggle="toggle"
-        />
-      </div>
-      <teleport to="body">
-        <div v-if="isOpen" ref="panelRef" :style="floatingStyle" class="s-select-layer">
-          <SListbox
-            ref="listboxRef"
-            v-bind="listboxProps"
-            @update:model-value="onListboxUpdate"
-            @escape="close('escape')"
-            @tab="closeForTab"
-          />
-        </div>
-      </teleport>
-    </template>
-  </SField>
-</template>
-
-<script lang="ts">
-import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
-import type {
-  SelectionEntry as PublicSelectionEntry,
-  SelectionMode as PublicSelectionMode,
-  SelectionModelValue as PublicSelectionModelValue,
-  SelectionOption as PublicSelectionOption,
-  SelectionOptionGroup as PublicSelectionOptionGroup,
-} from '../_internal/selectionContract'
-import type { SMarker as PublicMarker } from '../_internal/markerContract'
-
-export type SSelectOption<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOption<TKey>
-export type SSelectOptionGroup<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOptionGroup<TKey>
-export type SSelectEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>
-export type SSelectMode = PublicSelectionMode
-export type SSelectModelValue<
-  TKey extends PublicSelectionKey,
-  TMode extends SSelectMode,
-> = PublicSelectionModelValue<TKey, TMode>
-
-interface SharedProps<TKey extends PublicSelectionKey> {
-  options: readonly SSelectEntry<TKey>[]
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  invalid?: boolean
-  errorMessage?: string
-  helpText?: string
-  emptyOptionLabel?: string
-  id?: string
-  size?: 'xs' | 'sm' | 'md'
-  appearance?: 'field' | 'swatch'
-  align?: 'left' | 'right' | 'center'
-  triggerMarker?: PublicMarker
-  title?: string
-}
-
-export type Props<
-  TKey extends PublicSelectionKey = PublicSelectionKey,
-  TMode extends SSelectMode = 'single',
-> = SharedProps<TKey> & (TMode extends 'multiple'
-  ? { selectionMode: 'multiple'; modelValue: readonly TKey[]; emptyOptionLabel?: never }
-  : { selectionMode?: 'single'; modelValue: TKey | null; emptyOptionLabel?: string })
-
-type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
-  | { selectionMode?: 'single'; modelValue: TKey | null; emptyOptionLabel?: string }
-  | { selectionMode: 'multiple'; modelValue: readonly TKey[]; emptyOptionLabel?: never }
-)
-</script>
-
-<script setup lang="ts" generic="TKey extends SelectionKey = string">
-import { computed, nextTick, onBeforeUnmount, ref, useId } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useFloatingPosition } from '../../../composables/useFloatingPosition'
-import type { FloatingPlacement } from '../../../composables/useFloatingPosition'
-import { findRelativeTabTarget } from '../../../internal/focusNavigation'
-import { registerLayer, type LayerRegistration } from '../../../internal/layerStack'
-import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import {
-  isSelectionModelList,
-  resolveSelectionInventory,
-  validateOptionalSelectionString,
-  validateSelectionMarker,
-  validateSelectionModel,
-  type SelectionMode,
-} from '../_internal/selectionContract'
-import { type SelectionKey } from '../_internal/useSelectionRoving'
-import SComboboxTrigger from './SComboboxTrigger.vue'
-import type { SComboboxTriggerApi } from './SComboboxTrigger.vue'
-import SField from './SField.vue'
-import SListbox from './SListbox.vue'
-import type { SListboxProps, SListboxVariant } from './SListbox.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
-  label: undefined,
-  placeholder: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  invalid: false,
-  errorMessage: undefined,
-  helpText: undefined,
-  emptyOptionLabel: undefined,
-  id: undefined,
-  size: 'md',
-  appearance: 'field',
-  align: 'left',
-  triggerMarker: undefined,
-  title: undefined,
-  selectionMode: undefined,
-})
-const { t } = useUiKitLocale()
-const emit = defineEmits<{
-  'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SSelect', owner: 'combobox trigger' })
-const selectOwnedAttrs = computed(() => ownedAttrs.bindings())
-const generatedInputId = useId()
-
-const contract = computed(() => {
-  const selectionMode: SelectionMode = validateExactString(
-    'SSelect', 'selectionMode', props.selectionMode ?? 'single', ['single', 'multiple'] as const,
-  )
-  let emptyOptionLabel: string | undefined
-  if (props.emptyOptionLabel !== undefined) {
-    if (selectionMode === 'multiple') {
-      throw new Error('SSelect: emptyOptionLabel is available only in single selection mode')
-    }
-    emptyOptionLabel = validateNonEmptyString('SSelect', 'emptyOptionLabel', props.emptyOptionLabel)
-  }
-  return {
-    inputId: props.id === undefined
-      ? `s-select-${generatedInputId}`
-      : validateDomId('SSelect', 'id', props.id),
-    label: props.label === undefined
-      ? undefined
-      : validateNonEmptyString('SSelect', 'label', props.label),
-    placeholder: validateNonEmptyString('SSelect', 'placeholder', props.placeholder ?? t('forms.selectPlaceholder')),
-    disabled: validateBoolean('SSelect', 'disabled', props.disabled),
-    readonly: validateBoolean('SSelect', 'readonly', props.readonly),
-    required: validateBoolean('SSelect', 'required', props.required),
-    invalid: validateBoolean('SSelect', 'invalid', props.invalid),
-    errorMessage: validateOptionalSelectionString('SSelect', 'errorMessage', props.errorMessage),
-    helpText: validateOptionalSelectionString('SSelect', 'helpText', props.helpText),
-    size: validateExactString('SSelect', 'size', props.size, ['xs', 'sm', 'md'] as const),
-    appearance: validateExactString(
-      'SSelect', 'appearance', props.appearance, ['field', 'swatch'] as const,
-    ),
-    align: validateExactString(
-      'SSelect', 'align', props.align, ['left', 'right', 'center'] as const,
-    ),
-    triggerMarker: validateSelectionMarker('SSelect', 'triggerMarker', props.triggerMarker),
-    title: validateOptionalSelectionString('SSelect', 'title', props.title),
-    selectionMode,
-    emptyOptionLabel,
-  }
-})
-const listboxId = computed(() => `${contract.value.inputId}-listbox`)
-const resolvedSelectionMode = computed(() => contract.value.selectionMode)
-const inventory = computed(() => resolveSelectionInventory<TKey>('SSelect', props.options))
-const selectedTokens = computed(() => validateSelectionModel(
-  'SSelect', contract.value.selectionMode, props.modelValue, inventory.value,
-))
-const accessibleLabel = computed(() => {
-  const ownedLabel = selectOwnedAttrs.value['aria-label']
-  if (ownedLabel !== undefined) return validateNonEmptyString('SSelect', 'aria-label', ownedLabel)
-  return contract.value.label ?? contract.value.placeholder
-})
-const selectedOption = computed(() => inventory.value.options.find((record) => (
-  selectedTokens.value.has(record.token)
-))?.option ?? null)
-const displayValue = computed(() => inventory.value.options
-  .filter((record) => selectedTokens.value.has(record.token))
-  .map((record) => record.option.label)
-  .join(', '))
-const resolvedEmptyOptionLabel = computed(() => contract.value.emptyOptionLabel)
-const listboxProps = computed<
-  SListboxProps<TKey, 'single'> | SListboxProps<TKey, 'multiple'>
->(() => {
-  const variant: SListboxVariant = contract.value.appearance === 'swatch' ? 'color' : 'select'
-  const shared = {
-    id: listboxId.value,
-    label: accessibleLabel.value,
-    options: props.options,
-    variant,
-    invalid: contract.value.invalid,
-  }
-  if (contract.value.selectionMode === 'multiple') {
-    if (!isSelectionModelList(props.modelValue)) {
-      throw new TypeError('SSelect: multiple selection requires modelValue to be an array')
-    }
-    return {
-      ...shared,
-      selectionMode: 'multiple',
-      modelValue: props.modelValue,
-    }
-  }
-  if (isSelectionModelList(props.modelValue)) {
-    throw new TypeError('SSelect: single selection requires modelValue to be a selection key or null')
-  }
-  return {
-    ...shared,
-    selectionMode: 'single',
-    modelValue: props.modelValue,
-    clearOptionLabel: contract.value.emptyOptionLabel,
-  }
-})
-
-const isOpen = ref(false)
-const layerZIndex = ref('var(--s-layer-root-floating)')
-let layerRegistration: LayerRegistration | null = null
-const triggerRef = ref<SComboboxTriggerApi | null>(null)
-const listboxRef = ref<{ focusSelectedOrFirst: () => void } | null>(null)
-const placement = computed<FloatingPlacement>(() => (
-  `bottom-${contract.value.align === 'left' ? 'start' : contract.value.align === 'right' ? 'end' : 'center'}`
-))
-const { anchorRef, panelRef, floatingStyle } = useFloatingPosition({
-  active: isOpen,
-  placement: () => placement.value,
-  widthMatch: () => contract.value.appearance === 'field' ? 'exact' : 'none',
-  zIndex: () => layerZIndex.value,
-})
-
-type CloseReason = 'trigger' | 'selection' | 'escape' | 'tab' | 'outside'
-
-function close(reason: CloseReason = 'trigger'): void {
-  if (!isOpen.value) return
-  isOpen.value = false
-  layerRegistration?.unregister({
-    restoreFocus: reason === 'trigger' || reason === 'selection' || reason === 'escape',
-  })
-  layerRegistration = null
-  layerZIndex.value = 'var(--s-layer-root-floating)'
-}
-
-function triggerElement(): HTMLElement {
-  const trigger = triggerRef.value
-  if (!trigger) throw new Error('SSelect: combobox trigger API is unavailable')
-  return trigger.getElement()
-}
-
-function closeForTab(event: KeyboardEvent): void {
-  const trigger = triggerElement()
-  const scope = layerRegistration?.focusScope() ?? document
-  const target = findRelativeTabTarget(trigger, scope, panelRef.value, event.shiftKey)
-  event.preventDefault()
-  close('tab')
-  if (target) nextTick(() => target.focus())
-}
-
-async function open(): Promise<void> {
-  void selectedTokens.value
-  void resolvedEmptyOptionLabel.value
-  if (contract.value.disabled || contract.value.readonly || isOpen.value) return
-  const trigger = triggerElement()
-  isOpen.value = true
-  layerRegistration = registerLayer({
-    kind: 'listbox',
-    root: () => panelRef.value,
-    anchor: () => anchorRef.value,
-    restoreTarget: trigger,
-    requestDismiss: (reason) => close(reason === 'escape' ? 'escape' : 'outside'),
-  })
-  layerZIndex.value = layerRegistration.zIndex
-  await nextTick()
-  if (isOpen.value) listboxRef.value?.focusSelectedOrFirst()
-}
-
-function toggle(): void {
-  if (isOpen.value) close('trigger')
-  else void open()
-}
-
-function onListboxUpdate(value: TKey | null | readonly TKey[]): void {
-  if (resolvedSelectionMode.value === 'multiple') {
-    if (!isSelectionModelList(value)) {
-      throw new TypeError('SSelect: multiple selection update must be an array')
-    }
-    validateSelectionModel('SSelect update', 'multiple', value, inventory.value)
-    emit('update:modelValue', value)
-    return
-  }
-  if (isSelectionModelList(value)) {
-    throw new TypeError('SSelect: single selection update must be a selection key or null')
-  }
-  validateSelectionModel('SSelect update', 'single', value, inventory.value)
-  emit('update:modelValue', value)
-  close('selection')
-}
-
-onBeforeUnmount(() => {
-  layerRegistration?.unregister({ restoreFocus: false })
-  layerRegistration = null
-})
-</script>
-
-<style lang="postcss" src="./SSelect.css" scoped></style>

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

@@ -1,91 +0,0 @@
-<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
-          :ref="setInputElement"
-          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 { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { useBinaryInput } from '../../../internal/useBinaryInput'
-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 {
-  checkedValue,
-  inputId,
-  onChange,
-  onClick,
-  setInputElement,
-} = useBinaryInput({
-  owner: 'SSwitch',
-  inputName: 'switch',
-  props,
-  emitUpdate: (value) => emit('update:modelValue', value),
-  emitClick: (event) => emit('click', event),
-})
-</script>
-
-<style lang="postcss" src="./SSwitch.css" scoped></style>

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

@@ -1,13 +0,0 @@
-export type {
-  Props as STextareaProps,
-  STextareaAppearance,
-  STextareaAutocomplete,
-  STextareaSuggestionPopupRole,
-  STextareaSuggestions,
-  STextareaReplaceOptions,
-  STextareaResizeContract,
-  STextareaSelection,
-  STextareaSelectionDirection,
-  STextareaSize,
-  STextareaState,
-} from './STextarea.vue'