dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXDataFilter/DXDataFilter.vue

@@ -0,0 +1,385 @@
+<template>
+  <div
+    :class="filterClasses"
+    data-component="DXDataFilter"
+    :data-grouping="grouping"
+  >
+    <!-- Заголовок -->
+    <div v-if="title || $slots.header" :class="headerClasses">
+      <slot name="header">
+        <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+          {{ title }}
+        </h3>
+      </slot>
+    </div>
+
+    <!-- Группы фильтров -->
+    <div :class="filtersClasses">
+      <div
+        v-for="(group, groupIndex) in filterGroups"
+        :key="groupIndex"
+        :class="groupClasses"
+      >
+        <!-- Группировка AND/OR -->
+        <div v-if="groupIndex > 0" :class="groupingClasses">
+          <DXButton
+            :variant="grouping === 'AND' ? 'primary' : 'ghost'"
+            size="sm"
+            @click="toggleGrouping"
+          >
+            {{ grouping }}
+          </DXButton>
+        </div>
+
+        <!-- Фильтры в группе -->
+        <div :class="filtersInGroupClasses">
+          <div
+            v-for="(filter, filterIndex) in group"
+            :key="filter.id || filterIndex"
+            :class="filterItemClasses"
+          >
+            <!-- Удаление фильтра -->
+            <DXButton
+              v-if="removable"
+              variant="ghost"
+              size="sm"
+              @click="removeFilter(filter.id)"
+            >
+              <template #icon>
+                <DXIcon :icon="XMarkIcon" size="sm" />
+              </template>
+            </DXButton>
+
+            <!-- Определение фильтра -->
+            <div class="flex-1">
+              <label class="block text-sm font-medium text-slate-700 mb-1">
+                {{ filter.label || filterDefinitions[filter.id]?.label }}
+              </label>
+
+              <!-- Текстовый фильтр -->
+              <DXInput
+                v-if="filter.type === 'text' || !filter.type"
+                v-model="filter.value"
+                :placeholder="filter.placeholder || 'Введите значение'"
+                @update:model-value="handleFilterChange"
+              />
+
+              <!-- Числовой фильтр -->
+              <div v-else-if="filter.type === 'number'" class="flex gap-2">
+                <DXInput
+                  v-model="filter.value.min"
+                  type="number"
+                  placeholder="От"
+                  @update:model-value="handleFilterChange"
+                />
+                <DXInput
+                  v-model="filter.value.max"
+                  type="number"
+                  placeholder="До"
+                  @update:model-value="handleFilterChange"
+                />
+              </div>
+
+              <!-- Select фильтр -->
+              <DXSelect
+                v-else-if="filter.type === 'select'"
+                v-model="filter.value"
+                :options="filter.options || filterDefinitions[filter.id]?.options"
+                :placeholder="filter.placeholder || 'Выберите значение'"
+                @update:model-value="handleFilterChange"
+              />
+
+              <!-- Date фильтр -->
+              <DXDatePicker
+                v-else-if="filter.type === 'date'"
+                v-model="filter.value"
+                :range="filter.range"
+                @update:model-value="handleFilterChange"
+              />
+
+              <!-- Кастомный фильтр через slot -->
+              <slot
+                v-else
+                :name="`filter-${filter.type}`"
+                :filter="filter"
+                :filter-definition="filterDefinitions[filter.id]"
+              >
+                <p class="text-sm text-slate-500">
+                  Используйте slot filter-{{ filter.type }} для кастомного фильтра
+                </p>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Действия -->
+    <div v-if="$slots.actions || showActions" :class="actionsClasses">
+      <slot name="actions">
+        <DXButton variant="ghost" @click="handleReset">Сбросить</DXButton>
+        <DXButton variant="primary" @click="handleApply">Применить</DXButton>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { useSpacing } from "@/composables/useSpacing";
+import DXInput from "../DXInput/DXInput.vue";
+import DXSelect from "../DXSelect/DXSelect.vue";
+import DXDatePicker from "../DXDatePicker/DXDatePicker.vue";
+import DXButton from "../../atoms/DXButton/DXButton.vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /**
+   * Активные фильтры (v-model)
+   * Формат: [{ id, type, value, label?, placeholder?, options?, range? }]
+   */
+  filters: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  /**
+   * Определения фильтров
+   * Формат: [{ id, label, type, options?, placeholder? }]
+   */
+  filterDefinitions: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Группировка условий: AND | OR
+   * @default 'AND'
+   */
+  grouping: {
+    type: String,
+    default: "AND",
+    validator: (v) => ["AND", "OR"].includes(v),
+  },
+  /**
+   * Заголовок фильтра
+   */
+  title: { type: String, default: "" },
+  /**
+   * Можно ли удалять фильтры
+   * @default true
+   */
+  removable: { type: Boolean, default: true },
+  /**
+   * Показывать кнопки действий
+   * @default true
+   */
+  showActions: { type: Boolean, default: true },
+});
+
+const emit = defineEmits([
+  "update:filters",
+  "apply",
+  "reset",
+  "filter-change",
+  "grouping-change",
+]);
+
+const internalFilters = ref([...props.filters]);
+const internalGrouping = ref(props.grouping);
+
+/**
+ * Группы фильтров
+ * 
+ * @description
+ * Разбивает фильтры на группы для отображения с группировкой AND/OR.
+ * 
+ * @returns {Array} Массив групп фильтров
+ */
+const filterGroups = computed(() => {
+  // Упрощенная логика: все фильтры в одной группе
+  // В реальной реализации можно разбивать на несколько групп
+  return [internalFilters.value];
+});
+
+/**
+ * Классы для контейнера фильтра
+ * 
+ * @description
+ * Базовые классы для контейнера фильтра.
+ * 
+ * @returns {Array} Массив классов
+ */
+const filterClasses = computed(() =>
+  useClassComposition("w-full")
+);
+
+/**
+ * Классы для header
+ * 
+ * @description
+ * Классы для секции заголовка.
+ * 
+ * @returns {Array} Массив классов
+ */
+const headerClasses = computed(() =>
+  useClassComposition("mb-4", useSpacing("md", "padding"))
+);
+
+/**
+ * Классы для контейнера фильтров
+ * 
+ * @description
+ * Классы для контейнера с фильтрами.
+ * 
+ * @returns {Array} Массив классов
+ */
+const filtersClasses = computed(() =>
+  useClassComposition("space-y-4")
+);
+
+/**
+ * Классы для группы фильтров
+ * 
+ * @description
+ * Классы для группы фильтров.
+ * 
+ * @returns {Array} Массив классов
+ */
+const groupClasses = computed(() =>
+  useClassComposition("space-y-2")
+);
+
+/**
+ * Классы для группировки AND/OR
+ * 
+ * @description
+ * Классы для кнопки группировки.
+ * 
+ * @returns {Array} Массив классов
+ */
+const groupingClasses = computed(() =>
+  useClassComposition("flex items-center justify-center py-2")
+);
+
+/**
+ * Классы для фильтров в группе
+ * 
+ * @description
+ * Классы для контейнера фильтров в группе.
+ * 
+ * @returns {Array} Массив классов
+ */
+const filtersInGroupClasses = computed(() =>
+  useClassComposition("space-y-3")
+);
+
+/**
+ * Классы для элемента фильтра
+ * 
+ * @description
+ * Классы для каждого элемента фильтра.
+ * 
+ * @returns {Array} Массив классов
+ */
+const filterItemClasses = computed(() =>
+  useClassComposition("flex items-start gap-2")
+);
+
+/**
+ * Классы для секции действий
+ * 
+ * @description
+ * Классы для секции с кнопками действий.
+ * 
+ * @returns {Array} Массив классов
+ */
+const actionsClasses = computed(() =>
+  useClassComposition(
+    "flex items-center justify-end gap-2 mt-4",
+    useSpacing("md", "padding")
+  )
+);
+
+/**
+ * Обработчик изменения фильтра
+ * 
+ * @description
+ * Эмитит событие при изменении значения фильтра.
+ */
+function handleFilterChange() {
+  emit("update:filters", [...internalFilters.value]);
+  emit("filter-change", [...internalFilters.value]);
+}
+
+/**
+ * Переключение группировки
+ * 
+ * @description
+ * Переключает группировку между AND и OR.
+ */
+function toggleGrouping() {
+  internalGrouping.value = internalGrouping.value === "AND" ? "OR" : "AND";
+  emit("grouping-change", internalGrouping.value);
+}
+
+/**
+ * Удаление фильтра
+ * 
+ * @description
+ * Удаляет фильтр по ID.
+ * 
+ * @param {string|number} filterId - ID фильтра
+ */
+function removeFilter(filterId) {
+  internalFilters.value = internalFilters.value.filter(
+    (f) => f.id !== filterId
+  );
+  handleFilterChange();
+}
+
+/**
+ * Применение фильтров
+ * 
+ * @description
+ * Эмитит событие применения фильтров.
+ */
+function handleApply() {
+  emit("apply", {
+    filters: [...internalFilters.value],
+    grouping: internalGrouping.value,
+  });
+}
+
+/**
+ * Сброс фильтров
+ * 
+ * @description
+ * Сбрасывает все фильтры.
+ */
+function handleReset() {
+  internalFilters.value = [];
+  internalGrouping.value = "AND";
+  emit("reset");
+  emit("update:filters", []);
+}
+
+// Синхронизация с prop filters
+watch(
+  () => props.filters,
+  (newFilters) => {
+    internalFilters.value = [...newFilters];
+  },
+  { deep: true }
+);
+
+// Синхронизация с prop grouping
+watch(
+  () => props.grouping,
+  (newGrouping) => {
+    internalGrouping.value = newGrouping;
+  }
+);
+</script>
+

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

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

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

@@ -0,0 +1,42 @@
+import DXDatePicker from './DXDatePicker.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXDatePicker',
+  component: DXDatePicker,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXDatePicker },
+    setup() {
+      const date = ref('');
+      return { date };
+    },
+    template: '<DXDatePicker v-model="date" label="Date" />',
+  }),
+};
+
+export const WithValue = {
+  render: () => ({
+    components: { DXDatePicker },
+    setup() {
+      const date = ref('2024-01-15');
+      return { date };
+    },
+    template: '<DXDatePicker v-model="date" label="Selected Date" />',
+  }),
+};
+
+export const WithPlaceholder = {
+  render: () => ({
+    components: { DXDatePicker },
+    setup() {
+      const date = ref('');
+      return { date };
+    },
+    template: '<DXDatePicker v-model="date" label="Birth Date" placeholder="Select your birth date" />',
+  }),
+};
+

package/src/components/molecules/DXDatePicker/DXDatePicker.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="w-full" data-component="DXDatePicker">
+    <label v-if="label" class="block text-sm text-slate-600 mb-1 font-medium">{{ label }}</label>
+    <div class="relative">
+      <input
+        :type="range ? 'text' : 'date'"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="w-full h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 transition-colors hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed disabled:bg-slate-50"
+        :readonly="range"
+        @change="!range && handleChange($event.target.value)"
+        @click="range && toggleCalendar()"
+      />
+      <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+      </svg>
+    </div>
+    
+    <!-- Range Picker -->
+    <div v-if="range && showCalendar" class="absolute z-20 mt-2 p-4 bg-white border border-slate-200 rounded-xl shadow-lg">
+      <div class="space-y-3">
+        <div>
+          <label class="text-xs text-slate-600">От</label>
+          <input
+            type="date"
+            v-model="rangeStart"
+            class="w-full mt-1 px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900/10"
+          />
+        </div>
+        <div>
+          <label class="text-xs text-slate-600">До</label>
+          <input
+            type="date"
+            v-model="rangeEnd"
+            class="w-full mt-1 px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900/10"
+          />
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="flex-1 px-3 py-2 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-800"
+            @click="applyRange"
+          >
+            Применить
+          </button>
+          <button
+            type="button"
+            class="px-3 py-2 text-sm border border-slate-200 rounded-lg hover:bg-slate-50"
+            @click="showCalendar = false"
+          >
+            Отмена
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <p v-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  /** Значение (v-model) - строка или { start, end } для range */
+  modelValue: [String, Object],
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Режим диапазона */
+  range: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const showCalendar = ref(false);
+const rangeStart = ref("");
+const rangeEnd = ref("");
+
+const displayValue = computed(() => {
+  if (props.range && typeof props.modelValue === "object" && props.modelValue) {
+    const { start, end } = props.modelValue;
+    if (start && end) {
+      return `${formatDate(start)} - ${formatDate(end)}`;
+    }
+    return "";
+  }
+  return props.modelValue || "";
+});
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("ru-RU");
+};
+
+const handleChange = (value) => emit("update:modelValue", value);
+
+const toggleCalendar = () => {
+  if (props.disabled) return;
+  showCalendar.value = !showCalendar.value;
+  if (showCalendar.value && typeof props.modelValue === "object" && props.modelValue) {
+    rangeStart.value = props.modelValue.start || "";
+    rangeEnd.value = props.modelValue.end || "";
+  }
+};
+
+const applyRange = () => {
+  if (rangeStart.value && rangeEnd.value) {
+    emit("update:modelValue", { start: rangeStart.value, end: rangeEnd.value });
+  }
+  showCalendar.value = false;
+};
+</script>
+

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

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

package/src/components/molecules/DXDropdownDivider/DXDropdownDivider.vue

@@ -0,0 +1,30 @@
+<template>
+  <DXDivider
+    :color="color"
+    :thickness="thickness"
+    spacing="none"
+    orientation="horizontal"
+    data-component="DXDropdownDivider"
+    :data-color="color"
+  />
+</template>
+
+<script setup>
+import DXDivider from '../../atoms/DXDivider/DXDivider.vue';
+
+const props = defineProps({
+  /** Цвет разделителя: light | default | dark */
+  color: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'light', 'dark'].includes(value)
+  },
+  /** Толщина: thin | default | thick */
+  thickness: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['thin', 'default', 'thick'].includes(value)
+  }
+});
+</script>
+

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

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

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

@@ -0,0 +1,53 @@
+import DXFileUpload from './DXFileUpload.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXFileUpload',
+  component: DXFileUpload,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXFileUpload },
+    setup() {
+      const file = ref(null);
+      return { file };
+    },
+    template: '<DXFileUpload v-model="file" label="Upload file" />',
+  }),
+};
+
+export const Multiple = {
+  render: () => ({
+    components: { DXFileUpload },
+    setup() {
+      const files = ref([]);
+      return { files };
+    },
+    template: '<DXFileUpload v-model="files" label="Upload files" multiple />',
+  }),
+};
+
+export const ImagesOnly = {
+  render: () => ({
+    components: { DXFileUpload },
+    setup() {
+      const file = ref(null);
+      return { file };
+    },
+    template: '<DXFileUpload v-model="file" label="Upload image" accept="image/*" helper="PNG, JPG up to 5MB" />',
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXFileUpload },
+    setup() {
+      const file = ref(null);
+      return { file };
+    },
+    template: '<DXFileUpload v-model="file" label="Disabled upload" disabled />',
+  }),
+};
+