dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXTableToolbar/DXTableToolbar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div 
+    class="flex items-center justify-between gap-4 py-4 px-0 bg-white" 
+    data-component="DXTableToolbar"
+  >
+    <div class="flex items-center gap-4 flex-1">
+      <!-- Search -->
+      <DXInput
+        v-if="searchable"
+        :modelValue="searchQuery"
+        @update:modelValue="$emit('update:searchQuery', $event)"
+        placeholder="Поиск..."
+        :size="size"
+        class="max-w-xs"
+      >
+        <template #prefix>
+          <DXIcon :icon="MagnifyingGlassIcon" :size="size" class="text-slate-400" />
+        </template>
+      </DXInput>
+
+      <!-- Selection Info -->
+      <div v-if="selectedCount > 0" class="text-sm text-slate-600">
+        Выбрано: {{ selectedCount }}
+      </div>
+
+      <!-- Custom slot for left side -->
+      <slot name="left" />
+    </div>
+
+    <div class="flex items-center gap-2">
+      <!-- Custom slot for right side -->
+      <slot name="right" />
+
+      <!-- Column Toggle -->
+      <DXDropdown v-if="columnToggle" position="bottom" width="auto">
+        <template #trigger>
+          <DXIcon :icon="ViewColumnsIcon" size="md" />
+          <span class="text-sm">Столбцы</span>
+        </template>
+        <div class="p-2 space-y-1">
+          <div
+            v-for="col in columns"
+            :key="col.key"
+            class="flex items-center gap-2 px-2 py-1 hover:bg-slate-50 rounded"
+          >
+            <DXCheckbox
+              :checked="col.visible"
+              @change="$emit('toggle-column', col.key)"
+              :size="size"
+            />
+            <span class="text-sm">{{ col.label }}</span>
+          </div>
+        </div>
+      </DXDropdown>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { MagnifyingGlassIcon, ViewColumnsIcon } from '@heroicons/vue/24/outline';
+import DXInput from '../DXInput/DXInput.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import DXCheckbox from '../../atoms/DXCheckbox/DXCheckbox.vue';
+import DXDropdown from '../../organisms/DXDropdown/DXDropdown.vue';
+
+defineProps({
+  /** Размер элементов управления */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v),
+  },
+  /** Значение поискового запроса */
+  searchQuery: {
+    type: String,
+    default: '',
+  },
+  /** Показать поиск */
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+  /** Количество выбранных элементов */
+  selectedCount: {
+    type: Number,
+    default: 0,
+  },
+  /** Показать переключатель столбцов */
+  columnToggle: {
+    type: Boolean,
+    default: false,
+  },
+  /** Список столбцов с информацией о видимости */
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineEmits(['update:searchQuery', 'toggle-column']);
+</script>
+

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

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

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

@@ -0,0 +1,239 @@
+import DXTextarea from './DXTextarea.vue';
+import { ref } from 'vue';
+import {
+  ChatBubbleLeftIcon,
+  DocumentTextIcon,
+  PencilIcon,
+  StarIcon,
+} from '@heroicons/vue/24/outline';
+
+export default {
+  title: 'Molecules/DXTextarea',
+  component: DXTextarea,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const value = ref('');
+      return { value };
+    },
+    template: '<DXTextarea v-model="value" label="Description" placeholder="Enter description..." />',
+  }),
+};
+
+export const WithValue = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const value = ref('This is some sample text in the textarea.');
+      return { value };
+    },
+    template: '<DXTextarea v-model="value" label="Notes" />',
+  }),
+};
+
+export const WithHelper = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const value = ref('');
+      return { value };
+    },
+    template: '<DXTextarea v-model="value" label="Bio" helper="Maximum 500 characters" />',
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const value = ref('Disabled content');
+      return { value };
+    },
+    template: '<DXTextarea v-model="value" label="Disabled" disabled />',
+  }),
+};
+
+export const WithError = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const value = ref('Invalid content');
+      return { value };
+    },
+    template: '<DXTextarea v-model="value" label="Description" error="This field is required" />',
+  }),
+};
+
+// С иконками
+export const WithPrefixIcon = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const message = ref('');
+      return { message, ChatBubbleLeftIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="message"
+        label="Message"
+        placeholder="Write your message..."
+        :prefix-icon="ChatBubbleLeftIcon"
+        :rows="4"
+      />
+    `,
+  }),
+};
+
+export const WithSuffixIcon = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const note = ref('');
+      return { note, StarIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="note"
+        label="Note"
+        placeholder="Add a note..."
+        :suffix-icon="StarIcon"
+        :rows="3"
+      />
+    `,
+  }),
+};
+
+export const WithBothIcons = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const text = ref('');
+      return { text, ChatBubbleLeftIcon, StarIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="text"
+        label="Message with Icons"
+        placeholder="Type your message..."
+        :prefix-icon="ChatBubbleLeftIcon"
+        :suffix-icon="StarIcon"
+        :rows="4"
+      />
+    `,
+  }),
+};
+
+export const WithCharacterCount = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const description = ref('');
+      return { description, PencilIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="description"
+        label="Description"
+        placeholder="Describe your product..."
+        :prefix-icon="PencilIcon"
+        :max-length="500"
+        :show-count="true"
+        :rows="6"
+      />
+    `,
+  }),
+};
+
+export const Review = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const review = ref('');
+      return { review, StarIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="review"
+        label="Your Review"
+        placeholder="Share your experience..."
+        :prefix-icon="StarIcon"
+        :max-length="1000"
+        :show-count="true"
+        :rows="5"
+        helper="Write a detailed review to help others"
+      />
+    `,
+  }),
+};
+
+export const WithAutoResize = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const text = ref('');
+      return { text, DocumentTextIcon };
+    },
+    template: `
+      <DXTextarea
+        v-model="text"
+        label="Auto-resize Textarea"
+        placeholder="Start typing and watch it grow..."
+        :prefix-icon="DocumentTextIcon"
+        :auto-resize="true"
+        :rows="3"
+        helper="This textarea will automatically expand as you type"
+      />
+    `,
+  }),
+};
+
+export const AllIconTypes = {
+  render: () => ({
+    components: { DXTextarea },
+    setup() {
+      const message = ref('');
+      const description = ref('');
+      const review = ref('');
+      return { 
+        message, description, review,
+        ChatBubbleLeftIcon, DocumentTextIcon, StarIcon 
+      };
+    },
+    template: `
+      <div class="space-y-6 max-w-2xl">
+        <DXTextarea
+          v-model="message"
+          label="Message"
+          placeholder="Write your message..."
+          :prefix-icon="ChatBubbleLeftIcon"
+          :rows="3"
+        />
+        
+        <DXTextarea
+          v-model="description"
+          label="Description"
+          placeholder="Describe it..."
+          :prefix-icon="DocumentTextIcon"
+          :max-length="300"
+          :show-count="true"
+          :rows="4"
+        />
+        
+        <DXTextarea
+          v-model="review"
+          label="Review"
+          placeholder="Your feedback..."
+          :prefix-icon="StarIcon"
+          :max-length="500"
+          :show-count="true"
+          :rows="5"
+        />
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXTextarea/DXTextarea.vue

@@ -0,0 +1,158 @@
+<template>
+  <DXFormLabel
+    :label="label"
+    :error="error"
+    :helper="helper"
+    :required="required"
+    :maxLength="maxLength"
+    :currentLength="currentLength"
+    :showCount="showCount"
+    data-component="DXTextarea"
+    :data-disabled="disabled"
+    :data-error="!!error"
+  >
+    <div class="relative">
+      <DXIconWrapper
+        v-if="prefixIcon"
+        position="left"
+        verticalAlign="top"
+        :icon="prefixIcon"
+        size="md"
+      />
+      
+      <textarea
+        :rows="rows"
+        :placeholder="placeholder"
+        :value="modelValue"
+        :disabled="disabled"
+        :maxlength="maxLength > 0 ? maxLength : null"
+        :class="textareaClasses"
+        @input="handleInput"
+      />
+      
+      <DXIconWrapper
+        v-if="suffixIcon"
+        position="right"
+        verticalAlign="top"
+        :icon="suffixIcon"
+        size="md"
+      />
+    </div>
+  </DXFormLabel>
+</template>
+
+<script setup>
+import { computed, ref, watch, inject, onMounted, onUnmounted } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXFormLabel from "../../atoms/DXFormLabel/DXFormLabel.vue";
+import DXIconWrapper from "../../atoms/DXIconWrapper/DXIconWrapper.vue";
+
+const inputGroup = inject("inputGroup", null);
+
+// Генерируем уникальный ID для регистрации
+const componentId = Date.now() + Math.random();
+
+onMounted(() => {
+  if (inputGroup?.registerComponent) {
+    inputGroup.registerComponent('textarea', componentId);
+  }
+});
+
+onUnmounted(() => {
+  if (inputGroup?.unregisterComponent) {
+    inputGroup.unregisterComponent(componentId);
+  }
+});
+
+// Получаем информацию о позиции addon
+const addonPosition = computed(() => {
+  if (!inputGroup?.getComponentPosition) {
+    return { hasLeftAddon: false, hasRightAddon: false };
+  }
+  return inputGroup.getComponentPosition(componentId);
+});
+
+const props = defineProps({
+  /** Значение (v-model) */
+  modelValue: String,
+  /** Placeholder */
+  placeholder: { type: String, default: "" },
+  /** Количество строк */
+  rows: { type: Number, default: 3 },
+  /** Лейбл */
+  label: { type: String, default: "" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+  /** Отключенное состояние */
+  disabled: { type: Boolean, default: false },
+  /** Текст ошибки */
+  error: { type: String, default: "" },
+  /** Вспомогательный текст */
+  helper: { type: String, default: "" },
+  /** Иконка слева (в верхнем левом углу) */
+  prefixIcon: { type: [Object, Function], default: null },
+  /** Иконка справа (в верхнем правом углу) */
+  suffixIcon: { type: [Object, Function], default: null },
+  /** Максимальная длина */
+  maxLength: { type: Number, default: 0 },
+  /** Показывать счетчик символов */
+  showCount: { type: Boolean, default: false },
+  /** Автоматическое изменение размера */
+  autoResize: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const currentLength = ref(props.modelValue?.length || 0);
+
+const handleInput = (event) => {
+  const value = event.target.value;
+  currentLength.value = value.length;
+  emit("update:modelValue", value);
+  
+  // Auto-resize functionality
+  if (props.autoResize) {
+    event.target.style.height = 'auto';
+    event.target.style.height = event.target.scrollHeight + 'px';
+  }
+};
+
+watch(() => props.modelValue, (newValue) => {
+  currentLength.value = newValue?.length || 0;
+});
+
+const BASE_CLASSES = "w-full border border-slate-200 px-4 py-3 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300 transition-colors resize-y";
+
+// Адаптивные отступы для иконок
+const getPaddingClasses = (hasIcon, position) => {
+  if (!hasIcon) return '';
+  // Для textarea используем средние отступы, так как размер не передается
+  return position === 'left' ? 'pl-11' : 'pr-11';
+};
+
+// Получаем классы скругления в зависимости от позиции addon
+const getBorderRadiusClasses = () => {
+  if (addonPosition.value.hasLeftAddon && addonPosition.value.hasRightAddon) {
+    return 'rounded-none'; // Оба addon - без скругления
+  } else if (addonPosition.value.hasLeftAddon) {
+    return 'rounded-l-none rounded-r-xl'; // Только слева
+  } else if (addonPosition.value.hasRightAddon) {
+    return 'rounded-l-xl rounded-r-none'; // Только справа
+  } else {
+    return 'rounded-xl'; // Нет addon - полное скругление
+  }
+};
+
+const textareaClasses = computed(() =>
+  useClassComposition(
+    `${BASE_CLASSES} ${getBorderRadiusClasses()}`,
+    {
+      'opacity-60 cursor-not-allowed bg-slate-50': props.disabled,
+      'border-rose-300 focus:ring-rose-500/10': props.error,
+    },
+    getPaddingClasses(props.prefixIcon, 'left'),
+    getPaddingClasses(props.suffixIcon, 'right')
+  )
+);
+</script>
+

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

@@ -0,0 +1,3 @@
+import DXTextarea from './DXTextarea.vue';
+export default DXTextarea;
+