@htlkg/components 0.0.11 → 0.0.13

package/src/data/Table.vue

@@ -1,295 +0,0 @@
-<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>