dxd-style-code 0.1.7 → 0.1.8

package/src/components/organisms/DXSidebarMenu/DXSidebarMenu.vue

@@ -0,0 +1,257 @@
+<template>
+  <aside 
+    :class="sidebarClasses"
+    data-component="DXSidebarMenu"
+    :data-compact="compact"
+  >
+    <!-- Заголовок -->
+    <div v-if="shouldShowHeader" :class="headerClasses">
+      <slot v-if="!compact" name="header">
+        <h2 v-if="title" :class="headerTitleClasses">{{ title }}</h2>
+      </slot>
+      
+      <!-- Кнопка переключения compact режима -->
+      <button
+        v-if="collapsible"
+        type="button"
+        class="p-2 rounded-lg hover:bg-slate-100 transition-colors"
+        :class="{ 'ml-auto': !compact }"
+        @click="toggleCompact"
+        :title="compact ? 'Развернуть' : 'Свернуть'"
+      >
+        <DXIcon 
+          :icon="compact ? ChevronRightIcon : ChevronLeftIcon" 
+          size="md"
+          animation="scale"
+          class="text-slate-600"
+        />
+      </button>
+    </div>
+
+    <!-- Поиск -->
+    <div v-if="searchable && !compact" class="px-4 pb-4">
+      <DXInput
+        v-model="searchQuery"
+        placeholder="Поиск..."
+        size="sm"
+      >
+        <template #prefix>
+          <DXIcon :icon="MagnifyingGlassIcon" size="sm" class="text-slate-400" />
+        </template>
+      </DXInput>
+    </div>
+
+    <!-- Меню -->
+    <nav :class="menuClasses">
+      <div 
+        v-for="(section, sectionIndex) in filteredSections" 
+        :key="sectionIndex"
+        class="space-y-1"
+      >
+        <!-- Заголовок секции -->
+        <div 
+          v-if="section.title && !compact" 
+          class="px-4 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider"
+        >
+          {{ section.title }}
+        </div>
+
+        <!-- Разделитель для compact режима -->
+        <DXDivider v-if="section.title && compact" spacing="sm" />
+
+        <!-- Пункты меню -->
+        <DXSidebarMenuItem
+          v-for="(item, itemIndex) in section.items"
+          :key="itemIndex"
+          :item="item"
+          :active="isItemActive(item)"
+          :compact="compact"
+          @click="handleItemClick"
+          @child-click="handleItemClick"
+        />
+      </div>
+    </nav>
+
+    <!-- Футер -->
+    <div v-if="$slots.footer && !compact" :class="footerClasses">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/vue/24/outline';
+import { useMenu } from '@/composables/useMenu';
+import DXSidebarMenuItem from './DXSidebarMenuItem.vue';
+import DXInput from '../../molecules/DXInput/DXInput.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import DXDivider from '../../atoms/DXDivider/DXDivider.vue';
+
+const $slots = useSlots();
+
+const props = defineProps({
+  /** Заголовок сайдбара */
+  title: {
+    type: String,
+    default: ''
+  },
+  /** Секции меню: [{ title?, items: [{ label, icon?, to?, href?, badge?, children? }] }] */
+  sections: {
+    type: Array,
+    required: true
+  },
+  /** Текущий активный элемент (path или id) */
+  activeItem: {
+    type: String,
+    default: ''
+  },
+  /** Компактный режим (только иконки) */
+  compact: {
+    type: Boolean,
+    default: false
+  },
+  /** Можно ли сворачивать */
+  collapsible: {
+    type: Boolean,
+    default: true
+  },
+  /** Показывать поиск */
+  searchable: {
+    type: Boolean,
+    default: false
+  },
+  /** Показывать header (если undefined - автоматически) */
+  showHeader: {
+    type: Boolean,
+    default: undefined
+  },
+  /** Размер header: sm, md, lg */
+  headerSize: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v)
+  },
+  /** Ширина: sm | md | lg | full */
+  width: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg', 'full'].includes(value)
+  },
+  /** Фиксированная позиция */
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  /** Показывать бордер справа */
+  bordered: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['item-click', 'update:compact']);
+
+const {
+  searchQuery,
+  internalCompact,
+  compact,
+  filteredSections,
+  isItemActive,
+  toggleCompact,
+  handleItemClick
+} = useMenu(props, emit);
+
+// Размеры header
+const HEADER_SIZE_CLASSES = {
+  sm: {
+    container: 'px-3 py-2',
+    title: 'text-base'
+  },
+  md: {
+    container: 'px-4 py-5',
+    title: 'text-lg'
+  },
+  lg: {
+    container: 'px-6 py-8',
+    title: 'text-xl'
+  }
+};
+
+// Автоматическое определение видимости header
+const shouldShowHeader = computed(() => {
+  // Если явно указано showHeader, используем его
+  if (props.showHeader !== undefined) {
+    return props.showHeader;
+  }
+  
+  // Иначе показываем если есть контент
+  return !!(
+    $slots.header || 
+    props.title || 
+    props.collapsible
+  );
+});
+
+const widthClasses = {
+  sm: 'w-64',
+  md: 'w-80',
+  lg: 'w-96',
+  full: 'w-full'
+};
+
+const sidebarClasses = computed(() => [
+  'flex flex-col bg-white transition-all duration-300',
+  internalCompact.value ? 'w-20' : widthClasses[props.width],
+  props.fixed && 'fixed top-0 left-0 h-screen',
+  props.bordered && 'border-r border-slate-200',
+  'shadow-sm'
+]);
+
+const headerClasses = computed(() => [
+  'flex items-center gap-2 border-b border-slate-200 flex-shrink-0',
+  internalCompact.value 
+    ? 'justify-center px-2 py-3' 
+    : HEADER_SIZE_CLASSES[props.headerSize].container
+]);
+
+const headerTitleClasses = computed(() => [
+  'font-bold text-slate-900',
+  HEADER_SIZE_CLASSES[props.headerSize].title
+]);
+
+const menuClasses = computed(() => [
+  'flex-1 overflow-y-auto py-4 px-3 space-y-6',
+  internalCompact.value && 'px-2'
+]);
+
+const footerClasses = computed(() => [
+  'px-4 py-4 border-t border-slate-200 flex-shrink-0',
+  internalCompact.value && 'px-2'
+]);
+</script>
+
+<style scoped>
+/* Стили для скроллбара */
+nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+nav::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+nav::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+</style>
+

package/src/components/organisms/DXSidebarMenu/DXSidebarMenuItem.vue

@@ -0,0 +1,249 @@
+<template>
+  <div data-component="DXSidebarMenuItem">
+    <!-- Horizontal режим с submenu: используем DXDropdown -->
+    <DXDropdown v-if="horizontal && item.children" position="bottom" width="auto">
+      <template #trigger>
+        <DXIcon 
+          v-if="item.icon" 
+          :icon="item.icon" 
+          size="md"
+          animation="scale"
+          :class="iconClasses"
+        />
+        <span class="text-sm font-medium">{{ item.label }}</span>
+        <DXBadge 
+          v-if="item.badge" 
+          :variant="item.badgeVariant || 'info'"
+          size="sm"
+          class="ml-2"
+        >
+          {{ item.badge }}
+        </DXBadge>
+      </template>
+      
+      <DXDropdownItem
+        v-for="(child, index) in item.children"
+        :key="index"
+        :icon="child.icon"
+        @click="handleChildClick(child)"
+      >
+        {{ child.label }}
+        <template v-if="child.badge" #badge>
+          <DXBadge 
+            :variant="child.badgeVariant || 'info'"
+            size="sm"
+          >
+            {{ child.badge }}
+          </DXBadge>
+        </template>
+      </DXDropdownItem>
+    </DXDropdown>
+    
+    <!-- Обычный пункт меню (без submenu или не horizontal) -->
+    <component
+      v-else-if="!item.children"
+      :is="getLinkComponent"
+      :to="item.to"
+      :href="item.href"
+      :class="itemClasses"
+      @click="handleClick"
+    >
+      <div :class="['flex items-center flex-1', horizontal ? 'gap-2' : 'gap-3']">
+        <!-- Иконка -->
+        <DXIcon 
+          v-if="item.icon" 
+          :icon="item.icon" 
+          size="md"
+          animation="scale"
+          :class="iconClasses"
+        />
+        
+        <!-- Текст -->
+        <span v-if="!compact" :class="['flex-1 font-medium text-left', horizontal ? 'text-sm' : 'text-sm']">
+          {{ item.label }}
+        </span>
+      </div>
+      
+      <!-- Счетчик/Badge -->
+      <DXBadge 
+        v-if="item.badge && !compact" 
+        :variant="item.badgeVariant || 'info'"
+        size="sm"
+      >
+        {{ item.badge }}
+      </DXBadge>
+    </component>
+
+    <!-- Пункт с подменю (только для vertical) -->
+    <div v-else>
+      <button
+        type="button"
+        :class="itemClasses"
+        @click="toggleSubmenu"
+      >
+        <div class="flex items-center gap-3 flex-1">
+          <DXIcon 
+            v-if="item.icon" 
+            :icon="item.icon" 
+            size="md"
+            animation="scale"
+            :class="iconClasses"
+          />
+          <span v-if="!compact" class="flex-1 text-sm font-medium text-left">
+            {{ item.label }}
+          </span>
+        </div>
+        
+        <DXIcon 
+          v-if="!compact"
+          :icon="ChevronDownIcon" 
+          size="sm"
+          animation="none"
+          class="text-slate-400 transition-transform duration-200"
+          :class="{ 'rotate-180': submenuOpen }"
+        />
+      </button>
+
+            <!-- Подменю -->
+            <Transition v-bind="collapseTransition">
+        <div v-show="submenuOpen && !compact" class="overflow-hidden">
+          <div class="pl-11 py-1 space-y-1">
+            <component
+              v-for="(child, index) in item.children"
+              :key="index"
+              :is="getChildLinkComponent(child)"
+              :to="child.to"
+              :href="child.href"
+              :class="getChildItemClasses(child)"
+              @click="handleChildClick(child)"
+            >
+              {{ child.label }}
+              <DXBadge 
+                v-if="child.badge" 
+                :variant="child.badgeVariant || 'info'"
+                size="sm"
+                class="ml-auto"
+              >
+                {{ child.badge }}
+              </DXBadge>
+            </component>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+import { useTransition } from "@/composables/useAnimation";
+import DXBadge from '../../atoms/DXBadge/DXBadge.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import DXDropdown from '../../organisms/DXDropdown/DXDropdown.vue';
+import DXDropdownItem from '../../atoms/DXDropdownItem/DXDropdownItem.vue';
+
+const collapseTransition = useTransition('collapse');
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  compact: {
+    type: Boolean,
+    default: false
+  },
+  horizontal: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['click', 'child-click']);
+
+const submenuOpen = ref(false);
+
+// Inject router check
+const hasRouter = inject('hasRouter', false);
+
+const toggleSubmenu = () => {
+  submenuOpen.value = !submenuOpen.value;
+};
+
+const getLinkComponent = computed(() => {
+  if (props.item.to && hasRouter) return 'router-link';
+  if (props.item.href) return 'a';
+  return 'button';
+});
+
+const getChildLinkComponent = (child) => {
+  if (child.to && hasRouter) return 'router-link';
+  if (child.href) return 'a';
+  return 'button';
+};
+
+const itemClasses = computed(() => {
+  const base = 'flex items-center transition-all duration-200 text-left';
+  
+  if (props.horizontal) {
+    // Горизонтальный: inline, меньше padding
+    return [
+      base,
+      'gap-2 px-3 py-2 rounded-lg whitespace-nowrap',
+      props.active 
+        ? 'bg-slate-900 text-white shadow-sm' 
+        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+      props.item.disabled && 'opacity-50 cursor-not-allowed'
+    ];
+  }
+  
+  // Вертикальный: текущие классы
+  return [
+    base,
+    'w-full gap-3 px-4 py-2.5 rounded-xl',
+    props.active
+      ? 'bg-slate-900 text-white shadow-lg shadow-slate-900/20'
+      : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+    props.item.disabled && 'opacity-50 cursor-not-allowed',
+    props.compact && 'justify-center px-2'
+  ];
+});
+
+const iconClasses = computed(() => [
+  'flex-shrink-0',
+  props.active ? 'text-white' : 'text-slate-400'
+]);
+
+const getChildItemClasses = (child) => [
+  'w-full flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-left',
+  child.active
+    ? 'bg-slate-100 text-slate-900 font-medium'
+    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
+];
+
+const handleClick = (event) => {
+  if (props.item.disabled) {
+    event.preventDefault();
+    return;
+  }
+  emit('click', props.item, event);
+};
+
+const handleChildClick = (child) => {
+  if (child.disabled) return;
+  emit('child-click', child);
+};
+</script>
+
+<style scoped>
+button[type="button"]:not(:disabled),
+a {
+  cursor: pointer;
+}
+</style>
+