dxd-style-code 0.1.11 → 0.1.13

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

@@ -5,6 +5,73 @@ export default {
   title: 'Molecules/DXTablePagination',
   component: DXTablePagination,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTablePagination
+
+Компонент пагинации для таблиц с информацией о результатах и выбором размера страницы.
+
+## Назначение
+
+DXTablePagination предоставляет комплексную пагинацию для таблиц данных, объединяя
+навигацию по страницам, информацию о количестве результатов и выбор размера страницы
+в единый компонент.
+
+## Архитектура
+
+### Использует
+- \`DXPagination\` - для навигации по страницам
+- \`DXSelect\` - для выбора размера страницы
+
+### Используется в
+- \`DXTable\` - пагинация таблицы
+- Таблицы данных с большим количеством записей
+- Административные панели
+
+## Внутренняя логика
+
+### Информация о результатах
+Отображается в формате "Показано X-Y из Z":
+- \`from\` - номер первого элемента на странице
+- \`to\` - номер последнего элемента на странице
+- \`total\` - общее количество элементов
+
+### Навигация по страницам
+Использует \`DXPagination\` для навигации:
+- \`currentPage\` - текущая страница (v-model)
+- \`totalPages\` - общее количество страниц
+
+### Выбор размера страницы
+Использует \`DXSelect\` для выбора:
+- \`pageSize\` - текущий размер страницы (v-model)
+- \`pageSizeOptions\` - опции размера (по умолчанию [10, 25, 50, 100])
+- Формат отображения: "N / стр"
+
+### Размеры
+Поддерживает 3 размера:
+- **sm** - маленький (text-xs)
+- **md** - средний (text-sm, по умолчанию)
+- **lg** - большой (text-base)
+
+## Особенности
+
+### v-model
+Поддерживает двустороннее связывание:
+- \`v-model:currentPage\` - для текущей страницы
+- \`v-model:pageSize\` - для размера страницы
+
+### События
+- \`@update:currentPage\` - изменение текущей страницы
+- \`@update:pageSize\` - изменение размера страницы
+
+### Адаптивность
+Размер текста автоматически адаптируется к размеру компонента для единообразия.
+        `,
+      },
+    },
+  },
 };
 
 // Default

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

@@ -6,6 +6,77 @@ export default {
   title: 'Molecules/DXTableToolbar',
   component: DXTableToolbar,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTableToolbar
+
+Компонент панели инструментов для таблиц с поддержкой поиска, переключения столбцов и кастомных действий.
+
+## Назначение
+
+DXTableToolbar предоставляет стандартизированную панель инструментов для таблиц данных.
+Компонент объединяет поиск, информацию о выбранных элементах, переключение видимости столбцов
+и слоты для кастомных действий.
+
+## Архитектура
+
+### Использует
+- \`DXInput\` - для поисковой строки
+- \`DXIcon\` - для иконок
+- \`DXCheckbox\` - для переключения видимости столбцов
+- \`DXDropdown\` - для меню переключения столбцов
+
+### Используется в
+- \`DXTable\` - панель инструментов таблицы
+- Таблицы данных с поиском и фильтрацией
+- Административные панели
+
+## Внутренняя логика
+
+### Поиск
+При \`searchable={true}\`:
+- Отображается поисковая строка с иконкой поиска
+- Поддерживает v-model для двустороннего связывания
+- Максимальная ширина: \`max-w-xs\`
+
+### Информация о выборе
+При \`selectedCount > 0\`:
+- Отображается текст "Выбрано: N"
+- Показывается слева от поиска
+
+### Переключение столбцов
+При \`columnToggle={true}\`:
+- Отображается dropdown с чекбоксами для каждого столбца
+- Каждый столбц имеет \`key\`, \`label\` и \`visible\` свойства
+- При переключении эмитится событие \`toggle-column\` с ключом столбца
+
+### Размеры
+Поддерживает 3 размера:
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+
+## Особенности
+
+### Слоты
+- **left** - кастомные элементы слева от поиска
+- **right** - кастомные элементы справа (перед переключателем столбцов)
+
+### События
+- \`@update:searchQuery\` - изменение поискового запроса
+- \`@toggle-column\` - переключение видимости столбца
+
+### Структура столбцов
+Столбцы передаются через массив объектов:
+\`\`\`
+[{ key: 'id', label: 'ID', visible: true }, ...]
+\`\`\`
+        `,
+      },
+    },
+  },
 };
 
 const sampleColumns = [

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

@@ -10,7 +10,93 @@ import {
 export default {
   title: 'Molecules/DXTextarea',
   component: DXTextarea,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTextarea
+
+Компонент многострочного текстового поля с поддержкой иконок, валидации, счетчика символов и интеграции с группами полей.
+
+## Назначение
+
+DXTextarea предоставляет стандартизированное многострочное текстовое поле для ввода длинных текстов.
+Компонент поддерживает иконки, валидацию, ограничение длины, счетчик символов и автоматическую адаптацию
+при использовании внутри DXInputGroup.
+
+## Архитектура
+
+### Использует
+- \`DXFormLabel\` - для отображения лейбла, ошибок, вспомогательного текста и счетчика символов
+- \`DXIconWrapper\` - для отображения иконок слева и справа
+- \`useClassComposition\` composable - для объединения CSS классов
+- \`provide/inject\` - для интеграции с DXInputGroup
+
+### Используется в
+- \`DXInputGroup\` - группы полей с аддонами
+- Формы с длинными текстовыми полями
+- Комментарии и описания
+- Любые места, требующие многострочного ввода
+
+## Внутренняя логика
+
+### Интеграция с DXInputGroup
+При использовании внутри \`DXInputGroup\`:
+- Поле автоматически регистрируется в группе через \`provide/inject\`
+- Размер синхронизируется с размером группы
+- Состояние \`disabled\` наследуется от группы
+- Состояние \`error\` синхронизируется с группой
+- Border-radius адаптируется в зависимости от наличия аддонов слева/справа
+
+### Иконки
+- **prefixIcon**: Иконка слева от textarea (Heroicon компонент)
+- **suffixIcon**: Иконка справа от textarea (Heroicon компонент)
+- Иконки выравниваются по верху (\`verticalAlign="top"\`) для многострочного поля
+
+### Счетчик символов
+- При \`maxLength > 0\` и \`showCount={true}\` отображается счетчик символов
+- Формат: "текущее / максимальное" (например, "150 / 500")
+- Отображается через \`DXFormLabel\`
+
+### Валидация
+- При наличии \`error\` prop, поле получает красную рамку
+- Текст ошибки отображается через \`DXFormLabel\`
+- Состояние ошибки синхронизируется с \`DXInputGroup\`
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String значений.
+
+### Количество строк
+- Настраивается через \`rows\` prop (по умолчанию 4)
+- Поле автоматически расширяется при вводе текста
+
+### Ограничение длины
+- При \`maxLength > 0\` ограничивает количество вводимых символов
+- Нативный атрибут \`maxlength\` применяется к textarea
+
+### Состояния
+- **disabled** - отключает поле
+- **error** - визуально выделяет ошибку (красная рамка)
+- **required** - отмечает поле как обязательное
+
+### Лейбл и вспомогательный текст
+- \`label\` - отображается над полем
+- \`helper\` - вспомогательный текст под полем
+- \`error\` - текст ошибки (заменяет helper при наличии)
+- \`showCount\` - показывать счетчик символов
+
+### Нативный textarea
+Компонент использует нативный HTML \`<textarea>\` элемент, что обеспечивает:
+- Нативную доступность
+- Работу с клавиатурой
+- Автоматическое изменение размера
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

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

@@ -4,7 +4,7 @@ import DXTimePicker from './DXTimePicker.vue';
 export default {
   title: 'Molecules/DXTimePicker',
   component: DXTimePicker,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
   parameters: {
     docs: {
       description: {

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

@@ -3,7 +3,65 @@ import DXValidationIcon from './DXValidationIcon.vue';
 export default {
   title: 'Molecules/DXValidationIcon',
   component: DXValidationIcon,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXValidationIcon
+
+Компонент иконки валидации для отображения состояния валидации полей форм.
+
+## Назначение
+
+DXValidationIcon предоставляет стандартизированный способ отображения состояния валидации
+через иконки. Компонент автоматически выбирает соответствующую иконку и цвет в зависимости
+от состояния валидации.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок
+- Heroicons solid иконки - для различных состояний
+
+### Используется в
+- \`DXFormControl\` - для индикации валидации
+- \`DXFormLabel\` - для иконок в сообщениях
+- Любые поля форм, требующие визуальной индикации валидации
+
+## Внутренняя логика
+
+### Состояния
+Поддерживает 4 состояния:
+- **success** - успешная валидация (CheckCircleIcon, зеленый цвет)
+- **error** - ошибка валидации (ExclamationCircleIcon, красный цвет)
+- **warning** - предупреждение (ExclamationTriangleIcon, желтый цвет)
+- **info** - информационное сообщение (InformationCircleIcon, синий цвет)
+
+### Размеры
+Поддерживает 3 размера:
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+
+### Цвета
+Каждое состояние имеет свой цвет:
+- success → \`text-emerald-500\`
+- error → \`text-rose-500\`
+- warning → \`text-amber-500\`
+- info → \`text-blue-500\`
+
+## Особенности
+
+### Анимация
+Иконка использует анимацию \`scale\` для визуального эффекта при появлении.
+
+### Иконки
+Все иконки из библиотеки Heroicons solid для единообразия и четкости отображения.
+        `,
+      },
+    },
+  },
   argTypes: {
     state: {
       control: 'select',

package/src/components/molecules/index.js

@@ -4,7 +4,6 @@ export { default as DXAlert } from './DXAlert';
 export { default as DXCloseButton } from './DXCloseButton';
 export { default as DXDropdownDivider } from './DXDropdownDivider';
 export { default as DXMenu } from './DXMenu';
-export { default as DXBaseTable } from './DXBaseTable';
 export { default as DXBreadcrumb } from './DXBreadcrumb';
 export { default as DXButtonGroup } from './DXButtonGroup';
 export { default as DXComboBox } from './DXComboBox';

package/src/components/organisms/DXAccordion/DXAccordion.stories.js

@@ -4,6 +4,81 @@ export default {
   title: 'Organisms/DXAccordion',
   component: DXAccordion,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXAccordion
+
+Компонент аккордеона для отображения раскрывающихся секций контента.
+
+## Назначение
+
+DXAccordion предоставляет способ организации контента в раскрывающиеся секции. Компонент
+поддерживает одиночный и множественный режимы открытия, различные варианты оформления
+и возможность задать изначально открытые секции.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок в заголовках и chevron
+- \`useTransition\` composable - для анимации раскрытия/сворачивания
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- FAQ секции
+- Настройки с категориями
+- Раскрывающиеся списки
+- Любые места, требующие организации контента в секции
+
+## Внутренняя логика
+
+### Структура элементов
+Элементы передаются через массив объектов:
+\`\`\`
+[{ title: 'Title', content: 'Content', icon?: Icon }]
+\`\`\`
+
+Каждый элемент может содержать:
+- \`title\` - заголовок секции (обязательно)
+- \`content\` - содержимое секции (опционально, можно использовать слот)
+- \`icon\` - иконка в заголовке (опционально)
+
+### Режимы открытия
+- **single** (по умолчанию): Только одна секция может быть открыта одновременно
+- **multiple**: Несколько секций могут быть открыты одновременно
+
+### Варианты оформления
+- **default** (по умолчанию): Без дополнительного оформления
+- **bordered**: Рамка вокруг всего аккордеона, скругление
+- **separated**: Отступы между секциями
+
+### Изначально открытые секции
+Можно указать индексы изначально открытых секций через \`defaultOpen\` prop (массив индексов).
+
+## Особенности
+
+### Слоты
+Для каждого элемента можно использовать именованный слот:
+- \`item-0\` - для первого элемента
+- \`item-1\` - для второго элемента
+- И так далее
+
+Это позволяет кастомизировать содержимое каждой секции.
+
+### Анимация
+Использует collapse transition для плавного раскрытия/сворачивания секций.
+
+### Chevron
+Каждая секция имеет иконку ChevronDownIcon справа, которая поворачивается при открытии.
+
+### Доступность
+- Использует \`aria-expanded\` для указания состояния секции
+- Поддержка клавиатурной навигации
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: { control: { type: 'select' }, options: ['default', 'bordered', 'separated'] },
   },

package/src/components/organisms/DXAppLayout/DXAppLayout.stories.js

@@ -10,12 +10,14 @@ import DXDropdown from '../DXDropdown/DXDropdown.vue';
 import DXInput from '../../molecules/DXInput/DXInput.vue';
 import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
 import DXTabs from '../DXTabs/DXTabs.vue';
+import DXHeading from '../../atoms/DXHeading/DXHeading.vue';
+import DXText from '../../atoms/DXText/DXText.vue';
 import { MagnifyingGlassIcon, BellIcon, Bars3Icon } from '@heroicons/vue/24/outline';
 
 export default {
   title: 'Organisms/DXAppLayout',
   component: DXAppLayout,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -265,8 +267,8 @@ export const Default = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Добро пожаловать</h1>
-            <p class="text-slate-600">Это основной контент страницы.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Добро пожаловать</DXHeading>
+            <DXText tag="p" color="muted">Это основной контент страницы.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -335,8 +337,8 @@ export const WithFullHeader = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Дашборд</h1>
-            <p class="text-slate-600">Основной контент страницы.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Дашборд</DXHeading>
+            <DXText tag="p" color="muted">Основной контент страницы.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -373,8 +375,8 @@ export const OverlayMode = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Overlay Mode</h1>
-            <p class="text-slate-600">Сайдбар накладывается поверх контента.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Overlay Mode</DXHeading>
+            <DXText tag="p" color="muted">Сайдбар накладывается поверх контента.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -409,8 +411,8 @@ export const PushMode = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Push Mode</h1>
-            <p class="text-slate-600">Сайдбар сдвигает контент вправо.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Push Mode</DXHeading>
+            <DXText tag="p" color="muted">Сайдбар сдвигает контент вправо.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -445,8 +447,8 @@ export const WithFooter = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Контент</h1>
-            <p class="text-slate-600">Основной контент страницы.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Контент</DXHeading>
+            <DXText tag="p" color="muted">Основной контент страницы.</DXText>
           </DXContainer>
         </template>
         <template #footer>
@@ -495,8 +497,8 @@ export const CollapsibleSidebar = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Коллапсируемый сайдбар</h1>
-            <p class="text-slate-600">Используйте кнопку в header для переключения состояния сайдбара.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Коллапсируемый сайдбар</DXHeading>
+            <DXText tag="p" color="muted">Используйте кнопку в header для переключения состояния сайдбара.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -573,8 +575,8 @@ export const Minimal = {
         </template>
         <template #content>
           <DXContainer>
-            <h1 class="text-2xl font-bold mb-4">Простое приложение</h1>
-            <p class="text-slate-600">Это минималистичный layout без sidebar и footer.</p>
+            <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Простое приложение</DXHeading>
+            <DXText tag="p" color="muted">Это минималистичный layout без sidebar и footer.</DXText>
           </DXContainer>
         </template>
       </DXAppLayout>
@@ -613,14 +615,14 @@ export const Split = {
         </template>
         <template #content-left>
           <div class="h-full bg-slate-50 p-4">
-            <h2 class="text-lg font-semibold mb-2">Левая панель</h2>
-            <p class="text-sm text-slate-600">Здесь может быть редактор кода или файловый менеджер.</p>
+            <DXHeading level="2" size="lg" weight="semibold" class="mb-2">Левая панель</DXHeading>
+            <DXText tag="p" size="sm" color="muted">Здесь может быть редактор кода или файловый менеджер.</DXText>
           </div>
         </template>
         <template #content-right>
           <div class="h-full bg-white p-4">
-            <h2 class="text-lg font-semibold mb-2">Правая панель</h2>
-            <p class="text-sm text-slate-600">Здесь может быть предпросмотр или результат.</p>
+            <DXHeading level="2" size="lg" weight="semibold" class="mb-2">Правая панель</DXHeading>
+            <DXText tag="p" size="sm" color="muted">Здесь может быть предпросмотр или результат.</DXText>
           </div>
         </template>
       </DXAppLayout>
@@ -669,16 +671,16 @@ export const Tabbed = {
         <template #content>
           <DXContainer>
             <div v-if="activeTab === 'dashboard'">
-              <h1 class="text-2xl font-bold mb-4">Дашборд</h1>
-              <p class="text-slate-600">Контент дашборда.</p>
+              <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Дашборд</DXHeading>
+              <DXText tag="p" color="muted">Контент дашборда.</DXText>
             </div>
             <div v-else-if="activeTab === 'analytics'">
-              <h1 class="text-2xl font-bold mb-4">Аналитика</h1>
-              <p class="text-slate-600">Контент аналитики.</p>
+              <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Аналитика</DXHeading>
+              <DXText tag="p" color="muted">Контент аналитики.</DXText>
             </div>
             <div v-else-if="activeTab === 'settings'">
-              <h1 class="text-2xl font-bold mb-4">Настройки</h1>
-              <p class="text-slate-600">Контент настроек.</p>
+              <DXHeading level="1" size="2xl" weight="bold" class="mb-4">Настройки</DXHeading>
+              <DXText tag="p" color="muted">Контент настроек.</DXText>
             </div>
           </DXContainer>
         </template>

package/src/components/organisms/DXAuthenticationForm/DXAuthenticationForm.stories.js

@@ -9,8 +9,6 @@ export default {
     docs: {
       description: {
         component: `
-# DXAuthenticationForm
-
 Готовая форма аутентификации (логин/регистрация) с валидацией и обработкой ошибок.
 
 ## Назначение

package/src/components/organisms/DXAuthenticationForm/DXAuthenticationForm.vue

@@ -7,9 +7,9 @@
     <!-- Header -->
     <div v-if="showHeader || $slots.header" :class="headerClasses">
       <slot name="header">
-        <h2 class="text-2xl font-bold text-slate-900 text-center">
+        <DXHeading level="2" size="2xl" weight="bold" color="default" align="center">
           {{ modeLabels[mode] }}
-        </h2>
+        </DXHeading>
       </slot>
     </div>
 
@@ -42,9 +42,7 @@
             />
           </DXFormControl>
           <div class="flex items-center justify-between">
-            <DXCheckbox v-model="loginForm.remember">
-              Запомнить меня
-            </DXCheckbox>
+            <DXCheckbox v-model="loginForm.remember" size="sm" label="Запомнить меня" />
             <DXLink
               variant="link"
               size="sm"
@@ -116,9 +114,7 @@
               @update:model-value="clearError('confirmPassword')"
             />
           </DXFormControl>
-          <DXCheckbox v-model="registerForm.agreeToTerms">
-            Я согласен с условиями использования
-          </DXCheckbox>
+          <DXCheckbox v-model="registerForm.agreeToTerms" size="sm" label="Я согласен с условиями использования" />
           <DXButton
             variant="primary"
             :loading="loading"
@@ -222,6 +218,7 @@ import DXFormControl from "../../molecules/DXFormControl/DXFormControl.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXCheckbox from "../../atoms/DXCheckbox/DXCheckbox.vue";
 import DXLink from "../../atoms/DXLink/DXLink.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 import DXAlert from "../../molecules/DXAlert/DXAlert.vue";
 
 const props = defineProps({