@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,66 @@
+/*
+  Стили компонента SInputText.
+*/
+@reference "../../../styles/reference.css";
+
+.s-input-text-wrapper {
+  @apply w-full min-w-0 box-border relative;
+}
+
+.s-input-text {
+  @apply block w-full min-w-0 box-border;
+}
+
+.s-input-text[data-size='sm'] { @apply px-2.5 py-1.5 text-xs; }
+.s-input-text[data-size='md'] { @apply px-3 py-2 text-sm; }
+.s-input-text[data-size='lg'] { @apply px-4 py-2.5 text-lg; }
+
+.s-input-text--monospace {
+  @apply font-mono;
+}
+
+.s-input-text[data-appearance='grid-cell'] {
+  @apply h-8 rounded-none border-transparent bg-transparent px-2 py-1 text-sm shadow-none;
+}
+
+.s-input-text[data-appearance='workbench-title'] {
+  @apply w-full border-transparent bg-transparent text-xl font-bold shadow-none ring-0;
+}
+
+.s-input-text[data-appearance='workbench-title']:focus-visible {
+  @apply bg-surface-0 dark:bg-surface-900;
+}
+
+.s-input-control {
+  @apply relative;
+}
+
+.s-input-text-wrapper[data-trailing='icon'] .s-input-text,
+.s-input-text-wrapper[data-trailing='text'] .s-input-text {
+  @apply pr-10;
+}
+
+.s-input-text-wrapper[data-trailing='action'] .s-input-text {
+  @apply pr-12;
+}
+
+.s-input-trailing {
+  @apply absolute right-2 flex items-center justify-center;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.s-input-trailing__passive {
+  @apply inline-flex items-center justify-center text-surface-400 dark:text-surface-500;
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+}
+
+.s-input-trailing__icon {
+  @apply h-full w-full;
+}
+
+.s-input-trailing__text {
+  @apply inline-flex min-w-5 items-center justify-center rounded border border-surface-200 bg-surface-50 px-1 text-xs font-semibold text-surface-500;
+  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400;
+}

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

@@ -0,0 +1,321 @@
+<template>
+  <div
+    class="s-input-text-wrapper"
+    :data-input-family="inputTypeContract.family"
+    :data-trailing="trailingKind"
+    :data-with-label="Boolean(label) || undefined"
+  >
+    <SField
+      :control-id="inputId"
+      :label="label"
+      :required="required"
+      :help-text="helpText"
+      :error-message="errorMessage"
+      :invalid="invalid"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #default="field">
+        <div class="s-input-control">
+          <input
+            v-bind="{ ...ownedAttrs.bindings(), ...fieldSurfaceBindings(field) }"
+            :id="field.controlId"
+            :name="name"
+            ref="inputRef"
+            :type="inputTypeContract.type"
+            class="s-input-text"
+            :class="{ 's-input-text--monospace': monospace }"
+            :data-size="validatedSize"
+            :data-appearance="validatedAppearance"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :autocomplete="autocomplete"
+            :autocapitalize="autocapitalize"
+            :autocorrect="autocorrect"
+            :spellcheck="spellcheck"
+            :disabled="field.disabled"
+            :readonly="field.readonly"
+            :required="field.required"
+            :aria-invalid="field.invalid || undefined"
+            :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+            @input="onInput"
+            @change="onChange"
+          />
+          <div v-if="trailingKind" class="s-input-trailing" :data-kind="trailingKind">
+            <span v-if="trailingIcon" class="s-input-trailing__passive" aria-hidden="true">
+              <component :is="trailingIcon" class="s-input-trailing__icon" />
+            </span>
+            <span v-else-if="trailingText !== undefined" class="s-input-trailing__text" aria-hidden="true">
+              {{ trailingText }}
+            </span>
+            <SButton
+              v-else-if="trailingAction"
+              label=""
+              size="sm"
+              appearance="ghost"
+              shape="square"
+              icon-only
+              :severity="trailingAction.severity ?? 'secondary'"
+              :leading-icon="trailingAction.icon"
+              :loading="trailingAction.loading"
+              :disabled="field.disabled || trailingAction.disabled"
+              :title="trailingAction.title ?? trailingAction.label"
+              :aria-label="trailingAction.label"
+              @click="emit('trailing-action', $event)"
+            />
+          </div>
+        </div>
+      </template>
+    </SField>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, watchEffect, type Component } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
+import { resolveOptionalDomId, validateExactString } from '../../../internal/runtimeContract'
+import SButton, { type SButtonSeverity } from './SButton.vue'
+import SField from './SField.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/** Текстовые native input types с text-editing semantics. / Textual native input types with text-editing semantics. */
+export type SInputTextTextualType = 'text' | 'search' | 'password' | 'email' | 'tel' | 'url'
+/** Числовой native input type; model events остаются строками. / Numeric native input type; model events remain strings. */
+export type SInputTextNumericType = 'number'
+/** Временные native types со строковым browser value. / Temporal native types with a browser-formatted string value. */
+export type SInputTextTemporalType = 'date' | 'datetime-local' | 'month' | 'time' | 'week'
+/** Конечная native type surface владельца SInputText. / Finite native type surface owned by SInputText. */
+export type SInputTextType = SInputTextTextualType | SInputTextNumericType | SInputTextTemporalType
+
+/**
+ * Дискриминированный native input contract без file/range/choice/button semantics.
+ * Discriminated native input contract without file/range/choice/button semantics.
+ */
+export type SInputTextTypeContract =
+  | { family: 'textual'; type: SInputTextTextualType }
+  | { family: 'numeric'; type: SInputTextNumericType }
+  | { family: 'temporal'; type: SInputTextTemporalType }
+
+const INPUT_TYPES = [
+  'text',
+  'search',
+  'password',
+  'email',
+  'tel',
+  'url',
+  'number',
+  'date',
+  'datetime-local',
+  'month',
+  'time',
+  'week',
+] as const satisfies readonly SInputTextType[]
+
+const INPUT_TYPE_CONTRACTS = {
+  text: { family: 'textual', type: 'text' },
+  search: { family: 'textual', type: 'search' },
+  password: { family: 'textual', type: 'password' },
+  email: { family: 'textual', type: 'email' },
+  tel: { family: 'textual', type: 'tel' },
+  url: { family: 'textual', type: 'url' },
+  number: { family: 'numeric', type: 'number' },
+  date: { family: 'temporal', type: 'date' },
+  'datetime-local': { family: 'temporal', type: 'datetime-local' },
+  month: { family: 'temporal', type: 'month' },
+  time: { family: 'temporal', type: 'time' },
+  week: { family: 'temporal', type: 'week' },
+} as const satisfies Record<SInputTextType, SInputTextTypeContract>
+
+export interface Props {
+  modelValue: string | null
+  /** Стандартные Vue v-model modifiers для строкового input contract. / Standard Vue v-model modifiers for the string input contract. */
+  modelModifiers?: SInputTextModelModifiers
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  monospace?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  appearance?: 'field' | 'grid-cell' | 'workbench-title'
+  invalid?: boolean
+  errorMessage?: string
+  helpText?: string
+  id?: string
+  name?: string
+  type?: SInputTextType
+  trailingIcon?: Component
+  trailingText?: string
+  trailingAction?: SInputTextTrailingAction
+  autocomplete?: string
+  autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
+  autocorrect?: 'on' | 'off'
+  spellcheck?: boolean
+}
+
+export interface SInputTextModelModifiers {
+  trim?: boolean
+  lazy?: boolean
+  number?: boolean
+}
+
+/**
+ * Типизированное действие в trailing-region поля; geometry принадлежит SInputText/SButton.
+ * Typed trailing action whose geometry is owned by SInputText/SButton.
+ */
+export interface SInputTextTrailingAction {
+  label: string
+  icon: Component
+  title?: string
+  severity?: SButtonSeverity
+  disabled?: boolean
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  modelModifiers: () => ({}),
+  label: undefined,
+  placeholder: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  monospace: false,
+  size: 'md',
+  appearance: 'field',
+  invalid: false,
+  errorMessage: undefined,
+  helpText: undefined,
+  id: undefined,
+  name: undefined,
+  type: 'text',
+  trailingIcon: undefined,
+  trailingText: undefined,
+  trailingAction: undefined,
+  autocomplete: undefined,
+  autocapitalize: undefined,
+  autocorrect: undefined,
+  spellcheck: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'trailing-action': [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SInputText', owner: 'native input' })
+useInteractiveLeafRegistration({ owner: 'SInputText' })
+
+const inputRef = ref<HTMLInputElement | null>(null)
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+})
+
+const generatedInputId = useId()
+const inputId = computed(() => resolveOptionalDomId(
+  'SInputText',
+  'id',
+  props.id,
+  `s-input-text-${generatedInputId}`,
+))
+const inputTypeContract = computed<SInputTextTypeContract>(() => {
+  const type = validateExactString('SInputText', 'type', props.type, INPUT_TYPES)
+  return INPUT_TYPE_CONTRACTS[type]
+})
+const validatedSize = computed(() => validateExactString(
+  'SInputText', 'size', props.size, ['sm', 'md', 'lg'] as const,
+))
+const validatedAppearance = computed(() => validateExactString(
+  'SInputText',
+  'appearance',
+  props.appearance,
+  ['field', 'grid-cell', 'workbench-title'] as const,
+))
+const validatedModelModifiers = computed(() => {
+  const candidate: unknown = props.modelModifiers
+  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+    throw new TypeError('SInputText: modelModifiers должен быть object. / SInputText: modelModifiers must be an object.')
+  }
+  const modifiers = candidate as Record<string, unknown>
+  const allowed = new Set(['trim', 'lazy', 'number'])
+  const unknown = Object.keys(modifiers).filter((key) => !allowed.has(key))
+  if (unknown.length > 0) {
+    throw new Error(`SInputText: modelModifiers содержит неизвестные поля ${unknown.join(', ')}. / SInputText: modelModifiers contains unknown fields ${unknown.join(', ')}.`)
+  }
+  for (const key of allowed) {
+    if (modifiers[key] !== undefined && typeof modifiers[key] !== 'boolean') {
+      throw new TypeError(`SInputText: modelModifiers.${key} должен быть boolean. / SInputText: modelModifiers.${key} must be boolean.`)
+    }
+  }
+  if (modifiers.number === true) {
+    throw new Error(
+      'SInputText: modifier number несовместим со строковым modelValue; используйте числовой UI-kit control с числовой моделью. '
+      + '/ SInputText: the number modifier is incompatible with string modelValue; use a numeric UI-kit control with a numeric model.',
+    )
+  }
+  return {
+    trim: modifiers.trim === true,
+    lazy: modifiers.lazy === true,
+  }
+})
+
+function fieldSurfaceBindings(field: {
+  invalid: boolean
+  disabled: boolean
+  readonly: boolean
+}): FieldSurfaceBindings {
+  return resolveFieldSurfaceBindings('SInputText', {
+    kind: 'text-input',
+    appearance: validatedAppearance.value === 'field' ? 'field' : 'embedded',
+    invalid: field.invalid,
+    disabled: field.disabled,
+    readonly: field.readonly,
+  })
+}
+
+const trailingKind = computed<'icon' | 'text' | 'action' | undefined>(() => {
+  if (props.trailingIcon) return 'icon'
+  if (props.trailingText !== undefined) return 'text'
+  if (props.trailingAction) return 'action'
+  return undefined
+})
+
+watchEffect(() => {
+  void validatedModelModifiers.value
+  const trailingContracts = [props.trailingIcon, props.trailingText, props.trailingAction]
+    .filter((value) => value !== undefined)
+  if (trailingContracts.length > 1) {
+    throw new Error('SInputText: trailingIcon, trailingText и trailingAction взаимоисключающие')
+  }
+  if (props.trailingText !== undefined && props.trailingText.length === 0) {
+    throw new Error('SInputText: trailingText не может быть пустым')
+  }
+  if (props.trailingAction && props.trailingAction.label.trim().length === 0) {
+    throw new Error('SInputText: trailingAction.label обязателен')
+  }
+})
+
+function emitInputValue(event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SInputText: input/change event target должен быть HTMLInputElement')
+  }
+  const value = validatedModelModifiers.value.trim ? target.value.trim() : target.value
+  emit('update:modelValue', value)
+}
+
+function onInput(event: Event): void {
+  if (!validatedModelModifiers.value.lazy) emitInputValue(event)
+}
+
+function onChange(event: Event): void {
+  if (validatedModelModifiers.value.lazy) emitInputValue(event)
+}
+
+</script>
+
+<style lang="postcss" src="./SInputText.css" scoped></style>

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

@@ -0,0 +1,72 @@
+@reference "../../../styles/reference.css";
+
+.s-interactive-surface {
+  @apply relative;
+  @apply flex min-h-0 min-w-0 overflow-hidden border border-surface-200 bg-surface-50 text-surface-700;
+  @apply dark:border-surface-700 dark:bg-surface-800/70 dark:text-surface-200;
+  font: inherit;
+  text-decoration: none;
+  appearance: none;
+  transition:
+    background-color var(--s-motion-standard) ease,
+    border-color var(--s-motion-standard) ease,
+    box-shadow var(--s-motion-standard) ease,
+    color var(--s-motion-standard) ease;
+}
+
+.s-interactive-surface__activation {
+  @apply absolute inset-0 z-10 block h-full w-full cursor-pointer border-0 bg-transparent p-0;
+  border-radius: inherit;
+  color: inherit;
+  font: inherit;
+  appearance: none;
+  text-decoration: none;
+}
+
+.s-interactive-surface__activation:disabled,
+.s-interactive-surface[data-disabled='true'] .s-interactive-surface__activation {
+  @apply cursor-not-allowed;
+}
+
+.s-interactive-surface__accessible-label { @apply sr-only; }
+
+.s-interactive-surface__content {
+  @apply relative flex min-h-0 min-w-0 w-full flex-1;
+}
+
+.s-interactive-surface:not([data-mode='static']) .s-interactive-surface__content {
+  pointer-events: none;
+}
+
+.s-interactive-surface[data-fill='container'] { @apply h-full w-full; }
+.s-interactive-surface[data-density='compact'] { @apply text-sm; }
+.s-interactive-surface[data-density='comfortable'] { @apply text-base; }
+.s-interactive-surface[data-padding='none'] { @apply p-0; }
+.s-interactive-surface[data-padding='sm'] { @apply p-3; }
+.s-interactive-surface[data-padding='md'] { @apply p-4; }
+.s-interactive-surface[data-radius='md'] { @apply rounded-md; }
+.s-interactive-surface[data-radius='lg'] { @apply rounded-lg; }
+.s-interactive-surface[data-radius='xl'] { @apply rounded-xl; }
+.s-interactive-surface[data-tone='primary'] { @apply border-primary-200 bg-primary-500/5 dark:border-primary-500/30 dark:bg-primary-500/10; }
+.s-interactive-surface[data-tone='success'] { @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950; }
+.s-interactive-surface[data-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
+.s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
+.s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
+.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }
+.s-interactive-surface[data-content-align='start'] { @apply justify-start text-left; }
+.s-interactive-surface[data-content-align='center'] { @apply justify-center text-center; }
+
+.s-interactive-surface[data-mode='action']:not([data-disabled='true']),
+.s-interactive-surface[data-mode='link']:not([data-disabled='true']) {
+  cursor: pointer;
+}
+
+.s-interactive-surface[data-mode='action']:not([data-disabled='true']):hover,
+.s-interactive-surface[data-mode='link']:not([data-disabled='true']):hover {
+  @apply border-surface-300 text-surface-900 no-underline dark:border-surface-600 dark:text-surface-50;
+}
+
+.s-interactive-surface:has(.s-interactive-surface__activation:focus-visible) {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}