@htlkg/components 0.0.3 → 0.0.4

package/src/data/filterHelpers.ts

@@ -0,0 +1,358 @@
+/**
+ * Filter Definition Helpers
+ *
+ * Pre-built filter definitions for common patterns, reducing boilerplate
+ * when defining DataTable filters.
+ */
+
+import type { DataTableFilter } from "./DataTable.vue";
+
+/**
+ * Filter option for select filters
+ */
+export interface FilterOption {
+	label: string;
+	value: string | number | boolean;
+}
+
+/**
+ * Common status options
+ */
+export const statusOptions: FilterOption[] = [
+	{ label: "Active", value: "active" },
+	{ label: "Inactive", value: "inactive" },
+	{ label: "Pending", value: "pending" },
+	{ label: "Archived", value: "archived" },
+];
+
+/**
+ * Boolean options
+ */
+export const booleanOptions: FilterOption[] = [
+	{ label: "Yes", value: "true" },
+	{ label: "No", value: "false" },
+];
+
+/**
+ * Pre-built filter helpers
+ */
+export const filters = {
+	/**
+	 * Text search filter
+	 *
+	 * @example
+	 * filters.text('name', 'Name')
+	 * filters.text('email', 'Email', 'Search by email address...')
+	 */
+	text: (key: string, label: string, placeholder?: string): DataTableFilter => ({
+		key,
+		label,
+		type: "text",
+		placeholder: placeholder ?? `Search by ${label.toLowerCase()}...`,
+	}),
+
+	/**
+	 * Select dropdown filter
+	 *
+	 * @example
+	 * filters.select('role', 'Role', [
+	 *   { label: 'Admin', value: 'admin' },
+	 *   { label: 'User', value: 'user' },
+	 * ])
+	 */
+	select: (key: string, label: string, options: FilterOption[]): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options,
+	}),
+
+	/**
+	 * Status filter with common status options
+	 *
+	 * @example
+	 * filters.status()
+	 * filters.status('state', 'State')
+	 * filters.status('status', 'Status', [
+	 *   { label: 'Active', value: 'active' },
+	 *   { label: 'Draft', value: 'draft' },
+	 * ])
+	 */
+	status: (key: string = "status", label: string = "Status", options?: FilterOption[]): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: options ?? statusOptions,
+	}),
+
+	/**
+	 * Boolean (Yes/No) filter
+	 *
+	 * @example
+	 * filters.boolean('verified', 'Verified')
+	 * filters.boolean('active', 'Active', 'Enabled', 'Disabled')
+	 */
+	boolean: (key: string, label: string, trueLabel: string = "Yes", falseLabel: string = "No"): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: [
+			{ label: trueLabel, value: "true" },
+			{ label: falseLabel, value: "false" },
+		],
+	}),
+
+	/**
+	 * Number filter
+	 *
+	 * @example
+	 * filters.number('age', 'Age')
+	 * filters.number('amount', 'Amount', 'Enter amount...')
+	 */
+	number: (key: string, label: string, placeholder?: string): DataTableFilter => ({
+		key,
+		label,
+		type: "number",
+		placeholder: placeholder ?? `Enter ${label.toLowerCase()}...`,
+	}),
+
+	/**
+	 * Date filter
+	 *
+	 * @example
+	 * filters.date('createdAt', 'Created Date')
+	 */
+	date: (key: string, label: string): DataTableFilter => ({
+		key,
+		label,
+		type: "date",
+	}),
+
+	/**
+	 * Date range filter
+	 *
+	 * @example
+	 * filters.dateRange('createdAt', 'Created')
+	 */
+	dateRange: (key: string, label: string): DataTableFilter => ({
+		key,
+		label,
+		type: "dateRange",
+	}),
+
+	/**
+	 * Role filter with common role options
+	 *
+	 * @example
+	 * filters.role()
+	 * filters.role('userRole', 'User Role')
+	 */
+	role: (key: string = "role", label: string = "Role", options?: FilterOption[]): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: options ?? [
+			{ label: "Admin", value: "admin" },
+			{ label: "Manager", value: "manager" },
+			{ label: "User", value: "user" },
+			{ label: "Guest", value: "guest" },
+		],
+	}),
+
+	/**
+	 * Type filter (generic entity type)
+	 *
+	 * @example
+	 * filters.type('campaignType', 'Type', [
+	 *   { label: 'Email', value: 'email' },
+	 *   { label: 'SMS', value: 'sms' },
+	 * ])
+	 */
+	type: (key: string, label: string, options: FilterOption[]): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options,
+	}),
+
+	/**
+	 * Priority filter
+	 *
+	 * @example
+	 * filters.priority()
+	 * filters.priority('urgency', 'Urgency')
+	 */
+	priority: (key: string = "priority", label: string = "Priority"): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: [
+			{ label: "Low", value: "low" },
+			{ label: "Medium", value: "medium" },
+			{ label: "High", value: "high" },
+			{ label: "Critical", value: "critical" },
+		],
+	}),
+
+	/**
+	 * Category filter from dynamic options
+	 *
+	 * @example
+	 * // From array of objects
+	 * filters.fromData('categoryId', 'Category', categories, 'name', 'id')
+	 */
+	fromData: <T extends Record<string, any>>(
+		key: string,
+		label: string,
+		data: T[],
+		labelKey: keyof T,
+		valueKey: keyof T
+	): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: data.map((item) => ({
+			label: String(item[labelKey]),
+			value: item[valueKey] as string | number,
+		})),
+	}),
+
+	/**
+	 * Enum filter from TypeScript enum
+	 *
+	 * @example
+	 * enum Status { Active = 'active', Inactive = 'inactive' }
+	 * filters.fromEnum('status', 'Status', Status)
+	 */
+	fromEnum: (key: string, label: string, enumObj: Record<string, string | number>): DataTableFilter => ({
+		key,
+		label,
+		type: "select",
+		options: Object.entries(enumObj)
+			.filter(([k]) => Number.isNaN(Number(k))) // Filter out numeric keys from numeric enums
+			.map(([enumKey, enumValue]) => ({
+				label: enumKey.replace(/([A-Z])/g, " $1").trim(), // Convert camelCase to Title Case
+				value: enumValue,
+			})),
+	}),
+};
+
+/**
+ * Create a filter group with common filters
+ *
+ * @example
+ * const tableFilters = createFilterGroup({
+ *   search: ['name', 'email'],
+ *   status: true,
+ *   dateRange: 'createdAt',
+ *   custom: [
+ *     filters.role('userRole', 'Role'),
+ *   ],
+ * });
+ */
+export interface FilterGroupConfig {
+	/** Fields to include as text search filters */
+	search?: string[];
+	/** Include status filter */
+	status?: boolean | { key?: string; label?: string; options?: FilterOption[] };
+	/** Field for date range filter */
+	dateRange?: string;
+	/** Additional custom filters */
+	custom?: DataTableFilter[];
+}
+
+export function createFilterGroup(config: FilterGroupConfig): DataTableFilter[] {
+	const result: DataTableFilter[] = [];
+
+	// Add search filters
+	if (config.search) {
+		config.search.forEach((field) => {
+			result.push(filters.text(field, field.charAt(0).toUpperCase() + field.slice(1)));
+		});
+	}
+
+	// Add status filter
+	if (config.status) {
+		if (typeof config.status === "boolean") {
+			result.push(filters.status());
+		} else {
+			result.push(filters.status(config.status.key, config.status.label, config.status.options));
+		}
+	}
+
+	// Add date range filter
+	if (config.dateRange) {
+		result.push(filters.dateRange(config.dateRange, "Date Range"));
+	}
+
+	// Add custom filters
+	if (config.custom) {
+		result.push(...config.custom);
+	}
+
+	return result;
+}
+
+/**
+ * Common filter presets for specific entity types
+ */
+export const filterPresets = {
+	/**
+	 * Filters for user/account tables
+	 */
+	users: (): DataTableFilter[] => [
+		filters.text("name", "Name"),
+		filters.text("email", "Email"),
+		filters.role(),
+		filters.status(),
+	],
+
+	/**
+	 * Filters for campaign tables
+	 */
+	campaigns: (): DataTableFilter[] => [
+		filters.text("name", "Campaign Name"),
+		filters.status("status", "Status", [
+			{ label: "Active", value: "active" },
+			{ label: "Draft", value: "draft" },
+			{ label: "Completed", value: "completed" },
+			{ label: "Archived", value: "archived" },
+			{ label: "Failed", value: "failed" },
+		]),
+		filters.dateRange("createdAt", "Created Date"),
+	],
+
+	/**
+	 * Filters for contact tables
+	 */
+	contacts: (): DataTableFilter[] => [
+		filters.text("name", "Name"),
+		filters.text("email", "Email"),
+		filters.text("phone", "Phone"),
+		filters.status(),
+	],
+
+	/**
+	 * Filters for booking/reservation tables
+	 */
+	bookings: (): DataTableFilter[] => [
+		filters.text("guestName", "Guest Name"),
+		filters.text("confirmationNumber", "Confirmation #"),
+		filters.status("status", "Status", [
+			{ label: "Confirmed", value: "confirmed" },
+			{ label: "Pending", value: "pending" },
+			{ label: "Cancelled", value: "cancelled" },
+			{ label: "Completed", value: "completed" },
+		]),
+		filters.dateRange("checkIn", "Check-in Date"),
+	],
+
+	/**
+	 * Filters for audit/log tables
+	 */
+	auditLogs: (): DataTableFilter[] => [
+		filters.text("action", "Action"),
+		filters.text("user", "User"),
+		filters.dateRange("timestamp", "Date"),
+	],
+};

package/src/data/index.ts

@@ -23,3 +23,14 @@ export {
 	type DateFormatOptions,
 	type TagColorFn,
 } from './columnHelpers';
+
+// Filter definition helpers
+export {
+	filters,
+	filterPresets,
+	createFilterGroup,
+	statusOptions,
+	booleanOptions,
+	type FilterOption,
+	type FilterGroupConfig,
+} from './filterHelpers';

package/src/forms/JsonSchemaForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import Ajv from 'ajv';
+import _Ajv from 'ajv';
 import addFormats from 'ajv-formats';
 import {
   uiInput,
@@ -11,6 +11,9 @@ import {
   uiButton
 } from '@hotelinking/ui';
 
+// Handle ESM/CJS interop for ajv
+const Ajv = (_Ajv as unknown as { default: typeof _Ajv }).default ?? _Ajv;
+
 // Initialize AJV for JSON Schema validation with format support
 const ajv = new Ajv({ allErrors: true });
 addFormats(ajv); // Add support for format keywords like "email", "uri", "date", etc.