dxd-style-code 0.1.7 → 0.1.8

package/src/composables/useAnimation.js

@@ -0,0 +1,264 @@
+/**
+ * Vue transition конфигурации
+ */
+export const COLLAPSE_TRANSITION = {
+  enterActiveClass: 'transition-all duration-200 ease-out',
+  enterFromClass: 'opacity-0 max-h-0',
+  enterToClass: 'opacity-100 max-h-96',
+  leaveActiveClass: 'transition-all duration-200 ease-in',
+  leaveFromClass: 'opacity-100 max-h-96',
+  leaveToClass: 'opacity-0 max-h-0',
+};
+
+export const FADE_TRANSITION = {
+  enterActiveClass: 'transition-opacity duration-200 ease-out',
+  enterFromClass: 'opacity-0',
+  enterToClass: 'opacity-100',
+  leaveActiveClass: 'transition-opacity duration-200 ease-in',
+  leaveFromClass: 'opacity-100',
+  leaveToClass: 'opacity-0',
+};
+
+export const FADE_SCALE_TRANSITION = {
+  enterActiveClass: 'transition-all duration-200 ease-out',
+  enterFromClass: 'opacity-0 scale-95',
+  enterToClass: 'opacity-100 scale-100',
+  leaveActiveClass: 'transition-all duration-200 ease-in',
+  leaveFromClass: 'opacity-100 scale-100',
+  leaveToClass: 'opacity-0 scale-95',
+};
+
+export const SLIDE_RIGHT_TRANSITION = {
+  enterActiveClass: 'transition-all duration-300 ease-out',
+  enterFromClass: 'opacity-0 translate-x-full',
+  enterToClass: 'opacity-100 translate-x-0',
+  leaveActiveClass: 'transition-all duration-300 ease-in',
+  leaveFromClass: 'opacity-100 translate-x-0',
+  leaveToClass: 'opacity-0 translate-x-full',
+};
+
+export const SLIDE_LEFT_TRANSITION = {
+  enterActiveClass: 'transition-all duration-300 ease-out',
+  enterFromClass: 'opacity-0 -translate-x-full',
+  enterToClass: 'opacity-100 translate-x-0',
+  leaveActiveClass: 'transition-all duration-300 ease-in',
+  leaveFromClass: 'opacity-100 translate-x-0',
+  leaveToClass: 'opacity-0 -translate-x-full',
+};
+
+export const SLIDE_UP_TRANSITION = {
+  enterActiveClass: 'transition-all duration-300 ease-out',
+  enterFromClass: 'opacity-0 translate-y-full',
+  enterToClass: 'opacity-100 translate-y-0',
+  leaveActiveClass: 'transition-all duration-300 ease-in',
+  leaveFromClass: 'opacity-100 translate-y-0',
+  leaveToClass: 'opacity-0 translate-y-full',
+};
+
+export const SLIDE_DOWN_TRANSITION = {
+  enterActiveClass: 'transition-all duration-300 ease-out',
+  enterFromClass: 'opacity-0 -translate-y-full',
+  enterToClass: 'opacity-100 translate-y-0',
+  leaveActiveClass: 'transition-all duration-300 ease-in',
+  leaveFromClass: 'opacity-100 translate-y-0',
+  leaveToClass: 'opacity-0 -translate-y-full',
+};
+
+/**
+ * Кастомная анимация для tooltip (fade + translate)
+ * Оптимизирована для GPU-ускорения и плавности
+ * Использует transition-all для плавной анимации без скачков
+ * 
+ * @param {string} position - Позиция tooltip: top | bottom | left | right
+ * @returns {Object} Transition конфигурация
+ */
+export function useTooltipCustomTransition(position = 'top') {
+  // Определяем направление анимации в зависимости от позиции
+  const directionClasses = {
+    top: {
+      enterFrom: 'opacity-0 translate-y-1',
+      enterTo: 'opacity-100 translate-y-0',
+      leaveFrom: 'opacity-100 translate-y-0',
+      leaveTo: 'opacity-0 translate-y-1',
+    },
+    bottom: {
+      enterFrom: 'opacity-0 -translate-y-1',
+      enterTo: 'opacity-100 translate-y-0',
+      leaveFrom: 'opacity-100 translate-y-0',
+      leaveTo: 'opacity-0 -translate-y-1',
+    },
+    left: {
+      enterFrom: 'opacity-0 translate-x-1',
+      enterTo: 'opacity-100 translate-x-0',
+      leaveFrom: 'opacity-100 translate-x-0',
+      leaveTo: 'opacity-0 translate-x-1',
+    },
+    right: {
+      enterFrom: 'opacity-0 -translate-x-1',
+      enterTo: 'opacity-100 translate-x-0',
+      leaveFrom: 'opacity-100 translate-x-0',
+      leaveTo: 'opacity-0 -translate-x-1',
+    },
+  };
+
+  const classes = directionClasses[position] || directionClasses.top;
+
+  return {
+    enterActiveClass: 'transition-all duration-150 ease-out',
+    enterFromClass: classes.enterFrom,
+    enterToClass: classes.enterTo,
+    leaveActiveClass: 'transition-all duration-150 ease-in',
+    leaveFromClass: classes.leaveFrom,
+    leaveToClass: classes.leaveTo,
+  };
+}
+
+/**
+ * @deprecated Используйте useTooltipCustomTransition(position) для адаптивной анимации
+ * Кастомная анимация для tooltip (fade + translateY) - только для top позиции
+ */
+export const TOOLTIP_CUSTOM_TRANSITION = {
+  enterActiveClass: 'transition-all duration-150 ease-out',
+  enterFromClass: 'opacity-0 translate-y-1',
+  enterToClass: 'opacity-100 translate-y-0',
+  leaveActiveClass: 'transition-all duration-150 ease-in',
+  leaveFromClass: 'opacity-100 translate-y-0',
+  leaveToClass: 'opacity-0 translate-y-1',
+};
+
+/**
+ * Get transition configuration by name
+ * 
+ * @param {string} name - Transition name: collapse | fade | fade-scale | slide-right | slide-left | slide-up | slide-down | tooltip-custom
+ * @returns {Object} Transition configuration object
+ * 
+ * @example
+ * import { useAnimationTransition } from '@/composables/useAnimation';
+ * 
+ * const transitionProps = useAnimationTransition('collapse');
+ * 
+ * <Transition v-bind="transitionProps">
+ *   <div v-show="isOpen">Content</div>
+ * </Transition>
+ */
+export function useAnimationTransition(name = 'fade') {
+  const transitions = {
+    collapse: COLLAPSE_TRANSITION,
+    fade: FADE_TRANSITION,
+    'fade-scale': FADE_SCALE_TRANSITION,
+    'slide-right': SLIDE_RIGHT_TRANSITION,
+    'slide-left': SLIDE_LEFT_TRANSITION,
+    'slide-up': SLIDE_UP_TRANSITION,
+    'slide-down': SLIDE_DOWN_TRANSITION,
+    'tooltip-custom': TOOLTIP_CUSTOM_TRANSITION,
+  };
+  
+  return transitions[name] || transitions.fade;
+}
+
+/**
+ * @deprecated Use useAnimationTransition instead. This alias is kept for backward compatibility.
+ * Get transition configuration by name
+ * 
+ * @param {string} name - Transition name: collapse | fade | fade-scale | slide-right | slide-left | slide-up | slide-down | tooltip-custom
+ * @returns {Object} Transition configuration object
+ */
+export const useTransition = useAnimationTransition;
+
+/**
+ * Универсальный composable для управления классами анимаций
+ * @param {string} animation - тип анимации (none | wiggle | scale | rotate | fade | slide | bounce | pulse | spin | shake | stripes | custom | smooth)
+ * @param {string} type - тип компонента (icon | button | general | progress | tooltip | toggle) - определяет префикс классов
+ * @param {boolean} groupHover - использовать group-hover вместо обычного hover (только для hover-анимаций)
+ * @returns {string} CSS класс для анимации
+ */
+export function useAnimation(animation = 'none', type = 'icon', groupHover = false) {
+  // Анимации для иконок (hover-based)
+  const iconAnimations = {
+    none: "",
+    wiggle: "dx-icon-wiggle",
+    scale: "dx-icon-scale",
+    rotate: "dx-icon-rotate",
+  };
+
+  const iconGroupAnimations = {
+    none: "",
+    wiggle: "dx-icon-wiggle-group",
+    scale: "dx-icon-scale-group",
+    rotate: "dx-icon-rotate-group",
+  };
+
+  // Анимации для кнопок (hover-based)
+  const buttonAnimations = {
+    none: "",
+    wiggle: "dx-btn-wiggle",
+    scale: "dx-btn-scale",
+    rotate: "dx-btn-rotate",
+  };
+
+  const buttonGroupAnimations = {
+    none: "",
+    wiggle: "dx-btn-wiggle-group",
+    scale: "dx-btn-scale-group",
+    rotate: "dx-btn-rotate-group",
+  };
+
+  // Общие анимации (не hover-based)
+  const generalAnimations = {
+    none: "",
+    fade: "dx-animate-fade-in",
+    'fade-out': "dx-animate-fade-out",
+    slide: "dx-animate-slide-in",
+    bounce: "dx-animate-bounce-slow",
+    pulse: "dx-animate-pulse",
+    spin: "dx-animate-spin",
+    shake: "dx-animate-shake",
+  };
+
+  // Анимации для progress bar
+  const progressAnimations = {
+    none: "",
+    stripes: "dx-animate-stripes",
+  };
+
+  // Анимации для tooltip (кастомные CSS классы, если нужны)
+  const tooltipAnimations = {
+    none: "",
+    custom: "dx-tooltip-custom", // Можно использовать для кастомных анимаций через CSS
+  };
+
+  // Анимации для toggle
+  const toggleAnimations = {
+    none: "",
+    smooth: "transition-transform duration-200 ease-in-out", // Плавная анимация движения индикатора
+  };
+
+  // Выбор правильного набора анимаций
+  if (type === 'icon') {
+    return groupHover 
+      ? (iconGroupAnimations[animation] || "")
+      : (iconAnimations[animation] || "");
+  }
+
+  if (type === 'button') {
+    return groupHover
+      ? (buttonGroupAnimations[animation] || "")
+      : (buttonAnimations[animation] || "");
+  }
+
+  if (type === 'progress') {
+    return progressAnimations[animation] || "";
+  }
+
+  if (type === 'tooltip') {
+    return tooltipAnimations[animation] || "";
+  }
+
+  if (type === 'toggle') {
+    return toggleAnimations[animation] || toggleAnimations.smooth;
+  }
+
+  // Для general типа не используется groupHover
+  return generalAnimations[animation] || "";
+}
+

package/src/composables/useClassComposition.js

@@ -0,0 +1,35 @@
+/**
+ * Composable for merging BASE_CLASSES and additional classes
+ * Accepts base classes and any number of additional class sources
+ * 
+ * @param {string} baseClasses - Base classes that are always applied
+ * @param {...(string|Array|Object)} additionalClasses - Any number of additional class sources
+ * @returns {Array} Array of class strings/objects suitable for Vue :class binding
+ * 
+ * @example
+ * // Single additional class source
+ * useClassComposition(BASE_CLASSES, VARIANT_CLASSES[props.variant])
+ * 
+ * @example
+ * // Multiple class sources
+ * useClassComposition(
+ *   BASE_CLASSES,
+ *   SIZE_CLASSES[props.size],
+ *   VARIANT_CLASSES[props.variant],
+ *   props.class
+ * )
+ */
+export function useClassComposition(baseClasses, ...additionalClasses) {
+  const classes = [baseClasses];
+  
+  // Add all additional classes, filtering out empty values
+  additionalClasses.forEach(classSource => {
+    if (classSource) {
+      classes.push(classSource);
+  }
+  });
+  
+  return classes;
+}
+
+

package/src/composables/useDataAttributes.js

@@ -0,0 +1,83 @@
+/**
+ * Composable for generating data-attributes from component props
+ * Creates consistent data-* attributes for debugging and testing
+ * 
+ * @param {Object} props - Component props object
+ * @param {Array<string>} attributeNames - Array of prop names to convert to data-attributes
+ * @returns {Object} Object with data-* attributes
+ * 
+ * @example
+ * const dataAttrs = useDataAttributes(props, ['variant', 'size', 'disabled']);
+ * // Returns: { 'data-variant': 'primary', 'data-size': 'md', 'data-disabled': true }
+ * 
+ * <div v-bind="dataAttrs">...</div>
+ */
+export function useDataAttributes(props, attributeNames = []) {
+  const attributes = {};
+  
+  attributeNames.forEach(name => {
+    const value = props[name];
+    
+    // Only add if value exists and is not null/undefined
+    if (value !== undefined && value !== null) {
+      // Convert camelCase to kebab-case for data attributes
+      const attrName = `data-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      attributes[attrName] = value;
+    }
+  });
+  
+  return attributes;
+}
+
+/**
+ * Generate data-attributes with custom logic
+ * 
+ * @param {Object} attributesMap - Object mapping data-attribute names to their values
+ * @returns {Object} Object with data-* attributes
+ * 
+ * @example
+ * const dataAttrs = useCustomDataAttributes({
+ *   variant: props.variant,
+ *   size: props.size,
+ *   active: isActive.value,
+ *   disabled: props.disabled || props.loading
+ * });
+ */
+export function useCustomDataAttributes(attributesMap = {}) {
+  const attributes = {};
+  
+  Object.entries(attributesMap).forEach(([name, value]) => {
+    if (value !== undefined && value !== null && value !== false) {
+      const attrName = name.startsWith('data-') ? name : `data-${name}`;
+      attributes[attrName] = value;
+    }
+  });
+  
+  return attributes;
+}
+
+/**
+ * Convert boolean props to data-attributes (omits false values)
+ * 
+ * @param {Object} props - Component props
+ * @param {Array<string>} booleanPropNames - Array of boolean prop names
+ * @returns {Object} Object with data-* attributes for truthy values only
+ * 
+ * @example
+ * const dataAttrs = useBooleanDataAttributes(props, ['disabled', 'loading', 'active']);
+ * // If props.disabled = true, props.loading = false
+ * // Returns: { 'data-disabled': true }
+ */
+export function useBooleanDataAttributes(props, booleanPropNames = []) {
+  const attributes = {};
+  
+  booleanPropNames.forEach(name => {
+    if (props[name] === true) {
+      const attrName = `data-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      attributes[attrName] = true;
+    }
+  });
+  
+  return attributes;
+}
+

package/src/composables/useMenu.js

@@ -0,0 +1,88 @@
+/**
+ * Composable для управления меню (sidebar и embedded)
+ * Предоставляет переиспользуемую логику для DXSidebarMenu и DXMenu
+ */
+
+import { ref, computed, onMounted, provide } from 'vue';
+
+export function useMenu(props, emit) {
+  // Reactive state
+  const searchQuery = ref('');
+  const internalCompact = ref(props.compact);
+  
+  // Computed для compact mode
+  const compact = computed(() => internalCompact.value);
+  
+  // Check if vue-router is available
+  let hasRouter = false;
+  onMounted(() => {
+    try {
+      hasRouter = !!window?.$router || false;
+    } catch (e) {
+      hasRouter = false;
+    }
+  });
+  
+  provide('hasRouter', hasRouter);
+  
+  // Filtered sections based on search query
+  const filteredSections = computed(() => {
+    if (!searchQuery.value.trim()) return props.sections;
+
+    const query = searchQuery.value.toLowerCase();
+    return props.sections
+      .map(section => ({
+        ...section,
+        items: section.items.filter(item => {
+          const labelMatch = item.label?.toLowerCase().includes(query);
+          const childrenMatch = item.children?.some(child => 
+            child.label?.toLowerCase().includes(query)
+          );
+          return labelMatch || childrenMatch;
+        })
+      }))
+      .filter(section => section.items.length > 0);
+  });
+  
+  // Check if item is active
+  const isItemActive = (item) => {
+    if (!props.activeItem) return false;
+    
+    // Проверка основного элемента
+    if (item.to === props.activeItem || item.id === props.activeItem) {
+      return true;
+    }
+    
+    // Проверка дочерних элементов
+    if (item.children) {
+      return item.children.some(child => 
+        child.to === props.activeItem || child.id === props.activeItem
+      );
+    }
+    
+    return false;
+  };
+  
+  // Toggle compact mode
+  const toggleCompact = () => {
+    internalCompact.value = !internalCompact.value;
+    emit('update:compact', internalCompact.value);
+  };
+  
+  // Handle item click
+  const handleItemClick = (item, event) => {
+    emit('item-click', item, event);
+  };
+  
+  return {
+    searchQuery,
+    internalCompact,
+    compact,
+    filteredSections,
+    isItemActive,
+    toggleCompact,
+    handleItemClick,
+    hasRouter
+  };
+}
+

package/src/composables/useSize.js

@@ -0,0 +1,135 @@
+/**
+ * Композабл для унификации размеров компонентов
+ * @param {string} size - xs | sm | md | lg | xl (для spacing также доступен none)
+ * @param {string} type - button | buttonIcon | input | icon | text | checkbox | radio | avatar | spacing | loader | progress | inputAddon | sliderTrack | sliderThumb | tooltip | toggle | badge
+ * @returns {string|Object} Tailwind CSS классы или объект с классами для track и thumb (для toggle)
+ */
+export function useSize(size, type = 'input') {
+  const sizes = {
+    button: {
+      xs: 'h-7 px-2.5 py-1 text-xs',
+      sm: 'h-8 px-3 py-1.5 text-xs',
+      md: 'h-10 px-4 py-2.5 text-sm',
+      lg: 'h-12 px-5 py-3 text-base',
+      xl: 'h-14 px-6 py-3.5 text-lg',
+    },
+    buttonIcon: {
+      xs: 'h-7 w-7 text-xs',
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-sm',
+      xl: 'h-14 w-14 text-base',
+    },
+    input: {
+      xs: 'h-7 px-2.5 py-1 text-xs',
+      sm: 'h-8 px-3 py-1.5 text-xs',
+      md: 'h-10 px-4 py-2.5 text-sm',
+      lg: 'h-12 px-5 py-3 text-base',
+      xl: 'h-14 px-6 py-3.5 text-lg',
+    },
+    icon: {
+      xs: 'w-3 h-3',
+      sm: 'w-4 h-4',
+      md: 'w-5 h-5',
+      lg: 'w-6 h-6',
+      xl: 'w-8 h-8',
+    },
+    text: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    checkbox: {
+      xs: 'h-3 w-3',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-6 w-6',
+    },
+    radio: {
+      xs: 'h-3 w-3',
+      sm: 'h-3.5 w-3.5',
+      md: 'h-4 w-4',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6',
+    },
+    avatar: {
+      xs: 'h-6 w-6',
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+    loader: {
+      xs: 'w-2 h-2',
+      sm: 'w-3 h-3',
+      md: 'w-4 h-4',
+      lg: 'w-5 h-5',
+      xl: 'w-6 h-6',
+    },
+    progress: {
+      xs: 'h-1',
+      sm: 'h-2',
+      md: 'h-3',
+      lg: 'h-4',
+    },
+    inputAddon: {
+      xs: 'h-7',
+      sm: 'h-8',
+      md: 'h-10',
+      lg: 'h-12',
+      xl: 'h-14',
+    },
+    sliderTrack: {
+      xs: 'h-1',    // 4px
+      sm: 'h-1.5',  // 6px
+      md: 'h-2',    // 8px
+      lg: 'h-2.5',  // 10px
+      xl: 'h-3',    // 12px
+    },
+    sliderThumb: {
+      xs: 'w-3 h-3',    // 12px
+      sm: 'w-4 h-4',    // 16px
+      md: 'w-5 h-5',    // 20px
+      lg: 'w-6 h-6',    // 24px
+      xl: 'w-7 h-7',    // 28px
+    },
+    spacing: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    tooltip: {
+      xs: 'px-2 py-1 text-xs',
+      sm: 'px-2.5 py-1.5 text-xs',
+      md: 'px-3 py-2 text-sm',
+      lg: 'px-4 py-3 text-base',
+      xl: 'px-5 py-4 text-lg',
+    },
+    toggle: {
+      xs: { track: 'h-4 w-7', thumb: 'h-3 w-3' },
+      sm: { track: 'h-5 w-9', thumb: 'h-3.5 w-3.5' },
+      md: { track: 'h-6 w-11', thumb: 'h-4 w-4' },
+      lg: { track: 'h-7 w-14', thumb: 'h-5 w-5' },
+      xl: { track: 'h-8 w-16', thumb: 'h-6 w-6' },
+    },
+    badge: {
+      sm: 'px-2 py-1 text-[11px]',
+      md: 'px-2.5 py-1.5 text-xs',
+    },
+  };
+  
+  // Для toggle возвращаем объект, для остальных - строку
+  if (type === 'toggle') {
+    return sizes[type]?.[size] || sizes[type]?.md || { track: '', thumb: '' };
+  }
+  
+  return sizes[type]?.[size] || sizes[type]?.md || '';
+}
+
+

package/src/composables/useSpacing.js

@@ -0,0 +1,37 @@
+/**
+ * Композабл для унификации padding и margin классов
+ * @param {string} size - none | xs | sm | md | lg | xl
+ * @param {string} type - padding | paddingX | paddingY | margin | marginX | marginY
+ * @returns {string} Tailwind CSS классы
+ */
+export function useSpacing(size, type = 'padding') {
+  const spacingMap = {
+    none: '0',
+    xs: '1',   // 4px
+    sm: '2',   // 8px
+    md: '4',   // 16px
+    lg: '6',   // 24px
+    xl: '8',   // 32px
+  };
+
+  const prefix = {
+    padding: 'p',
+    paddingX: 'px',
+    paddingY: 'py',
+    margin: 'm',
+    marginX: 'mx',
+    marginY: 'my',
+  };
+
+  if (size === 'none') {
+    return `${prefix[type]}-0`;
+  }
+
+  const spacingValue = spacingMap[size];
+  if (!spacingValue) {
+    return '';
+  }
+
+  return `${prefix[type]}-${spacingValue}`;
+}
+