@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,341 +0,0 @@
-<template>
-  <component
-    :is="rootComponent"
-    :ref="setRootRef"
-    v-bind="rootBindings"
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-button"
-    :data-size="size"
-    :data-width="width"
-    :data-content-align="contentAlign"
-    :data-density="density"
-    :data-spacing="spacing"
-    :data-hover-surface="hoverSurface"
-    :data-icon-only="isIconOnly"
-    :data-icon-size="iconSize"
-    :data-appearance="appearance"
-    :data-shape="shape"
-    :data-loading="loading || undefined"
-    :aria-pressed="pressed"
-    :aria-busy="busy || loading || undefined"
-    @click="handleClick"
-  >
-    <span v-if="loading" class="s-button__loader" aria-hidden="true">
-      <SProgressIndicator
-        :accessibility="{ mode: 'decorative' }"
-        :size="progressIndicatorSize"
-      />
-    </span>
-    <span class="s-button__content">
-      <span
-        v-if="disclosure?.iconPlacement === 'leading'"
-        class="s-button__disclosure-icon s-button__icon s-button__icon--leading"
-        :data-expanded="disclosure.expanded"
-        data-disclosure-icon
-        aria-hidden="true"
-      ><ChevronRight /></span>
-      <component :is="leadingIcon" v-else-if="leadingIcon" class="s-button__icon s-button__icon--leading" aria-hidden="true" />
-      <span v-if="label" class="s-button__label">{{ label }}</span>
-      <PassiveContentBoundary v-if="renderDefaultSlot" :contract="passiveContentContract">
-        <component :is="defaultContentComponent" />
-      </PassiveContentBoundary>
-      <span v-if="badge !== undefined" class="s-button__badge-slot">
-        <SBadge :severity="badgeSeverity" size="xs">{{ badge }}</SBadge>
-      </span>
-      <span v-if="shortcut" class="s-button__shortcut" aria-hidden="true">{{ shortcut }}</span>
-      <span
-        v-if="disclosure && disclosure.iconPlacement !== 'leading' && disclosure.iconPlacement !== 'none'"
-        class="s-button__disclosure-icon s-button__icon s-button__icon--trailing"
-        :data-expanded="disclosure.expanded"
-        data-disclosure-icon
-        aria-hidden="true"
-      ><ChevronRight /></span>
-      <component :is="trailingIcon" v-else-if="trailingIcon" class="s-button__icon s-button__icon--trailing" aria-hidden="true" />
-    </span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, getCurrentInstance, ref, watchEffect } from 'vue'
-import type { Component, ComponentPublicInstance } from 'vue'
-import { RouterLink } from 'vue-router'
-import { ChevronRight } from '../../icons/sputnigUiIcons'
-import type { InteractiveElementApi } from '../../../internal/interactiveElement'
-import { resolveLinkTarget } from '../../../internal/linkTarget'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import {
-  PassiveContentBoundary,
-  useInteractiveLeafRegistration,
-  type PassiveContentContract,
-} from '../../../internal/passiveContentContract'
-import { useTreeActionRegistration } from '../_internal/treeRuntime'
-import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
-import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
-import type {
-  LinkBrowsingTarget,
-  LinkRouterTarget,
-} from './SLink'
-
-defineOptions({ inheritAttrs: false })
-
-export type SButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'
-const BUTTON_SEVERITIES = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const satisfies readonly SButtonSeverity[]
-export type SButtonSize = 'xs' | 'sm' | 'md' | 'lg'
-export type SButtonIconSize = 'default' | 'large'
-export type SButtonDensity = 'default' | 'compact'
-export type SButtonSpacing = 'default' | 'tight'
-export type SButtonHoverSurface = 'self' | 'parent'
-export type SButtonWidth = 'auto' | 'fit' | 'full'
-export type SButtonContentAlign = 'center' | 'start' | 'end' | 'between'
-export type SButtonAppearance = 'solid' | 'soft' | 'outline' | 'ghost' | 'text'
-export type SButtonShape = 'default' | 'pill' | 'square' | 'circle' | 'row'
-export type SButtonNativeType = 'button' | 'reset' | 'submit'
-export interface SButtonDisclosure {
-  expanded: boolean
-  controls: string
-  iconPlacement?: 'leading' | 'trailing' | 'none'
-}
-
-/** Typed interactive owner API for action and navigation buttons. / Типизированная API-поверхность action/navigation button. */
-export type SButtonApi = InteractiveElementApi<HTMLButtonElement | HTMLAnchorElement>
-
-interface SButtonPresentationProps {
-  label?: string
-  severity?: SButtonSeverity
-  size?: SButtonSize
-  disabled?: boolean
-  loading?: boolean
-  loadingLabel?: string
-  leadingIcon?: Component
-  trailingIcon?: Component
-  iconSize?: SButtonIconSize
-  density?: SButtonDensity
-  spacing?: SButtonSpacing
-  hoverSurface?: SButtonHoverSurface
-  badge?: string | number
-  badgeSeverity?: BadgeSeverity
-  shortcut?: string
-  iconOnly?: boolean
-  width?: SButtonWidth
-  contentAlign?: SButtonContentAlign
-  appearance?: SButtonAppearance
-  shape?: SButtonShape
-  pressed?: boolean | 'mixed'
-  busy?: boolean
-  disclosure?: SButtonDisclosure
-}
-
-export type SButtonActionProps = SButtonPresentationProps & {
-  href?: never
-  to?: never
-  target?: never
-  rel?: never
-  type?: SButtonNativeType
-}
-
-interface SButtonNavigationOptions {
-  target?: LinkBrowsingTarget
-  rel?: string
-}
-
-export type SButtonNavigationProps = SButtonPresentationProps & SButtonNavigationOptions & (
-  | { href: string; to?: never; type?: never }
-  | { href?: never; to: LinkRouterTarget; type?: never }
-)
-
-/** Strict action/navigation XOR with a shared button presentation. */
-export type Props = SButtonActionProps | SButtonNavigationProps
-
-const props = withDefaults(defineProps<Props>(), {
-  label: undefined,
-  severity: 'primary',
-  size: 'md',
-  disabled: false,
-  loading: false,
-  loadingLabel: undefined,
-  leadingIcon: undefined,
-  trailingIcon: undefined,
-  iconSize: 'default',
-  density: 'default',
-  spacing: 'default',
-  hoverSurface: 'self',
-  badge: undefined,
-  badgeSeverity: 'secondary',
-  shortcut: undefined,
-  iconOnly: false,
-  width: 'auto',
-  contentAlign: 'center',
-  appearance: 'solid',
-  shape: 'default',
-  pressed: undefined,
-  busy: false,
-  disclosure: undefined,
-  href: undefined,
-  to: undefined,
-  target: undefined,
-  rel: undefined,
-  type: undefined,
-})
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-const componentInstance = getCurrentInstance()
-if (!componentInstance) throw new Error('SButton: component instance is unavailable')
-const buttonSlots = componentInstance.slots
-const defaultContentComponent = (): ReturnType<NonNullable<typeof buttonSlots.default>> => (
-  buttonSlots.default?.() ?? []
-)
-const rootRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'SButton', owner: 'native button' })
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'SButton',
-  'severity',
-  props.severity,
-  BUTTON_SEVERITIES,
-))
-const isRegisteredTreeAction = useTreeActionRegistration({
-  owner: 'SButton',
-  element: rootRef,
-  disabled: () => props.disabled || props.loading,
-})
-
-useInteractiveLeafRegistration({ owner: 'SButton' })
-
-const navigationTarget = computed(() => {
-  const hasHref = props.href !== undefined
-  const hasTo = props.to !== undefined
-  if (hasHref && hasTo) {
-    throw new TypeError('SButton: передайте не более одного navigation target — href или to')
-  }
-  if (!hasHref && !hasTo) return null
-  if (props.type !== undefined) {
-    throw new TypeError('SButton: navigation target несовместим с native button type')
-  }
-  return resolveLinkTarget({
-    href: props.href,
-    to: props.to,
-    target: props.target,
-    rel: props.rel,
-    owner: 'SButton',
-  })
-})
-const navigationUnavailable = computed(() => props.disabled || props.loading)
-const rootComponent = computed(() => {
-  const target = navigationTarget.value
-  if (!target || navigationUnavailable.value) return target ? 'a' : 'button'
-  return target.kind === 'router' ? RouterLink : 'a'
-})
-
-const rootBindings = computed(() => {
-  const bindings = ownedAttrs.bindings()
-  const managedBindings = isRegisteredTreeAction ? { ...bindings, tabindex: -1 } : bindings
-  const semanticBindings = props.disclosure
-    ? {
-        ...managedBindings,
-        'aria-expanded': props.disclosure.expanded,
-        'aria-controls': props.disclosure.controls,
-      }
-    : managedBindings
-  const target = navigationTarget.value
-  const elementBindings = target === null
-    ? {
-        ...semanticBindings,
-        disabled: props.disabled || props.loading || undefined,
-        type: props.type ?? 'button',
-      }
-    : navigationUnavailable.value
-      ? {
-          ...semanticBindings,
-          'aria-disabled': true,
-          tabindex: -1,
-        }
-      : { ...semanticBindings, ...target.bindings }
-  if (!props.loading) return elementBindings
-
-  const externalAccessibleName = elementBindings['aria-label']
-  const accessibleName = [props.loadingLabel, props.label, externalAccessibleName]
-    .find((candidate): candidate is string => typeof candidate === 'string' && candidate.trim().length > 0)
-  if (!accessibleName && !buttonSlots.default) {
-    throw new Error('SButton: loading action requires label, loadingLabel, or aria-label')
-  }
-  return accessibleName
-    ? { ...elementBindings, 'aria-label': accessibleName }
-    : elementBindings
-})
-
-const passiveContentContract: PassiveContentContract = {
-  owner: 'SButton',
-  region: 'passive default content',
-  guidance: 'Вынесите независимое действие в соседний SButton. / Move the independent action to a sibling SButton.',
-}
-
-watchEffect(() => {
-  const target = navigationTarget.value
-  if (target && props.pressed !== undefined) {
-    throw new Error('SButton: navigation target несовместим с pressed toggle semantics')
-  }
-  if (target && props.disclosure !== undefined) {
-    throw new Error('SButton: navigation target несовместим с disclosure trigger semantics')
-  }
-  if (props.disclosure && props.disclosure.controls.trim().length === 0) {
-    throw new Error('SButton: disclosure.controls must be a non-empty id')
-  }
-  const placement = props.disclosure?.iconPlacement ?? 'trailing'
-  if (props.disclosure && (
-    (placement === 'leading' && props.leadingIcon)
-    || (placement === 'trailing' && props.trailingIcon)
-  )) {
-    throw new Error(`SButton: disclosure ${placement} icon conflicts with the matching icon prop`)
-  }
-})
-
-const isIconOnly = computed(() => props.iconOnly || (
-  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || buttonSlots.default)
-))
-const renderDefaultSlot = computed(() => props.label === undefined || (
-  props.label === '' && !props.leadingIcon && !props.trailingIcon
-))
-const progressIndicatorSize = computed<SProgressIndicatorSize>(() => props.size === 'lg' ? 'sm' : 'xs')
-
-function setRootRef(target: Element | ComponentPublicInstance | null): void {
-  if (target === null) {
-    rootRef.value = null
-    return
-  }
-  if (target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement) {
-    rootRef.value = target
-    return
-  }
-  const element: unknown = Reflect.get(target, '$el')
-  if (!(element instanceof HTMLAnchorElement)) {
-    throw new TypeError('SButton: RouterLink root must resolve to an HTMLAnchorElement')
-  }
-  rootRef.value = element
-}
-
-function handleClick(event: MouseEvent): void {
-  if (navigationTarget.value && navigationUnavailable.value) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
-    return
-  }
-  emit('click', event)
-}
-
-const getElement = (): HTMLButtonElement | HTMLAnchorElement => {
-  const element = rootRef.value
-  if (!element) {
-    throw new Error('SButton: interactive element is unavailable')
-  }
-  return element
-}
-
-defineExpose<SButtonApi>({
-  getElement,
-  focus: (options?: FocusOptions) => getElement().focus(options),
-})
-
-</script>
-
-<style lang="postcss" src="./SButton.css" scoped></style>

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

@@ -1,101 +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-checkbox-control">
-        <input
-          :ref="setInputElement"
-          v-bind="ownedAttrs.bindings()"
-          :id="field.controlId"
-          type="checkbox"
-          class="s-checkbox-input"
-          :checked="checkedValue"
-          :disabled="field.disabled"
-          :required="field.required"
-          :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-checkbox-box">
-          <component
-            :is="indeterminate ? Minus : Check"
-            class="s-checkbox-check"
-            aria-hidden="true"
-            :data-sputnig-ui-icon="indeterminate ? 'minus' : 'check'"
-            data-sputnig-ui-icon-color-mode="auto"
-            data-sputnig-ui-icon-set="classic"
-          />
-        </span>
-      </span>
-    </template>
-  </SField>
-</template>
-
-<script setup lang="ts">
-import { Check, Minus } from '../../icons/sputnigUiIcons'
-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
-  indeterminate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  invalid: false,
-  helpText: undefined,
-  errorMessage: undefined,
-  id: undefined,
-  indeterminate: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  click: [event: MouseEvent]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SCheckbox', owner: 'native checkbox input' })
-useInteractiveLeafRegistration({ owner: 'SCheckbox' })
-const {
-  checkedValue,
-  inputId,
-  onChange,
-  onClick,
-  setInputElement,
-} = useBinaryInput({
-  owner: 'SCheckbox',
-  inputName: 'checkbox',
-  props,
-  indeterminate: () => props.indeterminate,
-  emitUpdate: (value) => emit('update:modelValue', value),
-  emitClick: (event) => emit('click', event),
-})
-</script>
-
-<style lang="postcss" src="./SCheckbox.css" scoped></style>

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

@@ -1,134 +0,0 @@
-<template>
-  <SFieldGroup
-    v-bind="ownedAttrs.bindings()"
-    :id="groupId"
-    :label="label"
-    :help-text="helpText"
-    :error-message="errorMessage"
-    :required="required"
-    :invalid="invalid"
-    :disabled="disabled"
-    :readonly="readonly"
-    :layout="layout"
-    :columns="columns"
-  >
-    <template #default="group">
-      <SCheckbox
-        v-for="record in validatedOptions"
-        :id="record.id"
-        :key="record.token"
-        :model-value="selectedTokens.has(record.token)"
-        :label="record.option.label"
-        :help-text="record.option.helpText"
-        :disabled="group.disabled || record.option.disabled"
-        :readonly="group.readonly"
-        :invalid="group.invalid"
-        :aria-describedby="group.describedBy"
-        @update:model-value="updateOption(record.option.value, $event)"
-      />
-    </template>
-  </SFieldGroup>
-</template>
-
-<script lang="ts">
-import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
-
-/** Одна checkbox option со стабильной domain identity. / One checkbox option with stable domain identity. */
-export interface SCheckboxGroupOption<T extends PublicSelectionKey = PublicSelectionKey> {
-  value: T
-  label: string
-  helpText?: string
-  disabled?: boolean
-}
-</script>
-
-<script setup lang="ts" generic="T extends SelectionKey = string">
-import { computed, useId } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateDomId, validateNonEmptyString } from '../../../internal/runtimeContract'
-import {
-  selectionKeyToken,
-  validateSelectionIdentities,
-  type SelectionKey,
-} from '../_internal/useSelectionRoving'
-import SCheckbox from './SCheckbox.vue'
-import SFieldGroup from './SFieldGroup.vue'
-import type { SFieldGroupColumns, SFieldGroupLayout } from './SFieldGroup.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  modelValue: readonly T[]
-  options: readonly SCheckboxGroupOption<T>[]
-  label: string
-  id?: string
-  helpText?: string
-  errorMessage?: string
-  required?: boolean
-  invalid?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  layout?: SFieldGroupLayout
-  columns?: SFieldGroupColumns
-}>(), {
-  id: undefined,
-  helpText: undefined,
-  errorMessage: undefined,
-  required: false,
-  invalid: false,
-  disabled: false,
-  readonly: false,
-  layout: 'stacked',
-  columns: 1,
-})
-const emit = defineEmits<{ 'update:modelValue': [value: readonly T[]] }>()
-const ownedAttrs = useOwnedAttrs({ component: 'SCheckboxGroup', owner: 'field group' })
-const generatedId = useId()
-const groupId = computed(() => validateDomId(
-  'SCheckboxGroup',
-  'id',
-  props.id ?? `s-checkbox-group-${generatedId}`,
-))
-
-const validatedOptions = computed(() => {
-  validateSelectionIdentities('SCheckboxGroup', props.options.map((option, index) => ({
-    key: option.value,
-    coordinate: `options[${index}].value`,
-  })))
-  return props.options.map((option, index) => {
-    validateNonEmptyString('SCheckboxGroup', `options[${index}].label`, option.label)
-    const token = selectionKeyToken('SCheckboxGroup', option.value, `options[${index}].value`)
-    return { option, token, id: `${groupId.value}-option-${token}` }
-  })
-})
-
-const optionsByToken = computed<ReadonlyMap<string, T>>(() => new Map(
-  validatedOptions.value.map((record) => [record.token, record.option.value]),
-))
-
-const selectedTokens = computed(() => {
-  const modelIndex = validateSelectionIdentities('SCheckboxGroup', props.modelValue.map((value, index) => ({
-    key: value,
-    coordinate: `modelValue[${index}]`,
-  })))
-  const optionIndex = optionsByToken.value
-  for (const [token] of modelIndex) {
-    if (!optionIndex.has(token)) {
-      const index = props.modelValue.findIndex((value) => selectionKeyToken('SCheckboxGroup', value, 'modelValue') === token)
-      throw new Error(`SCheckboxGroup: modelValue[${index}] does not match any option`)
-    }
-  }
-  return new Set(modelIndex.keys())
-})
-
-function updateOption(value: T, selected: boolean): void {
-  if (props.readonly || props.disabled) return
-  const targetToken = selectionKeyToken('SCheckboxGroup', value, 'updated option value')
-  const nextTokens = new Set(selectedTokens.value)
-  if (selected) nextTokens.add(targetToken)
-  else nextTokens.delete(targetToken)
-  emit('update:modelValue', validatedOptions.value
-    .filter((record) => nextTokens.has(record.token))
-    .map((record) => record.option.value))
-}
-</script>

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

@@ -1,122 +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="{ describedBy, labelId }">
-      <div
-        class="s-choice-cards"
-        :data-columns="columns"
-        :data-density="density"
-        :data-selection-indicator="selectionIndicator"
-        v-bind="radioGroup.groupBindings({
-          labelledBy: labelId,
-          describedBy,
-          required,
-          invalid,
-        })"
-      >
-        <button
-          v-for="option in options"
-          :key="radioGroup.optionToken(option.value)"
-          :ref="radioGroup.optionRef(option.value)"
-          class="s-choice-card"
-          v-bind="radioGroup.optionBindings(option)"
-        >
-          <span v-if="option.kicker" class="s-choice-card__kicker">{{ option.kicker }}</span>
-          <span class="s-choice-card__title">{{ option.title }}</span>
-          <span v-if="option.description" class="s-choice-card__description">{{ option.description }}</span>
-          <span v-if="option.meta" class="s-choice-card__meta">{{ option.meta }}</span>
-          <span v-if="selectionIndicator === 'mark' && option.value === modelValue" class="s-choice-card__mark" aria-hidden="true">✓</span>
-        </button>
-      </div>
-    </template>
-    <template v-if="$slots.help" #help><slot name="help" /></template>
-    <template v-if="$slots.error" #error><slot name="error" /></template>
-  </SFieldGroup>
-</template>
-
-<script lang="ts">
-import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
-
-/** Одна radio-card option. / One radio-card option. */
-export interface ChoiceCardOption<T extends PublicSelectionKey = string> {
-  value: T
-  title: string
-  description?: string
-  meta?: string
-  kicker?: string
-  disabled?: boolean
-}
-
-/** Публичный контракт группы карточек выбора. / Public choice-card group contract. */
-export interface Props<T extends PublicSelectionKey = string> {
-  modelValue: T | null
-  options: readonly ChoiceCardOption<T>[]
-  label: string
-  id?: string
-  helpText?: string
-  errorMessage?: string
-  required?: boolean
-  invalid?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  columns?: 'auto' | '2' | '3'
-  density?: 'default' | 'compact'
-  selectionIndicator?: 'mark' | 'none'
-}
-</script>
-
-<script setup lang="ts" generic="T extends SelectionKey = string">
-import { computed } from 'vue'
-import type { VNodeChild } 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,
-  columns: 'auto',
-  density: 'default',
-  selectionIndicator: 'mark',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: T]
-}>()
-defineSlots<{
-  /** Дополнительное описание группы. / Supporting group description. */
-  help?: () => VNodeChild
-  /** Сообщение ошибки при invalid=true. / Error message when invalid=true. */
-  error?: () => VNodeChild
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SChoiceCards', owner: 'field group' })
-useInteractiveLeafRegistration({ owner: 'SChoiceCards' })
-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: 'SChoiceCards',
-})
-</script>
-
-<style lang="postcss" src="./SChoiceCards.css" scoped></style>