dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXBreadcrumb/DXBreadcrumb.vue

@@ -0,0 +1,96 @@
+<template>
+  <nav aria-label="Breadcrumb" data-component="DXBreadcrumb">
+    <ol class="flex items-center flex-wrap" :class="sizeClasses">
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+        <!-- Separator -->
+        <span v-if="index > 0" class="mx-2 text-slate-400" aria-hidden="true">
+          <slot name="separator">
+            <DXIcon 
+              v-if="separator === 'chevron'" 
+              :icon="ChevronRightIcon" 
+              :size="iconSize"
+              animation="none"
+            />
+            <span v-else>/</span>
+          </slot>
+        </span>
+        
+        <!-- Item -->
+        <component
+          :is="getLinkComponent(item)"
+          :href="item.href"
+          :to="item.to"
+          :class="[
+            itemClasses,
+            index === items.length - 1 ? 'text-slate-900 font-medium' : 'text-slate-500 hover:text-slate-700',
+          ]"
+          :aria-current="index === items.length - 1 ? 'page' : undefined"
+        >
+          <DXIcon 
+            v-if="item.icon" 
+            :icon="item.icon" 
+            :size="iconSize"
+            :animation="getIconAnimation(item, index)"
+            class="mr-1.5"
+          />
+          {{ item.label }}
+        </component>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { ChevronRightIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /** Элементы: [{ label, href?, to?, icon?, iconAnimation? }] */
+  items: { type: Array, required: true },
+  /** Разделитель: slash | chevron */
+  separator: { type: String, default: "chevron" },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Анимация иконок: none | wiggle | scale | rotate */
+  iconAnimation: { type: String, default: "none" },
+  /** Анимировать только иконку текущей страницы */
+  animateCurrentOnly: { type: Boolean, default: false },
+});
+
+const sizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+};
+
+const sizeClasses = computed(() => sizes[props.size] || sizes.md);
+
+const iconSize = computed(() => {
+  if (props.size === "sm") return "xs";
+  if (props.size === "lg") return "sm";
+  return "xs";
+});
+
+const itemClasses = "inline-flex items-center transition-colors";
+
+const getLinkComponent = (item) => {
+  if (item.to) return "router-link";
+  if (item.href) return "a";
+  return "span";
+};
+
+const getIconAnimation = (item, index) => {
+  // Если у элемента своя анимация
+  if (item.iconAnimation) return item.iconAnimation;
+  
+  // Если анимировать только текущую страницу
+  if (props.animateCurrentOnly) {
+    return index === props.items.length - 1 ? props.iconAnimation : "none";
+  }
+  
+  // Глобальная анимация для всех иконок
+  return props.iconAnimation;
+};
+</script>
+

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

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

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

@@ -0,0 +1,26 @@
+import DXButtonGroup from './DXButtonGroup.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXButtonGroup',
+  component: DXButtonGroup,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXButtonGroup },
+    setup() {
+      const selected = ref('left');
+      return { selected };
+    },
+    template: `
+      <DXButtonGroup v-model="selected">
+        <button value="left" class="px-4 py-2 text-sm border border-slate-200 rounded-l-xl" :class="selected === 'left' ? 'bg-slate-900 text-white' : 'bg-white'">Left</button>
+        <button value="center" class="px-4 py-2 text-sm border-y border-slate-200" :class="selected === 'center' ? 'bg-slate-900 text-white' : 'bg-white'">Center</button>
+        <button value="right" class="px-4 py-2 text-sm border border-slate-200 rounded-r-xl" :class="selected === 'right' ? 'bg-slate-900 text-white' : 'bg-white'">Right</button>
+      </DXButtonGroup>
+    `,
+  }),
+};
+

package/src/components/molecules/DXButtonGroup/DXButtonGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <div 
+    class="inline-flex" 
+    data-component="DXButtonGroup"
+    :data-size="size"
+    :data-multiple="multiple"
+    :data-disabled="disabled"
+  >
+    <p v-if="label" class="text-sm font-medium text-slate-700 mb-2">{{ label }}</p>
+    <div
+      class="inline-flex border border-slate-200 rounded-xl overflow-hidden divide-x divide-slate-200"
+      :class="sizeClass"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { provide, computed } from "vue";
+
+const props = defineProps({
+  /** Значение (v-model) */
+  modelValue: [String, Number, Array],
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Множественный выбор */
+  multiple: { type: Boolean, default: false },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const SIZE_CLASSES = {
+  sm: "h-8",
+  md: "h-10",
+  lg: "h-12",
+};
+
+const sizeClass = computed(() => SIZE_CLASSES[props.size] || SIZE_CLASSES.md);
+
+const handleSelect = (value) => {
+  if (props.disabled) return;
+  if (props.multiple) {
+    const currentValues = Array.isArray(props.modelValue) ? props.modelValue : [];
+    const index = currentValues.indexOf(value);
+    if (index > -1) {
+      const newValues = [...currentValues];
+      newValues.splice(index, 1);
+      emit("update:modelValue", newValues);
+    } else {
+      emit("update:modelValue", [...currentValues, value]);
+    }
+  } else {
+    emit("update:modelValue", value);
+  }
+};
+
+const isSelected = (value) => {
+  if (props.multiple) {
+    return Array.isArray(props.modelValue) && props.modelValue.includes(value);
+  }
+  return props.modelValue === value;
+};
+
+provide("buttonGroup", {
+  modelValue: props.modelValue,
+  multiple: props.multiple,
+  size: props.size,
+  disabled: props.disabled,
+  handleSelect,
+  isSelected,
+});
+</script>
+

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

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

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

@@ -0,0 +1,53 @@
+import DXCloseButton from './DXCloseButton.vue';
+
+export default {
+  title: 'Molecules/DXCloseButton',
+  component: DXCloseButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'light', 'danger'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 'md',
+    variant: 'default',
+  },
+};
+
+export const Sizes = () => ({
+  components: { DXCloseButton },
+  template: `
+    <div class="flex items-center gap-4">
+      <DXCloseButton size="sm" />
+      <DXCloseButton size="md" />
+      <DXCloseButton size="lg" />
+    </div>
+  `,
+});
+
+export const Variants = () => ({
+  components: { DXCloseButton },
+  template: `
+    <div class="flex items-center gap-4">
+      <div class="p-4 bg-white border rounded">
+        <DXCloseButton variant="default" />
+      </div>
+      <div class="p-4 bg-slate-800 rounded">
+        <DXCloseButton variant="light" />
+      </div>
+      <div class="p-4 bg-white border rounded">
+        <DXCloseButton variant="danger" />
+      </div>
+    </div>
+  `,
+});
+

package/src/components/molecules/DXCloseButton/DXCloseButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <DXButton
+    :variant="buttonVariant"
+    :size="size"
+    icon-only
+    :aria-label="ariaLabel"
+    :class="customClasses"
+    @click="$emit('click', $event)"
+    data-component="DXCloseButton"
+    :data-size="size"
+    :data-variant="variant"
+  >
+    <DXIcon :icon="XMarkIcon" :size="iconSize" animation="scale" />
+  </DXButton>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import DXButton from "../../atoms/DXButton/DXButton.vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Вариант цвета: default | light | danger */
+  variant: { type: String, default: "default" },
+  /** Aria label */
+  ariaLabel: { type: String, default: "Закрыть" },
+});
+
+defineEmits(["click"]);
+
+// Маппинг вариантов DXCloseButton на варианты DXButton
+const buttonVariant = computed(() => {
+  const map = {
+    default: 'ghost',
+    light: 'ghost',
+    danger: 'danger'
+  };
+  return map[props.variant] || 'ghost';
+});
+
+// Дополнительные классы для варианта "light"
+const customClasses = computed(() => {
+  if (props.variant === 'light') {
+    return '!text-white/70 hover:!text-white hover:!bg-transparent';
+  }
+  // Для варианта "default" переопределяем цвет текста ghost кнопки
+  if (props.variant === 'default') {
+    return 'text-slate-400 hover:text-slate-600';
+  }
+  return '';
+});
+
+// Маппинг размеров для иконки
+const iconSize = computed(() => {
+  const map = { sm: 'xs', md: 'sm', lg: 'md' };
+  return map[props.size] || 'sm';
+});
+</script>
+

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

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

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

@@ -0,0 +1,62 @@
+import DXComboBox from './DXComboBox.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXComboBox',
+  component: DXComboBox,
+  tags: ['autodocs'],
+};
+
+const countries = [
+  { value: 'ru', label: 'Russia' },
+  { value: 'us', label: 'United States' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'jp', label: 'Japan' },
+];
+
+export const Default = {
+  render: () => ({
+    components: { DXComboBox },
+    setup() {
+      const value = ref('');
+      return { value, countries };
+    },
+    template: '<DXComboBox v-model="value" :options="countries" label="Country" placeholder="Search country..." />',
+  }),
+};
+
+export const WithValue = {
+  render: () => ({
+    components: { DXComboBox },
+    setup() {
+      const value = ref('ru');
+      return { value, countries };
+    },
+    template: '<DXComboBox v-model="value" :options="countries" label="Country" />',
+  }),
+};
+
+export const AllowCustom = {
+  render: () => ({
+    components: { DXComboBox },
+    setup() {
+      const value = ref('');
+      return { value, countries };
+    },
+    template: '<DXComboBox v-model="value" :options="countries" label="Country" placeholder="Type or select..." allow-custom helper="You can type a custom value" />',
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXComboBox },
+    setup() {
+      const value = ref('us');
+      return { value, countries };
+    },
+    template: '<DXComboBox v-model="value" :options="countries" label="Country" disabled />',
+  }),
+};
+

package/src/components/molecules/DXComboBox/DXComboBox.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="relative" ref="root" data-component="DXComboBox">
+    <label v-if="label" class="block text-sm font-medium text-slate-700 mb-1">{{ label }}</label>
+    
+    <!-- Input Field -->
+    <div class="relative">
+      <input
+        ref="inputRef"
+        v-model="inputValue"
+        type="text"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="w-full pr-10 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 hover:border-slate-300 focus:border-slate-300 focus:outline-none transition-colors"
+        :class="disabled && 'opacity-60 cursor-not-allowed bg-slate-50'"
+        @input="handleInput"
+        @focus="handleFocus"
+        @keydown.down.prevent="navigateDown"
+        @keydown.up.prevent="navigateUp"
+        @keydown.enter.prevent="selectHighlighted"
+        @keydown.escape="open = false"
+      />
+      <svg
+        class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none 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>
+    </div>
+    
+    <!-- Dropdown -->
+    <div
+      v-if="open && (filtered.length > 0 || (allowCustom && inputValue))"
+      class="absolute z-20 mt-2 w-full bg-white border border-slate-200 rounded-xl shadow-lg py-2 max-h-48 overflow-y-auto"
+    >
+      <button
+        v-for="(opt, index) in filtered"
+        :key="opt.value"
+        type="button"
+        class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 flex items-center justify-between"
+        :class="{ 'bg-slate-100': index === highlightedIndex }"
+        @click="selectOption(opt)"
+        @mouseenter="highlightedIndex = index"
+      >
+        <span class="flex items-center gap-2">
+          <component v-if="opt.icon" :is="opt.icon" class="w-4 h-4 text-slate-500" />
+          {{ opt.label }}
+        </span>
+        <svg v-if="modelValue === opt.value" class="w-4 h-4 text-slate-900" 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>
+      
+      <div
+        v-if="filtered.length === 0 && inputValue"
+        class="px-4 py-2 text-sm text-slate-500"
+      >
+        <span v-if="allowCustom">Нажмите Enter для "{{ inputValue }}"</span>
+        <span v-else>Не найдено</span>
+      </div>
+    </div>
+    
+    <p v-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  modelValue: [String, Number],
+  options: { type: Array, default: () => [] },
+  label: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  helper: { type: String, default: "" },
+  disabled: { type: Boolean, default: false },
+  filterable: { type: Boolean, default: true },
+  allowCustom: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const root = ref(null);
+const inputRef = ref(null);
+const inputValue = ref("");
+const open = ref(false);
+const highlightedIndex = ref(0);
+
+const currentOption = computed(() => {
+  return props.options.find((o) => o.value === props.modelValue);
+});
+
+const filtered = computed(() => {
+  if (!props.filterable || !inputValue.value) {
+    return props.options;
+  }
+  const term = inputValue.value.toLowerCase();
+  return props.options.filter((o) => o.label.toLowerCase().includes(term));
+});
+
+const handleInput = () => {
+  open.value = true;
+  highlightedIndex.value = 0;
+  
+  if (!props.filterable) return;
+  
+  const exactMatch = props.options.find((o) => o.label === inputValue.value);
+  if (!exactMatch && !props.allowCustom) {
+    emit("update:modelValue", null);
+  }
+};
+
+const handleFocus = () => {
+  open.value = true;
+  highlightedIndex.value = 0;
+};
+
+const selectOption = (option) => {
+  inputValue.value = option.label;
+  emit("update:modelValue", option.value);
+  open.value = false;
+};
+
+const navigateDown = () => {
+  if (!open.value) {
+    open.value = true;
+    return;
+  }
+  if (highlightedIndex.value < filtered.value.length - 1) {
+    highlightedIndex.value++;
+  }
+};
+
+const navigateUp = () => {
+  if (highlightedIndex.value > 0) {
+    highlightedIndex.value--;
+  }
+};
+
+const selectHighlighted = () => {
+  if (open.value && filtered.value.length > 0) {
+    const option = filtered.value[highlightedIndex.value];
+    if (option) selectOption(option);
+  } else if (props.allowCustom && inputValue.value) {
+    emit("update:modelValue", inputValue.value);
+    open.value = false;
+  }
+};
+
+const onClickOutside = (e) => {
+  if (root.value && !root.value.contains(e.target)) {
+    open.value = false;
+    if (!props.allowCustom && currentOption.value) {
+      inputValue.value = currentOption.value.label;
+    }
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  const option = props.options.find((o) => o.value === newVal);
+  inputValue.value = option ? option.label : (props.allowCustom ? String(newVal || "") : "");
+}, { immediate: true });
+
+onMounted(() => document.addEventListener("click", onClickOutside));
+onBeforeUnmount(() => document.removeEventListener("click", onClickOutside));
+</script>
+

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

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