dxd-style-code 0.1.7 → 0.1.9

package/src/components/atoms/DXQuote/DXQuote.vue

@@ -0,0 +1,97 @@
+<template>
+  <q
+    :cite="cite"
+    :class="quoteClasses"
+    data-component="DXQuote"
+    :data-variant="variant"
+    :data-quote-style="quoteStyle"
+  >
+    <slot />
+  </q>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+
+const props = defineProps({
+  /**
+   * URL источника цитаты
+   */
+  cite: { type: String, default: null },
+  /**
+   * Вариант стилизации: default | highlighted
+   * @default 'default'
+   */
+  variant: {
+    type: String,
+    default: "default",
+    validator: (v) => ["default", "highlighted"].includes(v),
+  },
+  /**
+   * Стиль кавычек: default | french | german
+   * @default 'default'
+   */
+  quoteStyle: {
+    type: String,
+    default: "default",
+    validator: (v) => ["default", "french", "german"].includes(v),
+  },
+});
+
+/**
+ * Классы для цитаты
+ * 
+ * @description
+ * Вычисляет классы для inline-цитаты на основе варианта и стиля кавычек.
+ * 
+ * @returns {Array} Массив классов
+ */
+const quoteClasses = computed(() => {
+  const baseClasses = "inline";
+  
+  const variantClasses = {
+    default: "text-slate-700",
+    highlighted: "text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded",
+  };
+  
+  const quoteStyleClasses = {
+    default: "",
+    french: "dx-quote-french",
+    german: "dx-quote-german",
+  };
+  
+  return useClassComposition(
+    baseClasses,
+    variantClasses[props.variant] || variantClasses.default,
+    quoteStyleClasses[props.quoteStyle] || quoteStyleClasses.default
+  );
+});
+</script>
+
+<style scoped>
+/* Французские кавычки */
+.dx-quote-french::before {
+  content: "« ";
+}
+
+.dx-quote-french::after {
+  content: " »";
+}
+
+/* Немецкие кавычки */
+.dx-quote-german::before {
+  content: "„";
+}
+
+.dx-quote-german::after {
+  content: "“";
+}
+
+/* Стандартные кавычки (браузер по умолчанию) */
+:not(.dx-quote-french):not(.dx-quote-german)::before,
+:not(.dx-quote-french):not(.dx-quote-german)::after {
+  content: none;
+}
+</style>
+

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

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

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

@@ -0,0 +1,277 @@
+import DXRadio from './DXRadio.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Atoms/DXRadio',
+  component: DXRadio,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'custom'],
+      description: 'Radio variant'
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Radio size'
+    },
+    color: {
+      control: 'select',
+      options: ['slate', 'primary', 'success', 'danger', 'warning', 'info'],
+      description: 'Color for custom variant'
+    },
+  },
+};
+
+// Default native radio
+export const Default = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('option1');
+      return { selected };
+    },
+    template: `
+      <div class="space-y-2">
+        <DXRadio v-model="selected" value="option1" label="Option 1" />
+        <DXRadio v-model="selected" value="option2" label="Option 2" />
+        <DXRadio v-model="selected" value="option3" label="Option 3" />
+      </div>
+    `,
+  }),
+};
+
+// Disabled
+export const Disabled = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('option1');
+      return { selected };
+    },
+    template: `
+      <div class="space-y-2">
+        <DXRadio v-model="selected" value="option1" label="Selected and disabled" disabled />
+        <DXRadio v-model="selected" value="option2" label="Not selected and disabled" disabled />
+      </div>
+    `,
+  }),
+};
+
+// Sizes (default variant)
+export const Sizes = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('md');
+      return { selected };
+    },
+    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>
+          <DXRadio v-model="selected" value="xs" size="xs" label="Extra small radio" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Small (14px)</p>
+          <DXRadio v-model="selected" value="sm" size="sm" label="Small radio" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Medium (16px) - Default</p>
+          <DXRadio v-model="selected" value="md" size="md" label="Medium radio (default)" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Large (20px)</p>
+          <DXRadio v-model="selected" value="lg" size="lg" label="Large radio" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-medium text-slate-500">Extra Large (24px)</p>
+          <DXRadio v-model="selected" value="xl" size="xl" label="Extra large radio" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Inline layout (horizontal)
+export const InlineLayout = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('option2');
+      return { selected };
+    },
+    template: `
+      <div>
+        <p class="text-sm font-medium text-slate-700 mb-2">Select one option:</p>
+        <div class="flex flex-wrap items-center">
+          <DXRadio v-model="selected" value="option1" label="Option 1" />
+          <DXRadio v-model="selected" value="option2" label="Option 2" />
+          <DXRadio v-model="selected" value="option3" label="Option 3" />
+          <DXRadio v-model="selected" value="option4" label="Option 4" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Custom variant with default dot
+export const CustomDefault = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('option2');
+      return { selected };
+    },
+    template: `
+      <div class="space-y-2">
+        <DXRadio v-model="selected" value="option1" variant="custom" label="Option 1" />
+        <DXRadio v-model="selected" value="option2" variant="custom" label="Option 2 (selected)" />
+        <DXRadio v-model="selected" value="option3" variant="custom" label="Option 3" />
+      </div>
+    `,
+  }),
+};
+
+// Custom colors
+export const CustomColors = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('primary');
+      return { selected };
+    },
+    template: `
+      <div class="space-y-3">
+        <DXRadio v-model="selected" value="slate" variant="custom" color="slate" label="Slate" />
+        <DXRadio v-model="selected" value="primary" variant="custom" color="primary" label="Primary (default)" />
+        <DXRadio v-model="selected" value="success" variant="custom" color="success" label="Success" />
+        <DXRadio v-model="selected" value="danger" variant="custom" color="danger" label="Danger" />
+        <DXRadio v-model="selected" value="warning" variant="custom" color="warning" label="Warning" />
+        <DXRadio v-model="selected" value="info" variant="custom" color="info" label="Info" />
+      </div>
+    `,
+  }),
+};
+
+// Custom sizes
+export const CustomSizes = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const selected = ref('md');
+      return { selected };
+    },
+    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>
+          <DXRadio v-model="selected" value="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 (14px)</p>
+          <DXRadio v-model="selected" value="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 (16px) - Default</p>
+          <DXRadio v-model="selected" value="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 (20px)</p>
+          <DXRadio v-model="selected" value="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>
+          <DXRadio v-model="selected" value="xl" variant="custom" size="xl" label="Extra large custom" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Custom inline layout
+export const CustomInlineLayout = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const plan = ref('pro');
+      return { plan };
+    },
+    template: `
+      <div>
+        <p class="text-sm font-medium text-slate-700 mb-2">Select your plan:</p>
+        <div class="flex flex-wrap items-center">
+          <DXRadio v-model="plan" value="free" variant="custom" color="slate" label="Free" />
+          <DXRadio v-model="plan" value="basic" variant="custom" color="info" label="Basic" />
+          <DXRadio v-model="plan" value="pro" variant="custom" color="success" label="Pro" />
+          <DXRadio v-model="plan" value="enterprise" variant="custom" color="primary" label="Enterprise" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Real-world example: Payment method
+export const PaymentMethod = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const method = ref('card');
+      return { method };
+    },
+    template: `
+      <div class="bg-white p-6 rounded-xl border border-slate-200 max-w-md">
+        <h3 class="text-lg font-semibold text-slate-900 mb-4">Payment Method</h3>
+        <div class="space-y-3">
+          <DXRadio v-model="method" value="card" variant="custom" color="primary" label="Credit Card" />
+          <DXRadio v-model="method" value="paypal" variant="custom" color="info" label="PayPal" />
+          <DXRadio v-model="method" value="bank" variant="custom" color="success" label="Bank Transfer" />
+          <DXRadio v-model="method" value="crypto" variant="custom" color="warning" label="Cryptocurrency" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Real-world example: Shipping options
+export const ShippingOptions = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const shipping = ref('standard');
+      return { shipping };
+    },
+    template: `
+      <div class="bg-white p-6 rounded-xl border border-slate-200 max-w-md">
+        <h3 class="text-lg font-semibold text-slate-900 mb-4">Shipping Options</h3>
+        <div class="space-y-3">
+          <DXRadio v-model="shipping" value="standard" variant="custom" color="slate" label="Standard (5-7 days) - Free" />
+          <DXRadio v-model="shipping" value="express" variant="custom" color="info" label="Express (2-3 days) - $9.99" />
+          <DXRadio v-model="shipping" value="overnight" variant="custom" color="danger" label="Overnight (1 day) - $24.99" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+// Real-world example: Difficulty level
+export const DifficultyLevel = {
+  render: () => ({
+    components: { DXRadio },
+    setup() {
+      const difficulty = ref('medium');
+      return { difficulty };
+    },
+    template: `
+      <div class="bg-white p-6 rounded-xl border border-slate-200 max-w-md">
+        <h3 class="text-lg font-semibold text-slate-900 mb-4">Select Difficulty</h3>
+        <div class="space-y-3">
+          <DXRadio v-model="difficulty" value="easy" variant="custom" color="success" label="Easy - Perfect for beginners" />
+          <DXRadio v-model="difficulty" value="medium" variant="custom" color="warning" label="Medium - Some experience needed" />
+          <DXRadio v-model="difficulty" value="hard" variant="custom" color="danger" label="Hard - For experts only" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/atoms/DXRadio/DXRadio.vue

@@ -0,0 +1,144 @@
+<template>
+  <label
+    :class="labelClasses"
+    data-component="DXRadio"
+    :data-size="size"
+    :data-disabled="disabled"
+    :data-checked="isChecked"
+    :data-variant="variant"
+    @click="variant === 'custom' && !disabled && handleCustomChange()"
+  >
+    <!-- Нативный radio (default variant) -->
+    <input
+      v-if="variant === 'default'"
+      type="radio"
+      :value="value"
+      :checked="isChecked"
+      :disabled="disabled"
+      :class="inputClasses"
+      @change="$emit('update:modelValue', value)"
+    />
+    
+    <!-- Кастомный radio с точкой -->
+    <div
+      v-else
+      :class="customRadioClasses"
+      @click.stop="handleCustomChange"
+      role="radio"
+      :aria-checked="isChecked"
+      :aria-disabled="disabled"
+      tabindex="0"
+      @keydown.space.prevent="handleCustomChange"
+    >
+      <Transition v-bind="RADIO_TRANSITION" mode="out-in">
+        <div
+          v-if="isChecked"
+          :class="dotClasses"
+        />
+      </Transition>
+    </div>
+    
+    <span v-if="label" :class="labelTextClasses">
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantRadio } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Текущее значение группы (v-model) */
+  modelValue: { type: [String, Number, Boolean], default: null },
+  /** Значение этого radio */
+  value: { type: [String, Number, Boolean], required: true },
+  /** Текст лейбла */
+  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)
+  },
+  /** Цвет для 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 RADIO_TRANSITION = {
+  enterActiveClass: 'transition-opacity transition-transform duration-150 ease-out',
+  enterFromClass: 'opacity-0 scale-0',
+  enterToClass: 'opacity-100 scale-100',
+  leaveActiveClass: 'transition-opacity transition-transform duration-150 ease-in',
+  leaveFromClass: 'opacity-100 scale-100',
+  leaveToClass: 'opacity-0 scale-0',
+};
+
+const BASE_LABEL_CLASSES = "inline-flex items-center gap-2 cursor-pointer mr-4";
+const BASE_INPUT_CLASSES = "rounded-full 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 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 flex-shrink-0";
+
+// Dot size mapping: radio size -> dot size
+const getDotSize = (size) => {
+  const map = { xs: 'w-1.5 h-1.5', sm: 'w-2 h-2', md: 'w-2.5 h-2.5', lg: 'w-3 h-3', xl: 'w-3 h-3' };
+  return map[size] || 'w-2.5 h-2.5';
+};
+
+
+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, 'radio')
+]);
+
+const customRadioClasses = computed(() => {
+  const colorClasses = useVariantRadio(props.color);
+  return [
+    BASE_CUSTOM_CLASSES,
+    useSize(props.size, 'radio'),
+    {
+      [colorClasses.unchecked]: !isChecked.value && !props.disabled,
+      [colorClasses.checked]: isChecked.value && !props.disabled,
+      [colorClasses.ring]: !props.disabled,
+      'opacity-50 cursor-not-allowed': props.disabled,
+    }
+  ];
+});
+
+const dotClasses = computed(() => {
+  const colorClasses = useVariantRadio(props.color);
+  return [
+    'rounded-full transition-all duration-200 absolute',
+    getDotSize(props.size),
+    colorClasses.dot,
+  ];
+});
+
+const isChecked = computed(() => props.modelValue === props.value);
+
+const handleCustomChange = () => {
+  if (props.disabled) return;
+  emit("update:modelValue", props.value);
+};
+</script>

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

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

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

@@ -0,0 +1,50 @@
+import DXSkeleton from './DXSkeleton.vue';
+
+export default {
+  title: 'Atoms/DXSkeleton',
+  component: DXSkeleton,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXSkeleton },
+    template: '<DXSkeleton class="h-4 w-48" />',
+  }),
+};
+
+export const Circle = {
+  render: () => ({
+    components: { DXSkeleton },
+    template: '<DXSkeleton class="h-12 w-12 rounded-full" />',
+  }),
+};
+
+export const Card = {
+  render: () => ({
+    components: { DXSkeleton },
+    template: `
+      <div class="space-y-3 p-4 border rounded-xl">
+        <DXSkeleton class="h-4 w-3/4" />
+        <DXSkeleton class="h-4 w-full" />
+        <DXSkeleton class="h-4 w-1/2" />
+      </div>
+    `,
+  }),
+};
+
+export const Avatar = {
+  render: () => ({
+    components: { DXSkeleton },
+    template: `
+      <div class="flex items-center gap-3">
+        <DXSkeleton class="h-10 w-10 rounded-full" />
+        <div class="space-y-2">
+          <DXSkeleton class="h-4 w-24" />
+          <DXSkeleton class="h-3 w-32" />
+        </div>
+      </div>
+    `,
+  }),
+};
+

package/src/components/atoms/DXSkeleton/DXSkeleton.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="['animate-pulse bg-slate-200', rounded]"
+    :style="{ width, height }"
+    data-component="DXSkeleton"
+  />
+</template>
+
+<script setup>
+defineProps({
+  /** Ширина */
+  width: { type: String, default: "100%" },
+  /** Высота */
+  height: { type: String, default: "1rem" },
+  /** Скругление */
+  rounded: { type: String, default: "rounded-md" },
+});
+</script>
+

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

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