@htlkg/components 0.0.2 → 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

@@ -3,3 +3,34 @@ 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';
+
+// Column definition helpers
+export {
+	columns,
+	statusColors,
+	getStatusColor,
+	createStatusColorFn,
+	type DateFormatOptions,
+	type TagColorFn,
+} from './columnHelpers';
+
+// Filter definition helpers
+export {
+	filters,
+	filterPresets,
+	createFilterGroup,
+	statusOptions,
+	booleanOptions,
+	type FilterOption,
+	type FilterGroupConfig,
+} from './filterHelpers';

package/src/domain/domain.md

@@ -0,0 +1,102 @@
+# Domain Module
+
+Domain-specific components for the Hotelinking platform.
+
+## Components
+
+### BrandCard
+
+Card component for displaying brand information.
+
+```vue
+<script setup>
+import { BrandCard } from '@htlkg/components/domain';
+</script>
+
+<template>
+  <BrandCard 
+    :brand="brand"
+    :show-status="true"
+    @click="handleClick"
+    @edit="handleEdit"
+  />
+</template>
+```
+
+### BrandSelector
+
+Grid-based brand selection component.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { BrandSelector } from '@htlkg/components/domain';
+
+const selectedBrand = ref(null);
+</script>
+
+<template>
+  <BrandSelector 
+    v-model="selectedBrand"
+    :brands="brands"
+    :loading="loading"
+    searchable
+  />
+</template>
+```
+
+### ProductBadge
+
+Badge component for product status indicators.
+
+```vue
+<script setup>
+import { ProductBadge } from '@htlkg/components/domain';
+</script>
+
+<template>
+  <ProductBadge 
+    :product="product"
+    :enabled="isEnabled"
+    size="sm"
+  />
+</template>
+```
+
+### UserAvatar
+
+User avatar with profile pictures or initials.
+
+```vue
+<script setup>
+import { UserAvatar } from '@htlkg/components/domain';
+</script>
+
+<template>
+  <UserAvatar 
+    :user="user"
+    size="md"
+    :show-name="true"
+    :show-role="true"
+  />
+</template>
+```
+
+## Props
+
+### BrandCard
+
+| Prop | Type | Description |
+|------|------|-------------|
+| brand | Brand | Brand object |
+| showStatus | boolean | Show status badge |
+| clickable | boolean | Enable click handler |
+
+### BrandSelector
+
+| Prop | Type | Description |
+|------|------|-------------|
+| brands | Brand[] | Available brands |
+| modelValue | Brand | Selected brand (v-model) |
+| searchable | boolean | Enable search |
+| loading | boolean | Loading state |

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.

package/src/forms/forms.md

@@ -0,0 +1,89 @@
+# Forms Module
+
+Components for form creation and validation.
+
+## Components
+
+### JsonSchemaForm
+
+Dynamic form generator from JSON Schema with AJV validation.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { JsonSchemaForm } from '@htlkg/components/forms';
+
+const formData = ref({});
+const schema = {
+  type: 'object',
+  properties: {
+    name: { type: 'string', title: 'Name' },
+    email: { type: 'string', format: 'email', title: 'Email' },
+    age: { type: 'number', minimum: 0, title: 'Age' },
+  },
+  required: ['name', 'email'],
+};
+
+const uiSchema = {
+  name: { 'ui:placeholder': 'Enter name' },
+  email: { 'ui:widget': 'email' },
+};
+</script>
+
+<template>
+  <JsonSchemaForm 
+    v-model="formData"
+    :schema="schema"
+    :ui-schema="uiSchema"
+    @submit="handleSubmit"
+    @validation-error="handleError"
+  />
+</template>
+```
+
+### DateRange
+
+Date range selector with start/end dates.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { DateRange } from '@htlkg/components/forms';
+
+const dateRange = ref({
+  start: null,
+  end: null,
+});
+</script>
+
+<template>
+  <DateRange 
+    v-model="dateRange"
+    :min-date="minDate"
+    :max-date="maxDate"
+    @search="handleSearch"
+  />
+</template>
+```
+
+## Validation
+
+JsonSchemaForm uses AJV for validation:
+
+```typescript
+const schema = {
+  type: 'object',
+  properties: {
+    password: { 
+      type: 'string', 
+      minLength: 8,
+      pattern: '^(?=.*[A-Z])(?=.*[0-9])',
+    },
+  },
+  errorMessage: {
+    properties: {
+      password: 'Password must be 8+ chars with uppercase and number',
+    },
+  },
+};
+```

package/src/index.ts

@@ -13,8 +13,9 @@ export * from './overlays';
 // Domain components
 export * from './domain';
 
-// Composables
+// Composables (includes page context with setUser, $user, etc.)
 export * from './composables';
 
-// Stores
-export * from './stores';
+// Note: Stores are not re-exported here to avoid naming conflicts
+// Use composables/usePageContext for page-level user state
+// Import from '@htlkg/components/stores' for other store utilities

package/src/navigation/navigation.md

@@ -0,0 +1,80 @@
+# Navigation Module
+
+Components for navigation and page structure.
+
+## Components
+
+### Breadcrumbs
+
+Hierarchical navigation showing current page location.
+
+```vue
+<script setup>
+import { Breadcrumbs } from '@htlkg/components/navigation';
+
+const items = [
+  { label: 'Home', href: '/' },
+  { label: 'Brands', href: '/brands' },
+  { label: 'Brand Name' },
+];
+</script>
+
+<template>
+  <Breadcrumbs :items="items" />
+</template>
+```
+
+### Stepper
+
+Multi-step progress indicator for wizards and forms.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Stepper } from '@htlkg/components/navigation';
+
+const currentStep = ref(0);
+const steps = [
+  { label: 'Account', valid: true },
+  { label: 'Profile', valid: false },
+  { label: 'Review', valid: false },
+];
+</script>
+
+<template>
+  <Stepper 
+    v-model="currentStep" 
+    :steps="steps"
+    @step-change="handleStepChange"
+  />
+</template>
+```
+
+### Tabs
+
+Tabbed interface for organizing content.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Tabs } from '@htlkg/components/navigation';
+
+const activeTab = ref('overview');
+const tabs = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'settings', label: 'Settings', count: 3 },
+  { id: 'users', label: 'Users', disabled: true },
+];
+</script>
+
+<template>
+  <Tabs v-model="activeTab" :tabs="tabs">
+    <template #overview>
+      <OverviewContent />
+    </template>
+    <template #settings>
+      <SettingsContent />
+    </template>
+  </Tabs>
+</template>
+```