vue3-easy-data-table - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

dist/vue3-easy-data-table.es.js

@@ -20,3 +20,3 @@ var __defProp = Object.defineProperty;
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, useCssVars, unref, computed, inject, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, pushScopeId, popScopeId, ref, watch, onMounted, onBeforeUnmount, toDisplayString, Fragment, renderList, useSlots, renderSlot, createCommentVNode, provide, toRefs, normalizeStyle, createBlock, normalizeProps, mergeProps, createTextVNode, guardReactiveProps, createVNode, createSlots, withCtx } from "vue";
+import { defineComponent, useCssVars, unref, computed, inject, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, pushScopeId, popScopeId, ref, watch, onMounted, onBeforeUnmount, toDisplayString, Fragment, renderList, useSlots, renderSlot, createCommentVNode, toRefs, provide, normalizeStyle, createBlock, normalizeProps, mergeProps, createTextVNode, guardReactiveProps, createVNode, createSlots, withCtx } from "vue";
 var MutipleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -30,6 +30,6 @@ var _export_sfc = (sfc, props) => {
 };
-const _withScopeId$5 = (n) => (pushScopeId("data-v-566775ba"), n = n(), popScopeId(), n);
+const _withScopeId$4 = (n) => (pushScopeId("data-v-566775ba"), n = n(), popScopeId(), n);
 const _hoisted_1$7 = ["onClick"];
 const _hoisted_2$6 = ["checked"];
-const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1));
+const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1));
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
@@ -67,5 +67,5 @@ props: {
 var SingleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$4 = (n) => (pushScopeId("data-v-39f156fd"), n = n(), popScopeId(), n);
+const _withScopeId$3 = (n) => (pushScopeId("data-v-39f156fd"), n = n(), popScopeId(), n);
 const _hoisted_1$6 = ["checked"];
-const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1));
+const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1));
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
@@ -97,6 +97,6 @@ props: {
 var RowsSelector_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$3 = (n) => (pushScopeId("data-v-384d1036"), n = n(), popScopeId(), n);
+const _withScopeId$2 = (n) => (pushScopeId("data-v-0ed08e20"), n = n(), popScopeId(), n);
 const _hoisted_1$5 = { class: "easy-data-table__rows-selector" };
 const _hoisted_2$4 = { class: "rows-input" };
-const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("div", { class: "triangle" }, null, -1));
+const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "triangle" }, null, -1));
 const _hoisted_4$3 = ["onClick"];
@@ -112,3 +112,5 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     useCssVars((_ctx) => ({
-      "40595ee7": unref(themeColor)
+      "83c11052": unref(footerFontColor),
+      "6b60f418": unref(footerBackgroundColor),
+      "346ac97c": unref(themeColor)
     }));
@@ -161,2 +163,4 @@ const showList = ref(false);
     const themeColor = inject("themeColor");
+    const footerBackgroundColor = inject("footerBackgroundColor");
+    const footerFontColor = inject("footerFontColor");
     return (_ctx, _cache) => {
@@ -186,10 +190,10 @@ return openBlock(), createElementBlock("div", _hoisted_1$5, [
 });
-var RowsSelector = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-384d1036"]]);
+var RowsSelector = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-0ed08e20"]]);
 var Loading_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$2 = (n) => (pushScopeId("data-v-1fa3a520"), n = n(), popScopeId(), n);
+const _withScopeId$1 = (n) => (pushScopeId("data-v-969989cc"), n = n(), popScopeId(), n);
 const _hoisted_1$4 = { class: "lds-ring" };
-const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
-const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
-const _hoisted_4$2 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
-const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
+const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
+const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
+const _hoisted_4$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", null, null, -1));
 const _hoisted_6$1 = [
@@ -204,5 +208,7 @@ _hoisted_2$3,
     useCssVars((_ctx) => ({
-      "26774109": unref(themeColor)
+      "284c10f4": unref(loadingEntitySizePx),
+      "90c4d0a4": unref(themeColor)
     }));
     const themeColor = inject("themeColor");
+    const loadingEntitySizePx = inject("loadingEntitySizePx");
     return (_ctx, _cache) => {
@@ -213,3 +219,3 @@ return openBlock(), createElementBlock("div", _hoisted_1$4, _hoisted_6$1);
 });
-var Loading = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1fa3a520"]]);
+var Loading = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-969989cc"]]);
 var LoadingLine_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -241,3 +247,5 @@ const _hoisted_1$3 = { class: "loader-line" };
     useCssVars((_ctx) => ({
-      "0f2f8b26": unref(themeColor)
+      "aa5730a0": unref(buttonSizePx),
+      "24829312": unref(rowBorderColor),
+      "98a0e762": unref(themeColor)
     }));
@@ -352,2 +360,5 @@ const totalVisible = 7;
     });
+    const rowHeight = inject("rowHeight");
+    const buttonSizePx = computed(() => `${rowHeight * 0.6}px`);
+    const rowBorderColor = inject("rowBorderColor");
     const themeColor = inject("themeColor");
@@ -371,10 +382,10 @@ return (_ctx, _cache) => {
 });
-var ButtonsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-24739375"]]);
+var ButtonsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4f534e20"]]);
 var PaginationArrows_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$1 = (n) => (pushScopeId("data-v-c9da5286"), n = n(), popScopeId(), n);
-const _hoisted_1$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "arrow arrow-right" }, null, -1));
+const _withScopeId = (n) => (pushScopeId("data-v-c9da5286"), n = n(), popScopeId(), n);
+const _hoisted_1$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "arrow arrow-right" }, null, -1));
 const _hoisted_2$1 = [
   _hoisted_1$1
 ];
-const _hoisted_3$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "arrow arrow-left" }, null, -1));
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "arrow arrow-left" }, null, -1));
 const _hoisted_4$1 = [
@@ -408,35 +419,29 @@ _hoisted_3$1
 var DataTable_vue_vue_type_style_index_0_scoped_true_lang = "";
-var DataTable_vue_vue_type_style_index_1_lang = "";
-const _withScopeId = (n) => (pushScopeId("data-v-79758d78"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = {
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
   key: 1,
-  class: "header"
+  class: "header-item"
 };
-const _hoisted_3 = {
+const _hoisted_4 = {
   key: 1,
   class: "header-text"
 };
-const _hoisted_4 = ["onClick"];
 const _hoisted_5 = ["onClick"];
-const _hoisted_6 = ["colspan"];
-const _hoisted_7 = {
-  key: 0,
-  class: "vue3-easy-data-table__loading"
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["colspan"];
+const _hoisted_8 = { class: "loading-entity" };
+const _hoisted_9 = {
+  key: 1,
+  class: "data-table__message"
 };
-const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "vue3-easy-data-table__loading-mask" }, null, -1));
-const _hoisted_9 = { class: "loading-entity" };
 const _hoisted_10 = {
-  key: 1,
-  class: "vue3-easy-data-table__message"
+  key: 0,
+  class: "data-table__footer"
 };
 const _hoisted_11 = {
   key: 0,
-  class: "vue3-easy-data-table__footer"
+  class: "footer__rows-per-page"
 };
-const _hoisted_12 = {
-  key: 0,
-  class: "pagination__rows-per-page"
-};
-const _hoisted_13 = { class: "pagination__items-index" };
+const _hoisted_12 = { class: "footer__items-index" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -452,22 +457,30 @@ props: {
     },
-    checkboxColumnWidth: {
-      type: Number,
-      default: null
+    rowBorderColor: {
+      type: String,
+      default: "#e0e0e0"
     },
-    emptyMessage: {
+    tableBorderColor: {
       type: String,
-      default: "No Available Data"
+      default: "#e0e0e0"
     },
-    expandColumnWidth: {
-      type: Number,
-      default: 36
+    rowBackgroundColor: {
+      type: String,
+      default: "#fff"
     },
-    filterOptions: {
-      type: Array,
-      default: null
+    footerBackgroundColor: {
+      type: String,
+      default: "#fff"
     },
-    fixedExpand: {
-      type: Boolean,
-      default: false
+    rowFontColor: {
+      type: String,
+      default: "#212121"
     },
+    footerFontColor: {
+      type: String,
+      default: "#212121"
+    },
+    emptyMessage: {
+      type: String,
+      default: "No Available Data"
+    },
     fixedHeader: {
@@ -477,10 +490,22 @@ type: Boolean,
     },
-    fixedCheckbox: {
-      type: Boolean,
-      default: false
+    headerFontColor: {
+      type: String,
+      default: "#373737"
     },
-    fixedIndex: {
-      type: Boolean,
-      default: false
+    headerBackgroundColor: {
+      type: String,
+      default: "#fff"
     },
+    tableFontSize: {
+      type: Number,
+      default: 12
+    },
+    evenRowBackgroundColor: {
+      type: String,
+      default: "#fafafa"
+    },
+    evenRowFontColor: {
+      type: String,
+      default: "#212121"
+    },
     headers: {
@@ -490,18 +515,6 @@ type: Array,
     },
-    hideFooter: {
+    hoverToChangeColor: {
       type: Boolean,
-      default: false
+      default: true
     },
-    hideRowsPerPage: {
-      type: Boolean,
-      default: false
-    },
-    hideHeader: {
-      type: Boolean,
-      default: false
-    },
-    indexColumnWidth: {
-      type: Number,
-      default: 60
-    },
     items: {
@@ -511,2 +524,6 @@ type: Array,
     },
+    tableHeight: {
+      type: Number,
+      default: () => null
+    },
     itemsSelected: {
@@ -516,6 +533,10 @@ type: Array,
     },
-    loading: {
-      type: Boolean,
-      deault: false
+    searchField: {
+      type: String,
+      default: ""
     },
+    searchValue: {
+      type: String,
+      default: ""
+    },
     rowsPerPage: {
@@ -529,13 +550,13 @@ type: Number,
     },
-    rowsPerPageMessage: {
+    rowHoverBackgroundColor: {
       type: String,
-      default: "rows per page:"
+      default: "#eee"
     },
-    searchField: {
+    rowHoverFontColor: {
       type: String,
-      default: ""
+      default: "#212121"
     },
-    searchValue: {
-      type: String,
-      default: ""
+    loading: {
+      type: Boolean,
+      deault: false
     },
@@ -550,6 +571,2 @@ serverOptions: {
     },
-    showIndex: {
-      type: Boolean,
-      default: false
-    },
     sortBy: {
@@ -563,6 +580,2 @@ type: String,
     },
-    tableHeight: {
-      type: Number,
-      default: null
-    },
     themeColor: {
@@ -572,25 +585,65 @@ type: String,
     },
-    tableClassName: {
-      type: String,
-      default: ""
+    dense: {
+      type: Boolean,
+      default: false
     },
-    headerClassName: {
-      type: String,
-      default: ""
+    showIndex: {
+      type: Boolean,
+      default: false
     },
-    headerItemClassName: {
-      type: [Function, String],
-      default: ""
+    hideFooter: {
+      type: Boolean,
+      default: false
     },
-    bodyRowClassName: {
-      type: [Function, String],
-      default: ""
+    hideHeader: {
+      type: Boolean,
+      default: false
     },
-    bodyItemClassName: {
-      type: [Function, String],
-      default: ""
+    filterOptions: {
+      type: Array,
+      default: null
     },
-    noHover: {
+    fixedCheckbox: {
       type: Boolean,
       default: false
+    },
+    fixedIndex: {
+      type: Boolean,
+      default: false
+    },
+    indexColumnWidth: {
+      type: Number,
+      default: 60
+    },
+    fixedExpand: {
+      type: Boolean,
+      default: false
+    },
+    expandColumnWidth: {
+      type: Number,
+      default: 36
+    },
+    checkboxColumnWidth: {
+      type: Number,
+      default: null
+    },
+    hideRowsPerPage: {
+      type: Boolean,
+      default: false
+    },
+    noThPadding: {
+      type: Boolean,
+      default: false
+    },
+    noTdPadding: {
+      type: Boolean,
+      default: false
+    },
+    rowsPerPageMessage: {
+      type: String,
+      default: "rows per page:"
+    },
+    expandLoading: {
+      type: Boolean,
+      default: false
     }
@@ -607,7 +660,62 @@ },
     useCssVars((_ctx) => ({
-      "05d8fe1a": unref(tableHeightPx)
+      "33e7a759": unref(tableBorderColor),
+      "f53a42de": unref(minHeightPx),
+      "5a84ab0b": unref(rowBackgroundColor),
+      "da0357e6": unref(tableHeightPx),
+      "53324420": unref(loadingWrapperSizePx),
+      "5dfaea19": unref(rowHeightPx),
+      "44a88488": unref(fontSizePx),
+      "6448210a": unref(rowFontColor),
+      "d9d876d8": unref(shadowRightPx),
+      "08be7466": unref(rowBorderColor),
+      "0502e8d7": unref(headerFontColor),
+      "5c2ba518": __props.headerBackgroundColor,
+      "aabe856c": unref(sortTypeIconSizePx),
+      "23de51cd": unref(sortTypeAscIconMarginTopPx),
+      "00ec7f9d": unref(sortTypeDescIconMarginTopPx),
+      "6f4b4383": unref(rowHoverBackgroundColor),
+      "53af18fc": unref(rowHoverFontColor),
+      "1693d178": unref(evenRowFontColor),
+      "5e4b8dc5": unref(evenRowBackgroundColor),
+      "5088d76c": unref(footerBackgroundColor),
+      "ab8ab4ee": unref(footerFontColor)
     }));
+    const {
+      rowBorderColor,
+      tableBorderColor,
+      headerFontColor,
+      rowFontColor,
+      rowHoverBackgroundColor,
+      rowHoverFontColor,
+      footerBackgroundColor,
+      rowBackgroundColor,
+      evenRowBackgroundColor,
+      evenRowFontColor,
+      footerFontColor
+    } = toRefs(props);
+    const fontSizePx = computed(() => `${props.tableFontSize}px`);
+    const rowHeight = computed(() => props.tableFontSize * (props.dense ? 2 : 3));
+    const rowHeightPx = computed(() => `${rowHeight.value}px`);
+    const shadowRightPx = computed(() => `-${rowHeight.value}px`);
     const tableHeightPx = computed(() => props.tableHeight ? `${props.tableHeight}px` : null);
+    const minHeightPx = computed(() => `${rowHeight.value * 5}px`);
+    const sortTypeIconSize = computed(() => Math.round(props.tableFontSize / 2.5));
+    const sortTypeIconSizePx = computed(() => `${sortTypeIconSize.value}px`);
+    const sortTypeIconMargin = computed(() => Math.round(sortTypeIconSize.value));
+    const sortTypeAscIconMarginTopPx = computed(() => `-${sortTypeIconMargin.value}px`);
+    const sortTypeDescIconMarginTopPx = computed(() => `${sortTypeIconMargin.value}px`);
+    const loadingEntitySizePx = computed(() => `${props.tableFontSize * 5}px`);
+    const loadingWrapperSizePx = computed(() => props.tableHeight ? `${props.tableHeight - rowHeight.value}px` : `${props.tableFontSize * 5 * 2}px`);
+    const checkboxColumnWidthComputed = computed(() => {
+      var _a;
+      return (_a = props.checkboxColumnWidth) != null ? _a : 1.3 * props.tableFontSize + 20;
+    });
     provide("themeColor", props.themeColor);
+    provide("loadingEntitySizePx", loadingEntitySizePx.value);
+    provide("rowHeight", rowHeight.value);
+    provide("rowBorderColor", rowBorderColor.value);
+    provide("footerBackgroundColor", footerBackgroundColor.value);
+    provide("footerFontColor", footerFontColor.value);
     const slots = useSlots();
+    const ifHasBodySlot = computed(() => slots.body);
     const ifHasPaginationSlot = computed(() => slots.pagination);
@@ -673,3 +781,2 @@ const ifHasLoadingSlot = computed(() => slots.loading);
     const headersForRender = computed(() => {
-      var _a;
       const fixedHeaders2 = [
@@ -723,3 +830,3 @@ ...fixedHeadersFromUser.value,
           fixed: true,
-          width: (_a = props.checkboxColumnWidth) != null ? _a : 36
+          width: checkboxColumnWidthComputed.value
         } : { text: "checkbox", value: "checkbox" };
@@ -781,3 +888,3 @@ headersWithCheckbox = [headerCheckbox, ...headersWithIndex];
       if (columInfo) {
-        return `left: ${columInfo.distance}px;z-index: ${type === "th" ? 3 : 1};position: sticky;`;
+        return `left: ${columInfo.distance}px;z-index: ${type === "th" ? 3 : 1}; position: sticky`;
       }
@@ -1059,3 +1166,3 @@ return void 0;
         ref: dataTable,
-        class: normalizeClass(["vue3-easy-data-table", [__props.tableClassName]])
+        class: "vue3-easy-data-table"
       }, [
@@ -1065,11 +1172,11 @@ createElementVNode("div", {
           ref: tableBody,
-          class: normalizeClass(["vue3-easy-data-table__main", {
+          class: normalizeClass(["data-table__body", {
             "fixed-header": __props.fixedHeader,
             "fixed-height": __props.tableHeight,
-            "show-shadow": showShadow.value,
-            "table-fixed": unref(fixedHeaders).length,
-            "hoverable": !__props.noHover
+            "show-shadow": showShadow.value
           }])
         }, [
-          createElementVNode("table", null, [
+          createElementVNode("table", {
+            class: normalizeClass({ "fixed": unref(fixedHeaders).length })
+          }, [
             createElementVNode("colgroup", null, [
@@ -1083,6 +1190,3 @@ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headersForRender), (header, index) => {
             ]),
-            unref(headersForRender).length && !__props.hideHeader ? (openBlock(), createElementBlock("thead", {
-              key: 0,
-              class: normalizeClass(["vue3-easy-data-table__header", [__props.headerClassName]])
-            }, [
+            unref(headersForRender).length && !__props.hideHeader ? (openBlock(), createElementBlock("thead", _hoisted_1, [
               createElementVNode("tr", null, [
@@ -1092,3 +1196,3 @@ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headersForRender), (header, index) => {
                     key: index,
-                    class: normalizeClass([{
+                    class: normalizeClass({
                       sortable: header.sortable,
@@ -1098,4 +1202,6 @@ "none": header.sortable && header.sortType === "none",
                       "asc": header.sortable && header.sortType === "asc",
-                      "shadow": header.value === unref(lastFixedColumn)
-                    }, typeof __props.headerItemClassName === "string" ? __props.headerItemClassName : __props.headerItemClassName(header, index)]),
+                      "fixed": header.fixed,
+                      "has-shadow": header.value === unref(lastFixedColumn),
+                      "no-padding": __props.noThPadding
+                    }),
                     style: normalizeStyle(getFixedDistance(header.value)),
@@ -1108,4 +1214,4 @@ onClick: withModifiers(($event) => header.sortable && header.sortType ? updateSortField(header.value, header.sortType) : null, ["stop"])
                       onChange: toggleSelectAll
-                    }, null, 8, ["status"])) : (openBlock(), createElementBlock("span", _hoisted_2, [
-                      unref(slots)[`header-${header.value}`] ? renderSlot(_ctx.$slots, `header-${header.value}`, normalizeProps(mergeProps({ key: 0 }, header)), void 0, true) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(header.text), 1)),
+                    }, null, 8, ["status"])) : (openBlock(), createElementBlock("span", _hoisted_3, [
+                      unref(slots)[`header-${header.value}`] ? renderSlot(_ctx.$slots, `header-${header.value}`, normalizeProps(mergeProps({ key: 0 }, header)), void 0, true) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(header.text), 1)),
                       header.sortable ? (openBlock(), createElementBlock("i", {
@@ -1116,71 +1222,76 @@ key: header.sortType ? header.sortType : "none",
                     ]))
-                  ], 14, _hoisted_1);
+                  ], 14, _hoisted_2);
                 }), 128))
               ])
-            ], 2)) : createCommentVNode("", true),
-            unref(items).length && unref(headerColumns).length ? (openBlock(), createElementBlock("tbody", {
-              key: 1,
-              class: normalizeClass(["vue3-easy-data-table__body", { "row-alternation": __props.alternating }])
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsForRender), (item, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  createElementVNode("tr", {
-                    class: normalizeClass([
-                      { "even-row": (index + 1) % 2 === 0 },
-                      typeof __props.bodyRowClassName === "string" ? __props.bodyRowClassName : __props.bodyRowClassName(item, index)
-                    ]),
-                    onClick: ($event) => clickRow(item)
-                  }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headerColumns), (column, i) => {
-                      return openBlock(), createElementBlock("td", {
-                        key: i,
-                        style: normalizeStyle(getFixedDistance(column, "td")),
-                        class: normalizeClass([{
-                          "shadow": column === unref(lastFixedColumn),
-                          "can-expand": column === "expand"
-                        }, typeof __props.bodyItemClassName === "string" ? __props.bodyItemClassName : __props.bodyItemClassName(column, i)]),
-                        onClick: ($event) => column === "expand" ? updateExpandingItemIndexList(index, item, $event) : null
+            ])) : createCommentVNode("", true),
+            unref(ifHasBodySlot) ? renderSlot(_ctx.$slots, "body", { key: 1 }, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              unref(items).length && unref(headerColumns).length ? (openBlock(), createElementBlock("tbody", {
+                key: 0,
+                class: normalizeClass({ "row-alternation": __props.alternating, "hover-to-change-color": __props.hoverToChangeColor })
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsForRender), (item, index) => {
+                  return openBlock(), createElementBlock(Fragment, { key: index }, [
+                    createElementVNode("tr", {
+                      class: normalizeClass({ "even-row": (index + 1) % 2 === 0 }),
+                      onClick: ($event) => clickRow(item)
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headerColumns), (column, i) => {
+                        return openBlock(), createElementBlock("td", {
+                          key: i,
+                          style: normalizeStyle(getFixedDistance(column, "td")),
+                          class: normalizeClass({
+                            "has-shadow": column === unref(lastFixedColumn),
+                            "no-padding": __props.noTdPadding,
+                            "can-expand": column === "expand"
+                          }),
+                          onClick: ($event) => column === "expand" ? updateExpandingItemIndexList(index, item, $event) : null
+                        }, [
+                          unref(slots)[`item-${column}`] ? renderSlot(_ctx.$slots, `item-${column}`, normalizeProps(mergeProps({ key: 0 }, item)), void 0, true) : column === "expand" ? (openBlock(), createElementBlock("i", {
+                            key: 1,
+                            class: normalizeClass(["expand-icon", { "expanding": expandingItemIndexList.value.includes(index) }])
+                          }, null, 2)) : column === "checkbox" ? (openBlock(), createBlock(SingleSelectCheckBox, {
+                            key: 2,
+                            checked: item[column],
+                            onChange: ($event) => toggleSelectItem(item)
+                          }, null, 8, ["checked", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                            createTextVNode(toDisplayString(generateColumnContent(column, item)), 1)
+                          ], 64))
+                        ], 14, _hoisted_6);
+                      }), 128))
+                    ], 10, _hoisted_5),
+                    unref(ifHasExpandSlot) && expandingItemIndexList.value.includes(index) ? (openBlock(), createElementBlock("tr", {
+                      key: 0,
+                      class: normalizeClass({ "even-row": (index + 1) % 2 === 0 })
+                    }, [
+                      createElementVNode("td", {
+                        colspan: unref(headersForRender).length,
+                        class: "expand"
                       }, [
-                        unref(slots)[`item-${column}`] ? renderSlot(_ctx.$slots, `item-${column}`, normalizeProps(mergeProps({ key: 0 }, item)), void 0, true) : column === "expand" ? (openBlock(), createElementBlock("i", {
-                          key: 1,
-                          class: normalizeClass(["expand-icon", { "expanding": expandingItemIndexList.value.includes(index) }])
-                        }, null, 2)) : column === "checkbox" ? (openBlock(), createBlock(SingleSelectCheckBox, {
-                          key: 2,
-                          checked: item[column],
-                          onChange: ($event) => toggleSelectItem(item)
-                        }, null, 8, ["checked", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                          createTextVNode(toDisplayString(generateColumnContent(column, item)), 1)
-                        ], 64))
-                      ], 14, _hoisted_5);
-                    }), 128))
-                  ], 10, _hoisted_4),
-                  unref(ifHasExpandSlot) && expandingItemIndexList.value.includes(index) ? (openBlock(), createElementBlock("tr", {
-                    key: 0,
-                    class: normalizeClass({ "even-row": (index + 1) % 2 === 0 })
-                  }, [
-                    createElementVNode("td", {
-                      colspan: unref(headersForRender).length,
-                      class: "expand"
-                    }, [
-                      item.expandLoading ? (openBlock(), createBlock(LoadingLine, {
-                        key: 0,
-                        class: "expand-loading"
-                      })) : createCommentVNode("", true),
-                      renderSlot(_ctx.$slots, "expand", normalizeProps(guardReactiveProps(item)), void 0, true)
-                    ], 8, _hoisted_6)
-                  ], 2)) : createCommentVNode("", true)
-                ], 64);
-              }), 128))
-            ], 2)) : createCommentVNode("", true)
-          ]),
-          unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            _hoisted_8,
-            createElementVNode("div", _hoisted_9, [
+                        item.expandLoading ? (openBlock(), createBlock(LoadingLine, {
+                          key: 0,
+                          class: "expand-loading"
+                        })) : createCommentVNode("", true),
+                        renderSlot(_ctx.$slots, "expand", normalizeProps(guardReactiveProps(item)), void 0, true)
+                      ], 8, _hoisted_7)
+                    ], 2)) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ], 2)) : createCommentVNode("", true)
+            ], 64))
+          ], 2),
+          unref(loading) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["loading-wrapper", { "initial-loading": !unref(items).length && unref(loading) }])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(["loading-mask", { "no-footer": __props.hideFooter }])
+            }, null, 2),
+            createElementVNode("div", _hoisted_8, [
               unref(ifHasLoadingSlot) ? renderSlot(_ctx.$slots, "loading", { key: 0 }, void 0, true) : (openBlock(), createBlock(Loading, { key: 1 }))
             ])
-          ])) : createCommentVNode("", true),
-          !unref(itemsForRender).length && !unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(__props.emptyMessage), 1)) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true),
+          !unref(itemsForRender).length && !unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(__props.emptyMessage), 1)) : createCommentVNode("", true)
         ], 2),
-        !__props.hideFooter ? (openBlock(), createElementBlock("div", _hoisted_11, [
-          !__props.hideRowsPerPage ? (openBlock(), createElementBlock("div", _hoisted_12, [
+        !__props.hideFooter ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          !__props.hideRowsPerPage ? (openBlock(), createElementBlock("div", _hoisted_11, [
             createTextVNode(toDisplayString(__props.rowsPerPageMessage) + " ", 1),
@@ -1193,3 +1304,3 @@ createVNode(RowsSelector, {
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_13, toDisplayString(`${unref(firstIndexOfItemsInCurrentPage)}-${unref(lastIndexOfItemsInCurrentPage)}`) + " of " + toDisplayString(unref(totalItemsLength)), 1),
+          createElementVNode("div", _hoisted_12, toDisplayString(`${unref(firstIndexOfItemsInCurrentPage)}-${unref(lastIndexOfItemsInCurrentPage)}`) + " of " + toDisplayString(unref(totalItemsLength)), 1),
           unref(ifHasPaginationSlot) ? renderSlot(_ctx.$slots, "pagination", normalizeProps(mergeProps({ key: 1 }, {
@@ -1221,7 +1332,7 @@ isFirstPage: unref(isFirstPage),
         ])) : createCommentVNode("", true)
-      ], 2);
+      ], 512);
     };
   }
 });
-var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79758d78"]]);
+var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d408f03"]]);
 if (typeof window !== "undefined" && window.Vue) {
@@ -1228,0 +1339,0 @@ window.Vue.createApp({}).component("Vue3EasyDataTable", DataTable);

dist/vue3-easy-data-table.umd.js

@@ -1,1 +0,1 @@
-(function(e,y){typeof exports=="object"&&typeof module!="undefined"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=y(e.Vue))})(this,function(e){"use strict";var dt=Object.defineProperty,ut=Object.defineProperties;var pt=Object.getOwnPropertyDescriptors;var ce=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable;var de=(e,y,m)=>y in e?dt(e,y,{enumerable:!0,configurable:!0,writable:!0,value:m}):e[y]=m,S=(e,y)=>{for(var m in y||(y={}))mt.call(y,m)&&de(e,m,y[m]);if(ce)for(var m of ce(y))ft.call(y,m)&&de(e,m,y[m]);return e},O=(e,y)=>ut(e,pt(y));var y="",m=(o,h)=>{const r=o.__vccOpts||o;for(const[a,f]of h)r[a]=f;return r};const ue=o=>(e.pushScopeId("data-v-566775ba"),o=o(),e.popScopeId(),o),pe=["onClick"],me=["checked"],fe=ue(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ge=m(e.defineComponent({props:{status:{type:String,required:!0}},emits:["change"],setup(o,{emit:h}){const r=o;e.useCssVars(w=>({"7f84b28f":e.unref(x)}));const a=e.computed(()=>r.status==="allSelected"),f=()=>{h("change",!a.value)},x=e.inject("themeColor");return(w,u)=>(e.openBlock(),e.createElementBlock("div",{class:"multi-select__checkbox",onClick:e.withModifiers(f,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(a),class:e.normalizeClass(o.status)},null,10,me),fe],8,pe))}}),[["__scopeId","data-v-566775ba"]]),ht="";const he=o=>(e.pushScopeId("data-v-39f156fd"),o=o(),e.popScopeId(),o),_e=["checked"],ye=he(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ke=m(e.defineComponent({props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(o,{emit:h}){e.useCssVars(a=>({"20cfc5a0":e.unref(r)}));const r=e.inject("themeColor");return(a,f)=>(e.openBlock(),e.createElementBlock("div",{class:"single-select__checkbox",onClick:f[0]||(f[0]=e.withModifiers(x=>h("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:o.checked},null,8,_e),ye]))}}),[["__scopeId","data-v-39f156fd"]]),yt="";const xe=o=>(e.pushScopeId("data-v-384d1036"),o=o(),e.popScopeId(),o),be={class:"easy-data-table__rows-selector"},Ce={class:"rows-input"},Ne=xe(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),Se=["onClick"];var Be=m(e.defineComponent({props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(o,{emit:h}){const r=o;e.useCssVars(b=>({"40595ee7":e.unref(B)}));const a=e.ref(!1),f=e.ref(!1),x=e.inject("dataTable");e.watch(a,b=>{if(b&&x){const d=window.innerHeight,k=x.value.getBoundingClientRect().height,C=x.value.getBoundingClientRect().top;d-(k+C)<=100?f.value=!0:f.value=!1}});const w=e.computed({get:()=>r.modelValue,set:b=>{h("update:modelValue",b)}}),u=b=>{w.value=b,a.value=!1},i=(b,d)=>{let k=b.parentNode;for(;k!=null;){if(k.classList&&k.classList.contains(d))return!0;k=k.parentNode}return!1},p=b=>{i(b.target,"easy-data-table__rows-selector")||(a.value=!1)};e.onMounted(()=>{document.addEventListener("click",p)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",p)});const B=e.inject("themeColor");return(b,d)=>(e.openBlock(),e.createElementBlock("div",be,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:d[0]||(d[0]=k=>a.value=!a.value)},[e.createElementVNode("div",Ce,e.toDisplayString(e.unref(w)),1),Ne]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:a.value,inside:f.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.rowsItems,k=>(e.openBlock(),e.createElementBlock("li",{key:k,class:e.normalizeClass({selected:k===e.unref(w)}),onClick:C=>u(k)},e.toDisplayString(k),11,Se))),128))],2)]))}}),[["__scopeId","data-v-384d1036"]]),xt="";const H=o=>(e.pushScopeId("data-v-1fa3a520"),o=o(),e.popScopeId(),o),Pe={class:"lds-ring"},we=[H(()=>e.createElementVNode("div",null,null,-1)),H(()=>e.createElementVNode("div",null,null,-1)),H(()=>e.createElementVNode("div",null,null,-1)),H(()=>e.createElementVNode("div",null,null,-1))];var Ie=m(e.defineComponent({setup(o){e.useCssVars(r=>({"26774109":e.unref(h)}));const h=e.inject("themeColor");return(r,a)=>(e.openBlock(),e.createElementBlock("div",Pe,we))}}),[["__scopeId","data-v-1fa3a520"]]),Pt="";const $e={class:"loader-line"};var Ee=m(e.defineComponent({setup(o){e.useCssVars(r=>({"0d327f57":e.unref(h)}));const h=e.inject("themeColor");return(r,a)=>(e.openBlock(),e.createElementBlock("div",$e))}}),[["__scopeId","data-v-7d281cac"]]),It="";const Ve={class:"buttons-pagination"},Fe=["onClick"];var Te=m(e.defineComponent({props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(o,{emit:h}){const r=o;e.useCssVars(u=>({"0f2f8b26":e.unref(w)}));const a=7,f=u=>{u.type==="button"&&!u.active&&h("updatePage",u.page)},x=e.computed(()=>{const u=[];if(r.maxPaginationNumber<=a)for(let i=1;i<=r.maxPaginationNumber;i+=1)u.push({type:"button",page:i,active:i===r.currentPaginationNumber});else if([1,2,r.maxPaginationNumber,r.maxPaginationNumber-1].includes(r.currentPaginationNumber))for(let i=1;i<=a;i+=1)if(i<=3)u.push({type:"button",page:i,active:i===r.currentPaginationNumber});else if(i===4)u.push({type:"omission"});else{const p=r.maxPaginationNumber-(a-i);u.push({type:"button",page:p,active:p===r.currentPaginationNumber})}else if([3,4].includes(r.currentPaginationNumber))for(let i=1;i<=a;i+=1)i<=5?u.push({type:"button",page:i,active:i===r.currentPaginationNumber}):i===6?u.push({type:"omission"}):u.push({type:"button",page:r.maxPaginationNumber,active:r.maxPaginationNumber===r.currentPaginationNumber});else if([r.maxPaginationNumber-2,r.maxPaginationNumber-3].includes(r.currentPaginationNumber))for(let i=1;i<=a;i+=1)if(i===1)u.push({type:"button",page:1,active:r.currentPaginationNumber===1});else if(i===2)u.push({type:"omission"});else{const p=r.maxPaginationNumber-(a-i);u.push({type:"button",page:p,active:p===r.currentPaginationNumber})}else for(let i=1;i<=a;i+=1)if(i===1)u.push({type:"button",page:1,active:r.currentPaginationNumber===1});else if(i===2||i===6)u.push({type:"omission"});else if(i===7)u.push({type:"button",page:r.maxPaginationNumber,active:r.maxPaginationNumber===r.currentPaginationNumber});else{const p=4-i,B=r.currentPaginationNumber-p;u.push({type:"button",page:B,active:B===r.currentPaginationNumber})}return u}),w=e.inject("themeColor");return(u,i)=>(e.openBlock(),e.createElementBlock("div",Ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(x),(p,B)=>(e.openBlock(),e.createElementBlock("div",{key:B,class:e.normalizeClass(["item",{button:p.type==="button",active:p.type==="button"&&p.active,omission:p.type==="omission"}]),onClick:b=>f(p)},e.toDisplayString(p.type==="button"?p.page:"..."),11,Fe))),128))]))}}),[["__scopeId","data-v-24739375"]]),Et="";const G=o=>(e.pushScopeId("data-v-c9da5286"),o=o(),e.popScopeId(),o),Le=[G(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],Oe=[G(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var Re=m(e.defineComponent({props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(o,{emit:h}){const r=e.useSlots();return(a,f)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":o.isFirstPage}]),onClick:f[0]||(f[0]=x=>h("clickPrevPage"))},Le,2),e.unref(r).buttonsPagination?e.renderSlot(a.$slots,"buttonsPagination",{key:0},void 0,!0):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["next-page__click-button",{"last-page":o.isLastPage}]),onClick:f[1]||(f[1]=x=>h("clickNextPage"))},Oe,2)],64))}}),[["__scopeId","data-v-c9da5286"]]),Lt="",Ot="";const ze=o=>(e.pushScopeId("data-v-79758d78"),o=o(),e.popScopeId(),o),He=["onClick"],Ae={key:1,class:"header"},De={key:1,class:"header-text"},Me=["onClick"],je=["onClick"],qe=["colspan"],We={key:0,class:"vue3-easy-data-table__loading"},ve=ze(()=>e.createElementVNode("div",{class:"vue3-easy-data-table__loading-mask"},null,-1)),Je={class:"loading-entity"},Ue={key:1,class:"vue3-easy-data-table__message"},Ge={key:0,class:"vue3-easy-data-table__footer"},Ke={key:0,class:"pagination__rows-per-page"},Qe={class:"pagination__items-index"};var K=m(e.defineComponent({props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},checkboxColumnWidth:{type:Number,default:null},emptyMessage:{type:String,default:"No Available Data"},expandColumnWidth:{type:Number,default:36},filterOptions:{type:Array,default:null},fixedExpand:{type:Boolean,default:!1},fixedHeader:{type:Boolean,default:!0},fixedCheckbox:{type:Boolean,default:!1},fixedIndex:{type:Boolean,default:!1},headers:{type:Array,required:!0},hideFooter:{type:Boolean,default:!1},hideRowsPerPage:{type:Boolean,default:!1},hideHeader:{type:Boolean,default:!1},indexColumnWidth:{type:Number,default:60},items:{type:Array,required:!0},itemsSelected:{type:Array,default:null},loading:{type:Boolean,deault:!1},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowsPerPageMessage:{type:String,default:"rows per page:"},searchField:{type:String,default:""},searchValue:{type:String,default:""},serverOptions:{type:Object,default:null},serverItemsLength:{type:Number,default:0},showIndex:{type:Boolean,default:!1},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},tableHeight:{type:Number,default:null},themeColor:{type:String,default:"#42b883"},tableClassName:{type:String,default:""},headerClassName:{type:String,default:""},headerItemClassName:{type:[Function,String],default:""},bodyRowClassName:{type:[Function,String],default:""},bodyItemClassName:{type:[Function,String],default:""},noHover:{type:Boolean,default:!1}},emits:["update:itemsSelected","update:serverOptions","clickRow","expandRow"],setup(o,{expose:h,emit:r}){const a=o;e.useCssVars(n=>({"05d8fe1a":e.unref(f)}));const f=e.computed(()=>a.tableHeight?`${a.tableHeight}px`:null);e.provide("themeColor",a.themeColor);const x=e.useSlots(),w=e.computed(()=>x.pagination),u=e.computed(()=>x.loading),i=e.computed(()=>x.expand),p=e.ref(),B=e.ref();e.provide("dataTable",p);const b=e.ref(!1);e.onMounted(()=>{B.value.addEventListener("scroll",()=>{b.value=B.value.scrollLeft>0})});const d=e.computed({get:()=>{if(a.serverOptions){const{page:n,rowsPerPage:l,sortBy:t,sortType:s}=a.serverOptions;return{page:n,rowsPerPage:l,sortBy:t!=null?t:null,sortType:s!=null?s:null}}return null},set:n=>{r("update:serverOptions",n)}}),k=e.computed(()=>a.itemsSelected!==null),C=e.computed(()=>d.value!==null),Xe=e.computed(()=>!C.value&&a.rowsItems.findIndex(n=>n===a.rowsPerPage)===-1?[a.rowsPerPage,...a.rowsItems]:a.rowsItems),Ye=()=>a.sortBy!==""?{sortBy:a.sortBy,sortDesc:a.sortType==="desc"}:null,E=e.ref(Ye()),A=e.computed(()=>a.headers.findIndex(n=>n.fixed)!==-1),Ze=e.computed(()=>A.value?a.headers.filter(n=>n.fixed):[]),et=e.computed(()=>a.headers.filter(n=>!n.fixed)),F=e.computed(()=>{var g;const l=[...Ze.value,...et.value].map(N=>{const L=N;return N.sortable&&(L.sortType="none"),d.value&&N.value===d.value.sortBy&&d.value.sortType&&(L.sortType=d.value.sortType),!C.value&&E.value&&N.value===E.value.sortBy&&(L.sortType=E.value.sortDesc?"desc":"asc"),L});let t=[];i.value?t=[a.fixedExpand||A.value?{text:"",value:"expand",fixed:!0,width:a.expandColumnWidth}:{text:"",value:"expand"},...l]:t=l;let s=[];a.showIndex?s=[a.fixedIndex||A.value?{text:"#",value:"index",fixed:!0,width:a.indexColumnWidth}:{text:"#",value:"index"},...t]:s=t;let c=[];return k.value?c=[a.fixedCheckbox||A.value?{text:"checkbox",value:"checkbox",fixed:!0,width:(g=a.checkboxColumnWidth)!=null?g:36}:{text:"checkbox",value:"checkbox"},...s]:c=s,c}),R=e.ref([]),tt=(n,l,t)=>{t.stopPropagation();const s=R.value.indexOf(n);s!==-1?R.value.splice(s,1):(r("expandRow",a.items.findIndex(c=>c===l)),R.value.push(n))},I=e.computed(()=>F.value.filter(n=>n.fixed)),Q=e.computed(()=>I.value.length?I.value[I.value.length-1].value:""),nt=n=>{var t;const l=(t=n.width)!=null?t:I.value.length?100:null;if(l)return`width: ${l}px; min-width: ${l}px;`},at=e.computed(()=>{if(!I.value.length)return[];const n=I.value.map(l=>{var t;return(t=l.width)!=null?t:100});return I.value.map((l,t)=>{var s,c;return{value:l.value,fixed:(s=l.fixed)!=null?s:!0,width:(c=l.width)!=null?c:100,distance:t===0?0:n.reduce((g,N,L)=>{let ie=g;return L<t&&(ie+=N),ie})}})}),X=(n,l="th")=>{if(!I.value.length)return;const t=at.value.find(s=>s.value===n);if(t)return`left: ${t.distance}px;z-index: ${l==="th"?3:1};position: sticky;`},Y=e.computed(()=>F.value.map(n=>n.value)),z=(n,l)=>{if(n.includes(".")){let t="";return n.split(".").forEach((c,g)=>{t=g===0?l[c]:t[c]}),t}return l[n]},ot=(n,l)=>{const t=z(n,l);return Array.isArray(t)?t.join(","):t},P=e.computed({get:()=>{var n;return(n=a.itemsSelected)!=null?n:[]},set:n=>{r("update:itemsSelected",n)}}),Z=e.computed(()=>{if(!C.value&&a.searchValue!==""){const n=new RegExp(a.searchValue,"i");return a.items.filter(l=>n.test(a.searchField!==""?l[a.searchField]:Object.values(l).join(" ")))}return a.items}),V=e.computed(()=>{let n=[...Z.value];return a.filterOptions?(a.filterOptions.forEach(l=>{n=n.filter(t=>{const{field:s,comparison:c,criteria:g}=l;switch(c){case"=":return t[s]===g;case"!=":return t[s]!==g;case">":return t[s]>g;case"<":return t[s]<g;case"<=":return t[s]<=g;case">=":return t[s]>=g;case"between":return t[s]>=Math.min(...g)&&t[s]<=Math.max(...g);default:return t[s]===g}})}),n):Z.value}),D=e.computed(()=>P.value.length===0||P.value.every(l=>V.value.findIndex(t=>JSON.stringify(l)===JSON.stringify(t))===-1)?"noneSelected":P.value.length===V.value.length&&P.value.every(t=>V.value.findIndex(s=>JSON.stringify(t)===JSON.stringify(s))!==-1)?"allSelected":"partSelected"),_=e.ref(C.value?a.serverOptions.page:1),{items:ee}=e.toRefs(a);e.watch(ee,()=>{C.value||(_.value=1)},{deep:!0});const $=e.ref(C.value?a.serverOptions.rowsPerPage:a.rowsPerPage);e.watch($,n=>{d.value&&(d.value=O(S({},d.value),{page:1,rowsPerPage:n})),_.value=1});const lt=(n,l)=>{let t=null;l==="none"?t="asc":l==="asc"?t="desc":t=null,d.value?d.value=O(S({},d.value),{sortBy:t!==null?n:null,sortType:t}):t===null?E.value=null:E.value={sortBy:n,sortDesc:t==="desc"}},te=e.computed(()=>{if(C.value)return a.items;if(E.value===null)return V.value;const{sortBy:n,sortDesc:l}=E.value;return[...V.value].sort((s,c)=>z(n,s)<z(n,c)?l?1:-1:z(n,s)>z(n,c)?l?-1:1:0)}),v=e.computed(()=>C.value?a.serverItemsLength:V.value.length),ne=e.computed(()=>C.value?_.value*$.value:Math.min(V.value.length,_.value*$.value)),ae=e.computed(()=>(_.value-1)*$.value+1),M=e.computed(()=>Math.ceil(v.value/$.value)),j=e.computed(()=>_.value===M.value),q=e.computed(()=>_.value===1),{loading:T}=e.toRefs(a),J=()=>{if(!j.value&&!T.value)if(d.value){const n=_.value+1;d.value=O(S({},d.value),{page:n})}else _.value+=1},U=()=>{if(!q.value&&!T.value)if(d.value){const n=_.value-1;d.value=O(S({},d.value),{page:n})}else _.value-=1},oe=n=>{T.value||(d.value?d.value=O(S({},d.value),{page:n}):_.value=n)};e.watch(T,(n,l)=>{d.value&&n===!1&&l===!0&&(_.value=d.value.page)});const le=e.computed(()=>C.value?a.items:te.value.slice(ae.value-1,ne.value)),se=e.computed(()=>$.value*(_.value-1)+1),st=e.computed(()=>$.value*_.value),W=e.computed(()=>a.showIndex?le.value.map((n,l)=>S({index:se.value+l},n)):le.value),re=e.computed(()=>k.value?D.value==="allSelected"?W.value.map(n=>S({checkbox:!0},n)):D.value==="noneSelected"?W.value.map(n=>S({checkbox:!1},n)):W.value.map(n=>{const l=P.value.findIndex(t=>{const s=S({},n);return delete s.index,JSON.stringify(t)===JSON.stringify(s)})!==-1;return S({checkbox:l},n)}):W.value),rt=n=>{P.value=n?te.value:[]},it=n=>{const l=n.checkbox;if(delete n.checkbox,delete n.index,l)P.value=P.value.filter(t=>JSON.stringify(t)!==JSON.stringify(n));else{const t=P.value;t.unshift(n),P.value=t}},ct=n=>{const l=S({},n);if(k.value){const{checkbox:t}=n;delete l.checkbox,l.isSelected=t}if(a.showIndex){const{index:t}=n;delete l.index,l.indexInCurrentPage=t}r("clickRow",l)};return h({clientItemsLength:v,currentPageFirstIndex:se,currentPageLastIndex:st,maxPaginationNumber:M,currentPaginationNumber:_,isLastPage:j,isFirstPage:q,nextPage:J,prevPage:U,updatePage:oe}),(n,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataTable",ref:p,class:e.normalizeClass(["vue3-easy-data-table",[o.tableClassName]])},[e.createElementVNode("div",{ref_key:"tableBody",ref:B,class:e.normalizeClass(["vue3-easy-data-table__main",{"fixed-header":o.fixedHeader,"fixed-height":o.tableHeight,"show-shadow":b.value,"table-fixed":e.unref(I).length,hoverable:!o.noHover}])},[e.createElementVNode("table",null,[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F),(t,s)=>(e.openBlock(),e.createElementBlock("col",{key:s,style:e.normalizeStyle(nt(t))},null,4))),128))]),e.unref(F).length&&!o.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:0,class:e.normalizeClass(["vue3-easy-data-table__header",[o.headerClassName]])},[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F),(t,s)=>(e.openBlock(),e.createElementBlock("th",{key:s,class:e.normalizeClass([{sortable:t.sortable,none:t.sortable&&t.sortType==="none",desc:t.sortable&&t.sortType==="desc",asc:t.sortable&&t.sortType==="asc",shadow:t.value===e.unref(Q)},typeof o.headerItemClassName=="string"?o.headerItemClassName:o.headerItemClassName(t,s)]),style:e.normalizeStyle(X(t.value)),onClick:e.withModifiers(c=>t.sortable&&t.sortType?lt(t.value,t.sortType):null,["stop"])},[t.text==="checkbox"?(e.openBlock(),e.createBlock(ge,{key:e.unref(D),status:e.unref(D),onChange:rt},null,8,["status"])):(e.openBlock(),e.createElementBlock("span",Ae,[e.unref(x)[`header-${t.value}`]?e.renderSlot(n.$slots,`header-${t.value}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):(e.openBlock(),e.createElementBlock("span",De,e.toDisplayString(t.text),1)),t.sortable?(e.openBlock(),e.createElementBlock("i",{key:t.sortType?t.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:t.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)]))],14,He))),128))])],2)):e.createCommentVNode("",!0),e.unref(ee).length&&e.unref(Y).length?(e.openBlock(),e.createElementBlock("tbody",{key:1,class:e.normalizeClass(["vue3-easy-data-table__body",{"row-alternation":o.alternating}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(re),(t,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:s},[e.createElementVNode("tr",{class:e.normalizeClass([{"even-row":(s+1)%2===0},typeof o.bodyRowClassName=="string"?o.bodyRowClassName:o.bodyRowClassName(t,s)]),onClick:c=>ct(t)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Y),(c,g)=>(e.openBlock(),e.createElementBlock("td",{key:g,style:e.normalizeStyle(X(c,"td")),class:e.normalizeClass([{shadow:c===e.unref(Q),"can-expand":c==="expand"},typeof o.bodyItemClassName=="string"?o.bodyItemClassName:o.bodyItemClassName(c,g)]),onClick:N=>c==="expand"?tt(s,t,N):null},[e.unref(x)[`item-${c}`]?e.renderSlot(n.$slots,`item-${c}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):c==="expand"?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(["expand-icon",{expanding:R.value.includes(s)}])},null,2)):c==="checkbox"?(e.openBlock(),e.createBlock(ke,{key:2,checked:t[c],onChange:N=>it(t)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(ot(c,t)),1)],64))],14,je))),128))],10,Me),e.unref(i)&&R.value.includes(s)?(e.openBlock(),e.createElementBlock("tr",{key:0,class:e.normalizeClass({"even-row":(s+1)%2===0})},[e.createElementVNode("td",{colspan:e.unref(F).length,class:"expand"},[t.expandLoading?(e.openBlock(),e.createBlock(Ee,{key:0,class:"expand-loading"})):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"expand",e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)],8,qe)],2)):e.createCommentVNode("",!0)],64))),128))],2)):e.createCommentVNode("",!0)]),e.unref(T)?(e.openBlock(),e.createElementBlock("div",We,[ve,e.createElementVNode("div",Je,[e.unref(u)?e.renderSlot(n.$slots,"loading",{key:0},void 0,!0):(e.openBlock(),e.createBlock(Ie,{key:1}))])])):e.createCommentVNode("",!0),!e.unref(re).length&&!e.unref(T)?(e.openBlock(),e.createElementBlock("div",Ue,e.toDisplayString(o.emptyMessage),1)):e.createCommentVNode("",!0)],2),o.hideFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ge,[o.hideRowsPerPage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ke,[e.createTextVNode(e.toDisplayString(o.rowsPerPageMessage)+" ",1),e.createVNode(Be,{modelValue:$.value,"onUpdate:modelValue":l[0]||(l[0]=t=>$.value=t),"rows-items":e.unref(Xe)},null,8,["modelValue","rows-items"])])),e.createElementVNode("div",Qe,e.toDisplayString(`${e.unref(ae)}-${e.unref(ne)}`)+" of "+e.toDisplayString(e.unref(v)),1),e.unref(w)?e.renderSlot(n.$slots,"pagination",e.normalizeProps(e.mergeProps({key:1},{isFirstPage:e.unref(q),isLastPage:e.unref(j),currentPaginationNumber:_.value,maxPaginationNumber:e.unref(M),nextPage:J,prevPage:U})),void 0,!0):(e.openBlock(),e.createBlock(Re,{key:2,"is-first-page":e.unref(q),"is-last-page":e.unref(j),onClickNextPage:J,onClickPrevPage:U},e.createSlots({_:2},[o.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(Te,{"current-pagination-number":_.value,"max-pagination-number":e.unref(M),onUpdatePage:oe},null,8,["current-pagination-number","max-pagination-number"])])}:void 0]),1032,["is-first-page","is-last-page"]))]))],2))}}),[["__scopeId","data-v-79758d78"]]);return typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("Vue3EasyDataTable",K),K});
+(function(e,x){typeof exports=="object"&&typeof module!="undefined"?module.exports=x(require("vue")):typeof define=="function"&&define.amd?define(["vue"],x):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=x(e.Vue))})(this,function(e){"use strict";var Tt=Object.defineProperty,zt=Object.defineProperties;var Ht=Object.getOwnPropertyDescriptors;var ke=Object.getOwnPropertySymbols;var Lt=Object.prototype.hasOwnProperty,Ot=Object.prototype.propertyIsEnumerable;var be=(e,x,m)=>x in e?Tt(e,x,{enumerable:!0,configurable:!0,writable:!0,value:m}):e[x]=m,C=(e,x)=>{for(var m in x||(x={}))Lt.call(x,m)&&be(e,m,x[m]);if(ke)for(var m of ke(x))Ot.call(x,m)&&be(e,m,x[m]);return e},R=(e,x)=>zt(e,Ht(x));var x="",m=(r,h)=>{const l=r.__vccOpts||r;for(const[n,f]of h)l[n]=f;return l};const Ce=r=>(e.pushScopeId("data-v-566775ba"),r=r(),e.popScopeId(),r),Be=["onClick"],Se=["checked"],Pe=Ce(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var we=m(e.defineComponent({props:{status:{type:String,required:!0}},emits:["change"],setup(r,{emit:h}){const l=r;e.useCssVars(w=>({"7f84b28f":e.unref(b)}));const n=e.computed(()=>l.status==="allSelected"),f=()=>{h("change",!n.value)},b=e.inject("themeColor");return(w,z)=>(e.openBlock(),e.createElementBlock("div",{class:"multi-select__checkbox",onClick:e.withModifiers(f,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(n),class:e.normalizeClass(r.status)},null,10,Se),Pe],8,Be))}}),[["__scopeId","data-v-566775ba"]]),At="";const Ne=r=>(e.pushScopeId("data-v-39f156fd"),r=r(),e.popScopeId(),r),$e=["checked"],Ee=Ne(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var Ie=m(e.defineComponent({props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(r,{emit:h}){e.useCssVars(n=>({"20cfc5a0":e.unref(l)}));const l=e.inject("themeColor");return(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:"single-select__checkbox",onClick:f[0]||(f[0]=e.withModifiers(b=>h("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:r.checked},null,8,$e),Ee]))}}),[["__scopeId","data-v-39f156fd"]]),Dt="";const Ve=r=>(e.pushScopeId("data-v-0ed08e20"),r=r(),e.popScopeId(),r),Fe={class:"easy-data-table__rows-selector"},Te={class:"rows-input"},ze=Ve(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),He=["onClick"];var Le=m(e.defineComponent({props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(r,{emit:h}){const l=r;e.useCssVars(y=>({"83c11052":e.unref(g),"6b60f418":e.unref(i),"346ac97c":e.unref(d)}));const n=e.ref(!1),f=e.ref(!1),b=e.inject("dataTable");e.watch(n,y=>{if(y&&b){const B=window.innerHeight,k=b.value.getBoundingClientRect().height,I=b.value.getBoundingClientRect().top;B-(k+I)<=100?f.value=!0:f.value=!1}});const w=e.computed({get:()=>l.modelValue,set:y=>{h("update:modelValue",y)}}),z=y=>{w.value=y,n.value=!1},A=(y,B)=>{let k=y.parentNode;for(;k!=null;){if(k.classList&&k.classList.contains(B))return!0;k=k.parentNode}return!1},H=y=>{A(y.target,"easy-data-table__rows-selector")||(n.value=!1)};e.onMounted(()=>{document.addEventListener("click",H)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",H)});const d=e.inject("themeColor"),i=e.inject("footerBackgroundColor"),g=e.inject("footerFontColor");return(y,B)=>(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:B[0]||(B[0]=k=>n.value=!n.value)},[e.createElementVNode("div",Te,e.toDisplayString(e.unref(w)),1),ze]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:n.value,inside:f.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.rowsItems,k=>(e.openBlock(),e.createElementBlock("li",{key:k,class:e.normalizeClass({selected:k===e.unref(w)}),onClick:I=>z(k)},e.toDisplayString(k),11,He))),128))],2)]))}}),[["__scopeId","data-v-0ed08e20"]]),Wt="";const j=r=>(e.pushScopeId("data-v-969989cc"),r=r(),e.popScopeId(),r),Oe={class:"lds-ring"},Re=[j(()=>e.createElementVNode("div",null,null,-1)),j(()=>e.createElementVNode("div",null,null,-1)),j(()=>e.createElementVNode("div",null,null,-1)),j(()=>e.createElementVNode("div",null,null,-1))];var Ae=m(e.defineComponent({setup(r){e.useCssVars(n=>({"284c10f4":e.unref(l),"90c4d0a4":e.unref(h)}));const h=e.inject("themeColor"),l=e.inject("loadingEntitySizePx");return(n,f)=>(e.openBlock(),e.createElementBlock("div",Oe,Re))}}),[["__scopeId","data-v-969989cc"]]),Qt="";const Me={class:"loader-line"};var De=m(e.defineComponent({setup(r){e.useCssVars(l=>({"0d327f57":e.unref(h)}));const h=e.inject("themeColor");return(l,n)=>(e.openBlock(),e.createElementBlock("div",Me))}}),[["__scopeId","data-v-7d281cac"]]),Yt="";const je={class:"buttons-pagination"},We=["onClick"];var qe=m(e.defineComponent({props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(r,{emit:h}){const l=r;e.useCssVars(d=>({aa5730a0:e.unref(z),"24829312":e.unref(A),"98a0e762":e.unref(H)}));const n=7,f=d=>{d.type==="button"&&!d.active&&h("updatePage",d.page)},b=e.computed(()=>{const d=[];if(l.maxPaginationNumber<=n)for(let i=1;i<=l.maxPaginationNumber;i+=1)d.push({type:"button",page:i,active:i===l.currentPaginationNumber});else if([1,2,l.maxPaginationNumber,l.maxPaginationNumber-1].includes(l.currentPaginationNumber))for(let i=1;i<=n;i+=1)if(i<=3)d.push({type:"button",page:i,active:i===l.currentPaginationNumber});else if(i===4)d.push({type:"omission"});else{const g=l.maxPaginationNumber-(n-i);d.push({type:"button",page:g,active:g===l.currentPaginationNumber})}else if([3,4].includes(l.currentPaginationNumber))for(let i=1;i<=n;i+=1)i<=5?d.push({type:"button",page:i,active:i===l.currentPaginationNumber}):i===6?d.push({type:"omission"}):d.push({type:"button",page:l.maxPaginationNumber,active:l.maxPaginationNumber===l.currentPaginationNumber});else if([l.maxPaginationNumber-2,l.maxPaginationNumber-3].includes(l.currentPaginationNumber))for(let i=1;i<=n;i+=1)if(i===1)d.push({type:"button",page:1,active:l.currentPaginationNumber===1});else if(i===2)d.push({type:"omission"});else{const g=l.maxPaginationNumber-(n-i);d.push({type:"button",page:g,active:g===l.currentPaginationNumber})}else for(let i=1;i<=n;i+=1)if(i===1)d.push({type:"button",page:1,active:l.currentPaginationNumber===1});else if(i===2||i===6)d.push({type:"omission"});else if(i===7)d.push({type:"button",page:l.maxPaginationNumber,active:l.maxPaginationNumber===l.currentPaginationNumber});else{const g=4-i,y=l.currentPaginationNumber-g;d.push({type:"button",page:y,active:y===l.currentPaginationNumber})}return d}),w=e.inject("rowHeight"),z=e.computed(()=>`${w*.6}px`),A=e.inject("rowBorderColor"),H=e.inject("themeColor");return(d,i)=>(e.openBlock(),e.createElementBlock("div",je,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),(g,y)=>(e.openBlock(),e.createElementBlock("div",{key:y,class:e.normalizeClass(["item",{button:g.type==="button",active:g.type==="button"&&g.active,omission:g.type==="omission"}]),onClick:B=>f(g)},e.toDisplayString(g.type==="button"?g.page:"..."),11,We))),128))]))}}),[["__scopeId","data-v-4f534e20"]]),vt="";const te=r=>(e.pushScopeId("data-v-c9da5286"),r=r(),e.popScopeId(),r),Je=[te(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],Ue=[te(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var Ge=m(e.defineComponent({props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(r,{emit:h}){const l=e.useSlots();return(n,f)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":r.isFirstPage}]),onClick:f[0]||(f[0]=b=>h("clickPrevPage"))},Je,2),e.unref(l).buttonsPagination?e.renderSlot(n.$slots,"buttonsPagination",{key:0},void 0,!0):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["next-page__click-button",{"last-page":r.isLastPage}]),onClick:f[1]||(f[1]=b=>h("clickNextPage"))},Ue,2)],64))}}),[["__scopeId","data-v-c9da5286"]]),no="";const Ke={key:0},Qe=["onClick"],Xe={key:1,class:"header-item"},Ye={key:1,class:"header-text"},Ze=["onClick"],ve=["onClick"],et=["colspan"],tt={class:"loading-entity"},ot={key:1,class:"data-table__message"},nt={key:0,class:"data-table__footer"},at={key:0,class:"footer__rows-per-page"},rt={class:"footer__items-index"};var oe=m(e.defineComponent({props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},rowBorderColor:{type:String,default:"#e0e0e0"},tableBorderColor:{type:String,default:"#e0e0e0"},rowBackgroundColor:{type:String,default:"#fff"},footerBackgroundColor:{type:String,default:"#fff"},rowFontColor:{type:String,default:"#212121"},footerFontColor:{type:String,default:"#212121"},emptyMessage:{type:String,default:"No Available Data"},fixedHeader:{type:Boolean,default:!0},headerFontColor:{type:String,default:"#373737"},headerBackgroundColor:{type:String,default:"#fff"},tableFontSize:{type:Number,default:12},evenRowBackgroundColor:{type:String,default:"#fafafa"},evenRowFontColor:{type:String,default:"#212121"},headers:{type:Array,required:!0},hoverToChangeColor:{type:Boolean,default:!0},items:{type:Array,required:!0},tableHeight:{type:Number,default:()=>null},itemsSelected:{type:Array,default:null},searchField:{type:String,default:""},searchValue:{type:String,default:""},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowHoverBackgroundColor:{type:String,default:"#eee"},rowHoverFontColor:{type:String,default:"#212121"},loading:{type:Boolean,deault:!1},serverOptions:{type:Object,default:null},serverItemsLength:{type:Number,default:0},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},themeColor:{type:String,default:"#42b883"},dense:{type:Boolean,default:!1},showIndex:{type:Boolean,default:!1},hideFooter:{type:Boolean,default:!1},hideHeader:{type:Boolean,default:!1},filterOptions:{type:Array,default:null},fixedCheckbox:{type:Boolean,default:!1},fixedIndex:{type:Boolean,default:!1},indexColumnWidth:{type:Number,default:60},fixedExpand:{type:Boolean,default:!1},expandColumnWidth:{type:Number,default:36},checkboxColumnWidth:{type:Number,default:null},hideRowsPerPage:{type:Boolean,default:!1},noThPadding:{type:Boolean,default:!1},noTdPadding:{type:Boolean,default:!1},rowsPerPageMessage:{type:String,default:"rows per page:"},expandLoading:{type:Boolean,default:!1}},emits:["update:itemsSelected","update:serverOptions","clickRow","expandRow"],setup(r,{expose:h,emit:l}){const n=r;e.useCssVars(o=>({"33e7a759":e.unref(b),f53a42de:e.unref(ct),"5a84ab0b":e.unref(i),da0357e6:e.unref(it),"53324420":e.unref(mt),"5dfaea19":e.unref(lt),"44a88488":e.unref(k),"6448210a":e.unref(z),d9d876d8:e.unref(st),"08be7466":e.unref(f),"0502e8d7":e.unref(w),"5c2ba518":r.headerBackgroundColor,aabe856c:e.unref(dt),"23de51cd":e.unref(pt),"00ec7f9d":e.unref(ut),"6f4b4383":e.unref(A),"53af18fc":e.unref(H),"1693d178":e.unref(y),"5e4b8dc5":e.unref(g),"5088d76c":e.unref(d),ab8ab4ee:e.unref(B)}));const{rowBorderColor:f,tableBorderColor:b,headerFontColor:w,rowFontColor:z,rowHoverBackgroundColor:A,rowHoverFontColor:H,footerBackgroundColor:d,rowBackgroundColor:i,evenRowBackgroundColor:g,evenRowFontColor:y,footerFontColor:B}=e.toRefs(n),k=e.computed(()=>`${n.tableFontSize}px`),I=e.computed(()=>n.tableFontSize*(n.dense?2:3)),lt=e.computed(()=>`${I.value}px`),st=e.computed(()=>`-${I.value}px`),it=e.computed(()=>n.tableHeight?`${n.tableHeight}px`:null),ct=e.computed(()=>`${I.value*5}px`),ne=e.computed(()=>Math.round(n.tableFontSize/2.5)),dt=e.computed(()=>`${ne.value}px`),ae=e.computed(()=>Math.round(ne.value)),pt=e.computed(()=>`-${ae.value}px`),ut=e.computed(()=>`${ae.value}px`),ft=e.computed(()=>`${n.tableFontSize*5}px`),mt=e.computed(()=>n.tableHeight?`${n.tableHeight-I.value}px`:`${n.tableFontSize*5*2}px`),gt=e.computed(()=>{var o;return(o=n.checkboxColumnWidth)!=null?o:1.3*n.tableFontSize+20});e.provide("themeColor",n.themeColor),e.provide("loadingEntitySizePx",ft.value),e.provide("rowHeight",I.value),e.provide("rowBorderColor",f.value),e.provide("footerBackgroundColor",d.value),e.provide("footerFontColor",B.value);const L=e.useSlots(),ht=e.computed(()=>L.body),yt=e.computed(()=>L.pagination),_t=e.computed(()=>L.loading),re=e.computed(()=>L.expand),le=e.ref(),Q=e.ref();e.provide("dataTable",le);const se=e.ref(!1);e.onMounted(()=>{Q.value.addEventListener("scroll",()=>{se.value=Q.value.scrollLeft>0})});const u=e.computed({get:()=>{if(n.serverOptions){const{page:o,rowsPerPage:a,sortBy:t,sortType:s}=n.serverOptions;return{page:o,rowsPerPage:a,sortBy:t!=null?t:null,sortType:s!=null?s:null}}return null},set:o=>{l("update:serverOptions",o)}}),X=e.computed(()=>n.itemsSelected!==null),S=e.computed(()=>u.value!==null),xt=e.computed(()=>!S.value&&n.rowsItems.findIndex(o=>o===n.rowsPerPage)===-1?[n.rowsPerPage,...n.rowsItems]:n.rowsItems),kt=()=>n.sortBy!==""?{sortBy:n.sortBy,sortDesc:n.sortType==="desc"}:null,V=e.ref(kt()),W=e.computed(()=>n.headers.findIndex(o=>o.fixed)!==-1),bt=e.computed(()=>W.value?n.headers.filter(o=>o.fixed):[]),Ct=e.computed(()=>n.headers.filter(o=>!o.fixed)),O=e.computed(()=>{const a=[...bt.value,...Ct.value].map(p=>{const E=p;return p.sortable&&(E.sortType="none"),u.value&&p.value===u.value.sortBy&&u.value.sortType&&(E.sortType=u.value.sortType),!S.value&&V.value&&p.value===V.value.sortBy&&(E.sortType=V.value.sortDesc?"desc":"asc"),E});let t=[];re.value?t=[n.fixedExpand||W.value?{text:"",value:"expand",fixed:!0,width:n.expandColumnWidth}:{text:"",value:"expand"},...a]:t=a;let s=[];n.showIndex?s=[n.fixedIndex||W.value?{text:"#",value:"index",fixed:!0,width:n.indexColumnWidth}:{text:"#",value:"index"},...t]:s=t;let c=[];return X.value?c=[n.fixedCheckbox||W.value?{text:"checkbox",value:"checkbox",fixed:!0,width:gt.value}:{text:"checkbox",value:"checkbox"},...s]:c=s,c}),M=e.ref([]),Bt=(o,a,t)=>{t.stopPropagation();const s=M.value.indexOf(o);s!==-1?M.value.splice(s,1):(l("expandRow",n.items.findIndex(c=>c===a)),M.value.push(o))},N=e.computed(()=>O.value.filter(o=>o.fixed)),ie=e.computed(()=>N.value.length?N.value[N.value.length-1].value:""),St=o=>{var t;const a=(t=o.width)!=null?t:N.value.length?100:null;if(a)return`width: ${a}px; min-width: ${a}px;`},Pt=e.computed(()=>{if(!N.value.length)return[];const o=N.value.map(a=>{var t;return(t=a.width)!=null?t:100});return N.value.map((a,t)=>{var s,c;return{value:a.value,fixed:(s=a.fixed)!=null?s:!0,width:(c=a.width)!=null?c:100,distance:t===0?0:o.reduce((p,E,Ft)=>{let xe=p;return Ft<t&&(xe+=E),xe})}})}),ce=(o,a="th")=>{if(!N.value.length)return;const t=Pt.value.find(s=>s.value===o);if(t)return`left: ${t.distance}px;z-index: ${a==="th"?3:1}; position: sticky`},de=e.computed(()=>O.value.map(o=>o.value)),D=(o,a)=>{if(o.includes(".")){let t="";return o.split(".").forEach((c,p)=>{t=p===0?a[c]:t[c]}),t}return a[o]},wt=(o,a)=>{const t=D(o,a);return Array.isArray(t)?t.join(","):t},P=e.computed({get:()=>{var o;return(o=n.itemsSelected)!=null?o:[]},set:o=>{l("update:itemsSelected",o)}}),pe=e.computed(()=>{if(!S.value&&n.searchValue!==""){const o=new RegExp(n.searchValue,"i");return n.items.filter(a=>o.test(n.searchField!==""?a[n.searchField]:Object.values(a).join(" ")))}return n.items}),F=e.computed(()=>{let o=[...pe.value];return n.filterOptions?(n.filterOptions.forEach(a=>{o=o.filter(t=>{const{field:s,comparison:c,criteria:p}=a;switch(c){case"=":return t[s]===p;case"!=":return t[s]!==p;case">":return t[s]>p;case"<":return t[s]<p;case"<=":return t[s]<=p;case">=":return t[s]>=p;case"between":return t[s]>=Math.min(...p)&&t[s]<=Math.max(...p);default:return t[s]===p}})}),o):pe.value}),q=e.computed(()=>P.value.length===0||P.value.every(a=>F.value.findIndex(t=>JSON.stringify(a)===JSON.stringify(t))===-1)?"noneSelected":P.value.length===F.value.length&&P.value.every(t=>F.value.findIndex(s=>JSON.stringify(t)===JSON.stringify(s))!==-1)?"allSelected":"partSelected"),_=e.ref(S.value?n.serverOptions.page:1),{items:Y}=e.toRefs(n);e.watch(Y,()=>{S.value||(_.value=1)},{deep:!0});const $=e.ref(S.value?n.serverOptions.rowsPerPage:n.rowsPerPage);e.watch($,o=>{u.value&&(u.value=R(C({},u.value),{page:1,rowsPerPage:o})),_.value=1});const Nt=(o,a)=>{let t=null;a==="none"?t="asc":a==="asc"?t="desc":t=null,u.value?u.value=R(C({},u.value),{sortBy:t!==null?o:null,sortType:t}):t===null?V.value=null:V.value={sortBy:o,sortDesc:t==="desc"}},ue=e.computed(()=>{if(S.value)return n.items;if(V.value===null)return F.value;const{sortBy:o,sortDesc:a}=V.value;return[...F.value].sort((s,c)=>D(o,s)<D(o,c)?a?1:-1:D(o,s)>D(o,c)?a?-1:1:0)}),Z=e.computed(()=>S.value?n.serverItemsLength:F.value.length),fe=e.computed(()=>S.value?_.value*$.value:Math.min(F.value.length,_.value*$.value)),me=e.computed(()=>(_.value-1)*$.value+1),J=e.computed(()=>Math.ceil(Z.value/$.value)),U=e.computed(()=>_.value===J.value),G=e.computed(()=>_.value===1),{loading:T}=e.toRefs(n),v=()=>{if(!U.value&&!T.value)if(u.value){const o=_.value+1;u.value=R(C({},u.value),{page:o})}else _.value+=1},ee=()=>{if(!G.value&&!T.value)if(u.value){const o=_.value-1;u.value=R(C({},u.value),{page:o})}else _.value-=1},ge=o=>{T.value||(u.value?u.value=R(C({},u.value),{page:o}):_.value=o)};e.watch(T,(o,a)=>{u.value&&o===!1&&a===!0&&(_.value=u.value.page)});const he=e.computed(()=>S.value?n.items:ue.value.slice(me.value-1,fe.value)),ye=e.computed(()=>$.value*(_.value-1)+1),$t=e.computed(()=>$.value*_.value),K=e.computed(()=>n.showIndex?he.value.map((o,a)=>C({index:ye.value+a},o)):he.value),_e=e.computed(()=>X.value?q.value==="allSelected"?K.value.map(o=>C({checkbox:!0},o)):q.value==="noneSelected"?K.value.map(o=>C({checkbox:!1},o)):K.value.map(o=>{const a=P.value.findIndex(t=>{const s=C({},o);return delete s.index,JSON.stringify(t)===JSON.stringify(s)})!==-1;return C({checkbox:a},o)}):K.value),Et=o=>{P.value=o?ue.value:[]},It=o=>{const a=o.checkbox;if(delete o.checkbox,delete o.index,a)P.value=P.value.filter(t=>JSON.stringify(t)!==JSON.stringify(o));else{const t=P.value;t.unshift(o),P.value=t}},Vt=o=>{const a=C({},o);if(X.value){const{checkbox:t}=o;delete a.checkbox,a.isSelected=t}if(n.showIndex){const{index:t}=o;delete a.index,a.indexInCurrentPage=t}l("clickRow",a)};return h({clientItemsLength:Z,currentPageFirstIndex:ye,currentPageLastIndex:$t,maxPaginationNumber:J,currentPaginationNumber:_,isLastPage:U,isFirstPage:G,nextPage:v,prevPage:ee,updatePage:ge}),(o,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataTable",ref:le,class:"vue3-easy-data-table"},[e.createElementVNode("div",{ref_key:"tableBody",ref:Q,class:e.normalizeClass(["data-table__body",{"fixed-header":r.fixedHeader,"fixed-height":r.tableHeight,"show-shadow":se.value}])},[e.createElementVNode("table",{class:e.normalizeClass({fixed:e.unref(N).length})},[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O),(t,s)=>(e.openBlock(),e.createElementBlock("col",{key:s,style:e.normalizeStyle(St(t))},null,4))),128))]),e.unref(O).length&&!r.hideHeader?(e.openBlock(),e.createElementBlock("thead",Ke,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O),(t,s)=>(e.openBlock(),e.createElementBlock("th",{key:s,class:e.normalizeClass({sortable:t.sortable,none:t.sortable&&t.sortType==="none",desc:t.sortable&&t.sortType==="desc",asc:t.sortable&&t.sortType==="asc",fixed:t.fixed,"has-shadow":t.value===e.unref(ie),"no-padding":r.noThPadding}),style:e.normalizeStyle(ce(t.value)),onClick:e.withModifiers(c=>t.sortable&&t.sortType?Nt(t.value,t.sortType):null,["stop"])},[t.text==="checkbox"?(e.openBlock(),e.createBlock(we,{key:e.unref(q),status:e.unref(q),onChange:Et},null,8,["status"])):(e.openBlock(),e.createElementBlock("span",Xe,[e.unref(L)[`header-${t.value}`]?e.renderSlot(o.$slots,`header-${t.value}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):(e.openBlock(),e.createElementBlock("span",Ye,e.toDisplayString(t.text),1)),t.sortable?(e.openBlock(),e.createElementBlock("i",{key:t.sortType?t.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:t.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)]))],14,Qe))),128))])])):e.createCommentVNode("",!0),e.unref(ht)?e.renderSlot(o.$slots,"body",{key:1},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.unref(Y).length&&e.unref(de).length?(e.openBlock(),e.createElementBlock("tbody",{key:0,class:e.normalizeClass({"row-alternation":r.alternating,"hover-to-change-color":r.hoverToChangeColor})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_e),(t,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:s},[e.createElementVNode("tr",{class:e.normalizeClass({"even-row":(s+1)%2===0}),onClick:c=>Vt(t)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(de),(c,p)=>(e.openBlock(),e.createElementBlock("td",{key:p,style:e.normalizeStyle(ce(c,"td")),class:e.normalizeClass({"has-shadow":c===e.unref(ie),"no-padding":r.noTdPadding,"can-expand":c==="expand"}),onClick:E=>c==="expand"?Bt(s,t,E):null},[e.unref(L)[`item-${c}`]?e.renderSlot(o.$slots,`item-${c}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):c==="expand"?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(["expand-icon",{expanding:M.value.includes(s)}])},null,2)):c==="checkbox"?(e.openBlock(),e.createBlock(Ie,{key:2,checked:t[c],onChange:E=>It(t)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(wt(c,t)),1)],64))],14,ve))),128))],10,Ze),e.unref(re)&&M.value.includes(s)?(e.openBlock(),e.createElementBlock("tr",{key:0,class:e.normalizeClass({"even-row":(s+1)%2===0})},[e.createElementVNode("td",{colspan:e.unref(O).length,class:"expand"},[t.expandLoading?(e.openBlock(),e.createBlock(De,{key:0,class:"expand-loading"})):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"expand",e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)],8,et)],2)):e.createCommentVNode("",!0)],64))),128))],2)):e.createCommentVNode("",!0)],64))],2),e.unref(T)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["loading-wrapper",{"initial-loading":!e.unref(Y).length&&e.unref(T)}])},[e.createElementVNode("div",{class:e.normalizeClass(["loading-mask",{"no-footer":r.hideFooter}])},null,2),e.createElementVNode("div",tt,[e.unref(_t)?e.renderSlot(o.$slots,"loading",{key:0},void 0,!0):(e.openBlock(),e.createBlock(Ae,{key:1}))])],2)):e.createCommentVNode("",!0),!e.unref(_e).length&&!e.unref(T)?(e.openBlock(),e.createElementBlock("div",ot,e.toDisplayString(r.emptyMessage),1)):e.createCommentVNode("",!0)],2),r.hideFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",nt,[r.hideRowsPerPage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",at,[e.createTextVNode(e.toDisplayString(r.rowsPerPageMessage)+" ",1),e.createVNode(Le,{modelValue:$.value,"onUpdate:modelValue":a[0]||(a[0]=t=>$.value=t),"rows-items":e.unref(xt)},null,8,["modelValue","rows-items"])])),e.createElementVNode("div",rt,e.toDisplayString(`${e.unref(me)}-${e.unref(fe)}`)+" of "+e.toDisplayString(e.unref(Z)),1),e.unref(yt)?e.renderSlot(o.$slots,"pagination",e.normalizeProps(e.mergeProps({key:1},{isFirstPage:e.unref(G),isLastPage:e.unref(U),currentPaginationNumber:_.value,maxPaginationNumber:e.unref(J),nextPage:v,prevPage:ee})),void 0,!0):(e.openBlock(),e.createBlock(Ge,{key:2,"is-first-page":e.unref(G),"is-last-page":e.unref(U),onClickNextPage:v,onClickPrevPage:ee},e.createSlots({_:2},[r.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(qe,{"current-pagination-number":_.value,"max-pagination-number":e.unref(J),onUpdatePage:ge},null,8,["current-pagination-number","max-pagination-number"])])}:void 0]),1032,["is-first-page","is-last-page"]))]))],512))}}),[["__scopeId","data-v-7d408f03"]]);return typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("Vue3EasyDataTable",oe),oe});

package.json

@@ -6,3 +6,3 @@ {
   "private": false,
-  "version": "1.3.5",
+  "version": "1.3.6",
   "types": "./types/main.d.ts",
@@ -9,0 +9,0 @@ "license": "MIT",

README.md

@@ -124,3 +124,3 @@ <p align="center">
 ## Todo
-1. Refactory (use render function instead of slot).
+1. Refactory.
 2. Migrate from color properties to css variables.
@@ -135,4 +135,2 @@ 3. Make table header customizable 🎛️.
 ## Contribution
-If you find any bug or demand any other features, plese let me know by reporting issues.
-
-And making pull requests is also very welcomed!
+Shout out to the people who made new feature requests and reported issues to make this component better.

types/main.d.ts

@@ -40,5 +40,1 @@ export type SortType = 'asc' | 'desc'
 }
-
-export type HeaderItemClassNameFunction = (header: Header, index: number) => string
-export type BodyRowClassNameFunction = (item: Item, index: number) => string
-export type BodyItemClassNameFunction = (column: string, index: number) => string

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97786

increased by6.87%

Lines of code

1491

increased by8.59%

Worsened metrics

Number of lines in readme file

135

decreased by-1.46%

No dependency changes