dxd-style-code 0.1.7 → 0.1.8

package/src/components/organisms/DXDropdown/DXDropdown.vue

@@ -0,0 +1,238 @@
+<template>
+  <div 
+    class="relative inline-block align-top" 
+    ref="root" 
+    data-component="DXDropdown"
+    :data-position="position"
+    :data-width="width"
+    :data-variant="variant"
+    :data-disabled="disabled"
+  >
+    <!-- Hybrid approach: styled button with slot content + chevron -->
+    <button
+      type="button"
+      :class="triggerClasses"
+      :disabled="disabled"
+      @click="toggle"
+      @keydown.down.prevent="handleKeyDown"
+      @keydown.up.prevent="handleKeyUp"
+      @keydown.escape="close"
+      aria-haspopup="true"
+      :aria-expanded="open"
+    >
+      <!-- Slot для содержимого -->
+      <slot name="trigger">Меню</slot>
+      
+      <!-- Chevron справа (если showChevron === true) -->
+      <DXIcon 
+        v-if="showChevron"
+        :icon="ChevronDownIcon" 
+        size="sm" 
+        animation="none"
+        class="text-slate-400 transition-transform duration-200 flex-shrink-0"
+        :class="{ 'rotate-180': open }"
+      />
+    </button>
+    
+    <Transition name="dropdown-fade">
+      <div
+        v-if="open"
+        :class="menuClasses"
+        :style="menuStyles"
+        @keydown.down.prevent="focusNext"
+        @keydown.up.prevent="focusPrevious"
+        @keydown.escape="close"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, provide, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ChevronDownIcon } from "@heroicons/vue/24/outline";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Позиционирование: left | right | center */
+  position: {
+    type: String,
+    default: 'right',
+    validator: (value) => ['left', 'right', 'center'].includes(value)
+  },
+  /** Ширина меню: sm | md | lg | xl | auto */
+  width: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg', 'xl', 'auto'].includes(value)
+  },
+  /** Вариант оформления: default | minimal */
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'minimal'].includes(value)
+  },
+  /** Отступ от trigger (px) */
+  offset: {
+    type: Number,
+    default: 8
+  },
+  /** Отключить dropdown */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** Показать стрелочку (chevron) */
+  showChevron: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const open = ref(false);
+const root = ref(null);
+const currentFocusIndex = ref(-1);
+
+const toggle = () => {
+  if (props.disabled) return;
+  open.value = !open.value;
+  
+  if (open.value) {
+    nextTick(() => {
+      focusFirst();
+    });
+  }
+};
+
+const close = () => {
+  open.value = false;
+  currentFocusIndex.value = -1;
+};
+
+const onClickOutside = (e) => {
+  if (root.value && !root.value.contains(e.target)) {
+    close();
+  }
+};
+
+// Provide context для DXDropdownItem
+const dropdownContext = {
+  close,
+  isOpen: computed(() => open.value)
+};
+
+provide('dropdown', dropdownContext);
+
+// Keyboard navigation
+const getFocusableItems = () => {
+  if (!root.value) return [];
+  const menu = root.value.querySelector('[data-component="DXDropdown"] > div:last-child');
+  if (!menu) return [];
+  return Array.from(menu.querySelectorAll('button[data-component="DXDropdownItem"]:not([disabled])'));
+};
+
+const focusFirst = () => {
+  const items = getFocusableItems();
+  if (items.length > 0) {
+    items[0].focus();
+    currentFocusIndex.value = 0;
+  }
+};
+
+const focusNext = () => {
+  const items = getFocusableItems();
+  if (items.length === 0) return;
+  
+  currentFocusIndex.value = (currentFocusIndex.value + 1) % items.length;
+  items[currentFocusIndex.value].focus();
+};
+
+const focusPrevious = () => {
+  const items = getFocusableItems();
+  if (items.length === 0) return;
+  
+  currentFocusIndex.value = currentFocusIndex.value <= 0 
+    ? items.length - 1 
+    : currentFocusIndex.value - 1;
+  items[currentFocusIndex.value].focus();
+};
+
+const handleKeyDown = () => {
+  if (!open.value) {
+    toggle();
+  } else {
+    focusNext();
+  }
+};
+
+const handleKeyUp = () => {
+  if (open.value) {
+    focusPrevious();
+  }
+};
+
+// Classes
+const triggerClasses = computed(() => [
+  "inline-flex items-center px-3 py-2 rounded-xl border border-slate-200 text-sm font-semibold text-slate-700 hover:border-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-900/10",
+  props.showChevron && "gap-2", // gap только если есть chevron
+  props.disabled && "opacity-60 cursor-not-allowed hover:border-slate-200",
+]);
+
+const POSITION_CLASSES = {
+  left: 'left-0',
+  right: 'right-0',
+  center: 'left-1/2 -translate-x-1/2',
+};
+
+const WIDTH_CLASSES = {
+  sm: 'w-48',
+  md: 'w-56',
+  lg: 'w-72',
+  xl: 'w-96',
+  auto: 'w-auto min-w-[12rem]',
+};
+
+const menuClasses = computed(() => [
+  "absolute z-20 bg-white border border-slate-200 rounded-2xl shadow-lg py-2",
+  POSITION_CLASSES[props.position],
+  WIDTH_CLASSES[props.width],
+  props.variant === 'minimal' && 'shadow-md border-slate-100',
+]);
+
+const menuStyles = computed(() => ({
+  marginTop: `${props.offset}px`,
+}));
+
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+</script>
+
+<style scoped>
+/* Dropdown fade animation */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.dropdown-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.dropdown-fade-enter-to,
+.dropdown-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+import DXEmptyState from './DXEmptyState.vue';
+
+export default {
+  title: 'Organisms/DXEmptyState',
+  component: DXEmptyState,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    title: 'No items found',
+    description: 'Get started by creating your first item.',
+  },
+};
+
+export const NoResults = {
+  args: {
+    title: 'No results',
+    description: 'Try adjusting your search or filter to find what you\'re looking for.',
+  },
+};
+
+export const WithAction = {
+  render: () => ({
+    components: { DXEmptyState },
+    template: `
+      <DXEmptyState title="No projects yet" description="Create your first project to get started.">
+        <template #action>
+          <button class="px-4 py-2 bg-slate-900 text-white rounded-xl text-sm font-semibold">
+            Create Project
+          </button>
+        </template>
+      </DXEmptyState>
+    `,
+  }),
+};
+

package/src/components/organisms/DXEmptyState/DXEmptyState.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="bg-white border border-slate-100 rounded-3xl shadow-sm p-8 text-center space-y-3"
+    data-component="DXEmptyState"
+  >
+    <component
+      :is="icon"
+      class="w-10 h-10 text-slate-500 mx-auto"
+      :class="animated && 'animate-bounce-slow'"
+    />
+    <p class="text-base font-semibold text-slate-900">{{ title }}</p>
+    <p v-if="description" class="text-sm text-slate-600">{{ description }}</p>
+    <slot name="action" />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  /** Иконка (компонент) */
+  icon: { type: [Object, Function], required: true },
+  /** Заголовок */
+  title: { type: String, required: true },
+  /** Описание */
+  description: { type: String, default: "" },
+  /** Анимация иконки */
+  animated: { type: Boolean, default: false },
+});
+</script>
+
+<style scoped>
+@keyframes bounce-slow {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  25% { transform: translate(-2px, -1px) rotate(-3deg); }
+  50% { transform: translate(2px, 1px) rotate(3deg); }
+  75% { transform: translate(-1px, 1.5px) rotate(-2deg); }
+}
+.animate-bounce-slow {
+  animation: bounce-slow 3.2s infinite ease-in-out;
+}
+</style>
+

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

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

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

@@ -0,0 +1,378 @@
+import { ref } from 'vue';
+import DXFormWizard from './DXFormWizard.vue';
+import DXFormControl from '../../molecules/DXFormControl/DXFormControl.vue';
+import DXInput from '../../molecules/DXInput/DXInput.vue';
+import DXSelect from '../../molecules/DXSelect/DXSelect.vue';
+import DXTextarea from '../../molecules/DXTextarea/DXTextarea.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+
+const defaultSteps = [
+  { id: 1, title: 'Личная информация', description: 'Основные данные' },
+  { id: 2, title: 'Работа', description: 'Профессиональная информация' },
+  { id: 3, title: 'Дополнительно', description: 'Дополнительные сведения' },
+];
+
+export default {
+  title: 'Organisms/DXFormWizard',
+  component: DXFormWizard,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXFormWizard
+
+Многошаговая форма с индикатором прогресса и валидацией на каждом шаге.
+
+## Назначение
+
+DXFormWizard предоставляет структуру для создания многошаговых форм с навигацией,
+валидацией и индикатором прогресса. Используется для регистрации, настройки профиля,
+оформления заказов и других многоэтапных процессов.
+
+## Архитектура
+
+### Использует
+- \`DXProgress\` - для индикатора прогресса
+- \`DXButton\` - для навигации
+- \`DXFormControl\` - для полей формы
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- Регистрация пользователей
+- Настройка профиля
+- Оформление заказа
+- Мастер настройки приложения
+
+## Внутренняя логика
+
+### Навигация
+- **tabs**: Навигация в виде вкладок
+- **steps**: Навигация в виде шагов с соединительными линиями
+- **dots**: Навигация в виде точек (будущая реализация)
+- **none**: Без визуальной навигации
+
+### Валидация
+Можно указать функцию валидации для каждого шага через prop \`validation\`.
+Валидация проверяется перед переходом на следующий шаг.
+
+### Пропуск шагов
+При \`allowSkip={true}\` можно переходить на любые шаги.
+При \`allowSkip={false}\` можно переходить только на следующие шаги.
+
+## Особенности
+
+### Slots
+- \`step-{n}\` - контент для каждого шага (step-1, step-2, ...)
+- \`navigation\` - кастомная навигация
+
+### Анимации
+Переходы между шагами анимируются через Vue Transition.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    currentStep: {
+      control: 'number',
+      min: 0,
+      max: 2,
+      description: 'Текущий шаг (0-based, v-model).',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+        category: 'Behavior',
+      },
+    },
+    navigationStyle: {
+      control: 'select',
+      options: ['tabs', 'steps', 'dots', 'none'],
+      description: 'Стиль навигации: tabs | steps | dots | none.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'steps' },
+        category: 'Appearance',
+      },
+    },
+    showProgress: {
+      control: 'boolean',
+      description: 'Показывать индикатор прогресса.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Appearance',
+      },
+    },
+    allowSkip: {
+      control: 'boolean',
+      description: 'Разрешить пропуск шагов.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    currentStep: 0,
+    steps: defaultSteps,
+    navigationStyle: 'steps',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовая многошаговая форма с навигацией в стиле steps.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFormWizard, DXFormControl, DXInput, DXSelect, DXTextarea },
+    setup() {
+      const currentStep = ref(args.currentStep);
+      const formData = ref({
+        name: '',
+        email: '',
+        company: '',
+        position: '',
+        bio: '',
+      });
+      
+      const positions = ref([
+        { value: 'developer', label: 'Разработчик' },
+        { value: 'designer', label: 'Дизайнер' },
+        { value: 'manager', label: 'Менеджер' },
+      ]);
+      
+      return { args, currentStep, formData, positions };
+    },
+    template: `
+      <DXFormWizard
+        v-model:current-step="currentStep"
+        v-bind="args"
+        :form-data="formData"
+      >
+        <template #step-1>
+          <div class="space-y-4">
+            <DXFormControl label="Имя" required>
+              <DXInput v-model="formData.name" placeholder="Введите имя" />
+            </DXFormControl>
+            <DXFormControl label="Email" required>
+              <DXInput v-model="formData.email" type="email" placeholder="Введите email" />
+            </DXFormControl>
+          </div>
+        </template>
+        
+        <template #step-2>
+          <div class="space-y-4">
+            <DXFormControl label="Компания">
+              <DXInput v-model="formData.company" placeholder="Введите название компании" />
+            </DXFormControl>
+            <DXFormControl label="Должность">
+              <DXSelect v-model="formData.position" :options="positions" placeholder="Выберите должность" />
+            </DXFormControl>
+          </div>
+        </template>
+        
+        <template #step-3>
+          <div class="space-y-4">
+            <DXFormControl label="О себе">
+              <DXTextarea v-model="formData.bio" rows="5" placeholder="Расскажите о себе" />
+            </DXFormControl>
+          </div>
+        </template>
+      </DXFormWizard>
+    `,
+  }),
+};
+
+export const WithValidation = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Форма с валидацией на каждом шаге. Переход на следующий шаг возможен только при валидных данных.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXFormWizard, DXFormControl, DXInput },
+    setup() {
+      const currentStep = ref(0);
+      const formData = ref({
+        name: '',
+        email: '',
+      });
+      
+      const steps = ref(defaultSteps);
+      
+      const validation = (stepIndex, data) => {
+        if (stepIndex === 0) {
+          return data.name && data.email;
+        }
+        return true;
+      };
+      
+      const handleSubmit = (data) => {
+        console.log('Форма отправлена:', data);
+      };
+      
+      return { currentStep, formData, steps, validation, handleSubmit };
+    },
+    template: `
+      <DXFormWizard
+        v-model:current-step="currentStep"
+        :steps="steps"
+        :form-data="formData"
+        :validation="validation"
+        @submit="handleSubmit"
+      >
+        <template #step-1>
+          <div class="space-y-4">
+            <DXFormControl label="Имя" required>
+              <DXInput v-model="formData.name" placeholder="Введите имя" />
+            </DXFormControl>
+            <DXFormControl label="Email" required>
+              <DXInput v-model="formData.email" type="email" placeholder="Введите email" />
+            </DXFormControl>
+            <p class="text-sm text-slate-500">Заполните все поля для продолжения</p>
+          </div>
+        </template>
+        
+        <template #step-2>
+          <div class="space-y-4">
+            <p class="text-slate-600">Шаг 2: Работа</p>
+          </div>
+        </template>
+        
+        <template #step-3>
+          <div class="space-y-4">
+            <p class="text-slate-600">Шаг 3: Дополнительно</p>
+          </div>
+        </template>
+      </DXFormWizard>
+    `,
+  }),
+};
+
+export const TabsNavigation = {
+  args: {
+    currentStep: 0,
+    steps: defaultSteps,
+    navigationStyle: 'tabs',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Навигация в стиле tabs. Шаги отображаются как вкладки.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFormWizard, DXFormControl, DXInput },
+    setup() {
+      const currentStep = ref(args.currentStep);
+      const formData = ref({ name: '', email: '' });
+      return { args, currentStep, formData };
+    },
+    template: `
+      <DXFormWizard
+        v-model:current-step="currentStep"
+        v-bind="args"
+        :form-data="formData"
+      >
+        <template #step-1>
+          <DXFormControl label="Имя">
+            <DXInput v-model="formData.name" />
+          </DXFormControl>
+        </template>
+        <template #step-2>
+          <DXFormControl label="Email">
+            <DXInput v-model="formData.email" />
+          </DXFormControl>
+        </template>
+        <template #step-3>
+          <p>Шаг 3</p>
+        </template>
+      </DXFormWizard>
+    `,
+  }),
+};
+
+export const AllowSkip = {
+  args: {
+    currentStep: 0,
+    steps: defaultSteps,
+    allowSkip: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Форма с разрешенным пропуском шагов. Можно переходить на любые шаги.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXFormWizard },
+    setup() {
+      const currentStep = ref(args.currentStep);
+      return { args, currentStep };
+    },
+    template: `
+      <DXFormWizard
+        v-model:current-step="currentStep"
+        v-bind="args"
+      >
+        <template #step-1>
+          <p>Шаг 1</p>
+        </template>
+        <template #step-2>
+          <p>Шаг 2</p>
+        </template>
+        <template #step-3>
+          <p>Шаг 3</p>
+        </template>
+      </DXFormWizard>
+    `,
+  }),
+};
+
+export const CustomNavigation = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Форма с кастомной навигацией через slot navigation.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXFormWizard, DXButton },
+    setup() {
+      const currentStep = ref(0);
+      return { currentStep, defaultSteps };
+    },
+    template: `
+      <DXFormWizard
+        v-model:current-step="currentStep"
+        :steps="defaultSteps"
+      >
+        <template #step-1>
+          <p>Контент шага 1</p>
+        </template>
+        <template #step-2>
+          <p>Контент шага 2</p>
+        </template>
+        <template #navigation="{ canGoNext, canGoPrev, goNext, goPrev }">
+          <div class="flex justify-between">
+            <DXButton v-if="canGoPrev" @click="goPrev">Назад</DXButton>
+            <div v-else></div>
+            <DXButton v-if="canGoNext" variant="primary" @click="goNext">Далее</DXButton>
+            <DXButton v-else variant="primary">Завершить</DXButton>
+          </div>
+        </template>
+      </DXFormWizard>
+    `,
+  }),
+};
+