dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXInputGroup/DXInputGroup.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full" data-component="DXInputGroup">
+    <label v-if="label" class="block text-sm font-medium text-slate-700 mb-1">{{ label }}</label>
+    <div class="flex">
+      <slot />
+    </div>
+    <p v-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from "vue";
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  helper: { type: String, default: "" },
+  size: { type: String, default: "md" },
+  disabled: { type: Boolean, default: false },
+  error: { type: String, default: "" },
+});
+
+// Система регистрации компонентов для отслеживания структуры
+const components = ref([]);
+let componentCounter = 0;
+
+const registerComponent = (type, id) => {
+  if (!components.value.find(c => c.id === id)) {
+    // Используем счетчик для гарантии правильного порядка
+    const order = componentCounter++;
+    components.value.push({ type, id, order });
+    // Сортируем по порядку регистрации
+    components.value.sort((a, b) => a.order - b.order);
+  }
+};
+
+const unregisterComponent = (id) => {
+  components.value = components.value.filter(c => c.id !== id);
+};
+
+const getComponentPosition = (id) => {
+  const currentIndex = components.value.findIndex(c => c.id === id);
+  if (currentIndex === -1) {
+    return { hasLeftAddon: false, hasRightAddon: false };
+  }
+  
+  const leftComponents = components.value.slice(0, currentIndex);
+  const rightComponents = components.value.slice(currentIndex + 1);
+  
+  return {
+    hasLeftAddon: leftComponents.some(c => c.type === 'addon'),
+    hasRightAddon: rightComponents.some(c => c.type === 'addon'),
+  };
+};
+
+provide("inputGroup", {
+  size: props.size,
+  disabled: props.disabled,
+  error: props.error,
+  registerComponent,
+  unregisterComponent,
+  getComponentPosition,
+});
+</script>
+

package/src/components/molecules/DXInputGroup/index.js

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

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

@@ -0,0 +1,53 @@
+import DXInputMask from './DXInputMask.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXInputMask',
+  component: DXInputMask,
+  tags: ['autodocs'],
+};
+
+export const Phone = {
+  render: () => ({
+    components: { DXInputMask },
+    setup() {
+      const phone = ref('');
+      return { phone };
+    },
+    template: '<DXInputMask v-model="phone" mask="+7 (###) ###-##-##" label="Phone" placeholder="+7 (999) 123-45-67" />',
+  }),
+};
+
+export const CreditCard = {
+  render: () => ({
+    components: { DXInputMask },
+    setup() {
+      const card = ref('');
+      return { card };
+    },
+    template: '<DXInputMask v-model="card" mask="#### #### #### ####" label="Card Number" placeholder="0000 0000 0000 0000" />',
+  }),
+};
+
+export const Date = {
+  render: () => ({
+    components: { DXInputMask },
+    setup() {
+      const date = ref('');
+      return { date };
+    },
+    template: '<DXInputMask v-model="date" mask="##/##/####" label="Date" placeholder="DD/MM/YYYY" />',
+  }),
+};
+
+export const SSN = {
+  render: () => ({
+    components: { DXInputMask },
+    setup() {
+      const ssn = ref('');
+      return { ssn };
+    },
+    template: '<DXInputMask v-model="ssn" mask="###-##-####" label="SSN" placeholder="123-45-6789" />',
+  }),
+};
+

package/src/components/molecules/DXInputMask/DXInputMask.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="w-full" data-component="DXInputMask">
+    <label v-if="label" class="block text-sm text-slate-600 mb-1 font-medium">{{ label }}</label>
+    <input
+      ref="inputRef"
+      :type="type"
+      :placeholder="placeholder"
+      :value="displayValue"
+      :disabled="disabled"
+      class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 transition-colors hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed disabled:bg-slate-50"
+      @input="handleInput"
+      @keydown="handleKeydown"
+    />
+    <p v-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  /** Значение (v-model) - сырое значение без маски */
+  modelValue: { type: String, default: "" },
+  /** Маска: # = цифра, например "+7 (###) ###-##-##" */
+  mask: { type: String, required: true },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Тип input */
+  type: { type: String, default: "text" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const inputRef = ref(null);
+const displayValue = ref("");
+
+const applyMask = (value) => {
+  const digits = value.replace(/\D/g, "");
+  let masked = "";
+  let digitIndex = 0;
+  
+  for (let i = 0; i < props.mask.length && digitIndex < digits.length; i++) {
+    if (props.mask[i] === "#") {
+      masked += digits[digitIndex];
+      digitIndex++;
+    } else {
+      masked += props.mask[i];
+    }
+  }
+  
+  return masked;
+};
+
+const extractRawValue = (masked) => masked.replace(/\D/g, "");
+
+const handleInput = (event) => {
+  const rawValue = extractRawValue(event.target.value);
+  const masked = applyMask(rawValue);
+  
+  displayValue.value = masked;
+  emit("update:modelValue", rawValue);
+  
+  setTimeout(() => {
+    if (inputRef.value) {
+      const cursorPos = masked.length;
+      inputRef.value.setSelectionRange(cursorPos, cursorPos);
+    }
+  }, 0);
+};
+
+const handleKeydown = (event) => {
+  const allowedKeys = ["Backspace", "Delete", "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight"];
+  if (allowedKeys.includes(event.key)) return;
+  if (!/^\d$/.test(event.key)) event.preventDefault();
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== extractRawValue(displayValue.value)) {
+    displayValue.value = applyMask(newVal);
+  }
+}, { immediate: true });
+</script>
+

package/src/components/molecules/DXInputMask/index.js

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

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

@@ -0,0 +1,379 @@
+import { ref } from 'vue';
+import DXMenu from './DXMenu.vue';
+import {
+  HomeIcon,
+  ChartBarIcon,
+  UsersIcon,
+  DocumentTextIcon,
+  FolderIcon,
+  Cog6ToothIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXMenu',
+  component: DXMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    direction: {
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+      description: 'Направление меню: vertical, horizontal'
+    },
+    showHeader: {
+      control: { type: 'boolean' },
+      description: 'Показывать header (undefined = автоматически)'
+    },
+    headerSize: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    },
+    cardVariant: {
+      control: { type: 'select' },
+      options: ['default', 'bordered', 'elevated', 'flat']
+    },
+    cardPadding: {
+      control: { type: 'select' },
+      options: ['none', 'sm', 'md', 'lg']
+    },
+  },
+};
+
+// Общие данные меню для примеров
+const menuSections = [
+  {
+    items: [
+      { 
+        id: 'home',
+        label: 'Главная', 
+        icon: HomeIcon, 
+        to: '/home',
+      },
+      { 
+        id: 'analytics',
+        label: 'Аналитика', 
+        icon: ChartBarIcon, 
+        to: '/analytics',
+      },
+      { 
+        id: 'users',
+        label: 'Пользователи', 
+        icon: UsersIcon, 
+        to: '/users',
+        badge: '12',
+        badgeVariant: 'info'
+      },
+    ],
+  },
+  {
+    title: 'Контент',
+    items: [
+      { 
+        id: 'documents',
+        label: 'Документы', 
+        icon: DocumentTextIcon,
+        children: [
+          { id: 'all-docs', label: 'Все документы', to: '/documents/all' },
+          { id: 'my-docs', label: 'Мои документы', to: '/documents/my' },
+          { id: 'shared', label: 'Общие', to: '/documents/shared', badge: '3', badgeVariant: 'warning' },
+        ]
+      },
+      { 
+        id: 'folders',
+        label: 'Папки', 
+        icon: FolderIcon, 
+        to: '/folders'
+      },
+      { 
+        id: 'settings',
+        label: 'Настройки', 
+        icon: Cog6ToothIcon, 
+        to: '/settings'
+      },
+    ],
+  },
+];
+
+// Контентный блок-заглушка
+const ContentPlaceholder = `
+  <div class="flex-1 bg-slate-50 rounded-xl border-2 border-dashed border-slate-300 p-8 flex items-center justify-center">
+    <div class="text-center">
+      <div class="text-4xl mb-2">📄</div>
+      <h3 class="text-lg font-semibold text-slate-700">Content Area</h3>
+      <p class="text-sm text-slate-500">Main content goes here</p>
+    </div>
+  </div>
+`;
+
+// 1. Playground (интерактивный с контентом)
+export const Playground = {
+  args: {
+    title: 'Навигация',
+    sections: menuSections,
+    direction: 'vertical',
+    compact: false,
+    collapsible: true,
+    searchable: true,
+    showHeader: undefined,
+    headerSize: 'md',
+    cardPadding: 'none',
+    cardVariant: 'default',
+  },
+  render: (args) => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const handleItemClick = (item) => {
+        console.log('Clicked:', item);
+        activeItem.value = item.to || item.id;
+      };
+      return { args, activeItem, handleItemClick };
+    },
+    template: `
+      <div :class="args.direction === 'horizontal' ? 'flex flex-col gap-4' : 'flex gap-4'" class="h-[600px] bg-white p-4">
+        <DXMenu 
+          v-bind="args"
+          :activeItem="activeItem"
+          :class="args.direction === 'horizontal' ? 'w-full' : 'w-80'"
+          @item-click="handleItemClick"
+          @update:compact="args.compact = $event"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 2. Vertical (базовый вертикальный с submenu)
+export const Vertical = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { menuSections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          title="Меню"
+          :sections="menuSections"
+          :activeItem="activeItem"
+          class="w-80"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 3. VerticalCompact (компактный)
+export const VerticalCompact = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { menuSections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          :sections="menuSections"
+          :activeItem="activeItem"
+          :compact="true"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 4. VerticalCollapsible (переключаемый)
+export const VerticalCollapsible = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const compact = ref(false);
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { menuSections, activeItem, compact, handleItemClick };
+    },
+    template: `
+      <div class="flex gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          title="Панель"
+          :sections="menuSections"
+          :activeItem="activeItem"
+          :compact="compact"
+          collapsible
+          searchable
+          @update:compact="compact = $event"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 5. VerticalWithSubmenu (акцент на submenu)
+export const VerticalWithSubmenu = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/documents/my');
+      const sections = [
+        {
+          title: 'Файлы',
+          items: [
+            { 
+              id: 'documents',
+              label: 'Документы', 
+              icon: DocumentTextIcon,
+              children: [
+                { id: 'all-docs', label: 'Все документы', to: '/documents/all' },
+                { id: 'my-docs', label: 'Мои документы', to: '/documents/my' },
+                { id: 'shared', label: 'Общие', to: '/documents/shared', badge: '5', badgeVariant: 'info' },
+                { id: 'archived', label: 'Архив', to: '/documents/archived' },
+              ]
+            },
+            { 
+              id: 'folders',
+              label: 'Папки', 
+              icon: FolderIcon,
+              children: [
+                { id: 'work', label: 'Рабочие', to: '/folders/work' },
+                { id: 'personal', label: 'Личные', to: '/folders/personal' },
+              ]
+            },
+          ],
+        },
+      ];
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { sections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          title="Submenu Demo"
+          :sections="sections"
+          :activeItem="activeItem"
+          class="w-80"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 6. Horizontal (базовый горизонтальный)
+export const Horizontal = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { menuSections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex flex-col gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          title="Навигация"
+          :sections="menuSections"
+          :activeItem="activeItem"
+          direction="horizontal"
+          class="w-full"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 7. HorizontalWithSubmenu (с dropdown)
+export const HorizontalWithSubmenu = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const sections = [
+        {
+          items: [
+            { id: 'home', label: 'Главная', icon: HomeIcon, to: '/home' },
+            { 
+              id: 'documents',
+              label: 'Документы', 
+              icon: DocumentTextIcon,
+              children: [
+                { id: 'all-docs', label: 'Все документы', to: '/documents/all' },
+                { id: 'my-docs', label: 'Мои документы', to: '/documents/my' },
+                { id: 'shared', label: 'Общие', to: '/documents/shared', badge: '3', badgeVariant: 'info' },
+              ]
+            },
+            { id: 'users', label: 'Пользователи', icon: UsersIcon, to: '/users' },
+            { id: 'settings', label: 'Настройки', icon: Cog6ToothIcon, to: '/settings' },
+          ],
+        },
+      ];
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { sections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex flex-col gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          title="Dropdown Demo"
+          :sections="sections"
+          :activeItem="activeItem"
+          direction="horizontal"
+          class="w-full"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};
+
+// 8. NavbarStyle (чистый navbar)
+export const NavbarStyle = {
+  render: () => ({
+    components: { DXMenu },
+    setup() {
+      const activeItem = ref('/home');
+      const handleItemClick = (item) => {
+        activeItem.value = item.to || item.id;
+      };
+      return { menuSections, activeItem, handleItemClick };
+    },
+    template: `
+      <div class="flex flex-col gap-4 h-[600px] bg-white p-4">
+        <DXMenu 
+          :sections="menuSections"
+          :activeItem="activeItem"
+          direction="horizontal"
+          :showHeader="false"
+          cardVariant="flat"
+          class="w-full"
+          @item-click="handleItemClick"
+        />
+        ${ContentPlaceholder}
+      </div>
+    `,
+  }),
+};