dxd-style-code 0.1.7 → 0.1.9

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

@@ -0,0 +1,42 @@
+import DXPasswordInput from './DXPasswordInput.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXPasswordInput',
+  component: DXPasswordInput,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXPasswordInput },
+    setup() {
+      const password = ref('');
+      return { password };
+    },
+    template: '<DXPasswordInput v-model="password" label="Password" placeholder="Enter password" />',
+  }),
+};
+
+export const WithValue = {
+  render: () => ({
+    components: { DXPasswordInput },
+    setup() {
+      const password = ref('secretpassword');
+      return { password };
+    },
+    template: '<DXPasswordInput v-model="password" label="Password" />',
+  }),
+};
+
+export const WithHelper = {
+  render: () => ({
+    components: { DXPasswordInput },
+    setup() {
+      const password = ref('');
+      return { password };
+    },
+    template: '<DXPasswordInput v-model="password" label="Password" helper="At least 8 characters" />',
+  }),
+};
+

package/src/components/molecules/DXPasswordInput/DXPasswordInput.vue

@@ -0,0 +1,74 @@
+<template>
+  <DXFormLabel
+    :label="label"
+    :error="error"
+    :helper="helper"
+    :required="required"
+    data-component="DXPasswordInput"
+    :data-disabled="disabled"
+    :data-error="!!error"
+  >
+    <div class="relative">
+      <input
+        :type="showPassword ? 'text' : 'password'"
+        :placeholder="placeholder"
+        :value="modelValue"
+        :disabled="disabled"
+        :class="inputClasses"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+      <button
+        type="button"
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition"
+        :disabled="disabled"
+        @click="showPassword = !showPassword"
+        :aria-label="showPassword ? 'Скрыть пароль' : 'Показать пароль'"
+      >
+        <DXIcon :icon="showPassword ? EyeSlashIcon : EyeIcon" size="md" animation="scale" />
+      </button>
+    </div>
+  </DXFormLabel>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/vue/24/outline";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXFormLabel from "../../atoms/DXFormLabel/DXFormLabel.vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Значение (v-model) */
+  modelValue: { type: String, default: "" },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Текст ошибки */
+  error: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+});
+
+defineEmits(["update:modelValue"]);
+
+const showPassword = ref(false);
+
+const BASE_CLASSES = "w-full pr-11 h-10 px-4 py-2.5 text-sm rounded-xl border border-slate-200 bg-white text-slate-700 placeholder:text-slate-400 transition-colors";
+
+const inputClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    {
+      'hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300': !props.disabled,
+      'opacity-60 cursor-not-allowed bg-slate-50': props.disabled,
+      'border-rose-300 focus:ring-rose-500/10': props.error,
+    }
+  )
+);
+</script>
+

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

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

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

@@ -0,0 +1,60 @@
+import DXRadioCard from './DXRadioCard.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXRadioCard',
+  component: DXRadioCard,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXRadioCard },
+    setup() {
+      const selected = ref('plan1');
+      return { selected };
+    },
+    template: `
+      <div class="space-y-3 max-w-md">
+        <DXRadioCard 
+          v-model="selected" 
+          value="plan1"
+          title="Basic Plan" 
+          description="Perfect for getting started"
+        />
+        <DXRadioCard 
+          v-model="selected" 
+          value="plan2"
+          title="Pro Plan" 
+          description="For growing businesses"
+        />
+        <DXRadioCard 
+          v-model="selected" 
+          value="plan3"
+          title="Enterprise" 
+          description="For large organizations"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXRadioCard },
+    setup() {
+      const selected = ref('option1');
+      return { selected };
+    },
+    template: `
+      <DXRadioCard 
+        v-model="selected" 
+        value="option1"
+        title="Disabled Option" 
+        description="This option cannot be changed"
+        disabled
+      />
+    `,
+  }),
+};
+

package/src/components/molecules/DXRadioCard/DXRadioCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <label
+    class="block relative cursor-pointer group"
+    :class="{ 'cursor-not-allowed opacity-60': disabled }"
+    data-component="DXRadioCard"
+  >
+    <input
+      type="radio"
+      :value="value"
+      :checked="modelValue === value"
+      :disabled="disabled"
+      class="sr-only peer"
+      @change="$emit('update:modelValue', value)"
+    />
+    <div
+      class="border-2 rounded-xl p-4 transition-all"
+      :class="[
+        modelValue === value
+          ? 'border-slate-900 bg-slate-50'
+          : 'border-slate-200 bg-white',
+        !disabled && 'hover:border-slate-300 hover:shadow-sm',
+        disabled && 'bg-slate-50',
+      ]"
+    >
+      <div class="flex items-start gap-3">
+        <component
+          v-if="icon"
+          :is="icon"
+          class="w-6 h-6 flex-shrink-0"
+          :class="modelValue === value ? 'text-slate-900' : 'text-slate-400'"
+        />
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center justify-between">
+            <p
+              class="font-semibold"
+              :class="modelValue === value ? 'text-slate-900' : 'text-slate-700'"
+            >
+              {{ title }}
+            </p>
+            <div
+              v-if="modelValue === value"
+              class="w-5 h-5 rounded-full bg-slate-900 flex items-center justify-center flex-shrink-0"
+            >
+              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+          </div>
+          <p v-if="description" class="text-sm text-slate-600 mt-1">
+            {{ description }}
+          </p>
+          <slot />
+        </div>
+      </div>
+    </div>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: [String, Number, Boolean],
+  value: { type: [String, Number, Boolean], required: true },
+  title: { type: String, required: true },
+  description: { type: String, default: "" },
+  icon: { type: [Object, Function], default: null },
+  disabled: { type: Boolean, default: false },
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+

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

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

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

@@ -0,0 +1,297 @@
+import DXRadioGroup from './DXRadioGroup.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXRadioGroup',
+  component: DXRadioGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'custom'],
+      description: 'Radio variant'
+    },
+    color: {
+      control: 'select',
+      options: ['slate', 'primary', 'success', 'danger', 'warning', 'info'],
+      description: 'Color for custom variant'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Radio size'
+    },
+    layout: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Layout direction'
+    },
+  },
+};
+
+const sizeOptions = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large' },
+];
+
+const planOptions = [
+  { value: 'free', label: 'Free Plan' },
+  { value: 'basic', label: 'Basic Plan' },
+  { value: 'pro', label: 'Pro Plan' },
+  { value: 'enterprise', label: 'Enterprise Plan' },
+];
+
+// Default
+export const Default = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('medium');
+      return { selected, sizeOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="sizeOptions" label="Choose size" />',
+  }),
+};
+
+// Horizontal layout
+export const Horizontal = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('medium');
+      return { selected, sizeOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="sizeOptions" label="Choose size" layout="horizontal" />',
+  }),
+};
+
+// With helper text
+export const WithHelper = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('medium');
+      return { selected, sizeOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="sizeOptions" label="T-shirt size" helper="Select your preferred size" />',
+  }),
+};
+
+// Custom variant
+export const CustomVariant = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('pro');
+      return { selected, planOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="planOptions" label="Select plan" variant="custom" />',
+  }),
+};
+
+// Custom variant with color
+export const CustomWithColor = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('pro');
+      return { selected, planOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="planOptions" label="Select plan" variant="custom" color="success" />',
+  }),
+};
+
+// Custom horizontal
+export const CustomHorizontal = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('basic');
+      return { selected, planOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="planOptions" label="Choose your plan" variant="custom" color="info" layout="horizontal" />',
+  }),
+};
+
+// Different colors
+export const DifferentColors = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const slate = ref('medium');
+      const primary = ref('medium');
+      const success = ref('medium');
+      const danger = ref('medium');
+      const warning = ref('medium');
+      const info = ref('medium');
+      return { slate, primary, success, danger, warning, info, sizeOptions };
+    },
+    template: `
+      <div class="space-y-6">
+        <DXRadioGroup v-model="slate" :options="sizeOptions" label="Slate" variant="custom" color="slate" />
+        <DXRadioGroup v-model="primary" :options="sizeOptions" label="Primary (default)" variant="custom" color="primary" />
+        <DXRadioGroup v-model="success" :options="sizeOptions" label="Success" variant="custom" color="success" />
+        <DXRadioGroup v-model="danger" :options="sizeOptions" label="Danger" variant="custom" color="danger" />
+        <DXRadioGroup v-model="warning" :options="sizeOptions" label="Warning" variant="custom" color="warning" />
+        <DXRadioGroup v-model="info" :options="sizeOptions" label="Info" variant="custom" color="info" />
+      </div>
+    `,
+  }),
+};
+
+// Sizes
+export const Sizes = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const sm = ref('medium');
+      const md = ref('medium');
+      const lg = ref('medium');
+      return { sm, md, lg, sizeOptions };
+    },
+    template: `
+      <div class="space-y-6">
+        <DXRadioGroup v-model="sm" :options="sizeOptions" label="Small" size="sm" variant="custom" />
+        <DXRadioGroup v-model="md" :options="sizeOptions" label="Medium (default)" size="md" variant="custom" />
+        <DXRadioGroup v-model="lg" :options="sizeOptions" label="Large" size="lg" variant="custom" />
+      </div>
+    `,
+  }),
+};
+
+// Individual option colors
+export const IndividualColors = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const options = [
+        { value: 'free', label: 'Free Plan', color: 'slate' },
+        { value: 'basic', label: 'Basic Plan', color: 'info' },
+        { value: 'pro', label: 'Pro Plan', color: 'success' },
+        { value: 'enterprise', label: 'Enterprise Plan', color: 'danger' },
+      ];
+      const selected = ref('pro');
+      return { selected, options };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="options" label="Select plan (each with own color)" variant="custom" />',
+  }),
+};
+
+// Disabled
+export const Disabled = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const selected = ref('medium');
+      return { selected, sizeOptions };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="sizeOptions" label="Disabled group" disabled />',
+  }),
+};
+
+// Disabled individual option
+export const DisabledOption = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const options = [
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium (disabled)', disabled: true },
+        { value: 'large', label: 'Large' },
+      ];
+      const selected = ref('small');
+      return { selected, options };
+    },
+    template: '<DXRadioGroup v-model="selected" :options="options" label="With disabled option" variant="custom" />',
+  }),
+};
+
+// Real-world: Payment method
+export const PaymentMethod = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const options = [
+        { value: 'card', label: 'Credit Card', color: 'primary' },
+        { value: 'paypal', label: 'PayPal', color: 'info' },
+        { value: 'bank', label: 'Bank Transfer', color: 'success' },
+        { value: 'crypto', label: 'Cryptocurrency', color: 'warning' },
+      ];
+      const method = ref('card');
+      return { method, options };
+    },
+    template: `
+      <div class="bg-white p-6 rounded-xl border border-slate-200 max-w-md">
+        <DXRadioGroup 
+          v-model="method" 
+          :options="options" 
+          label="Payment Method"
+          helper="Choose your preferred payment method"
+          variant="custom"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Real-world: Difficulty level
+export const DifficultyLevel = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const options = [
+        { value: 'easy', label: 'Easy - Perfect for beginners', color: 'success' },
+        { value: 'medium', label: 'Medium - Some experience needed', color: 'warning' },
+        { value: 'hard', label: 'Hard - For experts only', color: 'danger' },
+      ];
+      const difficulty = ref('medium');
+      return { difficulty, options };
+    },
+    template: `
+      <div class="bg-white p-6 rounded-xl border border-slate-200 max-w-md">
+        <DXRadioGroup 
+          v-model="difficulty" 
+          :options="options" 
+          label="Select Difficulty"
+          variant="custom"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Comparison: Default vs Custom
+export const DefaultVsCustom = {
+  render: () => ({
+    components: { DXRadioGroup },
+    setup() {
+      const defaultSelected = ref('medium');
+      const customSelected = ref('medium');
+      return { defaultSelected, customSelected, sizeOptions };
+    },
+    template: `
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="p-6 bg-slate-50 rounded-xl">
+          <h3 class="text-sm font-semibold text-slate-900 mb-4">Default Variant</h3>
+          <DXRadioGroup 
+            v-model="defaultSelected" 
+            :options="sizeOptions" 
+            label="Native radio buttons"
+          />
+        </div>
+        
+        <div class="p-6 bg-slate-50 rounded-xl">
+          <h3 class="text-sm font-semibold text-slate-900 mb-4">Custom Variant</h3>
+          <DXRadioGroup 
+            v-model="customSelected" 
+            :options="sizeOptions" 
+            label="Custom styled radio"
+            variant="custom"
+            color="success"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/molecules/DXRadioGroup/DXRadioGroup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div 
+    class="space-y-2" 
+    data-component="DXRadioGroup"
+    :data-size="size"
+    :data-layout="layout"
+    :data-disabled="disabled"
+    :data-variant="variant"
+    :data-color="color"
+  >
+    <p v-if="label" class="text-sm font-medium text-slate-700 mb-3">{{ label }}</p>
+    
+    <div :class="layoutClasses">
+      <DXRadio
+        v-for="option in options"
+        :key="option.value"
+        :model-value="modelValue"
+        :value="option.value"
+        :label="option.label"
+        :disabled="disabled || option.disabled"
+        :size="size"
+        :variant="variant"
+        :color="option.color || color"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+    </div>
+    
+    <p v-if="helper" class="text-xs text-slate-500 mt-1">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import DXRadio from "../../atoms/DXRadio/DXRadio.vue";
+
+const props = defineProps({
+  /** Текущее значение (v-model) */
+  modelValue: { type: [String, Number, Boolean], default: null },
+  /** Опции: [{ value, label, disabled?, color? }] */
+  options: { type: Array, required: true },
+  /** Лейбл группы */
+  label: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Отключить все опции */
+  disabled: { type: Boolean, default: false },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Расположение: vertical | horizontal */
+  layout: { type: String, default: "vertical" },
+  /** Вариант: 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)
+  },
+});
+
+defineEmits(["update:modelValue"]);
+
+const layoutClasses = computed(() => 
+  props.layout === 'horizontal' 
+    ? 'flex flex-wrap items-center' 
+    : 'flex flex-col'
+);
+</script>
+

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

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