dxd-style-code 0.1.7 → 0.1.8

package/src/components/atoms/DXBackdrop/DXBackdrop.stories.js

@@ -0,0 +1,341 @@
+import DXBackdrop from './DXBackdrop.vue';
+import DXButton from '../DXButton/DXButton.vue';
+import { ref, computed } from 'vue';
+
+export default {
+  title: 'Atoms/DXBackdrop',
+  component: DXBackdrop,
+  tags: ['autodocs'],
+  argTypes: {
+    blur: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl'],
+      description: 'Уровень размытия backdrop'
+    },
+    backgroundColor: {
+      control: 'text',
+      description: 'Цвет фона (Tailwind класс или CSS значение): bg-slate-900/40 | bg-black/50 | rgb(...)'
+    },
+    zIndex: {
+      control: 'select',
+      options: ['0', '10', '20', '30', '40', '50', 'auto'],
+      description: 'z-index backdrop'
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Можно ли закрыть кликом'
+    },
+    lockScroll: {
+      control: 'boolean',
+      description: 'Блокировать скролл body'
+    }
+  },
+};
+
+// 1. Default - базовый backdrop
+export const Default = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show = ref(false);
+      return { show };
+    },
+    template: `
+      <div>
+        <DXButton @click="show = true">Показать Backdrop</DXButton>
+        <DXBackdrop :show="show" @close="show = false" />
+      </div>
+    `,
+  }),
+};
+
+// 2. BlurLevels - разные уровни размытия
+export const BlurLevels = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const blurs = ['none', 'sm', 'md', 'lg', 'xl'];
+      const currentBlur = ref(null);
+      return { blurs, currentBlur };
+    },
+    template: `
+      <div class="flex flex-wrap gap-4">
+        <DXButton 
+          v-for="blur in blurs" 
+          :key="blur"
+          @click="currentBlur = blur"
+          size="sm"
+        >
+          Blur: {{ blur }}
+        </DXButton>
+        <DXBackdrop 
+          :show="currentBlur !== null" 
+          :blur="currentBlur"
+          @close="currentBlur = null"
+        >
+          <div class="flex items-center justify-center h-full">
+            <div class="text-center text-white">
+              <div class="text-3xl font-bold mb-2">{{ currentBlur }}</div>
+              <div class="text-sm opacity-80">Кликните на backdrop чтобы закрыть</div>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 3. Colors - разные цвета
+export const Colors = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const colors = [
+        { name: 'Slate', value: 'slate-900' },
+        { name: 'Gray', value: 'gray-900' },
+        { name: 'Black', value: 'black' },
+        { name: 'White', value: 'white' }
+      ];
+      const currentColor = ref(null);
+      const backgroundColor = computed(() => {
+        if (!currentColor.value) return 'bg-slate-900/40';
+        return `bg-${currentColor.value.value}/40`;
+      });
+      return { colors, currentColor, backgroundColor };
+    },
+    template: `
+      <div class="flex flex-wrap gap-4">
+        <DXButton 
+          v-for="color in colors" 
+          :key="color.value"
+          @click="currentColor = color"
+          size="sm"
+        >
+          {{ color.name }}
+        </DXButton>
+        <DXBackdrop 
+          :show="currentColor !== null" 
+          :background-color="backgroundColor"
+          @close="currentColor = null"
+        >
+          <div class="flex items-center justify-center h-full">
+            <div class="text-center" :class="currentColor?.value === 'white' ? 'text-slate-900' : 'text-white'">
+              <div class="text-3xl font-bold mb-2">{{ currentColor?.name }}</div>
+              <div class="text-sm opacity-80">Цвет: {{ currentColor?.value }}</div>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 4. WithContent - backdrop с контентом (модалка внутри)
+export const WithContent = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show = ref(false);
+      return { show };
+    },
+    template: `
+      <div>
+        <DXButton @click="show = true">Открыть модалку</DXButton>
+        <DXBackdrop :show="show" @close="show = false">
+          <div class="flex items-center justify-center h-full p-4">
+            <div class="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl">
+              <h2 class="text-xl font-bold mb-4 text-slate-900">Модальное окно</h2>
+              <p class="text-slate-600 mb-4">
+                Это пример содержимого внутри backdrop. 
+                Backdrop предоставляет фон с размытием, 
+                а контент рендерится через slot.
+              </p>
+              <div class="flex gap-2">
+                <DXButton @click="show = false" variant="primary">Закрыть</DXButton>
+                <DXButton @click="show = false" variant="secondary">Отмена</DXButton>
+              </div>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 5. NotDismissible - backdrop без возможности закрытия
+export const NotDismissible = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show = ref(false);
+      return { show };
+    },
+    template: `
+      <div>
+        <DXButton @click="show = true">Открыть (не закрывается кликом)</DXButton>
+        <DXBackdrop :show="show" :dismissible="false">
+          <div class="flex items-center justify-center h-full p-4">
+            <div class="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl">
+              <h2 class="text-xl font-bold mb-4 text-slate-900">Важное уведомление</h2>
+              <p class="text-slate-600 mb-4">
+                Этот backdrop нельзя закрыть кликом по фону.
+                Только через кнопку закрытия.
+              </p>
+              <DXButton @click="show = false" variant="primary" block>
+                Понятно, закрыть
+              </DXButton>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 6. CustomZIndex - разные z-index
+export const CustomZIndex = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show1 = ref(false);
+      const show2 = ref(false);
+      return { show1, show2 };
+    },
+    template: `
+      <div class="flex gap-4">
+        <DXButton @click="show1 = true">Backdrop z-10</DXButton>
+        <DXButton @click="show2 = true">Backdrop z-20</DXButton>
+        
+        <DXBackdrop :show="show1" z-index="10" @close="show1 = false" background-color="bg-slate-900/30">
+          <div class="flex items-center justify-center h-full">
+            <div class="bg-white rounded-2xl p-6 max-w-md shadow-2xl">
+              <h3 class="font-bold mb-2">z-index: 10</h3>
+              <p class="text-sm text-slate-600 mb-4">Нижний слой</p>
+              <DXButton @click="show1 = false" size="sm">Закрыть</DXButton>
+            </div>
+          </div>
+        </DXBackdrop>
+        
+        <DXBackdrop :show="show2" z-index="20" @close="show2 = false">
+          <div class="flex items-center justify-center h-full">
+            <div class="bg-white rounded-2xl p-6 max-w-md shadow-2xl">
+              <h3 class="font-bold mb-2">z-index: 20</h3>
+              <p class="text-sm text-slate-600 mb-4">Верхний слой</p>
+              <DXButton @click="show2 = false" size="sm">Закрыть</DXButton>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 7. NoBlur - backdrop без размытия
+export const NoBlur = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show = ref(false);
+      return { show };
+    },
+    template: `
+      <div>
+        <DXButton @click="show = true">Без размытия</DXButton>
+        <DXBackdrop :show="show" blur="none" background-color="bg-slate-900/60" @close="show = false">
+          <div class="flex items-center justify-center h-full">
+            <div class="text-center text-white">
+              <div class="text-3xl font-bold mb-2">Без размытия</div>
+              <div class="text-sm opacity-80">Только затемнение без backdrop-blur</div>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+
+// 8. Interactive - интерактивный пример с настройками
+export const Interactive = {
+  render: () => ({
+    components: { DXBackdrop, DXButton },
+    setup() {
+      const show = ref(false);
+      const blur = ref('md');
+      const opacity = ref('40');
+      const color = ref('slate-900');
+      
+      const backgroundColor = computed(() => {
+        const tailwindOpacities = ['0', '5', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95', '100'];
+        if (tailwindOpacities.includes(String(opacity.value))) {
+          return `bg-${color.value}/${opacity.value}`;
+        }
+        const colorMap = {
+          'slate-900': 'rgb(15 23 42',
+          'gray-900': 'rgb(17 24 39',
+          'black': 'rgb(0 0 0',
+          'white': 'rgb(255 255 255',
+        };
+        const rgb = colorMap[color.value] || colorMap['slate-900'];
+        return `${rgb} / ${opacity.value}%)`;
+      });
+      
+      return { show, blur, opacity, color, backgroundColor };
+    },
+    template: `
+      <div>
+        <div class="flex flex-col gap-4 mb-4 p-4 bg-slate-50 rounded-xl">
+          <div>
+            <label class="block text-sm font-medium mb-2">Размытие:</label>
+            <div class="flex gap-2">
+              <DXButton 
+                v-for="b in ['none', 'sm', 'md', 'lg', 'xl']"
+                :key="b"
+                :variant="blur === b ? 'primary' : 'secondary'"
+                size="sm"
+                @click="blur = b"
+              >
+                {{ b }}
+              </DXButton>
+            </div>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium mb-2">Прозрачность: {{ opacity }}%</label>
+            <input 
+              type="range" 
+              v-model="opacity" 
+              min="0" 
+              max="100" 
+              step="5"
+              class="w-full"
+            />
+          </div>
+          
+          <DXButton @click="show = true">Показать backdrop</DXButton>
+        </div>
+        
+        <DXBackdrop 
+          :show="show" 
+          :blur="blur"
+          :background-color="backgroundColor"
+          @close="show = false"
+        >
+          <div class="flex items-center justify-center h-full">
+            <div class="bg-white rounded-2xl p-6 max-w-md shadow-2xl">
+              <h3 class="font-bold mb-4">Настройки backdrop</h3>
+              <div class="space-y-2 text-sm text-slate-600 mb-4">
+                <p><strong>Blur:</strong> {{ blur }}</p>
+                <p><strong>Opacity:</strong> {{ opacity }}%</p>
+                <p><strong>Color:</strong> {{ color }}</p>
+              </div>
+              <DXButton @click="show = false" variant="primary" block>
+                Закрыть
+              </DXButton>
+            </div>
+          </div>
+        </DXBackdrop>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXBackdrop/DXBackdrop.vue

@@ -0,0 +1,102 @@
+<template>
+  <Teleport to="body">
+    <Transition v-bind="FADE_TRANSITION">
+      <div
+        v-if="show"
+        :class="backdropClasses"
+        @click="handleClick"
+        data-component="DXBackdrop"
+        :data-blur="blur"
+        :data-dismissible="dismissible"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, watch, onBeforeUnmount } from 'vue';
+
+// Fade transition configuration (Tailwind classes)
+const FADE_TRANSITION = {
+  enterActiveClass: 'transition-opacity duration-200 ease-out',
+  enterFromClass: 'opacity-0',
+  enterToClass: 'opacity-100',
+  leaveActiveClass: 'transition-opacity duration-200 ease-in',
+  leaveFromClass: 'opacity-100',
+  leaveToClass: 'opacity-0',
+};
+
+const props = defineProps({
+  /** Показать/скрыть backdrop */
+  show: { type: Boolean, default: false },
+  /** Уровень размытия: none | sm | md | lg | xl */
+  blur: { type: String, default: 'sm', validator: (v) => ['none', 'sm', 'md', 'lg', 'xl'].includes(v)},
+  /** Цвет фона (Tailwind класс): bg-slate-900/40 | bg-black/50 */
+  backgroundColor: { type: String, default: 'bg-slate-900/40' },
+  /** z-index: 0 | 10 | 20 | 30 | 40 | 50 | auto */
+  zIndex: { 
+    type: String, 
+    default: '50',
+    validator: (v) => ['0', '10', '20', '30', '40', '50', 'auto'].includes(v)
+  },
+  /** Можно ли закрыть кликом */
+  dismissible: { type: Boolean, default: true },
+  /** Блокировать скролл body */
+  lockScroll: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['click', 'close']);
+
+// Blur classes mapping
+const BLUR_CLASSES = {
+  none: 'backdrop-blur-none',
+  sm: 'backdrop-blur-sm',
+  md: 'backdrop-blur',
+  lg: 'backdrop-blur-lg',
+  xl: 'backdrop-blur-xl',
+};
+
+// Z-index classes mapping
+const Z_INDEX_CLASSES = {
+  '0': 'z-0',
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+  'auto': 'z-auto',
+};
+
+const backdropClasses = computed(() => [
+  'fixed inset-0',
+  BLUR_CLASSES[props.blur],
+  props.backgroundColor || 'bg-slate-900/40',
+  Z_INDEX_CLASSES[props.zIndex] || 'z-50',
+  props.dismissible && 'cursor-pointer',
+]);
+
+const handleClick = (event) => {
+  if (event.target === event.currentTarget) {
+    emit('click', event);
+    if (props.dismissible) {
+      emit('close');
+    }
+  }
+};
+
+// Lock/unlock body scroll
+watch(() => props.show, (isShown) => {
+  if (props.lockScroll) {
+    document.body.classList.toggle('overflow-hidden', isShown);
+  }
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (props.lockScroll) {
+    document.body.classList.remove('overflow-hidden');
+  }
+});
+</script>
+

package/src/components/atoms/DXBackdrop/index.js

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

package/src/components/atoms/DXBadge/DXBadge.stories.js

@@ -0,0 +1,239 @@
+import DXBadge from './DXBadge.vue';
+import { 
+  CheckCircleIcon,
+  XCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  ClockIcon,
+  FireIcon,
+  BoltIcon,
+  SparklesIcon,
+  StarIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/solid';
+
+export default {
+  title: 'Atoms/DXBadge',
+  component: DXBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['slate', 'success', 'warning', 'danger', 'info'],
+      description: 'Вариант оформления',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Размер бейджа',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    variant: 'slate',
+  },
+  render: (args) => ({
+    components: { DXBadge },
+    setup() { return { args }; },
+    template: '<DXBadge v-bind="args">Статус</DXBadge>',
+  }),
+};
+
+export const Success = {
+  args: {
+    variant: 'success',
+  },
+  render: (args) => ({
+    components: { DXBadge },
+    setup() { return { args }; },
+    template: '<DXBadge v-bind="args">Активен</DXBadge>',
+  }),
+};
+
+export const Warning = {
+  args: {
+    variant: 'warning',
+  },
+  render: (args) => ({
+    components: { DXBadge },
+    setup() { return { args }; },
+    template: '<DXBadge v-bind="args">Ожидание</DXBadge>',
+  }),
+};
+
+export const Danger = {
+  args: {
+    variant: 'danger',
+  },
+  render: (args) => ({
+    components: { DXBadge },
+    setup() { return { args }; },
+    template: '<DXBadge v-bind="args">Ошибка</DXBadge>',
+  }),
+};
+
+export const Info = {
+  args: {
+    variant: 'info',
+  },
+  render: (args) => ({
+    components: { DXBadge },
+    setup() { return { args }; },
+    template: '<DXBadge v-bind="args">Информация</DXBadge>',
+  }),
+};
+
+export const AllVariants = {
+  render: () => ({
+    components: { DXBadge },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <DXBadge variant="slate">Slate</DXBadge>
+        <DXBadge variant="success">Success</DXBadge>
+        <DXBadge variant="warning">Warning</DXBadge>
+        <DXBadge variant="danger">Danger</DXBadge>
+        <DXBadge variant="info">Info</DXBadge>
+      </div>
+    `,
+  }),
+};
+
+export const WithIconLeft = {
+  render: () => ({
+    components: { DXBadge },
+    setup() {
+      return { CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon, InformationCircleIcon };
+    },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <DXBadge variant="success" :icon-left="CheckCircleIcon">Активен</DXBadge>
+        <DXBadge variant="warning" :icon-left="ExclamationTriangleIcon">Ожидание</DXBadge>
+        <DXBadge variant="danger" :icon-left="XCircleIcon">Ошибка</DXBadge>
+        <DXBadge variant="info" :icon-left="InformationCircleIcon">Новое</DXBadge>
+      </div>
+    `,
+  }),
+};
+
+export const WithIconRight = {
+  render: () => ({
+    components: { DXBadge },
+    setup() {
+      return { ClockIcon, FireIcon, BoltIcon, StarIcon };
+    },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <DXBadge variant="slate" :icon-right="ClockIcon">Скоро</DXBadge>
+        <DXBadge variant="danger" :icon-right="FireIcon">Горячее</DXBadge>
+        <DXBadge variant="warning" :icon-right="BoltIcon">Быстро</DXBadge>
+        <DXBadge variant="info" :icon-right="StarIcon">Новинка</DXBadge>
+      </div>
+    `,
+  }),
+};
+
+export const WithBothIcons = {
+  render: () => ({
+    components: { DXBadge },
+    setup() {
+      return { CheckCircleIcon, XMarkIcon, SparklesIcon };
+    },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <DXBadge variant="success" :icon-left="CheckCircleIcon" :icon-right="XMarkIcon">
+          Закрываемый
+        </DXBadge>
+        <DXBadge variant="info" :icon-left="SparklesIcon" :icon-right="SparklesIcon">
+          Премиум
+        </DXBadge>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXBadge },
+    setup() {
+      return { CheckCircleIcon };
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Small (sm, default)</p>
+          <div class="flex flex-wrap gap-2 items-center">
+            <DXBadge variant="slate" size="sm">Slate</DXBadge>
+            <DXBadge variant="success" size="sm" :icon-left="CheckCircleIcon">Success</DXBadge>
+            <DXBadge variant="warning" size="sm">Warning</DXBadge>
+            <DXBadge variant="danger" size="sm">Danger</DXBadge>
+            <DXBadge variant="info" size="sm">Info</DXBadge>
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Medium (md)</p>
+          <div class="flex flex-wrap gap-2 items-center">
+            <DXBadge variant="slate" size="md">Slate</DXBadge>
+            <DXBadge variant="success" size="md" :icon-left="CheckCircleIcon">Success</DXBadge>
+            <DXBadge variant="warning" size="md">Warning</DXBadge>
+            <DXBadge variant="danger" size="md">Danger</DXBadge>
+            <DXBadge variant="info" size="md">Info</DXBadge>
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Size Comparison</p>
+          <div class="flex flex-wrap gap-3 items-center">
+            <DXBadge variant="info" size="sm">Small Badge</DXBadge>
+            <DXBadge variant="info" size="md">Medium Badge</DXBadge>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const IconsShowcase = {
+  render: () => ({
+    components: { DXBadge },
+    setup() {
+      return { 
+        CheckCircleIcon, 
+        XCircleIcon, 
+        ExclamationTriangleIcon,
+        InformationCircleIcon,
+        FireIcon,
+        BoltIcon,
+        ClockIcon,
+        StarIcon,
+        SparklesIcon,
+      };
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-2">Статусы</h3>
+          <div class="flex flex-wrap gap-2">
+            <DXBadge variant="success" :icon-left="CheckCircleIcon">Завершено</DXBadge>
+            <DXBadge variant="warning" :icon-left="ClockIcon">В процессе</DXBadge>
+            <DXBadge variant="danger" :icon-left="XCircleIcon">Отклонено</DXBadge>
+            <DXBadge variant="info" :icon-left="InformationCircleIcon">Новый</DXBadge>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-2">Специальные</h3>
+          <div class="flex flex-wrap gap-2">
+            <DXBadge variant="danger" :icon-left="FireIcon">Популярное</DXBadge>
+            <DXBadge variant="warning" :icon-left="BoltIcon">Срочно</DXBadge>
+            <DXBadge variant="info" :icon-left="StarIcon">Избранное</DXBadge>
+            <DXBadge variant="success" :icon-left="SparklesIcon">Новинка</DXBadge>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+