@pgcorp/ui-kit 0.8.1 → 0.10.0

package/src/components/shared/navigation/SCatalogNavigator.vue

@@ -1,33 +1,33 @@
 <template>
-  <section v-bind="ownedAttrs.bindings()" class="s-catalog-navigator" :aria-label="ariaLabel">
+  <section v-bind="ownedAttrs.bindings()" class="s-catalog-navigator" :aria-label="resolvedAriaLabel">
     <div class="s-catalog-navigator__toolbar">
       <SInputText
         v-model="query"
         size="sm"
-        :placeholder="searchPlaceholder"
-        :aria-label="searchPlaceholder"
+        :placeholder="resolvedSearchPlaceholder"
+        :aria-label="resolvedSearchPlaceholder"
       />
       <SSelect
         v-model="selectedGroup"
         size="sm"
         :options="groupOptions"
-        :label="groupFilterLabel"
+        :label="resolvedGroupFilterLabel"
       />
       <SSelect
         v-model="sortMode"
         size="sm"
         :options="sortOptions"
-        label="Сортировка"
+        :label="t('navigation.sort')"
       />
     </div>
 
     <div class="s-catalog-navigator__summary" aria-live="polite">
-      Найдено: {{ filteredItemCount }} из {{ items.length }}
+      {{ t('navigation.found') }} {{ filteredItemCount }} {{ t('navigation.of') }} {{ items.length }}
     </div>
 
-    <div class="s-catalog-navigator__viewport" role="region" :aria-label="`${ariaLabel}: элементы`">
+    <div class="s-catalog-navigator__viewport" role="region" :aria-label="t('navigation.catalogItems', { catalog: resolvedAriaLabel })">
       <div v-if="groupedItems.length === 0" class="s-catalog-navigator__empty">
-        {{ emptyText }}
+        {{ resolvedEmptyText }}
       </div>
       <template v-else>
         <SCatalogNavigatorGroup
@@ -81,6 +81,7 @@ import SButton from '../controls/SButton.vue';
 import SBadge from '../data-display/SBadge.vue';
 import SCatalogNavigatorGroup from './_internal/SCatalogNavigatorGroup.vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { useUiKitLocale } from '../../../composables/useUiKitLocale';
 
 defineOptions({ inheritAttrs: false });
 
@@ -104,11 +105,16 @@ const props = withDefaults(defineProps<{
   emptyText?: string;
 }>(), {
   selectedId: null,
-  ariaLabel: 'Каталог',
-  searchPlaceholder: 'Поиск',
-  groupFilterLabel: 'Группа',
-  emptyText: 'Ничего не найдено.',
+  ariaLabel: undefined,
+  searchPlaceholder: undefined,
+  groupFilterLabel: undefined,
+  emptyText: undefined,
 });
+const { locale, t } = useUiKitLocale();
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.catalog'));
+const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('actions.search'));
+const resolvedGroupFilterLabel = computed(() => props.groupFilterLabel ?? t('navigation.group'));
+const resolvedEmptyText = computed(() => props.emptyText ?? t('navigation.noResults'));
 
 const emit = defineEmits<{
   (event: 'select', id: string): void;
@@ -240,19 +246,19 @@ function groupDisclosureId(groupKey: string): string {
 }
 
 const groupOptions = computed(() => [
-  { value: ALL_GROUP_FILTER, label: 'Все группы' },
+  { value: ALL_GROUP_FILTER, label: t('navigation.allGroups') },
   ...[...catalogInventory.value.groups]
-    .sort((left, right) => left.label.localeCompare(right.label, 'ru'))
+    .sort((left, right) => left.label.localeCompare(right.label, locale.value))
     .map((group) => ({ value: group.filterValue, label: group.label })),
 ]);
 
-const sortOptions = [
-  { value: 'title-asc', label: 'По названию' },
-  { value: 'title-desc', label: 'По названию, обратно' },
-  { value: 'id-asc', label: 'По ID' },
-];
+const sortOptions = computed(() => [
+  { value: 'title-asc', label: t('navigation.sortNameAscending') },
+  { value: 'title-desc', label: t('navigation.sortNameDescending') },
+  { value: 'id-asc', label: t('navigation.sortId') },
+]);
 
-const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase('ru'));
+const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase(locale.value));
 
 const selectedGroupKey = computed(() => {
   if (selectedGroup.value === ALL_GROUP_FILTER) return null;

package/src/components/shared/navigation/STabList.vue

@@ -35,7 +35,7 @@
             class="s-tab-list__tabs"
             :id="tabListId"
             role="tablist"
-            :aria-label="ariaLabel"
+            :aria-label="resolvedAriaLabel"
             aria-orientation="horizontal"
           >
             <slot />
@@ -48,7 +48,7 @@
       ref="controlsRef"
       class="s-tabs-header__controls"
       role="group"
-      :aria-label="controlsAriaLabel"
+      :aria-label="resolvedControlsAriaLabel"
     >
       <slot name="controls" />
     </div>
@@ -81,7 +81,7 @@
         class="s-tab-list__tabs"
         :id="tabListId"
         role="tablist"
-        :aria-label="ariaLabel"
+        :aria-label="resolvedAriaLabel"
         aria-orientation="horizontal"
       >
         <slot />
@@ -92,7 +92,7 @@
       ref="controlsRef"
       class="s-tabs-header__controls"
       role="group"
-      :aria-label="controlsAriaLabel"
+      :aria-label="resolvedControlsAriaLabel"
     >
       <slot name="controls" />
     </div>
@@ -116,6 +116,7 @@ import {
   type STabsContext,
 } from '../_internal/tabsContext'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 
 defineOptions({
@@ -150,11 +151,14 @@ const props = withDefaults(defineProps<Props>(), {
   divider: true,
   inset: 'none',
   headerPosition: 'sticky',
-  ariaLabel: 'Вкладки',
+  ariaLabel: undefined,
   tabListId: undefined,
   leadingAriaLabel: undefined,
-  controlsAriaLabel: 'Действия вкладок',
+  controlsAriaLabel: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.tabs'))
+const resolvedControlsAriaLabel = computed(() => props.controlsAriaLabel ?? t('navigation.tabActions'))
 
 watch(
   () => props.tabListId,

package/src/components/shared/navigation/STabs.vue

@@ -21,8 +21,8 @@
       <STabList
         v-if="variant !== 'bottom'"
         placement="top"
-        :aria-label="ariaLabel"
-        :controls-aria-label="controlsAriaLabel"
+        :aria-label="resolvedAriaLabel"
+        :controls-aria-label="resolvedControlsAriaLabel"
         :header-position="headerPosition"
         :inset="tabListInset"
       >
@@ -33,8 +33,8 @@
       <STabList
         v-if="variant === 'bottom'"
         placement="bottom"
-        :aria-label="ariaLabel"
-        :controls-aria-label="controlsAriaLabel"
+        :aria-label="resolvedAriaLabel"
+        :controls-aria-label="resolvedControlsAriaLabel"
       >
         <slot name="list" />
         <template v-if="$slots.controls" #controls><slot name="controls" /></template>
@@ -58,6 +58,7 @@ import {
   type VNodeChild,
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { lastItem } from '../../../internal/es2020'
 import {
@@ -153,8 +154,8 @@ const props = withDefaults(defineProps<Props>(), {
   defaultValue: undefined,
   activationMode: 'automatic',
   tone: 'primary',
-  ariaLabel: 'Вкладки',
-  controlsAriaLabel: 'Действия вкладок',
+  ariaLabel: undefined,
+  controlsAriaLabel: undefined,
   headerPosition: 'sticky',
   tabListInset: 'none',
   grow: true,
@@ -166,6 +167,9 @@ const props = withDefaults(defineProps<Props>(), {
   surfaceRadius: 'default',
   surface: 'default',
 })
+const { t } = useUiKitLocale()
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.tabs'))
+const resolvedControlsAriaLabel = computed(() => props.controlsAriaLabel ?? t('navigation.tabActions'))
 
 const emit = defineEmits<{
   'update:modelValue': [key: string]
@@ -213,8 +217,8 @@ function assertPropsContract(): void {
   if (props.modelValue !== undefined && props.defaultValue !== undefined) {
     throw new Error('STabs: modelValue and defaultValue are mutually exclusive')
   }
-  if (!props.ariaLabel.trim()) throw new TypeError('STabs: ariaLabel must be non-empty')
-  if (!props.controlsAriaLabel.trim()) throw new TypeError('STabs: controlsAriaLabel must be non-empty')
+  if (!resolvedAriaLabel.value.trim()) throw new TypeError('STabs: ariaLabel must be non-empty')
+  if (!resolvedControlsAriaLabel.value.trim()) throw new TypeError('STabs: controlsAriaLabel must be non-empty')
   if (props.testId !== undefined && !props.testId.trim()) throw new TypeError('STabs: testId must be non-empty')
 }
 
@@ -223,8 +227,8 @@ watch(() => [
   props.composition,
   props.modelValue,
   props.defaultValue,
-  props.ariaLabel,
-  props.controlsAriaLabel,
+  resolvedAriaLabel.value,
+  resolvedControlsAriaLabel.value,
   props.testId,
 ] as const, assertPropsContract)
 
@@ -538,7 +542,7 @@ defineExpose({
   --s-tab-padding-inline: var(--s-tab-base-padding-inline);
   --s-tab-padding-block: 0;
   --s-tab-content-offset-y: 0;
-  --s-tab-trigger-min-height: var(--s-control-hitbox-sm);
+  --s-tab-trigger-min-height: var(--s-tab-row-height);
   --s-tab-indicator-width: 2px;
   --s-tab-radius: 0.375rem 0.375rem 0 0;
   --s-tab-active-translate-y: 1px;

package/src/components/shared/navigation/SWizardSteps.vue

@@ -63,6 +63,7 @@ export interface Props<T extends PublicSelectionKey = string | number> {
 
 <script setup lang="ts" generic="T extends SelectionKey = string | number">
 import { computed } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import SButton from '../controls/SButton.vue'
@@ -86,8 +87,9 @@ interface WizardStepRecord<TStep extends SelectionKey> {
 const props = withDefaults(defineProps<Props<T>>(), {
   columns: 'auto',
   density: 'default',
-  ariaLabel: 'Шаги мастера',
+  ariaLabel: undefined,
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   'update:modelValue': [value: T]
@@ -125,7 +127,7 @@ const validatedDensity = computed(() => validateExactString(
 const validatedAriaLabel = computed(() => validateNonEmptyString(
   'SWizardSteps',
   'ariaLabel',
-  props.ariaLabel,
+  props.ariaLabel ?? t('navigation.wizardSteps'),
 ))
 
 const stepRecords = computed<readonly WizardStepRecord<T>[]>(() => {

package/src/components/shared/persona/SPersonaProjectPicker.vue

@@ -25,6 +25,7 @@ import {
   resolvePersonaProjectPickerAsyncState,
 } from './_internal/inventory'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 
 defineOptions({ inheritAttrs: false })
 
@@ -52,6 +53,7 @@ const emit = defineEmits<{
   'activate-connected': [bindingId: string]
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SPersonaProjectPicker', owner: 'project-picker modal surface' })
+const { locale, t } = useUiKitLocale()
 
 const filter = ref('')
 const selectedProjectId = ref<string | null>(null)
@@ -122,8 +124,8 @@ const listing = computed(() => {
 const pickerAsyncState = computed(() => resolvePersonaProjectPickerAsyncState(
   props.state,
   {
-    loadingMessage: 'Загрузка каталогов',
-    emptyMessage: 'Выберите область поиска',
+    loadingMessage: t('persona.loadingCatalogs'),
+    emptyMessage: t('persona.chooseSearchArea'),
   },
 ))
 const projectInventory = computed(() => {
@@ -139,10 +141,10 @@ const selectedProject = computed(() => {
   return project?.isSelectable ? project : null
 })
 const visibleDirectories = computed(() => {
-  const query = filter.value.trim().toLocaleLowerCase('ru-RU')
+  const query = filter.value.trim().toLocaleLowerCase(locale.value)
   if (!query) return listing.value?.directories ?? []
   return (listing.value?.directories ?? []).filter((directory) =>
-    `${directory.name} ${directory.displayPath}`.toLocaleLowerCase('ru-RU').includes(query),
+    `${directory.name} ${directory.displayPath}`.toLocaleLowerCase(locale.value).includes(query),
   )
 })
 const breadcrumbs = computed(() => {
@@ -165,7 +167,9 @@ const breadcrumbs = computed(() => {
   }
   return result
 })
-const emptyLabel = computed(() => filter.value.trim() ? 'Совпадений не найдено' : 'В каталоге нет вложенных директорий')
+const emptyLabel = computed(() => filter.value.trim()
+  ? t('persona.noMatches')
+  : t('persona.noNestedDirectories'))
 
 watch(
   () => props.open,
@@ -205,8 +209,8 @@ function connectedProject(project: PersonaProjectPickerEntry): PersonaProjectPic
 function projectActionLabel(project: PersonaProjectPickerEntry): string | undefined {
   if (!project.isSelectable) return undefined
   const connected = connectedProject(project)
-  if (connected) return connected.active ? 'Активен' : 'Открыть'
-  return selectedProject.value?.id === project.id ? 'Выбран' : 'Выбрать'
+  if (connected) return connected.active ? t('persona.active') : t('persona.open')
+  return selectedProject.value?.id === project.id ? t('persona.selected') : t('persona.select')
 }
 
 function projectAction(project: PersonaProjectPickerEntry): void {
@@ -227,14 +231,14 @@ function confirmSelection(): void {
   <SModal
     v-bind="ownedAttrs.bindings()"
     :open="open"
-    title="Выбор Persona-проекта"
+    :title="t('persona.pickerTitle')"
     size="wide"
     @update:open="emit('update:open', $event)"
   >
     <div class="s-persona-project-picker">
       <div v-if="validatedConnectedProjects.length > 0" class="s-persona-project-picker__connected">
-        <SPanel title="Подключённые" :icon="FolderTree">
-          <SActionList accessible-label="Подключённые Persona-проекты" max-height="md">
+        <SPanel :title="t('persona.connected')" :icon="FolderTree">
+          <SActionList :accessible-label="t('persona.connectedProjects')" max-height="md">
             <SActionListItem
               v-for="project in validatedConnectedProjects"
               :key="project.id"
@@ -242,9 +246,9 @@ function confirmSelection(): void {
               :description="project.path"
               :icon="FolderTree"
               :selected="project.active"
-              :status-label="project.active ? 'Активен' : undefined"
+              :status-label="project.active ? t('persona.active') : undefined"
               status-severity="success"
-              :surface="{ mode: 'action', accessibleLabel: `Открыть проект ${project.title}` }"
+              :surface="{ mode: 'action', accessibleLabel: t('persona.openProject', { title: project.title }) }"
               @activate="emit('activate-connected', project.id)"
             />
           </SActionList>
@@ -257,8 +261,8 @@ function confirmSelection(): void {
             <SSelect
               :model-value="resolvedSelectedRootId"
               :options="rootOptions"
-              placeholder="Выберите область"
-              aria-label="Область поиска проектов"
+              :placeholder="t('persona.selectArea')"
+              :aria-label="t('persona.projectSearchArea')"
               @update:model-value="selectRoot"
             />
           </div>
@@ -266,8 +270,8 @@ function confirmSelection(): void {
             ref="searchInput"
             v-model="filter"
             size="sm"
-            placeholder="Найти в текущем каталоге"
-            aria-label="Поиск каталога"
+            :placeholder="t('persona.searchCurrentCatalog')"
+            :aria-label="t('persona.catalogSearch')"
           />
           <SButton
             label=""
@@ -275,8 +279,8 @@ function confirmSelection(): void {
             severity="secondary"
             :leading-icon="RefreshCw"
             icon-only
-            title="Обновить каталог"
-            aria-label="Обновить каталог"
+            :title="t('persona.refreshCatalog')"
+            :aria-label="t('persona.refreshCatalog')"
             @click="emit('refresh')"
           />
         </div>
@@ -284,13 +288,13 @@ function confirmSelection(): void {
         <SBreadcrumbs
           v-if="listing"
           :items="breadcrumbs"
-          aria-label="Путь к каталогу"
+          :aria-label="t('persona.catalogPath')"
           @action="navigateBreadcrumb($event)"
         />
 
         <SAsyncState :state="pickerAsyncState">
           <div v-if="listing" class="s-persona-project-picker__content">
-            <SActionList accessible-label="Директории и Persona-проекты" max-height="lg">
+            <SActionList :accessible-label="t('persona.directoriesAndProjects')" max-height="lg">
               <SActionListItem
                 v-if="listing.current.isSelectable"
                 :title="listing.current.projectName || listing.current.name"
@@ -302,7 +306,7 @@ function confirmSelection(): void {
                 :action-icon="connectedProject(listing.current)?.active ? Check : undefined"
                 :action-disabled="connectedProject(listing.current)?.active"
                 action-severity="success"
-                status-label="Persona-проект"
+                :status-label="t('persona.personaProject')"
                 status-severity="success"
                 :surface="{ mode: 'static' }"
                 @action="projectAction(listing.current)"
@@ -319,10 +323,10 @@ function confirmSelection(): void {
                 :action-icon="connectedProject(directory)?.active || selectedProject?.id === directory.id ? Check : undefined"
                 :action-disabled="connectedProject(directory)?.active"
                 :action-severity="connectedProject(directory)?.active || selectedProject?.id === directory.id ? 'success' : 'secondary'"
-                :status-label="directory.readiness === 'unreadable' ? 'Нет доступа' : directory.readiness === 'invalid' ? 'Ошибка проекта' : undefined"
+                :status-label="directory.readiness === 'unreadable' ? t('persona.noAccess') : directory.readiness === 'invalid' ? t('persona.projectError') : undefined"
                 status-severity="danger"
                 :trailing-icon="directory.isSelectable || directory.readiness === 'unreadable' || directory.readiness === 'invalid' ? undefined : ChevronRight"
-                :surface="{ mode: 'action', accessibleLabel: `Открыть ${directory.name}` }"
+                :surface="{ mode: 'action', accessibleLabel: t('persona.openDirectory', { name: directory.name }) }"
                 @activate="emit('navigate', directory.relativePath)"
                 @action="projectAction(directory)"
               />
@@ -331,7 +335,7 @@ function confirmSelection(): void {
             <SEmptyState
               v-if="visibleDirectories.length === 0"
               :title="emptyLabel"
-              :description="filter.trim() ? 'Измените запрос или перейдите в другой каталог.' : 'Вернитесь на уровень выше или выберите другую область.'"
+              :description="filter.trim() ? t('persona.adjustSearch') : t('persona.chooseAnotherArea')"
               :icon="FolderSearch"
               size="sm"
             />
@@ -341,7 +345,7 @@ function confirmSelection(): void {
               :loading="state.pagination === 'loading-more'"
               @click="emit('load-more')"
             >
-              Загрузить ещё
+              {{ t('persona.loadMore') }}
             </SButton>
           </div>
         </SAsyncState>
@@ -352,8 +356,8 @@ function confirmSelection(): void {
       <SBadge v-if="selectedProject" severity="info">{{ selectedProject.displayPath }}</SBadge>
     </template>
     <template #footer-end>
-      <SButton severity="secondary" @click="emit('update:open', false)">Отмена</SButton>
-      <SButton :disabled="!selectedProject" @click="confirmSelection">Подключить проект</SButton>
+      <SButton severity="secondary" @click="emit('update:open', false)">{{ t('persona.cancel') }}</SButton>
+      <SButton :disabled="!selectedProject" @click="confirmSelection">{{ t('persona.connectProject') }}</SButton>
     </template>
   </SModal>
 </template>