@htlkg/components 0.0.1

package/src/data/DataList.md

@@ -0,0 +1,80 @@
+# DataList Component
+
+A simple list component for displaying collections of items with customizable rendering.
+
+## Features
+
+- **Generic typing**: TypeScript support for any item type
+- **Slot-based rendering**: Custom item templates
+- **Loading state**: Built-in loading indicator
+- **Empty state**: Customizable empty message
+- **Click handling**: Item click events
+
+## Import
+
+```typescript
+import { DataList } from '@htlkg/components';
+// or
+import { DataList } from '@htlkg/components/data';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | required | Array of items to display |
+| `loading` | `boolean` | `false` | Show loading state |
+| `emptyMessage` | `string` | `'No items to display'` | Empty state message |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `item-click` | `T` | Item clicked |
+
+## Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `default` | `{item: T, index: number}` | Custom item template |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getItems()` | Get current items array |
+
+## Usage Examples
+
+### Basic List
+
+```vue
+<script setup>
+import { DataList } from '@htlkg/components';
+
+const items = [
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+  { id: 3, name: 'Item 3' }
+];
+
+const handleClick = (item) => {
+  console.log('Clicked:', item);
+};
+</script>
+
+<template>
+  <DataList
+    :items="items"
+    @item-click="handleClick"
+  >
+    <template #default="{ item }">
+      <div class="font-medium">{{ item.name }}</div>
+    </template>
+  </DataList>
+</template>
+```
+
+## Demo
+
+See the [DataList demo page](/components/data-list) for interactive examples.

package/src/data/DataList.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DataList from './DataList.vue';
+
+describe('DataList Component', () => {
+  const mockItems = [
+    { id: 1, name: 'Item 1', description: 'Description 1' },
+    { id: 2, name: 'Item 2', description: 'Description 2' },
+    { id: 3, name: 'Item 3', description: 'Description 3' }
+  ];
+
+  it('renders with basic props', () => {
+    const wrapper = mount(DataList, {
+      props: {
+        items: mockItems
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders all items', () => {
+    const wrapper = mount(DataList, {
+      props: {
+        items: mockItems
+      }
+    });
+
+    // DataList renders items in divs with cursor-pointer class
+    const items = wrapper.findAll('.cursor-pointer');
+    expect(items.length).toBe(mockItems.length);
+  });
+
+  it('emits item-click event when item is clicked', async () => {
+    const wrapper = mount(DataList, {
+      props: {
+        items: mockItems
+      }
+    });
+
+    const component = wrapper.vm as any;
+    if (component.handleItemClick) {
+      component.handleItemClick(mockItems[0]);
+      expect(wrapper.emitted('item-click')).toBeTruthy();
+      expect(wrapper.emitted('item-click')?.[0]).toEqual([mockItems[0]]);
+    }
+  });
+
+  it('handles empty items array', () => {
+    const wrapper = mount(DataList, {
+      props: {
+        items: []
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders with loading state', () => {
+    const wrapper = mount(DataList, {
+      props: {
+        items: mockItems,
+        loading: true
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/data/DataList.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+interface Props {
+  items: T[];
+  loading?: boolean;
+  emptyMessage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  emptyMessage: 'No items to display'
+});
+
+const emit = defineEmits<{
+  'item-click': [item: T];
+}>();
+
+// Expose methods for parent components
+defineExpose({
+  getItems: () => props.items
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="loading" class="p-8 text-center text-gray-600">
+      Loading...
+    </div>
+    
+    <div v-else-if="items.length === 0" class="p-8 text-center text-gray-600">
+      {{ emptyMessage }}
+    </div>
+    
+    <div v-else class="flex flex-col gap-2">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="p-4 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50 transition-colors"
+        @click="emit('item-click', item)"
+      >
+        <slot :item="item" :index="index">
+          {{ JSON.stringify(item) }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/data/SearchableSelect.md

@@ -0,0 +1,107 @@
+# SearchableSelect Component
+
+A searchable dropdown select component with single and multiple selection support. Wraps `@hotelinking/ui`'s `uiSelect` and `uiSelectMultiple` components.
+
+## Features
+
+- **Single/Multiple selection**: Toggle between modes
+- **Generic typing**: TypeScript support for any option type
+- **Customizable keys**: Configure label and value properties
+- **v-model support**: Two-way binding
+- **Loading state**: Built-in loading indicator
+- **Validation**: Error display and color states
+
+## Import
+
+```typescript
+import { SearchableSelect } from '@htlkg/components';
+// or
+import { SearchableSelect } from '@htlkg/components/data';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `T[]` | required | Available options |
+| `modelValue` | `T \| T[] \| null` | `null` | Selected value(s) (v-model) |
+| `labelKey` | `string` | `'label'` | Property to use for display |
+| `valueKey` | `string` | `'id'` | Property to use for value |
+| `placeholder` | `string` | `'Select an option'` | Placeholder text |
+| `label` | `string` | `''` | Field label |
+| `error` | `string` | `''` | Error message |
+| `color` | `string` | `'gray'` | Field color state |
+| `loading` | `boolean` | `false` | Show loading state |
+| `disabled` | `boolean` | `false` | Disable selection |
+| `requiredText` | `string` | `''` | Required indicator |
+| `multiple` | `boolean` | `false` | Enable multiple selection |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `T \| T[] \| null` | Selection changed |
+| `change` | `T \| T[] \| null` | Selection changed |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getSelected()` | Get current selection |
+
+## Usage Examples
+
+### Single Selection
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { SearchableSelect } from '@htlkg/components';
+
+const selected = ref(null);
+
+const options = [
+  { id: 1, label: 'Option 1' },
+  { id: 2, label: 'Option 2' },
+  { id: 3, label: 'Option 3' }
+];
+</script>
+
+<template>
+  <SearchableSelect
+    v-model="selected"
+    :options="options"
+    label="Choose an option"
+  />
+</template>
+```
+
+### Multiple Selection
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { SearchableSelect } from '@htlkg/components';
+
+const selected = ref([]);
+
+const options = [
+  { id: 1, label: 'Tag 1' },
+  { id: 2, label: 'Tag 2' },
+  { id: 3, label: 'Tag 3' }
+];
+</script>
+
+<template>
+  <SearchableSelect
+    v-model="selected"
+    :options="options"
+    :multiple="true"
+    label="Select tags"
+  />
+</template>
+```
+
+## Demo
+
+See the [SearchableSelect demo page](/components/searchable-select) for interactive examples.

package/src/data/SearchableSelect.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { ref, computed } from 'vue';
+import { uiSelect, uiSelectMultiple } from '@hotelinking/ui';
+
+interface Props {
+  options: T[];
+  modelValue?: T | T[] | null;
+  labelKey?: string;
+  valueKey?: string;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  color?: 'primary' | 'secondary' | 'light' | 'green' | 'yellow' | 'red' | 'black' | 'gray' | 'white';
+  loading?: boolean;
+  disabled?: boolean;
+  requiredText?: string;
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  labelKey: 'label',
+  valueKey: 'id',
+  placeholder: 'Select an option',
+  label: '',
+  error: '',
+  color: 'gray',
+  loading: false,
+  disabled: false,
+  requiredText: '',
+  multiple: false
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: T | T[] | null];
+  'change': [value: T | T[] | null];
+}>();
+
+// Transform options to match uiSelect/uiSelectMultiple format
+const transformedItems = computed(() => {
+  return props.options.map(option => ({
+    id: String(option[props.valueKey]),
+    name: String(option[props.labelKey]),
+    label: option.label ? String(option.label) : undefined
+  }));
+});
+
+// Transform modelValue to match uiSelect format (single selection)
+const selectedItem = computed(() => {
+  if (props.multiple || !props.modelValue) {
+    return { id: '', name: '', label: undefined };
+  }
+  
+  const value = props.modelValue as T;
+  return {
+    id: String(value[props.valueKey]),
+    name: String(value[props.labelKey]),
+    label: value.label ? String(value.label) : undefined
+  };
+});
+
+// Transform modelValue to match uiSelectMultiple format (multiple selection)
+const selectedItems = computed(() => {
+  if (!props.multiple || !props.modelValue) return [];
+  
+  const values = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
+  return values.map(value => ({
+    id: String(value[props.valueKey]),
+    name: String(value[props.labelKey]),
+    label: value.label ? String(value.label) : undefined
+  }));
+});
+
+function handleSelectChange(selected: any) {
+  if (props.multiple) {
+    // Multiple selection: transform back to original format
+    const originalValues = selected.map((item: any) => {
+      return props.options.find(opt => String(opt[props.valueKey]) === item.id);
+    }).filter(Boolean);
+    
+    emit('update:modelValue', originalValues as T[]);
+    emit('change', originalValues as T[]);
+  } else {
+    // Single selection: transform back to original format
+    const originalValue = props.options.find(opt => String(opt[props.valueKey]) === selected.id);
+    emit('update:modelValue', originalValue || null);
+    emit('change', originalValue || null);
+  }
+}
+
+// Expose methods for parent components
+defineExpose({
+  getSelected: () => props.modelValue
+});
+</script>
+
+<template>
+  <uiSelectMultiple
+    v-if="multiple"
+    :items="transformedItems"
+    :label="label"
+    :placeholder="placeholder"
+    :error="error"
+    :color="color"
+    :select="selectedItems"
+    :loading="loading"
+    :disabled="disabled"
+    :required-text="requiredText"
+    @selectChanged="handleSelectChange"
+  />
+  <uiSelect
+    v-else
+    :items="transformedItems"
+    :label="label"
+    :placeholder="placeholder"
+    :error="error"
+    :color="color"
+    :select="selectedItem"
+    :loading="loading"
+    :disabled="disabled"
+    :required-text="requiredText"
+    @selectChanged="handleSelectChange"
+  />
+</template>