dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,231 @@
+import DXCopyField from './DXCopyField.vue';
+import {
+  ClipboardDocumentIcon,
+  KeyIcon,
+  LinkIcon,
+  CodeBracketIcon,
+  DocumentDuplicateIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXCopyField',
+  component: DXCopyField,
+  tags: ['autodocs'],
+  argTypes: {
+    copyIconAnimation: {
+      control: 'select',
+      options: ['none', 'wiggle', 'scale', 'rotate'],
+    },
+    copiedIconAnimation: {
+      control: 'select',
+      options: ['none', 'wiggle', 'scale', 'rotate'],
+    },
+  },
+};
+
+export const Default = {
+  args: { 
+    value: 'https://example.com/share/abc123', 
+    label: 'Share Link' 
+  },
+};
+
+export const Code = {
+  args: { 
+    value: 'npm install dxd-style-code', 
+    label: 'Installation' 
+  },
+};
+
+export const ApiKey = {
+  args: { 
+    value: 'sk_live_abc123xyz789', 
+    label: 'API Key' 
+  },
+};
+
+// С анимацией wiggle
+export const WiggleAnimation = {
+  args: {
+    value: 'https://example.com/share/abc123',
+    label: 'Share Link',
+    copyIconAnimation: 'wiggle',
+    copiedIconAnimation: 'wiggle',
+  },
+};
+
+// С анимацией scale (по умолчанию)
+export const ScaleAnimation = {
+  args: {
+    value: 'npm install dxd-style-code',
+    label: 'Installation',
+    copyIconAnimation: 'scale',
+    copiedIconAnimation: 'scale',
+  },
+};
+
+// С анимацией rotate
+export const RotateAnimation = {
+  args: {
+    value: 'sk_live_abc123xyz789',
+    label: 'API Key',
+    copyIconAnimation: 'rotate',
+    copiedIconAnimation: 'rotate',
+  },
+};
+
+// Без анимации
+export const NoAnimation = {
+  args: {
+    value: 'https://example.com/share',
+    label: 'Link',
+    copyIconAnimation: 'none',
+    copiedIconAnimation: 'none',
+  },
+};
+
+// Кастомные иконки
+export const CustomIcons = {
+  render: () => ({
+    components: { DXCopyField },
+    setup() {
+      return { 
+        KeyIcon,
+        LinkIcon,
+        CodeBracketIcon,
+      };
+    },
+    template: `
+      <div class="space-y-6">
+        <DXCopyField
+          value="sk_live_abc123xyz789"
+          label="API Key"
+          :copy-icon="KeyIcon"
+          copy-icon-animation="wiggle"
+        />
+        
+        <DXCopyField
+          value="https://example.com/invite/abc123"
+          label="Invite Link"
+          :copy-icon="LinkIcon"
+          copy-icon-animation="scale"
+        />
+        
+        <DXCopyField
+          value="import { DXButton } from 'dxd-style-code'"
+          label="Import Code"
+          :copy-icon="CodeBracketIcon"
+          copy-icon-animation="rotate"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Разные анимации для состояний
+export const MixedAnimations = {
+  args: {
+    value: 'https://example.com/share/abc123',
+    label: 'Share Link',
+    copyIconAnimation: 'wiggle',
+    copiedIconAnimation: 'scale',
+  },
+};
+
+// Все варианты
+export const AllVariants = {
+  render: () => ({
+    components: { DXCopyField },
+    setup() {
+      return {
+        ClipboardDocumentIcon,
+        KeyIcon,
+        LinkIcon,
+        DocumentDuplicateIcon,
+      };
+    },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Default (Scale animation)</h3>
+          <DXCopyField
+            value="https://example.com/share/abc123"
+            label="Share Link"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Wiggle Animation</h3>
+          <DXCopyField
+            value="npm install dxd-style-code"
+            label="Installation"
+            copy-icon-animation="wiggle"
+            copied-icon-animation="wiggle"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Rotate Animation</h3>
+          <DXCopyField
+            value="sk_live_abc123xyz789"
+            label="API Key"
+            copy-icon-animation="rotate"
+            copied-icon-animation="rotate"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Custom Icon</h3>
+          <DXCopyField
+            value="https://example.com/invite/abc123"
+            label="Invite Link"
+            :copy-icon="LinkIcon"
+            copy-icon-animation="scale"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Mixed Animations</h3>
+          <DXCopyField
+            value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
+            label="JWT Token"
+            copy-icon-animation="wiggle"
+            copied-icon-animation="scale"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Interactive Example
+export const Interactive = {
+  render: () => ({
+    components: { DXCopyField },
+    template: `
+      <div class="p-6 bg-slate-50 rounded-xl space-y-4">
+        <h3 class="text-lg font-semibold text-slate-900">Try copying these values!</h3>
+        <div class="space-y-4">
+          <DXCopyField
+            value="https://example.com/share/abc123"
+            label="Share Link"
+            copy-icon-animation="scale"
+            @copied="(val) => console.log('Copied:', val)"
+          />
+          <DXCopyField
+            value="npm install dxd-style-code"
+            label="Installation Command"
+            copy-icon-animation="wiggle"
+          />
+          <DXCopyField
+            value="sk_live_abc123xyz789"
+            label="API Key"
+            copy-icon-animation="rotate"
+          />
+        </div>
+        <p class="text-xs text-slate-500">Click the copy button to copy to clipboard</p>
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXCopyField/DXCopyField.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="space-y-1" data-component="DXCopyField">
+    <p v-if="label" class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">
+      {{ label }}
+    </p>
+    <div class="flex items-center justify-between gap-2 rounded-lg border border-slate-200 bg-white px-3 py-3">
+      <p class="text-base font-semibold text-slate-900 break-all flex-1 text-center">
+        {{ value || "—" }}
+      </p>
+      <button
+        type="button"
+        class="h-9 w-9 inline-flex items-center justify-center rounded-xl border border-slate-200 text-slate-700 hover:border-slate-300 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+        :class="{ 'border-emerald-300 bg-emerald-50': copied }"
+        :aria-label="`Скопировать ${label || 'значение'}`"
+        @click="copyToClipboard"
+      >
+        <DXIcon
+          v-if="copied"
+          :icon="CheckIcon"
+          size="sm"
+          :animation="copiedIconAnimation"
+          class="text-emerald-600"
+        />
+        <DXIcon
+          v-else
+          :icon="copyIcon"
+          size="sm"
+          :animation="copyIconAnimation"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { ClipboardDocumentIcon, ClipboardDocumentCheckIcon, CheckIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Значение для копирования */
+  value: { type: String, default: "" },
+  /** Иконка для копирования */
+  copyIcon: { type: [Object, Function], default: () => ClipboardDocumentIcon },
+  /** Иконка успешного копирования */
+  successIcon: { type: [Object, Function], default: () => ClipboardDocumentCheckIcon },
+  /** Анимация иконки копирования: none | wiggle | scale | rotate */
+  copyIconAnimation: { type: String, default: "scale" },
+  /** Анимация иконки успеха: none | wiggle | scale | rotate */
+  copiedIconAnimation: { type: String, default: "scale" },
+  /** Время отображения успешного состояния (мс) */
+  successDuration: { type: Number, default: 2000 },
+});
+
+const emit = defineEmits(["copied"]);
+
+const copied = ref(false);
+
+const copyToClipboard = async () => {
+  if (!props.value) return;
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copied.value = true;
+    emit("copied", props.value);
+    setTimeout(() => { 
+      copied.value = false; 
+    }, props.successDuration);
+  } catch (e) {
+    console.error("Не удалось скопировать", e);
+  }
+};
+</script>
+

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

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

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

@@ -0,0 +1,275 @@
+import { ref } from 'vue';
+import DXDataFilter from './DXDataFilter.vue';
+import DXCard from '../../atoms/DXCard/DXCard.vue';
+
+export default {
+  title: 'Molecules/DXDataFilter',
+  component: DXDataFilter,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDataFilter
+
+Комплексный фильтр данных с различными типами условий, группировкой и сохранением фильтров.
+
+## Назначение
+
+DXDataFilter предоставляет расширенную систему фильтрации с поддержкой различных типов
+условий (текст, число, дата, выбор), группировки условий (AND/OR) и сохранения фильтров.
+
+## Архитектура
+
+### Использует
+- \`DXInput\` - для текстовых и числовых фильтров
+- \`DXSelect\` - для фильтров выбора
+- \`DXDatePicker\` - для фильтров даты
+- \`DXButton\` - для действий
+- \`DXIcon\` - для иконок
+- \`useClassComposition\` composable - для стилей
+- \`useSpacing\` composable - для отступов
+
+### Используется в
+- \`DXTable\` - для фильтрации данных
+- \`DXReportGenerator\` - для фильтрации отчетов
+- Каталоги товаров
+- Аналитические панели
+
+## Внутренняя логика
+
+### Типы фильтров
+- **text**: Текстовый фильтр
+- **number**: Числовой фильтр с диапазоном (min/max)
+- **select**: Фильтр выбора из списка
+- **date**: Фильтр даты (с поддержкой диапазона)
+
+### Группировка
+Условия могут быть сгруппированы через AND или OR логику.
+
+### Кастомные фильтры
+Можно использовать slots для кастомных типов фильтров.
+
+## Особенности
+
+### Удаление фильтров
+При \`removable={true}\` каждый фильтр можно удалить.
+
+### События
+Компонент эмитит события при изменении, применении и сбросе фильтров.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    grouping: {
+      control: 'select',
+      options: ['AND', 'OR'],
+      description: 'Группировка условий: AND (все условия) | OR (любое условие).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'AND' },
+        category: 'Behavior',
+      },
+    },
+    removable: {
+      control: 'boolean',
+      description: 'Можно ли удалять фильтры.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    showActions: {
+      control: 'boolean',
+      description: 'Показывать кнопки действий (Применить/Сбросить).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+  },
+};
+
+const defaultFilterDefinitions = [
+  {
+    id: 'name',
+    label: 'Название',
+    type: 'text',
+    placeholder: 'Введите название',
+  },
+  {
+    id: 'status',
+    label: 'Статус',
+    type: 'select',
+    options: [
+      { value: 'active', label: 'Активный' },
+      { value: 'inactive', label: 'Неактивный' },
+      { value: 'pending', label: 'Ожидание' },
+    ],
+  },
+  {
+    id: 'price',
+    label: 'Цена',
+    type: 'number',
+  },
+  {
+    id: 'date',
+    label: 'Дата',
+    type: 'date',
+    range: true,
+  },
+];
+
+export const Default = {
+  args: {
+    filters: [
+      { id: 'name', type: 'text', value: '' },
+      { id: 'status', type: 'select', value: '' },
+    ],
+    filterDefinitions: defaultFilterDefinitions,
+    grouping: 'AND',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый фильтр с текстовым и select фильтрами.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDataFilter, DXCard },
+    setup() {
+      const filters = ref(args.filters);
+      const handleApply = (data) => {
+        console.log('Применены фильтры:', data);
+      };
+      const handleReset = () => {
+        console.log('Фильтры сброшены');
+      };
+      return { args, filters, handleApply, handleReset };
+    },
+    template: `
+      <DXCard class="p-6">
+        <DXDataFilter
+          v-model:filters="filters"
+          v-bind="args"
+          @apply="handleApply"
+          @reset="handleReset"
+        />
+      </DXCard>
+    `,
+  }),
+};
+
+export const WithAllTypes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Фильтр со всеми типами условий: текст, число, выбор, дата.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXDataFilter, DXCard },
+    setup() {
+      const filters = ref([
+        { id: 'name', type: 'text', value: '' },
+        { id: 'status', type: 'select', value: '' },
+        { id: 'price', type: 'number', value: { min: '', max: '' } },
+        { id: 'date', type: 'date', value: null, range: true },
+      ]);
+      
+      const handleApply = (data) => {
+        console.log('Применены фильтры:', data);
+      };
+      
+      return { filters, defaultFilterDefinitions, handleApply };
+    },
+    template: `
+      <DXCard class="p-6">
+        <DXDataFilter
+          v-model:filters="filters"
+          :filter-definitions="defaultFilterDefinitions"
+          @apply="handleApply"
+        />
+      </DXCard>
+    `,
+  }),
+};
+
+export const WithGrouping = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Фильтр с группировкой условий. Можно переключать между AND и OR.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXDataFilter, DXCard },
+    setup() {
+      const filters = ref([
+        { id: 'name', type: 'text', value: '' },
+        { id: 'status', type: 'select', value: '' },
+      ]);
+      const grouping = ref('AND');
+      
+      const handleGroupingChange = (newGrouping) => {
+        console.log('Группировка изменена:', newGrouping);
+      };
+      
+      return { filters, grouping, defaultFilterDefinitions, handleGroupingChange };
+    },
+    template: `
+      <DXCard class="p-6">
+        <DXDataFilter
+          v-model:filters="filters"
+          v-model:grouping="grouping"
+          :filter-definitions="defaultFilterDefinitions"
+          @grouping-change="handleGroupingChange"
+        />
+      </DXCard>
+    `,
+  }),
+};
+
+export const WithoutActions = {
+  args: {
+    filters: [
+      { id: 'name', type: 'text', value: '' },
+    ],
+    filterDefinitions: defaultFilterDefinitions,
+    showActions: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Фильтр без кнопок действий. Используйте кастомные действия через slot actions.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXDataFilter, DXCard, DXButton },
+    setup() {
+      const filters = ref(args.filters);
+      return { args, filters };
+    },
+    template: `
+      <DXCard class="p-6">
+        <DXDataFilter
+          v-model:filters="filters"
+          v-bind="args"
+        >
+          <template #actions>
+            <DXButton variant="ghost">Отмена</DXButton>
+            <DXButton variant="primary">Применить фильтры</DXButton>
+          </template>
+        </DXDataFilter>
+      </DXCard>
+    `,
+  }),
+};
+