dxd-style-code 0.1.10 → 0.1.12

package/src/components/atoms/DXImage/DXImage.vue

@@ -0,0 +1,294 @@
+<template>
+  <div
+    :class="containerClasses"
+    data-component="DXImage"
+    :data-size="size"
+    :data-object-fit="objectFit"
+    :data-rounded="rounded"
+    :style="containerStyle"
+  >
+    <!-- Lazy loading wrapper -->
+    <DXObserver
+      v-if="lazy"
+      :threshold="0.1"
+      :once="true"
+      @intersect="handleIntersect"
+    >
+      <template v-if="isVisible">
+        <img
+          v-if="currentSrc && !imgError"
+          :src="currentSrc"
+          :alt="alt"
+          :srcset="srcset"
+          :sizes="sizes"
+          :class="imageClasses"
+          :style="imageStyle"
+          @load="handleLoad"
+          @error="handleError"
+        />
+        <slot v-else-if="$slots.fallback" name="fallback" />
+        <div v-else-if="fallback && !fallbackError" class="w-full h-full">
+          <img
+            :src="fallback"
+            :alt="alt"
+            :class="imageClasses"
+            :style="imageStyle"
+            @error="fallbackError = true"
+          />
+        </div>
+        <div v-else :class="defaultFallbackClasses">
+          <DXIcon :icon="PhotoIcon" :size="iconSize" class="text-slate-400" />
+        </div>
+      </template>
+      <div v-else-if="showSkeleton" :class="skeletonClasses">
+        <slot name="placeholder">
+          <div class="w-full h-full bg-slate-200 animate-pulse" />
+        </slot>
+      </div>
+    </DXObserver>
+
+    <!-- Non-lazy loading -->
+    <template v-else>
+      <img
+        v-if="currentSrc && !imgError"
+        :src="currentSrc"
+        :alt="alt"
+        :srcset="srcset"
+        :sizes="sizes"
+        :class="imageClasses"
+        :style="imageStyle"
+        @load="handleLoad"
+        @error="handleError"
+      />
+      <slot v-else-if="$slots.fallback" name="fallback" />
+      <div v-else-if="fallback && !fallbackError" class="w-full h-full">
+        <img
+          :src="fallback"
+          :alt="alt"
+          :class="imageClasses"
+          :style="imageStyle"
+          @error="fallbackError = true"
+        />
+      </div>
+      <div v-else :class="defaultFallbackClasses">
+        <DXIcon :icon="PhotoIcon" :size="iconSize" class="text-slate-400" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { PhotoIcon } from "@heroicons/vue/24/outline";
+import { useSize } from "../../../composables/useSize";
+import { useClassComposition } from "../../../composables/useClassComposition";
+import DXObserver from "../../utilities/DXObserver/DXObserver.vue";
+import DXIcon from "../DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** URL изображения */
+  src: { type: String, required: true },
+  /** Alt текст для доступности */
+  alt: { type: String, default: "" },
+  /** Ширина изображения (кастомная) */
+  width: { type: [String, Number], default: null },
+  /** Высота изображения (кастомная) */
+  height: { type: [String, Number], default: null },
+  /** Предопределенный размер: xs | sm | md | lg | xl */
+  size: { type: String, default: null },
+  /** object-fit: cover | contain | fill | none | scale-down */
+  objectFit: { type: String, default: "cover", validator: (v) => ["cover", "contain", "fill", "none", "scale-down"].includes(v) },
+  /** Lazy loading через DXObserver */
+  lazy: { type: Boolean, default: false },
+  /** URL fallback изображения при ошибке */
+  fallback: { type: String, default: null },
+  /** URL placeholder изображения */
+  placeholder: { type: String, default: null },
+  /** Показывать skeleton при загрузке */
+  showSkeleton: { type: Boolean, default: true },
+  /** Скругление: none | sm | md | lg | xl | full */
+  rounded: { type: String, default: "none", validator: (v) => ["none", "sm", "md", "lg", "xl", "full"].includes(v) },
+  /** Responsive изображения (srcset атрибут) */
+  srcset: { type: String, default: null },
+  /** Sizes атрибут для responsive */
+  sizes: { type: String, default: null },
+});
+
+const emit = defineEmits(["load", "error"]);
+
+/**
+ * Флаг ошибки загрузки основного изображения
+ */
+const imgError = ref(false);
+
+/**
+ * Флаг ошибки загрузки fallback изображения
+ */
+const fallbackError = ref(false);
+
+/**
+ * Флаг видимости для lazy loading
+ */
+const isVisible = ref(false);
+
+/**
+ * Текущий источник изображения
+ * 
+ * @description
+ * Определяет какой источник использовать:
+ * - Если есть placeholder и изображение еще не загружено (lazy режим) → placeholder
+ * - Иначе → основной src
+ */
+const currentSrc = computed(() => {
+  if (props.placeholder && props.lazy && !isVisible.value) {
+    return props.placeholder;
+  }
+  return props.src;
+});
+
+/**
+ * Стили для контейнера
+ * 
+ * @description
+ * Вычисляет inline стили для контейнера на основе width и height props.
+ * Если указан size, размеры берутся из useSize.
+ */
+const containerStyle = computed(() => {
+  const style = {};
+  
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+  }
+  
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+  }
+  
+  return Object.keys(style).length > 0 ? style : null;
+});
+
+/**
+ * Стили для изображения
+ */
+const imageStyle = computed(() => {
+  return null;
+});
+
+/**
+ * Классы для контейнера
+ */
+const containerClasses = computed(() =>
+  useClassComposition(
+    "relative inline-block overflow-hidden",
+    props.size ? useSize(props.size, 'image') : null,
+    {
+      "rounded-sm": props.rounded === "sm",
+      "rounded-md": props.rounded === "md",
+      "rounded-lg": props.rounded === "lg",
+      "rounded-xl": props.rounded === "xl",
+      "rounded-full": props.rounded === "full",
+    }
+  )
+);
+
+/**
+ * Классы для изображения
+ */
+const imageClasses = computed(() => {
+  const objectFitClasses = {
+    cover: "object-cover",
+    contain: "object-contain",
+    fill: "object-fill",
+    none: "object-none",
+    "scale-down": "object-scale-down",
+  };
+  
+  return useClassComposition(
+    "w-full h-full",
+    objectFitClasses[props.objectFit] || objectFitClasses.cover
+  );
+});
+
+/**
+ * Классы для skeleton
+ */
+const skeletonClasses = computed(() =>
+  useClassComposition("w-full h-full")
+);
+
+/**
+ * Классы для дефолтного fallback
+ */
+const defaultFallbackClasses = computed(() =>
+  useClassComposition(
+    "w-full h-full bg-slate-100 flex items-center justify-center"
+  )
+);
+
+/**
+ * Размер иконки для fallback
+ */
+const iconSize = computed(() => {
+  if (props.size) {
+    const sizeMap = {
+      xs: "sm",
+      sm: "md",
+      md: "lg",
+      lg: "xl",
+      xl: "xl",
+    };
+    return sizeMap[props.size] || "lg";
+  }
+  return "lg";
+});
+
+/**
+ * Обработчик успешной загрузки изображения
+ */
+function handleLoad() {
+  emit("load");
+}
+
+/**
+ * Обработчик ошибки загрузки изображения
+ */
+function handleError() {
+  imgError.value = true;
+  emit("error");
+}
+
+/**
+ * Обработчик пересечения для lazy loading
+ */
+function handleIntersect(intersecting) {
+  if (intersecting) {
+    isVisible.value = true;
+  }
+}
+
+// Инициализация для non-lazy режима
+if (!props.lazy) {
+  isVisible.value = true;
+}
+
+/**
+ * Сбрасывает ошибки при изменении src
+ */
+watch(() => props.src, () => {
+  imgError.value = false;
+  fallbackError.value = false;
+  if (!props.lazy) {
+    isVisible.value = true;
+  }
+});
+
+/**
+ * Сбрасывает видимость при изменении lazy
+ */
+watch(() => props.lazy, (newVal) => {
+  if (!newVal) {
+    isVisible.value = true;
+  }
+});
+</script>
+

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

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

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

@@ -12,7 +12,92 @@ import {
 export default {
   title: 'Atoms/DXInputAddon',
   component: DXInputAddon,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXInputAddon
+
+Компонент аддона для групп полей ввода, используемый для добавления префиксов и суффиксов к полям.
+
+## Назначение
+
+DXInputAddon предоставляет способ добавления дополнительных элементов (текста, иконок) слева или справа
+от полей ввода в составе DXInputGroup. Компонент автоматически синхронизирует размер, состояние disabled/error
+и правильно применяет border-radius для визуального единства группы.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров (синхронизируется с DXInputGroup)
+- \`provide/inject\` - для интеграции с DXInputGroup
+
+### Используется в
+- \`DXInputGroup\` - группы полей с аддонами
+- Префиксы для URL (https://)
+- Суффиксы для валют (USD, EUR)
+- Иконки в группах полей
+- Любые места, требующие дополнительных элементов рядом с полями
+
+## Внутренняя логика
+
+### Интеграция с DXInputGroup
+При использовании внутри \`DXInputGroup\`:
+- Аддон автоматически регистрируется в группе через \`provide/inject\`
+- Размер синхронизируется с размером группы
+- Состояние \`disabled\` наследуется от группы
+- Состояние \`error\` синхронизируется с группой (красная рамка)
+- Border-radius адаптируется в зависимости от позиции:
+  - Первый аддон → \`rounded-l-xl\`
+  - Последний аддон → \`rounded-r-xl\`
+  - Средний аддон → \`rounded-none\`
+
+### Содержимое
+Аддон может содержать:
+- Текст через default slot (например, "https://", "USD")
+- Иконку через \`icon\` prop (Heroicon компонент)
+- Комбинацию текста и иконки
+
+### Визуальное оформление
+- Фон: \`bg-slate-50\` (светло-серый)
+- Текст: \`text-slate-600\`
+- Рамка: синхронизируется с группой
+- Padding: адаптируется к размеру группы
+
+## Особенности
+
+### Позиционирование
+- Аддоны размещаются слева или справа от основного поля
+- Может быть несколько аддонов (например, $ слева и USD справа)
+
+### Размеры
+Размер автоматически синхронизируется с размером DXInputGroup:
+- **sm** - маленький размер
+- **md** - средний размер (по умолчанию)
+- **lg** - крупный размер
+
+### Состояния
+- **disabled** - наследуется от группы, аддон становится полупрозрачным
+- **error** - наследуется от группы, рамка становится красной
+
+### Иконки
+- Иконка отображается слева от текста (если есть)
+- Размер иконки: \`w-4 h-4\`
+- Можно использовать только иконку без текста
+
+### Использование
+Аддоны всегда используются внутри DXInputGroup:
+\`\`\`
+<DXInputGroup label="Website">
+  <DXInputAddon>https://</DXInputAddon>
+  <DXInput v-model="url" placeholder="example.com" />
+</DXInputGroup>
+\`\`\`
+        `,
+      },
+    },
+  },
   argTypes: {
     icon: {
       control: false,

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

@@ -0,0 +1,101 @@
+import DXLabel from './DXLabel.vue';
+
+export default {
+  title: 'Atoms/DXLabel',
+  component: DXLabel,
+  tags: ['autodocs', 'category:typography'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXLabel
+
+Компонент лейбла для форм с поддержкой различных размеров, весов и цветов.
+
+## Назначение
+
+DXLabel предоставляет стандартизированный лейбл для форм с настраиваемыми параметрами типографики.
+Компонент поддерживает различные размеры, веса шрифта, цвета и автоматическое отображение индикатора
+обязательного поля.
+
+## Архитектура
+
+### Использует
+- \`useVariantText\` composable - для цветовых вариантов
+
+### Используется в
+- Формы с полями ввода
+- Связанные с input элементами лейблы
+- Любые места, требующие текстовых меток
+
+## Внутренняя логика
+
+### Размеры
+Поддерживает 4 размера:
+- **xs** - очень маленький текст
+- **sm** - маленький текст (по умолчанию)
+- **md** - средний текст
+- **lg** - большой текст
+
+### Веса шрифта
+Поддерживает 3 веса:
+- **normal** - обычный вес
+- **medium** - средний вес (по умолчанию)
+- **semibold** - полужирный
+
+### Цвета
+Поддерживает 3 цветовых варианта:
+- **default** - цвет по умолчанию
+- **muted** - приглушенный цвет
+- **primary** - основной цвет
+
+### Обязательное поле
+При \`required={true}\` автоматически добавляется красная звездочка (*) справа от текста.
+
+## Особенности
+
+### Связь с input
+Поддерживает \`htmlFor\` prop для связи с input элементом через \`id\`:
+- Улучшает доступность
+- Позволяет кликать на лейбл для фокуса на input
+
+### Семантика
+Использует нативный HTML \`<label>\` тег для правильной семантики и доступности.
+        `,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {},
+  render: (args) => ({
+    components: { DXLabel },
+    setup() { return { args }; },
+    template: '<DXLabel v-bind="args">Email адрес</DXLabel>',
+  }),
+};
+
+export const Required = {
+  args: { required: true },
+  render: (args) => ({
+    components: { DXLabel },
+    setup() { return { args }; },
+    template: '<DXLabel v-bind="args">Обязательное поле</DXLabel>',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXLabel },
+    template: `
+      <div class="space-y-2">
+        <DXLabel size="xs">Extra Small Label</DXLabel>
+        <DXLabel size="sm">Small Label (default)</DXLabel>
+        <DXLabel size="md">Medium Label</DXLabel>
+        <DXLabel size="lg">Large Label</DXLabel>
+      </div>
+    `,
+  }),
+};
+

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

@@ -5,7 +5,7 @@ import { HomeIcon } from '@heroicons/vue/24/outline';
 export default {
   title: 'Atoms/DXLink',
   component: DXLink,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
   parameters: {
     docs: {
       description: {
@@ -51,10 +51,13 @@ DXLink - атомарный компонент для создания ссыл
 - \`rel="noopener noreferrer"\` - для защиты от tabnabbing атак
 - Иконка внешней ссылки (если \`showExternalIcon={true}\`)
 
-### Disabled состояние
-- Блокирует клик через \`preventDefault\` и \`stopPropagation\`
-- Применяет визуальные стили (opacity, cursor)
-- Отключает pointer-events
+### Варианты стилизации
+- \`link\` (по умолчанию) - обычные текстовые ссылки без padding и border-radius
+- \`primary\`, \`secondary\`, \`ghost\`, \`outline\` - варианты с небольшими отступами (padding) и скруглениями (rounded-lg)
+
+### Состояния
+- **disabled**: Полностью отключает ссылку - блокирует клик, применяет визуальные стили (opacity, cursor-not-allowed), отключает pointer-events
+- **inactive**: Визуально приглушенная ссылка, но остается кликабельной. Используется для текущих страниц, неактивных элементов навигации
 
 ## Особенности
 
@@ -72,11 +75,23 @@ DXLink - атомарный компонент для создания ссыл
 <DXLink href="/about">О нас</DXLink>
 \`\`\`
 
+## Особенности
+
+### Padding и Border-radius
+Варианты (кроме \`link\`) автоматически получают:
+- Небольшие отступы в зависимости от размера (xs: px-2 py-0.5, sm: px-2.5 py-1, md: px-3 py-1.5, lg: px-3.5 py-2, xl: px-4 py-2.5)
+- Скругления \`rounded-lg\`
+
+### Разница между disabled и inactive
+- **disabled**: Ссылка полностью неактивна, не кликабельна, визуально затемнена
+- **inactive**: Ссылка визуально приглушена, но остается кликабельной. Подходит для текущих страниц в навигации
+
 ## Ограничения
 
 - Не используйте одновременно \`href\` и \`to\` - приоритет у \`to\`
 - Для Vue Router требуется установленный \`vue-router\`
 - Disabled ссылки не кликабельны, но остаются в DOM
+- Inactive ссылки кликабельны, но визуально приглушены
         `,
       },
     },
@@ -84,8 +99,8 @@ DXLink - атомарный компонент для создания ссыл
   argTypes: {
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost', 'link'],
-      description: 'Вариант стилизации ссылки. Определяет цвет и стиль.',
+      options: ['link', 'primary', 'secondary', 'ghost', 'outline'],
+      description: 'Вариант стилизации ссылки. "link" - обычная ссылка без padding, остальные - с padding и border-radius.',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'link' },
@@ -104,7 +119,16 @@ DXLink - атомарный компонент для создания ссыл
     },
     disabled: {
       control: 'boolean',
-      description: 'Отключенное состояние. Блокирует клик и применяет визуальные стили.',
+      description: 'Отключенное состояние. Блокирует клик и применяет визуальные стили. Ссылка не кликабельна.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    inactive: {
+      control: 'boolean',
+      description: 'Неактивное состояние. Визуально приглушенная ссылка, но остается кликабельной. Используется для текущих страниц.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
@@ -192,7 +216,7 @@ export const Variants = {
   parameters: {
     docs: {
       description: {
-        story: 'Все доступные варианты стилизации ссылок. Вариант "link" - стандартный для текстовых ссылок, остальные варианты делают ссылку похожей на кнопку.',
+        story: 'Все доступные варианты стилизации ссылок. Вариант "link" - стандартный для текстовых ссылок без padding и border-radius. Остальные варианты имеют небольшие отступы и скругления, делая ссылку похожей на кнопку.',
       },
     },
   },
@@ -207,10 +231,14 @@ export const Variants = {
             <DXLink href="/primary" variant="primary">Primary</DXLink>
             <DXLink href="/secondary" variant="secondary">Secondary</DXLink>
             <DXLink href="/ghost" variant="ghost">Ghost</DXLink>
+            <DXLink href="/outline" variant="outline">Outline</DXLink>
           </div>
         </div>
         <div class="text-sm text-slate-600">
-          Все варианты: link | primary | secondary | ghost
+          Все варианты: link | primary | secondary | ghost | outline
+        </div>
+        <div class="text-xs text-slate-500">
+          Варианты (кроме link) имеют padding и border-radius
         </div>
       </div>
     `,
@@ -357,6 +385,43 @@ export const Disabled = {
   }),
 };
 
+export const Inactive = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Неактивное состояние ссылки. Визуально приглушенная ссылка (opacity, приглушенные цвета), но остается кликабельной. Используется для текущих страниц в навигации, breadcrumb и других случаях, когда нужно показать неактивный элемент, но сохранить возможность клика.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXLink },
+    template: `
+      <div class="flex flex-col items-start gap-4">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Неактивные ссылки</h3>
+          <div class="flex items-center gap-4 flex-wrap">
+            <DXLink href="/current" inactive variant="link">
+              Текущая страница (link)
+            </DXLink>
+            <DXLink href="/current" inactive variant="primary">
+              Текущая страница (primary)
+            </DXLink>
+            <DXLink href="/current" inactive variant="ghost">
+              Текущая страница (ghost)
+            </DXLink>
+          </div>
+          <div class="text-sm text-slate-600">
+            Неактивные ссылки визуально приглушены, но остаются кликабельными
+          </div>
+          <div class="text-xs text-slate-500">
+            Используется для текущих страниц в breadcrumb и навигации
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
 export const WithIcons = {
   parameters: {
     docs: {