dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,288 @@
+import DXActionButtons from './DXActionButtons.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import { ShareIcon, ArrowDownTrayIcon, PrinterIcon } from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXActionButtons',
+  component: DXActionButtons,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+  },
+};
+
+// Базовый вариант
+export const Default = {
+  args: {},
+};
+
+// Только редактирование
+export const EditOnly = {
+  args: {
+    showEdit: true,
+    showDelete: false,
+  },
+};
+
+// Только удаление
+export const DeleteOnly = {
+  args: {
+    showEdit: false,
+    showDelete: true,
+  },
+};
+
+// С кнопкой просмотра
+export const WithView = {
+  args: {
+    showView: true,
+    showEdit: true,
+    showDelete: true,
+  },
+};
+
+// Только иконки
+export const IconOnly = {
+  args: {
+    iconOnly: true,
+    showView: true,
+    showEdit: true,
+    showDelete: true,
+  },
+};
+
+// Размеры
+export const Sizes = {
+  render: () => ({
+    components: { DXActionButtons },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Extra Small (xs)</p>
+          <DXActionButtons size="xs" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Small (sm) - Default</p>
+          <DXActionButtons size="sm" />
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 mb-2">Medium (md)</p>
+          <DXActionButtons size="md" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Выравнивание
+export const Alignment = {
+  render: () => ({
+    components: { DXActionButtons },
+    template: `
+      <div class="space-y-6">
+        <div class="p-4 border border-slate-200 rounded-xl">
+          <p class="text-xs text-slate-500 mb-2">Left (default)</p>
+          <DXActionButtons align="left" />
+        </div>
+        
+        <div class="p-4 border border-slate-200 rounded-xl">
+          <p class="text-xs text-slate-500 mb-2">Center</p>
+          <DXActionButtons align="center" />
+        </div>
+        
+        <div class="p-4 border border-slate-200 rounded-xl">
+          <p class="text-xs text-slate-500 mb-2">Right</p>
+          <DXActionButtons align="right" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// С дополнительными кнопками (slot)
+export const WithCustomButtons = {
+  render: () => ({
+    components: { DXActionButtons, DXButton, DXIcon },
+    setup() {
+      return { ShareIcon, ArrowDownTrayIcon };
+    },
+    template: `
+      <DXActionButtons>
+        <DXButton variant="outline" size="sm">
+          <DXIcon :icon="ShareIcon" size="xs" />
+          Share
+        </DXButton>
+        <DXButton variant="outline" size="sm">
+          <DXIcon :icon="ArrowDownTrayIcon" size="xs" />
+          Download
+        </DXButton>
+      </DXActionButtons>
+    `,
+  }),
+};
+
+// В таблице
+export const InTable = {
+  render: () => ({
+    components: { DXActionButtons },
+    template: `
+      <div class="overflow-hidden rounded-xl border border-slate-200">
+        <table class="min-w-full divide-y divide-slate-200">
+          <thead class="bg-slate-50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700">Name</th>
+              <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700">Email</th>
+              <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700">Role</th>
+              <th class="px-6 py-3 text-right text-xs font-semibold text-slate-700">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-200 bg-white">
+            <tr>
+              <td class="px-6 py-4 text-sm text-slate-900">John Doe</td>
+              <td class="px-6 py-4 text-sm text-slate-600">john@example.com</td>
+              <td class="px-6 py-4 text-sm text-slate-600">Admin</td>
+              <td class="px-6 py-4">
+                <DXActionButtons align="right" size="xs" />
+              </td>
+            </tr>
+            <tr>
+              <td class="px-6 py-4 text-sm text-slate-900">Jane Smith</td>
+              <td class="px-6 py-4 text-sm text-slate-600">jane@example.com</td>
+              <td class="px-6 py-4 text-sm text-slate-600">User</td>
+              <td class="px-6 py-4">
+                <DXActionButtons align="right" size="xs" />
+              </td>
+            </tr>
+            <tr>
+              <td class="px-6 py-4 text-sm text-slate-900">Bob Johnson</td>
+              <td class="px-6 py-4 text-sm text-slate-600">bob@example.com</td>
+              <td class="px-6 py-4 text-sm text-slate-600">Moderator</td>
+              <td class="px-6 py-4">
+                <DXActionButtons align="right" size="xs" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `,
+  }),
+};
+
+// В карточках
+export const InCards = {
+  render: () => ({
+    components: { DXActionButtons },
+    template: `
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="p-6 border border-slate-200 rounded-xl bg-white">
+          <h3 class="text-lg font-semibold text-slate-900 mb-2">Product Title</h3>
+          <p class="text-sm text-slate-600 mb-4">Product description goes here...</p>
+          <DXActionButtons show-view />
+        </div>
+        
+        <div class="p-6 border border-slate-200 rounded-xl bg-white">
+          <h3 class="text-lg font-semibold text-slate-900 mb-2">Another Product</h3>
+          <p class="text-sm text-slate-600 mb-4">Another product description...</p>
+          <DXActionButtons show-view />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Отключенное состояние
+export const Disabled = {
+  args: {
+    disabled: true,
+    showView: true,
+  },
+};
+
+// Интерактивный пример
+export const Interactive = {
+  render: () => ({
+    components: { DXActionButtons },
+    setup() {
+      const handleView = () => alert('View clicked!');
+      const handleEdit = () => alert('Edit clicked!');
+      const handleDelete = () => {
+        if (confirm('Are you sure you want to delete this item?')) {
+          alert('Item deleted!');
+        }
+      };
+      
+      return { handleView, handleEdit, handleDelete };
+    },
+    template: `
+      <div class="p-6 bg-slate-50 rounded-xl">
+        <h3 class="text-lg font-semibold text-slate-900 mb-4">Try clicking the buttons</h3>
+        <DXActionButtons 
+          show-view
+          @view="handleView"
+          @edit="handleEdit"
+          @delete="handleDelete"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Все варианты
+export const AllVariants = {
+  render: () => ({
+    components: { DXActionButtons },
+    template: `
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Standard (Edit + Delete)</h3>
+          <DXActionButtons />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">With View</h3>
+          <DXActionButtons show-view />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Icon Only</h3>
+          <DXActionButtons icon-only show-view />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Different Sizes</h3>
+          <div class="space-y-3">
+            <DXActionButtons size="xs" />
+            <DXActionButtons size="sm" />
+            <DXActionButtons size="md" />
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Alignment</h3>
+          <div class="space-y-3">
+            <div class="p-3 border border-slate-200 rounded">
+              <DXActionButtons align="left" />
+            </div>
+            <div class="p-3 border border-slate-200 rounded">
+              <DXActionButtons align="center" />
+            </div>
+            <div class="p-3 border border-slate-200 rounded">
+              <DXActionButtons align="right" />
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXActionButtons/DXActionButtons.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex gap-2" :class="{ 'justify-end': align === 'right', 'justify-center': align === 'center' }" data-component="DXActionButtons">
+    <!-- View Button -->
+    <button
+      v-if="showView"
+      type="button"
+      class="inline-flex items-center gap-1.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2"
+      :class="buttonSizeClass"
+      :disabled="disabled"
+      @click="$emit('view')"
+    >
+      <DXIcon :icon="viewIcon" :size="iconSize" animation="scale" />
+      <span v-if="!iconOnly">{{ viewLabel }}</span>
+    </button>
+    
+    <!-- Edit Button -->
+    <button
+      v-if="showEdit"
+      type="button"
+      class="inline-flex items-center gap-1.5 border border-slate-200 text-slate-700 hover:border-slate-300 hover:bg-slate-50 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="buttonSizeClass"
+      :disabled="disabled"
+      @click="$emit('edit')"
+    >
+      <DXIcon :icon="editIcon" :size="iconSize" animation="wiggle" />
+      <span v-if="!iconOnly">{{ editLabel }}</span>
+    </button>
+    
+    <!-- Delete Button -->
+    <button
+      v-if="showDelete"
+      type="button"
+      class="inline-flex items-center gap-1.5 bg-rose-600 text-white hover:bg-rose-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="buttonSizeClass"
+      :disabled="disabled"
+      @click="$emit('delete')"
+    >
+      <DXIcon :icon="deleteIcon" :size="iconSize" animation="scale" />
+      <span v-if="!iconOnly">{{ deleteLabel }}</span>
+    </button>
+    
+    <!-- Дополнительные кнопки через slot -->
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { PencilIcon, TrashIcon, EyeIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  /** Показывать кнопку просмотра */
+  showView: { type: Boolean, default: false },
+  /** Показывать кнопку редактирования */
+  showEdit: { type: Boolean, default: true },
+  /** Показывать кнопку удаления */
+  showDelete: { type: Boolean, default: true },
+  
+  /** Текст кнопки просмотра */
+  viewLabel: { type: String, default: "Просмотр" },
+  /** Текст кнопки редактирования */
+  editLabel: { type: String, default: "Редактировать" },
+  /** Текст кнопки удаления */
+  deleteLabel: { type: String, default: "Удалить" },
+  
+  /** Иконка для кнопки просмотра */
+  viewIcon: { type: [Object, Function], default: () => EyeIcon },
+  /** Иконка для кнопки редактирования */
+  editIcon: { type: [Object, Function], default: () => PencilIcon },
+  /** Иконка для кнопки удаления */
+  deleteIcon: { type: [Object, Function], default: () => TrashIcon },
+  
+  /** Размер кнопок: xs | sm | md */
+  size: { type: String, default: "sm" },
+  /** Только иконки без текста */
+  iconOnly: { type: Boolean, default: false },
+  /** Выравнивание: left | center | right */
+  align: { type: String, default: "left" },
+  /** Отключить все кнопки */
+  disabled: { type: Boolean, default: false },
+});
+
+defineEmits(["view", "edit", "delete"]);
+
+const iconSize = computed(() => {
+  if (props.size === "xs") return "xs";
+  if (props.size === "md") return "sm";
+  return "xs";
+});
+
+const buttonSizeClass = computed(() => {
+  const baseClasses = "font-semibold rounded-xl";
+  
+  if (props.iconOnly) {
+    if (props.size === "xs") return `${baseClasses} p-1.5`;
+    if (props.size === "md") return `${baseClasses} p-2.5`;
+    return `${baseClasses} p-2`;
+  }
+  
+  if (props.size === "xs") return `${baseClasses} px-2 py-1 text-xs`;
+  if (props.size === "md") return `${baseClasses} px-4 py-2.5 text-sm`;
+  return `${baseClasses} px-3 py-2 text-xs`;
+});
+</script>
+

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

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

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

@@ -0,0 +1,70 @@
+import DXAlert from './DXAlert.vue';
+
+export default {
+  title: 'Molecules/DXAlert',
+  component: DXAlert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: { type: 'select' }, options: ['info', 'success', 'warning', 'danger'] },
+  },
+};
+
+export const Info = {
+  args: { variant: 'info', title: 'Information' },
+  render: (args) => ({
+    components: { DXAlert },
+    setup() { return { args }; },
+    template: '<DXAlert v-bind="args">This is an informational message.</DXAlert>',
+  }),
+};
+
+export const Success = {
+  args: { variant: 'success', title: 'Success' },
+  render: (args) => ({
+    components: { DXAlert },
+    setup() { return { args }; },
+    template: '<DXAlert v-bind="args">Your changes have been saved successfully.</DXAlert>',
+  }),
+};
+
+export const Warning = {
+  args: { variant: 'warning', title: 'Warning' },
+  render: (args) => ({
+    components: { DXAlert },
+    setup() { return { args }; },
+    template: '<DXAlert v-bind="args">Please review before continuing.</DXAlert>',
+  }),
+};
+
+export const Danger = {
+  args: { variant: 'danger', title: 'Error' },
+  render: (args) => ({
+    components: { DXAlert },
+    setup() { return { args }; },
+    template: '<DXAlert v-bind="args">Something went wrong. Please try again.</DXAlert>',
+  }),
+};
+
+export const Dismissible = {
+  args: { variant: 'info', title: 'Dismissible', dismissible: true },
+  render: (args) => ({
+    components: { DXAlert },
+    setup() { return { args }; },
+    template: '<DXAlert v-bind="args">Click the X to dismiss this alert.</DXAlert>',
+  }),
+};
+
+export const AllVariants = {
+  render: () => ({
+    components: { DXAlert },
+    template: `
+      <div class="space-y-4">
+        <DXAlert variant="info" title="Info">Informational message</DXAlert>
+        <DXAlert variant="success" title="Success">Success message</DXAlert>
+        <DXAlert variant="warning" title="Warning">Warning message</DXAlert>
+        <DXAlert variant="danger" title="Error">Error message</DXAlert>
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXAlert/DXAlert.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    v-if="!dismissed"
+    :class="alertClasses"
+    role="alert"
+    data-component="DXAlert"
+    :data-variant="variant"
+  >
+    <div class="flex items-start gap-3">
+      <DXIcon v-if="iconToShow" :icon="iconToShow" size="md" animation="none" :class="iconClasses" />
+      <div class="flex-1 min-w-0">
+        <p v-if="title" class="font-semibold" :class="titleClasses">{{ title }}</p>
+        <div :class="contentClasses">
+          <slot />
+        </div>
+      </div>
+      <DXCloseButton
+        v-if="dismissible"
+        size="sm"
+        variant="default"
+        @click="dismiss"
+      />
+    </div>
+    <div v-if="$slots.actions" class="mt-3 flex gap-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import {
+  InformationCircleIcon,
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  XCircleIcon,
+} from "@heroicons/vue/24/solid";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXCloseButton from "../DXCloseButton/DXCloseButton.vue";
+
+const props = defineProps({
+  /** Вариант: info | success | warning | danger */
+  variant: { type: String, default: "info" },
+  /** Заголовок */
+  title: { type: String, default: "" },
+  /** Иконка (компонент), если null - используется иконка по умолчанию для variant */
+  icon: { type: [Object, Function], default: undefined },
+  /** Показывать иконку */
+  showIcon: { type: Boolean, default: true },
+  /** Можно закрыть */
+  dismissible: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["dismiss"]);
+
+const dismissed = ref(false);
+
+const dismiss = () => {
+  dismissed.value = true;
+  emit("dismiss");
+};
+
+const BASE_CLASSES = "rounded-xl border p-4";
+
+const VARIANT_STYLES = {
+  info: {
+    bg: "bg-blue-50 border-blue-200",
+    icon: "text-blue-500",
+    title: "text-blue-900",
+    content: "text-blue-800",
+    close: "text-blue-500",
+    defaultIcon: InformationCircleIcon,
+  },
+  success: {
+    bg: "bg-emerald-50 border-emerald-200",
+    icon: "text-emerald-500",
+    title: "text-emerald-900",
+    content: "text-emerald-800",
+    close: "text-emerald-500",
+    defaultIcon: CheckCircleIcon,
+  },
+  warning: {
+    bg: "bg-amber-50 border-amber-200",
+    icon: "text-amber-500",
+    title: "text-amber-900",
+    content: "text-amber-800",
+    close: "text-amber-500",
+    defaultIcon: ExclamationTriangleIcon,
+  },
+  danger: {
+    bg: "bg-rose-50 border-rose-200",
+    icon: "text-rose-500",
+    title: "text-rose-900",
+    content: "text-rose-800",
+    close: "text-rose-500",
+    defaultIcon: XCircleIcon,
+  },
+};
+
+const styles = computed(() => VARIANT_STYLES[props.variant] || VARIANT_STYLES.info);
+const iconToShow = computed(() => {
+  if (!props.showIcon) return null;
+  return props.icon !== undefined ? props.icon : styles.value.defaultIcon;
+});
+
+const alertClasses = computed(() => [
+  BASE_CLASSES,
+  styles.value.bg,
+]);
+
+const iconClasses = computed(() => ["w-5 h-5 flex-shrink-0 mt-0.5", styles.value.icon]);
+const titleClasses = computed(() => styles.value.title);
+const contentClasses = computed(() => ["text-sm", styles.value.content, props.title && "mt-1"]);
+const closeClasses = computed(() => styles.value.close);
+</script>
+

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

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