dxd-style-code 0.1.7 → 0.1.9

package/src/components/atoms/DXDropdownItem/DXDropdownItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <button
+    type="button"
+    :class="allClasses"
+    class="group"
+    :disabled="disabled"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    data-component="DXDropdownItem"
+    :data-variant="variant"
+    :data-size="size"
+    :data-disabled="disabled"
+  >
+    <DXIcon 
+      v-if="icon" 
+      :icon="icon" 
+      :size="iconSize" 
+      :animation="iconAnimation"
+      :group-hover="true"
+      class="flex-shrink-0" 
+    />
+    <span class="flex-1 text-left">
+      <slot />
+    </span>
+    <DXIcon 
+      v-if="submenu" 
+      :icon="ChevronRightIcon" 
+      size="xs" 
+      :animation="iconAnimation"
+      :group-hover="true"
+      class="text-slate-400 flex-shrink-0" 
+    />
+    <DXBadge v-if="badge" :variant="badgeVariant" size="sm" class="flex-shrink-0">{{ badge }}</DXBadge>
+  </button>
+</template>
+
+<script setup>
+import { inject, computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantDropdownItem } from "@/composables/useVariant";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { ChevronRightIcon } from "@heroicons/vue/24/outline";
+import DXIcon from "../DXIcon/DXIcon.vue";
+import DXBadge from "../DXBadge/DXBadge.vue";
+
+const props = defineProps({
+  /** Иконка (Heroicon компонент) */
+  icon: { type: [Object, Function], default: null },
+  /** Вариант: default | danger | success */
+  variant: { 
+    type: String, 
+    default: 'default',
+    validator: (value) => ['default', 'danger', 'success'].includes(value)
+  },
+  /** Размер: sm | md */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md'].includes(value)
+  },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Показать индикатор подменю */
+  submenu: { type: Boolean, default: false },
+  /** Закрыть dropdown при клике */
+  closeOnClick: { type: Boolean, default: true },
+  /** Текст badge */
+  badge: { type: [String, Number], default: null },
+  /** Вариант badge */
+  badgeVariant: { type: String, default: 'slate' },
+  /** Анимация иконки: none | wiggle | scale | rotate */
+  iconAnimation: {
+    type: String,
+    default: 'wiggle',
+    validator: (value) => ['none', 'wiggle', 'scale', 'rotate'].includes(value)
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const dropdown = inject("dropdown", null);
+
+const BASE_CLASSES = "w-full flex items-center gap-3 rounded-lg transition-colors";
+
+/**
+ * Все классы для dropdown item
+ */
+const allClasses = computed(() => 
+  useClassComposition(
+    BASE_CLASSES,
+    useVariantDropdownItem(props.variant),
+    useSize(props.size, 'button'),
+    {
+      'opacity-60 cursor-not-allowed': props.disabled,
+    }
+  )
+);
+
+/**
+ * Размер иконки в зависимости от размера item
+ */
+const iconSize = computed(() => props.size === 'sm' ? 'xs' : 'sm');
+
+/**
+ * Обработчик клика
+ */
+const handleClick = (event) => {
+  if (props.disabled) return;
+  
+  emit("click", event);
+  
+  if (props.closeOnClick && dropdown?.close) {
+    dropdown.close();
+  }
+};
+</script>

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

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

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

@@ -0,0 +1,194 @@
+import DXFormLabel from './DXFormLabel.vue';
+
+export default {
+  title: 'Atoms/DXFormLabel',
+  component: DXFormLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text'
+    },
+    error: {
+      control: 'text',
+      description: 'Error message'
+    },
+    helper: {
+      control: 'text',
+      description: 'Helper text'
+    },
+    success: {
+      control: 'text',
+      description: 'Success message'
+    },
+    required: {
+      control: 'boolean',
+      description: 'Show required asterisk'
+    },
+    showValidationIcon: {
+      control: 'boolean',
+      description: 'Show validation icon in messages'
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Maximum length for character count'
+    },
+    currentLength: {
+      control: 'number',
+      description: 'Current length for character count'
+    },
+    showCount: {
+      control: 'boolean',
+      description: 'Show character count'
+    },
+  },
+};
+
+// Default story with label and helper
+export const Default = {
+  args: {
+    label: 'Email Address',
+    helper: 'We will never share your email with anyone else.',
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <input 
+          type="email" 
+          placeholder="Enter your email"
+          class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300"
+        />
+      </DXFormLabel>
+    `,
+  }),
+};
+
+// With error message
+export const WithError = {
+  args: {
+    label: 'Username',
+    error: 'Username is already taken',
+    showValidationIcon: true,
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <input 
+          type="text" 
+          placeholder="Choose a username"
+          class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-rose-300 bg-white text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-rose-500/10"
+        />
+      </DXFormLabel>
+    `,
+  }),
+};
+
+// With required indicator
+export const Required = {
+  args: {
+    label: 'Full Name',
+    required: true,
+    helper: 'Please enter your legal name',
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <input 
+          type="text" 
+          placeholder="John Doe"
+          class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300"
+        />
+      </DXFormLabel>
+    `,
+  }),
+};
+
+// With character count
+export const WithCharacterCount = {
+  args: {
+    label: 'Bio',
+    helper: 'Tell us about yourself',
+    maxLength: 150,
+    currentLength: 45,
+    showCount: true,
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <textarea 
+          placeholder="Write your bio..."
+          rows="3"
+          class="w-full px-4 py-3 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300"
+        >This is my bio text that takes up some space...</textarea>
+      </DXFormLabel>
+    `,
+  }),
+};
+
+// With success message
+export const WithSuccess = {
+  args: {
+    label: 'Email Verification',
+    success: 'Email verified successfully!',
+    showValidationIcon: true,
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <input 
+          type="email" 
+          value="user@example.com"
+          class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-emerald-300 bg-white text-slate-700 focus:outline-none focus:ring-2 focus:ring-emerald-500/10"
+        />
+      </DXFormLabel>
+    `,
+  }),
+};
+
+// All features combined
+export const Complete = {
+  args: {
+    label: 'Description',
+    required: true,
+    helper: 'Provide a detailed description',
+    maxLength: 200,
+    currentLength: 125,
+    showCount: true,
+  },
+  render: (args) => ({
+    components: { DXFormLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXFormLabel v-bind="args">
+        <textarea 
+          placeholder="Enter description..."
+          rows="4"
+          class="w-full px-4 py-3 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300"
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
+      </DXFormLabel>
+    `,
+  }),
+};
+

package/src/components/atoms/DXFormLabel/DXFormLabel.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="w-full" data-component="DXFormLabel">
+    <!-- Label with optional required indicator -->
+    <div v-if="label || showCount" class="flex items-center justify-between mb-1">
+      <label v-if="label" class="text-sm font-medium text-slate-700">
+        {{ label }}
+        <span v-if="required" class="text-rose-500 ml-0.5">*</span>
+      </label>
+      
+      <!-- Character count -->
+      <span v-if="showCount && maxLength" class="text-xs text-slate-500">
+        {{ currentLength }} / {{ maxLength }}
+      </span>
+    </div>
+    
+    <!-- Slot for input/textarea/select -->
+    <slot />
+    
+    <!-- Error message -->
+    <p v-if="error" class="mt-1 text-xs text-rose-500 flex items-center gap-1">
+      <DXIcon v-if="showValidationIcon" :icon="errorIcon" size="xs" animation="none" class="text-rose-500" />
+      {{ error }}
+    </p>
+    
+    <!-- Helper text (only shown if no error) -->
+    <p v-else-if="helper" class="mt-1 text-xs text-slate-500">
+      {{ helper }}
+    </p>
+    
+    <!-- Success message -->
+    <p v-if="success && !error" class="mt-1 text-xs text-emerald-600 flex items-center gap-1">
+      <DXIcon v-if="showValidationIcon" :icon="successIcon" size="xs" animation="none" class="text-emerald-500" />
+      {{ success }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
+import DXIcon from '../DXIcon/DXIcon.vue';
+
+const props = defineProps({
+  /** Label text */
+  label: {
+    type: String,
+    default: ''
+  },
+  /** Error message */
+  error: {
+    type: String,
+    default: ''
+  },
+  /** Helper text */
+  helper: {
+    type: String,
+    default: ''
+  },
+  /** Success message */
+  success: {
+    type: String,
+    default: ''
+  },
+  /** Show required asterisk */
+  required: {
+    type: Boolean,
+    default: false
+  },
+  /** Show validation icon in messages */
+  showValidationIcon: {
+    type: Boolean,
+    default: true
+  },
+  /** Maximum length for character count */
+  maxLength: {
+    type: Number,
+    default: 0
+  },
+  /** Current length for character count */
+  currentLength: {
+    type: Number,
+    default: 0
+  },
+  /** Show character count */
+  showCount: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const errorIcon = computed(() => ExclamationCircleIcon);
+const successIcon = computed(() => CheckCircleIcon);
+</script>
+

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

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

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

@@ -0,0 +1,156 @@
+import DXIcon from './DXIcon.vue';
+import {
+  HeartIcon,
+  StarIcon,
+  BellIcon,
+  HomeIcon,
+  UserIcon,
+  Cog6ToothIcon,
+  MagnifyingGlassIcon,
+  ShoppingCartIcon,
+  EnvelopeIcon,
+  PhoneIcon,
+} from '@heroicons/vue/24/outline';
+import {
+  HeartIcon as HeartIconSolid,
+  StarIcon as StarIconSolid,
+} from '@heroicons/vue/24/solid';
+
+export default {
+  title: 'Atoms/DXIcon',
+  component: DXIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    animation: {
+      control: 'select',
+      options: ['none', 'wiggle', 'scale', 'rotate'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    icon: HeartIcon,
+    size: 'md',
+    animation: 'none',
+  },
+};
+
+export const Sizes = () => ({
+  components: { DXIcon },
+  setup() {
+    return { HeartIcon };
+  },
+  template: `
+    <div class="flex items-center gap-4">
+      <DXIcon :icon="HeartIcon" size="xs" />
+      <DXIcon :icon="HeartIcon" size="sm" />
+      <DXIcon :icon="HeartIcon" size="md" />
+      <DXIcon :icon="HeartIcon" size="lg" />
+      <DXIcon :icon="HeartIcon" size="xl" />
+    </div>
+  `,
+});
+
+export const Animations = () => ({
+  components: { DXIcon },
+  setup() {
+    return { HeartIcon, StarIcon, BellIcon, Cog6ToothIcon };
+  },
+  template: `
+    <div class="flex items-center gap-8">
+      <div class="text-center">
+        <DXIcon :icon="HeartIcon" size="xl" animation="none" />
+        <p class="text-xs mt-2 text-slate-600">None</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="StarIcon" size="xl" animation="wiggle" />
+        <p class="text-xs mt-2 text-slate-600">Wiggle</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="BellIcon" size="xl" animation="scale" />
+        <p class="text-xs mt-2 text-slate-600">Scale</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="Cog6ToothIcon" size="xl" animation="rotate" />
+        <p class="text-xs mt-2 text-slate-600">Rotate</p>
+      </div>
+    </div>
+  `,
+});
+
+export const IconGallery = () => ({
+  components: { DXIcon },
+  setup() {
+    return {
+      icons: [
+        { name: 'Heart', icon: HeartIcon },
+        { name: 'Star', icon: StarIcon },
+        { name: 'Bell', icon: BellIcon },
+        { name: 'Home', icon: HomeIcon },
+        { name: 'User', icon: UserIcon },
+        { name: 'Settings', icon: Cog6ToothIcon },
+        { name: 'Search', icon: MagnifyingGlassIcon },
+        { name: 'Cart', icon: ShoppingCartIcon },
+        { name: 'Email', icon: EnvelopeIcon },
+        { name: 'Phone', icon: PhoneIcon },
+      ],
+    };
+  },
+  template: `
+    <div class="grid grid-cols-5 gap-6">
+      <div v-for="item in icons" :key="item.name" class="text-center">
+        <DXIcon :icon="item.icon" size="xl" animation="scale" class="text-slate-700 mx-auto" />
+        <p class="text-xs mt-2 text-slate-600">{{ item.name }}</p>
+      </div>
+    </div>
+  `,
+});
+
+export const OutlineVsSolid = () => ({
+  components: { DXIcon },
+  setup() {
+    return { HeartIcon, HeartIconSolid, StarIcon, StarIconSolid };
+  },
+  template: `
+    <div class="flex items-center gap-8">
+      <div class="text-center">
+        <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-slate-700" />
+        <p class="text-xs mt-2 text-slate-600">Outline</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="HeartIconSolid" size="xl" animation="scale" class="text-rose-500" />
+        <p class="text-xs mt-2 text-slate-600">Solid</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="StarIcon" size="xl" animation="wiggle" class="text-slate-700" />
+        <p class="text-xs mt-2 text-slate-600">Outline</p>
+      </div>
+      <div class="text-center">
+        <DXIcon :icon="StarIconSolid" size="xl" animation="wiggle" class="text-amber-500" />
+        <p class="text-xs mt-2 text-slate-600">Solid</p>
+      </div>
+    </div>
+  `,
+});
+
+export const WithColors = () => ({
+  components: { DXIcon },
+  setup() {
+    return { HeartIcon };
+  },
+  template: `
+    <div class="flex items-center gap-4">
+      <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-rose-500" />
+      <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-blue-500" />
+      <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-emerald-500" />
+      <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-amber-500" />
+      <DXIcon :icon="HeartIcon" size="xl" animation="scale" class="text-purple-500" />
+    </div>
+  `,
+});
+

package/src/components/atoms/DXIcon/DXIcon.vue

@@ -0,0 +1,102 @@
+<template>
+  <component
+    :is="icon"
+    :class="allClasses"
+    data-component="DXIcon"
+    :data-size="size"
+    :data-animation="animation"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useAnimation } from "@/composables/useAnimation";
+
+const props = defineProps({
+  /** Heroicon компонент */
+  icon: { type: [Object, Function], required: true },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Анимация при hover: none | wiggle | scale | rotate */
+  animation: { type: String, default: "none" },
+  /** Использовать group-hover вместо обычного hover */
+  groupHover: { type: Boolean, default: false },
+  /** Дополнительные классы */
+  class: { type: [String, Array, Object], default: "" },
+});
+
+const allClasses = computed(() => [
+  useSize(props.size, 'icon'),
+  useAnimation(props.animation, 'icon', props.groupHover),
+  props.class,
+]);
+</script>
+
+<style>
+/* Wiggle animation - тряска при hover */
+@keyframes icon-wiggle {
+  0% { transform: translateX(0) rotate(0deg); }
+  25% { transform: translateX(-1px) rotate(-3deg); }
+  50% { transform: translateX(0) rotate(0deg); }
+  75% { transform: translateX(1px) rotate(3deg); }
+  100% { transform: translateX(0) rotate(0deg); }
+}
+
+/* Regular hover */
+.dx-icon-wiggle {
+  transition: transform 150ms ease;
+}
+
+.dx-icon-wiggle:hover {
+  animation: icon-wiggle 0.28s ease-in-out;
+}
+
+/* Group hover */
+.dx-icon-wiggle-group {
+  transition: transform 150ms ease;
+}
+
+.group:hover .dx-icon-wiggle-group {
+  animation: icon-wiggle 0.28s ease-in-out;
+}
+
+/* Scale animation - увеличение при hover */
+/* Regular hover */
+.dx-icon-scale {
+  transition: transform 200ms ease;
+}
+
+.dx-icon-scale:hover {
+  transform: scale(1.1);
+}
+
+/* Group hover */
+.dx-icon-scale-group {
+  transition: transform 200ms ease;
+}
+
+.group:hover .dx-icon-scale-group {
+  transform: scale(1.1);
+}
+
+/* Rotate animation - поворот при hover */
+/* Regular hover */
+.dx-icon-rotate {
+  transition: transform 250ms ease;
+}
+
+.dx-icon-rotate:hover {
+  transform: rotate(90deg);
+}
+
+/* Group hover */
+.dx-icon-rotate-group {
+  transition: transform 250ms ease;
+}
+
+.group:hover .dx-icon-rotate-group {
+  transform: rotate(90deg);
+}
+</style>
+

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

@@ -0,0 +1,3 @@
+import DXIcon from './DXIcon.vue';
+export default DXIcon;
+