@htlkg/components 0.0.11 → 0.0.13

package/src/composables/useJsonForm.ts

@@ -0,0 +1,261 @@
+/**
+ * JsonSchemaForm Composable
+ *
+ * Wraps JsonSchemaForm component with additional features:
+ * - isDirty tracking (has unsaved changes)
+ * - confirmOnLeave (warn before navigation with unsaved changes)
+ * - Form ref management
+ */
+
+import { ref, computed, watch, onMounted, onUnmounted, type Ref, type ComputedRef } from 'vue';
+
+/**
+ * Options for useJsonForm
+ */
+export interface UseJsonFormOptions<T extends Record<string, unknown>> {
+	/** Initial form values */
+	initialValues?: T;
+	/** Warn before leaving with unsaved changes */
+	confirmOnLeave?: boolean;
+	/** Message to show in browser confirm dialog */
+	confirmMessage?: string;
+	/** Auto-save configuration */
+	autoSave?: {
+		enabled: boolean;
+		debounceMs?: number;
+		onAutoSave: (values: T) => Promise<void>;
+	};
+	/** Callback when values change */
+	onChange?: (values: T) => void;
+}
+
+/**
+ * Return type for useJsonForm
+ */
+export interface UseJsonFormReturn<T extends Record<string, unknown>> {
+	/** Ref to attach to JsonSchemaForm component */
+	formRef: Ref<JsonSchemaFormInstance | null>;
+	/** Current form values (v-model) */
+	values: Ref<T>;
+	/** Original values (for dirty checking) */
+	originalValues: Ref<T>;
+	/** Whether form has unsaved changes */
+	isDirty: ComputedRef<boolean>;
+	/** Trigger form validation */
+	validate: () => Array<{ field: string; message: string }>;
+	/** Reset form to original values */
+	reset: () => void;
+	/** Update both current and original values (after save) */
+	setValues: (newValues: Partial<T>) => void;
+	/** Mark form as saved (updates original values to current) */
+	markAsSaved: () => void;
+}
+
+/**
+ * JsonSchemaForm component instance interface
+ */
+interface JsonSchemaFormInstance {
+	validate: () => Array<{ field: string; message: string }>;
+	reset: () => void;
+	formData: Ref<Record<string, unknown>>;
+	errors: Ref<Record<string, string>>;
+	touched: Ref<Record<string, boolean>>;
+}
+
+/**
+ * Deep equality check for objects
+ */
+function deepEqual(a: unknown, b: unknown): boolean {
+	if (a === b) return true;
+	if (a == null || b == null) return false;
+	if (typeof a !== 'object' || typeof b !== 'object') return false;
+
+	const keysA = Object.keys(a as object);
+	const keysB = Object.keys(b as object);
+
+	if (keysA.length !== keysB.length) return false;
+
+	for (const key of keysA) {
+		if (!keysB.includes(key)) return false;
+		if (!deepEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+/**
+ * Deep clone an object
+ */
+function deepClone<T>(obj: T): T {
+	if (obj === null || typeof obj !== 'object') return obj;
+	if (Array.isArray(obj)) return obj.map(deepClone) as unknown as T;
+	const clone = {} as T;
+	for (const key in obj) {
+		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+			clone[key] = deepClone(obj[key]);
+		}
+	}
+	return clone;
+}
+
+/**
+ * Debounce function
+ */
+function debounce<T extends (...args: unknown[]) => unknown>(fn: T, delay: number): T {
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	return ((...args: unknown[]) => {
+		if (timeoutId) clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => fn(...args), delay);
+	}) as T;
+}
+
+/**
+ * useJsonForm composable
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { JsonSchemaForm } from '@htlkg/components/forms';
+ * import { useJsonForm } from '@htlkg/components/composables';
+ *
+ * const { formRef, values, isDirty, validate, reset } = useJsonForm({
+ *   initialValues: props.brand,
+ *   confirmOnLeave: true,
+ * });
+ *
+ * const schema = {
+ *   type: 'object',
+ *   properties: {
+ *     name: { type: 'string', title: 'Name', minLength: 1 },
+ *   },
+ *   required: ['name'],
+ * };
+ *
+ * async function handleSubmit(data) {
+ *   await saveBrand(data);
+ *   // Update original values so isDirty becomes false
+ *   setValues(data);
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div v-if="isDirty" class="warning">You have unsaved changes</div>
+ *   <JsonSchemaForm
+ *     ref="formRef"
+ *     v-model="values"
+ *     :schema="schema"
+ *     @submit="handleSubmit"
+ *   />
+ * </template>
+ * ```
+ */
+export function useJsonForm<T extends Record<string, unknown>>(
+	options: UseJsonFormOptions<T> = {}
+): UseJsonFormReturn<T> {
+	const {
+		initialValues = {} as T,
+		confirmOnLeave = false,
+		confirmMessage = 'You have unsaved changes. Are you sure you want to leave?',
+		autoSave,
+		onChange,
+	} = options;
+
+	// Form ref
+	const formRef = ref<JsonSchemaFormInstance | null>(null);
+
+	// Current values
+	const values = ref<T>(deepClone(initialValues)) as Ref<T>;
+
+	// Original values (for dirty checking)
+	const originalValues = ref<T>(deepClone(initialValues)) as Ref<T>;
+
+	// Computed dirty state
+	const isDirty = computed(() => !deepEqual(values.value, originalValues.value));
+
+	// Validate form
+	function validate(): Array<{ field: string; message: string }> {
+		if (formRef.value?.validate) {
+			return formRef.value.validate();
+		}
+		return [];
+	}
+
+	// Reset to original values
+	function reset(): void {
+		values.value = deepClone(originalValues.value);
+		if (formRef.value?.reset) {
+			formRef.value.reset();
+		}
+	}
+
+	// Update both current and original values
+	function setValues(newValues: Partial<T>): void {
+		const merged = { ...values.value, ...newValues } as T;
+		values.value = merged;
+		originalValues.value = deepClone(merged);
+	}
+
+	// Mark current state as saved
+	function markAsSaved(): void {
+		originalValues.value = deepClone(values.value);
+	}
+
+	// Handle beforeunload for confirmOnLeave
+	function handleBeforeUnload(e: BeforeUnloadEvent): string | undefined {
+		if (isDirty.value) {
+			e.preventDefault();
+			e.returnValue = confirmMessage;
+			return confirmMessage;
+		}
+		return undefined;
+	}
+
+	// Setup auto-save
+	const debouncedAutoSave = autoSave?.enabled
+		? debounce(async (newValues: T) => {
+				try {
+					await autoSave.onAutoSave(newValues);
+				} catch (error) {
+					console.error('Auto-save failed:', error);
+				}
+			}, autoSave.debounceMs ?? 2000)
+		: null;
+
+	// Watch for value changes
+	watch(
+		values,
+		(newValues) => {
+			onChange?.(newValues);
+			if (debouncedAutoSave && isDirty.value) {
+				debouncedAutoSave(newValues);
+			}
+		},
+		{ deep: true }
+	);
+
+	// Setup/cleanup beforeunload listener
+	onMounted(() => {
+		if (confirmOnLeave) {
+			window.addEventListener('beforeunload', handleBeforeUnload);
+		}
+	});
+
+	onUnmounted(() => {
+		if (confirmOnLeave) {
+			window.removeEventListener('beforeunload', handleBeforeUnload);
+		}
+	});
+
+	return {
+		formRef,
+		values,
+		originalValues,
+		isDirty,
+		validate,
+		reset,
+		setValues,
+		markAsSaved,
+	};
+}

package/src/composables/useModal.test.ts

@@ -0,0 +1,264 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useModal } from './useModal';
+
+/**
+ * Unit tests for useModal composable
+ * Tests data context support and type safety
+ */
+describe('useModal composable', () => {
+	describe('data context', () => {
+		it('initializes data as null by default', () => {
+			const { data } = useModal();
+			expect(data.value).toBe(null);
+		});
+
+		it('initializes with provided initialData', () => {
+			const initialData = { id: 1, name: 'Test' };
+			const { data } = useModal({ initialData });
+			expect(data.value).toEqual(initialData);
+		});
+
+		it('sets data when opening with context', () => {
+			interface Contact {
+				id: number;
+				name: string;
+			}
+
+			const modal = useModal<Contact>();
+			const contact = { id: 1, name: 'John' };
+
+			modal.open(contact);
+
+			expect(modal.isOpen.value).toBe(true);
+			expect(modal.data.value).toEqual(contact);
+		});
+
+		it('opens without data when no context provided', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.open();
+
+			expect(modal.isOpen.value).toBe(true);
+			expect(modal.data.value).toBe(null);
+		});
+
+		it('preserves existing data when opening without context', () => {
+			const modal = useModal<{ id: number }>({
+				initialData: { id: 1 },
+			});
+
+			modal.open();
+
+			expect(modal.data.value).toEqual({ id: 1 });
+		});
+
+		it('clears data when closing', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.open({ id: 1 });
+			expect(modal.data.value).toEqual({ id: 1 });
+
+			modal.close();
+			expect(modal.data.value).toBe(null);
+		});
+
+		it('passes context to onOpen callback', () => {
+			const onOpen = vi.fn();
+			const modal = useModal<{ id: number }>({ onOpen });
+			const context = { id: 1 };
+
+			modal.open(context);
+
+			expect(onOpen).toHaveBeenCalledWith(context);
+		});
+
+		it('calls onOpen without context when opening without data', () => {
+			const onOpen = vi.fn();
+			const modal = useModal<{ id: number }>({ onOpen });
+
+			modal.open();
+
+			expect(onOpen).toHaveBeenCalledWith(undefined);
+		});
+	});
+
+	describe('setData', () => {
+		it('updates data without changing open state', () => {
+			const modal = useModal<{ id: number; name?: string }>();
+
+			modal.open({ id: 1 });
+			expect(modal.isOpen.value).toBe(true);
+
+			modal.setData({ id: 1, name: 'Updated' });
+
+			expect(modal.isOpen.value).toBe(true);
+			expect(modal.data.value).toEqual({ id: 1, name: 'Updated' });
+		});
+
+		it('can set data to null', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.open({ id: 1 });
+			modal.setData(null);
+
+			expect(modal.isOpen.value).toBe(true);
+			expect(modal.data.value).toBe(null);
+		});
+
+		it('works when modal is closed', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.setData({ id: 1 });
+
+			expect(modal.isOpen.value).toBe(false);
+			expect(modal.data.value).toEqual({ id: 1 });
+		});
+	});
+
+	describe('toggle with data', () => {
+		it('clears data when toggling closed', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.open({ id: 1 });
+			expect(modal.data.value).toEqual({ id: 1 });
+
+			modal.toggle(); // closes
+			expect(modal.isOpen.value).toBe(false);
+			expect(modal.data.value).toBe(null);
+		});
+
+		it('preserves null data when toggling open', () => {
+			const modal = useModal<{ id: number }>();
+
+			modal.toggle(); // opens
+			expect(modal.isOpen.value).toBe(true);
+			expect(modal.data.value).toBe(null);
+		});
+	});
+
+	describe('type safety', () => {
+		it('supports generic type parameter', () => {
+			interface User {
+				id: number;
+				name: string;
+				email: string;
+			}
+
+			const modal = useModal<User>();
+
+			const user: User = { id: 1, name: 'John', email: 'john@example.com' };
+			modal.open(user);
+
+			// TypeScript should infer correct type
+			expect(modal.data.value?.id).toBe(1);
+			expect(modal.data.value?.name).toBe('John');
+			expect(modal.data.value?.email).toBe('john@example.com');
+		});
+
+		it('works without generic type', () => {
+			const modal = useModal();
+
+			modal.open({ anyProperty: 'value' });
+			expect(modal.data.value).toEqual({ anyProperty: 'value' });
+		});
+	});
+
+	describe('basic operations', () => {
+		it('opens and closes correctly', () => {
+			const modal = useModal();
+
+			expect(modal.isOpen.value).toBe(false);
+
+			modal.open();
+			expect(modal.isOpen.value).toBe(true);
+
+			modal.close();
+			expect(modal.isOpen.value).toBe(false);
+		});
+
+		it('toggles correctly', () => {
+			const modal = useModal();
+
+			modal.toggle();
+			expect(modal.isOpen.value).toBe(true);
+
+			modal.toggle();
+			expect(modal.isOpen.value).toBe(false);
+		});
+
+		it('respects initialOpen option', () => {
+			const modal = useModal({ initialOpen: true });
+			expect(modal.isOpen.value).toBe(true);
+		});
+
+		it('calls onClose callback', () => {
+			const onClose = vi.fn();
+			const modal = useModal({ onClose });
+
+			modal.open();
+			modal.close();
+
+			expect(onClose).toHaveBeenCalled();
+		});
+	});
+
+	describe('use case: edit modal', () => {
+		interface Contact {
+			id: number;
+			name: string;
+			email: string;
+		}
+
+		it('handles edit workflow correctly', () => {
+			const editModal = useModal<Contact>();
+
+			// Click edit on contact
+			const contactToEdit = { id: 1, name: 'John', email: 'john@example.com' };
+			editModal.open(contactToEdit);
+
+			expect(editModal.isOpen.value).toBe(true);
+			expect(editModal.data.value).toEqual(contactToEdit);
+
+			// User closes modal
+			editModal.close();
+
+			expect(editModal.isOpen.value).toBe(false);
+			expect(editModal.data.value).toBe(null);
+
+			// Edit different contact
+			const anotherContact = { id: 2, name: 'Jane', email: 'jane@example.com' };
+			editModal.open(anotherContact);
+
+			expect(editModal.data.value).toEqual(anotherContact);
+		});
+	});
+
+	describe('use case: confirmation modal', () => {
+		interface ConfirmationData {
+			title: string;
+			message: string;
+			itemId: number;
+		}
+
+		it('handles confirmation workflow correctly', () => {
+			const confirmModal = useModal<ConfirmationData>();
+
+			// Show confirmation for delete
+			confirmModal.open({
+				title: 'Delete Item',
+				message: 'Are you sure?',
+				itemId: 123,
+			});
+
+			expect(confirmModal.isOpen.value).toBe(true);
+			expect(confirmModal.data.value?.itemId).toBe(123);
+
+			// User confirms
+			const itemToDelete = confirmModal.data.value?.itemId;
+			confirmModal.close();
+
+			expect(itemToDelete).toBe(123);
+			expect(confirmModal.isOpen.value).toBe(false);
+		});
+	});
+});

package/src/composables/useModal.ts

@@ -1,28 +1,68 @@
 import { ref, type Ref } from 'vue';
 
-export interface UseModalOptions {
+export interface UseModalOptions<T = unknown> {
   initialOpen?: boolean;
-  onOpen?: () => void;
+  initialData?: T | null;
+  onOpen?: (data?: T) => void;
   onClose?: () => void;
 }
 
-export interface UseModalReturn {
+export interface UseModalReturn<T = unknown> {
+  /** Whether the modal is open */
   isOpen: Ref<boolean>;
-  open: () => void;
+  /** Data context passed when opening the modal */
+  data: Ref<T | null>;
+  /** Open the modal, optionally with data context */
+  open: (context?: T) => void;
+  /** Close the modal and clear data */
   close: () => void;
+  /** Toggle modal open/closed state */
   toggle: () => void;
+  /** Update the data without changing open state */
+  setData: (newData: T | null) => void;
 }
 
-export function useModal(options: UseModalOptions = {}): UseModalReturn {
+/**
+ * Modal state management composable with data context support.
+ *
+ * @example
+ * ```typescript
+ * // Type-safe modal for editing contacts
+ * const contactModal = useModal<Contact>();
+ *
+ * // Open with data
+ * contactModal.open(selectedContact);
+ *
+ * // Access in template
+ * <Modal :open="contactModal.isOpen.value">
+ *   <p>Editing: {{ contactModal.data.value?.name }}</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With callbacks
+ * const modal = useModal({
+ *   onOpen: (data) => console.log('Opened with:', data),
+ *   onClose: () => console.log('Closed'),
+ * });
+ * ```
+ */
+export function useModal<T = unknown>(options: UseModalOptions<T> = {}): UseModalReturn<T> {
   const isOpen = ref(options.initialOpen ?? false);
+  const data = ref<T | null>(options.initialData ?? null) as Ref<T | null>;
 
-  function open() {
+  function open(context?: T) {
+    if (context !== undefined) {
+      data.value = context;
+    }
     isOpen.value = true;
-    options.onOpen?.();
+    options.onOpen?.(context);
   }
 
   function close() {
     isOpen.value = false;
+    data.value = null;
     options.onClose?.();
   }
 
@@ -34,10 +74,16 @@ export function useModal(options: UseModalOptions = {}): UseModalReturn {
     }
   }
 
+  function setData(newData: T | null) {
+    data.value = newData;
+  }
+
   return {
     isOpen,
+    data,
     open,
     close,
-    toggle
+    toggle,
+    setData,
   };
 }

package/src/data/Chart/index.ts

@@ -0,0 +1,2 @@
+export { default as Chart } from './Chart.vue';
+export type { ChartSeries, ChartOptions, ChartDateRange, ChartAnnotation, NpsLiterals } from './Chart.vue';

package/src/data/DataList/index.ts

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

package/src/data/{DataTable.vue → DataTable/DataTable.vue}

@@ -7,8 +7,8 @@
  */
 
 import { computed, toRef, watch } from "vue";
-import Table from "./Table.vue";
-import { useTable, type SmartFilter } from "../composables/useTable";
+import Table from "../Table/Table.vue";
+import { useTable, type SmartFilter } from "../../composables/useTable";
 
 /**
  * Column definition for DataTable

package/src/data/DataTable/index.ts

@@ -0,0 +1,8 @@
+export { default as DataTable } from './DataTable.vue';
+export type {
+	DataTableColumn,
+	DataTableFilter,
+	BulkAction,
+	RowAction,
+	NoResultsConfig,
+} from './DataTable.vue';

package/src/data/SearchableSelect/index.ts

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

package/src/data/Table/index.ts

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

package/src/data/index.ts

@@ -1,18 +1,8 @@
-export { default as Table } from './Table.vue';
-export { default as DataList } from './DataList.vue';
-export { default as SearchableSelect } from './SearchableSelect.vue';
-export { default as Chart } from './Chart.vue';
-export type { ChartSeries, ChartOptions, ChartDateRange, ChartAnnotation, NpsLiterals } from './Chart.vue';
-
-// DataTable - Simplified table with automatic useTable integration
-export { default as DataTable } from './DataTable.vue';
-export type {
-	DataTableColumn,
-	DataTableFilter,
-	BulkAction,
-	RowAction,
-	NoResultsConfig,
-} from './DataTable.vue';
+export * from './Table';
+export * from './DataList';
+export * from './SearchableSelect';
+export * from './Chart';
+export * from './DataTable';
 
 // Column definition helpers
 export {

package/src/domain/BrandCard/index.ts

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

package/src/domain/BrandSelector/index.ts

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

package/src/domain/ProductBadge/index.ts

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

package/src/domain/UserAvatar/index.ts

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

package/src/domain/index.ts

@@ -1,4 +1,4 @@
-export { default as BrandSelector } from './BrandSelector.vue';
-export { default as BrandCard } from './BrandCard.vue';
-export { default as UserAvatar } from './UserAvatar.vue';
-export { default as ProductBadge } from './ProductBadge.vue';
+export * from './BrandSelector';
+export * from './BrandCard';
+export * from './UserAvatar';
+export * from './ProductBadge';

package/src/forms/DateRange/index.ts

@@ -0,0 +1,2 @@
+export { default as DateRange } from './DateRange.vue';
+export type { DateRangeValue, DateRangeLiterals } from './DateRange.vue';