dxd-style-code 0.1.7 → 0.1.9

package/src/components/molecules/DXTableFiltersPanel/DXTableFiltersPanel.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    v-if="activeFilters.length > 0"
+    class="flex items-center justify-between gap-4 px-4 py-3 bg-slate-50 border-b border-slate-200"
+    data-component="DXTableFiltersPanel"
+  >
+    <div class="flex items-center gap-3 flex-1 flex-wrap">
+      <!-- Filter Icon and Count -->
+      <div class="flex items-center gap-2 text-sm text-slate-600 font-medium">
+        <DXIcon :icon="FunnelIcon" size="sm" class="text-slate-500" />
+        <span>Активные фильтры ({{ activeFilters.length }})</span>
+      </div>
+
+      <!-- Filter Chips -->
+      <DXTags
+        :tags="filterTags"
+        variant="default"
+        color="primary"
+        @remove="handleRemoveFilter"
+      />
+    </div>
+
+    <!-- Clear All Button -->
+    <button
+      type="button"
+      @click="handleClearAll"
+      class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
+    >
+      <DXIcon :icon="XCircleIcon" size="sm" class="text-slate-500" />
+      <span>Очистить все</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { FunnelIcon, XCircleIcon } from '@heroicons/vue/24/outline';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
+import DXTags from '../../atoms/DXTags/DXTags.vue';
+
+const props = defineProps({
+  /** Список активных фильтров: [{ column, columnLabel, value, valueLabel }] */
+  activeFilters: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['remove-filter', 'clear-all']);
+
+// Преобразовать активные фильтры в теги
+const filterTags = computed(() => {
+  return props.activeFilters.map((filter) => ({
+    label: `${filter.columnLabel}: ${filter.valueLabel}`,
+    closable: true,
+    color: 'primary',
+    data: filter, // Сохраняем исходные данные для удаления
+  }));
+});
+
+const handleRemoveFilter = (event) => {
+  const tag = event?.tag || event;
+  if (tag?.data) {
+    emit('remove-filter', tag.data.column);
+  }
+};
+
+const handleClearAll = () => {
+  emit('clear-all');
+};
+</script>
+

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

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

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

@@ -0,0 +1,236 @@
+import { ref } from 'vue';
+import DXTablePagination from './DXTablePagination.vue';
+
+export default {
+  title: 'Molecules/DXTablePagination',
+  component: DXTablePagination,
+  tags: ['autodocs'],
+};
+
+// Default
+export const Default = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(1);
+      const pageSize = ref(10);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :totalPages="10"
+        :from="1"
+        :to="10"
+        :total="100"
+      />
+    `,
+  }),
+};
+
+// Middle Page
+export const MiddlePage = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(5);
+      const pageSize = ref(25);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :totalPages="20"
+        :from="101"
+        :to="125"
+        :total="500"
+      />
+    `,
+  }),
+};
+
+// Last Page
+export const LastPage = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(10);
+      const pageSize = ref(10);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :totalPages="10"
+        :from="91"
+        :to="100"
+        :total="100"
+      />
+    `,
+  }),
+};
+
+// Large Dataset
+export const LargeDataset = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(42);
+      const pageSize = ref(50);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :totalPages="200"
+        :pageSizeOptions="[10, 25, 50, 100, 200]"
+        :from="2051"
+        :to="2100"
+        :total="10000"
+      />
+    `,
+  }),
+};
+
+// Interactive
+export const Interactive = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(1);
+      const pageSize = ref(10);
+      const handlePageChange = (page) => {
+        console.log('Page changed to:', page);
+      };
+      const handlePageSizeChange = (size) => {
+        console.log('Page size changed to:', size);
+        currentPage.value = 1;
+      };
+      return { currentPage, pageSize, handlePageChange, handlePageSizeChange };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :totalPages="50"
+        :from="(currentPage - 1) * pageSize + 1"
+        :to="Math.min(currentPage * pageSize, 500)"
+        :total="500"
+        @update:currentPage="handlePageChange"
+        @update:pageSize="handlePageSizeChange"
+      />
+    `,
+  }),
+};
+
+// Small Size
+export const SmallSize = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(5);
+      const pageSize = ref(10);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        size="sm"
+        :totalPages="20"
+        :from="41"
+        :to="50"
+        :total="200"
+      />
+    `,
+  }),
+};
+
+// Medium Size
+export const MediumSize = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(5);
+      const pageSize = ref(10);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        size="md"
+        :totalPages="20"
+        :from="41"
+        :to="50"
+        :total="200"
+      />
+    `,
+  }),
+};
+
+// Large Size
+export const LargeSize = {
+  render: () => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(5);
+      const pageSize = ref(10);
+      return { currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        size="lg"
+        :totalPages="20"
+        :from="41"
+        :to="50"
+        :total="200"
+      />
+    `,
+  }),
+};
+
+// Playground
+export const Playground = {
+  args: {
+    size: 'md',
+    currentPage: 1,
+    totalPages: 10,
+    pageSize: 10,
+    pageSizeOptions: [10, 25, 50, 100],
+    from: 1,
+    to: 10,
+    total: 100,
+  },
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    currentPage: { control: 'number' },
+    totalPages: { control: 'number' },
+    pageSize: { control: 'select', options: [10, 25, 50, 100] },
+    from: { control: 'number' },
+    to: { control: 'number' },
+    total: { control: 'number' },
+  },
+  render: (args) => ({
+    components: { DXTablePagination },
+    setup() {
+      const currentPage = ref(args.currentPage);
+      const pageSize = ref(args.pageSize);
+      return { args, currentPage, pageSize };
+    },
+    template: `
+      <DXTablePagination
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        v-bind="args"
+      />
+    `,
+  }),
+};
+

package/src/components/molecules/DXTablePagination/DXTablePagination.vue

@@ -0,0 +1,93 @@
+<template>
+  <div 
+    class="flex items-center justify-between py-4 px-0 bg-white" 
+    data-component="DXTablePagination"
+  >
+    <!-- Results Info -->
+    <div :class="textSizeClass">
+      Показано {{ from }}-{{ to }} из {{ total }}
+    </div>
+
+    <!-- Pagination Controls -->
+    <div class="flex items-center gap-4">
+      <DXPagination
+        :modelValue="currentPage"
+        :totalPages="totalPages"
+        :size="size"
+        @update:modelValue="$emit('update:currentPage', $event)"
+      />
+
+      <!-- Page Size Selector -->
+      <DXSelect
+        :modelValue="pageSize"
+        @update:modelValue="$emit('update:pageSize', $event)"
+        :options="pageSizeOptions.map(v => ({ value: v, label: `${v} / стр` }))"
+        :size="size"
+        class="w-32"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import DXPagination from '../DXPagination/DXPagination.vue';
+import DXSelect from '../DXSelect/DXSelect.vue';
+
+const props = defineProps({
+  /** Размер элементов управления */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v),
+  },
+  /** Текущая страница */
+  currentPage: {
+    type: Number,
+    required: true,
+  },
+  /** Всего страниц */
+  totalPages: {
+    type: Number,
+    required: true,
+  },
+  /** Размер страницы */
+  pageSize: {
+    type: Number,
+    required: true,
+  },
+  /** Опции размера страницы */
+  pageSizeOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100],
+  },
+  /** Номер первого элемента на странице */
+  from: {
+    type: Number,
+    required: true,
+  },
+  /** Номер последнего элемента на странице */
+  to: {
+    type: Number,
+    required: true,
+  },
+  /** Общее количество элементов */
+  total: {
+    type: Number,
+    required: true,
+  },
+});
+
+defineEmits(['update:currentPage', 'update:pageSize']);
+
+// Размер текста в зависимости от размера компонента
+const textSizeClass = computed(() => {
+  const sizeMap = {
+    sm: 'text-xs text-slate-600',
+    md: 'text-sm text-slate-600',
+    lg: 'text-base text-slate-600',
+  };
+  return sizeMap[props.size] || sizeMap.md;
+});
+</script>
+

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

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

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

@@ -0,0 +1,271 @@
+import { ref } from 'vue';
+import DXTableToolbar from './DXTableToolbar.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+
+export default {
+  title: 'Molecules/DXTableToolbar',
+  component: DXTableToolbar,
+  tags: ['autodocs'],
+};
+
+const sampleColumns = [
+  { key: 'id', label: 'ID', visible: true },
+  { key: 'name', label: 'Имя', visible: true },
+  { key: 'email', label: 'Email', visible: true },
+  { key: 'role', label: 'Роль', visible: false },
+  { key: 'status', label: 'Статус', visible: true },
+];
+
+// Default - только с поиском
+export const Default = {
+  render: () => ({
+    components: { DXTableToolbar },
+    setup() {
+      const searchQuery = ref('');
+      return { searchQuery, sampleColumns };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        :searchable="true"
+      />
+    `,
+  }),
+};
+
+// With Selection Info
+export const WithSelectionInfo = {
+  render: () => ({
+    components: { DXTableToolbar },
+    setup() {
+      const searchQuery = ref('');
+      const selectedCount = ref(5);
+      return { searchQuery, selectedCount };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        :searchable="true"
+        :selectedCount="selectedCount"
+      />
+    `,
+  }),
+};
+
+// With Column Toggle
+export const WithColumnToggle = {
+  render: () => ({
+    components: { DXTableToolbar },
+    setup() {
+      const searchQuery = ref('');
+      const columns = ref(sampleColumns);
+      const handleToggle = (key) => {
+        const col = columns.value.find(c => c.key === key);
+        if (col) col.visible = !col.visible;
+      };
+      return { searchQuery, columns, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        :searchable="true"
+        :columnToggle="true"
+        :columns="columns"
+        @toggle-column="handleToggle"
+      />
+    `,
+  }),
+};
+
+// With Custom Actions
+export const WithCustomActions = {
+  render: () => ({
+    components: { DXTableToolbar, DXButton },
+    setup() {
+      const searchQuery = ref('');
+      const size = ref('md');
+      return { searchQuery, size };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        :size="size"
+        :searchable="true"
+      >
+        <template #right>
+          <DXButton :size="size" variant="primary">Добавить</DXButton>
+          <DXButton :size="size" variant="ghost">Экспорт</DXButton>
+        </template>
+      </DXTableToolbar>
+    `,
+  }),
+};
+
+// Full Features
+export const FullFeatures = {
+  render: () => ({
+    components: { DXTableToolbar, DXButton },
+    setup() {
+      const searchQuery = ref('');
+      const selectedCount = ref(3);
+      const columns = ref(sampleColumns);
+      const size = ref('md');
+      const handleToggle = (key) => {
+        const col = columns.value.find(c => c.key === key);
+        if (col) col.visible = !col.visible;
+      };
+      return { searchQuery, selectedCount, columns, size, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        :size="size"
+        :searchable="true"
+        :selectedCount="selectedCount"
+        :columnToggle="true"
+        :columns="columns"
+        @toggle-column="handleToggle"
+      >
+        <template #right>
+          <DXButton :size="size" variant="primary">Добавить</DXButton>
+          <DXButton :size="size" variant="ghost">Экспорт</DXButton>
+        </template>
+      </DXTableToolbar>
+    `,
+  }),
+};
+
+// Small Size
+export const SmallSize = {
+  render: () => ({
+    components: { DXTableToolbar, DXButton },
+    setup() {
+      const searchQuery = ref('');
+      const selectedCount = ref(3);
+      const columns = ref(sampleColumns);
+      const handleToggle = (key) => {
+        const col = columns.value.find(c => c.key === key);
+        if (col) col.visible = !col.visible;
+      };
+      return { searchQuery, selectedCount, columns, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        size="sm"
+        :searchable="true"
+        :selectedCount="selectedCount"
+        :columnToggle="true"
+        :columns="columns"
+        @toggle-column="handleToggle"
+      >
+        <template #right>
+          <DXButton size="sm" variant="primary">Добавить</DXButton>
+          <DXButton size="sm" variant="ghost">Экспорт</DXButton>
+        </template>
+      </DXTableToolbar>
+    `,
+  }),
+};
+
+// Medium Size
+export const MediumSize = {
+  render: () => ({
+    components: { DXTableToolbar, DXButton },
+    setup() {
+      const searchQuery = ref('');
+      const selectedCount = ref(3);
+      const columns = ref(sampleColumns);
+      const handleToggle = (key) => {
+        const col = columns.value.find(c => c.key === key);
+        if (col) col.visible = !col.visible;
+      };
+      return { searchQuery, selectedCount, columns, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        size="md"
+        :searchable="true"
+        :selectedCount="selectedCount"
+        :columnToggle="true"
+        :columns="columns"
+        @toggle-column="handleToggle"
+      >
+        <template #right>
+          <DXButton size="md" variant="primary">Добавить</DXButton>
+          <DXButton size="md" variant="ghost">Экспорт</DXButton>
+        </template>
+      </DXTableToolbar>
+    `,
+  }),
+};
+
+// Large Size
+export const LargeSize = {
+  render: () => ({
+    components: { DXTableToolbar, DXButton },
+    setup() {
+      const searchQuery = ref('');
+      const selectedCount = ref(3);
+      const columns = ref(sampleColumns);
+      const handleToggle = (key) => {
+        const col = columns.value.find(c => c.key === key);
+        if (col) col.visible = !col.visible;
+      };
+      return { searchQuery, selectedCount, columns, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        size="lg"
+        :searchable="true"
+        :selectedCount="selectedCount"
+        :columnToggle="true"
+        :columns="columns"
+        @toggle-column="handleToggle"
+      >
+        <template #right>
+          <DXButton size="lg" variant="primary">Добавить</DXButton>
+          <DXButton size="lg" variant="ghost">Экспорт</DXButton>
+        </template>
+      </DXTableToolbar>
+    `,
+  }),
+};
+
+// Playground
+export const Playground = {
+  args: {
+    size: 'md',
+    searchQuery: '',
+    searchable: true,
+    selectedCount: 0,
+    columnToggle: false,
+    columns: sampleColumns,
+  },
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    searchable: { control: 'boolean' },
+    selectedCount: { control: 'number' },
+    columnToggle: { control: 'boolean' },
+  },
+  render: (args) => ({
+    components: { DXTableToolbar },
+    setup() {
+      const searchQuery = ref(args.searchQuery);
+      const handleToggle = (key) => {
+        console.log('Toggle column:', key);
+      };
+      return { args, searchQuery, handleToggle };
+    },
+    template: `
+      <DXTableToolbar
+        v-model:searchQuery="searchQuery"
+        v-bind="args"
+        @toggle-column="handleToggle"
+      />
+    `,
+  }),
+};
+