dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXSearchSelect/DXSearchSelect.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="relative" ref="root" data-component="DXSearchSelect">
+    <label v-if="label" class="block text-sm text-slate-600 mb-1 font-medium">{{ label }}</label>
+    
+    <!-- Multiple: Tags Display -->
+    <div v-if="multiple && selectedOptions.length > 0" class="flex flex-wrap gap-2 mb-2">
+      <span
+        v-for="option in selectedOptions"
+        :key="option.value"
+        class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-slate-100 text-slate-700 rounded-lg"
+      >
+        <component v-if="option.icon" :is="option.icon" class="w-3 h-3" />
+        {{ option.label }}
+        <button type="button" class="hover:text-slate-900" @click.stop="removeOption(option.value)">
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </span>
+    </div>
+
+    <!-- Trigger Button -->
+    <button
+      type="button"
+      class="w-full flex items-center justify-between h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white transition-colors"
+      :class="[
+        !open && 'hover:border-slate-300',
+        open && 'ring-2 ring-slate-900/10 border-slate-300',
+      ]"
+      @click="toggle"
+    >
+      <span class="truncate flex items-center gap-2">
+        <component v-if="!multiple && selectedOption?.icon" :is="selectedOption.icon" class="w-4 h-4 text-slate-500" />
+        {{ displayLabel }}
+      </span>
+      <svg class="w-4 h-4 text-slate-400 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+    
+    <!-- Dropdown Menu -->
+    <div v-if="open" class="absolute z-20 mt-2 w-full bg-white border border-slate-200 rounded-xl shadow-lg p-3 space-y-2">
+      <!-- Search Input -->
+      <div class="relative">
+        <input
+          ref="searchInput"
+          v-model="search"
+          class="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900/10"
+          :placeholder="searchPlaceholder"
+          @keydown.stop
+          @keydown.escape="open = false"
+        />
+        <svg class="absolute right-3 top-2.5 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+      
+      <!-- Options List -->
+      <div class="max-h-48 overflow-y-auto space-y-1">
+        <button
+          v-for="opt in filtered"
+          :key="opt.value"
+          type="button"
+          class="w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-sm flex items-center justify-between gap-2"
+          :class="{ 'bg-slate-100': isSelected(opt.value) }"
+          @click="select(opt.value)"
+        >
+          <span class="flex items-center gap-2 flex-1 truncate">
+            <component v-if="opt.icon" :is="opt.icon" class="w-4 h-4 text-slate-500" />
+            {{ opt.label }}
+          </span>
+          <svg v-if="isSelected(opt.value)" class="w-4 h-4 text-slate-900 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        </button>
+        
+        <!-- Create New Option -->
+        <button
+          v-if="creatable && search && !filtered.length"
+          type="button"
+          class="w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-sm flex items-center gap-2 text-slate-600"
+          @click="createOption"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          Создать "{{ search }}"
+        </button>
+        
+        <p v-else-if="!filtered.length" class="text-xs text-slate-500 px-3 py-2">Не найдено</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
+
+const props = defineProps({
+  /** Значение (v-model) - строка или массив для multiple */
+  modelValue: [String, Number, Array],
+  /** Опции: [{ value, label, icon? }] */
+  options: { type: Array, default: () => [] },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Placeholder */
+  placeholder: { type: String, default: "Выбрать" },
+  /** Placeholder поиска */
+  searchPlaceholder: { type: String, default: "Поиск..." },
+  /** Множественный выбор */
+  multiple: { type: Boolean, default: false },
+  /** Возможность создавать новые опции */
+  creatable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue", "create"]);
+
+const open = ref(false);
+const search = ref("");
+const root = ref(null);
+const searchInput = ref(null);
+
+const selectedOption = computed(() => {
+  if (props.multiple) return null;
+  return props.options.find((o) => String(o.value) === String(props.modelValue));
+});
+
+const selectedOptions = computed(() => {
+  if (!props.multiple) return [];
+  const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+  return props.options.filter((o) => values.includes(o.value));
+});
+
+const displayLabel = computed(() => {
+  if (props.multiple) {
+    const count = selectedOptions.value.length;
+    return count > 0 ? `Выбрано: ${count}` : props.placeholder;
+  }
+  return selectedOption.value ? selectedOption.value.label : props.placeholder;
+});
+
+const filtered = computed(() => {
+  const term = search.value.toLowerCase().trim();
+  if (!term) return props.options;
+  return props.options.filter((o) => o.label.toLowerCase().includes(term));
+});
+
+const isSelected = (value) => {
+  if (props.multiple) {
+    const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+    return values.includes(value);
+  }
+  return props.modelValue === value;
+};
+
+const toggle = () => {
+  open.value = !open.value;
+  if (open.value) {
+    nextTick(() => searchInput.value?.focus());
+  }
+};
+
+const select = (val) => {
+  if (props.multiple) {
+    const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+    const index = values.indexOf(val);
+    if (index > -1) {
+      const newValues = [...values];
+      newValues.splice(index, 1);
+      emit("update:modelValue", newValues);
+    } else {
+      emit("update:modelValue", [...values, val]);
+    }
+  } else {
+    emit("update:modelValue", val);
+    open.value = false;
+  }
+  search.value = "";
+};
+
+const removeOption = (val) => {
+  if (props.multiple) {
+    const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+    emit("update:modelValue", values.filter((v) => v !== val));
+  }
+};
+
+const createOption = () => {
+  if (props.creatable && search.value) {
+    emit("create", search.value);
+    search.value = "";
+  }
+};
+
+const onClickOutside = (e) => {
+  if (root.value && !root.value.contains(e.target)) {
+    open.value = false;
+    search.value = "";
+  }
+};
+
+watch(open, (newVal) => { if (!newVal) search.value = ""; });
+
+onMounted(() => document.addEventListener("click", onClickOutside));
+onBeforeUnmount(() => document.removeEventListener("click", onClickOutside));
+</script>
+

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

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

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

@@ -0,0 +1,326 @@
+import DXSegmentedControl from './DXSegmentedControl.vue';
+import { ref } from 'vue';
+import {
+  Squares2X2Icon,
+  ListBulletIcon,
+  TableCellsIcon,
+  HomeIcon,
+  UserIcon,
+  Cog6ToothIcon,
+  BellIcon,
+  EnvelopeIcon,
+  ChatBubbleLeftIcon,
+  SunIcon,
+  MoonIcon,
+  ComputerDesktopIcon,
+  ChartBarIcon,
+  DocumentTextIcon,
+  PhotoIcon,
+  VideoCameraIcon,
+  MusicalNoteIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXSegmentedControl',
+  component: DXSegmentedControl,
+  tags: ['autodocs'],
+  argTypes: {
+    iconAnimation: {
+      control: 'select',
+      options: ['none', 'wiggle', 'scale', 'rotate'],
+    },
+  },
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const selected = ref('all');
+      const options = [
+        { value: 'all', label: 'All' },
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ];
+      return { selected, options };
+    },
+    template: '<DXSegmentedControl v-model="selected" :options="options" />',
+  }),
+};
+
+export const WithCounts = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const selected = ref('all');
+      const options = [
+        { value: 'all', label: 'All', count: 42 },
+        { value: 'active', label: 'Active', count: 28 },
+        { value: 'archived', label: 'Archived', count: 14 },
+      ];
+      return { selected, options };
+    },
+    template: '<DXSegmentedControl v-model="selected" :options="options" />',
+  }),
+};
+
+export const WithIcons = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const view = ref('grid');
+      const options = [
+        { value: 'grid', icon: Squares2X2Icon, label: 'Grid' },
+        { value: 'list', icon: ListBulletIcon, label: 'List' },
+        { value: 'table', icon: TableCellsIcon, label: 'Table' },
+      ];
+      return { view, options };
+    },
+    template: '<DXSegmentedControl v-model="view" :options="options" />',
+  }),
+};
+
+export const IconsOnly = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const view = ref('grid');
+      const options = [
+        { value: 'grid', icon: Squares2X2Icon },
+        { value: 'list', icon: ListBulletIcon },
+        { value: 'table', icon: TableCellsIcon },
+      ];
+      return { view, options };
+    },
+    template: '<DXSegmentedControl v-model="view" :options="options" />',
+  }),
+};
+
+export const Navigation = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const page = ref('home');
+      const options = [
+        { value: 'home', icon: HomeIcon, label: 'Home' },
+        { value: 'profile', icon: UserIcon, label: 'Profile' },
+        { value: 'settings', icon: Cog6ToothIcon, label: 'Settings' },
+      ];
+      return { page, options };
+    },
+    template: '<DXSegmentedControl v-model="page" :options="options" />',
+  }),
+};
+
+export const NotificationTypes = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const type = ref('all');
+      const options = [
+        { value: 'all', icon: BellIcon, label: 'All', count: 42 },
+        { value: 'email', icon: EnvelopeIcon, label: 'Email', count: 12 },
+        { value: 'chat', icon: ChatBubbleLeftIcon, label: 'Chat', count: 30 },
+      ];
+      return { type, options };
+    },
+    template: '<DXSegmentedControl v-model="type" :options="options" />',
+  }),
+};
+
+export const ThemeSelector = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const theme = ref('light');
+      const options = [
+        { value: 'light', icon: SunIcon, label: 'Light' },
+        { value: 'dark', icon: MoonIcon, label: 'Dark' },
+        { value: 'auto', icon: ComputerDesktopIcon, label: 'Auto' },
+      ];
+      return { theme, options };
+    },
+    template: '<DXSegmentedControl v-model="theme" :options="options" />',
+  }),
+};
+
+export const MediaTypes = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const media = ref('all');
+      const options = [
+        { value: 'all', icon: DocumentTextIcon, count: 156 },
+        { value: 'photos', icon: PhotoIcon, count: 89 },
+        { value: 'videos', icon: VideoCameraIcon, count: 45 },
+        { value: 'audio', icon: MusicalNoteIcon, count: 22 },
+      ];
+      return { media, options };
+    },
+    template: '<DXSegmentedControl v-model="media" :options="options" icon-animation="scale" />',
+  }),
+};
+
+export const AnimatedIcons = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const wiggle = ref('grid');
+      const scale = ref('grid');
+      const rotate = ref('grid');
+      const options = [
+        { value: 'grid', icon: Squares2X2Icon },
+        { value: 'list', icon: ListBulletIcon },
+        { value: 'table', icon: TableCellsIcon },
+      ];
+      return { wiggle, scale, rotate, options };
+    },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Wiggle Animation</p>
+          <DXSegmentedControl v-model="wiggle" :options="options" icon-animation="wiggle" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Scale Animation</p>
+          <DXSegmentedControl v-model="scale" :options="options" icon-animation="scale" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Rotate Animation</p>
+          <DXSegmentedControl v-model="rotate" :options="options" icon-animation="rotate" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AnimateAll = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const view = ref('grid');
+      const options = [
+        { value: 'grid', icon: Squares2X2Icon, label: 'Grid' },
+        { value: 'list', icon: ListBulletIcon, label: 'List' },
+        { value: 'table', icon: TableCellsIcon, label: 'Table' },
+      ];
+      return { view, options };
+    },
+    template: '<DXSegmentedControl v-model="view" :options="options" icon-animation="wiggle" :animate-active-only="false" />',
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const selected = ref('option1');
+      const options = [
+        { value: 'option1', icon: HomeIcon, label: 'Option 1' },
+        { value: 'option2', icon: UserIcon, label: 'Option 2' },
+      ];
+      return { selected, options };
+    },
+    template: '<DXSegmentedControl v-model="selected" :options="options" disabled />',
+  }),
+};
+
+export const Interactive = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const tab = ref('data');
+      const options = [
+        { value: 'data', icon: ChartBarIcon, label: 'Analytics', count: 24 },
+        { value: 'messages', icon: EnvelopeIcon, label: 'Messages', count: 5 },
+        { value: 'notifications', icon: BellIcon, label: 'Alerts', count: 12 },
+      ];
+      return { tab, options };
+    },
+    template: `
+      <div class="p-6 bg-slate-50 rounded-xl space-y-4">
+        <h3 class="text-lg font-semibold text-slate-900">Dashboard Tabs</h3>
+        <DXSegmentedControl 
+          v-model="tab" 
+          :options="options" 
+          icon-animation="wiggle"
+        />
+        <div class="p-4 bg-white rounded-lg border border-slate-200">
+          <p class="text-sm text-slate-600">
+            Current tab: <strong class="text-slate-900">{{ tab }}</strong>
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AllVariants = {
+  render: () => ({
+    components: { DXSegmentedControl },
+    setup() {
+      const simple = ref('all');
+      const withCounts = ref('all');
+      const withIcons = ref('grid');
+      const iconsOnly = ref('grid');
+      const animated = ref('grid');
+      
+      const simpleOptions = [
+        { value: 'all', label: 'All' },
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ];
+      
+      const countOptions = [
+        { value: 'all', label: 'All', count: 42 },
+        { value: 'active', label: 'Active', count: 28 },
+        { value: 'archived', label: 'Archived', count: 14 },
+      ];
+      
+      const iconOptions = [
+        { value: 'grid', icon: Squares2X2Icon, label: 'Grid' },
+        { value: 'list', icon: ListBulletIcon, label: 'List' },
+        { value: 'table', icon: TableCellsIcon, label: 'Table' },
+      ];
+      
+      const iconOnlyOptions = [
+        { value: 'grid', icon: Squares2X2Icon },
+        { value: 'list', icon: ListBulletIcon },
+        { value: 'table', icon: TableCellsIcon },
+      ];
+      
+      return { simple, withCounts, withIcons, iconsOnly, animated, simpleOptions, countOptions, iconOptions, iconOnlyOptions };
+    },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Simple</p>
+          <DXSegmentedControl v-model="simple" :options="simpleOptions" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">With Counts</p>
+          <DXSegmentedControl v-model="withCounts" :options="countOptions" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">With Icons</p>
+          <DXSegmentedControl v-model="withIcons" :options="iconOptions" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Icons Only</p>
+          <DXSegmentedControl v-model="iconsOnly" :options="iconOnlyOptions" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Animated Icons</p>
+          <DXSegmentedControl v-model="animated" :options="iconOnlyOptions" icon-animation="scale" />
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXSegmentedControl/DXSegmentedControl.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="inline-flex" data-component="DXSegmentedControl">
+    <p v-if="label" class="text-sm font-medium text-slate-700 mb-2">{{ label }}</p>
+    <div class="relative inline-flex p-1 bg-slate-100 rounded-xl gap-1">
+      <!-- Floating indicator -->
+      <div
+        class="absolute bg-white rounded-lg shadow-sm transition-all duration-200 ease-out"
+        :style="indicatorStyle"
+      />
+      
+      <!-- Buttons -->
+      <button
+        v-for="(option, index) in options"
+        :key="option.value"
+        type="button"
+        :ref="el => { if (el) buttonRefs[index] = el }"
+        class="relative z-10 px-4 py-1.5 text-sm font-medium transition-colors duration-150 rounded-lg whitespace-nowrap min-w-[60px] text-center inline-flex items-center justify-center gap-1.5"
+        :class="[
+          modelValue === option.value
+            ? 'text-slate-900'
+            : 'text-slate-600 hover:text-slate-900',
+          disabled && 'opacity-60 cursor-not-allowed',
+        ]"
+        :disabled="disabled"
+        @click="select(option.value)"
+      >
+        <DXIcon 
+          v-if="option.icon" 
+          :icon="option.icon" 
+          size="xs"
+          :animation="getIconAnimation(option)"
+        />
+        <span v-if="option.label">{{ option.label }}</span>
+        <span
+          v-if="option.count !== undefined && option.count !== null"
+          class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-semibold rounded-full"
+          :class="modelValue === option.value 
+            ? 'bg-slate-800 text-white' 
+            : 'bg-slate-200 text-slate-700'"
+        >
+          {{ option.count }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from "vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  modelValue: [String, Number, Boolean],
+  options: {
+    type: Array,
+    required: true,
+  },
+  label: { type: String, default: "" },
+  /** Анимация иконок: none | wiggle | scale | rotate */
+  iconAnimation: { type: String, default: "none" },
+  /** Анимировать только активную иконку */
+  animateActiveOnly: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const buttonRefs = ref([]);
+const indicatorStyle = ref({});
+
+const selectedIndex = computed(() => {
+  return props.options.findIndex((opt) => opt.value === props.modelValue);
+});
+
+const updateIndicator = () => {
+  const index = selectedIndex.value;
+  if (index >= 0 && buttonRefs.value[index]) {
+    const button = buttonRefs.value[index];
+    indicatorStyle.value = {
+      width: `${button.offsetWidth}px`,
+      height: `${button.offsetHeight}px`,
+      left: `${button.offsetLeft}px`,
+      top: `${button.offsetTop}px`,
+    };
+  }
+};
+
+const select = (value) => {
+  if (!props.disabled) {
+    emit("update:modelValue", value);
+  }
+};
+
+// Определяет анимацию для иконки
+const getIconAnimation = (option) => {
+  // Если анимация отключена
+  if (props.iconAnimation === 'none') return 'none';
+  
+  // Если анимировать только активную иконку
+  if (props.animateActiveOnly) {
+    return props.modelValue === option.value ? props.iconAnimation : 'none';
+  }
+  
+  // Анимировать все иконки
+  return props.iconAnimation;
+};
+
+watch(() => props.modelValue, () => {
+  nextTick(updateIndicator);
+});
+
+onMounted(() => {
+  nextTick(updateIndicator);
+});
+</script>
+

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

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