dxd-style-code 0.1.7 → 0.1.8

package/src/components/atoms/DXToast/DXToast.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="flex items-start gap-3 rounded-2xl border px-4 py-3 text-sm"
+    :class="variantClasses"
+    data-component="DXToast"
+    :data-variant="variant"
+  >
+    <DXIcon v-if="variantIcon" :icon="variantIcon" size="md" animation="none" :class="iconColorClass" class="shrink-0 mt-0.5" />
+    <div class="flex-1">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVariantConfig } from "@/composables/useVariant";
+import DXIcon from "../DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Вариант: info | success | warning | danger */
+  variant: { type: String, default: "info" },
+  /** Показывать иконку */
+  showIcon: { type: Boolean, default: true },
+});
+
+const config = computed(() => useVariantConfig(props.variant));
+const variantClasses = computed(() => `${config.value.bg} ${config.value.border} ${config.value.text}`);
+const variantIcon = computed(() => props.showIcon ? config.value.icon : null);
+const iconColorClass = computed(() => config.value.iconColor);
+</script>
+

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

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

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

@@ -0,0 +1,143 @@
+import DXToggle from "./DXToggle.vue";
+import { ref } from "vue";
+
+export default {
+  title: "Atoms/DXToggle",
+  component: DXToggle,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    color: {
+      control: { type: "select" },
+      options: ["slate", "primary", "success", "danger", "warning", "info"],
+    },
+    animation: { control: { type: "select" }, options: ["none", "smooth"] },
+  },
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXToggle },
+    setup() {
+      const enabled = ref(false);
+      return { enabled };
+    },
+    template: '<DXToggle v-model="enabled" />',
+  }),
+};
+
+export const WithLabel = {
+  render: () => ({
+    components: { DXToggle },
+    setup() {
+      const enabled = ref(true);
+      return { enabled };
+    },
+    template: '<DXToggle v-model="enabled" label="Enable notifications" />',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXToggle },
+    setup() {
+      const xs = ref(false);
+      const sm = ref(false);
+      const md = ref(false);
+      const lg = ref(false);
+      const xl = ref(false);
+      return { xs, sm, md, lg, xl };
+    },
+    template: `
+      <div class="flex flex-col gap-4 py-8">
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="xs" size="xs" label="Extra small" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="sm" size="sm" label="Small" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="md" size="md" label="Medium (default)" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="lg" size="lg" label="Large" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="xl" size="xl" label="Extra large" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Colors = {
+  render: () => ({
+    components: { DXToggle },
+    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="flex flex-col gap-4 py-8">
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="slate" color="slate" label="Slate" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="primary" color="primary" label="Primary" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="success" color="success" label="Success" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="danger" color="danger" label="Danger" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="warning" color="warning" label="Warning" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="info" color="info" label="Info" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Animations = {
+  render: () => ({
+    components: { DXToggle },
+    setup() {
+      const smooth = ref(false);
+      const none = ref(false);
+      return { smooth, none };
+    },
+    template: `
+      <div class="flex flex-col gap-4 py-8">
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="smooth" animation="smooth" label="Smooth animation (default)" />
+        </div>
+        <div class="flex items-center gap-4">
+          <DXToggle v-model="none" animation="none" label="No animation" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXToggle },
+    setup() {
+      const enabled = ref(false);
+      return { enabled };
+    },
+    template: '<DXToggle v-model="enabled" label="Disabled toggle" disabled />',
+  }),
+};

package/src/components/atoms/DXToggle/DXToggle.vue

@@ -0,0 +1,142 @@
+<template>
+  <label
+    :class="labelClasses"
+    data-component="DXToggle"
+    :data-disabled="disabled"
+    :data-checked="modelValue"
+    :data-size="size"
+    :data-color="color"
+  >
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="modelValue"
+      :disabled="disabled"
+      :class="buttonClasses"
+      @click="handleToggle"
+    >
+      <span :class="indicatorClasses" />
+    </button>
+    <span v-if="label" :class="labelTextClasses">
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantToggle } from "@/composables/useVariant";
+import { useAnimation } from "@/composables/useAnimation";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /** Значение (v-model) */
+  modelValue: { type: Boolean, default: false },
+  /** Текст лейбла */
+  label: { type: String, default: "" },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Цвет: slate | primary | success | danger | warning | info */
+  color: { type: String, default: "slate" },
+  /** Анимация: none | smooth */
+  animation: { type: String, default: "smooth" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+/**
+ * Обработчик переключения
+ */
+const handleToggle = () => {
+  if (!props.disabled) {
+    emit("update:modelValue", !props.modelValue);
+  }
+};
+
+/**
+ * Размеры toggle (track и thumb)
+ */
+const toggleSizes = computed(() => {
+  return useSize(props.size, "toggle");
+});
+
+/**
+ * Вариант toggle (цвета для checked/unchecked)
+ */
+const toggleVariant = computed(() => {
+  return useVariantToggle(props.color, props.modelValue);
+});
+
+/**
+ * Классы для label
+ */
+const labelClasses = computed(() =>
+  useClassComposition(
+    "inline-flex items-center gap-2 cursor-pointer mr-4",
+    {
+      'opacity-60 cursor-not-allowed': props.disabled,
+    }
+  )
+);
+
+/**
+ * Классы для кнопки (track)
+ */
+const buttonClasses = computed(() => {
+  const baseClasses = `relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${toggleSizes.value.track}`;
+  
+  return useClassComposition(
+    baseClasses,
+    {
+      [toggleVariant.value.current]: true,
+      [toggleVariant.value.ring]: true,
+    }
+  );
+});
+
+/**
+ * Классы для индикатора (thumb)
+ */
+const indicatorClasses = computed(() => {
+  const baseClasses = `inline-block rounded-full bg-white ${toggleSizes.value.thumb} ${useAnimation(props.animation, 'toggle')}`;
+  
+  // Вычисляем смещение в зависимости от размера
+  const translateClasses = getIndicatorTranslate(props.size);
+  
+  return useClassComposition(
+    baseClasses,
+    {
+      [translateClasses.checked]: props.modelValue,
+      [translateClasses.unchecked]: !props.modelValue,
+    }
+  );
+});
+
+/**
+ * Получить классы смещения для индикатора в зависимости от размера
+ * Вычисляется как: ширина track - ширина thumb - отступ справа
+ */
+function getIndicatorTranslate(size) {
+  const translations = {
+    xs: { checked: 'translate-x-4', unchecked: 'translate-x-0.5' }, // w-7 (28px) - w-3 (12px) - 2px = 14px ≈ translate-x-4
+    sm: { checked: 'translate-x-5', unchecked: 'translate-x-0.5' }, // w-9 (36px) - w-3.5 (14px) - 2px = 20px = translate-x-5
+    md: { checked: 'translate-x-6', unchecked: 'translate-x-1' },   // w-11 (44px) - w-4 (16px) - 4px = 24px = translate-x-6
+    lg: { checked: 'translate-x-8', unchecked: 'translate-x-1' },   // w-14 (56px) - w-5 (20px) - 4px = 32px = translate-x-8
+    xl: { checked: 'translate-x-9', unchecked: 'translate-x-1' },   // w-16 (64px) - w-6 (24px) - 4px = 36px = translate-x-9
+  };
+  
+  return translations[size] || translations.md;
+}
+
+/**
+ * Классы для текста лейбла
+ */
+const labelTextClasses = computed(() => {
+  const sizeText = useSize(props.size, "text");
+  return `${sizeText} text-slate-700 select-none`;
+});
+</script>
+

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

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