dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,291 @@
+import DXInput from './DXInput.vue';
+import { ref } from 'vue';
+import {
+  MagnifyingGlassIcon,
+  EnvelopeIcon,
+  PhoneIcon,
+  UserIcon,
+  LockClosedIcon,
+  CreditCardIcon,
+  MapPinIcon,
+  CurrencyDollarIcon,
+  CalendarIcon,
+  GlobeAltIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXInput',
+  component: DXInput,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Размер поля',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключенное состояние',
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'number', 'tel', 'url'],
+      description: 'Тип input',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Введите текст...',
+  },
+  render: (args) => ({
+    components: { DXInput },
+    setup() { return { args }; },
+    template: '<DXInput v-bind="args" />',
+  }),
+};
+
+export const WithLabel = {
+  args: {
+    label: 'Email',
+    placeholder: 'example@mail.com',
+    type: 'email',
+  },
+  render: (args) => ({
+    components: { DXInput },
+    setup() { return { args }; },
+    template: '<DXInput v-bind="args" />',
+  }),
+};
+
+export const WithHelper = {
+  args: {
+    label: 'Пароль',
+    placeholder: 'Минимум 8 символов',
+    helper: 'Используйте буквы, цифры и символы',
+    type: 'password',
+  },
+  render: (args) => ({
+    components: { DXInput },
+    setup() { return { args }; },
+    template: '<DXInput v-bind="args" />',
+  }),
+};
+
+export const WithError = {
+  args: {
+    label: 'Email',
+    placeholder: 'example@mail.com',
+    error: 'Неверный формат email',
+    modelValue: 'invalid-email',
+  },
+  render: (args) => ({
+    components: { DXInput },
+    setup() { return { args }; },
+    template: '<DXInput v-bind="args" />',
+  }),
+};
+
+export const Disabled = {
+  args: {
+    label: 'Поле отключено',
+    placeholder: 'Нельзя редактировать',
+    disabled: true,
+    modelValue: 'Значение',
+  },
+  render: (args) => ({
+    components: { DXInput },
+    setup() { return { args }; },
+    template: '<DXInput v-bind="args" />',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXInput },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInput size="sm" placeholder="Small" label="Small" />
+        <DXInput size="md" placeholder="Medium" label="Medium" />
+        <DXInput size="lg" placeholder="Large" label="Large" />
+      </div>
+    `,
+  }),
+};
+
+// С иконками
+export const WithPrefixIcon = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      const email = ref('');
+      return { email, EnvelopeIcon };
+    },
+    template: `
+      <DXInput
+        v-model="email"
+        label="Email"
+        placeholder="example@mail.com"
+        :prefix-icon="EnvelopeIcon"
+      />
+    `,
+  }),
+};
+
+export const WithSuffixIcon = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      const url = ref('https://example.com');
+      return { url, CheckCircleIcon };
+    },
+    template: `
+      <DXInput
+        v-model="url"
+        label="Website"
+        placeholder="https://..."
+        :suffix-icon="CheckCircleIcon"
+        helper="URL is valid"
+      />
+    `,
+  }),
+};
+
+export const Search = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      const search = ref('');
+      return { search, MagnifyingGlassIcon };
+    },
+    template: `
+      <DXInput
+        v-model="search"
+        placeholder="Search..."
+        :prefix-icon="MagnifyingGlassIcon"
+      />
+    `,
+  }),
+};
+
+export const FormWithIcons = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      const form = ref({
+        name: '',
+        email: '',
+        phone: '',
+        address: '',
+      });
+      return { 
+        form,
+        UserIcon,
+        EnvelopeIcon,
+        PhoneIcon,
+        MapPinIcon,
+      };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInput
+          v-model="form.name"
+          label="Full Name"
+          placeholder="John Doe"
+          :prefix-icon="UserIcon"
+        />
+        <DXInput
+          v-model="form.email"
+          label="Email"
+          type="email"
+          placeholder="john@example.com"
+          :prefix-icon="EnvelopeIcon"
+        />
+        <DXInput
+          v-model="form.phone"
+          label="Phone"
+          type="tel"
+          placeholder="+1 (555) 000-0000"
+          :prefix-icon="PhoneIcon"
+        />
+        <DXInput
+          v-model="form.address"
+          label="Address"
+          placeholder="123 Main St"
+          :prefix-icon="MapPinIcon"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const PaymentForm = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      const cardNumber = ref('');
+      const amount = ref('');
+      return { 
+        cardNumber,
+        amount,
+        CreditCardIcon,
+        CurrencyDollarIcon,
+      };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXInput
+          v-model="cardNumber"
+          label="Card Number"
+          placeholder="1234 5678 9012 3456"
+          :prefix-icon="CreditCardIcon"
+        />
+        <DXInput
+          v-model="amount"
+          label="Amount"
+          type="number"
+          placeholder="0.00"
+          :prefix-icon="CurrencyDollarIcon"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const AllIconTypes = {
+  render: () => ({
+    components: { DXInput },
+    setup() {
+      return {
+        MagnifyingGlassIcon,
+        EnvelopeIcon,
+        PhoneIcon,
+        UserIcon,
+        LockClosedIcon,
+        CreditCardIcon,
+        CalendarIcon,
+        MapPinIcon,
+        CurrencyDollarIcon,
+        GlobeAltIcon,
+      };
+    },
+    template: `
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <DXInput placeholder="Search" :prefix-icon="MagnifyingGlassIcon" />
+        <DXInput placeholder="Email" :prefix-icon="EnvelopeIcon" />
+        <DXInput placeholder="Phone" :prefix-icon="PhoneIcon" />
+        <DXInput placeholder="Username" :prefix-icon="UserIcon" />
+        <DXInput placeholder="Password" type="password" :prefix-icon="LockClosedIcon" />
+        <DXInput placeholder="Card" :prefix-icon="CreditCardIcon" />
+        <DXInput placeholder="Date" :prefix-icon="CalendarIcon" />
+        <DXInput placeholder="Location" :prefix-icon="MapPinIcon" />
+        <DXInput placeholder="Price" :prefix-icon="CurrencyDollarIcon" />
+        <DXInput placeholder="Website" :prefix-icon="GlobeAltIcon" />
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXInput/DXInput.vue

@@ -0,0 +1,156 @@
+<template>
+  <DXFormLabel
+    :label="label"
+    :error="error"
+    :helper="helper"
+    :required="required"
+    data-component="DXInput"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-error="!!error"
+  >
+    <div class="relative">
+      <DXIconWrapper
+        v-if="prefixIcon || $slots.prefix"
+        position="left"
+        :icon="prefixIcon"
+        :size="getIconSize()"
+      >
+        <slot name="prefix" />
+      </DXIconWrapper>
+      
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :value="modelValue"
+        :disabled="disabled"
+        :class="inputClasses"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+      
+      <DXIconWrapper
+        v-if="suffixIcon || $slots.suffix"
+        position="right"
+        :icon="suffixIcon"
+        :size="getIconSize()"
+      >
+        <slot name="suffix" />
+      </DXIconWrapper>
+    </div>
+  </DXFormLabel>
+</template>
+
+<script setup>
+import { computed, useSlots, inject, onMounted, onUnmounted } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXFormLabel from "../../atoms/DXFormLabel/DXFormLabel.vue";
+import DXIconWrapper from "../../atoms/DXIconWrapper/DXIconWrapper.vue";
+
+const slots = useSlots();
+const inputGroup = inject("inputGroup", null);
+
+// Генерируем уникальный ID для регистрации
+const componentId = Date.now() + Math.random();
+
+onMounted(() => {
+  if (inputGroup?.registerComponent) {
+    inputGroup.registerComponent('input', componentId);
+  }
+});
+
+onUnmounted(() => {
+  if (inputGroup?.unregisterComponent) {
+    inputGroup.unregisterComponent(componentId);
+  }
+});
+
+// Получаем информацию о позиции addon
+const addonPosition = computed(() => {
+  if (!inputGroup?.getComponentPosition) {
+    return { hasLeftAddon: false, hasRightAddon: false };
+  }
+  return inputGroup.getComponentPosition(componentId);
+});
+
+const props = defineProps({
+  /** Значение поля (v-model) */
+  modelValue: [String, Number],
+  /** Тип input */
+  type: { type: String, default: "text" },
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Лейбл над полем */
+  label: { type: String, default: "" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Текст ошибки */
+  error: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Дополнительные классы */
+  inputClass: { type: [String, Array, Object], default: "" },
+  /** Иконка слева (Heroicon компонент) */
+  prefixIcon: { type: [Object, Function], default: null },
+  /** Иконка справа (Heroicon компонент) */
+  suffixIcon: { type: [Object, Function], default: null },
+});
+
+defineEmits(["update:modelValue"]);
+
+// Размер иконки в зависимости от размера инпута
+const getIconSize = () => {
+  const sizeMap = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+  };
+  return sizeMap[props.size] || 'md';
+};
+
+const BASE_CLASSES = "w-full border border-slate-200 bg-white transition-colors text-slate-700 placeholder:text-slate-400";
+
+// Адаптивные отступы для иконок в зависимости от размера инпута
+const getPaddingClasses = (hasIcon, position) => {
+  if (!hasIcon) return '';
+  const paddingMap = {
+    sm: position === 'left' ? 'pl-10' : 'pr-10',
+    md: position === 'left' ? 'pl-11' : 'pr-11',
+    lg: position === 'left' ? 'pl-12' : 'pr-12',
+  };
+  return paddingMap[props.size] || paddingMap.md;
+};
+
+// Получаем классы скругления в зависимости от позиции addon
+const getBorderRadiusClasses = () => {
+  if (addonPosition.value.hasLeftAddon && addonPosition.value.hasRightAddon) {
+    return 'rounded-none'; // Оба addon - без скругления
+  } else if (addonPosition.value.hasLeftAddon) {
+    return 'rounded-l-none rounded-r-xl'; // Только слева
+  } else if (addonPosition.value.hasRightAddon) {
+    return 'rounded-l-xl rounded-r-none'; // Только справа
+  } else {
+    return 'rounded-xl'; // Нет addon - полное скругление
+  }
+};
+
+const inputClasses = computed(() => 
+  useClassComposition(
+    `${BASE_CLASSES} ${getBorderRadiusClasses()}`,
+    {
+      [useSize(props.size, 'input')]: true,
+      'hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300': !props.disabled,
+      'opacity-60 cursor-not-allowed bg-slate-50': props.disabled,
+      'border-rose-300 focus:ring-rose-500/10': props.error,
+      [getPaddingClasses(props.prefixIcon || slots.prefix, 'left')]: true,
+      [getPaddingClasses(props.suffixIcon || slots.suffix, 'right')]: true,
+    },
+    props.inputClass
+  )
+);
+</script>
+

package/src/components/molecules/DXInput/index.js

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

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

@@ -0,0 +1,228 @@
+import DXInputGroup from './DXInputGroup.vue';
+import DXInputAddon from '../../atoms/DXInputAddon/DXInputAddon.vue';
+import DXInput from '../DXInput/DXInput.vue';
+import DXSelect from '../DXSelect/DXSelect.vue';
+import DXTextarea from '../DXTextarea/DXTextarea.vue';
+import { ref } from 'vue';
+import {
+  GlobeAltIcon,
+  CurrencyDollarIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXInputGroup',
+  component: DXInputGroup,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXInputGroup, DXInputAddon, 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: { DXInputGroup, DXInputAddon, 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 BothSides = {
+  render: () => ({
+    components: { DXInputGroup, DXInputAddon, 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>.00</DXInputAddon>
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const WithSelect = {
+  render: () => ({
+    components: { DXInputGroup, DXInputAddon, DXSelect },
+    setup() {
+      const country = ref('');
+      const countries = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'ca', label: 'Canada' },
+        { value: 'de', label: 'Germany' },
+      ];
+      return { country, countries, GlobeAltIcon };
+    },
+    template: `
+      <DXInputGroup label="Country">
+        <DXInputAddon :icon="GlobeAltIcon" />
+        <DXSelect v-model="country" :options="countries" placeholder="Select country" />
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const WithTextarea = {
+  render: () => ({
+    components: { DXInputGroup, DXInputAddon, DXTextarea },
+    setup() {
+      const message = ref('');
+      return { message, MagnifyingGlassIcon };
+    },
+    template: `
+      <DXInputGroup label="Message">
+        <DXInputAddon :icon="MagnifyingGlassIcon" />
+        <DXTextarea v-model="message" placeholder="Enter your message..." :rows="4" />
+      </DXInputGroup>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXInputGroup, DXInputAddon, 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: { DXInputGroup, DXInputAddon, 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: { DXInputGroup, DXInputAddon, 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: { DXInputGroup, DXInputAddon, DXInput, DXSelect },
+    setup() {
+      const website = ref('');
+      const price = ref('');
+      const country = ref('');
+      const countries = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'ca', label: 'Canada' },
+      ];
+      return {
+        website,
+        price,
+        country,
+        countries,
+        GlobeAltIcon,
+        CurrencyDollarIcon,
+      };
+    },
+    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="Country">
+          <DXInputAddon :icon="GlobeAltIcon" />
+          <DXSelect v-model="country" :options="countries" placeholder="Select country" />
+        </DXInputGroup>
+      </div>
+    `,
+  }),
+};
+