@pgcorp/ui-kit 0.8.1 → 0.10.0

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

@@ -6,7 +6,7 @@
       :id="inputId"
       :model-value="validatedSearch"
       :label="label"
-      :placeholder="placeholder"
+      :placeholder="contract.placeholder"
       :disabled="disabled"
       :readonly="readonly"
       :required="required"
@@ -39,7 +39,7 @@
         :disabled="disabled"
         :readonly="readonly"
         :invalid="invalid"
-        :empty-label="emptyLabel"
+        :empty-label="contract.emptyLabel"
         focus-mode="activedescendant"
         :active-value="activeValue"
         @update:model-value="onListboxUpdate"
@@ -95,6 +95,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & {
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
 import { computed, nextTick, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useFloatingPosition } from '../../../composables/useFloatingPosition'
 import { registerLayer, type LayerRegistration } from '../../../internal/layerStack'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -121,18 +122,19 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   filterMode: 'local',
   label: undefined,
-  placeholder: 'Начните вводить для поиска',
+  placeholder: undefined,
   disabled: false,
   readonly: false,
   required: false,
   invalid: false,
   errorMessage: undefined,
   helpText: undefined,
-  emptyLabel: 'Нет доступных вариантов',
+  emptyLabel: undefined,
   id: undefined,
   size: 'md',
   allowCustomValue: false,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null]
   'update:search': [value: string]
@@ -162,12 +164,12 @@ const contract = computed(() => ({
   filterMode: validateExactString(
     'SCombobox', 'filterMode', props.filterMode, ['local', 'manual'] as const,
   ),
-  placeholder: validateNonEmptyString('SCombobox', 'placeholder', props.placeholder),
+  placeholder: validateNonEmptyString('SCombobox', 'placeholder', props.placeholder ?? t('forms.searchPlaceholder')),
   disabled: validateBoolean('SCombobox', 'disabled', props.disabled),
   readonly: validateBoolean('SCombobox', 'readonly', props.readonly),
   required: validateBoolean('SCombobox', 'required', props.required),
   invalid: validateBoolean('SCombobox', 'invalid', props.invalid),
-  emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel),
+  emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
   size: validateExactString('SCombobox', 'size', props.size, ['sm', 'md', 'lg'] as const),
   allowCustomValue: validateBoolean('SCombobox', 'allowCustomValue', props.allowCustomValue),
   label: validateOptionalSelectionString('SCombobox', 'label', props.label),

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

@@ -6,10 +6,13 @@
 
 .s-combobox-trigger[data-width='full'] { @apply w-full; }
 .s-combobox-trigger[data-width='auto'] { @apply w-auto; }
-.s-combobox-trigger[data-size='xs'] { min-height: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
-.s-combobox-trigger[data-size='sm'] { min-height: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
-.s-combobox-trigger[data-size='md'] { min-height: var(--s-control-hitbox-md); @apply text-sm; }
-.s-combobox-trigger[data-appearance='swatch'] { width: var(--s-control-hitbox-md); @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-size='xs'] { block-size: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
+.s-combobox-trigger[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
+.s-combobox-trigger[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply text-sm; }
+.s-combobox-trigger[data-appearance='swatch'] { @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-appearance='swatch'][data-size='xs'] { inline-size: var(--s-control-hitbox-xs); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='sm'] { inline-size: var(--s-control-hitbox-sm); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='md'] { inline-size: var(--s-control-hitbox-md); }
 .s-combobox-trigger[data-appearance='swatch']:disabled { @apply cursor-not-allowed opacity-50; }
 
 .s-combobox-trigger__value {

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

@@ -29,7 +29,7 @@
   >
     <SMarker v-if="marker" :marker="marker" :size="appearance === 'swatch' ? 'lg' : 'sm'" />
     <span v-if="appearance === 'field'" class="s-combobox-trigger__value">
-      {{ displayValue || placeholder }}
+      {{ displayValue || resolvedPlaceholder }}
     </span>
     <span class="s-combobox-trigger__caret" aria-hidden="true">
       <ChevronsUpDown v-if="appearance === 'field'" />
@@ -40,6 +40,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { ChevronDown, ChevronsUpDown } from '../../icons/sputnigUiIcons'
 import type { InteractiveElementApi } from '../../../internal/interactiveElement'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
@@ -76,7 +77,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props>(), {
   displayValue: undefined,
-  placeholder: 'Выберите значение',
+  placeholder: undefined,
   marker: undefined,
   appearance: 'field',
   size: 'md',
@@ -92,6 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
   taskMappingInternalValue: undefined,
   taskMappingKind: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('forms.selectPlaceholder'))
 
 const emit = defineEmits<{
   toggle: [event: MouseEvent | KeyboardEvent]

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

@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 import { computed, type Component } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { Minus, MinusCircle, PlusCircle } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../../internal/runtimeContract'
@@ -36,11 +37,12 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   partial: false,
-  addTitle: 'Добавить в контекст',
-  removeTitle: 'Убрать из контекста',
+  addTitle: undefined,
+  removeTitle: undefined,
   size: 'sm',
   loading: false,
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   (e: 'click'): void
@@ -48,8 +50,8 @@ const emit = defineEmits<{
 const ownedAttrs = useOwnedAttrs({ component: 'SContextToggleButton', owner: 'toggle button' })
 
 const accessibleLabels = computed(() => ({
-  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle),
-  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle),
+  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle ?? t('forms.addToContext')),
+  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle ?? t('forms.removeFromContext')),
 }))
 const accessibleTitle = computed(() => (
   props.inContext ? accessibleLabels.value.remove : accessibleLabels.value.add

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

@@ -1,7 +1,7 @@
 <template>
   <SButton
     v-bind="ownedAttrs.bindings()"
-    size="sm"
+    :size="size"
     severity="secondary"
     appearance="ghost"
     icon-only
@@ -22,20 +22,23 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
 import { getSputnigUiIconComponent } from '../../icons/sputnigUiIcons'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SButton from './SButton.vue'
+import SButton, { type SButtonSize } from './SButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{
   label: string
   orientation?: 'vertical' | 'horizontal'
+  size?: SButtonSize
   canMovePrevious?: boolean
   canMoveNext?: boolean
   disabled?: boolean
 }>(), {
   orientation: 'vertical',
+  size: 'sm',
   canMovePrevious: false,
   canMoveNext: false,
   disabled: false,
@@ -49,14 +52,15 @@ const emit = defineEmits<{
 
 const DragIcon = getSputnigUiIconComponent('drag')
 const ownedAttrs = useOwnedAttrs({ component: 'SDragHandle', owner: 'drag handle command' })
+const { t } = useUiKitLocale()
 const keyboardActive = ref(false)
 const validatedLabel = computed(() => validateNonEmptyString('SDragHandle', 'label', props.label))
 const keyboardShortcuts = computed(() => props.orientation === 'vertical'
   ? 'Enter Space ArrowUp ArrowDown Escape'
   : 'Enter Space ArrowLeft ArrowRight Escape')
 const accessibleLabel = computed(() => keyboardActive.value
-  ? `Перемещение: ${validatedLabel.value}. Используйте стрелки, Enter — завершить, Escape — отменить`
-  : `Переместить: ${validatedLabel.value}. Нажмите Enter и используйте стрелки`)
+  ? t('layout.dragActive', { label: validatedLabel.value })
+  : t('layout.dragIdle', { label: validatedLabel.value }))
 
 function setKeyboardActive(active: boolean): void {
   if (keyboardActive.value === active) return

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

@@ -13,14 +13,14 @@
         v-if="isOpen"
         ref="layerRef"
         kind="dropdown"
-        :landmark-label="menuLabel"
+        :landmark-label="resolvedMenuLabel"
         :position="position"
         :z-index="zIndex"
       >
         <SMenuSurface
           ref="menuSurfaceRef"
           :id="menuId"
-          :label="menuLabel"
+          :label="resolvedMenuLabel"
           density="compact"
           autofocus
           :initial-focus="initialFocus"
@@ -48,6 +48,7 @@ import {
   type VNodeRef,
 } from 'vue'
 import { useOwnedAttrs, type OwnedAttributeBindings } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useMenuLayer } from '../../../internal/useMenuLayer'
 import SMenuLayer from '../_internal/SMenuLayer.vue'
 import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
@@ -63,8 +64,10 @@ const props = withDefaults(defineProps<{
   menuLabel?: string
 }>(), {
   align: 'right',
-  menuLabel: 'Дополнительные действия',
+  menuLabel: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedMenuLabel = computed(() => props.menuLabel ?? t('dialog.moreActions'))
 const emit = defineEmits<{
   select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
 }>()
@@ -180,7 +183,7 @@ function select(item: SMenuSelectableEntry, event: SMenuActivationEvent): void {
 
 watchEffect(() => {
   validateSMenuEntries(props.items)
-  if (!props.menuLabel.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
+  if (!resolvedMenuLabel.value.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
   if (props.align !== 'left' && props.align !== 'right') throw new TypeError("SDropdownMenu: align must be 'left' or 'right'")
 })
 </script>

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

@@ -11,16 +11,17 @@
   @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[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 py-0 text-xs; }
+.s-input-text[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply px-3 py-0 text-sm; }
+.s-input-text[data-size='lg'] { block-size: var(--s-control-hitbox-lg); @apply px-4 py-0 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;
+  block-size: var(--s-density-row-compact);
+  @apply rounded-none border-transparent bg-transparent px-2 py-0 text-sm shadow-none;
 }
 
 .s-input-text[data-appearance='workbench-title'] {

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

@@ -140,6 +140,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
 import { computed, onBeforeUnmount, provide, useId } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import {
@@ -168,12 +169,13 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   readonly: false,
   invalid: false,
   variant: 'select',
-  emptyLabel: 'Нет доступных вариантов',
+  emptyLabel: undefined,
   clearOptionLabel: undefined,
   id: undefined,
   focusMode: 'roving',
   activeValue: undefined,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
   'update:activeValue': [value: TKey | null]
@@ -200,7 +202,7 @@ const contract = computed(() => {
       ? `s-listbox-${generatedId}`
       : validateDomId('SListbox', 'id', props.id),
     label: validateNonEmptyString('SListbox', 'label', props.label),
-    emptyLabel: validateNonEmptyString('SListbox', 'emptyLabel', props.emptyLabel),
+    emptyLabel: validateNonEmptyString('SListbox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
     variant: validateExactString(
       'SListbox', 'variant', props.variant, ['select', 'color'] as const,
     ),

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

@@ -105,6 +105,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
 
 <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'
@@ -135,7 +136,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   label: undefined,
-  placeholder: 'Выберите значение',
+  placeholder: undefined,
   disabled: false,
   readonly: false,
   required: false,
@@ -151,6 +152,7 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   title: undefined,
   selectionMode: undefined,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
 }>()
@@ -176,7 +178,7 @@ const contract = computed(() => {
     label: props.label === undefined
       ? undefined
       : validateNonEmptyString('SSelect', 'label', props.label),
-    placeholder: validateNonEmptyString('SSelect', 'placeholder', props.placeholder),
+    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),

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

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