dxd-style-code 0.1.11 → 0.1.13

package/src/components/molecules/DXInputGroup/DXInputGroup.stories.js

@@ -13,7 +13,95 @@ import {
 export default {
   title: 'Molecules/DXInputGroup',
   component: DXInputGroup,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXInputGroup
+
+Группа полей ввода с поддержкой аддонов (префиксов и суффиксов) и синхронизацией состояний.
+
+## Назначение
+
+DXInputGroup предоставляет способ группировки полей ввода с дополнительными элементами (аддонами)
+слева и справа. Компонент автоматически управляет синхронизацией размеров, состояний disabled/error
+и правильным применением border-radius для создания визуально единой группы.
+
+## Архитектура
+
+### Использует
+- \`DXInput\` - основное поле ввода (автоматически адаптируется при использовании внутри группы)
+- \`DXInputAddon\` - аддоны слева и справа от поля
+- \`DXSelect\` - может использоваться вместо DXInput
+- \`DXTextarea\` - может использоваться вместо DXInput
+- \`provide/inject\` - для передачи контекста группы к дочерним компонентам
+- Система регистрации компонентов - для отслеживания структуры и правильного применения стилей
+
+### Используется в
+- Формы с префиксами (например, https:// для URL)
+- Формы с суффиксами (например, валюта для цены)
+- Формы с обоими аддонами (например, $ и .00 для суммы)
+- Интеграция с селектами и textarea
+
+## Внутренняя логика
+
+### Система регистрации компонентов
+Компонент отслеживает порядок регистрации дочерних компонентов для:
+- Определения наличия аддонов слева и справа от каждого поля
+- Правильного применения border-radius:
+  - Оба аддона → \`rounded-none\` (без скругления)
+  - Только слева → \`rounded-l-none rounded-r-xl\` (скругление справа)
+  - Только справа → \`rounded-l-xl rounded-r-none\` (скругление слева)
+  - Нет аддонов → \`rounded-xl\` (полное скругление)
+- Синхронизации размеров всех компонентов в группе
+
+### Интеграция с дочерними компонентами
+При использовании дочерних компонентов внутри группы:
+- **DXInput**: Автоматически регистрируется как 'input', получает информацию о позиции аддонов
+- **DXInputAddon**: Автоматически регистрируется как 'addon', синхронизирует размер и состояние
+- **DXSelect**: Может использоваться вместо DXInput, также регистрируется
+- **DXTextarea**: Может использоваться вместо DXInput, также регистрируется
+
+### Синхронизация состояний
+- **size**: Размер применяется ко всем компонентам в группе
+- **disabled**: Состояние disabled наследуется всеми компонентами
+- **error**: Состояние ошибки синхронизируется со всеми компонентами (красная рамка)
+
+## Особенности
+
+### Размеры
+Поддерживает три размера: \`sm\`, \`md\` (по умолчанию), \`lg\`.
+Размер применяется ко всем компонентам в группе автоматически.
+
+### Label и Helper
+- **label**: Отображается над группой полей
+- **helper**: Вспомогательный текст под группой полей
+- **error**: Текст ошибки (заменяет helper при наличии)
+
+### Аддоны
+Аддоны могут содержать:
+- Текст (например, "https://", "USD", "$")
+- Иконки (через \`icon\` prop в DXInputAddon)
+- Комбинацию текста и иконки
+
+### Гибкость
+Группа может содержать:
+- Только поле без аддонов
+- Поле с аддоном слева
+- Поле с аддоном справа
+- Поле с аддонами с обеих сторон
+- Несколько полей с аддонами
+
+### Визуальное единство
+Все компоненты в группе визуально объединены:
+- Общие границы между элементами
+- Синхронизированные размеры
+- Единое состояние (disabled/error)
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/molecules/DXInputMask/DXInputMask.stories.js

@@ -5,6 +5,73 @@ export default {
   title: 'Molecules/DXInputMask',
   component: DXInputMask,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXInputMask
+
+Компонент поля ввода с маской для форматирования ввода (телефоны, карты, даты и т.д.).
+
+## Назначение
+
+DXInputMask предоставляет способ форматирования ввода данных по заданной маске.
+Компонент автоматически применяет маску при вводе и извлекает сырое значение для v-model.
+
+## Архитектура
+
+### Использует
+- Нативный input - для ввода текста
+- Логика маскирования - для форматирования
+
+### Используется в
+- Ввод телефонов
+- Ввод номеров карт
+- Ввод дат в определенном формате
+- Ввод SSN и других форматов
+- Любые места, требующие форматированный ввод
+
+## Внутренняя логика
+
+### Маска
+Маска задается через \`mask\` prop:
+- \`#\` - цифра (0-9)
+- Любые другие символы - статичные символы маски
+
+Примеры:
+- \`"+7 (###) ###-##-##"\` - телефон
+- \`"#### #### #### ####"\` - номер карты
+- \`"##/##/####"\` - дата
+
+### Форматирование
+- При вводе автоматически применяется маска
+- Извлекаются только цифры для v-model
+- Статичные символы маски добавляются автоматически
+
+### Валидация ввода
+- Разрешаются только цифры (для масок с #)
+- Служебные клавиши (Backspace, Delete, стрелки) разрешены
+- Остальные символы блокируются
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Значение содержит только цифры (без форматирования)
+- При установке значения автоматически применяется маска
+
+### Позиция курсора
+Курсор автоматически позиционируется в конец введенного текста.
+
+### Примеры масок
+- Телефон: \`"+7 (###) ###-##-##"\`
+- Карта: \`"#### #### #### ####"\`
+- Дата: \`"##/##/####"\`
+- SSN: \`"###-##-####"\`
+        `,
+      },
+    },
+  },
 };
 
 export const Phone = {

package/src/components/molecules/DXMenu/DXMenu.stories.js

@@ -1,5 +1,7 @@
 import { ref } from 'vue';
 import DXMenu from './DXMenu.vue';
+import DXHeading from '../../atoms/DXHeading/DXHeading.vue';
+import DXText from '../../atoms/DXText/DXText.vue';
 import {
   HomeIcon,
   ChartBarIcon,
@@ -12,7 +14,112 @@ import {
 export default {
   title: 'Molecules/DXMenu',
   component: DXMenu,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXMenu
+
+Компонент меню навигации с поддержкой вертикального и горизонтального режимов, поиска, компактного режима и вложенных элементов.
+
+## Назначение
+
+DXMenu предоставляет полнофункциональное меню навигации с поддержкой секций, вложенных элементов, поиска,
+компактного режима и различных вариантов визуального оформления. Компонент автоматически адаптируется
+для вертикального и горизонтального отображения.
+
+## Архитектура
+
+### Использует
+- \`DXCard\` - контейнер меню с настраиваемым padding и вариантом
+- \`DXNav\` - семантическая обертка для навигации
+- \`DXSidebarMenuItem\` - элементы меню
+- \`DXInput\` - поле поиска
+- \`DXHeading\` - заголовок меню
+- \`DXIcon\` - иконки в элементах меню
+
+### Используется в
+- Боковые панели навигации
+- Горизонтальные меню
+- Навигация в приложениях
+- Меню настроек
+- Любые места, требующие структурированной навигации
+
+## Внутренняя логика
+
+### Направления
+- **vertical** (по умолчанию): Вертикальное меню, элементы расположены в колонку
+- **horizontal**: Горизонтальное меню, элементы расположены в строку
+
+### Структура меню
+Меню состоит из секций, каждая секция может содержать:
+- \`title\` - заголовок секции (опционально)
+- \`items\` - массив элементов меню
+
+Каждый элемент может содержать:
+- \`id\` - уникальный идентификатор
+- \`label\` - текст элемента
+- \`icon\` - иконка (Heroicon компонент, опционально)
+- \`to\` - путь для навигации (Vue Router)
+- \`href\` - обычная ссылка
+- \`badge\` - бейдж/счетчик (опционально)
+- \`badgeVariant\` - вариант бейджа
+- \`children\` - вложенные элементы (опционально)
+- \`active\` - активное состояние (опционально)
+
+### Поиск
+При \`searchable={true}\`:
+- В вертикальном режиме: поле поиска под заголовком
+- В горизонтальном режиме: поле поиска в заголовке справа
+- Фильтрация элементов меню по тексту в реальном времени
+- В компактном режиме поиск скрывается
+
+### Компактный режим
+При \`compact={true}\`:
+- Скрывается текст элементов, показываются только иконки
+- Скрывается заголовок (если не переопределен через слот)
+- Скрывается поиск
+- Меню занимает минимальную ширину
+
+### Заголовок
+- Автоматически показывается, если есть \`title\` или слот \`header\`
+- Можно принудительно показать/скрыть через \`showHeader\`
+- Размер заголовка: \`sm\`, \`md\`, \`lg\`
+
+### Визуальное оформление
+- **cardVariant**: Вариант карточки (default, bordered, elevated, flat)
+- **cardPadding**: Padding карточки (none, sm, md, lg)
+- Настраивается через props DXCard
+
+## Особенности
+
+### Вложенные элементы
+Поддерживает многоуровневую вложенность элементов через \`children\`:
+- Вложенные элементы отображаются с отступом
+- Поддержка активного состояния для вложенных элементов
+- Клик по родительскому элементу может открывать/закрывать вложенные
+
+### Активное состояние
+- Автоматическое определение активного элемента на основе текущего маршрута (если используется \`to\`)
+- Можно задать явно через \`active\` prop в элементе
+
+### Бейджи
+- Отображаются справа от текста элемента
+- Поддерживают различные варианты (info, warning, danger и т.д.)
+- Полезны для отображения счетчиков уведомлений
+
+### Слоты
+- \`header\` - кастомный заголовок меню
+- Слоты для кастомизации элементов меню
+
+### Интеграция с Vue Router
+При использовании \`to\` prop, элементы автоматически становятся \`router-link\` и поддерживают
+активные состояния на основе текущего маршрута.
+        `,
+      },
+    },
+  },
   argTypes: {
     direction: {
       control: { type: 'select' },
@@ -98,8 +205,8 @@ const ContentPlaceholder = `
   <div class="flex-1 bg-slate-50 rounded-xl border-2 border-dashed border-slate-300 p-8 flex items-center justify-center">
     <div class="text-center">
       <div class="text-4xl mb-2">📄</div>
-      <h3 class="text-lg font-semibold text-slate-700">Content Area</h3>
-      <p class="text-sm text-slate-500">Main content goes here</p>
+      <DXHeading level="3" size="lg" weight="semibold" color="default">Content Area</DXHeading>
+      <DXText tag="p" size="sm" color="muted">Main content goes here</DXText>
     </div>
   </div>
 `;
@@ -116,7 +223,7 @@ export const Playground = {
     showHeader: undefined,
     headerSize: 'md',
     cardPadding: 'none',
-    cardVariant: 'default',
+    cardVariant: 'bordered',
   },
   render: (args) => ({
     components: { DXMenu },

package/src/components/molecules/DXMenu/DXMenu.vue

@@ -13,7 +13,7 @@
         <!-- Horizontal режим: все в одну строку -->
         <template v-if="direction === 'horizontal'">
           <slot v-if="!compact" name="header">
-            <h2 v-if="title" :class="headerTitleClasses">{{ title }}</h2>
+            <DXHeading v-if="title" level="2" :size="headerSizeMap" weight="bold" color="default" :class="headerTitleClasses">{{ title }}</DXHeading>
           </slot>
           
           <!-- Search inline для horizontal -->
@@ -48,7 +48,7 @@
         <!-- Vertical режим: текущий layout -->
         <template v-else>
           <slot v-if="!compact" name="header">
-            <h2 v-if="title" :class="headerTitleClasses">{{ title }}</h2>
+            <DXHeading v-if="title" level="2" :size="headerSizeMap" weight="bold" color="default" :class="headerTitleClasses">{{ title }}</DXHeading>
           </slot>
           
           <button
@@ -83,7 +83,7 @@
       </div>
 
       <!-- Меню -->
-      <nav :class="navClasses">
+      <DXNav type="menu" :class="navClasses">
         <!-- Horizontal режим: items в строку без section titles -->
         <template v-if="direction === 'horizontal'">
           <template v-for="(section, sectionIndex) in filteredSections" :key="sectionIndex">
@@ -130,7 +130,7 @@
             />
           </div>
         </template>
-      </nav>
+      </DXNav>
 
       <!-- Футер (только для vertical) -->
       <div v-if="$slots.footer && !compact && direction === 'vertical'" :class="footerClasses">
@@ -153,6 +153,8 @@ import DXSidebarMenuItem from '../../organisms/DXSidebarMenu/DXSidebarMenuItem.v
 import DXInput from '../DXInput/DXInput.vue';
 import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
 import DXDivider from '../../atoms/DXDivider/DXDivider.vue';
+import DXHeading from '../../atoms/DXHeading/DXHeading.vue';
+import DXNav from '../../atoms/DXNav/DXNav.vue';
 
 const $slots = useSlots();
 
@@ -288,10 +290,21 @@ const headerClasses = computed(() => {
 });
 
 const headerTitleClasses = computed(() => [
-  'font-bold text-slate-900',
   props.direction === 'horizontal' ? 'text-base' : HEADER_SIZE_CLASSES[props.headerSize].title
 ]);
 
+const headerSizeMap = computed(() => {
+  if (props.direction === 'horizontal') {
+    return 'base';
+  }
+  const sizeMap = {
+    sm: 'base',
+    md: 'lg',
+    lg: 'xl',
+  };
+  return sizeMap[props.headerSize] || sizeMap.md;
+});
+
 const navClasses = computed(() => {
   if (props.direction === 'horizontal') {
     return 'flex flex-row items-center gap-1 px-4 py-2 overflow-visible';

package/src/components/molecules/DXMenu/README.md

@@ -269,7 +269,7 @@ const currentPage = ref('/home');
 | `showHeader` | Boolean | `undefined` | Показывать header (undefined = автоматически) |
 | `headerSize` | String | `'md'` | Размер header: sm, md, lg (только vertical) |
 | `cardPadding` | String | `'none'` | Padding карточки: none, sm, md, lg |
-| `cardVariant` | String | `'default'` | Вариант карточки: default, bordered, elevated, flat |
+| `cardVariant` | String | `'bordered'` | Вариант карточки: bordered, elevated, flat |
 
 ## Структура данных sections
 

package/src/components/molecules/DXPagination/DXPagination.stories.js

@@ -4,9 +4,112 @@ import { ref } from 'vue';
 export default {
   title: 'Molecules/DXPagination',
   component: DXPagination,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXPagination
+
+Компонент пагинации для навигации по страницам с поддержкой v-model.
+
+## Назначение
+
+DXPagination предоставляет удобный способ навигации по страницам с визуальным отображением
+текущей страницы и быстрым доступом к соседним страницам. Компонент автоматически управляет
+отображением номеров страниц и эллипсисов для больших списков.
+
+## Архитектура
+
+### Использует
+- \`DXNav\` - семантическая обертка навигации с автоматическим aria-label
+- \`DXButton\` - кнопки для навигации и номеров страниц
+- \`DXIcon\` - иконки для кнопок Previous/Next (ChevronLeftIcon, ChevronRightIcon)
+
+### Используется в
+- Таблицы с пагинацией (\`DXTable\`, \`DXTablePagination\`)
+- Списки элементов с разбивкой на страницы
+- Результаты поиска
+- Любые компоненты, требующие навигации по страницам
+
+## Внутренняя логика
+
+### Отображение страниц
+Компонент автоматически вычисляет видимые страницы:
+- Всегда показывает первую страницу
+- Показывает страницы вокруг текущей (количество определяется \`siblingCount\`)
+- Добавляет эллипсисы (\`...\`) когда есть пропуски
+- Всегда показывает последнюю страницу (если страниц больше 1)
+
+### Варианты кнопок
+- **Previous/Next**: Используют \`DXButton\` с \`variant="ghost"\` и \`iconOnly={true}\`
+- **Активная страница**: Использует \`DXButton\` с \`variant="primary"\`
+- **Неактивные страницы**: Используют \`DXButton\` с \`variant="ghost"\`
+
+### Состояния
+- **disabled**: Кнопки Previous/Next автоматически отключаются на первой/последней странице
+- **active**: Текущая страница визуально выделяется через \`variant="primary"\`
+- **aria-current**: Автоматически добавляется к текущей странице для accessibility
+
+## Особенности
+
+### Размеры
+Поддерживает три размера: \`sm\`, \`md\` (по умолчанию), \`lg\`.
+Размер применяется ко всем кнопкам в пагинации.
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Значение - номер текущей страницы (Number, начиная с 1)
+- Автоматически валидирует границы (не может быть меньше 1 или больше \`totalPages\`)
+
+### Accessibility
+- Использует \`DXNav\` с \`aria-label="Pagination"\`
+- Кнопки Previous/Next имеют \`aria-label\`
+- Текущая страница имеет \`aria-current="page"\`
+- Все кнопки поддерживают клавиатурную навигацию через \`DXButton\`
+
+## Ограничения
+
+- Минимальное количество страниц: 1
+- Номер страницы начинается с 1 (не с 0)
+- \`siblingCount\` определяет количество страниц вокруг текущей (по умолчанию 1)
+        `,
+      },
+    },
+  },
   argTypes: {
-    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
+    modelValue: {
+      control: { type: 'number' },
+      description: 'Текущая страница (v-model)',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    totalPages: {
+      control: { type: 'number' },
+      description: 'Всего страниц',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    siblingCount: {
+      control: { type: 'number' },
+      description: 'Сколько страниц показывать вокруг текущей',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Размер кнопок',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
   },
 };
 

package/src/components/molecules/DXPagination/DXPagination.vue

@@ -1,47 +1,51 @@
 <template>
-  <nav class="flex items-center gap-1" aria-label="Pagination" data-component="DXPagination">
+  <DXNav type="pagination" class="flex items-center gap-1" data-component="DXPagination">
     <!-- Previous -->
-    <button
-      type="button"
+    <DXButton
+      variant="ghost"
+      :size="size"
+      icon-only
       :disabled="modelValue <= 1"
-      :class="[navButtonClasses, modelValue <= 1 && 'opacity-50 cursor-not-allowed']"
       @click="goTo(modelValue - 1)"
       aria-label="Предыдущая"
     >
       <DXIcon :icon="ChevronLeftIcon" size="sm" animation="none" />
-    </button>
+    </DXButton>
 
     <!-- Pages -->
     <template v-for="page in visiblePages" :key="page">
       <span v-if="page === '...'" class="px-2 text-slate-400">...</span>
-      <button
+      <DXButton
         v-else
-        type="button"
-        :class="[pageButtonClasses, page === modelValue && activeClasses]"
+        :variant="page === modelValue ? 'primary' : 'ghost'"
+        :size="size"
         :aria-current="page === modelValue ? 'page' : undefined"
         @click="goTo(page)"
       >
         {{ page }}
-      </button>
+      </DXButton>
     </template>
 
     <!-- Next -->
-    <button
-      type="button"
+    <DXButton
+      variant="ghost"
+      :size="size"
+      icon-only
       :disabled="modelValue >= totalPages"
-      :class="[navButtonClasses, modelValue >= totalPages && 'opacity-50 cursor-not-allowed']"
       @click="goTo(modelValue + 1)"
       aria-label="Следующая"
     >
       <DXIcon :icon="ChevronRightIcon" size="sm" animation="none" />
-    </button>
-  </nav>
+    </DXButton>
+  </DXNav>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXNav from "../../atoms/DXNav/DXNav.vue";
 
 const props = defineProps({
   /** Текущая страница (v-model) */
@@ -100,24 +104,5 @@ const visiblePages = computed(() => {
   
   return pages;
 });
-
-const sizeClasses = {
-  sm: "h-7 min-w-7 text-xs",
-  md: "h-9 min-w-9 text-sm",
-  lg: "h-11 min-w-11 text-base",
-};
-
-const navButtonClasses = computed(() => [
-  "inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-colors",
-  sizeClasses[props.size] || sizeClasses.md,
-]);
-
-const pageButtonClasses = computed(() => [
-  "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
-  sizeClasses[props.size] || sizeClasses.md,
-  "text-slate-600 hover:bg-slate-100",
-]);
-
-const activeClasses = "bg-slate-900 text-white hover:bg-slate-800";
 </script>
 

package/src/components/molecules/DXPasswordInput/DXPasswordInput.stories.js

@@ -4,7 +4,73 @@ import { ref } from 'vue';
 export default {
   title: 'Molecules/DXPasswordInput',
   component: DXPasswordInput,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXPasswordInput
+
+Компонент поля ввода пароля с кнопкой показа/скрытия пароля.
+
+## Назначение
+
+DXPasswordInput предоставляет специализированное поле ввода для паролей с автоматическим
+скрытием введенного текста и возможностью показать пароль при необходимости. Компонент
+интегрируется с DXFormLabel для поддержки лейблов, ошибок и вспомогательного текста.
+
+## Архитектура
+
+### Использует
+- \`DXFormLabel\` - для отображения лейбла, ошибок и вспомогательного текста
+- \`DXIcon\` - для иконок показа/скрытия пароля (EyeIcon, EyeSlashIcon)
+- \`useClassComposition\` composable - для объединения CSS классов
+
+### Используется в
+- Формы регистрации и входа
+- Смена пароля
+- Настройки безопасности
+- Любые места, требующие ввода пароля
+
+## Внутренняя логика
+
+### Переключение видимости
+- По умолчанию пароль скрыт (\`type="password"\`)
+- При клике на иконку пароль показывается (\`type="text"\`)
+- Иконка автоматически меняется: EyeIcon ↔ EyeSlashIcon
+
+### Валидация
+- При наличии \`error\` prop, поле получает красную рамку (\`border-rose-300\`)
+- Текст ошибки отображается через \`DXFormLabel\`
+
+### Размеры
+Использует фиксированный размер, соответствующий стандартным полям ввода:
+- Высота: \`h-10\` (40px)
+- Padding: \`px-4 py-2.5\`
+- Размер текста: \`text-sm\`
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String значений.
+
+### Состояния
+- **disabled** - отключает поле и кнопку показа/скрытия
+- **error** - визуально выделяет ошибку (красная рамка)
+- **required** - отмечает поле как обязательное
+
+### Лейбл и вспомогательный текст
+- \`label\` - отображается над полем
+- \`helper\` - вспомогательный текст под полем
+- \`error\` - текст ошибки (заменяет helper при наличии)
+
+### Доступность
+- Кнопка показа/скрытия имеет \`aria-label\` для описания действия
+- Поддержка клавиатурной навигации
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {