dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,259 @@
+import DXSelect from './DXSelect.vue';
+import { ref } from 'vue';
+import {
+  GlobeAltIcon,
+  CurrencyDollarIcon,
+  MapPinIcon,
+  BriefcaseIcon,
+  LanguageIcon,
+  FlagIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXSelect',
+  component: DXSelect,
+  tags: ['autodocs'],
+};
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+];
+
+export const Default = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const value = ref('');
+      return { value, options };
+    },
+    template: '<DXSelect v-model="value" :options="options" label="Choose fruit" placeholder="Select..." />',
+  }),
+};
+
+export const WithValue = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const value = ref('banana');
+      return { value, options };
+    },
+    template: '<DXSelect v-model="value" :options="options" label="Fruit" />',
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const value = ref('apple');
+      return { value, options };
+    },
+    template: '<DXSelect v-model="value" :options="options" label="Disabled" disabled />',
+  }),
+};
+
+// С иконками
+export const WithPrefixIcon = {
+  render: () => ({
+    components: { 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' },
+        { value: 'fr', label: 'France' },
+      ];
+      return { country, countries, GlobeAltIcon };
+    },
+    template: `
+      <DXSelect
+        v-model="country"
+        label="Country"
+        :options="countries"
+        :prefix-icon="GlobeAltIcon"
+        placeholder="Select country"
+      />
+    `,
+  }),
+};
+
+export const Currency = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const currency = ref('');
+      const currencies = [
+        { value: 'usd', label: 'USD - US Dollar' },
+        { value: 'eur', label: 'EUR - Euro' },
+        { value: 'gbp', label: 'GBP - British Pound' },
+        { value: 'jpy', label: 'JPY - Japanese Yen' },
+      ];
+      return { currency, currencies, CurrencyDollarIcon };
+    },
+    template: `
+      <DXSelect
+        v-model="currency"
+        label="Currency"
+        :options="currencies"
+        :prefix-icon="CurrencyDollarIcon"
+        placeholder="Select currency"
+      />
+    `,
+  }),
+};
+
+export const Location = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const city = ref('');
+      const cities = [
+        { value: 'nyc', label: 'New York' },
+        { value: 'lon', label: 'London' },
+        { value: 'tok', label: 'Tokyo' },
+        { value: 'par', label: 'Paris' },
+      ];
+      return { city, cities, MapPinIcon };
+    },
+    template: `
+      <DXSelect
+        v-model="city"
+        label="City"
+        :options="cities"
+        :prefix-icon="MapPinIcon"
+        placeholder="Select city"
+      />
+    `,
+  }),
+};
+
+export const FormWithIcons = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const form = ref({
+        language: '',
+        country: '',
+        currency: '',
+        role: '',
+      });
+      
+      const languages = [
+        { value: 'en', label: 'English' },
+        { value: 'es', label: 'Spanish' },
+        { value: 'fr', label: 'French' },
+      ];
+      
+      const countries = [
+        { value: 'us', label: 'United States' },
+        { value: 'uk', label: 'United Kingdom' },
+        { value: 'ca', label: 'Canada' },
+      ];
+      
+      const currencies = [
+        { value: 'usd', label: 'USD' },
+        { value: 'eur', label: 'EUR' },
+        { value: 'gbp', label: 'GBP' },
+      ];
+      
+      const roles = [
+        { value: 'dev', label: 'Developer' },
+        { value: 'des', label: 'Designer' },
+        { value: 'pm', label: 'Product Manager' },
+      ];
+      
+      return { 
+        form, languages, countries, currencies, roles,
+        LanguageIcon, GlobeAltIcon, CurrencyDollarIcon, BriefcaseIcon 
+      };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXSelect
+          v-model="form.language"
+          label="Language"
+          :options="languages"
+          :prefix-icon="LanguageIcon"
+          placeholder="Select language"
+        />
+        
+        <DXSelect
+          v-model="form.country"
+          label="Country"
+          :options="countries"
+          :prefix-icon="GlobeAltIcon"
+          placeholder="Select country"
+        />
+        
+        <DXSelect
+          v-model="form.currency"
+          label="Currency"
+          :options="currencies"
+          :prefix-icon="CurrencyDollarIcon"
+          placeholder="Select currency"
+        />
+        
+        <DXSelect
+          v-model="form.role"
+          label="Role"
+          :options="roles"
+          :prefix-icon="BriefcaseIcon"
+          placeholder="Select role"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const AllSizes = {
+  render: () => ({
+    components: { DXSelect },
+    setup() {
+      const small = ref('');
+      const medium = ref('');
+      const large = ref('');
+      const priorities = [
+        { value: 'low', label: 'Low' },
+        { value: 'med', label: 'Medium' },
+        { value: 'high', label: 'High' },
+      ];
+      return { small, medium, large, priorities, FlagIcon };
+    },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <DXSelect
+          v-model="small"
+          size="sm"
+          label="Small"
+          :options="priorities"
+          :prefix-icon="FlagIcon"
+          placeholder="Select priority"
+        />
+        
+        <DXSelect
+          v-model="medium"
+          size="md"
+          label="Medium (default)"
+          :options="priorities"
+          :prefix-icon="FlagIcon"
+          placeholder="Select priority"
+        />
+        
+        <DXSelect
+          v-model="large"
+          size="lg"
+          label="Large"
+          :options="priorities"
+          :prefix-icon="FlagIcon"
+          placeholder="Select priority"
+        />
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXSelect/DXSelect.vue

@@ -0,0 +1,149 @@
+<template>
+  <DXFormLabel
+    :label="label"
+    :error="error"
+    :helper="helper"
+    :required="required"
+    data-component="DXSelect"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-error="!!error"
+  >
+    <div class="relative">
+      <DXIconWrapper
+        v-if="prefixIcon"
+        position="left"
+        :icon="prefixIcon"
+        :size="getIconSize()"
+      />
+      
+      <select
+        :value="modelValue"
+        :disabled="disabled"
+        :class="selectClasses"
+        @change="$emit('update:modelValue', $event.target.value)"
+      >
+        <option v-if="placeholder" value="" disabled selected>{{ placeholder }}</option>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+      
+      <!-- Chevron Icon -->
+      <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+        <DXIcon :icon="ChevronDownIcon" size="sm" animation="none" class="text-slate-400" />
+      </div>
+    </div>
+  </DXFormLabel>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, onUnmounted } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { ChevronDownIcon } from "@heroicons/vue/24/outline";
+import DXFormLabel from "../../atoms/DXFormLabel/DXFormLabel.vue";
+import DXIconWrapper from "../../atoms/DXIconWrapper/DXIconWrapper.vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const inputGroup = inject("inputGroup", null);
+
+// Генерируем уникальный ID для регистрации
+const componentId = Date.now() + Math.random();
+
+onMounted(() => {
+  if (inputGroup?.registerComponent) {
+    inputGroup.registerComponent('select', 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],
+  /** Массив опций: [{ value, label }] */
+  options: { type: Array, default: () => [] },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Текст ошибки */
+  error: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Иконка слева (Heroicon компонент) */
+  prefixIcon: { type: [Object, Function], default: null },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+});
+
+defineEmits(["update:modelValue"]);
+
+// Размер иконки в зависимости от размера инпута
+const getIconSize = () => {
+  const sizeMap = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+  };
+  return sizeMap[props.size] || 'md';
+};
+
+const BASE_CLASSES = "w-full appearance-none border border-slate-200 bg-white transition-colors text-slate-700";
+
+// Адаптивные отступы для иконок в зависимости от размера
+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 selectClasses = computed(() =>
+  useClassComposition(
+    `${BASE_CLASSES} ${getBorderRadiusClasses()}`,
+    {
+      [useSize(props.size, 'input')]: true,
+      [getPaddingClasses(props.prefixIcon, 'left')]: true,
+      'pr-10': true, // Всегда справа chevron
+      '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,
+    }
+  )
+);
+</script>
+

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

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