dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,322 @@
+import { ref } from 'vue';
+import DXRating from './DXRating.vue';
+import DXFormControl from '../DXFormControl/DXFormControl.vue';
+
+export default {
+  title: 'Molecules/DXRating',
+  component: DXRating,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXRating
+
+Компонент для отображения и выбора рейтинга с использованием звезд или других символов.
+
+## Назначение
+
+DXRating позволяет отображать и выбирать рейтинг в различных форматах:
+звезды, сердца или числа. Поддерживает дробные значения и различные размеры.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения символов (звезды, сердца)
+- \`useSize\` composable - для размеров
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- Формы отзывов
+- Карточки товаров для отображения рейтинга
+- Системы обратной связи
+
+## Внутренняя логика
+
+### Символы
+- **star**: Звезды (по умолчанию)
+- **heart**: Сердца
+- **number**: Числа (будущая реализация)
+
+### Дробные значения
+При \`allowHalf={true}\` можно выбирать половину значения (например, 4.5).
+
+### Hover эффект
+При наведении курсора элементы подсвечиваются для визуальной обратной связи.
+
+## Особенности
+
+### Доступность
+- ARIA атрибуты для screen readers
+- Клавиатурная навигация (Enter, Space)
+- Role="radiogroup" для семантики
+
+### Readonly режим
+В readonly режиме компонент только отображает рейтинг без возможности изменения.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    modelValue: {
+      control: 'number',
+      min: 0,
+      max: 5,
+      step: 0.5,
+      description: 'Значение рейтинга (v-model).',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+        category: 'Content',
+      },
+    },
+    max: {
+      control: 'number',
+      min: 1,
+      max: 10,
+      description: 'Максимальное значение рейтинга.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '5' },
+        category: 'Content',
+      },
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Только для чтения (не интерактивный).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    allowHalf: {
+      control: 'boolean',
+      description: 'Разрешить половину значения (например, 4.5).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    symbol: {
+      control: 'select',
+      options: ['star', 'heart', 'number'],
+      description: 'Символ для отображения: star | heart | number.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'star' },
+        category: 'Appearance',
+      },
+    },
+    color: {
+      control: 'select',
+      options: ['yellow', 'red', 'blue', 'green', 'purple'],
+      description: 'Цвет символов.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'yellow' },
+        category: 'Appearance',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Размер компонента.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+        category: 'Appearance',
+      },
+    },
+    count: {
+      control: 'number',
+      description: 'Количество оценок для отображения.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 'null' },
+        category: 'Content',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    modelValue: 4.5,
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовое использование для отображения рейтинга (readonly режим).',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXRating },
+    setup() {
+      return { args };
+    },
+    template: '<DXRating v-bind="args" />',
+  }),
+};
+
+export const Interactive = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Интерактивный выбор рейтинга. Пользователь может выбрать рейтинг кликом.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXRating, DXFormControl },
+    setup() {
+      const productRating = ref(0);
+      const handleRatingChange = (value) => {
+        console.log('Выбран рейтинг:', value);
+      };
+      return { productRating, handleRatingChange };
+    },
+    template: `
+      <DXFormControl label="Оцените товар">
+        <DXRating
+          v-model="productRating"
+          :max="5"
+          @change="handleRatingChange"
+        />
+      </DXFormControl>
+    `,
+  }),
+};
+
+export const WithHalf = {
+  args: {
+    modelValue: 3.5,
+    allowHalf: true,
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Рейтинг с поддержкой дробных значений. Можно выбрать половину звезды.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXRating },
+    setup() {
+      return { args };
+    },
+    template: '<DXRating v-bind="args" />',
+  }),
+};
+
+export const WithCount = {
+  args: {
+    modelValue: 4.2,
+    count: 125,
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Рейтинг с количеством оценок. Отображает количество оценок рядом с рейтингом.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXRating },
+    setup() {
+      return { args };
+    },
+    template: '<DXRating v-bind="args" />',
+  }),
+};
+
+export const HeartSymbol = {
+  args: {
+    modelValue: 4,
+    symbol: 'heart',
+    color: 'red',
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Рейтинг с сердцами вместо звезд. Полезно для лайков и избранного.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXRating },
+    setup() {
+      const heartRating = ref(0);
+      return { args, heartRating };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXRating v-bind="args" />
+        <DXRating
+          v-model="heartRating"
+          :max="5"
+          symbol="heart"
+          color="red"
+        />
+        <p class="text-sm text-slate-600">Выбрано: {{ heartRating }}</p>
+      </div>
+    `,
+  }),
+};
+
+export const AllSizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Различные размеры компонента.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXRating },
+    setup() {
+      return {};
+    },
+    template: `
+      <div class="space-y-4">
+        <DXRating :model-value="4" size="xs" readonly />
+        <DXRating :model-value="4" size="sm" readonly />
+        <DXRating :model-value="4" size="md" readonly />
+        <DXRating :model-value="4" size="lg" readonly />
+        <DXRating :model-value="4" size="xl" readonly />
+      </div>
+    `,
+  }),
+};
+
+export const AllColors = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Различные цвета символов.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXRating },
+    setup() {
+      return {};
+    },
+    template: `
+      <div class="space-y-4">
+        <DXRating :model-value="4" color="yellow" readonly />
+        <DXRating :model-value="4" color="red" readonly />
+        <DXRating :model-value="4" color="blue" readonly />
+        <DXRating :model-value="4" color="green" readonly />
+        <DXRating :model-value="4" color="purple" readonly />
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXRating/DXRating.vue

@@ -0,0 +1,402 @@
+<template>
+  <div
+    :class="ratingClasses"
+    data-component="DXRating"
+    :data-size="size"
+    :data-readonly="readonly"
+    :data-symbol="symbol"
+    :data-color="color"
+    role="radiogroup"
+    :aria-label="ariaLabel || 'Рейтинг'"
+  >
+    <button
+      v-for="index in max"
+      :key="index"
+      type="button"
+      :class="itemClasses(index)"
+      :disabled="readonly"
+      :aria-label="`Оценка ${index} из ${max}`"
+      :aria-checked="isItemActive(index)"
+      role="radio"
+      tabindex="0"
+      @click="handleClick(index)"
+      @mouseenter="handleMouseEnter(index)"
+      @mouseleave="handleMouseLeave"
+      @keydown.enter="handleClick(index)"
+      @keydown.space.prevent="handleClick(index)"
+    >
+      <component
+        v-if="isItemFilled(index)"
+        :is="filledIconComponent"
+        :class="iconClasses(index)"
+      />
+      <component
+        v-else
+        :is="iconComponent"
+        :class="iconClasses(index)"
+      />
+      <!-- Половина иконки для allowHalf -->
+      <component
+        v-if="allowHalf && isHalfFilled(index)"
+        :is="filledIconComponent"
+        :class="halfIconClasses(index)"
+      />
+    </button>
+    <!-- Количество оценок -->
+    <span v-if="count" :class="countClasses">
+      ({{ count }})
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useClassComposition } from "@/composables/useClassComposition";
+import {
+  StarIcon,
+  HeartIcon,
+} from "@heroicons/vue/24/solid";
+import {
+  StarIcon as StarIconOutline,
+  HeartIcon as HeartIconOutline,
+} from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /**
+   * Значение рейтинга (v-model)
+   * Может быть целым числом или дробным (например, 4.5)
+   */
+  modelValue: { type: Number, default: 0 },
+  /**
+   * Максимальное значение рейтинга
+   * @default 5
+   */
+  max: { type: Number, default: 5 },
+  /**
+   * Только для чтения (не интерактивный)
+   * @default false
+   */
+  readonly: { type: Boolean, default: false },
+  /**
+   * Разрешить половину значения (например, 4.5)
+   * @default false
+   */
+  allowHalf: { type: Boolean, default: false },
+  /**
+   * Символ для отображения: star | heart | number
+   * @default 'star'
+   */
+  symbol: {
+    type: String,
+    default: "star",
+    validator: (v) => ["star", "heart", "number"].includes(v),
+  },
+  /**
+   * Цвет: yellow | red | blue | green | purple
+   * @default 'yellow'
+   */
+  color: {
+    type: String,
+    default: "yellow",
+    validator: (v) =>
+      ["yellow", "red", "blue", "green", "purple"].includes(v),
+  },
+  /**
+   * Размер: xs | sm | md | lg | xl
+   * @default 'md'
+   */
+  size: {
+    type: String,
+    default: "md",
+    validator: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+  },
+  /**
+   * Количество оценок для отображения
+   */
+  count: { type: Number, default: null },
+  /**
+   * Кастомный aria-label
+   */
+  ariaLabel: { type: String, default: null },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const hoverValue = ref(0);
+
+/**
+ * Иконка для отображения
+ * 
+ * @description
+ * Определяет какую иконку использовать в зависимости от symbol:
+ * - star → StarIcon
+ * - heart → HeartIcon
+ * - number → не используется (отображаются числа)
+ * 
+ * @returns {Object|Function} Компонент иконки
+ */
+const iconComponent = computed(() => {
+  if (props.symbol === "heart") {
+    return HeartIconOutline;
+  }
+  return StarIconOutline;
+});
+
+/**
+ * Заполненная иконка
+ * 
+ * @description
+ * Определяет заполненную версию иконки для активных элементов.
+ * 
+ * @returns {Object|Function} Компонент заполненной иконки
+ */
+const filledIconComponent = computed(() => {
+  if (props.symbol === "heart") {
+    return HeartIcon;
+  }
+  return StarIcon;
+});
+
+/**
+ * Классы для контейнера рейтинга
+ * 
+ * @description
+ * Базовые классы для контейнера с выравниванием элементов.
+ * 
+ * @returns {Array} Массив классов
+ */
+const ratingClasses = computed(() =>
+  useClassComposition("inline-flex items-center gap-1")
+);
+
+/**
+ * Классы для элемента рейтинга
+ * 
+ * @description
+ * Вычисляет классы для каждого элемента рейтинга на основе состояния.
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {Array} Массив классов
+ */
+function itemClasses(index) {
+  const isActive = isItemActive(index);
+  const isHovered = hoverValue.value >= index;
+  const currentValue = hoverValue.value || props.modelValue;
+
+  return useClassComposition(
+    "relative inline-flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 rounded",
+    {
+      "cursor-pointer": !props.readonly,
+      "cursor-default": props.readonly,
+      [colorClasses.value.active]: isActive || isHovered,
+      [colorClasses.value.inactive]: !isActive && !isHovered,
+      [sizeClasses.value]: true,
+    }
+  );
+}
+
+/**
+ * Классы для иконки
+ * 
+ * @description
+ * Вычисляет классы для иконки элемента.
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {Array} Массив классов
+ */
+function iconClasses(index) {
+  return useClassComposition(
+    sizeClasses.value,
+    {
+      [colorClasses.value.active]: isItemFilled(index),
+      [colorClasses.value.inactive]: !isItemFilled(index),
+    }
+  );
+}
+
+/**
+ * Классы для половины иконки
+ * 
+ * @description
+ * Вычисляет классы для половины заполненной иконки (для allowHalf).
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {Array} Массив классов
+ */
+function halfIconClasses(index) {
+  return useClassComposition(
+    sizeClasses.value,
+    colorClasses.value.active,
+    "absolute left-0 top-0 overflow-hidden"
+  );
+}
+
+/**
+ * Классы для количества оценок
+ * 
+ * @description
+ * Вычисляет классы для отображения количества оценок.
+ * 
+ * @returns {Array} Массив классов
+ */
+const countClasses = computed(() => {
+  const sizeMap = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+  };
+  return useClassComposition(
+    sizeMap[props.size] || sizeMap.md,
+    "text-slate-500 ml-1"
+  );
+});
+
+/**
+ * Классы размеров
+ * 
+ * @description
+ * Вычисляет классы размеров для элементов рейтинга.
+ * 
+ * @returns {Object} Объект с классами размеров
+ */
+const sizeClasses = computed(() => {
+  const sizeMap = {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6",
+    xl: "w-8 h-8",
+  };
+  return {
+    value: sizeMap[props.size] || sizeMap.md,
+  };
+});
+
+/**
+ * Классы цветов
+ * 
+ * @description
+ * Вычисляет классы цветов для активных и неактивных элементов.
+ * 
+ * @returns {Object} Объект с классами цветов
+ */
+const colorClasses = computed(() => {
+  const colorMap = {
+    yellow: {
+      active: "text-yellow-400",
+      inactive: "text-slate-300",
+    },
+    red: {
+      active: "text-rose-500",
+      inactive: "text-slate-300",
+    },
+    blue: {
+      active: "text-blue-500",
+      inactive: "text-slate-300",
+    },
+    green: {
+      active: "text-green-500",
+      inactive: "text-slate-300",
+    },
+    purple: {
+      active: "text-purple-500",
+      inactive: "text-slate-300",
+    },
+  };
+  return colorMap[props.color] || colorMap.yellow;
+});
+
+/**
+ * Проверяет, активен ли элемент
+ * 
+ * @description
+ * Определяет, должен ли элемент быть активным (заполненным) на основе текущего значения.
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {boolean} true если элемент активен
+ */
+function isItemActive(index) {
+  const currentValue = hoverValue.value || props.modelValue;
+  return currentValue >= index;
+}
+
+/**
+ * Проверяет, заполнен ли элемент
+ * 
+ * @description
+ * Определяет, должен ли элемент быть полностью заполненным.
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {boolean} true если элемент заполнен
+ */
+function isItemFilled(index) {
+  const currentValue = hoverValue.value || props.modelValue;
+  return Math.floor(currentValue) >= index;
+}
+
+/**
+ * Проверяет, заполнена ли половина элемента
+ * 
+ * @description
+ * Определяет, должна ли быть заполнена половина элемента (для allowHalf).
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ * @returns {boolean} true если половина заполнена
+ */
+function isHalfFilled(index) {
+  if (!props.allowHalf) return false;
+  const currentValue = hoverValue.value || props.modelValue;
+  const floorValue = Math.floor(currentValue);
+  return floorValue === index - 1 && currentValue % 1 >= 0.5;
+}
+
+/**
+ * Обработчик клика
+ * 
+ * @description
+ * Обрабатывает клик по элементу рейтинга и обновляет значение.
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ */
+function handleClick(index) {
+  if (props.readonly) return;
+
+  let newValue = index;
+
+  // Если allowHalf и клик по уже выбранному элементу, устанавливаем половину
+  if (props.allowHalf && props.modelValue === index) {
+    newValue = index - 0.5;
+  }
+
+  emit("update:modelValue", newValue);
+  emit("change", newValue);
+}
+
+/**
+ * Обработчик mouseenter
+ * 
+ * @description
+ * Устанавливает hover значение при наведении (для визуальной обратной связи).
+ * 
+ * @param {number} index - Индекс элемента (1-based)
+ */
+function handleMouseEnter(index) {
+  if (props.readonly) return;
+  hoverValue.value = index;
+}
+
+/**
+ * Обработчик mouseleave
+ * 
+ * @description
+ * Сбрасывает hover значение при уходе курсора.
+ */
+function handleMouseLeave() {
+  if (props.readonly) return;
+  hoverValue.value = 0;
+}
+</script>
+