@voicenter-team/voicenter-ui-plus 2.0.10 → 3.0.0

package/library/components/VcTable/VcTable.vue2.mjs

@@ -0,0 +1,1069 @@
+import { defineComponent, useSlots, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, createCommentVNode, normalizeClass, normalizeStyle, unref, Fragment, renderList, withModifiers, createBlock, createTextVNode, toDisplayString, withCtx, withDirectives, vShow } from "vue";
+import { get, cloneDeep } from "lodash-es";
+import _sfc_main$2 from "../VcCheckbox/VcCheckbox.vue.mjs";
+import '../../assets/components/VcSelect/VcSelect.css';import '../../assets/components/VcPagination/VcPagination.css';import '../../assets/components/VcInput/VcInput.css';import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcPopover/VcPopover.css';import '../../assets/components/VcCheckbox/VcCheckbox.css';/* empty css                             */
+import _sfc_main$6 from "../VcCheckboxGroup/VcCheckboxGroup.vue.mjs";
+import _sfc_main$4 from "../VcPopover/VcPopover.vue.mjs";
+/* empty css                           */
+import VcButtonIcon from "../VcButton/VcButtonIcon.vue.mjs";
+import _sfc_main$3 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import _sfc_main$5 from "../VcInput/VcInput.vue.mjs";
+/* empty css                       */
+import { resolveFieldData, convertToUnit } from "../../utils/helpers.mjs";
+import VcLoading from "../VcLoading/VcLoading.vue.mjs";
+import { DEFAULT_PER_PAGE_OPTIONS, DEFAULT_PAGINATION, SORT_TYPE } from "./tableOptions.mjs";
+import _sfc_main$7 from "../VcPagination/VcPagination.vue.mjs";
+/* empty css                                 */
+import _sfc_main$1 from "../VcSelect/VcSelect.vue.mjs";
+/* empty css                         */
+import { tVU } from "../../localization/index.mjs";
+const _hoisted_1 = { class: "vc-table__container" };
+const _hoisted_2 = { class: "vc-table__header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "vc-table__perpage"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "vc-table__header-actions"
+};
+const _hoisted_5 = { class: "vc-table-header" };
+const _hoisted_6 = { class: "selection-col-content" };
+const _hoisted_7 = {
+  key: 1,
+  class: "expandable-td"
+};
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = {
+  key: 1,
+  class: "header-sort-wrapper"
+};
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "vc-table-filter-content" };
+const _hoisted_13 = { class: "vc-table-filter-header" };
+const _hoisted_14 = { class: "vc-table-slot justify-center" };
+const _hoisted_15 = { class: "vc-table-column-header" };
+const _hoisted_16 = { class: "vc-table-body" };
+const _hoisted_17 = ["onClick"];
+const _hoisted_18 = {
+  key: 0,
+  class: "selection-col"
+};
+const _hoisted_19 = { class: "selection-col-content" };
+const _hoisted_20 = {
+  key: 1,
+  class: "expandable-td"
+};
+const _hoisted_21 = ["onClick"];
+const _hoisted_22 = ["data-column"];
+const _hoisted_23 = ["data-column"];
+const _hoisted_24 = {
+  key: 0,
+  class: "vc-table__expandable-row"
+};
+const _hoisted_25 = ["colspan"];
+const _hoisted_26 = { class: "empty-row" };
+const _hoisted_27 = ["colspan"];
+const _hoisted_28 = { class: "vc-table__empty-block" };
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = {
+  key: 0,
+  class: "vc-table-footer"
+};
+const _hoisted_31 = {
+  key: 0,
+  class: "vc-table-pagination"
+};
+const clickDelay = 250;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcTable",
+  props: {
+    columns: { default: () => [] },
+    options: { default: () => [] },
+    showSelection: { type: Boolean },
+    expandableRow: { type: Boolean },
+    rowSelectable: { type: Boolean },
+    loading: { type: Boolean },
+    compact: { type: Boolean },
+    stripe: { type: Boolean },
+    rowUnselect: { type: Boolean },
+    isServerData: { type: Boolean },
+    withPagination: { type: Boolean },
+    lazyLoadingData: { type: Boolean },
+    showActionsColumn: { type: Boolean },
+    externalPaginate: { default: void 0 },
+    sortingOrderDefault: { default: void 0 },
+    filterDefault: { default: void 0 },
+    loaderType: { default: "lds-spinner" },
+    config: { default: () => ({}) },
+    tableClass: { default: "" },
+    wrapperClass: { default: "" },
+    emptyDataText: { default: "" },
+    perPageText: { default: "" },
+    pagesLabel: { default: "" },
+    rowClassName: { type: [String, Function], default: void 0 },
+    actionsColumn: { default: () => ({
+      width: "120px",
+      columnName: "Actions",
+      icon: "vc-icon-edit-pencil",
+      minWidth: "100px",
+      maxWidth: "auto"
+    }) },
+    perPageOptions: { default: () => DEFAULT_PER_PAGE_OPTIONS },
+    fixedHeader: { type: Boolean },
+    fixedActions: { type: Boolean, default: false },
+    useTeleportedPopovers: { type: Boolean, default: true },
+    height: { default: 480 },
+    filterOptions: { default: void 0 }
+  },
+  emits: ["on-row-click", "on-row-dbclick", "handle-selection-change", "handle-sort", "handle-filter", "update:externalPaginate", "update:currentPage", "load-more", "change-select-all", "click-per-page-option", "update:perPage"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a, _b;
+    const slots = useSlots();
+    const props = __props;
+    const emit = __emit;
+    let clickTimer = null;
+    const loadMoreTrigger = ref();
+    const headerCheckedRef = ref();
+    const localOptions = ref([]);
+    const observer = ref(null);
+    const dir = ref("ltr");
+    const opened = ref([]);
+    const selectedRow = ref(void 0);
+    const sortBy = ref(((_a = props.sortingOrderDefault) == null ? void 0 : _a.columnName) || "");
+    const sortOrder = ref(((_b = props.sortingOrderDefault) == null ? void 0 : _b.order) || "");
+    const customSortFunction = ref(void 0);
+    const localPagination = ref({
+      ...DEFAULT_PAGINATION,
+      perPage: props.perPageOptions ? props.perPageOptions[0] : DEFAULT_PAGINATION.perPage
+    });
+    const viewObserver = ref(void 0);
+    const columnFilters = ref(props.filterDefault ? { ...props.filterDefault } : {});
+    const filterSearchQueries = ref({});
+    const emptyDataMessage = computed(() => {
+      return props.emptyDataText ? props.emptyDataText : tVU.t("voicenterUi.table.no.data");
+    });
+    const localOptionsEnabled = computed(() => {
+      return localOptions.value.filter((option) => !optionDisabled(option));
+    });
+    const actionsColumnConfig = computed(() => {
+      return { ...props.actionsColumn };
+    });
+    const actionsColumnHeaderClasses = computed(() => {
+      let classes = "vc-table-actions-column-header";
+      if (props.fixedActions) {
+        classes += " vc-table-actions-column-header--fixed";
+      }
+      if (actionsColumnConfig.value.classes) {
+        classes += ` ${actionsColumnConfig.value.classes}`;
+      }
+      return classes;
+    });
+    const actionsColumnClasses = computed(() => {
+      let classes = "vc-table-actions-column";
+      if (props.fixedActions) {
+        classes += " vc-table-actions-column--fixed";
+      }
+      return classes;
+    });
+    const actionsColumnStyles = computed(() => {
+      if (props.showActionsColumn) {
+        const { width, minWidth, maxWidth } = props.actionsColumn;
+        return setColumnStyles({
+          width,
+          minWidth,
+          maxWidth
+        });
+      }
+      return {};
+    });
+    const hasFooter = computed(() => {
+      return !!(props.withPagination || slots["table-footer"]);
+    });
+    const isPaginationView = computed(() => {
+      return !!(props.withPagination && tableOptions.value.length);
+    });
+    const visibleOptions = computed(() => {
+      if (!props.withPagination || props.isServerData) {
+        return tableOptions.value;
+      }
+      return tableOptions.value.slice(start.value, end.value);
+    });
+    const pagination = computed(() => {
+      if (props.externalPaginate) {
+        return { ...props.externalPaginate };
+      } else {
+        return { ...localPagination.value };
+      }
+    });
+    const paginationCurrentPageModel = computed({
+      get() {
+        if (props.externalPaginate) {
+          return props.externalPaginate.currentPage;
+        } else {
+          return localPagination.value.currentPage;
+        }
+      },
+      set(val) {
+        if (!props.externalPaginate) {
+          localPagination.value.currentPage = val;
+        }
+        emit("update:currentPage", {
+          ...pagination.value,
+          currentPage: val
+        });
+      }
+    });
+    const paginationPerPageModel = computed({
+      get() {
+        if (props.externalPaginate) {
+          return props.externalPaginate.perPage;
+        } else {
+          return localPagination.value.perPage;
+        }
+      },
+      set(val) {
+        if (!props.externalPaginate) {
+          localPagination.value.perPage = val;
+          if (localPagination.value.currentPage !== 1) {
+            localPagination.value.currentPage = 1;
+          }
+        } else {
+          const updatedPagination = {
+            ...props.externalPaginate,
+            perPage: val
+          };
+          if (props.externalPaginate.currentPage !== 1) {
+            updatedPagination.currentPage = 1;
+          }
+          emit("update:perPage", updatedPagination);
+        }
+      }
+    });
+    const start = computed(() => {
+      return Math.max(0, paginationCurrentPageModel.value * paginationPerPageModel.value - paginationPerPageModel.value);
+    });
+    const end = computed(() => {
+      return start.value + paginationPerPageModel.value;
+    });
+    const setPositionForTooltip = computed(() => {
+      var _a2, _b2;
+      const styling = {
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+      const height = (_a2 = headerCheckedRef.value) == null ? void 0 : _a2.offsetHeight;
+      const align = dir.value === "ltr" ? "left" : "right";
+      const _checkBox = (_b2 = headerCheckedRef.value) == null ? void 0 : _b2.querySelector(".vc-checkbox .el-checkbox__input");
+      if (height) {
+        styling.height = `${height - 6}px`;
+      }
+      if (_checkBox instanceof HTMLElement) {
+        styling[align] = `${_checkBox.offsetLeft + _checkBox.offsetWidth + 14}px`;
+      }
+      return styling;
+    });
+    const colspanNumber = computed(() => {
+      var _a2;
+      let numberOfColumnSpan = (_a2 = props.columns) == null ? void 0 : _a2.length;
+      if (props.showSelection) {
+        numberOfColumnSpan++;
+      }
+      if (props.expandableRow) {
+        numberOfColumnSpan++;
+      }
+      if (props.showActionsColumn) {
+        numberOfColumnSpan++;
+      }
+      return numberOfColumnSpan;
+    });
+    const headerChecked = computed({
+      get() {
+        return !!(localOptionsEnabled.value.length && localOptionsEnabled.value.every((el) => !!el.selected));
+      },
+      set(val) {
+        return val;
+      }
+    });
+    const isIndeterminate = computed(() => {
+      return localOptionsEnabled.value.some((el) => !el.selected) && localOptionsEnabled.value.some((el) => el.selected);
+    });
+    const selectedOptions = computed(() => {
+      if (!props.showSelection) {
+        return [];
+      }
+      return localOptions.value.filter((i) => i.selected);
+    });
+    const filteredOptions = computed(() => {
+      var _a2;
+      if (props.isServerData) {
+        return [...localOptions.value];
+      }
+      const activeFilters = [];
+      for (const [columnKey, selectedValues] of Object.entries(columnFilters.value)) {
+        if (!selectedValues || selectedValues.length === 0) continue;
+        const column = props.columns.find((c) => c.columnItemKey === columnKey);
+        if (!column || !((_a2 = column.filterableConfig) == null ? void 0 : _a2.enabled)) continue;
+        const key = column.rowItemLabelKey || columnKey;
+        activeFilters.push({
+          key,
+          valuesSet: new Set(selectedValues)
+        });
+      }
+      if (activeFilters.length === 0) {
+        return [...localOptions.value];
+      }
+      return localOptions.value.filter((option) => {
+        return activeFilters.every(({ key, valuesSet }) => {
+          const rawValue = resolveFieldData(option, key);
+          const value = typeof rawValue === "string" || typeof rawValue === "number" ? rawValue : String(rawValue);
+          return valuesSet.has(value);
+        });
+      });
+    });
+    const dataValuesMap = computed(() => {
+      const map = {};
+      props.columns.forEach((column) => {
+        var _a2;
+        if (!((_a2 = column.filterableConfig) == null ? void 0 : _a2.enabled)) return;
+        const key = column.rowItemLabelKey || column.columnItemKey;
+        const columnKey = column.columnItemKey;
+        const valueToLabel = /* @__PURE__ */ new Map();
+        props.options.forEach((option) => {
+          const rawValue = resolveFieldData(option, key);
+          if (rawValue === null || rawValue === void 0 || rawValue === "") return;
+          const value = typeof rawValue === "string" || typeof rawValue === "number" ? rawValue : String(rawValue);
+          if (valueToLabel.has(value)) return;
+          let label;
+          if (column.format) {
+            const formatted = column.format(option);
+            label = String(formatted ?? value);
+          } else {
+            label = String(value);
+          }
+          valueToLabel.set(value, label);
+        });
+        map[columnKey] = valueToLabel;
+      });
+      return map;
+    });
+    const uniqueColumnValuesMap = computed(() => {
+      const map = {};
+      props.columns.forEach((column) => {
+        var _a2, _b2;
+        if (!((_a2 = column.filterableConfig) == null ? void 0 : _a2.enabled)) return;
+        const columnKey = column.columnItemKey;
+        const valueToLabel = new Map(dataValuesMap.value[columnKey] || []);
+        const selectedValues = columnFilters.value[columnKey] || [];
+        selectedValues.forEach((val) => {
+          const value = typeof val === "string" || typeof val === "number" ? val : String(val);
+          if (!valueToLabel.has(value)) {
+            valueToLabel.set(value, String(value));
+          }
+        });
+        const defaultOptions = ((_b2 = props.filterOptions) == null ? void 0 : _b2[columnKey]) || [];
+        defaultOptions.forEach((val) => {
+          if (!valueToLabel.has(val)) {
+            valueToLabel.set(val, String(val));
+          }
+        });
+        const options = Array.from(valueToLabel.entries()).map(([value, label]) => ({
+          value,
+          label
+        })).sort((a, b) => a.label.localeCompare(b.label, void 0, { numeric: true }));
+        map[columnKey] = options;
+      });
+      return map;
+    });
+    const filterCheckboxConfig = {
+      valueKey: "value",
+      labelKey: "label"
+    };
+    const tableOptions = computed(() => {
+      const baseOptions = filteredOptions.value;
+      if (!sortBy.value || !sortOrder.value) {
+        return [...baseOptions];
+      } else {
+        const _options = [...baseOptions];
+        const sortFn = customSortFunction.value;
+        if (!sortFn) {
+          return _options.sort(defaultSortMethod);
+        } else {
+          return _options.sort((a, b) => {
+            const val1 = sortOrder.value === "desc" ? b : a;
+            const val2 = sortOrder.value === "desc" ? a : b;
+            return sortFn(val1, val2);
+          });
+        }
+      }
+    });
+    const pagesLabelText = computed(() => {
+      return props.pagesLabel ? props.pagesLabel : tVU.t("voicenterUi.table.pagination.pages");
+    });
+    function optionDisabled(option) {
+      const optionDisabledKey = props.config.disabledKey;
+      if (option !== null && typeof option === "object" && optionDisabledKey !== void 0) {
+        return Boolean(get(option, optionDisabledKey, false));
+      }
+      return false;
+    }
+    function defaultSortMethod(data1, data2) {
+      const v1 = resolveFieldData(data1, sortBy.value);
+      const v2 = resolveFieldData(data2, sortBy.value);
+      let result = null;
+      if (v1 == null && v2 != null) {
+        result = -1;
+      } else if (v1 != null && v2 == null) {
+        result = 1;
+      } else if (v1 == null && v2 == null) {
+        result = 0;
+      } else if (typeof v1 === "string" && typeof v2 === "string") {
+        result = v1.localeCompare(v2, void 0, { numeric: true });
+      } else if ((typeof v1 === "number" || typeof v1 === "string") && (typeof v2 === "number" || typeof v2 === "string")) {
+        result = v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
+      } else {
+        result = 0;
+      }
+      return result * SORT_TYPE[sortOrder.value];
+    }
+    function onPerPageOptionClick(option) {
+      emit("click-per-page-option", option);
+    }
+    function isActiveSortColumn(column, order) {
+      if (!isSortableColumn(column) || order !== sortOrder.value) {
+        return "";
+      }
+      if (column.sortBy === sortBy.value) {
+        return "text-active-elements";
+      }
+    }
+    function isSortableColumn(column) {
+      return !!(column.sortBy || column.sortableFunction);
+    }
+    function isFilterableColumn(column) {
+      var _a2;
+      return !!((_a2 = column.filterableConfig) == null ? void 0 : _a2.enabled);
+    }
+    function getUniqueColumnValues(column) {
+      return uniqueColumnValuesMap.value[column.columnItemKey] || [];
+    }
+    function getColumnFilterValues(column) {
+      return columnFilters.value[column.columnItemKey] || [];
+    }
+    function handleFilterChange(column, values) {
+      const columnKey = column.columnItemKey;
+      columnFilters.value = {
+        ...columnFilters.value,
+        [columnKey]: values
+      };
+      if (!props.isServerData && !props.externalPaginate) {
+        localPagination.value.currentPage = 1;
+      }
+      const allFilters = {};
+      for (const [key, vals] of Object.entries(columnFilters.value)) {
+        if (vals && vals.length > 0) {
+          allFilters[key] = vals;
+        }
+      }
+      emit("handle-filter", {
+        columnKey,
+        values,
+        allFilters
+      });
+    }
+    function isColumnFiltered(column) {
+      const values = columnFilters.value[column.columnItemKey];
+      return !!(values && values.length > 0);
+    }
+    function isSearchableFilter(column) {
+      var _a2;
+      return !!((_a2 = column.filterableConfig) == null ? void 0 : _a2.searchable);
+    }
+    function getFilterSearchQuery(column) {
+      return filterSearchQueries.value[column.columnItemKey] || "";
+    }
+    function setFilterSearchQuery(column, query) {
+      filterSearchQueries.value = {
+        ...filterSearchQueries.value,
+        [column.columnItemKey]: query
+      };
+    }
+    function clearFilterSearchQuery(column) {
+      const key = column.columnItemKey;
+      if (filterSearchQueries.value[key]) {
+        const rest = {};
+        for (const [k, v] of Object.entries(filterSearchQueries.value)) {
+          if (k !== key) {
+            rest[k] = v;
+          }
+        }
+        filterSearchQueries.value = rest;
+      }
+    }
+    function getFilteredColumnValues(column) {
+      const allOptions = getUniqueColumnValues(column);
+      const query = getFilterSearchQuery(column).trim().toLowerCase();
+      if (!query) return allOptions;
+      return allOptions.filter((option) => option.label.toLowerCase().includes(query));
+    }
+    function getFilterModelValue(column) {
+      const currentValues = getColumnFilterValues(column);
+      const query = getFilterSearchQuery(column).trim().toLowerCase();
+      if (!isSearchableFilter(column) || !query) return currentValues;
+      const visibleValues = new Set(getFilteredColumnValues(column).map((o) => o.value));
+      return currentValues.filter((v) => visibleValues.has(v));
+    }
+    function onFilterModelUpdate(column, newValues) {
+      const query = getFilterSearchQuery(column).trim().toLowerCase();
+      if (!isSearchableFilter(column) || !query) {
+        handleFilterChange(column, newValues);
+        return;
+      }
+      const currentValues = getColumnFilterValues(column);
+      const visibleValues = new Set(getFilteredColumnValues(column).map((o) => o.value));
+      const hiddenSelected = currentValues.filter((v) => !visibleValues.has(v));
+      const merged = [.../* @__PURE__ */ new Set([...hiddenSelected, ...newValues])];
+      handleFilterChange(column, merged);
+    }
+    function handleSortClick(column, order = "") {
+      if (isSortableColumn(column)) {
+        const oldSort = sortBy.value;
+        sortBy.value = column.sortBy || column.columnItemKey;
+        customSortFunction.value = column.sortableFunction;
+        if (order) {
+          sortOrder.value = order;
+        } else {
+          if (oldSort !== sortBy.value) {
+            sortOrder.value = "";
+          }
+          toggleOrder();
+        }
+        emit("handle-sort", {
+          sortBy: sortBy.value,
+          order: sortOrder.value
+        });
+      }
+    }
+    function toggleOrder() {
+      if (sortOrder.value === "asc") {
+        sortOrder.value = "desc";
+      } else if (sortOrder.value === "desc") {
+        sortOrder.value = "";
+      } else {
+        sortOrder.value = "asc";
+      }
+    }
+    function onRowClick(option, index) {
+      selectedRow.value = index;
+      if (props.rowUnselect) {
+        selectedRow.value = selectedRow.value === void 0 ? index : void 0;
+      }
+      emit("on-row-click", option, index);
+    }
+    function onRowDbClick(option, index) {
+      emit("on-row-dbclick", option, index);
+    }
+    function handleRowClick(option, index) {
+      if (clickTimer === null) {
+        clickTimer = setTimeout(
+          () => {
+            onRowClick(option, index);
+            clickTimer = null;
+          },
+          clickDelay
+        );
+      } else {
+        clearTimeout(clickTimer);
+        clickTimer = null;
+        onRowDbClick(option, index);
+      }
+    }
+    function gettingFlexAlignment(columnAlignment = "center") {
+      const alignments = {
+        left: "start",
+        center: "center",
+        right: "end"
+      };
+      return alignments[columnAlignment];
+    }
+    function setColumnStyles(column) {
+      return {
+        minWidth: convertToUnit(column.minWidth),
+        maxWidth: convertToUnit(column.maxWidth),
+        width: convertToUnit(column.width)
+      };
+    }
+    function gettingColumnItemData(column) {
+      return column.columnItemLabel;
+    }
+    function gettingRowItemData(option, rowColumn) {
+      if (rowColumn.format) {
+        return rowColumn.format(option);
+      }
+      const labelKey = rowColumn.rowItemLabelKey ? rowColumn.rowItemLabelKey : rowColumn.columnItemLabel;
+      return get(option, labelKey, "");
+    }
+    function setOptionChecked(option, actionValue) {
+      if (optionDisabled(option)) {
+        return;
+      }
+      const optionUniqueKey = props.config.optionUniqueKey;
+      if (optionUniqueKey === void 0) {
+        return;
+      }
+      const equalItem = localOptions.value.find((localOption) => localOption[optionUniqueKey] === option[optionUniqueKey]);
+      if (equalItem) {
+        equalItem.selected = actionValue;
+      }
+    }
+    function setBulkOptionChecked(optionArray, actionValue) {
+      optionArray.forEach((option) => {
+        setOptionChecked(option, actionValue);
+      });
+    }
+    function onChangeAll(value) {
+      localOptions.value.map((el) => {
+        if (!optionDisabled(el)) {
+          el.selected = value;
+        }
+        return el;
+      });
+      onSelectionChange();
+      emit("change-select-all", value);
+    }
+    function onChangeRow(option) {
+      if (optionDisabled(option)) {
+        return;
+      }
+      option.selected = !option.selected;
+      onSelectionChange();
+    }
+    function onSelectionChange() {
+      emit("handle-selection-change", selectedOptions.value);
+    }
+    function initObserver() {
+      observer.value = new MutationObserver((mutationList) => {
+        if (!mutationList || !Object.keys(mutationList).length) {
+          return;
+        }
+        if (mutationList[0].attributeName === "dir") {
+          const _dir = document.documentElement.getAttribute("dir");
+          if (_dir) {
+            dir.value = _dir;
+          }
+        }
+      });
+      const elementNode = document.documentElement;
+      observer.value.observe(elementNode, {
+        attributes: true,
+        childList: false,
+        subtree: false
+      });
+    }
+    function expandableAction(rowIndex) {
+      const index = opened.value.indexOf(rowIndex);
+      if (index > -1) {
+        opened.value.splice(index, 1);
+      } else {
+        opened.value.push(rowIndex);
+      }
+    }
+    function getRowClass(row, index) {
+      if (typeof props.rowClassName === "string") {
+        return props.rowClassName;
+      } else if (typeof props.rowClassName === "function") {
+        return props.rowClassName.call(null, {
+          row,
+          index
+        });
+      }
+    }
+    watch(
+      () => props.options,
+      (val) => {
+        localOptions.value = cloneDeep(val);
+        localPagination.value.total = props.externalPaginate ? props.externalPaginate.total : val.length;
+        localPagination.value.currentPage = props.externalPaginate ? props.externalPaginate.currentPage : 1;
+        opened.value = [];
+      },
+      { immediate: true }
+    );
+    watch(
+      () => filteredOptions.value.length,
+      (filteredCount) => {
+        if (!props.isServerData && !props.externalPaginate) {
+          localPagination.value.total = filteredCount;
+        }
+      }
+    );
+    watch(
+      () => props.columns,
+      (newColumns) => {
+        const validKeys = new Set(newColumns.map((c) => c.columnItemKey));
+        const current = filterSearchQueries.value;
+        const hasStale = Object.keys(current).some((key) => !validKeys.has(key));
+        if (hasStale) {
+          const cleaned = {};
+          for (const [key, val] of Object.entries(current)) {
+            if (validKeys.has(key)) {
+              cleaned[key] = val;
+            }
+          }
+          filterSearchQueries.value = cleaned;
+        }
+      }
+    );
+    onMounted(() => {
+      if (props.showSelection) {
+        localOptions.value = localOptions.value.map((el) => {
+          el.selected = !!el.selected;
+          return el;
+        });
+        const _dir = document.documentElement.getAttribute("dir");
+        if (_dir) {
+          dir.value = _dir;
+        }
+        if (selectedOptions.value.length) {
+          onSelectionChange();
+        }
+        initObserver();
+      }
+      if (props.lazyLoadingData && !props.withPagination) {
+        if (loadMoreTrigger.value) {
+          viewObserver.value = new IntersectionObserver(() => {
+            emit("load-more", true);
+          });
+          viewObserver.value.observe(loadMoreTrigger.value);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      if (observer.value) {
+        observer.value.disconnect();
+      }
+      if (viewObserver.value) {
+        viewObserver.value.disconnect();
+      }
+    });
+    __expose({
+      setBulkOptionChecked,
+      /* Internal state surfaced for tests and integrators that need to
+       * observe sort/selection/expansion state imperatively. Refs unwrap
+       * through Vue's proxy so reads are plain values (`string`, `Array<number>`,
+       * etc.) and the typed wrapper carries the shape through. */
+      selectedOptions,
+      sortBy,
+      sortOrder,
+      opened
+    });
+    return (_ctx, _cache) => {
+      var _a2;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "header", {}, () => {
+            var _a3;
+            return [
+              renderSlot(_ctx.$slots, "header-filter", {}, void 0, true),
+              __props.withPagination && ((_a3 = __props.perPageOptions) == null ? void 0 : _a3.length) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createVNode(_sfc_main$1, {
+                  modelValue: paginationPerPageModel.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => paginationPerPageModel.value = $event),
+                  teleported: __props.useTeleportedPopovers,
+                  options: __props.perPageOptions,
+                  "onOption:click": onPerPageOptionClick
+                }, null, 8, ["modelValue", "teleported", "options"])
+              ])) : createCommentVNode("", true),
+              _ctx.$slots["header-actions"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                renderSlot(_ctx.$slots, "header-actions", {}, void 0, true)
+              ])) : createCommentVNode("", true)
+            ];
+          }, true)
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass([{ "shadow-table rounded-md": hasFooter.value }, __props.wrapperClass])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([{
+              "is--fixed": __props.fixedHeader,
+              "shadow-table rounded-md": !hasFooter.value
+            }, "vc-table-wrapper"]),
+            style: normalizeStyle({ "--height": unref(convertToUnit)(__props.height) })
+          }, [
+            createElementVNode("table", {
+              class: normalizeClass(["vc-table", [
+                hasFooter.value ? "vc-table--with-footer" : "vc-table--without-footer",
+                { "w-full": __props.withPagination },
+                { "vc-table--small": __props.compact },
+                { "vc-table--striped": __props.stripe },
+                __props.tableClass
+              ]])
+            }, [
+              createElementVNode("thead", _hoisted_5, [
+                createElementVNode("tr", null, [
+                  __props.showSelection ? (openBlock(), createElementBlock("th", {
+                    key: 0,
+                    ref_key: "headerCheckedRef",
+                    ref: headerCheckedRef,
+                    class: "selection-col relative"
+                  }, [
+                    createElementVNode("div", _hoisted_6, [
+                      createVNode(_sfc_main$2, {
+                        disabled: !tableOptions.value.length,
+                        "model-value": headerChecked.value,
+                        indeterminate: isIndeterminate.value,
+                        onChange: onChangeAll
+                      }, null, 8, ["disabled", "model-value", "indeterminate"]),
+                      !!_ctx.$slots["checked-tooltip"] && localOptions.value.some((el) => el.selected) ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: "checked-tooltip",
+                        style: normalizeStyle(setPositionForTooltip.value)
+                      }, [
+                        renderSlot(_ctx.$slots, "checked-tooltip", {}, void 0, true)
+                      ], 4)) : createCommentVNode("", true)
+                    ])
+                  ], 512)) : createCommentVNode("", true),
+                  __props.expandableRow ? (openBlock(), createElementBlock("th", _hoisted_7)) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
+                    return openBlock(), createElementBlock("th", {
+                      key: index,
+                      style: normalizeStyle(setColumnStyles(column))
+                    }, [
+                      createElementVNode("div", {
+                        class: normalizeClass([`justify-${gettingFlexAlignment(column.columnAlignment)}`, "vc-table-slot"])
+                      }, [
+                        renderSlot(_ctx.$slots, column.columnItemKey, { column }, () => [
+                          createElementVNode("div", {
+                            class: normalizeClass([{ "cursor-pointer": isSortableColumn(column) }, "vc-table-column-header select-none"]),
+                            onClick: withModifiers(($event) => handleSortClick(column), ["stop"])
+                          }, [
+                            column.columnItemIcon ? (openBlock(), createBlock(_sfc_main$3, {
+                              key: 0,
+                              icon: column.columnItemIcon,
+                              class: "vc-table-column-icon"
+                            }, null, 8, ["icon"])) : createCommentVNode("", true),
+                            createElementVNode("span", {
+                              class: normalizeClass(column.columnClasses)
+                            }, [
+                              renderSlot(_ctx.$slots, `${column.columnItemKey}-title`, {
+                                column,
+                                title: gettingColumnItemData(column)
+                              }, () => [
+                                createTextVNode(toDisplayString(gettingColumnItemData(column)), 1)
+                              ], true)
+                            ], 2),
+                            isSortableColumn(column) ? (openBlock(), createElementBlock("span", _hoisted_9, [
+                              createElementVNode("i", {
+                                class: normalizeClass([isActiveSortColumn(column, "asc"), "sort-caret ascending"]),
+                                onClick: withModifiers(($event) => handleSortClick(column, "asc"), ["stop"])
+                              }, null, 10, _hoisted_10),
+                              createElementVNode("i", {
+                                class: normalizeClass([isActiveSortColumn(column, "desc"), "sort-caret descending"]),
+                                onClick: withModifiers(($event) => handleSortClick(column, "desc"), ["stop"])
+                              }, null, 10, _hoisted_11)
+                            ])) : createCommentVNode("", true),
+                            isFilterableColumn(column) ? (openBlock(), createBlock(_sfc_main$4, {
+                              key: 2,
+                              teleported: __props.useTeleportedPopovers,
+                              "popover-width": 220,
+                              placement: "bottom-end",
+                              "popover-class": "vc-table-filter-popover",
+                              onHide: () => clearFilterSearchQuery(column)
+                            }, {
+                              reference: withCtx(({ open }) => [
+                                createVNode(VcButtonIcon, {
+                                  icon: "vc-icon-filter",
+                                  small: "",
+                                  plain: "",
+                                  class: normalizeClass(["header-filter-btn", { "header-filter-btn--active": isColumnFiltered(column), "header-filter-btn--open": open }]),
+                                  onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                                  }, ["stop"]))
+                                }, null, 8, ["class"])
+                              ]),
+                              default: withCtx(() => [
+                                createElementVNode("div", _hoisted_12, [
+                                  createElementVNode("div", _hoisted_13, toDisplayString(unref(tVU).t("voicenterUi.table.filter.by", { column: column.columnItemLabel })), 1),
+                                  isSearchableFilter(column) ? (openBlock(), createBlock(_sfc_main$5, {
+                                    key: 0,
+                                    "model-value": getFilterSearchQuery(column),
+                                    placeholder: unref(tVU).t("voicenterUi.table.filter.search"),
+                                    clearable: "",
+                                    "prefix-icon": "vc-icon-search",
+                                    class: "vc-table-filter-search",
+                                    "onUpdate:modelValue": (val) => setFilterSearchQuery(column, String(val ?? ""))
+                                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])) : createCommentVNode("", true),
+                                  createVNode(_sfc_main$6, {
+                                    "model-value": getFilterModelValue(column),
+                                    checkboxes: isSearchableFilter(column) ? getFilteredColumnValues(column) : getUniqueColumnValues(column),
+                                    config: filterCheckboxConfig,
+                                    "visible-all": true,
+                                    "onUpdate:modelValue": (values) => onFilterModelUpdate(column, values)
+                                  }, {
+                                    "checkbox-label": withCtx(({ checkbox }) => [
+                                      renderSlot(_ctx.$slots, `${column.columnItemKey}-filter-option`, {
+                                        option: checkbox,
+                                        column
+                                      }, () => [
+                                        createTextVNode(toDisplayString(checkbox.label), 1)
+                                      ], true)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["model-value", "checkboxes", "onUpdate:modelValue"])
+                                ])
+                              ]),
+                              _: 2
+                            }, 1032, ["teleported", "onHide"])) : createCommentVNode("", true)
+                          ], 10, _hoisted_8)
+                        ], true)
+                      ], 2),
+                      renderSlot(_ctx.$slots, `${column.columnItemKey}-extra`, { column }, void 0, true)
+                    ], 4);
+                  }), 128)),
+                  __props.showActionsColumn ? (openBlock(), createElementBlock("th", {
+                    key: 2,
+                    class: normalizeClass(actionsColumnHeaderClasses.value),
+                    style: normalizeStyle(actionsColumnStyles.value)
+                  }, [
+                    renderSlot(_ctx.$slots, "actions-column-header", {}, () => [
+                      createElementVNode("div", _hoisted_14, [
+                        createElementVNode("div", _hoisted_15, [
+                          actionsColumnConfig.value.icon ? (openBlock(), createBlock(_sfc_main$3, {
+                            key: 0,
+                            icon: actionsColumnConfig.value.icon,
+                            class: "vc-table-column-icon"
+                          }, null, 8, ["icon"])) : createCommentVNode("", true),
+                          createElementVNode("span", null, toDisplayString(actionsColumnConfig.value.columnName), 1)
+                        ])
+                      ])
+                    ], true)
+                  ], 6)) : createCommentVNode("", true)
+                ])
+              ]),
+              createElementVNode("tbody", _hoisted_16, [
+                _ctx.$slots["prepend-row"] ? renderSlot(_ctx.$slots, "prepend-row", {
+                  key: 0,
+                  columns: __props.columns
+                }, void 0, true) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOptions.value, (option, index) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: `tr-${option}`
+                  }, [
+                    createElementVNode("tr", {
+                      class: normalizeClass([
+                        {
+                          "selected": __props.rowSelectable && selectedRow.value === index
+                        },
+                        getRowClass(option, index)
+                      ]),
+                      onClick: ($event) => handleRowClick(option, index)
+                    }, [
+                      __props.showSelection ? (openBlock(), createElementBlock("td", _hoisted_18, [
+                        createElementVNode("div", _hoisted_19, [
+                          createVNode(_sfc_main$2, {
+                            disabled: optionDisabled(option),
+                            "model-value": !!option.selected,
+                            onChange: ($event) => onChangeRow(option)
+                          }, null, 8, ["disabled", "model-value", "onChange"])
+                        ])
+                      ])) : createCommentVNode("", true),
+                      __props.expandableRow ? (openBlock(), createElementBlock("td", _hoisted_20, [
+                        createElementVNode("div", {
+                          class: "flex items-center justify-center w-full h-full",
+                          onClick: ($event) => expandableAction(index)
+                        }, [
+                          createVNode(_sfc_main$3, {
+                            icon: "vc-icon-down",
+                            class: normalizeClass(["icon-expandable p-1", { "icon-expandable-active": opened.value.includes(index) }])
+                          }, null, 8, ["class"])
+                        ], 8, _hoisted_21)
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (rowColumn, rowIndex) => {
+                        return openBlock(), createElementBlock("td", {
+                          key: `column-${index}-${rowIndex}`,
+                          style: normalizeStyle(setColumnStyles(rowColumn)),
+                          "data-column": gettingColumnItemData(rowColumn)
+                        }, [
+                          createElementVNode("div", {
+                            class: normalizeClass([[`justify-${gettingFlexAlignment(rowColumn.rowItemAlignment)}`, rowColumn.rowItemClasses], "vc-table-slot"])
+                          }, [
+                            renderSlot(_ctx.$slots, rowColumn.rowItemKeyKey, {
+                              row: option,
+                              index
+                            }, () => [
+                              createTextVNode(toDisplayString(gettingRowItemData(option, rowColumn)), 1)
+                            ], true)
+                          ], 2)
+                        ], 12, _hoisted_22);
+                      }), 128)),
+                      __props.showActionsColumn ? (openBlock(), createElementBlock("td", {
+                        key: 2,
+                        style: normalizeStyle(actionsColumnStyles.value),
+                        class: normalizeClass(actionsColumnClasses.value),
+                        "data-column": actionsColumnConfig.value.columnName
+                      }, [
+                        renderSlot(_ctx.$slots, "actions-column", {
+                          row: option,
+                          index
+                        }, void 0, true)
+                      ], 14, _hoisted_23)) : createCommentVNode("", true)
+                    ], 10, _hoisted_17),
+                    __props.expandableRow && opened.value.includes(index) ? (openBlock(), createElementBlock("tr", _hoisted_24, [
+                      createElementVNode("td", { colspan: colspanNumber.value }, [
+                        renderSlot(_ctx.$slots, "expanded-content", { row: option }, void 0, true)
+                      ], 8, _hoisted_25)
+                    ])) : createCommentVNode("", true)
+                  ], 64);
+                }), 128)),
+                !tableOptions.value.length ? renderSlot(_ctx.$slots, "empty-data", { key: 1 }, () => [
+                  createElementVNode("tr", _hoisted_26, [
+                    createElementVNode("td", { colspan: colspanNumber.value }, [
+                      createElementVNode("div", _hoisted_28, toDisplayString(emptyDataMessage.value), 1)
+                    ], 8, _hoisted_27)
+                  ])
+                ], true) : createCommentVNode("", true),
+                __props.lazyLoadingData && !__props.withPagination ? withDirectives((openBlock(), createElementBlock("tr", {
+                  key: 2,
+                  ref_key: "loadMoreTrigger",
+                  ref: loadMoreTrigger,
+                  class: "vc-table__load-trigger"
+                }, [
+                  createElementVNode("td", {
+                    colspan: (_a2 = __props.columns) == null ? void 0 : _a2.length
+                  }, null, 8, _hoisted_29)
+                ], 512)), [
+                  [vShow, !__props.loading]
+                ]) : createCommentVNode("", true)
+              ])
+            ], 2)
+          ], 6),
+          hasFooter.value ? (openBlock(), createElementBlock("div", _hoisted_30, [
+            renderSlot(_ctx.$slots, "table-footer", {}, () => [
+              isPaginationView.value ? (openBlock(), createElementBlock("div", _hoisted_31, [
+                createVNode(_sfc_main$7, {
+                  modelValue: paginationCurrentPageModel.value,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => paginationCurrentPageModel.value = $event),
+                  "per-page": paginationPerPageModel.value,
+                  total: pagination.value.total,
+                  label: pagesLabelText.value,
+                  "select-teleported": __props.useTeleportedPopovers
+                }, null, 8, ["modelValue", "per-page", "total", "label", "select-teleported"])
+              ])) : createCommentVNode("", true)
+            ], true)
+          ])) : createCommentVNode("", true)
+        ], 2),
+        createVNode(VcLoading, {
+          active: __props.loading,
+          loader: __props.loaderType,
+          class: "z-5 rounded-md"
+        }, null, 8, ["active", "loader"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};