@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,89 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-field"
+    :class="`s-field--${layout}`"
+    :data-disabled="disabled || undefined"
+    :data-readonly="readonly || undefined"
+    :data-invalid="isInvalid || undefined"
+    :data-fill="fill"
+  >
+    <label v-if="hasLabel" :id="labelId" class="s-field__label" :for="controlId">
+      <slot name="label">{{ label }}</slot>
+      <span v-if="required" class="s-field__required" aria-hidden="true">*</span>
+    </label>
+
+    <div class="s-field__control">
+      <slot
+        :control-id="controlId"
+        :labelled-by="hasLabel ? labelId : undefined"
+        :described-by="describedBy"
+        :invalid="isInvalid"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+      />
+    </div>
+
+    <p v-if="helpText || $slots.help" :id="helpId" class="s-field__help">
+      <slot name="help">{{ helpText }}</slot>
+    </p>
+    <p v-if="isInvalid && (errorMessage || $slots.error)" :id="errorId" class="s-field__error">
+      <slot name="error">{{ errorMessage }}</slot>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+/** Расположение подписи относительно control-region. / Label placement relative to the control region. */
+export type SFieldLayout = 'stacked' | 'inline'
+
+/** Высота field-root и его control-region. / Height contract for the field root and control region. */
+export type SFieldFill = 'content' | 'container'
+
+export interface Props {
+  controlId: string
+  label?: string
+  required?: boolean
+  helpText?: string
+  errorMessage?: string
+  invalid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  layout?: SFieldLayout
+  fill?: SFieldFill
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  required: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  invalid: false,
+  disabled: false,
+  readonly: false,
+  layout: 'stacked',
+  fill: 'content',
+})
+const slots = useSlots()
+const ownedAttrs = useOwnedAttrs({ component: 'SField', owner: 'field root' })
+
+const isInvalid = computed(() => props.invalid)
+const hasLabel = computed(() => Boolean(props.label || slots.label))
+const labelId = computed(() => `${props.controlId}-label`)
+const helpId = computed(() => `${props.controlId}-help`)
+const errorId = computed(() => `${props.controlId}-error`)
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.helpText || slots.help) ids.push(helpId.value)
+  if (isInvalid.value && (props.errorMessage || slots.error)) ids.push(errorId.value)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+</script>
+
+<style lang="postcss" src="./SField.css" scoped></style>

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

@@ -0,0 +1,58 @@
+@reference "../../../styles/reference.css";
+
+.s-field-group {
+  @apply m-0 min-w-0 border-0 p-0;
+}
+
+.s-field-group__legend {
+  @apply mb-2 min-w-0 text-sm font-medium text-surface-700 dark:text-surface-300;
+}
+
+.s-field-group__required {
+  @apply ml-0.5 text-danger-600 dark:text-danger-400;
+}
+
+.s-field-group__controls {
+  @apply grid min-w-0 gap-2;
+}
+
+.s-field-group[data-layout='inline'] .s-field-group__controls {
+  @apply flex flex-wrap items-start;
+}
+
+.s-field-group[data-layout='grid'][data-columns='2'] .s-field-group__controls {
+  @apply grid-cols-2;
+}
+
+.s-field-group[data-layout='grid'][data-columns='3'] .s-field-group__controls {
+  @apply grid-cols-3;
+}
+
+.s-field-group[data-layout='grid'][data-columns='4'] .s-field-group__controls {
+  @apply grid-cols-4;
+}
+
+.s-field-group__help,
+.s-field-group__error {
+  @apply mt-1 min-w-0 whitespace-normal text-xs;
+  overflow-wrap: anywhere;
+}
+
+.s-field-group__help {
+  @apply text-surface-500 dark:text-surface-400;
+}
+
+.s-field-group__error {
+  @apply text-danger-600 dark:text-danger-400;
+}
+
+.s-field-group[data-disabled='true'] .s-field-group__legend,
+.s-field-group[data-readonly='true'] .s-field-group__legend {
+  @apply text-surface-400 dark:text-surface-500;
+}
+
+@media (max-width: 40rem) {
+  .s-field-group[data-layout='grid'][data-columns] .s-field-group__controls {
+    @apply grid-cols-1;
+  }
+}

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

@@ -0,0 +1,117 @@
+<template>
+  <fieldset
+    v-bind="ownedAttrs.bindings()"
+    :id="groupId"
+    class="s-field-group"
+    :disabled="disabled"
+    :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), describedBy)"
+    :aria-invalid="invalid || undefined"
+    :data-disabled="disabled || undefined"
+    :data-readonly="readonly || undefined"
+    :data-invalid="invalid || undefined"
+    :data-layout="validatedLayout"
+    :data-columns="validatedLayout === 'grid' ? validatedColumns : undefined"
+  >
+    <legend :id="labelId" class="s-field-group__legend">
+      <slot name="label">{{ validatedLabel }}</slot>
+      <span v-if="required" class="s-field-group__required" aria-hidden="true">*</span>
+    </legend>
+
+    <div class="s-field-group__controls">
+      <slot
+        :group-id="groupId"
+        :label-id="labelId"
+        :described-by="describedBy"
+        :invalid="invalid"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+      />
+    </div>
+
+    <p v-if="helpText || $slots.help" :id="helpId" class="s-field-group__help">
+      <slot name="help">{{ helpText }}</slot>
+    </p>
+    <p v-if="invalid && (errorMessage || $slots.error)" :id="errorId" class="s-field-group__error">
+      <slot name="error">{{ errorMessage }}</slot>
+    </p>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { computed, useId, useSlots } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoundedInteger,
+  validateDomId,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+/** Раскладка controls внутри семантической группы. / Controls layout inside a semantic group. */
+export type SFieldGroupLayout = 'stacked' | 'inline' | 'grid'
+/** Число semantic grid columns без raw CSS length. / Semantic grid column count without a raw CSS length. */
+export type SFieldGroupColumns = 1 | 2 | 3 | 4
+
+const FIELD_GROUP_LAYOUTS = ['stacked', 'inline', 'grid'] as const
+const FIELD_GROUP_COLUMNS_DOMAIN = { minimum: 1, maximum: 4 } as const
+
+export interface Props {
+  label: string
+  id?: string
+  helpText?: string
+  errorMessage?: string
+  required?: boolean
+  invalid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  layout?: SFieldGroupLayout
+  columns?: SFieldGroupColumns
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  helpText: undefined,
+  errorMessage: undefined,
+  required: false,
+  invalid: false,
+  disabled: false,
+  readonly: false,
+  layout: 'stacked',
+  columns: 1,
+})
+const slots = useSlots()
+const ownedAttrs = useOwnedAttrs({ component: 'SFieldGroup', owner: 'native fieldset' })
+const generatedId = useId()
+const groupId = computed(() => validateDomId(
+  'SFieldGroup',
+  'id',
+  props.id ?? `s-field-group-${generatedId}`,
+))
+const labelId = computed(() => `${groupId.value}-legend`)
+const validatedLabel = computed(() => validateNonEmptyString('SFieldGroup', 'label', props.label))
+const helpId = computed(() => `${groupId.value}-help`)
+const errorId = computed(() => `${groupId.value}-error`)
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.helpText || slots.help) ids.push(helpId.value)
+  if (props.invalid && (props.errorMessage || slots.error)) ids.push(errorId.value)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+const validatedLayout = computed<SFieldGroupLayout>(() => validateExactString(
+  'SFieldGroup',
+  'layout',
+  props.layout,
+  FIELD_GROUP_LAYOUTS,
+))
+const validatedColumns = computed<SFieldGroupColumns>(() => validateBoundedInteger(
+  'SFieldGroup',
+  'columns',
+  props.columns,
+  FIELD_GROUP_COLUMNS_DOMAIN,
+) as SFieldGroupColumns)
+</script>
+
+<style lang="postcss" src="./SFieldGroup.css" scoped></style>

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

@@ -0,0 +1,12 @@
+@reference "../../../styles/reference.css";
+
+.s-field-label {
+  @apply min-w-0 whitespace-normal font-medium text-surface-600 dark:text-surface-300;
+  overflow-wrap: anywhere;
+}
+
+.s-field-label[data-size='sm'] { @apply text-xs; }
+.s-field-label[data-size='md'] { @apply text-sm; }
+.s-field-label[data-align='end'] { @apply text-right; }
+.s-field-label[data-disabled='true'] { @apply text-surface-400 dark:text-surface-500; }
+.s-field-label__required { @apply ml-0.5 text-danger-600 dark:text-danger-400; }

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

@@ -0,0 +1,51 @@
+<template>
+  <label
+    v-bind="ownedAttrs.bindings()"
+    class="s-field-label"
+    :for="forId"
+    :data-align="align"
+    :data-size="size"
+    :data-disabled="disabled || undefined"
+  >
+    <slot />
+    <span v-if="required" class="s-field-label__required" aria-hidden="true">*</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * Standalone label-owner для композиций с раздельными grid-регионами подписи и control.
+ * Standalone label owner for compositions with separate label and control grid regions.
+ */
+export interface Props {
+  /** ID связанного control. / ID of the associated control. */
+  forId?: string
+  /** Выравнивание текста внутри label-region. / Text alignment within the label region. */
+  align?: 'start' | 'end'
+  /** Семантический размер типографики. / Semantic typography size. */
+  size?: 'sm' | 'md'
+  /** Показывает обязательность без замены native required control contract. / Shows required presentation without replacing the native control contract. */
+  required?: boolean
+  /** Приглушает подпись связанного disabled control. / Mutes the label of an associated disabled control. */
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  forId: undefined,
+  align: 'start',
+  size: 'md',
+  required: false,
+  disabled: false,
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SFieldLabel', owner: 'native label' })
+
+defineSlots<{ default?: () => VNodeChild }>()
+</script>
+
+<style lang="postcss" src="./SFieldLabel.css" scoped></style>

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

@@ -0,0 +1,61 @@
+@reference "../../../styles/reference.css";
+
+.s-inline-token-editor {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding-top: var(--s-inline-token-editor-padding-top);
+  padding-right: var(--s-inline-token-editor-padding-right);
+  padding-bottom: var(--s-inline-token-editor-padding-bottom);
+  padding-left: var(--s-inline-token-editor-padding-left);
+  line-height: var(--s-inline-token-editor-line-height);
+  @apply relative block w-full break-words text-sm text-surface-800 caret-surface-800 dark:text-surface-100 dark:caret-surface-100;
+}
+
+.s-inline-token-editor[data-placeholder-visible='true']::before {
+  content: attr(data-placeholder);
+  pointer-events: none;
+  @apply text-surface-400 dark:text-surface-500;
+}
+
+.s-inline-token-editor[data-appearance='default'] {
+  --s-inline-token-editor-padding-top: 0.5rem;
+  --s-inline-token-editor-padding-right: 0.75rem;
+  --s-inline-token-editor-padding-bottom: 0.5rem;
+  --s-inline-token-editor-padding-left: 0.75rem;
+  --s-inline-token-editor-line-height: 1.5;
+}
+
+.s-inline-token-editor[data-appearance='ghost'] {
+  --s-inline-token-editor-padding-top: 0;
+  --s-inline-token-editor-padding-right: 0;
+  --s-inline-token-editor-padding-bottom: 0;
+  --s-inline-token-editor-padding-left: 0;
+  --s-inline-token-editor-line-height: 1.45;
+  appearance: none;
+  @apply border-0 bg-transparent shadow-none ring-0;
+}
+
+.s-inline-token-editor[data-appearance='ghost']:focus {
+  @apply border-0 shadow-none ring-0;
+}
+
+.s-inline-token-editor[data-disabled='true'] {
+  @apply cursor-not-allowed opacity-70;
+}
+
+.s-inline-token-editor[data-readonly='true'] {
+  @apply cursor-text;
+}
+
+.s-inline-token-editor[data-appearance='ghost'][data-disabled='true'] {
+  @apply text-surface-400 dark:text-surface-500;
+}
+
+.s-inline-token-editor[data-appearance='ghost'][data-invalid='true'] {
+  @apply text-danger-700 dark:text-danger-300;
+}
+
+.s-inline-token-editor__token {
+  vertical-align: baseline;
+  @apply mx-0.5 inline-flex max-w-52 items-center rounded-xl border border-primary-300/90 bg-primary-100/90 px-1 text-xs font-semibold leading-tight text-primary-800 shadow-sm backdrop-blur-md dark:border-primary-700/80 dark:bg-primary-900/40 dark:text-primary-100;
+}