dxd-style-code 0.1.7 → 0.1.8

package/src/components/molecules/DXValidationIcon/DXValidationIcon.vue

@@ -0,0 +1,53 @@
+<template>
+  <DXIcon
+    v-if="icon"
+    :icon="icon"
+    :size="size"
+    animation="scale"
+    :class="colorClass"
+    data-component="DXValidationIcon"
+    :data-state="state"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from "@heroicons/vue/24/solid";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const props = defineProps({
+  /** Состояние: success | error | warning | info */
+  state: { type: String, required: true },
+  /** Размер иконки */
+  size: { type: String, default: "md" },
+});
+
+const stateConfig = {
+  success: {
+    icon: CheckCircleIcon,
+    color: "text-emerald-500",
+  },
+  error: {
+    icon: ExclamationCircleIcon,
+    color: "text-rose-500",
+  },
+  warning: {
+    icon: ExclamationTriangleIcon,
+    color: "text-amber-500",
+  },
+  info: {
+    icon: InformationCircleIcon,
+    color: "text-blue-500",
+  },
+};
+
+const config = computed(() => stateConfig[props.state] || stateConfig.info);
+const icon = computed(() => config.value.icon);
+const colorClass = computed(() => config.value.color);
+</script>
+

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

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

package/src/components/molecules/index.js

@@ -0,0 +1,34 @@
+// Molecule components - composed from atoms
+export { default as DXActionButtons } from './DXActionButtons';
+export { default as DXAlert } from './DXAlert';
+export { default as DXCloseButton } from './DXCloseButton';
+export { default as DXDropdownDivider } from './DXDropdownDivider';
+export { default as DXMenu } from './DXMenu';
+export { default as DXBaseTable } from './DXBaseTable';
+export { default as DXBreadcrumb } from './DXBreadcrumb';
+export { default as DXButtonGroup } from './DXButtonGroup';
+export { default as DXComboBox } from './DXComboBox';
+export { default as DXCopyField } from './DXCopyField';
+export { default as DXDataFilter } from './DXDataFilter';
+export { default as DXDatePicker } from './DXDatePicker';
+export { default as DXFileUpload } from './DXFileUpload';
+export { default as DXFilterGroup } from './DXFilterGroup';
+export { default as DXFormControl } from './DXFormControl';
+export { default as DXInput } from './DXInput';
+export { default as DXInputGroup } from './DXInputGroup';
+export { default as DXInputMask } from './DXInputMask';
+export { default as DXPagination } from './DXPagination';
+export { default as DXPasswordInput } from './DXPasswordInput';
+export { default as DXRadioCard } from './DXRadioCard';
+export { default as DXRadioGroup } from './DXRadioGroup';
+export { default as DXSearchSelect } from './DXSearchSelect';
+export { default as DXSelect } from './DXSelect';
+export { default as DXSegmentedControl } from './DXSegmentedControl';
+export { default as DXTableToolbar } from './DXTableToolbar';
+export { default as DXTablePagination } from './DXTablePagination';
+export { default as DXTextarea } from './DXTextarea';
+export { default as DXTimePicker } from './DXTimePicker';
+export { default as DXRating } from './DXRating';
+export { default as DXSearchBar } from './DXSearchBar';
+export { default as DXStatCard } from './DXStatCard';
+export { default as DXValidationIcon } from './DXValidationIcon';

package/src/components/organisms/DXAccordion/DXAccordion.stories.js

@@ -0,0 +1,33 @@
+import DXAccordion from './DXAccordion.vue';
+
+export default {
+  title: 'Organisms/DXAccordion',
+  component: DXAccordion,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: { type: 'select' }, options: ['default', 'bordered', 'separated'] },
+  },
+};
+
+const items = [
+  { title: 'What is DX Components?', content: 'DX Components is a Vue 3 UI component library built with Tailwind CSS.' },
+  { title: 'How to install?', content: 'Run npm install dxd-style-code to add the library to your project.' },
+  { title: 'Is it customizable?', content: 'Yes, all components are fully customizable using Tailwind CSS classes.' },
+];
+
+export const Default = {
+  args: { items },
+};
+
+export const Bordered = {
+  args: { items, variant: 'bordered' },
+};
+
+export const Multiple = {
+  args: { items, multiple: true, defaultOpen: [0] },
+};
+
+export const WithDefaultOpen = {
+  args: { items, defaultOpen: [0, 1] },
+};
+

package/src/components/organisms/DXAccordion/DXAccordion.vue

@@ -0,0 +1,104 @@
+<template>
+  <div 
+    :class="accordionClasses" 
+    data-component="DXAccordion"
+    :data-variant="variant"
+    :data-multiple="multiple"
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="border-b border-slate-200 last:border-b-0"
+    >
+      <!-- Header -->
+      <button
+        type="button"
+        class="w-full flex items-center justify-between py-4 px-1 text-left transition-colors hover:bg-slate-50"
+        :class="{ 'font-semibold': isOpen(index) }"
+        @click="toggle(index)"
+        :aria-expanded="isOpen(index)"
+      >
+        <span class="flex items-center gap-2">
+          <DXIcon v-if="item.icon" :icon="item.icon" size="md" animation="none" class="text-slate-500" />
+          <span class="text-slate-900">{{ item.title }}</span>
+        </span>
+        <DXIcon
+          :icon="ChevronDownIcon"
+          size="md"
+          animation="none"
+          class="text-slate-400 transition-transform duration-200"
+          :class="{ 'rotate-180': isOpen(index) }"
+        />
+      </button>
+      
+      <!-- Content -->
+      <Transition v-bind="collapseTransition">
+        <div v-show="isOpen(index)" class="overflow-hidden">
+          <div class="pb-4 px-1 text-sm text-slate-600">
+            <slot :name="`item-${index}`">
+              {{ item.content }}
+            </slot>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { ChevronDownIcon } from "@heroicons/vue/24/outline";
+import { useTransition } from "@/composables/useAnimation";
+import { useClassComposition } from "@/composables/useClassComposition";
+import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+
+const collapseTransition = useTransition('collapse');
+
+const props = defineProps({
+  /** Элементы: [{ title, content?, icon? }] */
+  items: { type: Array, required: true },
+  /** Разрешить несколько открытых */
+  multiple: { type: Boolean, default: false },
+  /** Изначально открытые индексы */
+  defaultOpen: { type: Array, default: () => [] },
+  /** Вариант: default | bordered | separated */
+  variant: { type: String, default: "default" },
+});
+
+const openItems = ref(new Set(props.defaultOpen));
+
+const isOpen = (index) => openItems.value.has(index);
+
+const toggle = (index) => {
+  if (props.multiple) {
+    if (openItems.value.has(index)) {
+      openItems.value.delete(index);
+    } else {
+      openItems.value.add(index);
+    }
+    openItems.value = new Set(openItems.value);
+  } else {
+    if (openItems.value.has(index)) {
+      openItems.value = new Set();
+    } else {
+      openItems.value = new Set([index]);
+    }
+  }
+};
+
+const BASE_CLASSES = "";
+
+const VARIANT_CLASSES = {
+  default: "",
+  bordered: "border border-slate-200 rounded-xl overflow-hidden",
+  separated: "space-y-2",
+};
+
+const accordionClasses = computed(() =>
+  useClassComposition(
+    BASE_CLASSES,
+    VARIANT_CLASSES[props.variant] || VARIANT_CLASSES.default
+  )
+);
+</script>
+

package/src/components/organisms/DXAccordion/index.js

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