@htlkg/components 0.0.1

package/src/data/Table.vue

@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import {
+  type TableItemType,
+  type UiDropdownItemType,
+  type UiModalInterface,
+  type UiTableInterface,
+  uiTable
+} from '@hotelinking/ui';
+
+export interface Column {
+  name: string;
+  value: string;
+  tooltip?: string;
+}
+
+interface Props {
+  // Data
+  items: any[];
+  columns: Column[];
+  
+  // State
+  loading?: boolean;
+  currentPage?: number;
+  totalPages?: number;
+  totalItems?: number;
+  pageSize?: number;
+  orderedBy?: string;
+  orderDirection?: 'asc' | 'desc';
+  
+  // Selection
+  actions?: Array<{ name: string; id: string }>;
+  selectAllItemsModal?: UiModalInterface;
+  resetSelected?: boolean;
+  
+  // Filters (now integrated in uiTable)
+  smartFilterCategories?: Array<{
+    id: string;
+    name: string;
+    componentType: 'uiInput' | 'uiSelect';
+    defaultProps: any;
+  }>;
+  filterLiterals?: {
+    filters: string;
+    contains: string;
+    is: string;
+    and: string;
+    or: string;
+    deleteAll: string;
+    filter: string;
+  };
+  filters?: {
+    logicOperator: string;
+    filters: Array<{
+      name: string;
+      label: string;
+      type: 'uiInput' | 'uiSelect';
+      value: string | undefined;
+    }>;
+  };
+  
+  // Additional features
+  tableActionsDropdown?: { items: UiDropdownItemType[]; loading?: boolean };
+  tableActionButtons?: Array<{
+    text: string;
+    id: string;
+    color?: string;
+    size?: string;
+    disabled?: boolean;
+    icon?: any;
+    loading?: boolean;
+  }>;
+  noResults?: {
+    title: string;
+    message: string;
+    actions?: Array<{ action: string; text: string }>;
+    items?: UiDropdownItemType[];
+    select?: UiDropdownItemType;
+  };
+  hiddenColumns?: number[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  currentPage: 1,
+  totalPages: 1,
+  totalItems: 0,
+  pageSize: 10,
+  orderedBy: '',
+  orderDirection: 'asc',
+  resetSelected: false,
+  filterLiterals: () => ({
+    filters: 'Smart Filters',
+    contains: 'contains',
+    is: 'is',
+    and: 'and',
+    or: 'or',
+    deleteAll: 'Delete All',
+    filter: 'Filter'
+  })
+});
+
+const emit = defineEmits<{
+  'update:currentPage': [page: number];
+  'update:pageSize': [size: number];
+  'update:selected': [items: any[]];
+  'update:orderedBy': [key: string];
+  'update:orderDirection': [direction: 'asc' | 'desc'];
+  'update:resetSelected': [value: boolean];
+  'table-action': [data: { action: string; items: Array<string | number> }];
+  'table-action-selected': [item: any];
+  'table-action-button-clicked': [data: { id: string; text: string }];
+  'smart-filters-sent': [filters: any];
+  'smart-filters-cleared': [];
+  'smart-filter-deleted': [index: number];
+  'custom-emit': [data: any];
+  'modal-action': [data: { modal: string; action: string }];
+  'select-all-items': [];
+  'deselect-all-items': [];
+  'no-results-action': [action: string];
+  'no-results-option-selected': [item: any];
+  'columns-visibility-changed': [data: { index: number; hidden: boolean }];
+  'order-by': [data: { value: string; orderDirection: 'asc' | 'desc' }];
+  'change-page': [page: number];
+  'change-page-size': [size: number | string];
+}>();
+
+// State management
+const internalHiddenColumns = ref<number[]>(props.hiddenColumns || []);
+const selectedItemIds = ref<Set<string | number>>(new Set());
+
+// Convert columns to uiTable header format
+const tableHeader = computed<UiTableInterface['header']>(() => 
+  props.columns.map(col => ({
+    name: col.name,
+    value: col.value,
+    tooltip: col.tooltip
+  }))
+);
+
+// Convert items to uiTable format
+const tableItems = computed<TableItemType[]>(() =>
+  props.items.map((item, index) => ({
+    id: item.id || index,
+    disabled: item.disabled || false,
+    row: props.columns.map(col => {
+      const key = col.value || col.name.toLowerCase();
+      const value = item[key];
+      // Return the value as-is if it's already formatted for uiTable
+      if (typeof value === 'object' && value !== null && 'type' in value) {
+        return value;
+      }
+      return String(value ?? '');
+    })
+  }))
+);
+
+// Page size options for uiTable
+const pageSizeOptions = computed(() => [
+  { name: '10', value: '10', active: props.pageSize === 10 },
+  { name: '25', value: '25', active: props.pageSize === 25 },
+  { name: '50', value: '50', active: props.pageSize === 50 },
+  { name: '100', value: '100', active: props.pageSize === 100 }
+]);
+
+// Event handlers
+function handleOrderBy(event: { value: string; orderDirection: 'asc' | 'desc' }) {
+  emit('update:orderedBy', event.value);
+  emit('update:orderDirection', event.orderDirection);
+  emit('order-by', event);
+}
+
+function handleChangePage(page: number) {
+  emit('update:currentPage', page);
+  emit('change-page', page);
+}
+
+function handleChangePageSize(size: number | string) {
+  const numSize = typeof size === 'string' ? Number(size) : size;
+  emit('update:pageSize', numSize);
+  emit('change-page-size', size);
+  emit('update:currentPage', 1);
+}
+
+function handleTableAction(data: { action: string; items: Array<string | number> }) {
+  selectedItemIds.value = new Set(data.items);
+  updateSelectedItems();
+  emit('table-action', data);
+  resetSelectedItems();
+}
+
+function handleTableActionSelected(item: any) {
+  emit('table-action-selected', item);
+}
+
+function handleTableActionButtonClicked(data: { id: string; text: string }) {
+  emit('table-action-button-clicked', data);
+}
+
+function handleSmartFiltersSent(filters: any) {
+  emit('smart-filters-sent', filters);
+}
+
+function handleSmartFiltersCleared() {
+  emit('smart-filters-cleared');
+}
+
+function handleSmartFilterDeleted(index: number) {
+  emit('smart-filter-deleted', index);
+}
+
+function handleCustomEmit(data: any) {
+  emit('custom-emit', data);
+}
+
+function handleColumnsVisibilityChanged(event: { index: number; hidden: boolean }) {
+  if (event.hidden) {
+    if (!internalHiddenColumns.value.includes(event.index)) {
+      internalHiddenColumns.value.push(event.index);
+    }
+  } else {
+    const index = internalHiddenColumns.value.indexOf(event.index);
+    if (index > -1) {
+      internalHiddenColumns.value.splice(index, 1);
+    }
+  }
+  emit('columns-visibility-changed', event);
+}
+
+function handleModalAction(data: { modal: string; action: string }) {
+  emit('modal-action', data);
+}
+
+function handleSelectAllItems() {
+  selectedItemIds.value = new Set(props.items.map(item => item.id));
+  updateSelectedItems();
+  emit('select-all-items');
+}
+
+function handleDeselectAllItems() {
+  selectedItemIds.value.clear();
+  updateSelectedItems();
+  emit('deselect-all-items');
+}
+
+function handleNoResultsAction(action: string) {
+  emit('no-results-action', action);
+}
+
+function handleNoResultsOptionSelected(item: any) {
+  emit('no-results-option-selected', item);
+}
+
+function handleSelectedItemsDeleted() {
+  emit('update:resetSelected', false);
+}
+
+function updateSelectedItems() {
+  const selected = props.items.filter(item => selectedItemIds.value.has(item.id));
+  emit('update:selected', selected);
+}
+
+// Expose methods for parent components
+defineExpose({
+  clearSelection: () => { 
+    emit('update:resetSelected', true);
+    selectedItemIds.value.clear();
+    updateSelectedItems();
+  },
+  getHiddenColumns: () => internalHiddenColumns.value,
+  getSelectedItems: () => Array.from(selectedItemIds.value)
+});
+</script>
+
+<template>
+  <uiTable
+    :loading="loading"
+    :header="tableHeader"
+    :items="tableItems"
+    :ordered-by="orderedBy"
+    :order-direction="orderDirection"
+    :actions="(actions as any)"
+    :hidden-columns="internalHiddenColumns"
+    :reset-selected="resetSelected"
+    :select-all-items-modal="(selectAllItemsModal as any)"
+    :smart-filter-categories="smartFilterCategories"
+    :filter-literals="filterLiterals"
+    :filters="filters"
+    :table-actions-dropdown="tableActionsDropdown"
+    :table-action-buttons="tableActionButtons"
+    :pagination-current="currentPage"
+    :pagination-total="totalPages"
+    :pagination-total-items="totalItems"
+    :page-size-options="pageSizeOptions"
+    :current-page-size="pageSize"
+    :no-results="noResults"
+    @order-by="handleOrderBy"
+    @table-action="handleTableAction"
+    @table-action-selected="handleTableActionSelected"
+    @table-action-button-clicked="handleTableActionButtonClicked"
+    @smart-filters-sent="handleSmartFiltersSent"
+    @smart-filters-cleared="handleSmartFiltersCleared"
+    @smart-filter-deleted="handleSmartFilterDeleted"
+    @change-page="handleChangePage"
+    @change-page-size="handleChangePageSize"
+    @custom-emit="handleCustomEmit"
+    @columns-visibility-changed="handleColumnsVisibilityChanged"
+    @selected-items-deleted="handleSelectedItemsDeleted"
+    @modal-action="handleModalAction"
+    @select-all-items="handleSelectAllItems"
+    @deselect-all-items="handleDeselectAllItems"
+    @no-results-action="handleNoResultsAction"
+    @no-results-option-selected="handleNoResultsOptionSelected"
+  />
+</template>
+
+<style scoped>
+.table-component {
+  width: 100%;
+}
+</style>

package/src/data/index.ts

@@ -0,0 +1,5 @@
+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';

package/src/domain/BrandCard.md

@@ -0,0 +1,81 @@
+# BrandCard Component
+
+A card component for displaying brand information with status indicators. Wraps `@hotelinking/ui`'s `uiCard` component.
+
+## Features
+
+- **Status indicators**: Visual tags for brand status
+- **Logo display**: Brand logo support
+- **Click handling**: Emits click events
+- **Loading state**: Skeleton loading indicator
+
+## Import
+
+```typescript
+import { BrandCard } from '@htlkg/components';
+// or
+import { BrandCard } from '@htlkg/components/domain';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `brand` | `Brand` | required | Brand information |
+| `showStatus` | `boolean` | `true` | Display status tag |
+| `loading` | `boolean` | `false` | Show loading state |
+
+### Brand Interface
+
+```typescript
+interface Brand {
+  id: string;
+  name: string;
+  logo?: string;
+  status?: 'active' | 'inactive' | 'maintenance' | 'suspended';
+  timezone?: string;
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `click` | `Brand` | Brand card clicked |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getBrand()` | Get brand object |
+
+## Usage Examples
+
+```vue
+<script setup>
+import { BrandCard } from '@htlkg/components';
+
+const brand = {
+  id: '1',
+  name: 'Hotel Paradise',
+  logo: 'https://example.com/logo.png',
+  status: 'active',
+  timezone: 'America/New_York'
+};
+
+const handleClick = (brand) => {
+  console.log('Selected brand:', brand);
+};
+</script>
+
+<template>
+  <BrandCard
+    :brand="brand"
+    @click="handleClick"
+  />
+</template>
+```
+
+## Demo
+
+See the [BrandCard demo page](/components/brand-card) for interactive examples.

package/src/domain/BrandCard.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiCard } from '@hotelinking/ui';
+
+interface Brand {
+  id: string;
+  name: string;
+  logo?: string;
+  status?: 'active' | 'inactive' | 'maintenance' | 'suspended';
+  timezone?: string;
+}
+
+interface Props {
+  brand: Brand;
+  showStatus?: boolean;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showStatus: true,
+  loading: false
+});
+
+const emit = defineEmits<{
+  'click': [brand: Brand];
+}>();
+
+// Convert status to tag format
+const tags = computed(() => {
+  if (!props.showStatus || !props.brand.status) return [];
+  
+  const statusMap = {
+    active: { name: 'Active', color: 'green' as const },
+    inactive: { name: 'Inactive', color: 'gray' as const },
+    maintenance: { name: 'Maintenance', color: 'yellow' as const },
+    suspended: { name: 'Suspended', color: 'red' as const }
+  };
+  
+  return [statusMap[props.brand.status]];
+});
+
+// Handle card selection
+function handleCardSelected(data: any) {
+  emit('click', props.brand);
+}
+
+// Expose methods for parent components
+defineExpose({
+  getBrand: () => props.brand
+});
+</script>
+
+<template>
+  <uiCard
+    :id="brand.id"
+    :name="brand.name"
+    :type="brand.timezone || 'Brand'"
+    :logo="brand.logo || ''"
+    :tags="tags"
+    :loading="loading"
+    @card-selected="handleCardSelected"
+  />
+</template>

package/src/domain/BrandSelector.md

@@ -0,0 +1,84 @@
+# BrandSelector Component
+
+A grid-based brand selection component with v-model support.
+
+## Features
+
+- **v-model support**: Two-way binding for selected brand
+- **Grid layout**: Responsive grid display
+- **Loading state**: Loading indicator
+- **Exposed methods**: Programmatic selection control
+
+## Import
+
+```typescript
+import { BrandSelector } from '@htlkg/components';
+// or
+import { BrandSelector } from '@htlkg/components/domain';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `Brand \| null` | `null` | Selected brand (v-model) |
+| `brands` | `Brand[]` | `[]` | Available brands |
+| `loading` | `boolean` | `false` | Show loading state |
+
+### Brand Interface
+
+```typescript
+interface Brand {
+  id: string;
+  name: string;
+  logo?: string;
+  type?: string;
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Brand \| null` | Selection changed |
+| `change` | `Brand \| null` | Selection changed |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getSelected()` | Get selected brand |
+| `clearSelection()` | Clear selection |
+
+## Usage Examples
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { BrandSelector } from '@htlkg/components';
+
+const selectedBrand = ref(null);
+
+const brands = [
+  { id: '1', name: 'Hotel Paradise', logo: '/logo1.png' },
+  { id: '2', name: 'Resort Oasis', logo: '/logo2.png' },
+  { id: '3', name: 'City Inn', logo: '/logo3.png' }
+];
+
+const handleChange = (brand) => {
+  console.log('Selected:', brand);
+};
+</script>
+
+<template>
+  <BrandSelector
+    v-model="selectedBrand"
+    :brands="brands"
+    @change="handleChange"
+  />
+</template>
+```
+
+## Demo
+
+See the [BrandSelector demo page](/components/brand-selector) for interactive examples.

package/src/domain/BrandSelector.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiCard } from '@hotelinking/ui';
+
+interface Brand {
+  id: string;
+  name: string;
+  logo?: string;
+  type?: string;
+}
+
+interface Props {
+  modelValue?: Brand | null;
+  brands?: Brand[];
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  brands: () => [],
+  loading: false
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Brand | null];
+  'change': [value: Brand | null];
+}>();
+
+function selectBrand(data: any) {
+  const brand = props.brands.find(b => b.id === data.id);
+  if (brand) {
+    emit('update:modelValue', brand);
+    emit('change', brand);
+  }
+}
+
+// Expose methods for parent components
+defineExpose({
+  getSelected: () => props.modelValue,
+  clearSelection: () => {
+    emit('update:modelValue', null);
+    emit('change', null);
+  }
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="loading" class="text-center py-4 text-gray-500">
+      Loading brands...
+    </div>
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <uiCard
+        v-for="brand in brands"
+        :key="brand.id"
+        :id="brand.id"
+        :name="brand.name"
+        :type="brand.type || 'Brand'"
+        :logo="brand.logo || ''"
+        :loading="false"
+        @card-selected="selectBrand"
+      />
+    </div>
+  </div>
+</template>

package/src/domain/ProductBadge.md

@@ -0,0 +1,60 @@
+# ProductBadge Component
+
+A badge component for displaying product information with status indicators. Wraps `@hotelinking/ui`'s `uiTag` component.
+
+## Features
+
+- **Status colors**: Visual indicators for enabled/disabled/pending states
+- **Version display**: Optional version number
+- **Loading state**: Skeleton loading indicator
+
+## Import
+
+```typescript
+import { ProductBadge } from '@htlkg/components';
+// or
+import { ProductBadge } from '@htlkg/components/domain';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `product` | `Product` | required | Product information |
+| `showVersion` | `boolean` | `false` | Display version number |
+| `loading` | `boolean` | `false` | Show loading state |
+
+### Product Interface
+
+```typescript
+interface Product {
+  name: string;
+  status?: 'enabled' | 'disabled' | 'pending';
+  version?: string;
+}
+```
+
+## Usage Examples
+
+```vue
+<script setup>
+import { ProductBadge } from '@htlkg/components';
+
+const product = {
+  name: 'Booking Engine',
+  status: 'enabled',
+  version: '2.1.0'
+};
+</script>
+
+<template>
+  <ProductBadge
+    :product="product"
+    :showVersion="true"
+  />
+</template>
+```
+
+## Demo
+
+See the [ProductBadge demo page](/components/product-badge) for interactive examples.