dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,312 @@
+import DXProgress from './DXProgress.vue';
+
+export default {
+  title: 'Atoms/DXProgress',
+  component: DXProgress,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+      description: 'Текущее значение прогресса',
+    },
+    min: {
+      control: { type: 'number' },
+      description: 'Минимальное значение',
+    },
+    max: {
+      control: { type: 'number' },
+      description: 'Максимальное значение',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'Размер прогресс-бара',
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'success', 'warning', 'danger', 'info'],
+      description: 'Цвет прогресс-бара',
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Текст лейбла',
+    },
+    showLabel: {
+      control: { type: 'boolean' },
+      description: 'Показывать лейбл',
+    },
+    showValue: {
+      control: { type: 'boolean' },
+      description: 'Показывать значение справа',
+    },
+    showInnerValue: {
+      control: { type: 'boolean' },
+      description: 'Показывать значение внутри бара',
+    },
+    striped: {
+      control: { type: 'boolean' },
+      description: 'Полосатый фон',
+    },
+    animated: {
+      control: { type: 'boolean' },
+      description: 'Анимированные полосы',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    value: 60,
+    size: 'md',
+    color: 'default',
+  },
+  render: (args) => ({
+    components: { DXProgress },
+    setup() { return { args }; },
+    template: '<DXProgress v-bind="args" />',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col items-start gap-6">
+        <div class="flex flex-col gap-2 w-full">
+          <span class="text-sm text-slate-600">xs (h-1)</span>
+          <DXProgress :value="60" size="xs" />
+        </div>
+        <div class="flex flex-col gap-2 w-full">
+          <span class="text-sm text-slate-600">sm (h-2)</span>
+          <DXProgress :value="60" size="sm" />
+        </div>
+        <div class="flex flex-col gap-2 w-full">
+          <span class="text-sm text-slate-600">md (h-3)</span>
+          <DXProgress :value="60" size="md" />
+        </div>
+        <div class="flex flex-col gap-2 w-full">
+          <span class="text-sm text-slate-600">lg (h-4)</span>
+          <DXProgress :value="60" size="lg" />
+        </div>
+        <div class="text-sm text-slate-500 mt-2">
+          Все размеры: xs | sm | md | lg
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Variants = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col items-start gap-6">
+        <div class="flex flex-col gap-4 w-full">
+          <h3 class="text-sm font-semibold text-slate-700">Цветовые варианты</h3>
+          <div class="space-y-4">
+            <div class="flex flex-col gap-2">
+              <span class="text-xs text-slate-600">Default</span>
+              <DXProgress :value="75" color="default" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <span class="text-xs text-slate-600">Success</span>
+              <DXProgress :value="75" color="success" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <span class="text-xs text-slate-600">Warning</span>
+              <DXProgress :value="75" color="warning" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <span class="text-xs text-slate-600">Danger</span>
+              <DXProgress :value="75" color="danger" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <span class="text-xs text-slate-600">Info</span>
+              <DXProgress :value="75" color="info" />
+            </div>
+          </div>
+        </div>
+        <div class="text-sm text-slate-500">
+          Все варианты: default | success | warning | danger | info
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithLabel = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">С лейблом и значением</h3>
+          <DXProgress 
+            :value="75" 
+            label="Загрузка файлов" 
+            :show-label="true" 
+            :show-value="true" 
+          />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Только лейбл</h3>
+          <DXProgress 
+            :value="50" 
+            label="Обработка данных" 
+            :show-label="true" 
+          />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Только значение</h3>
+          <DXProgress 
+            :value="90" 
+            :show-value="true" 
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithInnerValue = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Значение внутри бара</h3>
+          <DXProgress 
+            :value="65" 
+            color="success"
+            :show-inner-value="true" 
+          />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">С лейблом и внутренним значением</h3>
+          <DXProgress 
+            :value="80" 
+            label="Синхронизация"
+            color="info"
+            :show-label="true"
+            :show-inner-value="true" 
+          />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Разные значения</h3>
+          <DXProgress :value="25" color="danger" :show-inner-value="true" />
+          <DXProgress :value="50" color="warning" :show-inner-value="true" />
+          <DXProgress :value="75" color="success" :show-inner-value="true" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Striped = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Полосатый (без анимации)</h3>
+          <DXProgress :value="70" color="default" :striped="true" />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Анимированные полосы</h3>
+          <DXProgress :value="70" color="success" :striped="true" :animated="true" />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Разные цвета с анимацией</h3>
+          <DXProgress :value="60" color="default" :striped="true" :animated="true" />
+          <DXProgress :value="60" color="success" :striped="true" :animated="true" />
+          <DXProgress :value="60" color="warning" :striped="true" :animated="true" />
+          <DXProgress :value="60" color="danger" :striped="true" :animated="true" />
+          <DXProgress :value="60" color="info" :striped="true" :animated="true" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const SizesAndVariants = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Размеры с вариантом success</h3>
+          <div class="space-y-4">
+            <DXProgress :value="70" size="xs" color="success" />
+            <DXProgress :value="70" size="sm" color="success" />
+            <DXProgress :value="70" size="md" color="success" />
+            <DXProgress :value="70" size="lg" color="success" />
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Размеры с вариантом danger</h3>
+          <div class="space-y-4">
+            <DXProgress :value="40" size="xs" color="danger" />
+            <DXProgress :value="40" size="sm" color="danger" />
+            <DXProgress :value="40" size="md" color="danger" />
+            <DXProgress :value="40" size="lg" color="danger" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const UseCases = {
+  render: () => ({
+    components: { DXProgress },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Загрузка файла</h3>
+          <DXProgress 
+            :value="45" 
+            label="Загрузка файла.pdf" 
+            :show-label="true" 
+            :show-value="true"
+            color="info"
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Обработка данных</h3>
+          <DXProgress 
+            :value="80" 
+            label="Обработка данных" 
+            :show-label="true" 
+            :show-inner-value="true"
+            color="success"
+            :striped="true"
+            :animated="true"
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Ошибка загрузки</h3>
+          <DXProgress 
+            :value="30" 
+            label="Ошибка загрузки" 
+            :show-label="true" 
+            :show-value="true"
+            color="danger"
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Кастомный диапазон</h3>
+          <DXProgress 
+            :value="150" 
+            :min="0" 
+            :max="200"
+            label="Прогресс: 150/200" 
+            :show-label="true" 
+            :show-value="true"
+            color="warning"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXProgress/DXProgress.vue

@@ -0,0 +1,85 @@
+<template>
+  <div 
+    class="w-full" 
+    data-component="DXProgress"
+    :data-size="size"
+    :data-color="color"
+    :data-animated="animated"
+    :data-striped="striped"
+  >
+    <div v-if="showLabel || $slots.label" class="flex justify-between items-center mb-1">
+      <span class="text-sm font-medium text-slate-700">
+        <slot name="label">{{ label }}</slot>
+      </span>
+      <span v-if="showValue" class="text-sm font-semibold text-slate-900">
+        {{ displayValue }}
+      </span>
+    </div>
+    <div :class="trackClasses">
+      <div
+        :class="barClasses"
+        :style="{ width: `${percentage}%` }"
+        role="progressbar"
+        :aria-valuenow="value"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+      >
+        <span v-if="showInnerValue && percentage > 10" class="text-xs font-medium text-white px-1">
+          {{ displayValue }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useAnimation } from "@/composables/useAnimation";
+import { useVariantProgress } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Текущее значение */
+  value: { type: Number, default: 0 },
+  /** Минимум */
+  min: { type: Number, default: 0 },
+  /** Максимум */
+  max: { type: Number, default: 100 },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Показывать лейбл */
+  showLabel: { type: Boolean, default: false },
+  /** Показывать значение справа */
+  showValue: { type: Boolean, default: false },
+  /** Показывать значение внутри бара */
+  showInnerValue: { type: Boolean, default: false },
+  /** Размер: xs | sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Цвет: default | success | warning | danger | info */
+  color: { type: String, default: "default" },
+  /** Анимация */
+  animated: { type: Boolean, default: false },
+  /** Полосатый */
+  striped: { type: Boolean, default: false },
+});
+
+const percentage = computed(() => {
+  const range = props.max - props.min;
+  return Math.min(100, Math.max(0, ((props.value - props.min) / range) * 100));
+});
+
+const displayValue = computed(() => `${Math.round(percentage.value)}%`);
+
+const trackClasses = computed(() => [
+  "w-full bg-slate-200 rounded-full overflow-hidden",
+  useSize(props.size, 'progress'),
+]);
+
+const barClasses = computed(() => [
+  "h-full rounded-full transition-all duration-300 flex items-center justify-end",
+  useVariantProgress(props.color),
+  props.striped && "dx-bg-stripes",
+  props.animated && props.striped && useAnimation('stripes', 'progress'),
+]);
+</script>
+

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

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

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

@@ -0,0 +1,255 @@
+import DXQuote from './DXQuote.vue';
+import DXText from '../DXText/DXText.vue';
+
+export default {
+  title: 'Atoms/DXQuote',
+  component: DXQuote,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXQuote
+
+Компонент для отображения inline-цитат в текстовом контенте.
+
+## Назначение
+
+DXQuote предоставляет семантический способ отображения inline-цитат с поддержкой
+различных стилей кавычек и визуального выделения. Используется для цитирования
+в статьях, блогах и комментариях.
+
+## Архитектура
+
+### Использует
+- Семантический HTML тег \`<q>\` - для inline-цитат
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- Статьи и блоги
+- Комментарии и обсуждения
+- Вместе с \`DXText\` и \`DXBlockquote\`
+
+## Внутренняя логика
+
+### Варианты
+- **default**: Обычная цитата без выделения
+- **highlighted**: Цитата с фоном для выделения
+
+### Стили кавычек
+- **default**: Стандартные кавычки браузера
+- **french**: Французские кавычки « »
+- **german**: Немецкие кавычки „ "
+
+## Особенности
+
+### Семантика
+Использует семантический тег \`<q>\` для правильной разметки цитат.
+
+### Атрибут cite
+Поддерживает атрибут \`cite\` для указания источника цитаты.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    cite: {
+      control: 'text',
+      description: 'URL источника цитаты.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'null' },
+        category: 'Content',
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'highlighted'],
+      description: 'Вариант стилизации: default (обычная) | highlighted (с выделением).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+        category: 'Appearance',
+      },
+    },
+    quoteStyle: {
+      control: 'select',
+      options: ['default', 'french', 'german'],
+      description: 'Стиль кавычек: default | french (« ») | german („ ").',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+        category: 'Appearance',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    variant: 'default',
+    quoteStyle: 'default',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовая inline-цитата без выделения. Использует стандартные кавычки браузера.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXText>
+        Как говорил Эйнштейн:
+        <DXQuote v-bind="args">Воображение важнее знания</DXQuote>
+        , и это действительно так.
+      </DXText>
+    `,
+  }),
+};
+
+export const WithCite = {
+  args: {
+    cite: 'https://example.com/einstein',
+    variant: 'default',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Цитата с указанием источника через атрибут cite.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXText>
+        Как говорил Эйнштейн:
+        <DXQuote v-bind="args">Воображение важнее знания</DXQuote>
+        , и это действительно так.
+      </DXText>
+    `,
+  }),
+};
+
+export const Highlighted = {
+  args: {
+    variant: 'highlighted',
+    quoteStyle: 'default',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Цитата с выделением. Имеет фон для визуального выделения.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXText>
+        В своей книге автор отмечает, что
+        <DXQuote v-bind="args">успех приходит к тем, кто действует</DXQuote>
+        , а не к тем, кто только мечтает.
+      </DXText>
+    `,
+  }),
+};
+
+export const FrenchQuotes = {
+  args: {
+    quoteStyle: 'french',
+    variant: 'default',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Цитата с французскими кавычками « ». Используется во французской типографике.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXText>
+        <DXQuote v-bind="args">Французский стиль кавычек</DXQuote>
+        используется во французской типографике.
+      </DXText>
+    `,
+  }),
+};
+
+export const GermanQuotes = {
+  args: {
+    quoteStyle: 'german',
+    variant: 'default',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Цитата с немецкими кавычками „ ". Используется в немецкой типографике.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXText>
+        <DXQuote v-bind="args">Немецкий стиль кавычек</DXQuote>
+        используется в немецкой типографике.
+      </DXText>
+    `,
+  }),
+};
+
+export const AllStyles = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Демонстрация всех стилей кавычек и вариантов.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXQuote, DXText },
+    setup() {
+      return {};
+    },
+    template: `
+      <div class="space-y-4">
+        <DXText>
+          Default: <DXQuote>Обычная цитата</DXQuote>
+        </DXText>
+        <DXText>
+          Highlighted: <DXQuote variant="highlighted">Выделенная цитата</DXQuote>
+        </DXText>
+        <DXText>
+          French: <DXQuote quote-style="french">Французские кавычки</DXQuote>
+        </DXText>
+        <DXText>
+          German: <DXQuote quote-style="german">Немецкие кавычки</DXQuote>
+        </DXText>
+        <DXText>
+          Highlighted + French: <DXQuote variant="highlighted" quote-style="french">Комбинация</DXQuote>
+        </DXText>
+      </div>
+    `,
+  }),
+};
+