@htlkg/components 0.0.2 → 0.0.3

package/src/data/data.md

@@ -0,0 +1,106 @@
+# Data Module
+
+Components for displaying and managing data.
+
+## Components
+
+### Table
+
+Comprehensive data table with pagination, sorting, and filtering.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Table } from '@htlkg/components/data';
+
+const currentPage = ref(1);
+const columns = [
+  { name: 'Name', value: 'name', sortable: true },
+  { name: 'Email', value: 'email' },
+  { name: 'Status', value: 'status' },
+];
+</script>
+
+<template>
+  <Table 
+    v-model:currentPage="currentPage"
+    :items="users"
+    :columns="columns"
+    :loading="loading"
+    selectable
+    @row-click="handleRowClick"
+    @selection-change="handleSelection"
+  />
+</template>
+```
+
+### DataList
+
+Simple list component for displaying collections.
+
+```vue
+<script setup>
+import { DataList } from '@htlkg/components/data';
+</script>
+
+<template>
+  <DataList :items="items" :loading="loading">
+    <template #item="{ item }">
+      <div>{{ item.name }}</div>
+    </template>
+    <template #empty>
+      <p>No items found</p>
+    </template>
+  </DataList>
+</template>
+```
+
+### SearchableSelect
+
+Searchable dropdown with single/multiple selection.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { SearchableSelect } from '@htlkg/components/data';
+
+const selected = ref(null);
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+];
+</script>
+
+<template>
+  <SearchableSelect 
+    v-model="selected"
+    :options="options"
+    placeholder="Select..."
+    searchable
+    clearable
+  />
+</template>
+```
+
+### Chart
+
+Data visualization with multiple chart types.
+
+```vue
+<script setup>
+import { Chart } from '@htlkg/components/data';
+
+const data = {
+  labels: ['Jan', 'Feb', 'Mar'],
+  datasets: [{ data: [10, 20, 30] }],
+};
+</script>
+
+<template>
+  <Chart 
+    type="line"
+    :data="data"
+    :options="{ responsive: true }"
+  />
+</template>
+```

package/src/data/index.ts

@@ -3,3 +3,23 @@ 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';

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/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>
+```

package/src/overlays/overlays.md

@@ -0,0 +1,86 @@
+# Overlays Module
+
+Modal dialogs, notifications, alerts, and drawers.
+
+## Components
+
+### Alert
+
+Visual alerts for information, success, warnings, and errors.
+
+```vue
+<script setup>
+import { Alert } from '@htlkg/components/overlays';
+</script>
+
+<template>
+  <Alert 
+    type="success" 
+    title="Success!" 
+    message="Operation completed."
+    dismissible
+    @dismiss="handleDismiss"
+  />
+</template>
+```
+
+### Modal
+
+Dialog overlays for confirmations, forms, and content.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components/overlays';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Modal v-model:open="isOpen" title="Confirm Action">
+    <p>Are you sure?</p>
+    <template #footer>
+      <button @click="isOpen = false">Cancel</button>
+      <button @click="confirm">Confirm</button>
+    </template>
+  </Modal>
+</template>
+```
+
+### Notification
+
+Toast-style notifications for temporary messages.
+
+```vue
+<script setup>
+import { Notification } from '@htlkg/components/overlays';
+</script>
+
+<template>
+  <Notification 
+    type="info"
+    message="Changes saved"
+    :duration="3000"
+    position="top-right"
+  />
+</template>
+```
+
+### Drawer
+
+Side panel overlays for additional content.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Drawer } from '@htlkg/components/overlays';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Drawer v-model:open="isOpen" position="right" title="Details">
+    <DetailContent />
+  </Drawer>
+</template>
+```

package/src/stores/stores.md

@@ -0,0 +1,82 @@
+# Stores Module
+
+Pinia stores for global component state.
+
+## Available Stores
+
+### useNotificationStore
+
+Global notification state.
+
+```vue
+<script setup>
+import { useNotificationStore } from '@htlkg/components/stores';
+
+const notifications = useNotificationStore();
+
+notifications.add({
+  type: 'success',
+  message: 'Operation completed',
+  duration: 3000,
+});
+
+notifications.remove(id);
+notifications.clear();
+</script>
+```
+
+### useModalStore
+
+Global modal state for managing multiple modals.
+
+```vue
+<script setup>
+import { useModalStore } from '@htlkg/components/stores';
+
+const modals = useModalStore();
+
+modals.open('confirm', { title: 'Confirm', message: 'Are you sure?' });
+modals.close('confirm');
+modals.isOpen('confirm'); // boolean
+</script>
+```
+
+### useLoadingStore
+
+Global loading state.
+
+```vue
+<script setup>
+import { useLoadingStore } from '@htlkg/components/stores';
+
+const loading = useLoadingStore();
+
+loading.start('fetchUsers');
+loading.stop('fetchUsers');
+loading.isLoading('fetchUsers'); // boolean
+loading.anyLoading; // boolean - true if any loading
+</script>
+```
+
+## Store Setup
+
+Register stores in your app:
+
+```typescript
+// main.ts
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+app.use(pinia);
+```
+
+## Astro Integration
+
+Use with nanostores for Astro SSR:
+
+```typescript
+import { useStore } from '@nanostores/vue';
+import { notificationStore } from '@htlkg/components/stores';
+
+const notifications = useStore(notificationStore);
+```