@fewangsit/wangsvue-fats 1.0.1-rc.9 → 2.0.0-alpha.0

package/datatable/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../../library/components/datatable/helpers/adjustMenuPosition.helper.ts","../../../../library/components/datatable/helpers/index.ts","../../../../library/components/datatable/DataTable.vue"],"sourcesContent":["export default function (event: Event): void {\n  let el = event.target as HTMLElement;\n\n  if (el.tagName === 'UL') {\n    el = el.parentElement as HTMLElement;\n  }\n\n  const { offsetHeight = 0 } = el;\n  const maxHeight = (window.innerHeight * 90) / 100;\n\n  if (offsetHeight >= maxHeight) {\n    el.style.transform = 'translateY(5vh)'; // Make the menu vertically centered\n  }\n}\n","import adjustMenuPositionHelper from './adjustMenuPosition.helper';\n\nconst isArrayIncluded = (\n  smallArray: string[],\n  largeArray: string[],\n): boolean => {\n  return smallArray.every((element) => largeArray.includes(element));\n};\n\nexport { adjustMenuPositionHelper, isArrayIncluded };\n","<script setup lang=\"ts\" generic=\"T extends Data = Data\">\nimport { cloneDeep } from 'lodash-es';\nimport Paginator, { PageState } from 'primevue/paginator';\nimport { ObjectUtils } from 'primevue/utils';\nimport Simplebar from 'simplebar-vue';\nimport {\n  computed,\n  inject,\n  nextTick,\n  onMounted,\n  onUnmounted,\n  Ref,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport Checkbox from 'lib/components/checkbox/Checkbox.vue';\nimport eventBus, { Events, TableEvent } from 'lib/event-bus';\nimport { useWangsVueConfig } from 'lib/plugins/WangsVue';\nimport { default as useToast, UseToastConfig } from 'lib/utils/baseToast.util';\nimport { formatDate } from 'lib/utils/date.util';\nimport {\n  exportToExcel,\n  normalizeTableData,\n} from 'lib/utils/exportToExcel.util';\nimport { default as mergePropsWithDefaults } from 'lib/utils/mergePropsWithDefaults.util';\nimport {\n  getNestedPropertyValue,\n  setNestedPropertyValue,\n} from 'lib/utils/object.util';\n\nimport {\n  ColumnTogglePreset,\n  CombinedHeaders,\n  Data,\n  DataTableEmits,\n  DataTableProps,\n  DataTableRowReorderEvent,\n  DataTableSlots,\n  FetchListResponse,\n  QueryParams,\n  TableParentHeader,\n  TogglePresetConfirmDialogProps,\n  TreeTableColumns,\n  TreeTableProps,\n} from './DataTable.vue.d';\nimport HeaderCell from './HeaderCell.vue';\nimport { adjustMenuPositionHelper, isArrayIncluded } from './helpers';\nimport MultiRow from './MultiRow.vue';\nimport Animation from '../animation/Animation.vue';\nimport Button from '../button/Button.vue';\nimport CustomColumn from '../customcolumn/CustomColumn.vue';\nimport CustomColumnInstance from '../customcolumn/CustomColumn.vue.d';\nimport DialogConfirm from '../dialogconfirm/DialogConfirm.vue';\nimport { FilterMatchMode } from '../filtercontainer/FilterContainer.vue.d';\nimport Icon from '../icon/Icon.vue';\nimport useLoadingStore from '../loading/store';\nimport Menu from '../menu/Menu.vue';\nimport MenuInstance from '../menu/Menu.vue.d';\nimport Toast from '../toast/Toast.vue';\nimport ToggleSwitch from '../toggleswitch/ToggleSwitch.vue';\n\nimport 'simplebar-vue/dist/simplebar.min.css';\n\ntype TableRow = T & {\n  /**\n   * Define wether the data is a child\n   */\n  childRow?: boolean;\n  /**\n   * Internal\n   */\n  loadingRow?: boolean;\n  noDataRow?: boolean;\n  childRowHeader?: boolean;\n  header?: string;\n};\n\ntype DragableRow = TableRow & { draggable?: boolean; order?: number };\n\nconst props = withDefaults(\n  defineProps<DataTableProps<T> | TreeTableProps<T>>(),\n  {\n    tableName: 'datatable',\n    tableTitle: undefined,\n    lazy: true,\n    options: () => [],\n    dataKey: '_id',\n    disableKey: 'isDefault',\n    selectionType: 'checkbox',\n    customColumn: true,\n    useOption: true,\n    rowHeight: 'fixed',\n  },\n);\n\nconst emit = defineEmits<DataTableEmits<T>>();\nconst singleSelection = defineModel<T>('singleSelection');\ndefineSlots<DataTableSlots<T>>();\n\nconst { defaultProps, locale } = useWangsVueConfig('DataTable');\nconst config = computed(() => mergePropsWithDefaults(props, defaultProps));\n\nconst Preset = inject<Record<string, any>>('preset', {}).datatable;\n\nconst rowsPerPageOptions = [10, 25, 50, 100];\nconst useToastConfig = inject<UseToastConfig>('useToastConfig');\nconst toast = useToast(useToastConfig);\n\nconst { setLoading } = useLoadingStore();\n\nconst dataTableID = ((): string => {\n  const path = window.location.pathname.replace('/', '').split('/').join('-');\n  return `${path}-${props.tableName}`;\n})();\n\nconst currentPageTableData = ref<TableRow[]>(props.data ?? []) as Ref<\n  TableRow[]\n>;\nconst originalTableData = shallowRef<T[]>(props.data ?? []);\n\nconst expandedRows = ref<Record<string, number>>({});\nconst visibleColumns = ref<TreeTableColumns<T>[]>(props.columns);\nconst tableElement = ref<HTMLTableElement>();\n\nconst checkboxSelection = shallowRef<T[]>([]);\nconst rowReorderEventPayload = shallowRef<DataTableRowReorderEvent<T>>();\nconst customColumnKey = shallowRef<number>(0);\nconst loadingTable = shallowRef<boolean>(false);\nconst loadingRows = shallowRef<boolean>(false);\nconst columnKey = shallowRef<number>(0);\nconst tableKey = shallowRef<number>(0);\nconst paginatorKey = shallowRef<number>(0);\nconst dragging = shallowRef<boolean>(false);\nconst draggedRow = shallowRef<DragableRow>();\n\n// Components Instance REFs\nconst customColumn = ref<CustomColumnInstance>();\nconst optionMenu = ref<MenuInstance>();\n\n/**\n * Clone of default row to be used in reorder and toggle visibility without mutating the default rows.\n * This `rowReorderData` ref will store the reordered table rows.\n *\n * On component loaded, we need to load the config to re-order the row list.\n */\nconst rowReorderData = ref<DragableRow[]>([]) as Ref<DragableRow[]>;\n\n// Stores filter from event bus FilterContainer - Handles both static and dynamic table filters\nconst filterQueryParams = shallowRef<QueryParams>({});\nconst searchQueryParam = shallowRef<string>();\nconst tagQueryParam = shallowRef<string>();\nconst sortBy = shallowRef<string>();\nconst sortOrder = shallowRef<-1 | 1>();\nconst tablePage = shallowRef(1);\nconst tableRows = shallowRef(10);\nconst totalRecords = shallowRef(0);\nconst showConfirmToggle = ref<Record<string, boolean>>({});\n\nconst hasChildHeaders = computed<boolean>(\n  () => !!combinedHeaders.value.child.length,\n);\n\n// If there are child headers, all of the other headers will have a rowspan of 2\nconst defaultHeaderRowSpan = computed<number>(() =>\n  hasChildHeaders.value ? 2 : 1,\n);\n\nconst combinedHeaders = computed(() => {\n  const combined: CombinedHeaders<T> = {\n    parent: [],\n    child: [],\n  };\n\n  for (const column of visibleColumns.value) {\n    if (column.parentHeader) {\n      // If the column has a parent header, push it to the child array\n      combined.child.push(column);\n\n      /*\n       * Determine if the column's parent header already\n       * exists in the parent array\n       */\n      const matchParentColumn = combined.parent.find(\n        (parent) => parent.field === column.parentHeader.field,\n      );\n\n      if (!matchParentColumn) {\n        combined.parent.push({\n          ...column.parentHeader,\n          colspan: 1,\n          rowspan: 1,\n        });\n      } else if (matchParentColumn.colspan) {\n        // If parent header already exists, extend its colspan\n        matchParentColumn.colspan++;\n      }\n    } else {\n      /*\n       * If the column doesn't have a parent, push it to the parents array.\n       * Its rowspan will follow defaultHeaderRowSpan.\n       */\n      combined.parent.push(column);\n    }\n  }\n\n  return combined;\n});\n\nconst visibleChildTableColumns = computed(() => {\n  if (props.childTableProps?.columns)\n    return props.childTableProps?.columns.filter((col) => {\n      return (\n        !col.parentColumnsFields ||\n        col.parentColumnsFields?.some((field) =>\n          visibleColumns.value.some((c) => c.field === field),\n        )\n      );\n    });\n\n  return visibleColumns.value;\n});\n\nconst columnsCount = computed(() => {\n  return (\n    visibleColumns.value.length +\n    (props.selectionType === 'checkbox' ? 1 : 0) +\n    (props.useOption ? 1 : 0) +\n    (props.reorderable ? 1 : 0) +\n    (props.treeTable ? 1 : 0)\n  );\n});\n\nconst queryParams = computed<QueryParams>(() => ({\n  ...props.defaultQueryParams,\n  search: props.lazy ? searchQueryParam.value : undefined,\n  tag: props.lazy ? tagQueryParam.value : undefined,\n  page: props.usePaginator ? tablePage.value : undefined,\n  limit: props.usePaginator ? tableRows.value : undefined,\n  sortOrder: sortOrder.value,\n  sortBy: sortBy.value,\n  ...(props.lazy ? filterQueryParams.value : {}), // This will reset the previous filters.\n}));\n\nconst isExpandedAll = computed(() => {\n  const rowsHasChildren = currentPageTableData.value?.filter(\n    (d) => d.children?.length || d.hasChildren,\n  );\n\n  return (\n    rowsHasChildren?.length &&\n    rowsHasChildren.every((data) => expandedRows.value[data[props.dataKey]] > 0)\n  );\n});\n\n/**\n * This computed variable determines whether the selection checkbox on header should be checked or not.\n * When select all data from bulk action, the tableData value should not be updated.\n * The 'isSelectedAll' will be true if either the all current page data is selected or all records selected.\n */\nconst isSelectedAll = computed(() => {\n  if (\n    props.disableAllRows ||\n    !filterParentRowData()?.length ||\n    props.selectionType !== 'checkbox' ||\n    currentPageDisabledRows.value?.length === currentPageTableData.value.length\n  )\n    return false;\n\n  const length = checkboxSelection.value?.length;\n\n  const currentPageDataKey =\n    filterDisabledRows(filterParentRowData())?.map((dt) => dt[props.dataKey]) ??\n    [];\n\n  const selectedDataKey =\n    checkboxSelection.value?.map((dt) => dt[props.dataKey]) ?? [];\n\n  const isCurrentPageAllSelected = selectedDataKey.length\n    ? isArrayIncluded(currentPageDataKey, selectedDataKey)\n    : false;\n\n  const isAllRecordSelected =\n    length > 0 &&\n    length ===\n      (totalRecords.value ?? 0) - (currentPageDisabledRows.value.length ?? 0);\n\n  return isCurrentPageAllSelected || isAllRecordSelected;\n});\n\nconst currentPageDisabledRows = computed(() =>\n  getDisabledRows(props.data ?? filterParentRowData() ?? []),\n);\n\nconst tableIsLoading = computed<boolean>(\n  () => loadingTable.value || props.loading,\n);\n\nconst showCustomColumn = computed<boolean>(\n  () =>\n    props.useOption || props.childTableProps?.useOption || props.customColumn,\n);\n\nconst currentPageHasNoData = computed<boolean>(\n  () => !tableIsLoading.value && !currentPageTableData.value?.length,\n);\n\nconst renderedTableData = computed(() =>\n  (props.lazy && props.fetchFunction) || !props.usePaginator\n    ? currentPageTableData.value\n    : currentPageTableData.value.slice(\n        (tablePage.value - 1) * tableRows.value,\n        tablePage.value * tableRows.value,\n      ),\n);\n\nconst isRowExpanded = (key: string): boolean => {\n  const keys = Object.keys(expandedRows.value);\n  return keys.includes(key);\n};\n\nconst isRowDisabled = (key: string): boolean => {\n  const keys = currentPageDisabledRows.value;\n  return keys.includes(key);\n};\n\nconst isRowSelected = (key: string): boolean => {\n  return props.selectionType === 'checkbox'\n    ? !!checkboxSelection.value.find((data) => data[props.dataKey] === key)\n    : isSingleSelected(key);\n};\n\nconst isSingleSelected = (key: string): boolean => {\n  return key !== undefined && singleSelection.value?.[props.dataKey] === key;\n};\n\nconst filterParentRowData = (rowData?: T[]): T[] => {\n  return (rowData ?? currentPageTableData.value ?? []).filter(\n    (d) => !d.childRowHeader && !d.childRow,\n  );\n};\n\nconst toggleRowExpand = async (\n  data: T,\n  indexOfData: number,\n  isExpanding?: boolean,\n): Promise<void> => {\n  if (isRowExpanded(data[props.dataKey]) === isExpanding) return;\n  const isExpandingRow = isExpanding ?? !isRowExpanded(data[props.dataKey]);\n\n  if (!loadingRows.value) {\n    if (!isExpandingRow) {\n      currentPageTableData.value.splice(\n        indexOfData + 1,\n        expandedRows.value[data[props.dataKey]],\n      );\n      delete expandedRows.value[data[props.dataKey]];\n    } else {\n      expandedRows.value[data[props.dataKey]] = 1;\n\n      let { children } = data;\n\n      if (props.childTableProps?.fetchFunction && data.hasChildren) {\n        try {\n          // Add loading animation row\n          currentPageTableData.value.splice(indexOfData + 1, 0, {\n            childRow: true,\n            loadingRow: true,\n          } as TableRow);\n          loadingRows.value = true;\n          const fetchChildren =\n            await props.childTableProps?.fetchFunction(data);\n          children = fetchChildren?.data;\n        } catch (error) {\n          console.error('🚀 ~ toggleRowExpand ~ error:', error);\n        } finally {\n          // Remove loading animation row\n          currentPageTableData.value.splice(indexOfData + 1, 1);\n          loadingRows.value = false;\n        }\n      }\n\n      if (indexOfData >= 0 && children?.length) {\n        const childrenRows = children.flatMap((child) => {\n          const rowHeader = {\n            childRowHeader: true,\n            header: child.groupHeader,\n          } as TableRow;\n\n          return [\n            rowHeader,\n            ...(child.groupItems ?? []).map(\n              (d) => ({ childRow: true, ...d }) as TableRow,\n            ),\n          ];\n        });\n\n        expandedRows.value[data[props.dataKey]] = childrenRows.length;\n        currentPageTableData.value.splice(\n          indexOfData + 1,\n          0,\n          ...(childrenRows as T[]),\n        );\n      } else {\n        currentPageTableData.value.splice(indexOfData + 1, 0, {\n          childRow: true,\n          noDataRow: true,\n        } as TableRow);\n      }\n    }\n  }\n};\n\nconst toggleAllDataSelection = (e: boolean): void => {\n  if (props.includeCheckDisabledRows) {\n    checkboxSelection.value = e\n      ? (filterParentRowData() as T[])\n      : (filterParentRowData().filter((d) =>\n          isRowDisabled(d[props.dataKey]),\n        ) as T[]);\n  } else {\n    checkboxSelection.value = e\n      ? (filterDisabledRows(filterParentRowData()) as T[])\n      : [];\n  }\n};\n\nconst toggleRowSelection = (event: Event, data: T, index: number): void => {\n  if (\n    !data.childRow &&\n    !data.childRowHeader &&\n    !isRowDisabled(data[props.dataKey]) &&\n    props.selectionType !== 'none'\n  ) {\n    const selected = isRowSelected(data[props.dataKey]);\n\n    emit('rowSelect', { originalEvent: event, data, index });\n\n    if (props.selectionType === 'checkbox') {\n      if (selected)\n        checkboxSelection.value = checkboxSelection.value.filter(\n          (d) => d[props.dataKey] != data[props.dataKey],\n        );\n      else checkboxSelection.value = [...checkboxSelection.value, data];\n    } else {\n      singleSelection.value = selected ? undefined : data;\n    }\n  }\n};\n\nconst toggleExpandAll = async (): Promise<void> => {\n  const isExpanding = !isExpandedAll.value;\n  if (!loadingRows.value) {\n    let index = 0;\n    for (const data of currentPageTableData.value) {\n      if (data.children?.length || data.hasChildren) {\n        await toggleRowExpand(data, index, isExpanding);\n      }\n      index++;\n    }\n  }\n};\n\nconst toggleOptions = async (event: MouseEvent, data: T): Promise<void> => {\n  const eventTarget = event.target as HTMLElement;\n  const button =\n    eventTarget.tagName.toLowerCase() === 'button'\n      ? eventTarget\n      : eventTarget.parentElement;\n\n  emit('toggleOption', data);\n\n  const toggleEvent: Event = {\n    ...event,\n    currentTarget: event.currentTarget ?? event.target,\n  };\n\n  removeClassActive();\n  await nextTick(() => {\n    if (button?.classList.contains('option-button-active')) {\n      removeClassActive();\n    } else {\n      optionMenu.value?.toggle(toggleEvent);\n      removeClassActive();\n      button?.classList.add('option-button-active');\n    }\n  });\n};\n\nconst bodySelectedClass = (\n  col: TreeTableColumns<T>,\n  item: T,\n  dataKey: string,\n): Record<string, boolean> => {\n  const bodyClass: string =\n    (typeof col.bodySelectedClass === 'function'\n      ? col.bodySelectedClass(item)\n      : col.bodySelectedClass) ?? '';\n  return {\n    [bodyClass]: isRowSelected(item[dataKey]),\n  };\n};\n\nconst onColumnTogglePresetChange = async (\n  e: boolean,\n  item: T,\n  col: TreeTableColumns<T>,\n): Promise<void> => {\n  if (!col.preset) return;\n\n  const revertFunction = (): void =>\n    setNestedPropertyValue(\n      item,\n      col.field,\n      !getNestedPropertyValue(item, col.field),\n    );\n\n  if (col.preset.type === 'checkbox')\n    col.preset.onCheck?.(e, item, revertFunction);\n  else if (col.preset.type === 'toggle')\n    col.preset.onToggle?.(e, item, revertFunction);\n\n  if ('confirmDialogProps' in col.preset) {\n    const { showWhen } =\n      getConfirmDialogProps(\n        col.preset as ColumnTogglePreset,\n        item[col.field],\n        item,\n      ) ?? {};\n\n    if (typeof showWhen === 'function') {\n      showConfirmToggle.value[item[props.dataKey] + col.field] = await showWhen(\n        item,\n        e,\n      );\n    } else {\n      showConfirmToggle.value[item[props.dataKey] + col.field] =\n        !showWhen ||\n        (showWhen === 'active' && e) ||\n        (showWhen === 'inactive' && !e);\n    }\n  }\n};\n\nconst draggable = (item: DragableRow): boolean => {\n  return (\n    item.draggable !== false &&\n    !item.childRow &&\n    !item.childRowHeader &&\n    props.reorderable &&\n    !sortOrder.value\n  );\n};\n\n/**\n * Starts the reordering of rows. Fired when user drag an item.\n *\n * @param {DragEvent} event - The drag event object.\n * @param {DragableRow} item - The row item being dragged.\n * @param {number} index - The index of the row item being dragged.\n */\nconst startReorderRow = (\n  event: DragEvent,\n  item: DragableRow,\n  index: number,\n): void => {\n  if (item.childRow || item.childRowHeader) return;\n  expandedRows.value = {}; // Collapse the expanded rows on Row Reorder\n\n  const { dataTransfer } = event;\n  draggedRow.value = item;\n\n  rowReorderEventPayload.value = { item, fromIndex: index };\n\n  if (dataTransfer) {\n    dataTransfer.dropEffect = 'move';\n    dataTransfer.effectAllowed = 'move';\n    dataTransfer.setData('id', item[props.dataKey]);\n    dataTransfer.setData('index', index.toString());\n  }\n};\n\nconst onDragEnter = (e: DragEvent, row: DragableRow): void => {\n  e.preventDefault(); // <-- Still essential\n\n  if (draggable(row)) {\n    const target = e.target as HTMLElement;\n    const dropTargetTr =\n      target.tagName === 'TR' ? target : target.closest('tr');\n\n    dropTargetTr?.classList.add('bg-primary-50');\n    dropTargetTr?.classList.add('dark:bg-grayscale-800');\n    dropTargetTr?.nextElementSibling?.classList.remove('bg-primary-50');\n    dropTargetTr?.nextElementSibling?.classList.remove('dark:bg-grayscale-800');\n    dropTargetTr?.previousElementSibling?.classList.remove('bg-primary-50');\n    dropTargetTr?.previousElementSibling?.classList.remove(\n      'dark:bg-grayscale-800',\n    );\n\n    if (!dropTargetTr || !draggedRow.value) return; // Safety checks\n\n    const draggedIndex = rowReorderData.value.findIndex(\n      (item) => item[props.dataKey] == draggedRow.value?.[props.dataKey],\n    );\n\n    const dropTargetIndex = rowReorderData.value.findIndex(\n      (item) => item[props.dataKey] == dropTargetTr.id,\n    );\n\n    if (draggedIndex !== -1 && dropTargetIndex !== -1) {\n      if (rowReorderEventPayload.value)\n        rowReorderEventPayload.value.toIndex = dropTargetIndex;\n\n      // Swap the items in columnReorderData\n      [\n        rowReorderData.value[draggedIndex],\n        rowReorderData.value[dropTargetIndex],\n      ] = [\n        rowReorderData.value[dropTargetIndex],\n        rowReorderData.value[draggedIndex],\n      ];\n\n      reorderVisibleRow();\n    }\n  }\n};\n\n/**\n * Handles the reordering of columns. Fired when user release the pointer.\n */\nconst onRowReorder = (): void => {\n  if (rowReorderEventPayload.value) {\n    emit('rowReorder', rowReorderEventPayload.value);\n  }\n\n  draggedRow.value = undefined;\n  dragging.value = false;\n  rowReorderEventPayload.value = undefined;\n};\n\nconst reorderVisibleRow = (): void => {\n  currentPageTableData.value = [...rowReorderData.value];\n};\n\n/**\n * Removes the active class from all buttons that have it.\n *\n * @returns {void}\n */\nconst removeClassActive = (): void => {\n  const previouslyClicked = document.querySelectorAll('.option-button-active');\n\n  previouslyClicked?.forEach((el) => {\n    el.classList.remove('option-button-active');\n  });\n};\n\n/**\n * This function resets data table-specific query parameters (page, limit, sortBy, sortOrder) back to their default value.\n */\nconst resetSortQuery = (): void => {\n  sortBy.value = undefined;\n  sortOrder.value = undefined;\n};\n\nconst resetPage = (): void => {\n  tablePage.value = 1;\n  paginatorKey.value++;\n};\n\nconst resetPageLimit = (): void => {\n  tableRows.value = props.rows ?? 10;\n  tablePage.value = 1;\n  paginatorKey.value++;\n};\n\nconst resetDataTableQuery = (): void => {\n  resetPageLimit();\n  resetSortQuery();\n};\n\n/**\n * On Search or Filter:\n * - Resets the table state by increment the key.\n * - Resets data table queryparams to default.\n */\nconst handleFilter = async (): Promise<void> => {\n  tableKey.value++;\n  paginatorKey.value++;\n\n  resetDataTableQuery();\n  if (!props.lazy) applyStaticFilter();\n  else await reFetch();\n};\n\nconst applyStaticFilter = (): void => {\n  let filtered = [...(originalTableData.value ?? [])];\n  const staticFilterMeta = filterQueryParams.value as Record<\n    string,\n    { value: any; matchMode: FilterMatchMode }\n  >;\n\n  const filterMetaEntries = Object.entries(staticFilterMeta);\n\n  try {\n    filtered = filterMetaEntries.length\n      ? filtered.filter((d) => {\n          return filterMetaEntries.every(\n            ([key, { value: filterValue, matchMode }]) => {\n              const fieldValue = getNestedPropertyValue(d, key);\n\n              switch (matchMode) {\n                case 'IN':\n                  // Handle filtering for nested array, e.g field `tags.text`, tags is array, and text is property of each item in tags array\n                  if (Array.isArray(fieldValue) && Array.isArray(filterValue)) {\n                    return fieldValue.some((v) => filterValue.includes(v));\n                  }\n\n                  return Array.isArray(filterValue)\n                    ? filterValue.includes(fieldValue)\n                    : false;\n\n                case 'CONTAINS':\n                  return fieldValue && filterValue\n                    ? fieldValue.toString().toLowerCase().includes(filterValue)\n                    : false;\n\n                case 'EQUALS':\n                  return fieldValue\n                    ? fieldValue.toString() === filterValue.toString()\n                    : false;\n\n                case 'BETWEEN':\n                  // Range number comparation\n                  return Array.isArray(filterValue) && filterValue.length === 2\n                    ? !isNaN(fieldValue) &&\n                        (filterValue[0] == null ||\n                          fieldValue >= filterValue[0]) &&\n                        (filterValue[1] == null || fieldValue <= filterValue[1])\n                    : false;\n\n                case 'DATE_BETWEEN':\n                  // Comparing epoch time\n                  return Array.isArray(filterValue)\n                    ? +new Date(fieldValue) >= filterValue[0] &&\n                        +new Date(fieldValue) <= filterValue[1]\n                    : false;\n\n                default:\n                  return false;\n              }\n            },\n          );\n        })\n      : originalTableData.value;\n  } catch (error) {\n    console.error('🚀 ~ applyStaticFilter ~ error:', error);\n  }\n\n  applyStaticSearch(filtered);\n};\n\nconst applyStaticSearch = (data: T[]): void => {\n  try {\n    currentPageTableData.value = searchQueryParam.value?.length\n      ? data.filter((d) => {\n          const stringData = JSON.stringify(d);\n\n          return (\n            new RegExp(searchQueryParam.value, 'i').test(stringData) ||\n            searchQueryParam.value\n              .split(/\\s+/)\n              .filter(Boolean)\n              .every((word) => {\n                const regex = new RegExp(word, 'i');\n                return regex.test(stringData);\n              })\n          );\n        })\n      : data;\n  } catch (error) {\n    console.error('🚀 ~ applyStaticSearch ~ error:', error);\n  }\n};\n\nconst handlePageChange = async (event: PageState): Promise<void> => {\n  tableRows.value = event.rows;\n  tablePage.value = event.page + 1;\n\n  if (props.lazy && props.fetchFunction) await reFetch();\n\n  /**\n   * Maintain the rows expanded on page change\n   */\n  Object.keys(expandedRows.value).forEach((key) => {\n    const index = currentPageTableData.value.findIndex(\n      (d) => d[props.dataKey] == key,\n    );\n    if (index >= 0)\n      toggleRowExpand(currentPageTableData.value[index], index, true);\n  });\n};\n\nconst sortColumn = (field: string, e: Event): void => {\n  if (field !== sortBy.value) sortOrder.value = undefined; // Resets the sort order when the column sorted changed\n\n  sortBy.value = field;\n\n  if (!sortOrder.value) {\n    sortOrder.value = 1;\n  } else if (sortOrder.value == -1) {\n    sortOrder.value = undefined;\n    sortBy.value = undefined;\n  } else {\n    sortOrder.value = -1;\n  }\n\n  emit('sort', {\n    sortOrder: sortOrder.value,\n    sortField: sortBy.value,\n    originalEvent: e,\n    rows: tableRows.value,\n  });\n\n  resetPage();\n  if (props.lazy && props.fetchFunction) reFetch();\n  else staticSort();\n};\n\nconst staticSort = (): void => {\n  const data = [...(currentPageTableData.value ?? [])];\n  const resolvedFieldData = new Map();\n\n  if (!sortOrder.value) {\n    currentPageTableData.value = originalTableData.value ?? [];\n\n    return;\n  }\n\n  for (const item of data) {\n    resolvedFieldData.set(item, getNestedPropertyValue(item, sortBy.value));\n  }\n\n  const comparer = new Intl.Collator(undefined, { numeric: true }).compare;\n\n  data.sort((data1, data2) => {\n    const value1 = resolvedFieldData.get(data1);\n    const value2 = resolvedFieldData.get(data2);\n\n    return ObjectUtils.sort(value1, value2, sortOrder.value, comparer, -1);\n  });\n\n  currentPageTableData.value = data;\n};\n\nconst reFetch = async (): Promise<void> => {\n  try {\n    loadingTable.value = true;\n    const response = await props.fetchFunction?.(queryParams.value);\n\n    const { data = [], totalRecords: total = 0 } = response?.data ?? {};\n    currentPageTableData.value = data;\n    rowReorderData.value = [...currentPageTableData.value];\n    totalRecords.value = total;\n  } catch (error) {\n    console.error('🚀 ~ reFetch ~ error:', error);\n  } finally {\n    loadingTable.value = false;\n    expandedRows.value = {};\n  }\n};\n\n/**\n * Used in export excel and event listener from Bulk action select all data.\n */\nconst fetchAllData = async (): Promise<FetchListResponse<T>['data']> => {\n  const params = cloneDeep(queryParams.value);\n  delete params.page;\n  delete params.limit;\n\n  const res = await props.fetchFunction?.(params);\n  if (res instanceof Error) throw res;\n  return res?.data ?? { data: [], totalRecords: 0 };\n};\n\n/**\n * Handle select all data from bulk action.\n */\nconst selectAllData = async (event: TableEvent): Promise<void> => {\n  if (props.tableName !== event.tableName) return;\n\n  try {\n    loadingTable.value = true;\n    const { data, totalRecords: total = 0 } = props.lazy\n      ? await fetchAllData()\n      : { totalRecords: (props.data ?? []).length, data: props.data };\n\n    const disabledRows = getDisabledRows(data);\n    checkboxSelection.value = props.includeCheckDisabledRows\n      ? (data ?? [])\n      : filterDisabledRows(data, disabledRows);\n\n    totalRecords.value = total;\n  } finally {\n    loadingTable.value = false;\n  }\n};\n\nconst headerCellPreset = (\n  col?: TreeTableColumns<T>,\n  useCustomColumn?: boolean,\n): Record<string, unknown> => {\n  return Preset?.headercell({\n    props,\n    context: {\n      sortOrder: sortOrder.value,\n      customColumn: useCustomColumn,\n      sorted: sortBy.value && sortBy.value === col?.field,\n      sortable: col?.sortable,\n      isParentHeader: (col as TableParentHeader)?.rowspan === 1,\n    },\n  });\n};\n\nconst handleUpdateTableEvent = (event: TableEvent): void => {\n  if (!event.tableName || event.tableName === props.tableName) {\n    nextTick(() => {\n      columnKey.value++;\n      reFetch();\n    }); // Waits until computed queryparams ready\n  }\n};\n\nconst filterDisabledRows = (\n  tableData: T[] | undefined,\n  rowsIDs?: string[],\n): T[] => {\n  return (tableData ?? []).filter(\n    (data) =>\n      !(rowsIDs ?? currentPageDisabledRows.value).includes(data[props.dataKey]),\n  );\n};\n\nconst getDisabledRows = (tableData: Data[] | undefined = []): string[] => {\n  if (props.disableAllRows) return tableData.map((data) => data[props.dataKey]);\n  return tableData\n    .filter((data) => data[props.disableKey])\n    .map((data) => data[props.dataKey]);\n};\n\nconst downloadExcel = async ({\n  tableName,\n  multiTableNames,\n  fileName,\n  additionalTexts,\n}: Events['data-table:download']): Promise<void> => {\n  if (\n    tableName !== props.tableName &&\n    !multiTableNames?.includes(props.tableName)\n  )\n    return;\n\n  const excelColumns = visibleColumns.value.filter(\n    (col) => col.visible !== false,\n  );\n\n  const includedColumns = excelColumns.filter((col) => !col.excluded);\n  const headers = includedColumns.map(\n    (col) => col.header ?? col.exportHeader ?? '-',\n  );\n\n  const formatFileName = (): string => {\n    return fileName\n      .trim() // Remove extra space\n      .replace(/[^a-zA-Z0-9\\s]/g, '-') // Replace special characters with dash\n      .replace(/\\s+/g, '-') // Replace spaces with dash\n      .replace(/-+/g, '-') // Replace multiple dashes with a single dash\n      .replace(/-+$/, ''); // Remove trailing dash\n  };\n\n  try {\n    // To make sure, 1 time event didn't listened twice\n    eventBus.off('data-table:download', downloadHandler);\n    // To make sure, if property `multiTableNames` is exist in event, then its tableName should equal to DataTable's tableName to call the fetch function and the rest of logics\n    if (tableName === props.tableName) {\n      setLoading(true, locale.downloadingMessage);\n\n      const { data } = props.fetchFunction\n        ? await fetchAllData()\n        : { data: props.data };\n\n      const excelBody = normalizeTableData(data, includedColumns, locale);\n\n      if (multiTableNames?.length) {\n        eventBus.emit('button-download:multi-tables', {\n          table: {\n            headers,\n            data: excelBody,\n            tableName,\n            tableTitle: props.tableTitle,\n          },\n        });\n\n        return;\n      }\n\n      /**\n       * There's a little change to call util `exportToExcel`, just put `{headers, data}` as the value of key \"tables\"\n       */\n      await exportToExcel({\n        tables: [\n          { headers, data: excelBody, tableName, tableTitle: props.tableTitle },\n        ],\n        fileName: formatFileName(),\n        additionalTexts,\n      });\n    }\n  } catch (error) {\n    console.error('🚀 ~ downloadExcel error:', error);\n    toast.removeAllGroups();\n    toast.add({\n      message:\n        locale.excelToastErrorMessage?.replace('{fileName}', fileName) ??\n        'Data gagal diunduh.',\n      error,\n      group: 'download',\n    });\n  } finally {\n    setLoading(false);\n    eventBus.on('data-table:download', downloadHandler); // Re-listen the event when export excel finished\n  }\n};\n\nonMounted(async () => {\n  if (props.fetchFunction) {\n    await reFetch();\n    listenUpdateTableEvent();\n  }\n\n  if (props.selectedData?.length) {\n    checkboxSelection.value = props.selectedData;\n  }\n\n  attachEventListener();\n});\n\nonUnmounted(() => {\n  removeEventListener();\n});\n\nwatch(\n  () => props.columns,\n  () => {\n    if (!props.customColumn) visibleColumns.value = props.columns;\n    customColumnKey.value++;\n  },\n);\n\nwatch(\n  () => props.data,\n  (data) => {\n    currentPageTableData.value = data ?? [];\n    originalTableData.value = data ?? [];\n    rowReorderData.value = data ?? [];\n    eventBus.emit('data-table:updated', { tableName: props.tableName, data });\n    totalRecords.value = data?.length;\n  },\n  {\n    immediate: true,\n  },\n);\n\nwatch(totalRecords, (total) => {\n  updateTotalRecordBulkAction(total);\n});\n\nwatch(\n  checkboxSelection,\n  (newSelectedData: T[]) => {\n    emit('update:selectedData', newSelectedData);\n\n    eventBus.emit('data-table:update-selected-data', {\n      tableName: props.tableName,\n      data: newSelectedData,\n    });\n  },\n  { deep: true },\n);\n\nconst attachEventListener = (): void => {\n  eventBus.on('data-table:apply-filter', applyFilterHandler);\n  eventBus.on('search-table', searchTableHandler);\n  eventBus.on('search-by-scan-table', searchByScanHandler);\n  eventBus.on('data-table:clear-selected-data', clearSelectedDataHandler);\n  eventBus.on('data-table:select-all-record', selectAllRecordHandler);\n  eventBus.on('data-table:download', downloadHandler);\n  eventBus.on('data-table:import-excel-to-json', populateDataTableFromExcel);\n};\n\nconst removeEventListener = (): void => {\n  eventBus.off('data-table:update', handleUpdateTableEvent);\n  eventBus.off('data-table:apply-filter', applyFilterHandler);\n  eventBus.off('search-table', searchTableHandler);\n  eventBus.off('search-by-scan-table', searchByScanHandler);\n  eventBus.off('data-table:clear-selected-data', clearSelectedDataHandler);\n  eventBus.off('data-table:select-all-record', selectAllRecordHandler);\n  eventBus.off('data-table:download', downloadHandler);\n  eventBus.off('data-table:import-excel-to-json', populateDataTableFromExcel);\n};\n\nconst applyFilterHandler = (e: Events['data-table:apply-filter']): void => {\n  if (e.tableName === props.tableName) {\n    filterQueryParams.value = e.filter;\n    handleFilter();\n  }\n};\n\nconst searchTableHandler = (e: Events['search-table']): void => {\n  if (e.tableName === props.tableName) {\n    searchQueryParam.value = e.search;\n    handleFilter();\n  }\n};\n\nconst searchByScanHandler = (e: Events['search-by-scan-table']): void => {\n  if (e.tableName === props.tableName) {\n    tagQueryParam.value = e.tag;\n    handleFilter();\n  }\n};\n\nconst selectAllRecordHandler = (\n  e: Events['data-table:select-all-record'],\n): void => {\n  if (e.tableName === props.tableName) {\n    selectAllData(e);\n  }\n};\n\nconst clearSelectedDataHandler = (\n  e: Events['data-table:clear-selected-data'],\n): void => {\n  if (e.tableName === props.tableName) {\n    checkboxSelection.value = [];\n  }\n};\n\nconst downloadHandler = (e: Events['data-table:download']): void => {\n  if (\n    e.tableName === props.tableName ||\n    e.multiTableNames?.includes(props.tableName)\n  ) {\n    downloadExcel(e);\n  }\n};\n\nconst preventCharInput = (e: KeyboardEvent): void => {\n  if (\n    !(\n      e.code.includes('Digit') ||\n      e.code.includes('Numpad') ||\n      ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.code)\n    )\n  ) {\n    e.preventDefault();\n  }\n};\n\n/**\n * Will be executed when the total record is changed on both lazy and static table\n *\n * @param total\n */\nconst updateTotalRecordBulkAction = (total?: number): void => {\n  const disabledCount = props.includeCheckDisabledRows\n    ? 0\n    : ((currentPageDisabledRows.value.length || props.totalDisabledRows) ?? 0);\n\n  const data = {\n    total: (total ?? totalRecords.value ?? 0) - disabledCount,\n    tableName: props.tableName,\n  };\n\n  eventBus.emit('data-table:update-total-record', data);\n};\n\nconst listenUpdateTableEvent = (): void => {\n  eventBus.on('data-table:update', handleUpdateTableEvent);\n};\n\nconst populateDataTableFromExcel = (\n  e: Events['data-table:import-excel-to-json'],\n): void => {\n  if (e.tableName === props.tableName) {\n    currentPageTableData.value = e.data as T[];\n    rowReorderData.value = [...currentPageTableData.value];\n    totalRecords.value = e.data.length;\n  }\n};\n\nconst getConfirmDialogProps = (\n  preset: ColumnTogglePreset,\n  state: boolean,\n  rowData: any,\n): TogglePresetConfirmDialogProps => {\n  return typeof preset?.confirmDialogProps == 'function'\n    ? preset?.confirmDialogProps(state, rowData)\n    : preset?.confirmDialogProps;\n};\n</script>\n\n<template>\n  <div v-bind=\"Preset?.root\">\n    <div v-bind=\"Preset?.tablewrapper\">\n      <Simplebar\n        :auto-hide=\"false\"\n        v-bind=\"Preset?.scrollheightwrapper({ props })\"\n        class=\"custom-scrollbar [&_.simplebar-track]:bg-grayscale-100 dark:[&_.simplebar-track]:bg-grayscale-800\"\n      >\n        <table\n          :id=\"dataTableID\"\n          v-bind=\"Preset?.table\"\n          :key=\"tableKey\"\n          :ref=\"tableElement\"\n        >\n          <thead v-bind=\"Preset.thead\">\n            <tr v-bind=\"Preset.headerrow\">\n              <th\n                v-if=\"reorderable && !sortOrder\"\n                v-bind=\"Preset.headercellreorderable\"\n                :class=\"headerCellPreset().class\"\n                :rowspan=\"defaultHeaderRowSpan\"\n              />\n\n              <th\n                v-if=\"selectionType === 'checkbox'\"\n                v-bind=\"Preset.headercellcheckbox\"\n                :class=\"headerCellPreset().class\"\n                :rowspan=\"defaultHeaderRowSpan\"\n              >\n                <Checkbox\n                  v-bind=\"\n                    Preset?.headercheckbox({ context: { isSelectedAll } })\n                  \"\n                  :model-value=\"isSelectedAll\"\n                  @update:model-value=\"toggleAllDataSelection(!!$event)\"\n                  binary\n                />\n              </th>\n\n              <th\n                v-if=\"treeTable\"\n                v-bind=\"Preset.headertoggler\"\n                :class=\"headerCellPreset().class\"\n                :rowspan=\"defaultHeaderRowSpan\"\n              >\n                <Button\n                  @click=\"toggleExpandAll\"\n                  v-bind=\"\n                    Preset.headertogglerbutton({ context: { isExpandedAll } })\n                  \"\n                  icon=\"arrow-down\"\n                  text\n                />\n              </th>\n\n              <HeaderCell\n                :key=\"col.field\"\n                v-for=\"col in combinedHeaders.parent\"\n                v-bind=\"headerCellPreset(col)\"\n                :col=\"col\"\n                :default-header-row-span=\"defaultHeaderRowSpan\"\n                :preset=\"Preset\"\n                :sort-by=\"sortBy\"\n                :sort-order=\"sortOrder\"\n                @click=\"col.sortable ? sortColumn(col.field, $event) : null\"\n              />\n\n              <th\n                v-bind=\"headerCellPreset(undefined, props.customColumn)\"\n                :id=\"`column-visibility-toggle-${dataTableID}`\"\n                v-if=\"showCustomColumn\"\n                :rowspan=\"defaultHeaderRowSpan\"\n                @click=\"customColumn?.toggleMenu\"\n              >\n                <Icon\n                  v-if=\"props.customColumn\"\n                  v-bind=\"Preset.columnvisibilityicon\"\n                  icon=\"ellipsis-h\"\n                  tooltip-pos=\"left\"\n                />\n              </th>\n            </tr>\n\n            <tr v-if=\"combinedHeaders.child.length\" v-bind=\"Preset.headerrow\">\n              <HeaderCell\n                :key=\"col.field\"\n                v-for=\"col in combinedHeaders.child\"\n                v-bind=\"headerCellPreset(col)\"\n                :col=\"col\"\n                :default-header-row-span=\"defaultHeaderRowSpan\"\n                :preset=\"Preset\"\n                :sort-by=\"sortBy\"\n                :sort-order=\"sortOrder\"\n                @click=\"col.sortable ? sortColumn(col.field, $event) : null\"\n              />\n            </tr>\n          </thead>\n\n          <tbody v-bind=\"Preset?.tbody\">\n            <template v-if=\"tableIsLoading\">\n              <tr>\n                <td :colspan=\"columnsCount\" v-bind=\"Preset?.bodycell\">\n                  <!-- A duplicate is created to expand the height of the table -->\n                  <template\n                    :key=\"i\"\n                    v-for=\"i in Preset.invisiblelottiewrapper ? 2 : 1\"\n                  >\n                    <div\n                      v-bind=\"\n                        i === 1\n                          ? Preset.loadingtablewrapper\n                          : Preset.invisiblelottiewrapper\n                      \"\n                    >\n                      <Animation\n                        animation=\"loading-table\"\n                        v-bind=\"Preset.loadingtablelottie\"\n                      />\n                    </div>\n                  </template>\n                </td>\n              </tr>\n            </template>\n\n            <template v-else-if=\"currentPageHasNoData\">\n              <tr>\n                <td :colspan=\"columnsCount\" v-bind=\"Preset?.bodycell\">\n                  <!-- A duplicate is created to expand the height of the table -->\n                  <template\n                    :key=\"i\"\n                    v-for=\"i in Preset.invisiblelottiewrapper ? 2 : 1\"\n                  >\n                    <div\n                      v-bind=\"\n                        i === 1\n                          ? Preset.nodatalottiewrapper\n                          : Preset.invisiblelottiewrapper\n                      \"\n                    >\n                      <Animation\n                        animation=\"no-data\"\n                        v-bind=\"Preset.nodatalottie\"\n                      />\n\n                      <span\n                        v-if=\"locale.emptyTableMessage\"\n                        v-bind=\"Preset.nodatamessage\"\n                      >\n                        {{ locale.emptyTableMessage }}\n                      </span>\n                    </div>\n                  </template>\n                </td>\n              </tr>\n            </template>\n\n            <template v-else>\n              <template\n                :key=\"`${index}-${item[dataKey]}`\"\n                v-for=\"(item, index) in renderedTableData\"\n              >\n                <tr\n                  :id=\"item[props.dataKey]\"\n                  :draggable=\"draggable(item)\"\n                  v-bind=\"\n                    Preset?.bodyrow({\n                      context: {\n                        highlighted: item[highlightKey ?? ''],\n                        selected: isRowSelected(item[dataKey]),\n                        disabled: isRowDisabled(item[dataKey]),\n                        draggable: draggable(item),\n                        dragging,\n                      },\n                      props: config,\n                    })\n                  \"\n                  @click=\"toggleRowSelection($event, item, index)\"\n                  @dblclick=\"\n                    treeTable && (item.children?.length || item.hasChildren)\n                      ? toggleRowExpand(item, index)\n                      : $emit('doubleClick', item)\n                  \"\n                  @drag=\"dragging = true\"\n                  @dragenter.prevent=\"onDragEnter($event, item)\"\n                  @dragleave.prevent=\"\"\n                  @dragover.prevent=\"\"\n                  @dragstart=\"startReorderRow($event, item, index)\"\n                  @drop=\"onRowReorder\"\n                >\n                  <td\n                    v-if=\"reorderable && !sortOrder\"\n                    v-bind=\"Preset?.bodycell\"\n                  >\n                    <Icon\n                      v-if=\"!item.childRow && !item.childRowHeader\"\n                      class=\"draggableicon\"\n                      icon=\"dragable-menu\"\n                    />\n                  </td>\n\n                  <td\n                    v-if=\"selectionType === 'checkbox'\"\n                    v-bind=\"Preset?.bodycell\"\n                    @click.stop=\"\"\n                  >\n                    <Checkbox\n                      v-if=\"!item.childRow && !item.childRowHeader\"\n                      v-bind=\"Preset?.rowcheckbox\"\n                      v-model=\"checkboxSelection\"\n                      :binary=\"false\"\n                      :disabled=\"isRowDisabled(item[dataKey])\"\n                      :value=\"item\"\n                    />\n                  </td>\n\n                  <td\n                    v-if=\"treeTable\"\n                    v-bind=\"Preset?.bodycell\"\n                    @click=\"\n                      (e) => {\n                        (item.childRow || item.childRowHeader) &&\n                          e.stopPropagation();\n                      }\n                    \"\n                  >\n                    <Button\n                      v-if=\"item.children?.length || item.hasChildren\"\n                      @click.stop=\"toggleRowExpand(item, index)\"\n                      v-bind=\"\n                        Preset.rowtogglerbutton({\n                          context: {\n                            isRowExpanded: isRowExpanded(item[dataKey]),\n                          },\n                        })\n                      \"\n                      icon=\"arrow-down\"\n                      text\n                    />\n                  </td>\n\n                  <template\n                    v-if=\"\n                      (() =>\n                        item.childRowHeader &&\n                        props.childTableProps?.useColumnsHeader)()\n                    \"\n                  >\n                    <td\n                      :key=\"col.header\"\n                      v-for=\"col in visibleChildTableColumns\"\n                      :class=\"[Preset?.bodycell.class, 'font-semibold text-xs']\"\n                      :colspan=\"col.colspan ?? col.parentColumnsFields?.length\"\n                      @click.stop=\"\"\n                    >\n                      {{ col.header }}\n                    </td>\n\n                    <td\n                      v-if=\"showCustomColumn\"\n                      :class=\"Preset.bodycell.class\"\n                      @click.stop=\"\"\n                    />\n                  </template>\n\n                  <td\n                    v-else-if=\"item.childRowHeader\"\n                    v-bind=\"Preset.childrowheader\"\n                    :class=\"Preset?.bodycell.class\"\n                    :colspan=\"props.columns.length + 1\"\n                    @click.stop=\"\"\n                  >\n                    {{ item.header }}\n                  </td>\n\n                  <td\n                    v-else-if=\"item.loadingRow\"\n                    :class=\"Preset?.bodycell.class\"\n                    :colspan=\"props.columns.length + 1\"\n                    @click.stop=\"\"\n                  >\n                    <div v-bind=\"Preset.loadingtablewrapper\">\n                      <Animation\n                        animation=\"loading-table\"\n                        v-bind=\"Preset.loadingtablelottie\"\n                      />\n                    </div>\n                  </td>\n\n                  <td\n                    v-else-if=\"item.noDataRow\"\n                    :class=\"Preset?.bodycell.class\"\n                    :colspan=\"props.columns.length + 1\"\n                    @click.stop=\"\"\n                  >\n                    <div v-bind=\"Preset.nodatalottiewrapper\">\n                      <Animation\n                        animation=\"no-data\"\n                        v-bind=\"Preset.nodatalottie\"\n                      />\n\n                      <span\n                        v-if=\"locale.emptyTableMessage\"\n                        v-bind=\"Preset.nodatamessage\"\n                      >\n                        {{ locale.emptyTableMessage }}\n                      </span>\n                    </div>\n                  </td>\n\n                  <template v-else>\n                    <td\n                      :key=\"col.field\"\n                      v-for=\"col in item.childRow\n                        ? visibleChildTableColumns\n                        : visibleColumns\"\n                      :class=\"[\n                        {\n                          '!py-0': col.editable,\n                          '!px-0': col.preset?.type === 'multirow',\n                        },\n                        typeof col.bodyClass === 'function'\n                          ? col.bodyClass(item)\n                          : col.bodyClass,\n                        bodySelectedClass(col, item, dataKey),\n                        col.class,\n                      ]\"\n                      :colspan=\"col.colspan ?? col.parentColumnsFields?.length\"\n                      v-bind=\"Preset?.bodycell\"\n                    >\n                      <template\n                        v-if=\"\n                          col.preset?.type === 'toggle' ||\n                          col.preset?.type === 'checkbox'\n                        \"\n                      >\n                        <ToggleSwitch\n                          v-if=\"col.preset?.type === 'toggle'\"\n                          :disabled=\"\n                            isRowDisabled(item[dataKey]) ||\n                            (typeof col.preset?.disabled === 'function'\n                              ? col.preset?.disabled(item)\n                              : col.preset?.disabled)\n                          \"\n                          :input-id=\"item[dataKey]\"\n                          :model-value=\"getNestedPropertyValue(item, col.field)\"\n                          @click.stop=\"\"\n                          @update:model-value=\"\n                            (e) => {\n                              setNestedPropertyValue(item, col.field, e);\n                              onColumnTogglePresetChange(e, item, col);\n                            }\n                          \"\n                        />\n\n                        <Checkbox\n                          v-if=\"col.preset?.type === 'checkbox'\"\n                          :disabled=\"\n                            isRowDisabled(item[dataKey]) ||\n                            (typeof col.preset?.disabled === 'function'\n                              ? col.preset?.disabled(item)\n                              : col.preset?.disabled)\n                          \"\n                          :input-id=\"item[dataKey]\"\n                          :model-value=\"getNestedPropertyValue(item, col.field)\"\n                          @click.stop=\"\"\n                          @update:model-value=\"\n                            (e) => {\n                              setNestedPropertyValue(item, col.field, !!e);\n                              onColumnTogglePresetChange(!!e, item, col);\n                            }\n                          \"\n                          binary\n                        />\n\n                        <DialogConfirm\n                          v-if=\"col.preset?.confirmDialogProps\"\n                          :list=\"[item]\"\n                          :visible=\"\n                            !!showConfirmToggle[item[dataKey] + col.field]\n                          \"\n                          @close=\"\n                            () => {\n                              const revert = () =>\n                                setNestedPropertyValue(\n                                  item,\n                                  col.field,\n                                  !getNestedPropertyValue(item, col.field),\n                                );\n\n                              if (\n                                getConfirmDialogProps(\n                                  col.preset as ColumnTogglePreset,\n                                  item[col.field],\n                                  item,\n                                )?.actionable == false &&\n                                'onConfirm' in col.preset\n                              ) {\n                                col.preset.onConfirm?.(\n                                  item[col.field],\n                                  item,\n                                  revert,\n                                );\n                              } else revert();\n                            }\n                          \"\n                          @confirm=\"\n                            col.preset?.onConfirm?.(item[col.field], item, () =>\n                              setNestedPropertyValue(\n                                item,\n                                col.field,\n                                !getNestedPropertyValue(item, col.field),\n                              ),\n                            )\n                          \"\n                          @update:visible=\"\n                            showConfirmToggle[item[dataKey] + col.field] =\n                              $event\n                          \"\n                          actionable\n                          v-bind=\"\n                            getConfirmDialogProps(\n                              col.preset as ColumnTogglePreset,\n                              item[col.field],\n                              item,\n                            )\n                          \"\n                        />\n                      </template>\n\n                      <template v-else-if=\"col.preset?.type === 'multirow'\">\n                        <MultiRow\n                          :attributes=\"\n                            col.preset?.fieldAttributes?.(item) ?? []\n                          \"\n                        />\n                      </template>\n\n                      <template v-else-if=\"col.editable\">\n                        <span\n                          v-bind=\"Preset.celleditableelement\"\n                          :contenteditable=\"col.editable\"\n                          @blur=\"\n                            (e: Event) => {\n                              $emit('cellEdited', {\n                                item,\n                                field: col.field,\n                                index,\n                                value: (e.target as HTMLElement).innerText,\n                              });\n                            }\n                          \"\n                          @keypress=\"\n                            if (col.numberInputOnly) preventCharInput($event);\n                          \"\n                        >\n                          {{ getNestedPropertyValue(item, col.field) || '-' }}\n                        </span>\n                      </template>\n\n                      <template\n                        v-else-if=\"\n                          col.bodyComponent ||\n                          col.bodyClass ||\n                          col.bodyTemplate ||\n                          col.dateFormatOptions\n                        \"\n                      >\n                        <component\n                          :is=\"col.bodyComponent!(item, index).component\"\n                          v-if=\"col.bodyComponent\"\n                          v-model=\"col.bodyComponent!(item, index).model\"\n                          :disabled=\"col.bodyComponent!(item, index).disabled\"\n                          v-bind=\"col.bodyComponent!(item, index).props\"\n                          v-on=\"\n                            col.bodyComponent!(item, index).events\n                              ? col.bodyComponent!(item, index).events\n                              : {}\n                          \"\n                          @change=\"\n                            col.bodyComponent!(item, index).onChange?.(item)\n                          \"\n                          @click=\"\n                            (e: MouseEvent) => {\n                              if (\n                                col.bodyComponent!(item, index).stop !== false\n                              ) {\n                                e.stopPropagation();\n                              }\n                            }\n                          \"\n                          @update:model-value=\"\n                            col.bodyComponent!(item, index).onChange?.(item)\n                          \"\n                        />\n\n                        <span v-else>\n                          <template v-if=\"col.bodyTemplate\">\n                            {{ col.bodyTemplate?.(item, index) || '-' }}\n                          </template>\n\n                          <template v-else-if=\"col.dateFormatOptions\">\n                            {{\n                              formatDate(\n                                new Date(\n                                  getNestedPropertyValue(\n                                    item,\n                                    col.field,\n                                  ) as string,\n                                ),\n                                col.dateFormatOptions,\n                              )\n                            }}\n                          </template>\n\n                          <template v-else>\n                            {{ getNestedPropertyValue(item, col.field) || '-' }}\n                          </template>\n                        </span>\n                      </template>\n\n                      <template v-else>\n                        {{ getNestedPropertyValue(item, col.field) ?? '-' }}\n                      </template>\n                    </td>\n\n                    <td\n                      v-if=\"showCustomColumn\"\n                      v-bind=\"\n                        Preset?.rowsingleactioncell({\n                          props,\n                          context: {\n                            selected: isRowSelected(item[dataKey]),\n                            highlighted: item[highlightKey ?? ''],\n                          },\n                        })\n                      \"\n                      :class=\"Preset.bodycell.class\"\n                    >\n                      <div\n                        v-if=\"\n                          (!item.childRow && useOption) ||\n                          (item.childRow && props.childTableProps?.useOption)\n                        \"\n                        v-bind=\"Preset.singleactionwrapper\"\n                      >\n                        <Button\n                          :id=\"'button-action-' + item[props.dataKey]\"\n                          v-bind=\"Preset.singleactionbutton({ props })\"\n                          :disabled=\"disableAllRows\"\n                          @click.stop=\"toggleOptions($event, item)\"\n                          icon=\"ellipsis-h\"\n                          outlined\n                          size=\"small\"\n                          tooltip-pos=\"left\"\n                          type=\"button\"\n                        />\n                      </div>\n                    </td>\n                  </template>\n                </tr>\n\n                <slot :item=\"item\" name=\"row-subcontent\" />\n              </template>\n            </template>\n          </tbody>\n        </table>\n      </Simplebar>\n    </div>\n\n    <Paginator\n      :key=\"paginatorKey\"\n      v-if=\"usePaginator\"\n      v-show=\"!tableIsLoading\"\n      v-model:rows=\"tableRows\"\n      v-bind=\"Preset.paginator({ context: { totalRecords } })\"\n      :current-page-report-template=\"\n        totalRecords\n          ? locale.paginationReportFound\n          : locale.paginationReportNotFound\n      \"\n      :rows-per-page-options=\"rowsPerPageOptions\"\n      :total-records=\"totalRecords\"\n      @page=\"handlePageChange\"\n    >\n      <template #firstpagelinkicon>\n        <Icon icon=\"round-keyboard-double-arrow-left\" />\n      </template>\n\n      <template #lastpagelinkicon>\n        <Icon icon=\"round-keyboard-double-arrow-right\" />\n      </template>\n\n      <template #prevpagelinkicon>\n        <Icon icon=\"round-keyboard-arrow-left\" />\n      </template>\n\n      <template #nextpagelinkicon>\n        <Icon icon=\"round-keyboard-arrow-right\" />\n      </template>\n    </Paginator>\n\n    <Menu\n      id=\"single-action-menu\"\n      ref=\"optionMenu\"\n      :model=\"options\"\n      @focus=\"adjustMenuPositionHelper\"\n      append-to=\"body\"\n      auto-z-index\n      popup\n    />\n\n    <CustomColumn\n      :key=\"customColumnKey\"\n      ref=\"customColumn\"\n      v-if=\"props.customColumn\"\n      v-model:visible-columns=\"visibleColumns\"\n      :default-columns=\"columns.filter((col) => col.visible !== false)\"\n      :table-id=\"dataTableID\"\n    />\n\n    <Toast group=\"download\" />\n  </div>\n</template>\n\n<style scoped>\n:deep(.custom-scrollbar) {\n  .simplebar-scrollbar {\n    pointer-events: auto !important; /* Prevent the scrollbar from clicking through */\n  }\n\n  .simplebar-track {\n    pointer-events: auto;\n  }\n\n  .simplebar-scrollbar::before {\n    background: rgb(192, 192, 192); /* Change thumb color */\n    opacity: 1;\n    left: 4px;\n    right: 4px;\n  }\n\n  .simplebar-scrollbar:hover::before,\n  .simplebar-scrollbar:active::before {\n    background: rgb(140, 140, 140);\n  }\n\n  .simplebar-content-wrapper,\n  .simplebar-wrapper {\n    padding-bottom: 12px !important;\n    border-radius: 8px;\n  }\n\n  .simplebar-track.simplebar-vertical {\n    width: 0px; /* Hide vertical scrollbar */\n  }\n\n  .simplebar-track.simplebar-horizontal {\n    height: 10px;\n  }\n}\n</style>\n"],"names":["adjustMenuPositionHelper","event","el","offsetHeight","maxHeight","isArrayIncluded","smallArray","largeArray","element","props","__props","emit","__emit","singleSelection","_useModel","defaultProps","locale","useWangsVueConfig","config","computed","mergePropsWithDefaults","Preset","inject","rowsPerPageOptions","useToastConfig","toast","useToast","setLoading","useLoadingStore","dataTableID","currentPageTableData","ref","originalTableData","shallowRef","expandedRows","visibleColumns","tableElement","checkboxSelection","rowReorderEventPayload","customColumnKey","loadingTable","loadingRows","columnKey","tableKey","paginatorKey","dragging","draggedRow","customColumn","optionMenu","rowReorderData","filterQueryParams","searchQueryParam","tagQueryParam","sortBy","sortOrder","tablePage","tableRows","totalRecords","showConfirmToggle","hasChildHeaders","combinedHeaders","defaultHeaderRowSpan","combined","column","matchParentColumn","parent","visibleChildTableColumns","_a","_b","col","field","columnsCount","queryParams","isExpandedAll","rowsHasChildren","d","data","isSelectedAll","filterParentRowData","currentPageDisabledRows","length","_c","currentPageDataKey","_d","filterDisabledRows","dt","selectedDataKey","_e","isCurrentPageAllSelected","isAllRecordSelected","getDisabledRows","tableIsLoading","showCustomColumn","currentPageHasNoData","renderedTableData","isRowExpanded","key","isRowDisabled","isRowSelected","isSingleSelected","rowData","toggleRowExpand","indexOfData","isExpanding","isExpandingRow","children","fetchChildren","error","childrenRows","child","toggleAllDataSelection","toggleRowSelection","index","selected","toggleExpandAll","toggleOptions","eventTarget","button","toggleEvent","removeClassActive","nextTick","bodySelectedClass","item","dataKey","onColumnTogglePresetChange","revertFunction","setNestedPropertyValue","getNestedPropertyValue","showWhen","getConfirmDialogProps","draggable","startReorderRow","dataTransfer","onDragEnter","row","target","dropTargetTr","draggedIndex","dropTargetIndex","reorderVisibleRow","onRowReorder","previouslyClicked","resetSortQuery","resetPage","resetPageLimit","resetDataTableQuery","handleFilter","reFetch","applyStaticFilter","filtered","staticFilterMeta","filterMetaEntries","filterValue","matchMode","fieldValue","v","applyStaticSearch","stringData","word","handlePageChange","sortColumn","e","staticSort","resolvedFieldData","comparer","data1","data2","value1","value2","ObjectUtils","response","total","fetchAllData","params","cloneDeep","res","selectAllData","disabledRows","headerCellPreset","useCustomColumn","handleUpdateTableEvent","tableData","rowsIDs","downloadExcel","tableName","multiTableNames","fileName","additionalTexts","includedColumns","headers","formatFileName","eventBus","downloadHandler","excelBody","normalizeTableData","exportToExcel","onMounted","listenUpdateTableEvent","attachEventListener","onUnmounted","removeEventListener","watch","updateTotalRecordBulkAction","newSelectedData","applyFilterHandler","searchTableHandler","searchByScanHandler","clearSelectedDataHandler","selectAllRecordHandler","populateDataTableFromExcel","preventCharInput","disabledCount","preset","state"],"mappings":"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"}

package/datepicker/index.d.ts

@@ -1,4 +1,6 @@
-import { DefineComponent } from 'vue';
+import { Slot } from 'vue';
+
+import { ClassComponent } from '../ts-helpers';
 
 /**
  * DatePicker component props
@@ -47,6 +49,15 @@ export type DatePickerEmits = {
   'update:modelValue': [days?: number[]];
 };
 
-declare const DatePicker: DefineComponent<DatePickerProps, DatePickerEmits>;
+export interface DatePickerSlots {
+  header: Slot;
+  footer: Slot;
+}
+
+declare class DatePicker extends ClassComponent<
+  DatePickerProps,
+  DatePickerSlots,
+  DatePickerEmits
+> {}
 
 export default DatePicker;

package/datepicker/index.es.js

@@ -1,13 +1,19 @@
-import { defineComponent as $, onMounted as B, reactive as C, shallowRef as f, computed as D, watch as v, createElementBlock as c, openBlock as d, Fragment as y, createVNode as o, unref as i, withCtx as m, renderList as M, toDisplayString as E } from "vue";
-import { u as N } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { u as S } from "../plugins/basei18n.es.js";
-import { s as F } from "../vendor/primevue/inputtext/inputtext.esm.es.js";
-import { s as P } from "../vendor/primevue/overlaypanel/overlaypanel.esm.es.js";
-import { _ as R } from "../fieldwrapper/FieldWrapper.es.js";
-import T from "../icon/index.es.js";
-import { _ as j } from "../inputgroup/InputGroup.es.js";
-import A from "../validatormessage/index.es.js";
-const I = ["aria-selected", "data-in-range", "onClick"], Q = /* @__PURE__ */ $({
+import { defineComponent as B, onMounted as D, reactive as M, shallowRef as f, computed as N, watch as y, openBlock as s, createElementBlock as i, Fragment as v, createVNode as o, unref as d, withCtx as m, renderSlot as _, createCommentVNode as h, createElementVNode as E, renderList as S, toDisplayString as F } from "vue";
+import { s as P } from "../vendor/primevue/inputtext/inputtext.esm.es.js";
+import { s as R } from "../vendor/primevue/overlaypanel/overlaypanel.esm.es.js";
+import { u as T } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { _ as j } from "../fieldwrapper/index.es.js";
+import { _ as A } from "../icon/index.es.js";
+import { _ as I } from "../inputgroup/index.es.js";
+import { _ as K } from "../validatormessage/index.es.js";
+import { a as L } from "../plugins/basei18n.es.js";
+const O = {
+  key: 0,
+  class: "mb-2.5"
+}, Y = { class: "grid grid-cols-7 grid-rows-[repeat(5,max-content)]" }, q = ["aria-selected", "data-in-range", "onClick"], z = {
+  key: 1,
+  class: "mt-2.5"
+}, te = /* @__PURE__ */ B({
   __name: "DatePicker",
   props: {
     modelValue: {},
@@ -20,12 +26,12 @@ const I = ["aria-selected", "data-in-range", "onClick"], Q = /* @__PURE__ */ $({
     errorMessage: {}
   },
   emits: ["update:modelValue"],
-  setup(_) {
-    const n = _;
-    B(() => {
+  setup(k) {
+    const n = k;
+    D(() => {
       n.useValidator && Object.assign(
         a,
-        N(
+        T(
           n.fieldName ?? "date",
           (e) => {
             var t;
@@ -37,18 +43,18 @@ const I = ["aria-selected", "data-in-range", "onClick"], Q = /* @__PURE__ */ $({
         )
       );
     });
-    const { t: u } = S(), a = C({ value: [] }), s = f(), p = f(), h = D(() => {
+    const { t: u } = L(), a = M({ value: [] }), c = f(), p = f(), b = N(() => {
       const e = a.value[0], t = a.value[1];
       return t && e !== t ? e + " - " + t : e == null ? void 0 : e.toString();
-    }), k = Array.from({ length: 31 }, (e, t) => t + 1), x = (e) => {
+    }), x = Array.from({ length: 31 }, (e, t) => t + 1), V = (e) => {
       var l;
       const t = a.value[0], r = a.value[1];
-      t != null && r != null && t === r ? (a.value[1] = e, (l = s.value) == null || l.hide()) : a.value = [e, e], a.value.sort((b, w) => b - w);
+      t != null && r != null && t === r ? (a.value[1] = e, (l = c.value) == null || l.hide()) : a.value = [e, e], a.value.sort((w, C) => w - C);
     }, g = (e) => {
       var r, l;
       const t = ((r = p.value) == null ? void 0 : r.$el) || null;
-      t && s.value && t.focus(), (l = s.value) == null || l.toggle(e);
-    }, V = (e) => {
+      t && c.value && t.focus(), (l = c.value) == null || l.toggle(e);
+    }, $ = (e) => {
       var t;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -60,7 +66,7 @@ const I = ["aria-selected", "data-in-range", "onClick"], Q = /* @__PURE__ */ $({
         g(l);
       }
     };
-    return v(
+    return y(
       () => n.initialValue,
       () => {
         var e;
@@ -69,72 +75,81 @@ const I = ["aria-selected", "data-in-range", "onClick"], Q = /* @__PURE__ */ $({
       {
         once: !0
       }
-    ), v(
+    ), y(
       () => n.modelValue,
       (e) => {
         a.value = e ?? [];
       }
-    ), (e, t) => (d(), c(y, null, [
-      o(R, {
-        label: e.label ? i(u)(e.label) : void 0,
+    ), (e, t) => (s(), i(v, null, [
+      o(j, {
+        label: e.label ? d(u)(e.label) : void 0,
         mandatory: e.mandatory
       }, {
         default: m(() => [
-          o(j, {
+          o(I, {
             invalid: !!a.errorMessage,
             onClick: g,
             class: "grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1"
           }, {
             default: m(() => [
-              o(i(F), {
+              o(d(P), {
                 ref_key: "inputtext",
                 ref: p,
-                "model-value": h.value,
-                placeholder: i(u)("Select date"),
-                onKeydown: V,
+                "model-value": b.value,
+                placeholder: d(u)("Select date"),
+                onKeydown: $,
                 class: "!p-0",
                 readonly: ""
               }, null, 8, ["model-value", "placeholder"]),
-              o(T, {
-                class: "w-4 h-4 shrink-0 !text-general-500",
+              o(A, {
+                class: "w-4 h-4 shrink-0 !text-general-500 dark:!text-white",
                 "data-ts-section": "inputtrigger",
                 icon: "calendar"
               })
             ]),
             _: 1
           }, 8, ["invalid"]),
-          o(A, {
+          o(K, {
             message: a.errorMessage,
             "data-test": "datepicker-validator-message"
           }, null, 8, ["message"])
         ]),
         _: 1
       }, 8, ["label", "mandatory"]),
-      o(i(P), {
+      o(d(R), {
         ref_key: "panel",
-        ref: s,
+        ref: c,
         pt: {
           content: {
-            class: "grid grid-cols-7 grid-rows-[repeat(5,max-content)] p-6"
+            class: "p-6"
           }
         },
         class: "border-none !mt-0 !shadow-panel"
       }, {
         default: m(() => [
-          (d(!0), c(y, null, M(i(k), (r) => (d(), c("span", {
-            key: r,
-            "aria-selected": a.value.includes(r),
-            "data-in-range": a.value[0] < r && r < a.value[1],
-            onClick: (l) => x(r),
-            class: "text-xs text-general-800 bg-white hover:bg-primary-100 rounded-[20px] [&[data-in-range='true']]:bg-primary-200 [&[data-in-range='true']]:text-general-800 [&[data-in-range='true']]:rounded-[0] [&[aria-selected='true']]:bg-primary-500 [&[aria-selected='true']]:text-white text-center p-2 cursor-pointer",
-            "data-ts-section": "date"
-          }, E(r), 9, I))), 128))
+          e.$slots.header ? (s(), i("div", O, [
+            _(e.$slots, "header")
+          ])) : h("", !0),
+          E("div", Y, [
+            (s(!0), i(v, null, S(d(x), (r) => (s(), i("span", {
+              key: r,
+              "aria-selected": a.value.includes(r),
+              "data-in-range": a.value[0] < r && r < a.value[1],
+              onClick: (l) => V(r),
+              class: "text-xs text-general-800 dark:text-general-50 bg-white dark:bg-grayscale-900 hover:bg-primary-100 dark:hover:bg-general-900 rounded-[20px] [&[data-in-range='true']]:bg-primary-200 dark:[&[data-in-range='true']]:bg-primary-300 [&[data-in-range='true']]:text-general-800 dark:[&[data-in-range='true']]:text-general-50 [&[data-in-range='true']]:rounded-[0] [&[aria-selected='true']]:bg-primary-500 dark:[&[aria-selected='true']]:bg-primary-300 [&[aria-selected='true']]:text-white dark:[&[aria-selected='true']]:text-grayscale-900 text-center p-2 cursor-pointer",
+              "data-ts-section": "date"
+            }, F(r), 9, q))), 128))
+          ]),
+          e.$slots.footer ? (s(), i("div", z, [
+            _(e.$slots, "footer")
+          ])) : h("", !0)
         ]),
-        _: 1
+        _: 3
       }, 512)
     ], 64));
   }
 });
 export {
-  Q as default
+  te as _
 };
+//# sourceMappingURL=index.es.js.map

package/datepicker/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../components/datepicker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport InputText from 'primevue/inputtext';\nimport OverlayPanel from 'primevue/overlaypanel';\nimport { useField } from 'vee-validate';\nimport { computed, onMounted, reactive, shallowRef, watch } from 'vue';\n\nimport FieldWrapper from 'lib/components/fieldwrapper/FieldWrapper.vue';\nimport { FieldValidation } from 'lib/components/form/Form.vue.d';\nimport Icon from 'lib/components/icon/Icon.vue';\nimport InputGroup from 'lib/components/inputgroup/InputGroup.vue';\nimport ValidatorMessage from 'lib/components/validatormessage/ValidatorMessage.vue';\nimport { useI18n } from 'lib/plugins/basei18n';\n\nimport { DatePickerEmits, DatePickerProps } from './DatePicker.vue.d';\n\nconst props = defineProps<DatePickerProps>();\n\ndefineEmits<DatePickerEmits>();\n\nonMounted(() => {\n  if (props.useValidator) {\n    Object.assign(\n      dateRange,\n      useField(\n        props.fieldName ?? 'date',\n        (value?: number[]) => {\n          if (!value?.length && props.mandatory) {\n            return t(props.errorMessage?.empty ?? 'You must pick a date');\n          }\n\n          return true;\n        },\n        {\n          initialValue: props.initialValue ?? [],\n        },\n      ),\n    );\n  }\n});\n\nconst { t } = useI18n();\n\nconst dateRange = reactive<FieldValidation<number[]>>({ value: [] });\nconst panel = shallowRef<OverlayPanel>();\nconst inputtext = shallowRef<InputText>();\n\nconst selectedDateText = computed(() => {\n  const start = dateRange.value[0];\n  const end = dateRange.value[1];\n\n  // If start end end equals, it means only selected a date\n  return end && start !== end ? start + ' - ' + end : start?.toString();\n});\n\nconst dates = Array.from({ length: 31 }, (_, i) => i + 1);\n\nconst selectDate = (date: number): void => {\n  const start = dateRange.value[0];\n  const end = dateRange.value[1];\n\n  if (start != null && end != null && start === end) {\n    // When only one date selected\n    dateRange.value[1] = date;\n    panel.value?.hide(); // Hide on range selection\n  } else {\n    // When already selected range date, resets the date range to current date selected\n    dateRange.value = [date, date];\n  }\n\n  dateRange.value.sort((a, b) => a - b); // Make sure the range has correct order\n};\n\nconst togglePanel = (ev: MouseEvent): void => {\n  const input =\n    (inputtext.value?.['$el' as keyof InputText] as HTMLInputElement) || null;\n\n  if (input && panel.value) {\n    input.focus();\n  }\n\n  panel.value?.toggle(ev);\n};\n\n/**\n * Show panel by pessing enter or space when element focus\n */\nconst onKeydown = (ev: KeyboardEvent): void => {\n  // Opens File select on enter or space key pressed while the element focused\n  if (ev.key === 'Enter' || ev.key === ' ') {\n    ev.preventDefault();\n    const target = (ev.target as HTMLInputElement)?.parentElement;\n    const event: Event = {\n      ...ev,\n      target,\n      currentTarget: target,\n    };\n\n    togglePanel(event as unknown as MouseEvent);\n  }\n};\n\nwatch(\n  () => props.initialValue,\n  () => {\n    if (props.initialValue?.length) dateRange.value = props.initialValue;\n  },\n  {\n    once: true,\n  },\n);\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    dateRange.value = val ?? [];\n  },\n);\n</script>\n\n<template>\n  <FieldWrapper :label=\"label ? t(label) : undefined\" :mandatory=\"mandatory\">\n    <InputGroup\n      :invalid=\"!!dateRange.errorMessage\"\n      @click=\"togglePanel\"\n      class=\"grid grid-cols-[1fr,max-content] !items-center gap-1 px-3 py-1\"\n    >\n      <InputText\n        ref=\"inputtext\"\n        :model-value=\"selectedDateText\"\n        :placeholder=\"t('Select date')\"\n        @keydown=\"onKeydown\"\n        class=\"!p-0\"\n        readonly\n      />\n\n      <Icon\n        class=\"w-4 h-4 shrink-0 !text-general-500 dark:!text-white\"\n        data-ts-section=\"inputtrigger\"\n        icon=\"calendar\"\n      />\n    </InputGroup>\n\n    <ValidatorMessage\n      :message=\"dateRange.errorMessage\"\n      data-test=\"datepicker-validator-message\"\n    />\n  </FieldWrapper>\n\n  <OverlayPanel\n    ref=\"panel\"\n    :pt=\"{\n      content: {\n        class: 'p-6',\n      },\n    }\"\n    class=\"border-none !mt-0 !shadow-panel\"\n  >\n    <div v-if=\"$slots.header\" class=\"mb-2.5\">\n      <slot name=\"header\" />\n    </div>\n\n    <div class=\"grid grid-cols-7 grid-rows-[repeat(5,max-content)]\">\n      <template :key=\"date\" v-for=\"date in dates\">\n        <span\n          :aria-selected=\"dateRange.value.includes(date)\"\n          :data-in-range=\"\n            dateRange.value[0] < date && date < dateRange.value[1]\n          \"\n          @click=\"selectDate(date)\"\n          class=\"text-xs text-general-800 dark:text-general-50 bg-white dark:bg-grayscale-900 hover:bg-primary-100 dark:hover:bg-general-900 rounded-[20px] [&[data-in-range='true']]:bg-primary-200 dark:[&[data-in-range='true']]:bg-primary-300 [&[data-in-range='true']]:text-general-800 dark:[&[data-in-range='true']]:text-general-50 [&[data-in-range='true']]:rounded-[0] [&[aria-selected='true']]:bg-primary-500 dark:[&[aria-selected='true']]:bg-primary-300 [&[aria-selected='true']]:text-white dark:[&[aria-selected='true']]:text-grayscale-900 text-center p-2 cursor-pointer\"\n          data-ts-section=\"date\"\n        >\n          {{ date }}\n        </span>\n      </template>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"mt-2.5\">\n      <slot name=\"footer\" />\n    </div>\n  </OverlayPanel>\n</template>\n"],"names":["props","__props","onMounted","dateRange","useField","value","t","_a","useI18n","reactive","panel","shallowRef","inputtext","selectedDateText","computed","start","end","dates","_","i","selectDate","date","a","b","togglePanel","ev","input","_b","onKeydown","target","event","watch","val"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAMA,IAAQC;AAId,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAM,gBACR,OAAO;AAAA,QACLG;AAAA,QACAC;AAAA,UACEJ,EAAM,aAAa;AAAA,UACnB,CAACK,MAAqB;;AACpB,mBAAI,EAACA,KAAA,QAAAA,EAAO,WAAUL,EAAM,YACnBM,IAAEC,IAAAP,EAAM,iBAAN,gBAAAO,EAAoB,UAAS,sBAAsB,IAGvD;AAAA,UACT;AAAA,UACA;AAAA,YACE,cAAcP,EAAM,gBAAgB,CAAA;AAAA,UAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAGN,CAAC;AAED,UAAM,EAAE,GAAAM,EAAA,IAAME,EAAA,GAERL,IAAYM,EAAoC,EAAE,OAAO,CAAA,GAAI,GAC7DC,IAAQC,EAAA,GACRC,IAAYD,EAAA,GAEZE,IAAmBC,EAAS,MAAM;AACtC,YAAMC,IAAQZ,EAAU,MAAM,CAAC,GACzBa,IAAMb,EAAU,MAAM,CAAC;AAG7B,aAAOa,KAAOD,MAAUC,IAAMD,IAAQ,QAAQC,IAAMD,KAAA,gBAAAA,EAAO;AAAA,IAC7D,CAAC,GAEKE,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACC,GAAGC,MAAMA,IAAI,CAAC,GAElDC,IAAa,CAACC,MAAuB;;AACzC,YAAMN,IAAQZ,EAAU,MAAM,CAAC,GACzBa,IAAMb,EAAU,MAAM,CAAC;AAE7B,MAAIY,KAAS,QAAQC,KAAO,QAAQD,MAAUC,KAE5Cb,EAAU,MAAM,CAAC,IAAIkB,IACrBd,IAAAG,EAAM,UAAN,QAAAH,EAAa,UAGbJ,EAAU,QAAQ,CAACkB,GAAMA,CAAI,GAG/BlB,EAAU,MAAM,KAAK,CAACmB,GAAGC,MAAMD,IAAIC,CAAC;AAAA,IACtC,GAEMC,IAAc,CAACC,MAAyB;;AAC5C,YAAMC,MACHnB,IAAAK,EAAU,UAAV,gBAAAL,EAAkB,QAAkD;AAEvE,MAAImB,KAAShB,EAAM,SACjBgB,EAAM,MAAA,IAGRC,IAAAjB,EAAM,UAAN,QAAAiB,EAAa,OAAOF;AAAA,IACtB,GAKMG,IAAY,CAACH,MAA4B;;AAE7C,UAAIA,EAAG,QAAQ,WAAWA,EAAG,QAAQ,KAAK;AACxC,QAAAA,EAAG,eAAA;AACH,cAAMI,KAAUtB,IAAAkB,EAAG,WAAH,gBAAAlB,EAAgC,eAC1CuB,IAAe;AAAA,UACnB,GAAGL;AAAA,UACH,QAAAI;AAAA,UACA,eAAeA;AAAA,QAAA;AAGjB,QAAAL,EAAYM,CAA8B;AAAA,MAC5C;AAAA,IACF;AAEA,WAAAC;AAAA,MACE,MAAM/B,EAAM;AAAA,MACZ,MAAM;;AACJ,SAAIO,IAAAP,EAAM,iBAAN,QAAAO,EAAoB,WAAQJ,EAAU,QAAQH,EAAM;AAAA,MAC1D;AAAA,MACA;AAAA,QACE,MAAM;AAAA,MAAA;AAAA,IACR,GAGF+B;AAAA,MACE,MAAM/B,EAAM;AAAA,MACZ,CAACgC,MAAQ;AACP,QAAA7B,EAAU,QAAQ6B,KAAO,CAAA;AAAA,MAC3B;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/daypicker/index.d.ts

@@ -1,4 +1,6 @@
-import { DefineComponent } from 'vue';
+import { Slot } from 'vue';
+
+import { ClassComponent } from '../ts-helpers';
 
 /**
  * DayPicker component props
@@ -47,6 +49,15 @@ export type DayPickerEmits = {
   'update:modelValue': [days?: number[]];
 };
 
-declare const DayPicker: DefineComponent<DayPickerProps, DayPickerEmits>;
+export interface DayPickerSlots {
+  header: Slot;
+  footer: Slot;
+}
+
+declare class DayPicker extends ClassComponent<
+  DayPickerProps,
+  DayPickerSlots,
+  DayPickerEmits
+> {}
 
 export default DayPicker;