dxd-style-code 0.1.7 → 0.1.9

package/src/components/atoms/DXBadge/DXBadge.vue

@@ -0,0 +1,45 @@
+<template>
+  <span 
+    :class="allClasses" 
+    data-component="DXBadge" 
+    :data-variant="variant"
+    :data-size="size"
+  >
+    <DXIcon v-if="iconLeft" :icon="iconLeft" size="xs" animation="none" />
+    <slot />
+    <DXIcon v-if="iconRight" :icon="iconRight" size="xs" animation="none" />
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantBadge } from "@/composables/useVariant";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXIcon from "../DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Вариант оформления: slate | success | warning | danger | info */
+  variant: { type: String, default: "slate" },
+  /** Размер: sm | md */
+  size: { type: String, default: "sm" },
+  /** Иконка слева */
+  iconLeft: { type: [Object, Function], default: null },
+  /** Иконка справа */
+  iconRight: { type: [Object, Function], default: null },
+});
+
+const BASE_CLASSES = "inline-flex items-center gap-1 rounded-full border font-semibold";
+
+/**
+ * Все классы для badge
+ */
+const allClasses = computed(() => 
+  useClassComposition(
+    BASE_CLASSES,
+    useSize(props.size, 'badge'),
+    useVariantBadge(props.variant)
+  )
+);
+</script>
+

package/src/components/atoms/DXBadge/index.js

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

package/src/components/atoms/DXButton/DXButton.stories.js

@@ -0,0 +1,178 @@
+import DXButton from './DXButton.vue';
+import DXIcon from '../DXIcon/DXIcon.vue';
+import { PlusIcon, TrashIcon, PencilIcon, HeartIcon } from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Atoms/DXButton',
+  component: DXButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost', 'outline', 'success', 'warning', 'danger', 'info', 'link', 'soft'],
+      description: 'Вариант оформления кнопки',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Размер кнопки',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключенное состояние',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Растянуть на всю ширину',
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Только иконка (квадратная кнопка)',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    variant: 'primary',
+  },
+  render: (args) => ({
+    components: { DXButton },
+    setup() { return { args }; },
+    template: '<DXButton v-bind="args">Кнопка</DXButton>',
+  }),
+};
+
+export const Variants = {
+  render: () => ({
+    components: { DXButton },
+    template: `
+      <div class="flex flex-col items-start gap-6">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Основные варианты</h3>
+          <div class="flex items-center gap-4 flex-wrap">
+            <DXButton variant="primary">Primary</DXButton>
+            <DXButton variant="secondary">Secondary</DXButton>
+            <DXButton variant="ghost">Ghost</DXButton>
+            <DXButton variant="outline">Outline</DXButton>
+            <DXButton variant="soft">Soft</DXButton>
+            <DXButton variant="link">Link</DXButton>
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-sm font-semibold text-slate-700">Семантические варианты</h3>
+          <div class="flex items-center gap-4 flex-wrap">
+            <DXButton variant="success">Success</DXButton>
+            <DXButton variant="warning">Warning</DXButton>
+            <DXButton variant="danger">Danger</DXButton>
+            <DXButton variant="info">Info</DXButton>
+          </div>
+        </div>
+        <div class="text-sm text-slate-600">
+          Все варианты: primary | secondary | ghost | outline | soft | link | success | warning | danger | info
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXButton },
+    template: `
+      <div class="flex flex-col items-start gap-4">
+        <div class="flex items-center gap-4">
+          <DXButton size="xs">Extra Small</DXButton>
+          <DXButton size="sm">Small</DXButton>
+          <DXButton size="md">Medium</DXButton>
+          <DXButton size="lg">Large</DXButton>
+          <DXButton size="xl">Extra Large</DXButton>
+        </div>
+        <div class="text-sm text-slate-600">
+          Все размеры: xs (28px) | sm (32px) | md (40px) | lg (48px) | xl (56px)
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { DXButton },
+    setup() { return { args }; },
+    template: '<DXButton v-bind="args">Disabled</DXButton>',
+  }),
+};
+
+export const Block = {
+  args: {
+    block: true,
+  },
+  render: (args) => ({
+    components: { DXButton },
+    setup() { return { args }; },
+    template: '<DXButton v-bind="args">Full Width</DXButton>',
+  }),
+};
+
+export const WithIcon = {
+  render: () => ({
+    components: { DXButton, DXIcon },
+    setup() {
+      return { PlusIcon, TrashIcon, PencilIcon };
+    },
+    template: `
+      <div class="flex items-center gap-4">
+        <DXButton>
+          <DXIcon :icon="PlusIcon" size="sm" />
+          Добавить
+        </DXButton>
+        <DXButton variant="danger">
+          <DXIcon :icon="TrashIcon" size="sm" />
+          Удалить
+        </DXButton>
+        <DXButton variant="ghost">
+          <DXIcon :icon="PencilIcon" size="sm" />
+          Редактировать
+        </DXButton>
+      </div>
+    `,
+  }),
+};
+
+export const IconOnly = {
+  render: () => ({
+    components: { DXButton, DXIcon },
+    setup() {
+      return { PlusIcon, TrashIcon, HeartIcon };
+    },
+    template: `
+      <div class="flex flex-col items-start gap-4">
+        <div class="flex items-center gap-4">
+          <DXButton icon-only size="xs">
+            <DXIcon :icon="PlusIcon" size="xs" />
+          </DXButton>
+          <DXButton icon-only size="sm">
+            <DXIcon :icon="PlusIcon" size="sm" />
+          </DXButton>
+          <DXButton icon-only>
+            <DXIcon :icon="HeartIcon" size="sm" />
+          </DXButton>
+          <DXButton icon-only size="lg">
+            <DXIcon :icon="TrashIcon" size="md" />
+          </DXButton>
+          <DXButton icon-only size="xl">
+            <DXIcon :icon="TrashIcon" size="lg" />
+          </DXButton>
+        </div>
+        <div class="text-sm text-slate-600">
+          Квадратные кнопки с иконками: xs (28×28px) | sm (32×32px) | md (40×40px) | lg (48×48px) | xl (56×56px)
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXButton/DXButton.vue

@@ -0,0 +1,84 @@
+<template>
+  <component
+    :is="componentTag"
+    :type="componentTag === 'button' ? type : undefined"
+    :disabled="disabled"
+    :to="to"
+    :href="href"
+    :target="target"
+    :rel="rel"
+    :class="allClasses"
+    data-component="DXButton"
+    :data-variant="variant"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-icon-only="iconOnly"
+    :data-block="block"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantButton } from "@/composables/useVariant";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Вариант оформления: primary | secondary | ghost | outline | success | warning | danger | info | link | soft */
+  variant: { type: String, default: "primary" },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Растянуть на всю ширину */
+  block: { type: Boolean, default: false },
+  /** Только иконка (квадратная кнопка) */
+  iconOnly: { type: Boolean, default: false },
+  /** Тип кнопки для form */
+  type: { type: String, default: "button" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Vue Router путь */
+  to: { type: [String, Object], default: null },
+  /** Обычная ссылка */
+  href: { type: String, default: null },
+  /** Target для ссылки */
+  target: { type: String, default: null },
+  /** Rel для ссылки */
+  rel: { type: String, default: null },
+});
+
+const BASE_CLASSES = "btn group inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60";
+
+/**
+ * Определяет тег компонента (button, router-link или a)
+ */
+const componentTag = computed(() => {
+  if (props.to) return "router-link";
+  if (props.href) return "a";
+  return "button";
+});
+
+/**
+ * Классы размера
+ */
+const sizeClass = computed(() => {
+  return useSize(props.size, props.iconOnly ? 'buttonIcon' : 'button');
+});
+
+/**
+ * Все классы для кнопки
+ */
+const allClasses = computed(() => 
+  useClassComposition(
+    BASE_CLASSES,
+    useVariantButton(props.variant),
+    sizeClass.value,
+    {
+      'w-full': props.block,
+      'px-0 py-0': props.iconOnly,
+    }
+  )
+);
+</script>
+

package/src/components/atoms/DXButton/index.js

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

package/src/components/atoms/DXCard/DXCard.stories.js

@@ -0,0 +1,133 @@
+import DXCard from './DXCard.vue';
+
+export default {
+  title: 'Atoms/DXCard',
+  component: DXCard,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'bordered', 'elevated', 'flat'],
+      description: 'Card variant style'
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg'],
+      description: 'Card padding size'
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    variant: 'default',
+    padding: 'md',
+  },
+  render: (args) => ({
+    components: { DXCard },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DXCard v-bind="args">
+        <h3 class="text-lg font-semibold text-slate-900 mb-2">Card Title</h3>
+        <p class="text-sm text-slate-600">
+          This is a card component with default styling. It includes border, shadow, and padding.
+        </p>
+      </DXCard>
+    `,
+  }),
+};
+
+// All variants
+export const Variants = {
+  render: () => ({
+    components: { DXCard },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Default (border + shadow)</p>
+          <DXCard variant="default">
+            <h3 class="text-lg font-semibold text-slate-900 mb-2">Default Card</h3>
+            <p class="text-sm text-slate-600">
+              Subtle border and shadow for a clean, modern look.
+            </p>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Bordered (2px border, no shadow)</p>
+          <DXCard variant="bordered">
+            <h3 class="text-lg font-semibold text-slate-900 mb-2">Bordered Card</h3>
+            <p class="text-sm text-slate-600">
+              More prominent border without shadow for emphasis.
+            </p>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Elevated (large shadow)</p>
+          <DXCard variant="elevated">
+            <h3 class="text-lg font-semibold text-slate-900 mb-2">Elevated Card</h3>
+            <p class="text-sm text-slate-600">
+              Pronounced shadow creates a floating effect.
+            </p>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Flat (no border or shadow)</p>
+          <DXCard variant="flat">
+            <h3 class="text-lg font-semibold text-slate-900 mb-2">Flat Card</h3>
+            <p class="text-sm text-slate-600">
+              Minimal styling, just background color and rounded corners.
+            </p>
+          </DXCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// All padding sizes
+export const PaddingSizes = {
+  render: () => ({
+    components: { DXCard },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">No Padding</p>
+          <DXCard padding="none">
+            <div class="h-32 flex items-center justify-center text-slate-500">
+              Content with no padding
+            </div>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Small Padding (p-3)</p>
+          <DXCard padding="sm">
+            <h3 class="text-base font-semibold text-slate-900 mb-1">Small</h3>
+            <p class="text-sm text-slate-600">Compact padding for dense layouts.</p>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Medium Padding (p-5, default)</p>
+          <DXCard padding="md">
+            <h3 class="text-lg font-semibold text-slate-900 mb-2">Medium</h3>
+            <p class="text-sm text-slate-600">Standard padding for most use cases.</p>
+          </DXCard>
+        </div>
+        
+        <div>
+          <p class="text-sm font-medium text-slate-700 mb-2">Large Padding (p-8)</p>
+          <DXCard padding="lg">
+            <h3 class="text-xl font-semibold text-slate-900 mb-3">Large</h3>
+            <p class="text-sm text-slate-600">Generous padding for spacious layouts.</p>
+          </DXCard>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/atoms/DXCard/DXCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div 
+    :class="allClasses" 
+    data-component="DXCard"
+    :data-variant="variant"
+    :data-padding="padding"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSpacing } from "@/composables/useSpacing";
+
+const props = defineProps({
+  /** Вариант: default | bordered | elevated | flat */
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ['default', 'bordered', 'elevated', 'flat'].includes(value)
+  },
+  /** Padding: none | xs | sm | md | lg | xl */
+  padding: {
+    type: String,
+    default: "md",
+    validator: (value) => ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+  },
+});
+
+const BASE_CLASSES = "bg-white rounded-2xl";
+
+const VARIANT_CLASSES = {
+  default: "border border-slate-100 shadow-sm",
+  bordered: "border-1 border-slate-200",
+  elevated: "shadow-lg border border-slate-50",
+  flat: "border-0",
+};
+
+const allClasses = computed(() => [
+  BASE_CLASSES,
+  VARIANT_CLASSES[props.variant],
+  useSpacing(props.padding, 'padding')
+]);
+</script>
+

package/src/components/atoms/DXCard/index.js

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