@katlux/toolkit 0.1.0-beta.0 → 0.1.0-beta.11

package/src/runtime/composables/useFilterLogic.ts

@@ -1,245 +0,0 @@
-import type { TDataRow, IDataFilter } from '@katlux/providers'
-import { EDataFilterOperator } from '@katlux/providers'
-
-export const useFilterLogic = () => {
-
-	const evaluateFilter = (filter: IDataFilter, row: TDataRow): boolean => {
-		// If this is a logical operator, delegate to applyOperator with the whole row and nested filters
-		if (
-			filter.operator === EDataFilterOperator.And ||
-			filter.operator === EDataFilterOperator.Or ||
-			filter.operator === EDataFilterOperator.Nand ||
-			filter.operator === EDataFilterOperator.Nor
-		) {
-			return !filter.active || applyOperator(filter.operator, row, filter.field)
-		}
-
-		// Handle nested single filter (unary nesting)
-		if ('operator' in filter.field && 'field' in filter.field) {
-			return !filter.active || evaluateFilter(filter.field as IDataFilter, row)
-		}
-
-		// Handle field filters
-		const field = filter.field as TDataRow
-		const fieldKeys = Object.keys(field)
-
-		/*Later on we will implement searching algoritms. Selective or check sort and then apply */
-		return !filter.active || fieldKeys.every((key) => {
-			const filterValue = field[key]
-			const rowValue = row[key]
-			return applyOperator(filter.operator, rowValue, filterValue)
-		})
-	}
-
-	const applyOperator = (operator: string, rowValue: any, filterValue: any): boolean => {
-		switch (operator) {
-			case EDataFilterOperator.And:
-				return compareAnd(rowValue as TDataRow, filterValue)
-			case EDataFilterOperator.Or:
-				return compareOr(rowValue as TDataRow, filterValue)
-			case EDataFilterOperator.Nand:
-				return !compareAnd(rowValue as TDataRow, filterValue)
-			case EDataFilterOperator.Nor:
-				return !compareOr(rowValue as TDataRow, filterValue)
-			case EDataFilterOperator.Equal:
-				return compareEqual(rowValue, filterValue)
-			case EDataFilterOperator.NotEqual:
-				return !compareEqual(rowValue, filterValue)
-			case EDataFilterOperator.GreaterThan:
-				return compareValues(rowValue, filterValue) > 0
-			case EDataFilterOperator.LessThan:
-				return compareValues(rowValue, filterValue) < 0
-			case EDataFilterOperator.GreaterThanOrEqual:
-				return compareValues(rowValue, filterValue) >= 0
-			case EDataFilterOperator.LessThanOrEqual:
-				return compareValues(rowValue, filterValue) <= 0
-			case EDataFilterOperator.In:
-				return compareIn(rowValue, filterValue)
-			case EDataFilterOperator.NotIn:
-				return !compareIn(rowValue, filterValue)
-			default:
-				return compareEqual(rowValue, filterValue)
-		}
-	}
-
-	const compareAnd = (row: TDataRow, nested: any): boolean => {
-		const subFilters: any[] = Array.isArray(nested)
-			? nested
-			: (nested && typeof nested === 'object' ? Object.values(nested) : [])
-		const validFilters: IDataFilter[] = subFilters
-			.filter((f: any) => f && typeof f === 'object' && 'operator' in f && 'field' in f) as IDataFilter[]
-		if (validFilters.length === 0) return true
-		return validFilters.every((f) => {
-			const active = (f as any).active !== false
-			return active ? evaluateFilter(f, row) : true
-		})
-	}
-
-	const compareOr = (row: TDataRow, nested: any): boolean => {
-		const subFilters: any[] = Array.isArray(nested)
-			? nested
-			: (nested && typeof nested === 'object' ? Object.values(nested) : [])
-		const validFilters: IDataFilter[] = subFilters
-			.filter((f: any) => f && typeof f === 'object' && 'operator' in f && 'field' in f) as IDataFilter[]
-
-		const activeFilters = validFilters.filter(f => f.active !== false)
-
-		if (activeFilters.length === 0) return true
-
-		return activeFilters.some((f) => {
-			return evaluateFilter(f, row)
-		})
-	}
-	const compareIn = (rowValue: any, filterValue: any): boolean => {
-		if (typeof rowValue === 'string' && typeof filterValue === 'string') {
-			return rowValue.toLowerCase().includes(filterValue.toLowerCase())
-		}
-		return false
-	}
-	const compareEqual = (rowValue: any, filterValue: any): boolean => {
-		// Handle string comparison (case-insensitive, contains)
-		if (typeof rowValue === 'string' && typeof filterValue === 'string') {
-			return rowValue.toLowerCase() == filterValue.toLowerCase()
-		}
-		// Handle numeric comparison
-		if (typeof rowValue === 'number' && typeof filterValue === 'number') {
-			return rowValue === filterValue
-		}
-		// Handle boolean comparison
-		if (typeof rowValue === 'boolean' && typeof filterValue === 'boolean') {
-			return rowValue === filterValue
-		}
-		// Fallback to strict equality
-		return rowValue === filterValue
-	}
-
-	const compareValues = (rowValue: any, filterValue: any): number => {
-		// Handle null/undefined
-		if (rowValue == null || filterValue == null) {
-			return rowValue == null ? -1 : 1
-		}
-
-		// Handle strings
-		if (typeof rowValue === 'string' && typeof filterValue === 'string') {
-			return rowValue.localeCompare(filterValue)
-		}
-
-		// Handle numbers
-		if (typeof rowValue === 'number' && typeof filterValue === 'number') {
-			return rowValue - filterValue
-		}
-
-		// Fallback: convert to string and compare
-		return String(rowValue).localeCompare(String(filterValue))
-	}
-
-	const filterTreeData = (
-		nodes: any[],
-		filter: IDataFilter,
-		options: { idKey: string; parentKey: string }
-	): { visibleNodes: any[]; expandedNodes: Set<string | number> } => {
-		const { idKey, parentKey } = options
-		const nodeMap = new Map(nodes.map(node => [node[idKey], node]))
-
-		// Build children map for descendant traversal
-		const childrenMap = new Map<string | number, any[]>()
-		nodes.forEach(node => {
-			const pId = node[parentKey]
-			if (pId != null) {
-				if (!childrenMap.has(pId)) {
-					childrenMap.set(pId, [])
-				}
-				childrenMap.get(pId)!.push(node)
-			}
-		})
-
-		const matchingNodeIds = new Set<string | number>()
-		const expandedNodes = new Set<string | number>()
-		const visibleNodeIds = new Set<string | number>()
-
-		// First pass: Find directly matching nodes
-		nodes.forEach(node => {
-			// Strategy: Flatten for evaluation
-			const evalRow = node.data ? { ...node.data, ...node } : node
-
-			if (evaluateFilter(filter, evalRow)) {
-				matchingNodeIds.add(node[idKey])
-			}
-		})
-
-		// Helper to add descendants recursively
-		const addDescendants = (nodeId: string | number) => {
-			const children = childrenMap.get(nodeId)
-			if (children && children.length > 0) {
-				expandedNodes.add(nodeId) // Expand parent to show children
-				children.forEach(child => {
-					visibleNodeIds.add(child[idKey])
-					addDescendants(child[idKey])
-				})
-			}
-		}
-
-		// Second pass: Include ancestors and descendants of matching nodes
-		matchingNodeIds.forEach(id => {
-
-			// 1. All descendants
-			visibleNodeIds.add(id)
-			addDescendants(id)
-
-			// 2. All ancestors
-			let currentId: string | number | null = id
-			while (currentId != null) {
-				visibleNodeIds.add(currentId)
-				const node = nodeMap.get(currentId)
-				if (node) {
-					// Expand parent if it exists
-					if (node[parentKey] != null) {
-						expandedNodes.add(node[parentKey])
-						currentId = node[parentKey]
-					} else {
-						currentId = null
-					}
-				} else {
-					break
-				}
-			}
-		})
-
-		// Return filtered nodes in original order
-		const visibleNodes = nodes.filter(node => visibleNodeIds.has(node[idKey]))
-
-		return {
-			visibleNodes,
-			expandedNodes
-		}
-	}
-
-	const filterData = (
-		data: any[],
-		filter: IDataFilter,
-		options?: {
-			treeOptions?: {
-				idKey: string
-				parentKey: string
-			}
-		}
-	): { results: any[]; expandedNodes?: Set<string | number> } => {
-		if (options?.treeOptions) {
-			const { visibleNodes, expandedNodes } = filterTreeData(
-				data,
-				filter,
-				options.treeOptions
-			)
-			return { results: visibleNodes, expandedNodes }
-		}
-
-		const results = data.filter((row) => evaluateFilter(filter, row))
-		return { results }
-	}
-
-	return {
-		evaluateFilter,
-		filterTreeData,
-		filterData,
-	}
-}

package/src/runtime/composables/usePresetComponent.ts

@@ -1,69 +0,0 @@
-import { computed, defineAsyncComponent, type Component } from 'vue'
-import { useAppConfig } from '#app'
-
-/**
- * Composable for dynamically loading preset components
- * 
- * This enables the preset system to work with any custom preset name
- * without hardcoding preset names in components.
- * 
- * @param componentBaseName - Base name of the component (e.g., 'KButton')
- * @param defaultComponent - The default preset component to fall back to
- * @returns The resolved preset component
- * 
- * @example
- * ```typescript
- * const presetComponent = usePresetComponent('KButton', KButtonDefault)
- * // With activePreset: 'modern' → resolves to KButtonModern
- * // With activePreset: 'dark' → resolves to KButtonDark
- * // With activePreset: 'my-theme' → resolves to KButtonMyTheme
- * ```
- */
-const componentCache = new Map<string, Component>()
-
-// Pre-define globs for all possible preset components
-const modernComponents = import.meta.glob('../../../../katlux-preset-modern/src/runtime/components/**/*.vue')
-const toolkitPresets = import.meta.glob('../presets/**/*.vue')
-
-export function usePresetComponent(
-	componentBaseName: string,
-	defaultComponent: Component
-) {
-	const appConfig = useAppConfig()
-	const activePreset = computed(() => appConfig.katluxToolkit?.activePreset || 'default')
-
-	return computed(() => {
-		// Use default component for 'default' preset
-		if (activePreset.value === 'default') {
-			return defaultComponent
-		}
-
-		const cacheKey = `${activePreset.value}:${componentBaseName}`
-		if (componentCache.has(cacheKey)) {
-			return componentCache.get(cacheKey)!
-		}
-
-		let loader: (() => Promise<any>) | undefined
-
-		if (activePreset.value === 'modern') {
-			const path = `../../../../katlux-preset-modern/src/runtime/components/${componentBaseName}/${componentBaseName}.vue`
-			loader = modernComponents[path] as (() => Promise<any>)
-		} else {
-			const path = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`
-			loader = toolkitPresets[path] as (() => Promise<any>)
-		}
-
-		if (!loader) {
-			console.warn(`[${componentBaseName}] Preset "${activePreset.value}" not found, falling back to default`)
-			return defaultComponent
-		}
-
-		const asyncComp = defineAsyncComponent({
-			loader: loader,
-			errorComponent: defaultComponent as any
-		})
-
-		componentCache.set(cacheKey, asyncComp)
-		return asyncComp
-	})
-}

package/src/runtime/composables/useRemainingTime.ts

@@ -1,28 +0,0 @@
-export const useRemainingTime = () => {
-	/**
-	 * Formats milliseconds into a human-readable remaining time string.
-	 * Returns formats like "1s", "1m", "1h", "1d".
-	 * 
-	 * @param ms Milliseconds
-	 * @returns Formatted string
-	 */
-	const formatRemainingTime = (ms: number): string => {
-		if (ms <= 0) return 'expired'
-
-		const seconds = Math.floor(ms / 1000)
-		const minutes = Math.floor(seconds / 60)
-		const hours = Math.floor(minutes / 60)
-		const days = Math.floor(hours / 24)
-
-		if (days > 0) return `${days}d`
-		if (hours > 0) return `${hours}h`
-		if (minutes > 0) return `${minutes}m`
-		if (seconds > 0) return `${seconds}s`
-
-		return '0s'
-	}
-
-	return {
-		formatRemainingTime
-	}
-}

package/src/runtime/composables/useSortLogic.ts

@@ -1,82 +0,0 @@
-import type { TDataRow, IDataSort } from '@katlux/providers'
-
-export const useSortLogic = () => {
-
-	const sortData = (sortList: IDataSort[], rows: TDataRow[]): TDataRow[] => {
-
-		if (!sortList || sortList.length === 0 || !rows || rows.length === 0) {
-			return rows
-		}
-
-		// Create a copy of the rows array to avoid mutating the original
-		const sortedRows = [...rows]
-
-		// Compare function for two rows based on sort criteria
-		// Sorts by the order of sortList: first item has highest priority, then second, etc.
-		const compare = (a: TDataRow, b: TDataRow): number => {
-			// Iterate through sortList in order - first criterion is primary, subsequent are secondary/tertiary
-			for (const sort of sortList) {
-				const aVal = a[sort.field]
-				const bVal = b[sort.field]
-
-				// Handle null/undefined values
-				if (aVal === null || aVal === undefined) {
-					if (bVal === null || bVal === undefined) continue
-					return sort.direction === 'asc' ? -1 : 1
-				}
-				if (bVal === null || bVal === undefined) {
-					return sort.direction === 'asc' ? 1 : -1
-				}
-
-				// Compare values - if not equal, use this criterion (respects sortList order priority)
-				if (aVal < bVal) {
-					return sort.direction === 'asc' ? -1 : 1
-				} else if (aVal > bVal) {
-					return sort.direction === 'asc' ? 1 : -1
-				}
-				// If equal, continue to next sort criterion in sortList order
-			}
-			// All criteria were equal
-			return 0
-		}
-
-		// Merge function for merge sort
-		const merge = (left: TDataRow[], right: TDataRow[]): TDataRow[] => {
-			const result: TDataRow[] = []
-			let leftIndex = 0
-			let rightIndex = 0
-
-			while (leftIndex < left.length && rightIndex < right.length) {
-				if (compare(left[leftIndex], right[rightIndex]) <= 0) {
-					result.push(left[leftIndex])
-					leftIndex++
-				} else {
-					result.push(right[rightIndex])
-					rightIndex++
-				}
-			}
-
-			// Add remaining elements
-			return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex))
-		}
-
-		// Merge sort implementation
-		const mergeSort = (arr: TDataRow[]): TDataRow[] => {
-			if (arr.length <= 1) {
-				return arr
-			}
-
-			const mid = Math.floor(arr.length / 2)
-			const left = mergeSort(arr.slice(0, mid))
-			const right = mergeSort(arr.slice(mid))
-
-			return merge(left, right)
-		}
-
-		return mergeSort(sortedRows)
-	}
-
-	return {
-		sortData
-	}
-}

package/src/runtime/composables/useTemplate.ts

@@ -1,135 +0,0 @@
-import { ref, computed, onMounted, type Ref } from 'vue'
-import { useTemplateResolver } from '../utils/TemplateResolver'
-import type { TemplateMetadata } from '../utils/TemplateResolver'
-
-export interface UseTemplateOptions {
-	componentName: string
-	fallbackToDefault?: boolean
-}
-
-export interface UseTemplateReturn {
-	metadata: Ref<TemplateMetadata>
-	isCustomTemplate: Ref<boolean>
-	templateName: Ref<string>
-	isLoading: Ref<boolean>
-	error: Ref<Error | null>
-	refreshTemplate: () => void
-}
-
-/**
- * useTemplate - Composable for managing component template resolution
- * 
- * This composable provides:
- * - Template resolution logic for components
- * - Reactive template state
- * - Template loading and error handling
- * - Template refresh capability
- * 
- * @param options - Configuration options
- * @returns Template state and utilities
- * 
- * @example
- * ```typescript
- * const { metadata, isCustomTemplate } = useTemplate({
- *   componentName: 'KButton'
- * })
- * ```
- */
-export function useTemplate(options: UseTemplateOptions): UseTemplateReturn {
-	const { componentName, fallbackToDefault = true } = options
-
-	const resolver = useTemplateResolver()
-	const metadata = ref<TemplateMetadata>(resolver.resolveTemplate(componentName))
-	const isLoading = ref(false)
-	const error = ref<Error | null>(null)
-
-	const isCustomTemplate = computed(() => {
-		return metadata.value.hasCustomTemplate && metadata.value.templateName !== 'default'
-	})
-
-	const templateName = computed(() => {
-		return metadata.value.templateName
-	})
-
-	/**
-	 * Refresh template metadata (useful when template changes in dev mode)
-	 */
-	const refreshTemplate = () => {
-		try {
-			isLoading.value = true
-			error.value = null
-
-			// Clear cache and re-resolve
-			resolver.clearCache()
-			metadata.value = resolver.resolveTemplate(componentName)
-		} catch (e) {
-			error.value = e as Error
-			console.error(`Failed to refresh template for ${componentName}:`, e)
-
-			// Fallback to default if enabled
-			if (fallbackToDefault) {
-				console.warn(`Falling back to default template for ${componentName}`)
-				resolver.setActiveTemplate('default')
-				metadata.value = resolver.resolveTemplate(componentName)
-			}
-		} finally {
-			isLoading.value = false
-		}
-	}
-
-	// Initialize on mount
-	onMounted(() => {
-		refreshTemplate()
-	})
-
-	return {
-		metadata,
-		isCustomTemplate,
-		templateName,
-		isLoading,
-		error,
-		refreshTemplate,
-	}
-}
-
-/**
- * useTemplateStyles - Composable for loading custom template styles
- * 
- * This composable handles dynamic loading of custom SCSS styles
- * 
- * @param componentName - Name of the component
- * @returns Style loading state
- */
-export function useTemplateStyles(componentName: string) {
-	const resolver = useTemplateResolver()
-	const metadata = resolver.resolveTemplate(componentName)
-	const isLoaded = ref(false)
-	const error = ref<Error | null>(null)
-
-	const loadStyles = async () => {
-		if (!metadata.hasCustomStyles || !metadata.stylesPath) {
-			isLoaded.value = true
-			return
-		}
-
-		try {
-			// In a real implementation, this would dynamically import the SCSS
-			// For now, we'll mark it as loaded
-			// TODO: Implement dynamic SCSS loading
-			isLoaded.value = true
-		} catch (e) {
-			error.value = e as Error
-			console.error(`Failed to load styles for ${componentName}:`, e)
-		}
-	}
-
-	onMounted(() => {
-		loadStyles()
-	})
-
-	return {
-		isLoaded,
-		error,
-		loadStyles,
-	}
-}

package/src/runtime/directives/clickOutside.ts

@@ -1,75 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-
-interface ClickOutsideBinding extends DirectiveBinding {
-  value: (event: Event) => void
-}
-
-interface ClickOutsideOptions {
-  handler: (event: Event) => void;
-  extraInside?: string | HTMLElement | ((target: HTMLElement) => boolean);
-}
-
-export const clickOutside: Directive = {
-  // Handle SSR by providing empty props
-  getSSRProps() {
-    return {}
-  },
-  
-  // Only run on client side
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
-    // Skip if not on client side or no handler provided
-    if (typeof window === 'undefined' || !binding.value) return
-    
-    el._clickOutside = (event: Event) => {
-      const target = event.target as HTMLElement;
-
-      // Default: check if click is inside the element
-      if (el === target || el.contains(target)) return;
-
-      // Support for extra 'inside' area(s)
-      let handler: (event: Event) => void;
-      let extraInside: string | HTMLElement | ((target: HTMLElement) => boolean) | undefined;
-      const value = binding.value;
-      if (typeof value === 'function') {
-        handler = value;
-      } else if (value && typeof value === 'object' && typeof value.handler === 'function') {
-        handler = value.handler;
-        extraInside = value.extraInside;
-      } else {
-        return;
-      }
-
-      let isInsideExtra = false;
-      if (extraInside) {
-        if (typeof extraInside === 'string') {
-          const extraEl = document.querySelector(extraInside);
-          if (extraEl && (extraEl === target || extraEl.contains(target))) isInsideExtra = true;
-        } else if (extraInside instanceof HTMLElement) {
-          if (extraInside === target || extraInside.contains(target)) isInsideExtra = true;
-        } else if (typeof extraInside === 'function') {
-          if (extraInside(target)) isInsideExtra = true;
-        }
-      }
-      if (isInsideExtra) return;
-
-      // If we get here, the click was truly outside
-      handler(event);
-    };
-    document.addEventListener('click', el._clickOutside, true);
-  },
-
-  unmounted(el: HTMLElement) {
-    // Remove event listener when component is unmounted
-    if (el._clickOutside) {
-      document.removeEventListener('click', el._clickOutside, true)
-      delete el._clickOutside
-    }
-  }
-}
-
-// Extend HTMLElement interface to include our custom property
-declare global {
-  interface HTMLElement {
-    _clickOutside?: (event: Event) => void
-  }
-} 

package/src/runtime/directives/index.ts

@@ -1 +0,0 @@
-export { clickOutside } from './clickOutside' 

package/src/runtime/plugins/PresetPlugin.ts

@@ -1,59 +0,0 @@
-import { defineNuxtPlugin, useHead, useAppConfig } from '#app'
-import { watch } from 'vue'
-import { PresetResolver } from '../utils/PresetResolver'
-
-/**
- * Katlux Preset Plugin
- * 
- * This plugin initializes the preset system on app startup:
- * - Creates the PresetResolver singleton
- * - Discovers available presets
- * - Sets up preset watchers in dev mode
- * - Provides global preset utilities
- */
-export default defineNuxtPlugin((nuxtApp) => {
-	// Initialize the preset resolver (per request for SSR safety)
-	const resolver = new PresetResolver()
-
-	// Sync the resolved preset (from cookie) with appConfig immediately
-	// This ensures useAppConfig() returns the correct preset during SSR
-	const activePreset = resolver.getActivePreset()
-	const appConfig = useAppConfig()
-	if (activePreset && appConfig.katluxToolkit) {
-		appConfig.katluxToolkit.activePreset = activePreset
-	}
-
-	// Update the root attribute for CSS variable scoping
-	// Use useHead for SSR compatibility and automatic cleanup
-	const updateRootAttribute = (preset: string) => {
-		useHead({
-			htmlAttrs: {
-				'data-template': preset
-			}
-		})
-	}
-
-	// Set initial attribute
-	updateRootAttribute(activePreset)
-
-	// Watch for changes at runtime (e.g. from a theme/preset switcher)
-	if (appConfig.katluxToolkit) {
-		watch(() => appConfig.katluxToolkit?.activePreset, (newPreset) => {
-			if (newPreset) {
-				updateRootAttribute(newPreset)
-				resolver.setActivePreset(newPreset)
-			}
-		})
-	}
-
-	// Provide the resolver to the app (single provide statement)
-	nuxtApp.provide('presetResolver', resolver)
-
-	// In development mode, set up HMR for preset changes
-	if (process.dev && import.meta.hot) {
-		import.meta.hot.accept(() => {
-			console.log('[Katlux] Preset files changed, clearing cache')
-			resolver.clearCache()
-		})
-	}
-})