dxd-style-code 0.1.7 → 0.1.9

package/src/components/organisms/DXModal/DXModal.vue

@@ -0,0 +1,213 @@
+<template>
+  <DXBackdrop 
+    :show="open && variant !== 'half-right'"
+    :blur="backdropBlur"
+    :background-color="backdropBackgroundColor"
+    :z-index="variant === 'half-right' ? '20' : '50'"
+    :lock-scroll="backdropLockScroll"
+    :dismissible="closable && variant !== 'half-right'"
+    @close="$emit('close')"
+  >
+    <Transition :name="transitionName" @after-enter="$emit('opened')" @after-leave="$emit('closed')">
+      <div 
+        v-if="open" 
+        :class="containerWrapperClass" 
+        @click.self="closable && $emit('close')"
+        data-component="DXModal" 
+        :data-variant="variant"
+      >
+        <div :class="containerClass">
+          <div class="flex items-center justify-between flex-shrink-0 mb-4 gap-4">
+            <h3 class="text-lg font-semibold tracking-tight text-slate-900 flex-1">
+              <slot name="title">Диалог</slot>
+            </h3>
+            
+            <!-- View Mode Switcher -->
+            <div v-if="showModeSwitcher" class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1">
+              <button
+                v-for="mode in viewModes"
+                :key="mode.value"
+                type="button"
+                class="rounded-lg p-1.5 transition-colors"
+                :class="variant === mode.value 
+                  ? 'bg-white text-slate-900 shadow-sm' 
+                  : 'text-slate-400 hover:text-slate-600 hover:bg-white/50'"
+                :title="mode.label"
+                @click="handleVariantChange(mode.value)"
+              >
+                <component :is="mode.icon" class="h-4 w-4" />
+              </button>
+            </div>
+
+            <DXCloseButton 
+              v-if="closable" 
+              size="md"
+              variant="default"
+              @click="$emit('close')"
+            />
+          </div>
+          <div class="text-slate-700 overflow-y-auto flex-1 min-h-0">
+            <slot />
+          </div>
+          <div v-if="$slots.actions" class="flex justify-end gap-2 flex-shrink-0 mt-4 pt-4 border-t border-slate-200">
+            <slot name="actions" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </DXBackdrop>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import {
+  Squares2X2Icon,
+  ArrowsPointingOutIcon,
+  ViewColumnsIcon,
+  RectangleGroupIcon,
+} from "@heroicons/vue/24/outline";
+import DXBackdrop from "../../atoms/DXBackdrop/DXBackdrop.vue";
+import DXCloseButton from "../../molecules/DXCloseButton/DXCloseButton.vue";
+
+const props = defineProps({
+  /** Открыто/закрыто */
+  open: { type: Boolean, default: false },
+  /** Вариант: modal | fullscreen | sidebar-right | half-right */
+  variant: { type: String, default: "modal" },
+  /** Ширина (для modal): sm | md | lg | xl */
+  width: { type: String, default: "md" },
+  /** Можно ли закрыть */
+  closable: { type: Boolean, default: true },
+  /** Показывать переключатель режимов */
+  showModeSwitcher: { type: Boolean, default: false },
+  
+  /** Размытие backdrop: none | sm | md | lg | xl */
+  backdropBlur: {
+    type: String,
+    default: 'sm',
+    validator: (v) => ['none', 'sm', 'md', 'lg', 'xl'].includes(v)
+  },
+  /** Прозрачность backdrop: 0-100 */
+  backdropOpacity: {
+    type: [String, Number],
+    default: '40'
+  },
+  /** Цвет backdrop: slate-900 | gray-900 | black | white */
+  backdropColor: {
+    type: String,
+    default: 'slate-900'
+  },
+  /** Блокировать скролл body */
+  backdropLockScroll: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(["close", "opened", "closed", "update:variant"]);
+
+const viewModes = [
+  { value: "modal", label: "Модальное окно", icon: Squares2X2Icon },
+  { value: "fullscreen", label: "На весь экран", icon: ArrowsPointingOutIcon },
+  { value: "sidebar-right", label: "Боковая панель", icon: ViewColumnsIcon },
+  { value: "half-right", label: "Половина справа", icon: RectangleGroupIcon },
+];
+
+const handleVariantChange = (newVariant) => {
+  emit("update:variant", newVariant);
+};
+
+const transitionName = computed(() => {
+  switch (props.variant) {
+    case "sidebar-right":
+    case "half-right":
+      return "slide-right";
+    default:
+      return "fade-scale";
+  }
+});
+
+const containerWrapperClass = computed(() => {
+  switch (props.variant) {
+    case "fullscreen":
+      return "fixed inset-0 flex items-center justify-center p-0";
+    case "sidebar-right":
+      return "fixed inset-0 flex items-end justify-end";
+    case "half-right":
+      return "fixed top-[73px] bottom-0 right-0 z-20 flex w-1/2 pointer-events-none";
+    default:
+      return "fixed inset-0 flex items-center justify-center px-4 py-4 overflow-y-auto";
+  }
+});
+
+const containerClass = computed(() => {
+  const base = "bg-white shadow-2xl flex flex-col";
+  switch (props.variant) {
+    case "fullscreen":
+      return `${base} w-full h-full p-8`;
+    case "sidebar-right":
+      return `${base} h-full w-full max-w-md p-6 border-l border-slate-200`;
+    case "half-right":
+      return `${base} h-full w-full p-6 border-l border-slate-200 pointer-events-auto`;
+    default:
+      return `${base} rounded-2xl w-full max-h-[90vh] p-6 my-auto ${widthClass.value}`;
+  }
+});
+
+const widthClass = computed(() => {
+  if (props.variant !== "modal") return "";
+  switch (props.width) {
+    case "sm": return "max-w-md";
+    case "lg": return "max-w-3xl";
+    case "xl": return "max-w-5xl";
+    default: return "max-w-xl";
+  }
+});
+
+// Формируем backgroundColor из color и opacity для совместимости
+const backdropBackgroundColor = computed(() => {
+  // Если opacity - стандартное значение Tailwind, используем класс
+  const tailwindOpacities = ['0', '5', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95', '100'];
+  if (tailwindOpacities.includes(String(props.backdropOpacity))) {
+    return `bg-${props.backdropColor}/${props.backdropOpacity}`;
+  }
+  // Иначе формируем CSS значение
+  const colorMap = {
+    'slate-900': 'rgb(15 23 42',
+    'gray-900': 'rgb(17 24 39',
+    'black': 'rgb(0 0 0',
+    'white': 'rgb(255 255 255',
+  };
+  const rgb = colorMap[props.backdropColor] || colorMap['slate-900'];
+  return `${rgb} / ${props.backdropOpacity}%)`;
+});
+</script>
+
+<style scoped>
+.fade-scale-enter-active, .fade-scale-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.fade-scale-enter-from, .fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.fade-scale-enter-active > div, .fade-scale-leave-active > div {
+  transition: transform 0.2s ease;
+}
+.fade-scale-enter-from > div, .fade-scale-leave-to > div {
+  transform: scale(0.95);
+}
+.slide-right-enter-active, .slide-right-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.slide-right-enter-from, .slide-right-leave-to {
+  opacity: 0;
+}
+.slide-right-enter-active > div, .slide-right-leave-active > div {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.slide-right-enter-from > div, .slide-right-leave-to > div {
+  transform: translateX(100%);
+}
+</style>
+

package/src/components/organisms/DXModal/index.js

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

package/src/components/organisms/DXNotificationCenter/DXNotificationCenter.stories.js

@@ -0,0 +1,183 @@
+import { ref } from 'vue';
+import DXNotificationCenter from './DXNotificationCenter.vue';
+
+export default {
+  title: 'Organisms/DXNotificationCenter',
+  component: DXNotificationCenter,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXNotificationCenter
+
+Центр уведомлений с фильтрацией, группировкой и управлением уведомлениями.
+
+## Назначение
+
+DXNotificationCenter предоставляет полнофункциональный центр уведомлений с поддержкой
+фильтрации, группировки, отметки как прочитанные и удаления уведомлений.
+
+## Архитектура
+
+### Использует
+- \`DXDropdown\` - для выпадающего списка
+- \`DXButton\` - для действий
+- \`DXIcon\` - для иконок
+- \`DXBadge\` - для счетчика непрочитанных
+- \`useClassComposition\` composable - для стилей
+- \`useSpacing\` composable - для отступов
+
+### Используется в
+- \`DXHeaderBar\` - для иконки уведомлений
+- Центры уведомлений в приложениях
+- Панели уведомлений
+
+## Внутренняя логика
+
+### Группировка
+Поддерживает группировку: date (по дате), type (по типу), none (без группировки).
+
+### Фильтрация
+Поддерживает фильтрацию по типу и статусу (все/непрочитанные).
+
+### Типы уведомлений
+- info: Информация
+- success: Успех
+- warning: Предупреждение
+- error: Ошибка
+
+## Особенности
+
+### Автоматическое обновление
+Можно настроить автоматическое обновление уведомлений.
+
+### Индикация непрочитанных
+Показывает количество непрочитанных уведомлений через Badge.
+        `,
+      },
+    },
+  },
+};
+
+const defaultNotifications = [
+  {
+    id: 1,
+    type: 'info',
+    title: 'Новое сообщение',
+    message: 'У вас новое сообщение от John Doe',
+    date: new Date(),
+    read: false,
+  },
+  {
+    id: 2,
+    type: 'success',
+    title: 'Задача выполнена',
+    message: 'Задача "Обновить документацию" выполнена',
+    date: new Date(Date.now() - 3600000),
+    read: false,
+  },
+  {
+    id: 3,
+    type: 'warning',
+    title: 'Предупреждение',
+    message: 'Истекает срок подписки через 7 дней',
+    date: new Date(Date.now() - 7200000),
+    read: true,
+  },
+];
+
+export const Default = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый центр уведомлений с триггером и выпадающим списком.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXNotificationCenter },
+    setup() {
+      const notifications = ref(defaultNotifications);
+      const unreadCount = ref(2);
+      
+      const handleMarkRead = (id) => {
+        const notification = notifications.value.find((n) => n.id === id);
+        if (notification) {
+          notification.read = true;
+          unreadCount.value = Math.max(0, unreadCount.value - 1);
+        }
+      };
+      
+      const handleMarkAllRead = () => {
+        notifications.value.forEach((n) => (n.read = true));
+        unreadCount.value = 0;
+      };
+      
+      return { notifications, unreadCount, handleMarkRead, handleMarkAllRead };
+    },
+    template: `
+      <div class="p-8">
+        <DXNotificationCenter
+          :notifications="notifications"
+          :unread-count="unreadCount"
+          @mark-read="handleMarkRead"
+          @mark-all-read="handleMarkAllRead"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const WithGrouping = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Центр уведомлений с группировкой по дате.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXNotificationCenter },
+    setup() {
+      const notifications = ref(defaultNotifications);
+      return { notifications };
+    },
+    template: `
+      <div class="p-8">
+        <DXNotificationCenter
+          :notifications="notifications"
+          :unread-count="2"
+          group-by="date"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const WithFilters = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Центр уведомлений с фильтрами для просмотра всех или только непрочитанных.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXNotificationCenter },
+    setup() {
+      const notifications = ref(defaultNotifications);
+      return { notifications };
+    },
+    template: `
+      <div class="p-8">
+        <DXNotificationCenter
+          :notifications="notifications"
+          :unread-count="2"
+          :filterable="true"
+        />
+      </div>
+    `,
+  }),
+};
+