@htlkg/components 0.0.2 → 0.0.4

package/src/data/Table/Table.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import {
+  type TableItemType,
+  type UiDropdownItemType,
+  type UiModalInterface,
+  type UiTableInterface,
+  uiTable
+} from '@hotelinking/ui';
+
+interface Props {
+  // Data
+  items: TableItemType[];
+  header: UiTableInterface['header'];
+  
+  // 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());
+
+// 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);
+}
+
+function resetSelectedItems() {
+  selectedItemIds.value.clear();
+  updateSelectedItems();
+  emit('update:resetSelected', true);
+}
+
+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 => item.id && 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),
+  getSelectedItemsData: () => props.items.filter(item => item.id && selectedItemIds.value.has(item.id))
+});
+</script>
+
+<template>
+  <uiTable
+    :loading="loading"
+    :header="header"
+    :items="items"
+    :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>