dxd-style-code 0.1.11 → 0.1.13

package/src/components/organisms/DXHeaderBar/DXHeaderBar.vue

@@ -4,99 +4,134 @@
     data-component="DXHeaderBar"
     :data-sticky="sticky"
     :data-fixed="fixed"
+    :data-variant="variant || 'default'"
+    :data-breakpoint="currentBreakpoint?.value || null"
+    :data-mobile="isMobile"
   >
-    <DXContainer :size="containerSize" :padding="containerPadding">
-      <div class="flex items-center justify-between gap-4 h-full">
+    <DXContainer :size="containerSize" :padding="containerPadding" position="relative">
+      <DXFlex justify="between" align="center" gap="md" height="full">
         <!-- Логотип и название -->
-        <div class="flex items-center gap-3 flex-shrink-0">
+        <DXFlex align="center" gap="sm" :shrink="true">
           <DXLink
             v-if="logo || appName"
             :to="logoLink"
             :href="logoHref"
             variant="ghost"
-            class="flex items-center gap-3 hover:opacity-80 transition-opacity"
           >
-            <img
-              v-if="logo"
-              :src="logo"
-              :alt="appName || 'Logo'"
-              class="h-8 w-auto object-contain"
-            />
-            <h1 v-if="appName" class="text-lg font-semibold text-slate-900">
-              {{ appName }}
-            </h1>
+            <DXFlex align="center" gap="sm">
+              <DXImage
+                v-if="logo"
+                :src="logo"
+                :alt="appName || 'Logo'"
+                height="32"
+                object-fit="contain"
+              />
+              <DXHeading v-if="appName" level="1" size="lg" weight="semibold">
+                {{ appName }}
+              </DXHeading>
+            </DXFlex>
           </DXLink>
           <slot name="logo" />
-        </div>
+        </DXFlex>
 
         <!-- Навигация (desktop) -->
-        <nav
+        <DXNav
           v-if="$slots.navigation"
+          type="main"
           class="hidden md:flex items-center gap-1 flex-1"
         >
           <slot name="navigation" />
-        </nav>
+        </DXNav>
 
         <!-- Поиск (desktop) -->
-        <div
+        <DXFlex
           v-if="$slots.search"
-          class="hidden md:flex items-center flex-1 max-w-md mx-4"
+          align="center"
+          class="hidden md:flex flex-1 max-w-md mx-4"
         >
           <slot name="search" />
-        </div>
+        </DXFlex>
 
         <!-- Действия (desktop) -->
-        <div
+        <DXFlex
           v-if="$slots.actions"
-          class="hidden md:flex items-center gap-2 flex-shrink-0"
+          align="center"
+          gap="sm"
+          :shrink="true"
+          class="hidden md:flex"
         >
           <slot name="actions" />
-        </div>
+        </DXFlex>
 
         <!-- Мобильное меню -->
-        <div class="flex md:hidden items-center gap-2">
+        <DXFlex align="center" gap="sm" class="md:hidden">
           <slot name="mobile-menu" />
-        </div>
+        </DXFlex>
+      </DXFlex>
+
+      <!-- Центральная часть - абсолютное позиционирование -->
+      <div
+        v-if="$slots.center"
+        class="hidden md:block absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      >
+        <slot name="center" />
       </div>
     </DXContainer>
 
     <!-- Мобильная навигация (drawer) -->
-    <Transition v-if="showMobileMenu && $slots['mobile-navigation']">
-      <div
-        class="md:hidden fixed inset-0 z-50 bg-white"
-        :class="mobileMenuClasses"
+    <DXAnimatePresence
+      v-if="$slots['mobile-navigation']"
+      :show="showMobileMenu"
+      type="slide-down"
+      mode="default"
+    >
+      <DXBox
+        position="fixed"
+        inset
+        z-index="50"
+        bg="white"
+        :class="['md:hidden', mobileMenuClasses]"
       >
-        <div class="p-4">
-          <div class="flex items-center justify-between mb-4">
-            <h2 v-if="appName" class="text-lg font-semibold text-slate-900">
-              {{ appName }}
-            </h2>
-            <DXButton
-              variant="ghost"
-              size="sm"
-              @click="closeMobileMenu"
-            >
-              <template #icon>
-                <DXIcon :icon="XMarkIcon" size="md" />
-              </template>
-            </DXButton>
-          </div>
-          <nav class="space-y-2">
+        <DXBox p="md">
+          <DXBox my="md">
+            <DXFlex justify="between" align="center">
+              <DXHeading v-if="appName" level="2" size="lg" weight="semibold">
+                {{ appName }}
+              </DXHeading>
+              <DXButton
+                variant="ghost"
+                size="sm"
+                @click="closeMobileMenu"
+              >
+                <template #icon>
+                  <DXIcon :icon="XMarkIcon" size="md" />
+                </template>
+              </DXButton>
+            </DXFlex>
+          </DXBox>
+          <DXStack tag="nav" gap="sm" direction="vertical">
             <slot name="mobile-navigation" />
-          </nav>
-        </div>
-      </div>
-    </Transition>
+          </DXStack>
+        </DXBox>
+      </DXBox>
+    </DXAnimatePresence>
   </header>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, inject } from "vue";
 import { useClassComposition } from "../../../composables/useClassComposition";
 import DXContainer from "../../atoms/DXContainer/DXContainer.vue";
+import DXFlex from "../../atoms/DXFlex/DXFlex.vue";
+import DXBox from "../../atoms/DXBox/DXBox.vue";
+import DXStack from "../../atoms/DXStack/DXStack.vue";
+import DXImage from "../../atoms/DXImage/DXImage.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 import DXLink from "../../atoms/DXLink/DXLink.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXNav from "../../atoms/DXNav/DXNav.vue";
+import DXAnimatePresence from "../../utilities/DXAnimatePresence/DXAnimatePresence.vue";
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({
@@ -118,24 +153,191 @@ const props = defineProps({
   containerPadding: { type: String, default: "md" },
   /** Высота header */
   height: { type: String, default: "auto", validator: (v) => ["auto", "sm", "md", "lg"].includes(v) },
+  /** Вариант стилизации: bordered | elevated | flat */
+  variant: {
+    type: String,
+    default: null,
+    validator: (value) => value === null || ['bordered', 'elevated', 'flat'].includes(value),
+  },
+  /** Фон: white | slate | transparent */
+  bg: {
+    type: String,
+    default: "white",
+    validator: (value) => ['white', 'slate', 'transparent'].includes(value),
+  },
+  /** Тень: none | sm | md | lg | xl */
+  shadow: {
+    type: String,
+    default: null,
+    validator: (value) => value === null || ['none', 'sm', 'md', 'lg', 'xl'].includes(value),
+  },
+  /** Рамка: none | bottom | full */
+  border: {
+    type: String,
+    default: "bottom",
+    validator: (value) => ['none', 'bottom', 'full'].includes(value),
+  },
 });
 
 const emit = defineEmits(["mobile-menu-toggle"]);
 
+// Получение данных о breakpoint через inject (если DXBreakpointProvider доступен)
+const currentBreakpoint = inject('currentBreakpoint', ref(null));
+const screenWidth = inject('screenWidth', ref(null));
+const screenHeight = inject('screenHeight', ref(null));
+const breakpoints = inject('breakpoints', ref(null));
+
+// Состояние мобильного меню
 const showMobileMenu = ref(false);
 
+/**
+ * Проверка, является ли текущий breakpoint мобильным
+ * 
+ * @description
+ * Определяет, находится ли приложение в мобильном режиме на основе breakpoint.
+ * 
+ * @returns {boolean} true если breakpoint меньше md (768px)
+ */
+const isMobile = computed(() => {
+  if (!currentBreakpoint?.value) {
+    // Fallback: проверка через screenWidth если breakpoint недоступен
+    if (screenWidth?.value !== null && screenWidth?.value !== undefined) {
+      return screenWidth.value < 768;
+    }
+    return false;
+  }
+  
+  // Считаем мобильным если breakpoint меньше md
+  const mobileBreakpoints = ['xs', 'sm'];
+  return mobileBreakpoints.includes(currentBreakpoint.value);
+});
+
+/**
+ * Проверка, является ли текущий breakpoint десктопным
+ * 
+ * @description
+ * Определяет, находится ли приложение в десктопном режиме.
+ * 
+ * @returns {boolean} true если breakpoint >= md (768px)
+ */
+const isDesktop = computed(() => !isMobile.value);
+
+/**
+ * Классы фона
+ * 
+ * @description
+ * Определяет классы для background-color в зависимости от значения bg prop.
+ * 
+ * @returns {string} Tailwind CSS класс для фона
+ */
+const bgClass = computed(() => {
+  const bgClasses = {
+    white: "bg-white",
+    slate: "bg-slate-50",
+    transparent: "bg-transparent",
+  };
+  
+  return bgClasses[props.bg] || "bg-white";
+});
+
+/**
+ * Классы тени
+ * 
+ * @description
+ * Определяет классы для box-shadow в зависимости от значения shadow prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для тени или null
+ */
+const shadowClass = computed(() => {
+  if (!props.shadow) return null;
+  
+  const shadowClasses = {
+    none: "shadow-none",
+    sm: "shadow-sm",
+    md: "shadow",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  };
+  
+  return shadowClasses[props.shadow] || null;
+});
+
+/**
+ * Классы рамки
+ * 
+ * @description
+ * Определяет классы для border в зависимости от значения border prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для рамки или null
+ */
+const borderClass = computed(() => {
+  if (props.border === "none") return null;
+  
+  const borderClasses = {
+    bottom: "border-b border-slate-200",
+    full: "border border-slate-200",
+  };
+  
+  return borderClasses[props.border] || "border-b border-slate-200";
+});
+
+/**
+ * Классы варианта стилизации
+ * 
+ * @description
+ * Определяет дополнительные классы в зависимости от варианта стилизации.
+ * 
+ * @returns {string|null} Дополнительные классы или null
+ */
+const variantClass = computed(() => {
+  if (!props.variant) return null;
+  
+  const variantClasses = {
+    bordered: "border-slate-300",
+    elevated: null, // Тень применяется через shadow prop
+    flat: "border-0",
+  };
+  
+  return variantClasses[props.variant] || null;
+});
+
+/**
+ * Финальная тень (с учетом variant)
+ * 
+ * @description
+ * Если variant="elevated" и shadow не указан, применяется shadow-sm по умолчанию.
+ * Иначе используется значение shadow prop.
+ * 
+ * @returns {string|null} Tailwind CSS класс для тени или null
+ */
+const finalShadowClass = computed(() => {
+  if (props.shadow) {
+    return shadowClass.value;
+  }
+  
+  if (props.variant === "elevated") {
+    return "shadow-sm";
+  }
+  
+  return null;
+});
+
 /**
  * Классы для header
  * 
  * @description
  * Вычисляет классы для header компонента, включая позиционирование (sticky/fixed),
- * высоту и фон.
+ * высоту, фон, тень, рамку и вариант стилизации.
  * 
  * @returns {Array} Массив классов для header
  */
 const headerClasses = computed(() =>
   useClassComposition(
-    "w-full bg-white border-b border-slate-200",
+    "w-full",
+    bgClass.value,
+    finalShadowClass.value,
+    borderClass.value,
+    variantClass.value,
     {
       "sticky top-0 z-40": props.sticky && !props.fixed,
       "fixed top-0 left-0 right-0 z-40": props.fixed,
@@ -180,11 +382,18 @@ function openMobileMenu() {
   emit("mobile-menu-toggle", true);
 }
 
-// Экспортируем методы для использования в родительском компоненте
+// Экспортируем методы и данные для использования в родительском компоненте
 defineExpose({
   openMobileMenu,
   closeMobileMenu,
   showMobileMenu,
+  // Breakpoint данные (если доступны через DXBreakpointProvider)
+  currentBreakpoint,
+  screenWidth,
+  screenHeight,
+  breakpoints,
+  isMobile,
+  isDesktop,
 });
 </script>
 

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

@@ -50,7 +50,7 @@ const defaultItems = [
 export default {
   title: 'Organisms/DXMediaGallery',
   component: DXMediaGallery,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXMediaGallery/DXMediaGallery.vue

@@ -128,12 +128,12 @@
           autoplay
         />
         <div v-if="selectedItem.title || selectedItem.description" class="mt-4">
-          <h3 v-if="selectedItem.title" class="text-lg font-semibold text-slate-900">
+          <DXHeading v-if="selectedItem.title" level="3" size="lg" weight="semibold" color="default">
             {{ selectedItem.title }}
-          </h3>
-          <p v-if="selectedItem.description" class="text-sm text-slate-600 mt-1">
+          </DXHeading>
+          <DXText v-if="selectedItem.description" tag="p" size="sm" color="muted" class="mt-1">
             {{ selectedItem.description }}
-          </p>
+          </DXText>
         </div>
       </div>
       
@@ -175,6 +175,8 @@ import DXModal from "../DXModal/DXModal.vue";
 import DXObserver from "../../utilities/DXObserver/DXObserver.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({

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

@@ -5,7 +5,99 @@ import DXButton from '../../atoms/DXButton/DXButton.vue';
 export default {
   title: 'Organisms/DXModal',
   component: DXModal,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:overlay'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXModal
+
+Универсальный компонент модального окна с поддержкой различных вариантов отображения и режимов.
+
+## Назначение
+
+DXModal предоставляет полнофункциональное модальное окно с поддержкой различных вариантов отображения
+(модальное окно, полноэкранный режим, боковая панель, половина экрана справа), настраиваемым backdrop,
+переключателем режимов и слотами для кастомизации контента.
+
+## Архитектура
+
+### Использует
+- \`DXBackdrop\` - фон модального окна с размытием и блокировкой скролла
+- \`DXCloseButton\` - кнопка закрытия
+- \`DXHeading\` - заголовок модального окна
+- \`Transition\` - анимации появления/исчезновения
+
+### Используется в
+- Формы редактирования
+- Диалоги подтверждения
+- Детальные просмотры
+- Настройки и конфигурация
+- Любые места, требующие фокусированного взаимодействия
+
+## Внутренняя логика
+
+### Варианты отображения
+- **modal** (по умолчанию): Классическое модальное окно по центру экрана с настраиваемой шириной
+- **fullscreen**: Полноэкранный режим, занимает весь экран
+- **sidebar-right**: Боковая панель справа, выезжает с правой стороны
+- **half-right**: Половина экрана справа, фиксированная позиция
+
+### Анимации
+- **modal/fullscreen**: Использует анимацию \`fade-scale\` (появление с масштабированием)
+- **sidebar-right/half-right**: Использует анимацию \`slide-right\` (выезд справа)
+
+### Управление состоянием
+- Управляется через \`open\` prop (Boolean)
+- События: \`close\`, \`opened\`, \`closed\`
+- Поддержка \`update:variant\` для динамического изменения режима
+
+### Backdrop
+- Настраиваемое размытие: \`none\`, \`sm\`, \`md\`, \`lg\`, \`xl\`
+- Настраиваемая прозрачность (0-100)
+- Настраиваемый цвет: \`slate-900\`, \`gray-900\`, \`black\`, \`white\`
+- Блокировка скролла body (по умолчанию включена)
+- Возможность закрытия по клику на backdrop (через \`closable\`)
+
+### Переключатель режимов
+При \`showModeSwitcher={true}\` отображается переключатель режимов в заголовке:
+- Иконки для каждого режима
+- Визуальное выделение текущего режима
+- Событие \`update:variant\` при смене режима
+
+## Особенности
+
+### Слоты
+- **default** - основной контент модального окна
+- **title** - заголовок (по умолчанию "Диалог")
+- **actions** - кнопки действий внизу модального окна
+
+### Ширина (для modal)
+Поддерживает 4 размера ширины:
+- **sm** - маленькая ширина
+- **md** - средняя ширина (по умолчанию)
+- **lg** - большая ширина
+- **xl** - очень большая ширина
+
+### Закрытие
+- Кнопка закрытия в заголовке (если \`closable={true}\`)
+- Закрытие по клику на backdrop (если \`closable={true}\`)
+- Событие \`close\` для программного закрытия
+
+### Структура контента
+Модальное окно имеет три секции:
+1. **Заголовок** - заголовок, переключатель режимов (опционально), кнопка закрытия
+2. **Контент** - основной контент с прокруткой
+3. **Действия** - кнопки действий (если используется слот \`actions\`)
+
+### Специальные варианты
+- **half-right**: Не использует backdrop, фиксированная позиция справа, z-index 20
+- **sidebar-right**: Backdrop с z-index 50, выезжает справа
+- **fullscreen**: Занимает весь экран, padding 8
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',

package/src/components/organisms/DXModal/DXModal.vue

@@ -18,9 +18,9 @@
       >
         <div :class="containerClass">
           <div class="flex items-center justify-between flex-shrink-0 mb-4 gap-4">
-            <h3 class="text-lg font-semibold tracking-tight text-slate-900 flex-1">
+            <DXHeading level="3" size="lg" weight="semibold" color="default" class="flex-1">
               <slot name="title">Диалог</slot>
-            </h3>
+            </DXHeading>
             
             <!-- View Mode Switcher -->
             <div v-if="showModeSwitcher" class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1">
@@ -68,6 +68,7 @@ import {
 } from "@heroicons/vue/24/outline";
 import DXBackdrop from "../../atoms/DXBackdrop/DXBackdrop.vue";
 import DXCloseButton from "../../molecules/DXCloseButton/DXCloseButton.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 
 const props = defineProps({
   /** Открыто/закрыто */

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

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

package/src/components/organisms/DXNotificationCenter/DXNotificationCenter.vue

@@ -29,7 +29,7 @@
       <div v-if="showHeader || $slots.header" :class="headerClasses">
         <slot name="header">
           <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-slate-900">Уведомления</h3>
+            <DXHeading level="3" size="lg" weight="semibold" color="default">Уведомления</DXHeading>
             <DXButton
               v-if="unreadCount > 0"
               size="sm"
@@ -144,6 +144,7 @@ import { useSpacing } from "../../../composables/useSpacing";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
 import DXBadge from "../../atoms/DXBadge/DXBadge.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 import DXDropdown from "../DXDropdown/DXDropdown.vue";
 import {
   BellIcon,

package/src/components/organisms/DXReportGenerator/DXReportGenerator.vue

@@ -6,7 +6,7 @@
     <!-- Header -->
     <div v-if="showHeader || $slots.header" :class="headerClasses">
       <slot name="header">
-        <h2 class="text-2xl font-bold text-slate-900">Генератор отчетов</h2>
+        <DXHeading level="2" size="2xl" weight="bold" color="default">Генератор отчетов</DXHeading>
       </slot>
     </div>
 
@@ -26,7 +26,7 @@
     <div v-if="$slots.settings || showSettings" :class="settingsClasses">
       <slot name="settings" :settings="reportSettings" :update-setting="updateSetting">
         <DXCard v-if="showSettings" class="p-4">
-          <h3 class="font-semibold mb-4">Настройки отчета</h3>
+          <DXHeading level="3" weight="semibold" class="mb-4">Настройки отчета</DXHeading>
           <div class="space-y-4">
             <DXFormControl label="Формат экспорта">
               <DXSelect
@@ -49,7 +49,7 @@
     <div v-if="$slots.preview || showPreview" :class="previewClasses">
       <slot name="preview" :data="previewData" :columns="columns">
         <DXCard v-if="showPreview" class="p-4">
-          <h3 class="font-semibold mb-4">Предпросмотр</h3>
+          <DXHeading level="3" weight="semibold" class="mb-4">Предпросмотр</DXHeading>
           <DXTable
             :columns="columns"
             :data="previewData"
@@ -91,6 +91,7 @@ import { useClassComposition } from "../../../composables/useClassComposition";
 import { useSpacing } from "../../../composables/useSpacing";
 import DXCard from "../../atoms/DXCard/DXCard.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 import DXTable from "../DXTable/DXTable.vue";
 import DXDataFilter from "../../molecules/DXDataFilter/DXDataFilter.vue";
 import DXSelect from "../../molecules/DXSelect/DXSelect.vue";