dxd-style-code 0.1.7 → 0.1.9

package/src/components/atoms/DXLink/DXLink.vue

@@ -0,0 +1,229 @@
+<template>
+  <component
+    :is="componentTag"
+    :href="componentTag === 'a' ? href : undefined"
+    :to="componentTag === 'router-link' ? to : undefined"
+    :target="target"
+    :rel="computedRel"
+    :aria-label="computedAriaLabel"
+    :class="allClasses"
+    :disabled="disabled"
+    data-component="DXLink"
+    :data-variant="variant"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-external="isExternal"
+    @click="handleClick"
+  >
+    <slot />
+    <DXIcon
+      v-if="showExternalIcon && isExternal && !disabled"
+      :icon="ArrowTopRightOnSquareIcon"
+      :size="iconSize"
+      class="ml-0.5"
+      aria-hidden="true"
+    />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantButton } from "@/composables/useVariant";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXIcon from "../DXIcon/DXIcon.vue";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /** URL для обычной ссылки */
+  href: { type: String, default: null },
+  /** Путь для Vue Router */
+  to: { type: [String, Object], default: null },
+  /** Target атрибут (например, "_blank") */
+  target: { type: String, default: null },
+  /** Rel атрибут (например, "noopener noreferrer") */
+  rel: { type: String, default: null },
+  /** Вариант стилизации: primary | secondary | ghost | link */
+  variant: { type: String, default: "link" },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Кастомный aria-label */
+  ariaLabel: { type: String, default: null },
+  /** Показывать иконку для внешних ссылок */
+  showExternalIcon: { type: Boolean, default: true },
+});
+
+const BASE_CLASSES =
+  "inline-flex items-center gap-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+/**
+ * Определяет тег компонента на основе props
+ * 
+ * @description
+ * Динамически выбирает тег компонента:
+ * - Если указан `to` prop → использует `router-link` (Vue Router)
+ * - Если указан `href` prop → использует обычный `<a>` тег
+ * - Если ничего не указано → использует `<span>` (fallback для disabled состояния)
+ * 
+ * @returns {string} Название компонента для динамического рендеринга
+ */
+const componentTag = computed(() => {
+  if (props.to) return "router-link";
+  if (props.href) return "a";
+  return "span"; // Fallback если нет href и to
+});
+
+/**
+ * Определяет, является ли ссылка внешней
+ * 
+ * @description
+ * Автоматически определяет внешние ссылки по префиксам:
+ * - `http://` - внешняя ссылка
+ * - `https://` - внешняя ссылка
+ * - `//` - protocol-relative внешняя ссылка
+ * 
+ * Используется для:
+ * - Автоматического добавления rel="noopener noreferrer" для безопасности
+ * - Показа иконки внешней ссылки
+ * 
+ * @returns {boolean} true если ссылка внешняя, false если внутренняя или нет href
+ */
+const isExternal = computed(() => {
+  if (!props.href) return false;
+  return (
+    props.href.startsWith("http://") ||
+    props.href.startsWith("https://") ||
+    props.href.startsWith("//")
+  );
+});
+
+/**
+ * Вычисляет rel атрибут с учетом безопасности
+ * 
+ * @description
+ * Автоматически добавляет rel="noopener noreferrer" для внешних ссылок с target="_blank"
+ * для защиты от tabnabbing атак (когда новая вкладка может получить доступ к window.opener).
+ * 
+ * Приоритет:
+ * 1. Если rel указан явно через prop → использует его
+ * 2. Если внешняя ссылка с target="_blank" → автоматически добавляет "noopener noreferrer"
+ * 3. Иначе → возвращает null
+ * 
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header|MDN: Referer header}
+ * @returns {string|null} Значение rel атрибута или null
+ */
+const computedRel = computed(() => {
+  // Если rel указан явно, используем его
+  if (props.rel) return props.rel;
+  
+  // Если внешняя ссылка с target="_blank", добавляем noopener noreferrer для безопасности
+  // Это защищает от tabnabbing атак
+  if (isExternal.value && props.target === "_blank") {
+    return "noopener noreferrer";
+  }
+  
+  return null;
+});
+
+/**
+ * Вычисляет aria-label с учетом внешних ссылок
+ * 
+ * @description
+ * Управляет aria-label для улучшения доступности:
+ * - Если ariaLabel указан явно → использует его
+ * - Для внешних ссылок можно было бы добавить информацию о том, что ссылка внешняя,
+ *   но для простоты возвращаем null, так как screen readers могут использовать
+ *   содержимое ссылки и визуальную иконку
+ * 
+ * @returns {string|null} Значение aria-label или null
+ */
+const computedAriaLabel = computed(() => {
+  // Если aria-label указан явно, используем его
+  if (props.ariaLabel) return props.ariaLabel;
+  
+  // Для внешних ссылок добавляем информацию о том, что ссылка внешняя
+  if (isExternal.value && props.showExternalIcon) {
+    // Получаем текст из слота для базового aria-label
+    // В реальности это будет работать через provide/inject или другой механизм
+    // Для простоты возвращаем null, так как screen readers могут использовать содержимое
+    return null;
+  }
+  
+  return null;
+});
+
+/**
+ * Классы размера текста
+ */
+const textSizeClass = computed(() => {
+  return useSize(props.size, "text");
+});
+
+/**
+ * Классы варианта стилизации
+ */
+const variantClass = computed(() => {
+  if (props.variant === "link") {
+    // Кастомные классы для варианта link
+    return "text-blue-600 hover:text-blue-700 underline-offset-2 hover:underline";
+  }
+  // Для остальных вариантов используем useVariantButton
+  return useVariantButton(props.variant);
+});
+
+/**
+ * Размер иконки внешней ссылки
+ * 
+ * @description
+ * Вычисляет размер иконки внешней ссылки на основе размера текста.
+ * Иконка всегда немного меньше текста для визуального баланса.
+ * 
+ * @returns {string} Размер иконки: xs | sm | md
+ */
+const iconSize = computed(() => {
+  // Иконка немного меньше текста для визуального баланса
+  const sizeMap = {
+    xs: "xs",
+    sm: "xs",
+    md: "sm",
+    lg: "sm",
+    xl: "md",
+  };
+  return sizeMap[props.size] || "sm";
+});
+
+/**
+ * Все классы для ссылки
+ */
+const allClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    variantClass.value,
+    textSizeClass.value,
+    {
+      "opacity-60 cursor-not-allowed pointer-events-none": props.disabled,
+      "cursor-pointer": !props.disabled,
+    }
+  )
+);
+
+/**
+ * Обработчик клика для disabled состояния
+ * 
+ * @description
+ * Блокирует клик для отключенных ссылок:
+ * - preventDefault() - предотвращает переход по ссылке
+ * - stopPropagation() - останавливает всплытие события
+ * 
+ * @param {Event} event - Событие клика
+ */
+const handleClick = (event) => {
+  if (props.disabled) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+};
+</script>
+

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

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

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

@@ -0,0 +1,280 @@
+import DXLoader from './DXLoader.vue';
+
+export default {
+  title: 'Atoms/DXLoader',
+  component: DXLoader,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Размер лоадера',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'warning', 'danger', 'info', 'slate'],
+      description: 'Вариант цвета',
+    },
+    text: {
+      control: 'text',
+      description: 'Текст лоадера. Если не указан и нет слота, текст не отображается',
+    },
+    showText: {
+      control: 'boolean',
+      description: 'Показывать текст. Если false, текст не отображается. Если true - всегда показывать',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 'md',
+    variant: 'default',
+  },
+  render: (args) => ({
+    components: { DXLoader },
+    setup() { return { args }; },
+    template: '<DXLoader v-bind="args" />',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXLoader },
+    template: `
+      <div class="flex flex-col items-start gap-6">
+        <div class="flex items-center gap-6">
+          <DXLoader size="xs" />
+          <span class="text-sm text-slate-600">xs (8×8px)</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <DXLoader size="sm" />
+          <span class="text-sm text-slate-600">sm (12×12px)</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <DXLoader size="md" />
+          <span class="text-sm text-slate-600">md (16×16px)</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <DXLoader size="lg" />
+          <span class="text-sm text-slate-600">lg (20×20px)</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <DXLoader size="xl" />
+          <span class="text-sm text-slate-600">xl (24×24px)</span>
+        </div>
+        <div class="text-sm text-slate-500 mt-2">
+          Все размеры: xs | sm | md | lg | xl
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Variants = {
+  render: () => ({
+    components: { DXLoader },
+    template: `
+      <div class="flex flex-col items-start gap-6">
+        <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">
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="default" />
+              <span class="text-xs text-slate-600">Default</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="primary" />
+              <span class="text-xs text-slate-600">Primary</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="slate" />
+              <span class="text-xs text-slate-600">Slate</span>
+            </div>
+          </div>
+        </div>
+        <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">
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="success" />
+              <span class="text-xs text-slate-600">Success</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="warning" />
+              <span class="text-xs text-slate-600">Warning</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="danger" />
+              <span class="text-xs text-slate-600">Danger</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <DXLoader variant="info" />
+              <span class="text-xs text-slate-600">Info</span>
+            </div>
+          </div>
+        </div>
+        <div class="text-sm text-slate-500">
+          Все варианты: default | primary | success | warning | danger | info | slate
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const SizesAndVariants = {
+  render: () => ({
+    components: { DXLoader },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Размеры с вариантом default</h3>
+          <div class="flex items-center gap-6">
+            <DXLoader size="xs" variant="default" />
+            <DXLoader size="sm" variant="default" />
+            <DXLoader size="md" variant="default" />
+            <DXLoader size="lg" variant="default" />
+            <DXLoader size="xl" variant="default" />
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Размеры с вариантом success</h3>
+          <div class="flex items-center gap-6">
+            <DXLoader size="xs" variant="success" />
+            <DXLoader size="sm" variant="success" />
+            <DXLoader size="md" variant="success" />
+            <DXLoader size="lg" variant="success" />
+            <DXLoader size="xl" variant="success" />
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Размеры с вариантом danger</h3>
+          <div class="flex items-center gap-6">
+            <DXLoader size="xs" variant="danger" />
+            <DXLoader size="sm" variant="danger" />
+            <DXLoader size="md" variant="danger" />
+            <DXLoader size="lg" variant="danger" />
+            <DXLoader size="xl" variant="danger" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithText = {
+  render: () => ({
+    components: { DXLoader },
+    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>
+          <div class="flex items-center gap-2">
+            <DXLoader size="sm" variant="default" />
+          </div>
+          <div class="flex items-center gap-2">
+            <DXLoader size="md" variant="success" />
+          </div>
+          <div class="flex items-center gap-2">
+            <DXLoader size="lg" variant="info" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">С кастомным текстом</h3>
+          <div class="flex items-center gap-2">
+            <DXLoader size="sm" variant="default">Загрузка...</DXLoader>
+          </div>
+          <div class="flex items-center gap-2">
+            <DXLoader size="md" variant="success">Обработка...</DXLoader>
+          </div>
+          <div class="flex items-center gap-2">
+            <DXLoader size="lg" variant="warning">Пожалуйста, подождите...</DXLoader>
+          </div>
+          <div class="flex items-center gap-2">
+            <DXLoader size="md" variant="danger">Ошибка загрузки...</DXLoader>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithoutText = {
+  render: () => ({
+    components: { DXLoader },
+    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>
+          <div class="flex items-center gap-6">
+            <DXLoader size="xs" :show-text="false" />
+            <DXLoader size="sm" :show-text="false" />
+            <DXLoader size="md" :show-text="false" />
+            <DXLoader size="lg" :show-text="false" />
+            <DXLoader size="xl" :show-text="false" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Разные варианты без текста</h3>
+          <div class="flex items-center gap-6">
+            <DXLoader size="md" variant="default" :show-text="false" />
+            <DXLoader size="md" variant="primary" :show-text="false" />
+            <DXLoader size="md" variant="success" :show-text="false" />
+            <DXLoader size="md" variant="warning" :show-text="false" />
+            <DXLoader size="md" variant="danger" :show-text="false" />
+            <DXLoader size="md" variant="info" :show-text="false" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Использование без текста</h3>
+          <div class="border border-slate-200 rounded-lg p-6">
+            <div class="flex flex-col items-center justify-center gap-4 py-8">
+              <DXLoader size="lg" variant="primary" :show-text="false" />
+              <p class="text-sm text-slate-600">Загрузка данных...</p>
+            </div>
+          </div>
+        </div>
+        <div class="text-sm text-slate-500">
+          Используйте <code class="text-xs bg-slate-100 px-1 py-0.5 rounded">:show-text="false"</code> или не передавайте prop <code class="text-xs bg-slate-100 px-1 py-0.5 rounded">text</code> и слот для отображения только спиннера
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const UseCases = {
+  render: () => ({
+    components: { DXLoader },
+    template: `
+      <div class="flex flex-col gap-8">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">В карточке</h3>
+          <div class="border border-slate-200 rounded-lg p-6">
+            <div class="flex flex-col items-center justify-center gap-4 py-8">
+              <DXLoader size="lg" variant="primary" />
+              <p class="text-sm text-slate-600">Загрузка данных...</p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">В списке</h3>
+          <div class="border border-slate-200 rounded-lg p-4">
+            <div class="flex items-center gap-3">
+              <DXLoader size="sm" variant="info" />
+              <span class="text-sm text-slate-700">Синхронизация с сервером</span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-700 mb-4">Инлайн загрузка</h3>
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-slate-700">Статус:</span>
+            <DXLoader size="xs" variant="success" :show-text="false" />
+            <span class="text-sm text-emerald-700">Активен</span>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXLoader/DXLoader.vue

@@ -0,0 +1,78 @@
+<template>
+  <div 
+    :class="loaderClasses" 
+    data-component="DXLoader"
+    :data-size="size"
+    :data-variant="variant"
+  >
+    <span :class="spinnerClasses"></span>
+    <slot v-if="hasText">
+      <template v-if="text">{{ text }}</template>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantLoader } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Размер: xs | sm | md | lg | xl */
+  size: {
+    type: String,
+    default: "md",
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+  },
+  /** Вариант цвета: default | primary | success | warning | danger | info | slate */
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'slate'].includes(value)
+  },
+  /** Текст лоадера. Если не указан и нет слота, текст не отображается */
+  text: {
+    type: String,
+    default: "",
+  },
+  /** Показывать текст. Если false, текст не отображается. Если true - всегда показывать */
+  showText: {
+    type: Boolean,
+    default: undefined,
+  },
+});
+
+const slots = useSlots();
+const hasText = computed(() => {
+  // Если showText явно указан, используем его
+  if (props.showText !== undefined) {
+    return props.showText;
+  }
+  // Если есть слот, показываем его
+  if (slots.default) {
+    return true;
+  }
+  // Если есть текст в prop, показываем его
+  return !!(props.text && props.text.trim().length > 0);
+});
+
+const loaderConfig = computed(() => useVariantLoader(props.variant));
+
+const BASE_CLASSES = "flex items-center justify-center";
+const BASE_SPINNER_CLASSES = "border-2 rounded-full animate-spin";
+
+const loaderClasses = computed(() => [
+  BASE_CLASSES,
+  hasText.value ? 'gap-2' : '',
+  hasText.value ? useSize(props.size, 'text') : '',
+  hasText.value ? loaderConfig.value.text : ''
+].filter(Boolean));
+
+const spinnerClasses = computed(() => [
+  BASE_SPINNER_CLASSES,
+  useSize(props.size, 'loader'),
+  loaderConfig.value.border,
+  loaderConfig.value.borderTop
+]);
+</script>
+

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

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