dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,237 @@
+import DXIconWrapper from './DXIconWrapper.vue';
+import { MagnifyingGlassIcon, UserIcon, EnvelopeIcon, LockClosedIcon } from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Atoms/DXIconWrapper',
+  component: DXIconWrapper,
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['left', 'right'],
+      description: 'Icon position'
+    },
+    icon: {
+      control: false,
+      description: 'Heroicon component'
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'Icon size'
+    },
+    animation: {
+      control: 'select',
+      options: ['none', 'wiggle', 'scale', 'rotate'],
+      description: 'Icon animation on hover'
+    },
+    iconClass: {
+      control: 'text',
+      description: 'Additional icon classes'
+    },
+    verticalAlign: {
+      control: 'select',
+      options: ['center', 'top'],
+      description: 'Vertical positioning'
+    },
+  },
+};
+
+// Left position (default)
+export const LeftPosition = {
+  args: {
+    position: 'left',
+    icon: MagnifyingGlassIcon,
+    size: 'sm',
+    animation: 'none',
+  },
+  render: (args) => ({
+    components: { DXIconWrapper },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="relative w-64">
+        <DXIconWrapper v-bind="args" />
+        <input 
+          type="text" 
+          placeholder="Search..."
+          class="w-full h-10 pl-10 pr-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"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Right position
+export const RightPosition = {
+  args: {
+    position: 'right',
+    icon: UserIcon,
+    size: 'sm',
+    animation: 'scale',
+  },
+  render: (args) => ({
+    components: { DXIconWrapper },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="relative w-64">
+        <DXIconWrapper v-bind="args" />
+        <input 
+          type="text" 
+          placeholder="Username"
+          class="w-full h-10 px-4 pr-10 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"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Top vertical align (for textarea)
+export const TopAlign = {
+  args: {
+    position: 'left',
+    icon: EnvelopeIcon,
+    size: 'sm',
+    animation: 'none',
+    verticalAlign: 'top',
+  },
+  render: (args) => ({
+    components: { DXIconWrapper },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="relative w-64">
+        <DXIconWrapper v-bind="args" />
+        <textarea 
+          placeholder="Message..."
+          rows="4"
+          class="w-full pl-10 pr-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"
+        ></textarea>
+      </div>
+    `,
+  }),
+};
+
+// Different icon sizes
+export const IconSizes = {
+  render: () => ({
+    components: { DXIconWrapper },
+    setup() {
+      return { 
+        MagnifyingGlassIcon,
+        UserIcon,
+        EnvelopeIcon,
+        LockClosedIcon
+      };
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Extra Small (xs)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="MagnifyingGlassIcon" size="xs" />
+            <input 
+              type="text" 
+              placeholder="XS icon"
+              class="w-full h-10 pl-9 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Small (sm)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="UserIcon" size="sm" />
+            <input 
+              type="text" 
+              placeholder="SM icon"
+              class="w-full h-10 pl-10 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Medium (md)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="EnvelopeIcon" size="md" />
+            <input 
+              type="text" 
+              placeholder="MD icon"
+              class="w-full h-10 pl-11 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Large (lg)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="LockClosedIcon" size="lg" />
+            <input 
+              type="text" 
+              placeholder="LG icon"
+              class="w-full h-12 pl-12 pr-4 py-3 text-base rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// With animations
+export const WithAnimations = {
+  render: () => ({
+    components: { DXIconWrapper },
+    setup() {
+      return { 
+        MagnifyingGlassIcon,
+        UserIcon,
+        EnvelopeIcon
+      };
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Scale animation (hover to see)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="MagnifyingGlassIcon" size="sm" animation="scale" />
+            <input 
+              type="text" 
+              placeholder="Hover over icon"
+              class="w-full h-10 pl-10 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Wiggle animation (hover to see)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="UserIcon" size="sm" animation="wiggle" />
+            <input 
+              type="text" 
+              placeholder="Hover over icon"
+              class="w-full h-10 pl-10 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Rotate animation (hover to see)</p>
+          <div class="relative w-64">
+            <DXIconWrapper position="left" :icon="EnvelopeIcon" size="sm" animation="rotate" />
+            <input 
+              type="text" 
+              placeholder="Hover over icon"
+              class="w-full h-10 pl-10 pr-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXIconWrapper/DXIconWrapper.vue

@@ -0,0 +1,79 @@
+<template>
+  <div 
+    :class="wrapperClasses"
+    v-bind="dataAttrs"
+  >
+    <DXIcon 
+      v-if="icon" 
+      :icon="icon" 
+      :size="size"
+      :animation="animation"
+      :class="iconClass"
+    />
+    <slot v-else />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useClassComposition } from '@/composables/useClassComposition';
+import { useCustomDataAttributes } from '@/composables/useDataAttributes';
+import DXIcon from '../DXIcon/DXIcon.vue';
+
+const props = defineProps({
+  /** Position: left | right */
+  position: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  /** Icon component (Heroicon) */
+  icon: {
+    type: [Object, Function],
+    default: null
+  },
+  /** Icon size: xs | sm | md | lg */
+  size: {
+    type: String,
+    default: 'sm'
+  },
+  /** Icon animation: none | wiggle | scale | rotate */
+  animation: {
+    type: String,
+    default: 'none'
+  },
+  /** Additional icon classes */
+  iconClass: {
+    type: [String, Array, Object],
+    default: 'text-slate-400'
+  },
+  /** Vertical position: center | top */
+  verticalAlign: {
+    type: String,
+    default: 'center',
+    validator: (value) => ['center', 'top'].includes(value)
+  },
+});
+
+const BASE_CLASSES = 'absolute pointer-events-none';
+
+const wrapperClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    {
+      'left-3': props.position === 'left',
+      'right-3': props.position === 'right',
+      'top-1/2 -translate-y-1/2': props.verticalAlign === 'center',
+      'top-3': props.verticalAlign === 'top',
+    }
+  )
+);
+
+const dataAttrs = computed(() =>
+  useCustomDataAttributes({
+    component: 'DXIconWrapper',
+    position: props.position,
+  })
+);
+</script>
+

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

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

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

@@ -0,0 +1,230 @@
+import DXInputAddon from './DXInputAddon.vue';
+import DXInputGroup from '../../molecules/DXInputGroup/DXInputGroup.vue';
+import DXInput from '../../molecules/DXInput/DXInput.vue';
+import { ref } from 'vue';
+import {
+  MagnifyingGlassIcon,
+  CurrencyDollarIcon,
+  AtSymbolIcon,
+  GlobeAltIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Atoms/DXInputAddon',
+  component: DXInputAddon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: false,
+      description: 'Heroicon компонент для отображения иконки',
+    },
+  },
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const url = ref('');
+      return { url };
+    },
+    template: `
+      <DXInputGroup label="Website">
+        <DXInputAddon>https://</DXInputAddon>
+        <DXInput v-model="url" placeholder="example.com" />
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const WithSuffix = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const price = ref('');
+      return { price };
+    },
+    template: `
+      <DXInputGroup label="Price">
+        <DXInput v-model="price" type="number" placeholder="0.00" />
+        <DXInputAddon>USD</DXInputAddon>
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const WithIcon = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const search = ref('');
+      return { search, MagnifyingGlassIcon };
+    },
+    template: `
+      <DXInputGroup label="Search">
+        <DXInputAddon :icon="MagnifyingGlassIcon" />
+        <DXInput v-model="search" placeholder="Search..." />
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const WithIconAndText = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const email = ref('');
+      return { email, AtSymbolIcon };
+    },
+    template: `
+      <DXInputGroup label="Email">
+        <DXInputAddon :icon="AtSymbolIcon">@</DXInputAddon>
+        <DXInput v-model="email" type="email" placeholder="username" />
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const BothSides = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const amount = ref('');
+      return { amount, CurrencyDollarIcon };
+    },
+    template: `
+      <DXInputGroup label="Amount">
+        <DXInputAddon :icon="CurrencyDollarIcon">$</DXInputAddon>
+        <DXInput v-model="amount" type="number" placeholder="0.00" />
+        <DXInputAddon>USD</DXInputAddon>
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const small = ref('');
+      const medium = ref('');
+      const large = ref('');
+      return { small, medium, large, GlobeAltIcon };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInputGroup label="Small" size="sm">
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="small" size="sm" placeholder="example.com" />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Medium (default)" size="md">
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="medium" size="md" placeholder="example.com" />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Large" size="lg">
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="large" size="lg" placeholder="example.com" />
+        </DXInputGroup>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const url = ref('example.com');
+      const price = ref('100.00');
+      return { url, price, GlobeAltIcon, CurrencyDollarIcon };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInputGroup label="Disabled Website" disabled>
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="url" disabled placeholder="example.com" />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Disabled Price" disabled>
+          <DXInputAddon :icon="CurrencyDollarIcon">$</DXInputAddon>
+          <DXInput v-model="price" type="number" disabled placeholder="0.00" />
+          <DXInputAddon>USD</DXInputAddon>
+        </DXInputGroup>
+      </div>
+    `,
+  }),
+};
+
+export const WithError = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const url = ref('invalid-url');
+      const price = ref('abc');
+      return { url, price, GlobeAltIcon, CurrencyDollarIcon };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInputGroup label="Website URL" error="Invalid URL format">
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="url" error="Invalid URL format" placeholder="example.com" />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Price" error="Must be a number">
+          <DXInputAddon :icon="CurrencyDollarIcon">$</DXInputAddon>
+          <DXInput v-model="price" type="number" error="Must be a number" placeholder="0.00" />
+          <DXInputAddon>USD</DXInputAddon>
+        </DXInputGroup>
+      </div>
+    `,
+  }),
+};
+
+export const UseCases = {
+  render: () => ({
+    components: { DXInputAddon, DXInputGroup, DXInput },
+    setup() {
+      const website = ref('');
+      const price = ref('');
+      const search = ref('');
+      const email = ref('');
+      return {
+        website,
+        price,
+        search,
+        email,
+        GlobeAltIcon,
+        CurrencyDollarIcon,
+        MagnifyingGlassIcon,
+        AtSymbolIcon,
+      };
+    },
+    template: `
+      <div class="space-y-6 max-w-md">
+        <DXInputGroup label="Website URL">
+          <DXInputAddon :icon="GlobeAltIcon">https://</DXInputAddon>
+          <DXInput v-model="website" placeholder="example.com" />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Price">
+          <DXInputAddon :icon="CurrencyDollarIcon">$</DXInputAddon>
+          <DXInput v-model="price" type="number" placeholder="0.00" />
+          <DXInputAddon>USD</DXInputAddon>
+        </DXInputGroup>
+        
+        <DXInputGroup label="Search">
+          <DXInputAddon :icon="MagnifyingGlassIcon" />
+          <DXInput v-model="search" placeholder="Search..." />
+        </DXInputGroup>
+        
+        <DXInputGroup label="Email">
+          <DXInputAddon :icon="AtSymbolIcon">@</DXInputAddon>
+          <DXInput v-model="email" type="email" placeholder="username" />
+        </DXInputGroup>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXInputAddon/DXInputAddon.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="flex items-center px-3 border-r-0 bg-slate-50 text-slate-600 text-sm first:rounded-l-xl last:rounded-r-xl last:border-r transition-colors"
+    :class="addonClasses"
+    data-component="DXInputGroupAddon"
+  >
+    <component v-if="icon" :is="icon" class="w-4 h-4" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { inject, computed, onMounted, onUnmounted } from "vue";
+import { useSize } from "@/composables/useSize";
+
+const props = defineProps({
+  icon: { type: [Object, Function], default: null },
+});
+
+const inputGroup = inject("inputGroup", { 
+  size: "md", 
+  disabled: false, 
+  error: "",
+  registerComponent: () => {},
+  unregisterComponent: () => {},
+});
+
+// Генерируем уникальный ID для регистрации
+const componentId = Date.now() + Math.random();
+
+onMounted(() => {
+  if (inputGroup.registerComponent) {
+    inputGroup.registerComponent('addon', componentId);
+  }
+});
+
+onUnmounted(() => {
+  if (inputGroup.unregisterComponent) {
+    inputGroup.unregisterComponent(componentId);
+  }
+});
+
+const addonClasses = computed(() => {
+  const classes = [
+    'border', // Базовый класс border
+    useSize(inputGroup.size, 'inputAddon'),
+  ];
+  
+  // Синхронизация с состоянием disabled
+  if (inputGroup.disabled) {
+    classes.push('opacity-60 cursor-not-allowed');
+  }
+  
+  // Синхронизация с состоянием error - цвет границы
+  if (inputGroup.error) {
+    classes.push('border-rose-300');
+  } else {
+    classes.push('border-slate-200');
+  }
+  
+  return classes.filter(Boolean).join(' ');
+});
+</script>
+

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

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