dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,294 @@
+import DXCheckbox from './DXCheckbox.vue';
+import { ref } from 'vue';
+import { 
+  CheckIcon, 
+  XMarkIcon, 
+  MinusIcon,
+  HeartIcon,
+  StarIcon,
+  BoltIcon,
+} from '@heroicons/vue/24/solid';
+
+export default {
+  title: 'Atoms/DXCheckbox',
+  component: DXCheckbox,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'custom'],
+      description: 'Checkbox variant'
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Checkbox size'
+    },
+    shape: {
+      control: 'select',
+      options: ['square', 'circle'],
+      description: 'Shape for custom variant'
+    },
+    color: {
+      control: 'select',
+      options: ['slate', 'primary', 'success', 'danger', 'warning', 'info'],
+      description: 'Color for custom variant'
+    },
+    iconAnimation: {
+      control: 'select',
+      options: ['none', 'scale', 'wiggle'],
+      description: 'Icon animation'
+    },
+  },
+};
+
+// Default native checkbox
+export const Default = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const checked = ref(false);
+      return { checked };
+    },
+    template: '<DXCheckbox v-model="checked" label="Accept terms" />',
+  }),
+};
+
+// Checked state
+export const Checked = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    },
+    template: '<DXCheckbox v-model="checked" label="Already checked" />',
+  }),
+};
+
+// Disabled
+export const Disabled = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const checked = ref(false);
+      return { checked };
+    },
+    template: '<DXCheckbox v-model="checked" label="Disabled checkbox" disabled />',
+  }),
+};
+
+// Sizes (default variant)
+export const Sizes = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const xs = ref(true);
+      const sm = ref(true);
+      const md = ref(true);
+      const lg = ref(true);
+      const xl = ref(true);
+      return { xs, sm, md, lg, xl };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Extra Small (12px)</p>
+          <DXCheckbox v-model="xs" size="xs" label="Extra small checkbox" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Small (16px)</p>
+          <DXCheckbox v-model="sm" size="sm" label="Small checkbox" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Medium (20px) - Default</p>
+          <DXCheckbox v-model="md" size="md" label="Medium checkbox (default)" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Large (24px)</p>
+          <DXCheckbox v-model="lg" size="lg" label="Large checkbox" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Extra Large (24px)</p>
+          <DXCheckbox v-model="xl" size="xl" label="Extra large checkbox" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Multiple checkboxes in a row (horizontal layout)
+export const InlineLayout = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const option1 = ref(true);
+      const option2 = ref(false);
+      const option3 = ref(true);
+      const option4 = ref(false);
+      return { option1, option2, option3, option4 };
+    },
+    template: `
+      <div>
+        <p class="text-sm font-medium text-slate-700 mb-2">Select options:</p>
+        <div class="flex flex-wrap items-center">
+          <DXCheckbox v-model="option1" label="Option 1" />
+          <DXCheckbox v-model="option2" label="Option 2" />
+          <DXCheckbox v-model="option3" label="Option 3" />
+          <DXCheckbox v-model="option4" label="Option 4" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Custom inline layout
+export const CustomInlineLayout = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const feature1 = ref(true);
+      const feature2 = ref(true);
+      const feature3 = ref(false);
+      const feature4 = ref(true);
+      return { feature1, feature2, feature3, feature4 };
+    },
+    template: `
+      <div>
+        <p class="text-sm font-medium text-slate-700 mb-2">Select features:</p>
+        <div class="flex flex-wrap items-center">
+          <DXCheckbox v-model="feature1" variant="custom" color="success" label="Feature A" />
+          <DXCheckbox v-model="feature2" variant="custom" color="info" label="Feature B" />
+          <DXCheckbox v-model="feature3" variant="custom" color="warning" label="Feature C" />
+          <DXCheckbox v-model="feature4" variant="custom" color="primary" label="Feature D" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Custom variants with different icons
+export const CustomIcons = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const defaultCheck = ref(true);
+      const xMark = ref(true);
+      const minus = ref(true);
+      const heart = ref(true);
+      return { 
+        defaultCheck, 
+        xMark, 
+        minus, 
+        heart,
+        XMarkIcon, 
+        MinusIcon, 
+        HeartIcon 
+      };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Default check icon</p>
+          <DXCheckbox v-model="defaultCheck" variant="custom" label="Custom checkbox with check icon" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">X mark icon</p>
+          <DXCheckbox v-model="xMark" variant="custom" :checked-icon="XMarkIcon" label="Mark as deleted" color="danger" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Minus icon (indeterminate style)</p>
+          <DXCheckbox v-model="minus" variant="custom" :checked-icon="MinusIcon" label="Partially selected" color="warning" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Heart icon (circle shape)</p>
+          <DXCheckbox v-model="heart" variant="custom" :checked-icon="HeartIcon" label="Add to favorites" color="danger" shape="circle" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// All custom shapes
+export const CustomShapes = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const square = ref(true);
+      const circle = ref(true);
+      return { square, circle, CheckIcon };
+    },
+    template: `
+      <div class="space-y-3">
+        <DXCheckbox v-model="square" variant="custom" shape="square" label="Square (default)" />
+        <DXCheckbox v-model="circle" variant="custom" shape="circle" label="Circle" />
+      </div>
+    `,
+  }),
+};
+
+// All custom colors
+export const CustomColors = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const slate = ref(true);
+      const primary = ref(true);
+      const success = ref(true);
+      const danger = ref(true);
+      const warning = ref(true);
+      const info = ref(true);
+      return { slate, primary, success, danger, warning, info };
+    },
+    template: `
+      <div class="space-y-3">
+        <DXCheckbox v-model="slate" variant="custom" color="slate" label="Slate" />
+        <DXCheckbox v-model="primary" variant="custom" color="primary" label="Primary (default)" />
+        <DXCheckbox v-model="success" variant="custom" color="success" label="Success" />
+        <DXCheckbox v-model="danger" variant="custom" color="danger" label="Danger" />
+        <DXCheckbox v-model="warning" variant="custom" color="warning" label="Warning" />
+        <DXCheckbox v-model="info" variant="custom" color="info" label="Info" />
+      </div>
+    `,
+  }),
+};
+
+// Custom sizes
+export const CustomSizes = {
+  render: () => ({
+    components: { DXCheckbox },
+    setup() {
+      const xs = ref(true);
+      const sm = ref(true);
+      const md = ref(true);
+      const lg = ref(true);
+      const xl = ref(true);
+      return { xs, sm, md, lg, xl };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Extra Small (12px)</p>
+          <DXCheckbox v-model="xs" variant="custom" size="xs" label="Extra small custom" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Small (16px)</p>
+          <DXCheckbox v-model="sm" variant="custom" size="sm" label="Small custom" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Medium (20px) - Default</p>
+          <DXCheckbox v-model="md" variant="custom" size="md" label="Medium custom" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Large (24px)</p>
+          <DXCheckbox v-model="lg" variant="custom" size="lg" label="Large custom" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Extra Large (24px)</p>
+          <DXCheckbox v-model="xl" variant="custom" size="xl" label="Extra large custom" />
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXCheckbox/DXCheckbox.vue

@@ -0,0 +1,191 @@
+<template>
+  <label
+    :class="labelClasses"
+    data-component="DXCheckbox"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-checked="isChecked"
+    :data-variant="variant"
+    :data-shape="shape"
+    @click="variant === 'custom' && !disabled && handleToggle(!isChecked)"
+  >
+    <!-- Нативный checkbox (default variant) -->
+    <input
+      v-if="variant === 'default'"
+      type="checkbox"
+      :checked="isChecked"
+      :value="value"
+      :disabled="disabled"
+      :class="inputClasses"
+      @change="handleChange"
+    />
+    
+    <!-- Кастомный checkbox с иконками -->
+    <div
+      v-else
+      :class="customCheckboxClasses"
+      @click.stop="handleToggle(!isChecked)"
+      role="checkbox"
+      :aria-checked="isChecked"
+      :aria-disabled="disabled"
+      tabindex="0"
+      @keydown.space.prevent="handleToggle(!isChecked)"
+    >
+      <Transition v-bind="CHECKBOX_TRANSITION" mode="out-in">
+        <DXIcon
+          v-if="isChecked && iconToShow"
+          :icon="iconToShow"
+          :size="getIconSize(props.size)"
+          :animation="iconAnimation"
+          class="text-white absolute"
+        />
+      </Transition>
+    </div>
+    
+    <span v-if="label" :class="labelTextClasses">
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { CheckIcon } from "@heroicons/vue/24/solid";
+import { useSize } from "@/composables/useSize";
+import { useVariantCheckbox } from "@/composables/useVariant";
+import DXIcon from "../DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Значение (v-model) - boolean или массив */
+  modelValue: { type: [Boolean, Array], default: false },
+  /** Значение для массива */
+  value: { type: [String, Number], default: undefined },
+  /** Текст лейбла */
+  label: { type: String, default: "" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Вариант: default | custom */
+  variant: { 
+    type: String, 
+    default: "default",
+    validator: (value) => ['default', 'custom'].includes(value)
+  },
+  /** Иконка для checked состояния (для custom variant) */
+  checkedIcon: { type: [Object, Function], default: null },
+  /** Иконка для unchecked состояния (для custom variant) */
+  uncheckedIcon: { type: [Object, Function], default: null },
+  /** Форма кастомного checkbox: square | circle */
+  shape: {
+    type: String,
+    default: "square",
+    validator: (value) => ['square', 'circle'].includes(value)
+  },
+  /** Анимация иконки: none | scale | wiggle */
+  iconAnimation: {
+    type: String,
+    default: "scale",
+    validator: (value) => ['none', 'scale', 'wiggle'].includes(value)
+  },
+  /** Цвет для custom variant: slate | primary | success | danger | warning | info */
+  color: {
+    type: String,
+    default: "primary",
+    validator: (value) => ['slate', 'primary', 'success', 'danger', 'warning', 'info'].includes(value)
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Transition configuration (Tailwind classes)
+const CHECKBOX_TRANSITION = {
+  enterActiveClass: 'transition-opacity transition-transform duration-150 ease-out',
+  enterFromClass: 'opacity-0 scale-50',
+  enterToClass: 'opacity-100 scale-100',
+  leaveActiveClass: 'transition-opacity transition-transform duration-150 ease-in',
+  leaveFromClass: 'opacity-100 scale-100',
+  leaveToClass: 'opacity-0 scale-50',
+};
+
+const BASE_LABEL_CLASSES = "inline-flex items-center gap-2 cursor-pointer mr-4";
+const BASE_INPUT_CLASSES = "rounded border-slate-300 text-slate-900 focus:ring-slate-900/10 focus:ring-2 transition flex-shrink-0";
+const BASE_CUSTOM_CLASSES = "relative flex items-center justify-center border-2 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 flex-shrink-0";
+
+const SHAPE_CLASSES = {
+  square: "rounded",
+  circle: "rounded-full",
+};
+
+// Icon size mapping: checkbox size -> icon size
+const getIconSize = (size) => {
+  const map = { xs: 'xs', sm: 'xs', md: 'sm', lg: 'md', xl: 'md' };
+  return map[size] || 'sm';
+};
+
+
+const labelClasses = computed(() => [
+  BASE_LABEL_CLASSES,
+  { 'opacity-60 cursor-not-allowed': props.disabled }
+]);
+
+const labelTextClasses = computed(() => [
+  useSize(props.size, 'text'),
+  'text-slate-700 select-none'
+]);
+
+const inputClasses = computed(() => [
+  BASE_INPUT_CLASSES,
+  useSize(props.size, 'checkbox')
+]);
+
+const customCheckboxClasses = computed(() => {
+  const colorClasses = useVariantCheckbox(props.color);
+  return [
+    BASE_CUSTOM_CLASSES,
+    useSize(props.size, 'checkbox'),
+    SHAPE_CLASSES[props.shape],
+    {
+      [colorClasses.unchecked]: !isChecked.value && !props.disabled,
+      [colorClasses.checked]: isChecked.value && !props.disabled,
+      [colorClasses.ring]: !props.disabled,
+      'opacity-50 cursor-not-allowed': props.disabled,
+    }
+  ];
+});
+
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value);
+  }
+  return props.modelValue;
+});
+
+const iconToShow = computed(() => 
+  isChecked.value ? (props.checkedIcon || CheckIcon) : props.uncheckedIcon
+);
+
+const handleToggle = (newChecked) => {
+  if (props.disabled) return;
+  
+  if (Array.isArray(props.modelValue)) {
+    const newValue = [...props.modelValue];
+    if (newChecked) {
+      if (!newValue.includes(props.value)) {
+        newValue.push(props.value);
+      }
+    } else {
+      const index = newValue.indexOf(props.value);
+      if (index > -1) newValue.splice(index, 1);
+    }
+    emit("update:modelValue", newValue);
+  } else {
+    emit("update:modelValue", newChecked);
+  }
+};
+
+const handleChange = (event) => {
+  handleToggle(event.target.checked);
+};
+</script>
+

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

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

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

@@ -0,0 +1,135 @@
+import DXDivider from './DXDivider.vue';
+
+export default {
+  title: 'Atoms/DXDivider',
+  component: DXDivider,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { 
+      control: { type: 'select' }, 
+      options: ['horizontal', 'vertical'],
+      description: 'Ориентация разделителя'
+    },
+    color: { 
+      control: { type: 'select' }, 
+      options: ['light', 'default', 'dark'],
+      description: 'Цвет разделителя'
+    },
+    thickness: { 
+      control: { type: 'select' }, 
+      options: ['thin', 'default', 'thick'],
+      description: 'Толщина разделителя'
+    },
+    spacing: { 
+      control: { type: 'select' }, 
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Отступы вокруг разделителя'
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    orientation: 'horizontal',
+    color: 'default',
+    thickness: 'default',
+    spacing: 'md',
+  },
+  render: (args) => ({
+    components: { DXDivider },
+    setup() { return { args }; },
+    template: `
+      <div>
+        <p>Content above</p>
+        <DXDivider v-bind="args" />
+        <p>Content below</p>
+      </div>
+    `,
+  }),
+};
+
+export const WithText = {
+  render: () => ({
+    components: { DXDivider },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p>Section 1</p>
+          <DXDivider>OR</DXDivider>
+          <p>Section 2</p>
+        </div>
+        <div>
+          <p>Content above</p>
+          <DXDivider color="dark" thickness="thick">Continue</DXDivider>
+          <p>Content below</p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Vertical = {
+  args: {
+    orientation: 'vertical',
+    color: 'default',
+    thickness: 'default',
+    spacing: 'md',
+  },
+  render: (args) => ({
+    components: { DXDivider },
+    setup() { return { args }; },
+    template: `
+      <div class="flex items-center h-12">
+        <span>Left</span>
+        <DXDivider v-bind="args" />
+        <span>Right</span>
+      </div>
+    `,
+  }),
+};
+
+export const Colors = {
+  render: () => ({
+    components: { DXDivider },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Light</p>
+          <DXDivider color="light" />
+        </div>
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Default</p>
+          <DXDivider color="default" />
+        </div>
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Dark</p>
+          <DXDivider color="dark" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Thickness = {
+  render: () => ({
+    components: { DXDivider },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Thin</p>
+          <DXDivider thickness="thin" />
+        </div>
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Default</p>
+          <DXDivider thickness="default" />
+        </div>
+        <div>
+          <p class="text-sm text-slate-600 mb-2">Thick</p>
+          <DXDivider thickness="thick" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+

package/src/components/atoms/DXDivider/DXDivider.vue

@@ -0,0 +1,74 @@
+<template>
+  <div 
+    :class="dividerClasses" 
+    data-component="DXDivider" 
+    :data-orientation="props.orientation"
+    :data-color="props.color"
+    :data-thickness="props.thickness"
+    :data-spacing="props.spacing"
+  >
+    <!-- Горизонтальный divider с текстом -->
+    <div v-if="hasText && isHorizontal" class="flex items-center w-full">
+      <div :class="lineClasses" />
+      <span class="px-3 text-sm text-slate-500 whitespace-nowrap">
+        <slot />
+      </span>
+      <div :class="lineClasses" />
+    </div>
+    <!-- Горизонтальный divider без текста -->
+    <div v-else-if="isHorizontal" :class="lineClasses" />
+    <!-- Вертикальный divider -->
+    <div v-else :class="lineClasses" />
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { useSpacing } from "@/composables/useSpacing";
+import { useVariantDividerBorder } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Ориентация: horizontal | vertical */
+  orientation: { type: String, default: "horizontal" },
+  /** Цвет: light | default | dark */
+  color: { type: String, default: "default" },
+  /** Толщина: thin | default | thick */
+  thickness: { type: String, default: "default" },
+  /** Отступы: none | sm | md | lg */
+  spacing: { type: String, default: "md" },
+});
+
+const slots = useSlots();
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const hasText = computed(() => !!slots.default);
+
+const dividerClasses = computed(() => [
+  props.orientation === "vertical" ? "inline-flex h-full" : "w-full",
+  props.orientation === "horizontal" 
+    ? useSpacing(props.spacing, 'marginY')
+    : useSpacing(props.spacing, 'marginX'),
+]);
+
+const lineClasses = computed(() => {
+  const borderClass = useVariantDividerBorder(
+    props.orientation,
+    props.thickness,
+    props.color
+  );
+  
+  if (props.orientation === "vertical") {
+    // Вертикальный divider: нужна минимальная ширина и высота
+    return [
+      "h-full min-h-[1rem] w-0",
+      borderClass,
+    ];
+  } else {
+    // Горизонтальный divider: нужна минимальная высота и ширина
+    return [
+      "flex-1 min-w-[1rem] h-0",
+      borderClass,
+    ];
+  }
+});
+</script>
+

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

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