dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,316 @@
+import { ref } from 'vue';
+import DXSidebar from './DXSidebar.vue';
+import DXSidebarMenu from '../DXSidebarMenu/DXSidebarMenu.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Organisms/DXSidebar',
+  component: DXSidebar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSidebar
+
+Обертка для боковой панели с поддержкой различных режимов отображения и анимаций.
+
+## Назначение
+
+DXSidebar предоставляет гибкую обертку для боковой панели навигации с поддержкой
+различных режимов отображения, коллапсирования и адаптивного поведения.
+
+## Архитектура
+
+### Использует
+- \`DXBackdrop\` - для overlay режима
+- \`DXSidebarMenu\` - для меню (через slot)
+- \`useClassComposition\` composable - для стилей
+- \`useAnimation\` composable - для transitions
+
+### Используется в
+- \`DXAppLayout\` - для боковой навигации
+- Самостоятельные боковые панели
+- Панели фильтров
+
+## Внутренняя логика
+
+### Режимы отображения
+- **overlay**: Сайдбар накладывается поверх контента с backdrop
+- **push**: Сайдбар сдвигает контент вправо
+- **static**: Сайдбар в обычном потоке документа
+
+### Коллапсирование
+При \`collapsed={true}\` сайдбар уменьшается до минимальной ширины,
+показывая только иконки (если используется DXSidebarMenu).
+
+### Адаптивность
+На мобильных устройствах сайдбар скрывается (кроме overlay режима).
+
+## Особенности
+
+### Slots
+- \`header\` - заголовок сайдбара
+- \`content\` - основной контент (обычно DXSidebarMenu)
+- \`footer\` - нижняя секция
+
+### Анимации
+Переходы между состояниями анимируются через CSS transitions.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Открыт ли сайдбар.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    mode: {
+      control: 'select',
+      options: ['overlay', 'push', 'static'],
+      description: 'Режим отображения: overlay (поверх контента) | push (сдвигает контент) | static (в потоке).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'static' },
+        category: 'Layout',
+      },
+    },
+    width: {
+      control: 'number',
+      min: 200,
+      max: 400,
+      step: 10,
+      description: 'Ширина сайдбара в пикселях (когда развернут).',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '256' },
+        category: 'Layout',
+      },
+    },
+    collapsedWidth: {
+      control: 'number',
+      min: 50,
+      max: 100,
+      step: 5,
+      description: 'Ширина сайдбара в пикселях (когда свернут).',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '64' },
+        category: 'Layout',
+      },
+    },
+    collapsed: {
+      control: 'boolean',
+      description: 'Свернут ли сайдбар.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const menuSections = [
+  {
+    title: 'Основное',
+    items: [
+      { id: 1, label: 'Главная', href: '/', icon: 'HomeIcon' },
+      { id: 2, label: 'Проекты', href: '/projects', icon: 'FolderIcon' },
+      { id: 3, label: 'Задачи', href: '/tasks', icon: 'CheckIcon' },
+    ],
+  },
+  {
+    title: 'Настройки',
+    items: [
+      { id: 4, label: 'Профиль', href: '/profile', icon: 'UserIcon' },
+      { id: 5, label: 'Настройки', href: '/settings', icon: 'CogIcon' },
+    ],
+  },
+];
+
+export const Default = {
+  args: {
+    mode: 'static',
+    open: true,
+    collapsed: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый сайдбар в static режиме с меню.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXSidebar, DXSidebarMenu },
+    setup() {
+      return { args, menuSections };
+    },
+    template: `
+      <DXSidebar v-bind="args">
+        <template #header>
+          <h2 class="text-lg font-semibold text-slate-900">Меню</h2>
+        </template>
+        <template #content>
+          <DXSidebarMenu :sections="menuSections" />
+        </template>
+      </DXSidebar>
+    `,
+  }),
+};
+
+export const OverlayMode = {
+  args: {
+    mode: 'overlay',
+    open: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Сайдбар в overlay режиме. Накладывается поверх контента с backdrop.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXSidebar, DXSidebarMenu, DXButton },
+    setup() {
+      const open = ref(args.open);
+      return { open, args, menuSections };
+    },
+    template: `
+      <div>
+        <DXButton @click="open = !open">
+          {{ open ? 'Закрыть' : 'Открыть' }} сайдбар
+        </DXButton>
+        <DXSidebar v-model:open="open" v-bind="args">
+          <template #header>
+            <h2 class="text-lg font-semibold text-slate-900">Меню</h2>
+          </template>
+          <template #content>
+            <DXSidebarMenu :sections="menuSections" />
+          </template>
+        </DXSidebar>
+      </div>
+    `,
+  }),
+};
+
+export const Collapsible = {
+  args: {
+    mode: 'static',
+    open: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Коллапсируемый сайдбар. Используйте контролы для переключения состояния.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXSidebar, DXSidebarMenu, DXButton, DXIcon },
+    setup() {
+      const collapsed = ref(false);
+      return { collapsed, args, menuSections, ChevronLeftIcon, ChevronRightIcon };
+    },
+    template: `
+      <DXSidebar v-bind="args" :collapsed="collapsed">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h2 v-if="!collapsed" class="text-lg font-semibold text-slate-900">Меню</h2>
+            <DXButton
+              variant="ghost"
+              size="sm"
+              @click="collapsed = !collapsed"
+            >
+              <template #icon>
+                <DXIcon :icon="collapsed ? ChevronRightIcon : ChevronLeftIcon" size="sm" />
+              </template>
+            </DXButton>
+          </div>
+        </template>
+        <template #content>
+          <DXSidebarMenu :sections="menuSections" :compact="collapsed" />
+        </template>
+      </DXSidebar>
+    `,
+  }),
+};
+
+export const WithFooter = {
+  args: {
+    mode: 'static',
+    open: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Сайдбар с footer секцией.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXSidebar, DXSidebarMenu },
+    setup() {
+      return { args, menuSections };
+    },
+    template: `
+      <DXSidebar v-bind="args">
+        <template #header>
+          <h2 class="text-lg font-semibold text-slate-900">Меню</h2>
+        </template>
+        <template #content>
+          <DXSidebarMenu :sections="menuSections" />
+        </template>
+        <template #footer>
+          <p class="text-xs text-slate-500">© 2024 My App</p>
+        </template>
+      </DXSidebar>
+    `,
+  }),
+};
+
+export const PushMode = {
+  args: {
+    mode: 'push',
+    open: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Сайдбар в push режиме. Сдвигает контент вправо при открытии.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXSidebar, DXSidebarMenu },
+    setup() {
+      return { args, menuSections };
+    },
+    template: `
+      <div class="flex">
+        <DXSidebar v-bind="args">
+          <template #header>
+            <h2 class="text-lg font-semibold text-slate-900">Меню</h2>
+          </template>
+          <template #content>
+            <DXSidebarMenu :sections="menuSections" />
+          </template>
+        </DXSidebar>
+        <div class="flex-1 p-8 bg-slate-50">
+          <h1 class="text-2xl font-bold mb-4">Контент</h1>
+          <p class="text-slate-600">Этот контент сдвигается вправо при открытии сайдбара.</p>
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/organisms/DXSidebar/DXSidebar.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    :class="sidebarClasses"
+    :style="sidebarStyles"
+    data-component="DXSidebar"
+    :data-mode="mode"
+    :data-open="open"
+    :data-collapsed="collapsed"
+  >
+    <!-- Header -->
+    <div v-if="$slots.header" :class="headerClasses">
+      <slot name="header" />
+    </div>
+
+    <!-- Content -->
+    <div v-if="$slots.content" :class="contentClasses">
+      <slot name="content" />
+    </div>
+
+    <!-- Footer -->
+    <div v-if="$slots.footer" :class="footerClasses">
+      <slot name="footer" />
+    </div>
+
+    <!-- Backdrop для overlay режима -->
+    <DXBackdrop
+      v-if="showBackdrop"
+      :show="showBackdrop"
+      :blur="backdropBlur"
+      :dismissible="true"
+      @close="closeSidebar"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, watch } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXBackdrop from "../../atoms/DXBackdrop/DXBackdrop.vue";
+
+const props = defineProps({
+  /**
+   * Открыт ли сайдбар
+   * @default true
+   */
+  open: { type: Boolean, default: true },
+  /**
+   * Режим отображения: overlay | push | static
+   * @default 'static'
+   */
+  mode: {
+    type: String,
+    default: "static",
+    validator: (v) => ["overlay", "push", "static"].includes(v),
+  },
+  /**
+   * Ширина сайдбара в пикселях
+   * @default 256
+   */
+  width: { type: Number, default: 256 },
+  /**
+   * Ширина свернутого сайдбара в пикселях
+   * @default 64
+   */
+  collapsedWidth: { type: Number, default: 64 },
+  /**
+   * Свернут ли сайдбар
+   * @default false
+   */
+  collapsed: { type: Boolean, default: false },
+  /**
+   * Показывать сайдбар на мобильных
+   * @default false
+   */
+  showOnMobile: { type: Boolean, default: false },
+  /**
+   * Размытие backdrop для overlay режима: none | sm | md | lg | xl
+   * @default 'sm'
+   */
+  backdropBlur: {
+    type: String,
+    default: "sm",
+    validator: (v) => ["none", "sm", "md", "lg", "xl"].includes(v),
+  },
+});
+
+const emit = defineEmits(["update:open", "toggle", "collapse"]);
+
+/**
+ * Показывать ли backdrop
+ * 
+ * @description
+ * Backdrop показывается только в overlay режиме и когда сайдбар открыт.
+ * 
+ * @returns {boolean} true если нужно показать backdrop
+ */
+const showBackdrop = computed(() => {
+  return props.mode === "overlay" && props.open;
+});
+
+/**
+ * Классы для сайдбара
+ * 
+ * @description
+ * Вычисляет классы для сайдбара в зависимости от режима и состояния.
+ * 
+ * @returns {Array} Массив классов
+ */
+const sidebarClasses = computed(() =>
+  useClassComposition(
+    "flex flex-col bg-white border-r border-slate-200 transition-all duration-300 z-20",
+    {
+      // Overlay режим: фиксированная позиция
+      "fixed inset-y-0 left-0": props.mode === "overlay",
+      // Push режим: обычный поток, но с transition
+      "relative": props.mode === "push",
+      // Static режим: обычный поток
+      "relative": props.mode === "static",
+      // Скрытие на мобильных (если не showOnMobile)
+      "hidden md:flex": !props.showOnMobile && props.mode !== "overlay",
+      // Показ на мобильных только в overlay режиме
+      "md:flex": props.showOnMobile || props.mode === "overlay",
+      // Скрытие если не открыт (для overlay)
+      "hidden": props.mode === "overlay" && !props.open,
+    }
+  )
+);
+
+/**
+ * Стили для сайдбара
+ * 
+ * @description
+ * Вычисляет ширину сайдбара в зависимости от состояния (свернут/развернут).
+ * 
+ * @returns {Object} Объект со стилями
+ */
+const sidebarStyles = computed(() => {
+  const width = props.collapsed ? props.collapsedWidth : props.width;
+
+  return {
+    width: `${width}px`,
+    minWidth: `${width}px`,
+    maxWidth: `${width}px`,
+  };
+});
+
+/**
+ * Классы для header
+ * 
+ * @description
+ * Вычисляет классы для header секции.
+ * 
+ * @returns {Array} Массив классов
+ */
+const headerClasses = computed(() =>
+  useClassComposition("flex-shrink-0 p-4 border-b border-slate-200")
+);
+
+/**
+ * Классы для content
+ * 
+ * @description
+ * Вычисляет классы для content секции.
+ * 
+ * @returns {Array} Массив классов
+ */
+const contentClasses = computed(() =>
+  useClassComposition("flex-1 overflow-y-auto")
+);
+
+/**
+ * Классы для footer
+ * 
+ * @description
+ * Вычисляет классы для footer секции.
+ * 
+ * @returns {Array} Массив классов
+ */
+const footerClasses = computed(() =>
+  useClassComposition("flex-shrink-0 p-4 border-t border-slate-200")
+);
+
+/**
+ * Закрытие сайдбара
+ * 
+ * @description
+ * Закрывает сайдбар (для overlay режима).
+ */
+function closeSidebar() {
+  if (props.mode === "overlay") {
+    emit("update:open", false);
+    emit("toggle", false);
+  }
+}
+
+// Отслеживание изменений open
+watch(
+  () => props.open,
+  (isOpen) => {
+    emit("toggle", isOpen);
+  }
+);
+
+// Отслеживание изменений collapsed
+watch(
+  () => props.collapsed,
+  (isCollapsed) => {
+    emit("collapse", isCollapsed);
+  }
+);
+</script>
+

package/src/components/organisms/DXSidebar/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXSidebar.vue';
+