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

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

@@ -1,1069 +0,0 @@
-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
-};