@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,338 @@
+<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 { 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: 'Выберите значение',
+  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 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),
+    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-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-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/STextarea.css

@@ -0,0 +1,31 @@
+@reference "../../../styles/reference.css";
+
+.s-textarea {
+  @apply block w-full resize-none text-sm;
+}
+
+.s-textarea[data-monospace='true'] {
+  @apply font-mono;
+}
+
+.s-textarea[data-appearance='default'][data-size='sm'] { @apply px-2.5 py-1.5 text-xs; }
+.s-textarea[data-appearance='default'][data-size='md'] { @apply px-3 py-2 text-sm; }
+.s-textarea[data-appearance='default'][data-size='lg'] { @apply px-4 py-2.5 text-lg; }
+
+.s-textarea[data-appearance='ghost'] {
+  @apply border-0 bg-transparent p-0 text-surface-800 shadow-none ring-0 placeholder:text-surface-400 dark:text-surface-100 dark:placeholder:text-surface-500;
+  appearance: none;
+  line-height: 1.45;
+}
+
+.s-textarea[data-appearance='ghost']:focus {
+  @apply border-0 shadow-none ring-0;
+}
+
+.s-textarea[data-appearance='ghost']:disabled {
+  @apply cursor-not-allowed text-surface-400 dark:text-surface-500;
+}
+
+.s-textarea[data-appearance='ghost'][data-invalid='true'] {
+  @apply text-danger-700 placeholder:text-danger-400 dark:text-danger-300 dark:placeholder:text-danger-300/80;
+}

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

@@ -0,0 +1,316 @@
+<template>
+  <SField
+    :control-id="textareaId"
+    :label="label"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    :fill="validatedAppearance === 'ghost' ? 'container' : 'content'"
+  >
+    <template #default="field">
+      <textarea
+        v-bind="{ ...ownedAttrs.bindings(), ...resolveFieldBindings(field) }"
+        :id="textareaId"
+        ref="textareaRef"
+        class="s-textarea"
+        :data-appearance="validatedAppearance"
+        :data-size="validatedSize"
+        :data-monospace="monospace || undefined"
+        :data-auto-resize="resizeContract.mode === 'content' || undefined"
+        :data-max-rows="validatedMaxRows"
+        :data-invalid="field.invalid || undefined"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="field.disabled"
+        :readonly="field.readonly"
+        :required="field.required"
+        :aria-invalid="field.invalid || undefined"
+        :aria-required="field.required || undefined"
+        :aria-readonly="field.readonly || undefined"
+        :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+        :rows="validatedRows"
+        @input="handleInput"
+        @keydown="emit('keydown', $event)"
+        @keyup="handleKeyup"
+        @click="handleClick"
+      />
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
+import {
+  resolveOptionalDomId,
+  validateBoolean,
+  validateBoundedInteger,
+  validateExactString,
+} from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/** Визуальная интеграция native textarea с SField. / Native textarea visual integration with SField. */
+export type STextareaAppearance = 'default' | 'ghost'
+export type STextareaSize = 'sm' | 'md' | 'lg'
+
+/**
+ * Дискриминированный resize contract: fixed не имеет maxRows, content может быть bounded или unbounded.
+ * Discriminated resize contract: fixed has no maxRows; content can be bounded or unbounded.
+ */
+export type STextareaResizeContract =
+  | { mode: 'fixed'; autoResize: false }
+  | { mode: 'content'; autoResize: true; maxRows?: number }
+
+const TEXTAREA_APPEARANCES = ['default', 'ghost'] as const satisfies readonly STextareaAppearance[]
+const TEXTAREA_SIZES = ['sm', 'md', 'lg'] as const satisfies readonly STextareaSize[]
+const TEXTAREA_ROWS_DOMAIN = { minimum: 1, maximum: 100 } as const
+
+export interface Props {
+  modelValue: string | null
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  errorMessage?: string
+  helpText?: string
+  id?: string
+  rows?: number
+  size?: STextareaSize
+  autoResize?: boolean
+  maxRows?: number
+  appearance?: STextareaAppearance
+  monospace?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: undefined,
+  placeholder: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  errorMessage: undefined,
+  helpText: undefined,
+  id: undefined,
+  rows: 3,
+  size: 'md',
+  autoResize: false,
+  maxRows: undefined,
+  appearance: 'default',
+  monospace: false,
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'keydown', keyboardEvent: KeyboardEvent): void
+  (event: 'keyup', keyboardEvent: KeyboardEvent): void
+  (event: 'click', mouseEvent: MouseEvent): void
+  (event: 'state-change', state: { text: string; cursor: number }): void
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'STextarea', owner: 'native textarea' })
+useInteractiveLeafRegistration({ owner: 'STextarea' })
+const generatedTextareaId = useId()
+const textareaId = computed(() => resolveOptionalDomId(
+  'STextarea',
+  'id',
+  props.id,
+  `s-textarea-${generatedTextareaId}`,
+))
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const validatedAppearance = computed<STextareaAppearance>(() => validateExactString(
+  'STextarea',
+  'appearance',
+  props.appearance,
+  TEXTAREA_APPEARANCES,
+))
+const validatedSize = computed<STextareaSize>(() => validateExactString(
+  'STextarea',
+  'size',
+  props.size,
+  TEXTAREA_SIZES,
+))
+const validatedRows = computed(() => validateBoundedInteger(
+  'STextarea',
+  'rows',
+  props.rows,
+  TEXTAREA_ROWS_DOMAIN,
+))
+const validatedMaxRows = computed(() => props.maxRows === undefined
+  ? undefined
+  : validateBoundedInteger('STextarea', 'maxRows', props.maxRows, TEXTAREA_ROWS_DOMAIN))
+const resizeContract = computed<STextareaResizeContract>(() => {
+  const autoResize = validateBoolean('STextarea', 'autoResize', props.autoResize)
+  const maxRows = validatedMaxRows.value
+  if (!autoResize && maxRows !== undefined) {
+    throw new TypeError(
+      `STextarea: maxRows применяется только при autoResize=true; получено autoResize=false, maxRows=${maxRows}. `
+      + `/ STextarea: maxRows applies only when autoResize=true; received autoResize=false, maxRows=${maxRows}.`,
+    )
+  }
+  if (maxRows !== undefined && maxRows < validatedRows.value) {
+    throw new TypeError(
+      `STextarea: maxRows не может быть меньше rows; получено rows=${validatedRows.value}, maxRows=${maxRows}. `
+      + `/ STextarea: maxRows cannot be less than rows; received rows=${validatedRows.value}, maxRows=${maxRows}.`,
+    )
+  }
+  if (!autoResize) return { mode: 'fixed', autoResize: false }
+  if (maxRows === undefined) return { mode: 'content', autoResize: true }
+  return { mode: 'content', autoResize: true, maxRows }
+})
+
+function resolveFieldBindings(field: {
+  invalid: boolean
+  disabled: boolean
+  readonly: boolean
+}): FieldSurfaceBindings {
+  return resolveFieldSurfaceBindings('STextarea', {
+    kind: 'textarea',
+    appearance: validatedAppearance.value === 'default' ? 'field' : 'ghost',
+    invalid: field.invalid,
+    disabled: field.disabled,
+    readonly: field.readonly,
+  })
+}
+
+function emitState(target: HTMLTextAreaElement): void {
+  emit('state-change', {
+    text: target.value,
+    cursor: validateSelectionOffset(target.selectionStart, target.value.length, 'state-change cursor'),
+  })
+}
+
+function handleInput(event: Event): void {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+  emitState(target)
+  nextTick(resize)
+}
+
+function handleKeyup(event: KeyboardEvent): void {
+  emit('keyup', event)
+  emitState(event.currentTarget as HTMLTextAreaElement)
+}
+
+function handleClick(event: MouseEvent): void {
+  emit('click', event)
+  emitState(event.currentTarget as HTMLTextAreaElement)
+}
+
+function resize(): void {
+  const textarea = textareaRef.value
+  const contract = resizeContract.value
+  if (contract.mode === 'fixed' || !textarea || textarea.scrollHeight === 0) return
+
+  const style = window.getComputedStyle(textarea)
+  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5
+  const paddingTop = Number.parseFloat(style.paddingTop) || 0
+  const paddingBottom = Number.parseFloat(style.paddingBottom) || 0
+  const minimumHeight = validatedRows.value * lineHeight + paddingTop + paddingBottom
+  const maximumHeight = contract.maxRows !== undefined
+    ? contract.maxRows * lineHeight + paddingTop + paddingBottom
+    : 0
+
+  if (props.disabled || props.modelValue === null || props.modelValue.length === 0) {
+    textarea.style.height = `${minimumHeight}px`
+    textarea.style.overflowY = 'hidden'
+    return
+  }
+
+  textarea.style.height = 'auto'
+  const contentHeight = textarea.scrollHeight
+  if (maximumHeight > 0 && contentHeight > maximumHeight) {
+    textarea.style.height = `${maximumHeight}px`
+    textarea.style.overflowY = 'auto'
+    return
+  }
+
+  textarea.style.height = `${Math.max(minimumHeight, contentHeight)}px`
+  textarea.style.overflowY = 'hidden'
+}
+
+function focus(): void {
+  textareaRef.value?.focus()
+}
+
+function requireTextarea(coordinate: string): HTMLTextAreaElement {
+  const textarea = textareaRef.value
+  if (!textarea) {
+    throw new Error(
+      `STextarea: textarea не готова для ${coordinate}; дождитесь mount. `
+      + `/ STextarea: textarea is not ready for ${coordinate}; wait for mount.`,
+    )
+  }
+  return textarea
+}
+
+function validateSelectionOffset(offset: unknown, textLength: number, coordinate: string): number {
+  return validateBoundedInteger('STextarea', coordinate, offset, { minimum: 0, maximum: textLength })
+}
+
+function getSelectionOffset(): number {
+  const textarea = requireTextarea('getSelectionOffset')
+  return validateSelectionOffset(textarea.selectionStart, textarea.value.length, 'getSelectionOffset')
+}
+
+function setSelectionOffset(offset: number): void {
+  const textarea = requireTextarea('setSelectionOffset')
+  const nextOffset = validateSelectionOffset(offset, textarea.value.length, 'setSelectionOffset')
+  textarea.focus()
+  textarea.setSelectionRange(nextOffset, nextOffset)
+}
+
+function insertSoftLineBreak(): void {
+  const textarea = requireTextarea('insertSoftLineBreak')
+  if (props.disabled || props.readonly) return
+
+  const start = validateSelectionOffset(textarea.selectionStart, textarea.value.length, 'insertSoftLineBreak selectionStart')
+  const end = validateSelectionOffset(textarea.selectionEnd, textarea.value.length, 'insertSoftLineBreak selectionEnd')
+  if (end < start) {
+    throw new RangeError(
+      `STextarea: insertSoftLineBreak selectionEnd=${end} меньше selectionStart=${start}. `
+      + `/ STextarea: insertSoftLineBreak selectionEnd=${end} is below selectionStart=${start}.`,
+    )
+  }
+  const nextValue = `${textarea.value.slice(0, start)}\n${textarea.value.slice(end)}`
+  const nextCursor = start + 1
+
+  emit('update:modelValue', nextValue)
+  nextTick(() => {
+    const currentTextarea = textareaRef.value
+    if (!currentTextarea) return
+    currentTextarea.focus()
+    currentTextarea.setSelectionRange(nextCursor, nextCursor)
+    emitState(currentTextarea)
+    resize()
+  })
+}
+
+defineExpose({
+  focus,
+  getSelectionOffset,
+  insertSoftLineBreak,
+  resize,
+  setSelectionOffset,
+})
+
+onMounted(resize)
+watch(
+  () => [props.modelValue, props.disabled, props.rows, props.maxRows] as const,
+  () => nextTick(resize),
+)
+</script>
+
+<style lang="postcss" src="./STextarea.css"></style>