dxd-style-code 0.1.7 → 0.1.9

package/src/components/molecules/DXFileUpload/DXFileUpload.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="w-full" data-component="DXFileUpload">
+    <label v-if="label" class="block text-sm font-medium text-slate-700 mb-1">{{ label }}</label>
+    
+    <!-- Drop Zone -->
+    <div
+      ref="dropZone"
+      class="relative border-2 border-dashed rounded-xl p-6 transition-all"
+      :class="[
+        isDragging
+          ? 'border-slate-900 bg-slate-50 scale-105'
+          : 'border-slate-300 bg-white hover:border-slate-400',
+        disabled && 'opacity-60 cursor-not-allowed',
+      ]"
+      @dragenter.prevent="handleDragEnter"
+      @dragover.prevent
+      @dragleave.prevent="handleDragLeave"
+      @drop.prevent="handleDrop"
+    >
+      <input
+        ref="fileInput"
+        type="file"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        class="hidden"
+        @change="handleFileSelect"
+      />
+      
+      <!-- Upload Icon & Text -->
+      <div v-if="!files.length" class="text-center">
+        <DXIcon :icon="CloudArrowUpIcon" size="xl" animation="none" class="mx-auto text-slate-400 mb-3 w-12 h-12" />
+        <p class="text-sm font-medium text-slate-700 mb-1">
+          Перетащите файлы сюда или 
+          <button
+            type="button"
+            class="text-slate-900 underline hover:no-underline"
+            :disabled="disabled"
+            @click="fileInput?.click()"
+          >
+            выберите
+          </button>
+        </p>
+        <p class="text-xs text-slate-500">
+          {{ accept || 'Любые файлы' }}
+          {{ maxSize ? `• Макс. ${maxSize}` : '' }}
+        </p>
+      </div>
+      
+      <!-- File List -->
+      <div v-else class="space-y-2">
+        <div
+          v-for="(file, index) in files"
+          :key="index"
+          class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg"
+        >
+          <!-- Preview for images -->
+          <div
+            v-if="file.type?.startsWith('image/')"
+            class="w-12 h-12 flex-shrink-0 rounded overflow-hidden bg-slate-200"
+          >
+            <img
+              :src="file.preview"
+              :alt="file.name"
+              class="w-full h-full object-cover"
+            />
+          </div>
+          <DXIcon v-else :icon="DocumentIcon" size="lg" animation="none" class="text-slate-400 flex-shrink-0" />
+          
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">
+              {{ file.name }}
+            </p>
+            <p class="text-xs text-slate-500">
+              {{ formatFileSize(file.size) }}
+            </p>
+          </div>
+          
+          <button
+            type="button"
+            class="text-slate-400 hover:text-slate-600 transition-colors"
+            @click="removeFile(index)"
+            aria-label="Удалить файл"
+          >
+            <DXIcon :icon="XMarkIcon" size="md" animation="scale" />
+          </button>
+        </div>
+        
+        <!-- Add More Button -->
+        <button
+          v-if="multiple"
+          type="button"
+          class="w-full py-2 text-sm text-slate-600 hover:text-slate-900 border border-slate-200 rounded-lg hover:bg-slate-50"
+          :disabled="disabled"
+          @click="fileInput?.click()"
+        >
+          <DXIcon :icon="PlusIcon" size="sm" animation="none" class="inline mr-1" />
+          Добавить ещё
+        </button>
+      </div>
+    </div>
+    
+    <p v-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+    <p v-if="error" class="mt-1 text-xs text-rose-500">{{ error }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { CloudArrowUpIcon, DocumentIcon, XMarkIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  modelValue: [File, FileList, Array],
+  label: { type: String, default: "" },
+  helper: { type: String, default: "" },
+  accept: { type: String, default: "" },
+  multiple: { type: Boolean, default: false },
+  maxSize: { type: String, default: "" },
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue", "upload"]);
+
+const fileInput = ref(null);
+const dropZone = ref(null);
+const isDragging = ref(false);
+const files = ref([]);
+const error = ref("");
+
+const handleFileSelect = (event) => {
+  const selectedFiles = Array.from(event.target.files || []);
+  processFiles(selectedFiles);
+};
+
+const handleDrop = (event) => {
+  isDragging.value = false;
+  if (props.disabled) return;
+  
+  const droppedFiles = Array.from(event.dataTransfer?.files || []);
+  processFiles(droppedFiles);
+};
+
+const handleDragEnter = () => {
+  if (!props.disabled) {
+    isDragging.value = true;
+  }
+};
+
+const handleDragLeave = (event) => {
+  if (event.target === dropZone.value) {
+    isDragging.value = false;
+  }
+};
+
+const processFiles = (newFiles) => {
+  error.value = "";
+  
+  const validFiles = newFiles.map((file) => {
+    if (file.type.startsWith("image/")) {
+      const preview = URL.createObjectURL(file);
+      return Object.assign(file, { preview });
+    }
+    return file;
+  });
+  
+  if (props.multiple) {
+    files.value = [...files.value, ...validFiles];
+  } else {
+    files.value = validFiles.slice(0, 1);
+  }
+  
+  emit("update:modelValue", props.multiple ? files.value : files.value[0]);
+};
+
+const removeFile = (index) => {
+  const removed = files.value[index];
+  if (removed.preview) {
+    URL.revokeObjectURL(removed.preview);
+  }
+  files.value.splice(index, 1);
+  emit("update:modelValue", props.multiple ? files.value : files.value[0] || null);
+};
+
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal) {
+    files.value = [];
+  }
+});
+</script>
+

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

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

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

@@ -0,0 +1,43 @@
+import DXFilterGroup from './DXFilterGroup.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXFilterGroup',
+  component: DXFilterGroup,
+  tags: ['autodocs'],
+};
+
+const filters = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'completed', label: 'Completed' },
+];
+
+export const Default = {
+  render: () => ({
+    components: { DXFilterGroup },
+    setup() {
+      const selected = ref('all');
+      return { selected, filters };
+    },
+    template: '<DXFilterGroup v-model="selected" :filters="filters" />',
+  }),
+};
+
+export const WithCounts = {
+  render: () => ({
+    components: { DXFilterGroup },
+    setup() {
+      const selected = ref('all');
+      const filtersWithCount = [
+        { value: 'all', label: 'All', count: 50 },
+        { value: 'active', label: 'Active', count: 32 },
+        { value: 'completed', label: 'Completed', count: 18 },
+      ];
+      return { selected, filtersWithCount };
+    },
+    template: '<DXFilterGroup v-model="selected" :filters="filtersWithCount" />',
+  }),
+};
+

package/src/components/molecules/DXFilterGroup/DXFilterGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="space-y-2" data-component="DXFilterGroup">
+    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">{{ label }}</p>
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        class="px-3 py-2 rounded-full text-xs font-semibold border transition"
+        :class="modelValue === option.value 
+          ? 'bg-slate-800 text-white border-slate-800' 
+          : 'border-slate-200 text-slate-700 hover:border-slate-300 bg-white'"
+        @click="$emit('update:modelValue', option.value)"
+      >
+        {{ option.label }}
+      </button>
+      <button
+        v-if="modelValue && clearable"
+        type="button"
+        class="px-3 py-2 rounded-full text-xs font-semibold border border-amber-300 text-amber-700 bg-amber-50 hover:bg-amber-100 transition"
+        @click="$emit('update:modelValue', null)"
+      >
+        Сбросить
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  /** Лейбл группы */
+  label: { type: String, required: true },
+  /** Опции: [{ value, label }] */
+  options: { type: Array, default: () => [] },
+  /** Текущее значение (v-model) */
+  modelValue: [String, Boolean],
+  /** Показывать кнопку сброса */
+  clearable: { type: Boolean, default: true },
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+

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

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

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

@@ -0,0 +1,69 @@
+import DXFormControl from './DXFormControl.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Molecules/DXFormControl',
+  component: DXFormControl,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXFormControl },
+    setup() {
+      const value = ref('');
+      return { value };
+    },
+    template: `
+      <DXFormControl label="Email">
+        <input v-model="value" type="email" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm" placeholder="Enter email" />
+      </DXFormControl>
+    `,
+  }),
+};
+
+export const WithCounter = {
+  render: () => ({
+    components: { DXFormControl },
+    setup() {
+      const value = ref('Hello');
+      return { value };
+    },
+    template: `
+      <DXFormControl label="Bio" :max-length="100" :current-length="5" show-count>
+        <textarea v-model="value" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm" rows="3"></textarea>
+      </DXFormControl>
+    `,
+  }),
+};
+
+export const ValidationSuccess = {
+  render: () => ({
+    components: { DXFormControl },
+    setup() {
+      const value = ref('valid@email.com');
+      return { value };
+    },
+    template: `
+      <DXFormControl label="Email" validation-state="success">
+        <input v-model="value" type="email" class="w-full rounded-xl border border-emerald-300 px-4 py-3 text-sm" />
+      </DXFormControl>
+    `,
+  }),
+};
+
+export const ValidationError = {
+  render: () => ({
+    components: { DXFormControl },
+    setup() {
+      const value = ref('invalid');
+      return { value };
+    },
+    template: `
+      <DXFormControl label="Email" validation-state="error" error="Invalid email format">
+        <input v-model="value" type="email" class="w-full rounded-xl border border-rose-300 px-4 py-3 text-sm" />
+      </DXFormControl>
+    `,
+  }),
+};
+

package/src/components/molecules/DXFormControl/DXFormControl.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="w-full" data-component="DXFormControl">
+    <div class="flex items-center justify-between mb-1">
+      <label v-if="label" class="text-sm font-medium text-slate-700">
+        {{ label }}
+        <span v-if="required" class="text-rose-500">*</span>
+      </label>
+      <span v-if="maxLength && showCount" class="text-xs text-slate-500">
+        {{ currentLength }} / {{ maxLength }}
+      </span>
+    </div>
+    
+    <div class="relative">
+      <!-- Prefix Icon -->
+      <div
+        v-if="$slots.prefix || prefixIcon"
+        class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+      >
+        <DXIcon v-if="prefixIcon" :icon="prefixIcon" size="sm" animation="none" />
+        <slot name="prefix" />
+      </div>
+      
+      <!-- Input/Select/Textarea -->
+      <div :class="{ 'pl-11': $slots.prefix || prefixIcon, 'pr-10': showValidationIcon }">
+        <slot />
+      </div>
+      
+      <!-- Validation Icon -->
+      <div v-if="showValidationIcon" class="absolute right-3 top-1/2 -translate-y-1/2">
+        <DXValidationIcon :state="validationState" size="md" />
+      </div>
+    </div>
+    
+    <p v-if="error" class="mt-1 text-xs text-rose-500 flex items-center gap-1">
+      <DXValidationIcon state="error" size="xs" />
+      {{ error }}
+    </p>
+    <p v-else-if="helper" class="mt-1 text-xs text-slate-500">{{ helper }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXValidationIcon from "../DXValidationIcon/DXValidationIcon.vue";
+
+const props = defineProps({
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Текст ошибки */
+  error: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+  /** Состояние валидации: success | error | '' */
+  validationState: { type: String, default: "" },
+  /** Иконка-префикс */
+  prefixIcon: { type: [Object, Function], default: null },
+  /** Максимальная длина */
+  maxLength: { type: Number, default: 0 },
+  /** Текущая длина */
+  currentLength: { type: Number, default: 0 },
+  /** Показывать счетчик */
+  showCount: { type: Boolean, default: false },
+});
+
+const showValidationIcon = computed(() => {
+  return props.validationState === "success" || props.validationState === "error";
+});
+</script>
+

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

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