diff --git a/.gitignore b/.gitignore index 98dc64b..de515fc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .DS_Store -dist/ node_modules/ npm-debug.log yarn-error.log @@ -10,4 +9,4 @@ yarn-error.log *.suo *.ntvs* *.njsproj -*.sln \ No newline at end of file +*.sln diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..a074dfd --- /dev/null +++ b/dist/style.css @@ -0,0 +1 @@ +.easy-checkbox[data-v-e0a0b7f0]{position:relative;width:1.3em;height:1.3em;font-size:var(--easy-table-body-row-font-size);margin:0 auto}.easy-checkbox label[data-v-e0a0b7f0]{cursor:pointer;display:inline;line-height:1.3em;vertical-align:top;clear:both}.easy-checkbox label[data-v-e0a0b7f0]:before,.easy-checkbox label[data-v-e0a0b7f0]:after{content:"";position:absolute;left:0;top:0}.easy-checkbox label[data-v-e0a0b7f0]:before{width:1.3em;height:1.3em;background:#fff;border:1px solid rgba(0,0,0,.54);border-radius:.125em;cursor:pointer;transition:background .3s}.easy-checkbox input[type=checkbox][data-v-e0a0b7f0]{outline:0;visibility:hidden;width:1.3em;margin:0;display:block;float:left;font-size:inherit}.easy-checkbox input[type=checkbox]:checked+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox]:checked+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.5875em);width:.9em;height:.45em;border:.125em solid #fff;border-bottom-style:none;border-right-style:none;border-left-style:none}*[data-v-e0a0b7f0],*[data-v-e0a0b7f0]:before,*[data-v-e0a0b7f0]:after{box-sizing:border-box}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:before,.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:before{background:var(--51ab8a49)}.easy-checkbox[data-v-7e69a276]{position:relative;width:1.3em;height:1.3em;font-size:var(--easy-table-body-row-font-size);margin:0 auto}.easy-checkbox label[data-v-7e69a276]{cursor:pointer;display:inline;line-height:1.3em;vertical-align:top;clear:both}.easy-checkbox label[data-v-7e69a276]:before,.easy-checkbox label[data-v-7e69a276]:after{content:"";position:absolute;left:0;top:0}.easy-checkbox label[data-v-7e69a276]:before{width:1.3em;height:1.3em;background:#fff;border:1px solid rgba(0,0,0,.54);border-radius:.125em;cursor:pointer;transition:background .3s}.easy-checkbox input[type=checkbox][data-v-7e69a276]{outline:0;visibility:hidden;width:1.3em;margin:0;display:block;float:left;font-size:inherit}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-7e69a276]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-7e69a276]:after{transform:translate(.2em,.5875em);width:.9em;height:.45em;border:.125em solid #fff;border-bottom-style:none;border-right-style:none;border-left-style:none}*[data-v-7e69a276],*[data-v-7e69a276]:before,*[data-v-7e69a276]:after{box-sizing:border-box}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:before{background:var(--fdaf7e9e)}.easy-data-table__rows-selector[data-v-4ca5de3a]{display:inline-block;min-width:45px;position:relative;margin:0 10px;width:var(--easy-table-rows-per-page-selector-width)}.easy-data-table__rows-selector .rows-input__wrapper[data-v-4ca5de3a]{height:20px;border-bottom:1px solid var(--easy-table-footer-font-color);display:flex;align-items:center;justify-content:space-between;padding:0 5px;cursor:pointer}.easy-data-table__rows-selector .rows-input__wrapper .triangle[data-v-4ca5de3a]{display:inline-block;vertical-align:middle;width:0px;height:0px;border-top:solid 6px var(--easy-table-footer-font-color);border-left:solid 6px transparent;border-right:solid 6px transparent}.easy-data-table__rows-selector ul.select-items[data-v-4ca5de3a]{position:absolute;top:20px;left:0px;width:100%;display:none;margin:0;padding:0;text-align:left;list-style-type:none;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;z-index:var(--easy-table-rows-per-page-selector-z-index)}.easy-data-table__rows-selector ul.select-items.show[data-v-4ca5de3a]{display:block}.easy-data-table__rows-selector ul.select-items.inside[data-v-4ca5de3a]{bottom:0px;top:auto}.easy-data-table__rows-selector ul.select-items li[data-v-4ca5de3a]{cursor:pointer;padding:var(--easy-table-rows-per-page-selector-option-padding);background-color:var(--easy-table-footer-background-color)}.easy-data-table__rows-selector ul.select-items li.selected[data-v-4ca5de3a]{color:#fff;background-color:var(--1b889342)}.lds-ring[data-v-1fa3a520]{display:inline-block;position:relative;width:60px;height:60px}.lds-ring div[data-v-1fa3a520]{box-sizing:border-box;display:block;position:absolute;width:80%;height:80%;margin:8px;border:8px solid #fff;border-radius:50%;animation:lds-ring-1fa3a520 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--26774109) transparent transparent transparent}.lds-ring div[data-v-1fa3a520]:nth-child(1){animation-delay:-.45s}.lds-ring div[data-v-1fa3a520]:nth-child(2){animation-delay:-.3s}.lds-ring div[data-v-1fa3a520]:nth-child(3){animation-delay:-.15s}@keyframes lds-ring-1fa3a520{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-line[data-v-7d281cac]{width:100%;height:3px;position:relative;overflow:hidden;background-color:#ddd;margin:0x auto}.loader-line[data-v-7d281cac]:before{content:"";position:absolute;left:-50%;height:3px;width:40%;background-color:var(--0d327f57);-webkit-animation:lineAnim-7d281cac 1s linear infinite;-moz-animation:lineAnim-7d281cac 1s linear infinite;animation:lineAnim-7d281cac 1s linear infinite}@keyframes lineAnim-7d281cac{0%{left:-40%}50%{left:20%;width:80%}to{left:100%;width:100%}}.buttons-pagination[data-v-4c681fa2]{box-sizing:border-box;display:flex;padding:0;border-radius:4px}.buttons-pagination .item[data-v-4c681fa2]{box-sizing:border-box;cursor:pointer;min-width:calc(var(--easy-table-footer-font-size) * 1.8);line-height:calc(var(--easy-table-footer-font-size) * 1.8);border-top:var(--easy-table-buttons-pagination-border);border-bottom:var(--easy-table-buttons-pagination-border);border-right:var(--easy-table-buttons-pagination-border);text-align:center}.buttons-pagination .item[data-v-4c681fa2]:first-of-type{border-left:var(--easy-table-buttons-pagination-border);border-top-left-radius:4px;border-bottom-left-radius:4px}.buttons-pagination .item[data-v-4c681fa2]:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.buttons-pagination .item.button.active[data-v-4c681fa2]{background-color:var(--40dd4f07);border-left:var(--easy-table-buttons-pagination-border);border-color:var(--40dd4f07)!important;color:#fff}.buttons-pagination .item.button.active-prev[data-v-4c681fa2]{border-right:none}.previous-page__click-button[data-v-c9da5286],.next-page__click-button[data-v-c9da5286]{margin:0 5px;cursor:pointer}.previous-page__click-button .arrow[data-v-c9da5286],.next-page__click-button .arrow[data-v-c9da5286]{display:inline-block;width:8px;height:8px;border-top:2px solid #000;border-left:2px solid #000}.previous-page__click-button .arrow.arrow-left[data-v-c9da5286],.next-page__click-button .arrow.arrow-left[data-v-c9da5286]{transform:rotate(135deg)}.previous-page__click-button .arrow.arrow-right[data-v-c9da5286],.next-page__click-button .arrow.arrow-right[data-v-c9da5286]{transform:rotate(-45deg)}.previous-page__click-button.first-page[data-v-c9da5286],.next-page__click-button.last-page[data-v-c9da5286]{cursor:not-allowed}.previous-page__click-button.first-page .arrow[data-v-c9da5286],.next-page__click-button.last-page .arrow[data-v-c9da5286]{border-color:#e0e0e0}:root{--easy-table-border: 1px solid #e0e0e0;--easy-table-row-border: 1px solid #e0e0e0;--easy-table-header-font-size: 12px;--easy-table-header-height: 36px;--easy-table-header-font-color: #373737;--easy-table-header-background-color: #fff;--easy-table-header-item-padding: 0px 10px;--easy-table-body-row-height: 36px;--easy-table-body-row-font-size: 12px;--easy-table-body-row-font-color: #212121;--easy-table-body-row-background-color: #fff;--easy-table-body-row-hover-font-color: #212121;--easy-table-body-row-hover-background-color: #eee;--easy-table-body-even-row-font-color: #212121;--easy-table-body-even-row-background-color: #fafafa;--easy-table-body-item-padding: 0px 10px;--easy-table-footer-background-color: #fff;--easy-table-footer-font-color: #212121;--easy-table-footer-font-size: 12px;--easy-table-footer-padding: 0px 5px;--easy-table-footer-height: 36px;--easy-table-rows-per-page-selector-width: auto;--easy-table-rows-per-page-selector-option-padding: 5px;--easy-table-rows-per-page-selector-z-index: auto;--easy-table-message-font-color: #212121;--easy-table-message-font-size: 12px;--easy-table-message-padding: 20px;--easy-table-loading-mask-background-color: #fff;--easy-table-loading-mask-opacity: .5;--easy-table-scrollbar-track-color: #fff;--easy-table-scrollbar-color: #fff;--easy-table-scrollbar-thumb-color: #c1c1c1;--easy-table-scrollbar-corner-color: #fff;--easy-table-buttons-pagination-border: 1px solid #e0e0e0}.vue3-easy-data-table[data-v-513716fe]{border:var(--easy-table-border);position:relative;box-sizing:border-box}.vue3-easy-data-table__main[data-v-513716fe]{border:none;width:100%;overflow:auto;background-color:var(--easy-table-body-row-background-color)}.vue3-easy-data-table__main[data-v-513716fe]::-webkit-scrollbar-track{border-radius:10px;background-color:var(--easy-table-scrollbar-track-color)}.vue3-easy-data-table__main[data-v-513716fe]::-webkit-scrollbar{width:7px;height:7px;background-color:var(--easy-table-scrollbar-color)}.vue3-easy-data-table__main[data-v-513716fe]::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--easy-table-scrollbar-thumb-color)}.vue3-easy-data-table__main[data-v-513716fe]::-webkit-scrollbar-corner{background-color:var(--easy-table-scrollbar-corner-color)}.vue3-easy-data-table__main.table-fixed table[data-v-513716fe]{table-layout:fixed}.vue3-easy-data-table__main.show-shadow th.shadow[data-v-513716fe]:after,.vue3-easy-data-table__main.show-shadow td.shadow[data-v-513716fe]:after{box-shadow:inset 6px 0 5px -3px #0003}.vue3-easy-data-table__main.fixed-header th[data-v-513716fe]{position:sticky;top:0;z-index:2}.vue3-easy-data-table__main.hoverable tr:hover td[data-v-513716fe]{background-color:var(--easy-table-body-row-hover-background-color);color:var(--easy-table-body-row-hover-font-color)}.vue3-easy-data-table__main.hoverable .vue3-easy-data-table__body.row-alternation .even-row:hover td[data-v-513716fe]{color:var(--easy-table-body-row-hover-font-color);background-color:var(--easy-table-body-row-hover-background-color)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__header th[data-v-513716fe]{border-right:var(--easy-table-row-border)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__header th[data-v-513716fe]:last-of-type{border-right:none}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__body td[data-v-513716fe]{border-right:var(--easy-table-row-border)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__body td[data-v-513716fe]:last-of-type{border-right:none}.vue3-easy-data-table__body.row-alternation tr.even-row td[data-v-513716fe]{color:var(--easy-table-body-even-row-font-color);background-color:var(--easy-table-body-even-row-background-color)}table[data-v-513716fe]{border-collapse:initial;display:table;width:100%;border-spacing:0;margin:0}.vue3-easy-data-table__header[data-v-513716fe],vue3-easy-data-table__body[data-v-513716fe]{position:relative}.vue3-easy-data-table__header tr[data-v-513716fe]{font-size:var(--easy-table-header-font-size);border:none;height:var(--easy-table-header-height)}.vue3-easy-data-table__header th[data-v-513716fe]{background-color:var(--easy-table-header-background-color);color:var(--easy-table-header-font-color);border:none;border-bottom:var(--easy-table-row-border);padding:var(--easy-table-header-item-padding);position:relative}.vue3-easy-data-table__header th .header[data-v-513716fe]{display:flex;align-items:center}.vue3-easy-data-table__header th .header.direction-left[data-v-513716fe]{justify-content:flex-start}.vue3-easy-data-table__header th .header.direction-center[data-v-513716fe]{justify-content:center}.vue3-easy-data-table__header th .header.direction-right[data-v-513716fe]{justify-content:flex-end}.vue3-easy-data-table__header th.sortable[data-v-513716fe]{cursor:pointer}.vue3-easy-data-table__header th.sortable .sortType-icon[data-v-513716fe]{border:5px solid transparent;margin-top:-3px;margin-left:4px;display:inline-block;height:0;width:0;position:relative;border-bottom-color:var(--easy-table-header-font-color)}.vue3-easy-data-table__header th.sortable .multi-sort__number[data-v-513716fe]{border-radius:50%;height:1.5em;width:1.5em;line-height:1.5em;margin-left:4px;background-color:var(--easy-table-header-font-color);color:var(--easy-table-header-background-color)}.vue3-easy-data-table__header th.sortable.none:hover .sortType-icon[data-v-513716fe]{opacity:1}.vue3-easy-data-table__header th.sortable.none .sortType-icon[data-v-513716fe]{opacity:0;transition:.5s ease}.vue3-easy-data-table__header th.sortable.desc .sortType-icon[data-v-513716fe]{margin-top:5px;transform:rotate(180deg)}.vue3-easy-data-table__header th.shadow[data-v-513716fe]:after,.vue3-easy-data-table__body td.shadow[data-v-513716fe]:after{pointer-events:none;content:"";width:36px;display:inline-block;height:100%;position:absolute;top:0px;right:-36px;box-shadow:none}.vue3-easy-data-table__body tr[data-v-513716fe]{height:var(--easy-table-body-row-height);color:var(--easy-table-body-row-font-color);font-size:var(--easy-table-body-row-font-size)}.vue3-easy-data-table__body tr:nth-child(-n+3) td[data-v-513716fe]{border-bottom:var(--easy-table-row-border)!important}.vue3-easy-data-table__body tr:last-child td[data-v-513716fe]{border-bottom:none}.vue3-easy-data-table__body tr:first-child td[data-v-513716fe]{border-bottom:var(--easy-table-row-border)}.vue3-easy-data-table__body td[data-v-513716fe]{padding:var(--easy-table-body-item-padding);background-color:var(--easy-table-body-row-background-color);border:none;border-bottom:var(--easy-table-row-border);position:relative}.vue3-easy-data-table__body td.direction-left[data-v-513716fe]{text-align:left}.vue3-easy-data-table__body td.direction-center[data-v-513716fe]{text-align:center}.vue3-easy-data-table__body td.direction-right[data-v-513716fe]{text-align:right}.vue3-easy-data-table__body td .expand-icon[data-v-513716fe]{border:solid;border-color:var(easy-table-body-row-font-color);border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(-45deg);transition:.2s}.vue3-easy-data-table__body td .expand-icon.expanding[data-v-513716fe]{transform:rotate(45deg)}.vue3-easy-data-table__body td.expand[data-v-513716fe]{position:relative}.vue3-easy-data-table__body td.expand .expand-loading[data-v-513716fe]{position:absolute;top:0px;left:0px}.vue3-easy-data-table__body td.can-expand[data-v-513716fe]{cursor:pointer}.vue3-easy-data-table__footer[data-v-513716fe]{background-color:var(--easy-table-footer-background-color);color:var(--easy-table-footer-font-color);border-top:var(--easy-table-row-border);font-size:var(--easy-table-footer-font-size);height:var(--easy-table-footer-height);padding:var(--easy-table-footer-padding);box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:flex-end}.vue3-easy-data-table__footer .pagination__rows-per-page[data-v-513716fe]{display:flex;align-items:center}.vue3-easy-data-table__footer .pagination__items-index[data-v-513716fe]{margin:0 20px 0 10px}.vue3-easy-data-table__message[data-v-513716fe]{color:var(--easy-table-message-font-color);font-size:var(--easy-table-message-font-size);padding:var(--easy-table-message-padding);text-align:center}.vue3-easy-data-table__loading[data-v-513716fe]{z-index:3;overflow:hidden;position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;align-items:center;justify-content:center}.vue3-easy-data-table__loading .loading-entity[data-v-513716fe]{z-index:1}.vue3-easy-data-table__loading-mask[data-v-513716fe]{background-color:var(--easy-table-loading-mask-background-color);opacity:var(--easy-table-loading-mask-opacity);position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:1}.vue3-easy-data-table__main[data-v-513716fe]{min-height:var(--ed764a26)}.vue3-easy-data-table__main.fixed-height[data-v-513716fe]{height:var(--787ca023)} diff --git a/dist/vue3-easy-data-table.es.js b/dist/vue3-easy-data-table.es.js new file mode 100644 index 0000000..dcd3ae5 --- /dev/null +++ b/dist/vue3-easy-data-table.es.js @@ -0,0 +1,1652 @@ +var __defProp = Object.defineProperty; +var __defProps = Object.defineProperties; +var __getOwnPropDescs = Object.getOwnPropertyDescriptors; +var __getOwnPropSymbols = Object.getOwnPropertySymbols; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __propIsEnum = Object.prototype.propertyIsEnumerable; +var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; +var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; +}; +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, toRefs, provide, normalizeStyle, createBlock, normalizeProps, mergeProps, guardReactiveProps, createTextVNode, createVNode, isRef, createSlots, withCtx } from "vue"; +var MultipleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = ""; +var _export_sfc = (sfc, props) => { + const target = sfc.__vccOpts || sfc; + for (const [key, val] of props) { + target[key] = val; + } + return target; +}; +const _withScopeId$5 = (n) => (pushScopeId("data-v-e0a0b7f0"), 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 _sfc_main$7 = /* @__PURE__ */ defineComponent({ + __name: "MultipleSelectCheckBox", + props: { + status: { type: String, required: true } + }, + emits: ["change"], + setup(__props, { emit: emits }) { + const props = __props; + useCssVars((_ctx) => ({ + "51ab8a49": unref(themeColor) + })); + const isChecked = computed(() => props.status === "allSelected"); + const toggleChecked = () => { + emits("change", !isChecked.value); + }; + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", { + class: "easy-checkbox", + onClick: withModifiers(toggleChecked, ["stop", "prevent"]) + }, [ + createElementVNode("input", { + type: "checkbox", + checked: unref(isChecked), + class: normalizeClass(__props.status) + }, null, 10, _hoisted_2$6), + _hoisted_3$4 + ], 8, _hoisted_1$7); + }; + } +}); +var MultipleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e0a0b7f0"]]); +var SingleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = ""; +const _withScopeId$4 = (n) => (pushScopeId("data-v-7e69a276"), n = n(), popScopeId(), n); +const _hoisted_1$6 = ["checked"]; +const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1)); +const _sfc_main$6 = /* @__PURE__ */ defineComponent({ + __name: "SingleSelectCheckBox", + props: { + checked: { type: Boolean, required: true } + }, + emits: ["change"], + setup(__props, { emit: emits }) { + useCssVars((_ctx) => ({ + "fdaf7e9e": unref(themeColor) + })); + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", { + class: "easy-checkbox", + onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emits("change"), ["stop", "prevent"])) + }, [ + createElementVNode("input", { + type: "checkbox", + checked: __props.checked + }, null, 8, _hoisted_1$6), + _hoisted_2$5 + ]); + }; + } +}); +var SingleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e69a276"]]); +var RowsSelector_vue_vue_type_style_index_0_scoped_true_lang = ""; +const _withScopeId$3 = (n) => (pushScopeId("data-v-4ca5de3a"), 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_4$3 = ["onClick"]; +const _sfc_main$5 = /* @__PURE__ */ defineComponent({ + __name: "RowsSelector", + props: { + modelValue: { type: Number, required: true }, + rowsItems: { type: Array, required: true } + }, + emits: ["update:modelValue"], + setup(__props, { emit: emits }) { + const props = __props; + useCssVars((_ctx) => ({ + "1b889342": unref(themeColor) + })); + const showList = ref(false); + const showInsideOfTable = ref(false); + const dataTable = inject("dataTable"); + watch(showList, (val) => { + if (val && dataTable) { + const windowHeight = window.innerHeight; + const dataTableHeight = dataTable.value.getBoundingClientRect().height; + const dataTableTop = dataTable.value.getBoundingClientRect().top; + if (windowHeight - (dataTableHeight + dataTableTop) <= 100) { + showInsideOfTable.value = true; + } else { + showInsideOfTable.value = false; + } + } + }); + const rowsComputed = computed({ + get: () => props.modelValue, + set: (value) => { + emits("update:modelValue", value); + } + }); + const changeSelectedRows = (value) => { + rowsComputed.value = value; + showList.value = false; + }; + const isDescendant = (child, className) => { + let node = child.parentNode; + while (node != null) { + if (node.classList && node.classList.contains(className)) { + return true; + } + node = node.parentNode; + } + return false; + }; + const closeRowsSelector = (e) => { + if (!isDescendant(e.target, "easy-data-table__rows-selector")) + showList.value = false; + }; + onMounted(() => { + document.addEventListener("click", closeRowsSelector); + }); + onBeforeUnmount(() => { + document.removeEventListener("click", closeRowsSelector); + }); + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", _hoisted_1$5, [ + createElementVNode("div", { + class: "rows-input__wrapper", + onClick: _cache[0] || (_cache[0] = ($event) => showList.value = !showList.value) + }, [ + createElementVNode("div", _hoisted_2$4, toDisplayString(unref(rowsComputed)), 1), + _hoisted_3$3 + ]), + createElementVNode("ul", { + class: normalizeClass(["select-items", { show: showList.value, inside: showInsideOfTable.value }]) + }, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rowsItems, (item) => { + return openBlock(), createElementBlock("li", { + key: item, + class: normalizeClass({ selected: item === unref(rowsComputed) }), + onClick: ($event) => changeSelectedRows(item) + }, toDisplayString(item), 11, _hoisted_4$3); + }), 128)) + ], 2) + ]); + }; + } +}); +var RowsSelector = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-4ca5de3a"]]); +var Loading_vue_vue_type_style_index_0_scoped_true_lang = ""; +const _withScopeId$2 = (n) => (pushScopeId("data-v-1fa3a520"), 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_6$1 = [ + _hoisted_2$3, + _hoisted_3$2, + _hoisted_4$2, + _hoisted_5$1 +]; +const _sfc_main$4 = /* @__PURE__ */ defineComponent({ + __name: "Loading", + setup(__props) { + useCssVars((_ctx) => ({ + "26774109": unref(themeColor) + })); + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", _hoisted_1$4, _hoisted_6$1); + }; + } +}); +var Loading = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1fa3a520"]]); +var LoadingLine_vue_vue_type_style_index_0_scoped_true_lang = ""; +const _hoisted_1$3 = { class: "loader-line" }; +const _sfc_main$3 = /* @__PURE__ */ defineComponent({ + __name: "LoadingLine", + setup(__props) { + useCssVars((_ctx) => ({ + "0d327f57": unref(themeColor) + })); + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", _hoisted_1$3); + }; + } +}); +var LoadingLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7d281cac"]]); +var ButtonsPagination_vue_vue_type_style_index_0_scoped_true_lang = ""; +const _hoisted_1$2 = { class: "buttons-pagination" }; +const _hoisted_2$2 = ["onClick"]; +const _sfc_main$2 = /* @__PURE__ */ defineComponent({ + __name: "ButtonsPagination", + props: { + maxPaginationNumber: { type: Number, required: true }, + currentPaginationNumber: { type: Number, required: true } + }, + emits: ["updatePage"], + setup(__props, { emit: emits }) { + const props = __props; + useCssVars((_ctx) => ({ + "40dd4f07": unref(themeColor) + })); + const totalVisible = 7; + const changePage = (item) => { + if (item.type === "button" && !item.active) + emits("updatePage", item.page); + }; + const paginationItemsForRender = computed(() => { + const paginationItems = []; + if (props.maxPaginationNumber <= totalVisible) { + for (let i = 1; i <= props.maxPaginationNumber; i += 1) { + paginationItems.push({ + type: "button", + page: i, + active: i === props.currentPaginationNumber, + activePrev: i + 1 === props.currentPaginationNumber + }); + } + } else if ([1, 2, props.maxPaginationNumber, props.maxPaginationNumber - 1].includes(props.currentPaginationNumber)) { + for (let i = 1; i <= totalVisible; i += 1) { + if (i <= 3) { + paginationItems.push({ + type: "button", + page: i, + active: i === props.currentPaginationNumber, + activePrev: i + 1 === props.currentPaginationNumber + }); + } else if (i === 4) { + paginationItems.push({ + type: "omission" + }); + } else { + const page = props.maxPaginationNumber - (totalVisible - i); + paginationItems.push({ + type: "button", + page, + active: page === props.currentPaginationNumber, + activePrev: page + 1 === props.currentPaginationNumber + }); + } + } + } else if ([3, 4].includes(props.currentPaginationNumber)) { + for (let i = 1; i <= totalVisible; i += 1) { + if (i <= 5) { + paginationItems.push({ + type: "button", + page: i, + active: i === props.currentPaginationNumber, + activePrev: i + 1 === props.currentPaginationNumber + }); + } else if (i === 6) { + paginationItems.push({ + type: "omission" + }); + } else { + paginationItems.push({ + type: "button", + page: props.maxPaginationNumber, + active: props.maxPaginationNumber === props.currentPaginationNumber, + activePrev: i + 1 === props.currentPaginationNumber + }); + } + } + } else if ([props.maxPaginationNumber - 2, props.maxPaginationNumber - 3].includes(props.currentPaginationNumber)) { + for (let i = 1; i <= totalVisible; i += 1) { + if (i === 1) { + paginationItems.push({ + type: "button", + page: 1, + active: props.currentPaginationNumber === 1, + activePrev: i + 1 === props.currentPaginationNumber + }); + } else if (i === 2) { + paginationItems.push({ + type: "omission" + }); + } else { + const page = props.maxPaginationNumber - (totalVisible - i); + paginationItems.push({ + type: "button", + page, + active: page === props.currentPaginationNumber, + activePrev: page + 1 === props.currentPaginationNumber + }); + } + } + } else { + for (let i = 1; i <= totalVisible; i += 1) { + if (i === 1) { + paginationItems.push({ + type: "button", + page: 1, + active: props.currentPaginationNumber === 1, + activePrev: i + 1 === props.currentPaginationNumber + }); + } else if (i === 2 || i === 6) { + paginationItems.push({ + type: "omission" + }); + } else if (i === 7) { + paginationItems.push({ + type: "button", + page: props.maxPaginationNumber, + active: props.maxPaginationNumber === props.currentPaginationNumber, + activePrev: i + 1 === props.currentPaginationNumber + }); + } else { + const diff = 4 - i; + const page = props.currentPaginationNumber - diff; + paginationItems.push({ + type: "button", + page, + active: page === props.currentPaginationNumber, + activePrev: page + 1 === props.currentPaginationNumber + }); + } + } + } + return paginationItems; + }); + const themeColor = inject("themeColor"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", _hoisted_1$2, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(unref(paginationItemsForRender), (item, i) => { + return openBlock(), createElementBlock("div", { + key: i, + class: normalizeClass(["item", { + button: item.type === "button", + active: item.type === "button" && item.active, + "active-prev": item.type === "button" && item.activePrev, + omission: item.type === "omission" + }]), + onClick: ($event) => changePage(item) + }, toDisplayString(item.type === "button" ? item.page : "..."), 11, _hoisted_2$2); + }), 128)) + ]); + }; + } +}); +var ButtonsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4c681fa2"]]); +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 _hoisted_2$1 = [ + _hoisted_1$1 +]; +const _hoisted_3$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "arrow arrow-left" }, null, -1)); +const _hoisted_4$1 = [ + _hoisted_3$1 +]; +const _sfc_main$1 = /* @__PURE__ */ defineComponent({ + __name: "PaginationArrows", + props: { + isFirstPage: { type: Boolean, required: false }, + isLastPage: { type: Boolean, required: false } + }, + emits: ["clickPrevPage", "clickNextPage"], + setup(__props, { emit: emits }) { + const slots = useSlots(); + return (_ctx, _cache) => { + return openBlock(), createElementBlock(Fragment, null, [ + createElementVNode("div", { + class: normalizeClass(["previous-page__click-button", { "first-page": __props.isFirstPage }]), + onClick: _cache[0] || (_cache[0] = ($event) => emits("clickPrevPage")) + }, _hoisted_2$1, 2), + unref(slots).buttonsPagination ? renderSlot(_ctx.$slots, "buttonsPagination", { key: 0 }, void 0, true) : createCommentVNode("", true), + createElementVNode("div", { + class: normalizeClass(["next-page__click-button", { "last-page": __props.isLastPage }]), + onClick: _cache[1] || (_cache[1] = ($event) => emits("clickNextPage")) + }, _hoisted_4$1, 2) + ], 64); + }; + } +}); +var PaginationArrows = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c9da5286"]]); +function useClickRow(clickEventType, isMultipleSelectable, showIndex, emits) { + const clickRow = (item, clickType, $event) => { + if (clickEventType.value !== clickType) + return; + const clickRowArgument = __spreadValues({}, item); + if (isMultipleSelectable.value) { + const { checkbox } = item; + delete clickRowArgument.checkbox; + clickRowArgument.isSelected = checkbox; + } + if (showIndex.value) { + const { index } = item; + delete clickRowArgument.index; + clickRowArgument.indexInCurrentPage = index; + } + emits("clickRow", clickRowArgument, $event); + }; + return { + clickRow + }; +} +function useExpandableRow(items, prevPageEndIndex, emits) { + const expandingItemIndexList = ref([]); + const updateExpandingItemIndexList = (expandingItemIndex, expandingItem, event) => { + event.stopPropagation(); + const index = expandingItemIndexList.value.indexOf(expandingItemIndex); + if (index !== -1) { + expandingItemIndexList.value.splice(index, 1); + } else { + const currentPageExpandIndex = items.value.findIndex((item) => JSON.stringify(item) === JSON.stringify(expandingItem)); + emits("expandRow", prevPageEndIndex.value + currentPageExpandIndex, expandingItem); + expandingItemIndexList.value.push(prevPageEndIndex.value + currentPageExpandIndex); + } + }; + const clearExpandingItemIndexList = () => { + expandingItemIndexList.value = []; + }; + return { + expandingItemIndexList, + updateExpandingItemIndexList, + clearExpandingItemIndexList + }; +} +function useFixedColumn(headersForRender) { + const fixedHeaders = computed(() => headersForRender.value.filter((header) => header.fixed)); + const lastFixedColumn = computed(() => { + if (!fixedHeaders.value.length) + return ""; + return fixedHeaders.value[fixedHeaders.value.length - 1].value; + }); + const fixedColumnsInfos = computed(() => { + if (!fixedHeaders.value.length) + return []; + const fixedHeadersWidthArr = fixedHeaders.value.map((header) => { + var _a; + return (_a = header.width) != null ? _a : 100; + }); + return fixedHeaders.value.map((header, index) => { + var _a, _b; + return { + value: header.value, + fixed: (_a = header.fixed) != null ? _a : true, + width: (_b = header.width) != null ? _b : 100, + distance: index === 0 ? 0 : fixedHeadersWidthArr.reduce((previous, current, i) => { + let distance = previous; + if (i < index) + distance += current; + return distance; + }) + }; + }); + }); + return { + fixedHeaders, + lastFixedColumn, + fixedColumnsInfos + }; +} +function useHeaders(showIndexSymbol, checkboxColumnWidth, expandColumnWidth, fixedCheckbox, fixedExpand, fixedIndex, headers, ifHasExpandSlot, indexColumnWidth, isMultipleSelectable, isServerSideMode, mustSort, serverOptionsComputed, showIndex, sortBy, sortType, multiSort, updateServerOptionsSort, emits) { + const hasFixedColumnsFromUser = computed(() => headers.value.findIndex((header) => header.fixed) !== -1); + const fixedHeadersFromUser = computed(() => { + if (hasFixedColumnsFromUser.value) + return headers.value.filter((header) => header.fixed); + return []; + }); + const unFixedHeaders = computed(() => headers.value.filter((header) => !header.fixed)); + const generateClientSortOptions = (sortByValue, sortTypeValue) => { + if (Array.isArray(sortByValue) && Array.isArray(sortTypeValue)) { + return { + sortBy: sortByValue, + sortDesc: sortTypeValue.map((val) => val === "desc") + }; + } + if (sortByValue !== "") { + return { + sortBy: sortBy.value, + sortDesc: sortType.value === "desc" + }; + } + return null; + }; + const clientSortOptions = ref(generateClientSortOptions(sortBy.value, sortType.value)); + const headersForRender = computed(() => { + var _a; + const fixedHeaders = [ + ...fixedHeadersFromUser.value, + ...unFixedHeaders.value + ]; + const headersSorting = fixedHeaders.map((header) => { + const headerSorting = Object.assign(header); + if (headerSorting.sortable) + headerSorting.sortType = "none"; + if (serverOptionsComputed.value) { + if (Array.isArray(serverOptionsComputed.value.sortBy) && Array.isArray(serverOptionsComputed.value.sortType) && serverOptionsComputed.value.sortBy.includes(headerSorting.value)) { + const index = serverOptionsComputed.value.sortBy.indexOf(headerSorting.value); + headerSorting.sortType = serverOptionsComputed.value.sortType[index]; + } else if (headerSorting.value === serverOptionsComputed.value.sortBy && serverOptionsComputed.value.sortType) { + headerSorting.sortType = serverOptionsComputed.value.sortType; + } + } + if (clientSortOptions.value && Array.isArray(clientSortOptions.value.sortBy) && Array.isArray(clientSortOptions.value.sortDesc) && clientSortOptions.value.sortBy.includes(headerSorting.value)) { + const index = clientSortOptions.value.sortBy.indexOf(headerSorting.value); + headerSorting.sortType = clientSortOptions.value.sortDesc[index] ? "desc" : "asc"; + } else if (clientSortOptions.value && headerSorting.value === clientSortOptions.value.sortBy) { + headerSorting.sortType = clientSortOptions.value.sortDesc ? "desc" : "asc"; + } + return headerSorting; + }); + let headersWithExpand = []; + if (!ifHasExpandSlot.value) { + headersWithExpand = headersSorting; + } else { + const headerExpand = fixedExpand.value || hasFixedColumnsFromUser.value ? { + text: "", + value: "expand", + fixed: true, + width: expandColumnWidth.value + } : { text: "", value: "expand" }; + headersWithExpand = [headerExpand, ...headersSorting]; + } + let headersWithIndex = []; + if (!showIndex.value) { + headersWithIndex = headersWithExpand; + } else { + const headerIndex = fixedIndex.value || hasFixedColumnsFromUser.value ? { + text: showIndexSymbol.value, + value: "index", + fixed: true, + width: indexColumnWidth.value + } : { text: showIndexSymbol.value, value: "index" }; + headersWithIndex = [headerIndex, ...headersWithExpand]; + } + let headersWithCheckbox = []; + if (!isMultipleSelectable.value) { + headersWithCheckbox = headersWithIndex; + } else { + const headerCheckbox = fixedCheckbox.value || hasFixedColumnsFromUser.value ? { + text: "checkbox", + value: "checkbox", + fixed: true, + width: (_a = checkboxColumnWidth.value) != null ? _a : 36 + } : { text: "checkbox", value: "checkbox" }; + headersWithCheckbox = [headerCheckbox, ...headersWithIndex]; + } + return headersWithCheckbox; + }); + const headerColumns = computed(() => headersForRender.value.map((header) => header.value)); + const updateSortField = (newSortBy, oldSortType) => { + let newSortType = null; + if (oldSortType === "none") { + newSortType = "asc"; + } else if (oldSortType === "asc") { + newSortType = "desc"; + } else { + newSortType = mustSort.value ? "asc" : null; + } + if (isServerSideMode.value) { + updateServerOptionsSort(newSortBy, newSortType); + } + if (clientSortOptions.value && Array.isArray(clientSortOptions.value.sortBy) && Array.isArray(clientSortOptions.value.sortDesc)) { + const index = clientSortOptions.value.sortBy.indexOf(newSortBy); + if (index === -1) { + if (newSortType !== null) { + clientSortOptions.value.sortBy.push(newSortBy); + clientSortOptions.value.sortDesc.push(newSortType === "desc"); + } + } else if (newSortType === null) { + clientSortOptions.value.sortDesc.splice(index, 1); + clientSortOptions.value.sortBy.splice(index, 1); + } else { + clientSortOptions.value.sortDesc[index] = newSortType === "desc"; + } + } else if (newSortType === null) { + clientSortOptions.value = null; + } else { + clientSortOptions.value = { + sortBy: newSortBy, + sortDesc: newSortType === "desc" + }; + } + emits("updateSort", { + sortType: newSortType, + sortBy: newSortBy + }); + }; + const isMultiSorting = (headerText) => { + if (serverOptionsComputed.value) { + if (Array.isArray(serverOptionsComputed.value.sortBy)) + return serverOptionsComputed.value.sortBy.includes(headerText); + } + if (clientSortOptions.value && Array.isArray(clientSortOptions.value.sortBy)) { + return clientSortOptions.value.sortBy.includes(headerText); + } + return false; + }; + const getMultiSortNumber = (headerText) => { + if (serverOptionsComputed.value) { + if (Array.isArray(serverOptionsComputed.value.sortBy)) + return serverOptionsComputed.value.sortBy.indexOf(headerText) + 1; + } + if (clientSortOptions.value && Array.isArray(clientSortOptions.value.sortBy)) { + return clientSortOptions.value.sortBy.indexOf(headerText) + 1; + } + return false; + }; + return { + clientSortOptions, + headerColumns, + headersForRender, + updateSortField, + isMultiSorting, + getMultiSortNumber + }; +} +function usePageItems(currentPaginationNumber, isMultipleSelectable, isServerSideMode, items, rowsPerPageRef, selectItemsComputed, showIndex, totalItems, totalItemsLength) { + const currentPageFirstIndex = computed(() => (currentPaginationNumber.value - 1) * rowsPerPageRef.value + 1); + const currentPageLastIndex = computed(() => { + if (isServerSideMode.value) { + return Math.min(totalItemsLength.value, currentPaginationNumber.value * rowsPerPageRef.value); + } + return Math.min(totalItems.value.length, currentPaginationNumber.value * rowsPerPageRef.value); + }); + const itemsInPage = computed(() => { + if (isServerSideMode.value) + return items.value; + return totalItems.value.slice(currentPageFirstIndex.value - 1, currentPageLastIndex.value); + }); + const itemsWithIndex = computed(() => { + if (showIndex.value) { + return itemsInPage.value.map((item, index) => __spreadValues({ index: currentPageFirstIndex.value + index }, item)); + } + return itemsInPage.value; + }); + const multipleSelectStatus = computed(() => { + if (selectItemsComputed.value.length === 0) { + return "noneSelected"; + } + const isNoneSelected = selectItemsComputed.value.every((itemSelected) => { + if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) !== -1) { + return false; + } + return true; + }); + if (isNoneSelected) + return "noneSelected"; + if (selectItemsComputed.value.length === totalItems.value.length) { + const isAllSelected = selectItemsComputed.value.every((itemSelected) => { + if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) === -1) { + return false; + } + return true; + }); + return isAllSelected ? "allSelected" : "partSelected"; + } + return "partSelected"; + }); + const pageItems = computed(() => { + if (!isMultipleSelectable.value) + return itemsWithIndex.value; + if (multipleSelectStatus.value === "allSelected") { + return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: true }, item)); + } + if (multipleSelectStatus.value === "noneSelected") { + return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: false }, item)); + } + return itemsWithIndex.value.map((item) => { + const isSelected = selectItemsComputed.value.findIndex((selectItem) => { + const itemDeepCloned = __spreadValues({}, item); + delete itemDeepCloned.index; + return JSON.stringify(selectItem) === JSON.stringify(itemDeepCloned); + }) !== -1; + return __spreadValues({ checkbox: isSelected }, item); + }); + }); + return { + currentPageFirstIndex, + currentPageLastIndex, + multipleSelectStatus, + pageItems + }; +} +function usePagination(currentPage, isServerSideMode, loading, totalItemsLength, rowsPerPage, serverOptions, updateServerOptionsPage) { + const currentPaginationNumber = ref(serverOptions.value ? serverOptions.value.page : currentPage.value); + const maxPaginationNumber = computed(() => Math.ceil(totalItemsLength.value / rowsPerPage.value)); + const isLastPage = computed(() => maxPaginationNumber.value === 0 || currentPaginationNumber.value === maxPaginationNumber.value); + const isFirstPage = computed(() => currentPaginationNumber.value === 1); + const nextPage = () => { + if (totalItemsLength.value === 0) + return; + if (isLastPage.value) + return; + if (loading.value) + return; + if (isServerSideMode.value) { + const nextPaginationNumber = currentPaginationNumber.value + 1; + updateServerOptionsPage(nextPaginationNumber); + } else { + currentPaginationNumber.value += 1; + } + }; + const prevPage = () => { + if (totalItemsLength.value === 0) + return; + if (isFirstPage.value) + return; + if (loading.value) + return; + if (isServerSideMode.value) { + const prevPaginationNumber = currentPaginationNumber.value - 1; + updateServerOptionsPage(prevPaginationNumber); + } else { + currentPaginationNumber.value -= 1; + } + }; + const updatePage = (page) => { + if (loading.value) + return; + if (isServerSideMode.value) { + updateServerOptionsPage(page); + } else { + currentPaginationNumber.value = page; + } + }; + const updateCurrentPaginationNumber = (page) => { + currentPaginationNumber.value = page; + }; + return { + currentPaginationNumber, + maxPaginationNumber, + isLastPage, + isFirstPage, + nextPage, + prevPage, + updatePage, + updateCurrentPaginationNumber + }; +} +function useRows(isServerSideMode, rowsItems, serverOptions, rowsPerPage) { + const rowsItemsComputed = computed(() => { + if (!isServerSideMode.value && rowsItems.value.findIndex((item) => item === rowsPerPage.value) === -1) { + return [rowsPerPage.value, ...rowsItems.value]; + } + return rowsItems.value; + }); + const rowsPerPageRef = ref(serverOptions.value ? serverOptions.value.rowsPerPage : rowsPerPage.value); + const updateRowsPerPage = (option) => { + rowsPerPageRef.value = option; + }; + return { + rowsItemsComputed, + rowsPerPageRef, + updateRowsPerPage + }; +} +function useServerOptions(serverOptions, multiSort, emits) { + const serverOptionsComputed = computed({ + get: () => { + if (serverOptions.value) { + const { + page, + rowsPerPage, + sortBy, + sortType + } = serverOptions.value; + return { + page, + rowsPerPage, + sortBy: sortBy != null ? sortBy : null, + sortType: sortType != null ? sortType : null + }; + } + return null; + }, + set: (value) => { + emits("update:serverOptions", value); + } + }); + const updateServerOptionsPage = (page) => { + if (serverOptionsComputed.value) { + serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), { + page + }); + } + }; + const updateServerOptionsRowsPerPage = (rowsPerPage) => { + if (serverOptionsComputed.value) { + serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), { + page: 1, + rowsPerPage + }); + } + }; + const updateServerOptionsSort = (newSortBy, newSortType) => { + if (serverOptionsComputed.value) { + if (multiSort.value && Array.isArray(serverOptionsComputed.value.sortBy) && Array.isArray(serverOptionsComputed.value.sortType)) { + const index = serverOptionsComputed.value.sortBy.findIndex((val) => val === newSortBy); + if (index === -1 && newSortType !== null) { + serverOptionsComputed.value.sortBy.push(newSortBy); + serverOptionsComputed.value.sortType.push(newSortType); + } + if (newSortType === null) { + serverOptionsComputed.value.sortBy.splice(index, 1); + serverOptionsComputed.value.sortType.splice(index, 1); + } else { + serverOptionsComputed.value.sortType[index] = newSortType; + } + } else { + serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), { + sortBy: newSortType !== null ? newSortBy : null, + sortType: newSortType + }); + } + } + }; + return { + serverOptionsComputed, + updateServerOptionsPage, + updateServerOptionsSort, + updateServerOptionsRowsPerPage + }; +} +function getItemValue(column, item) { + if (column.includes(".")) { + let content = ""; + const keys = column.split("."); + const { length } = keys; + let i = 0; + while (i < length) { + content = i === 0 ? item[keys[i]] : content[keys[i]]; + i += 1; + if (content === void 0) + break; + } + return content; + } + return item[column]; +} +function generateColumnContent(column, item) { + const content = getItemValue(column, item); + return Array.isArray(content) ? content.join(",") : content; +} +function useTotalItems(clientSortOptions, filterOptions, isServerSideMode, items, itemsSelected, searchField, searchValue, serverItemsLength, multiSort, emits) { + const generateSearchingTarget = (item) => { + if (typeof searchField.value === "string" && searchField.value !== "") + return getItemValue(searchField.value, item); + if (Array.isArray(searchField.value)) { + let searchString = ""; + searchField.value.forEach((field) => { + searchString += getItemValue(field, item); + }); + return searchString; + } + return Object.values(item).join(" "); + }; + const itemsSearching = computed(() => { + if (!isServerSideMode.value && searchValue.value !== "") { + const regex = new RegExp(searchValue.value, "i"); + return items.value.filter((item) => regex.test(generateSearchingTarget(item))); + } + return items.value; + }); + const itemsFiltering = computed(() => { + let itemsFiltered = [...itemsSearching.value]; + if (filterOptions.value) { + filterOptions.value.forEach((option) => { + itemsFiltered = itemsFiltered.filter((item) => { + const { field, comparison, criteria } = option; + if (typeof comparison === "function") { + return comparison(getItemValue(field, item), criteria); + } + const itemValue = getItemValue(field, item); + switch (comparison) { + case "=": + return itemValue === criteria; + case "!=": + return itemValue !== criteria; + case ">": + return itemValue > criteria; + case "<": + return itemValue < criteria; + case "<=": + return itemValue <= criteria; + case ">=": + return itemValue >= criteria; + case "between": + return itemValue >= Math.min(...criteria) && itemValue <= Math.max(...criteria); + case "in": + return criteria.includes(itemValue); + default: + return itemValue === criteria; + } + }); + }); + return itemsFiltered; + } + return itemsSearching.value; + }); + watch(itemsFiltering, (newVal) => { + if (filterOptions.value) { + emits("updateFilter", newVal); + } + }, { immediate: true, deep: true }); + function recursionMuiltSort(sortByArr, sortDescArr, itemsToSort, index) { + const sortBy = sortByArr[index]; + const sortDesc = sortDescArr[index]; + const sorted = (index === 0 ? itemsToSort : recursionMuiltSort(sortByArr, sortDescArr, itemsToSort, index - 1)).sort((a, b) => { + let isAllSame = true; + for (let i = 0; i < index; i += 1) { + if (getItemValue(sortByArr[i], a) !== getItemValue(sortByArr[i], b)) { + isAllSame = false; + break; + } + } + if (isAllSame) { + if (getItemValue(sortBy, a) < getItemValue(sortBy, b)) + return sortDesc ? 1 : -1; + if (getItemValue(sortBy, a) > getItemValue(sortBy, b)) + return sortDesc ? -1 : 1; + return 0; + } + return 0; + }); + return sorted; + } + const totalItems = computed(() => { + if (isServerSideMode.value) + return items.value; + if (clientSortOptions.value === null) + return itemsFiltering.value; + const { sortBy, sortDesc } = clientSortOptions.value; + const itemsFilteringSorted = [...itemsFiltering.value]; + if (multiSort && Array.isArray(sortBy) && Array.isArray(sortDesc)) { + if (sortBy.length === 0) + return itemsFilteringSorted; + return recursionMuiltSort(sortBy, sortDesc, itemsFilteringSorted, sortBy.length - 1); + } + return itemsFilteringSorted.sort((a, b) => { + if (getItemValue(sortBy, a) < getItemValue(sortBy, b)) + return sortDesc ? 1 : -1; + if (getItemValue(sortBy, a) > getItemValue(sortBy, b)) + return sortDesc ? -1 : 1; + return 0; + }); + }); + const totalItemsLength = computed(() => isServerSideMode.value ? serverItemsLength.value : totalItems.value.length); + const selectItemsComputed = computed({ + get: () => { + var _a; + return (_a = itemsSelected.value) != null ? _a : []; + }, + set: (value) => { + emits("update:itemsSelected", value); + } + }); + const toggleSelectAll = (isChecked) => { + selectItemsComputed.value = isChecked ? totalItems.value : []; + }; + const toggleSelectItem = (item) => { + const isAlreadyChecked = item.checkbox; + delete item.checkbox; + delete item.index; + if (!isAlreadyChecked) { + const selectItemsArr = selectItemsComputed.value; + selectItemsArr.unshift(item); + selectItemsComputed.value = selectItemsArr; + emits("selectRow", item); + } else { + selectItemsComputed.value = selectItemsComputed.value.filter((selectedItem) => JSON.stringify(selectedItem) !== JSON.stringify(item)); + emits("deselectRow", item); + } + }; + return { + totalItems, + selectItemsComputed, + totalItemsLength, + toggleSelectAll, + toggleSelectItem + }; +} +var propsWithDefault = { + alternating: { + type: Boolean, + default: false + }, + buttonsPagination: { + type: Boolean, + default: false + }, + checkboxColumnWidth: { + type: Number, + default: null + }, + currentPage: { + type: Number, + default: 1 + }, + emptyMessage: { + type: String, + default: "No Available Data" + }, + expandColumnWidth: { + type: Number, + default: 36 + }, + filterOptions: { + type: Array, + default: null + }, + fixedExpand: { + type: Boolean, + default: false + }, + fixedHeader: { + type: Boolean, + default: true + }, + fixedCheckbox: { + type: Boolean, + default: false + }, + fixedIndex: { + type: Boolean, + default: false + }, + headerTextDirection: { + type: String, + default: "left" + }, + bodyTextDirection: { + type: String, + default: "left" + }, + hideFooter: { + type: Boolean, + default: false + }, + hideRowsPerPage: { + type: Boolean, + default: false + }, + hideHeader: { + type: Boolean, + default: false + }, + indexColumnWidth: { + type: Number, + default: 60 + }, + itemsSelected: { + type: Array, + default: null + }, + loading: { + type: Boolean, + deault: false + }, + rowsPerPage: { + type: Number, + default: 25 + }, + rowsItems: { + type: Array, + default: () => [25, 50, 100] + }, + rowsPerPageMessage: { + type: String, + default: "rows per page:" + }, + searchField: { + type: [String, Array], + default: "" + }, + searchValue: { + type: String, + default: "" + }, + serverOptions: { + type: Object, + default: null + }, + serverItemsLength: { + type: Number, + default: 0 + }, + showIndex: { + type: Boolean, + default: false + }, + sortBy: { + type: [String, Array], + default: "" + }, + sortType: { + type: [String, Array], + default: "asc" + }, + multiSort: { + type: Boolean, + default: false + }, + tableMinHeight: { + type: Number, + default: 180 + }, + 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: "" + }, + bodyExpandRowClassName: { + type: [Function, String], + default: "" + }, + bodyItemClassName: { + type: [Function, String], + default: "" + }, + noHover: { + type: Boolean, + default: false + }, + borderCell: { + type: Boolean, + default: false + }, + mustSort: { + type: Boolean, + default: false + }, + rowsOfPageSeparatorMessage: { + type: String, + default: "of" + }, + clickEventType: { + type: String, + default: "single" + }, + clickRowToExpand: { + type: Boolean, + default: false + }, + tableNodeId: { + type: String, + default: "" + }, + showIndexSymbol: { + type: String, + default: "#" + } +}; +var DataTable_vue_vue_type_style_index_0_lang = ""; +var DataTable_vue_vue_type_style_index_1_scoped_true_lang = ""; +const _withScopeId = (n) => (pushScopeId("data-v-513716fe"), n = n(), popScopeId(), n); +const _hoisted_1 = ["id"]; +const _hoisted_2 = ["onClick"]; +const _hoisted_3 = { + key: 3, + class: "header-text" +}; +const _hoisted_4 = { + key: 5, + class: "multi-sort__number" +}; +const _hoisted_5 = ["onClick", "onDblclick"]; +const _hoisted_6 = ["onClick"]; +const _hoisted_7 = ["colspan"]; +const _hoisted_8 = { + key: 0, + class: "vue3-easy-data-table__loading" +}; +const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "vue3-easy-data-table__loading-mask" }, null, -1)); +const _hoisted_10 = { class: "loading-entity" }; +const _hoisted_11 = { + key: 1, + class: "vue3-easy-data-table__message" +}; +const _hoisted_12 = ["innerHTML"]; +const _hoisted_13 = { + key: 0, + class: "vue3-easy-data-table__footer" +}; +const _hoisted_14 = { + key: 0, + class: "pagination__rows-per-page" +}; +const _hoisted_15 = { class: "pagination__items-index" }; +const _sfc_main = /* @__PURE__ */ defineComponent({ + __name: "DataTable", + props: __spreadProps(__spreadValues({}, propsWithDefault), { + items: { + type: Array, + required: true + }, + headers: { + type: Array, + required: true + } + }), + emits: [ + "clickRow", + "selectRow", + "deselectRow", + "expandRow", + "updateSort", + "updateFilter", + "update:itemsSelected", + "update:serverOptions", + "updatePageItems", + "updateTotalItems" + ], + setup(__props, { expose, emit: emits }) { + const props = __props; + useCssVars((_ctx) => ({ + "ed764a26": unref(tableMinHeightPx), + "787ca023": unref(tableHeightPx) + })); + const { + tableNodeId, + clickEventType, + bodyTextDirection, + checkboxColumnWidth, + currentPage, + expandColumnWidth, + filterOptions, + fixedCheckbox, + fixedExpand, + fixedHeader, + fixedIndex, + headers, + headerTextDirection, + indexColumnWidth, + items, + itemsSelected, + loading, + mustSort, + multiSort, + rowsItems, + rowsPerPage, + searchField, + searchValue, + serverItemsLength, + serverOptions, + showIndex, + sortBy, + sortType, + tableHeight, + tableMinHeight, + themeColor, + rowsOfPageSeparatorMessage, + showIndexSymbol + } = toRefs(props); + const tableHeightPx = computed(() => tableHeight.value ? `${tableHeight.value}px` : null); + const tableMinHeightPx = computed(() => `${tableMinHeight.value}px`); + provide("themeColor", themeColor.value); + const slots = useSlots(); + const ifHasPaginationSlot = computed(() => !!slots.pagination); + const ifHasLoadingSlot = computed(() => !!slots.loading); + const ifHasExpandSlot = computed(() => !!slots.expand); + const ifHasBodySlot = computed(() => !!slots.body); + const dataTable = ref(); + const tableBody = ref(); + provide("dataTable", dataTable); + const showShadow = ref(false); + onMounted(() => { + tableBody.value.addEventListener("scroll", () => { + showShadow.value = tableBody.value.scrollLeft > 0; + }); + }); + const isMultipleSelectable = computed(() => itemsSelected.value !== null); + const isServerSideMode = computed(() => serverOptions.value !== null); + const { + serverOptionsComputed, + updateServerOptionsPage, + updateServerOptionsSort, + updateServerOptionsRowsPerPage + } = useServerOptions(serverOptions, multiSort, emits); + const { + clientSortOptions, + headerColumns, + headersForRender, + updateSortField, + isMultiSorting, + getMultiSortNumber + } = useHeaders(showIndexSymbol, checkboxColumnWidth, expandColumnWidth, fixedCheckbox, fixedExpand, fixedIndex, headers, ifHasExpandSlot, indexColumnWidth, isMultipleSelectable, isServerSideMode, mustSort, serverOptionsComputed, showIndex, sortBy, sortType, multiSort, updateServerOptionsSort, emits); + const { + rowsItemsComputed, + rowsPerPageRef, + updateRowsPerPage + } = useRows(isServerSideMode, rowsItems, serverOptions, rowsPerPage); + const { + totalItems, + selectItemsComputed, + totalItemsLength, + toggleSelectAll, + toggleSelectItem + } = useTotalItems(clientSortOptions, filterOptions, isServerSideMode, items, itemsSelected, searchField, searchValue, serverItemsLength, multiSort, emits); + const { + currentPaginationNumber, + maxPaginationNumber, + isLastPage, + isFirstPage, + nextPage, + prevPage, + updatePage, + updateCurrentPaginationNumber + } = usePagination(currentPage, isServerSideMode, loading, totalItemsLength, rowsPerPageRef, serverOptions, updateServerOptionsPage); + const { + currentPageFirstIndex, + currentPageLastIndex, + multipleSelectStatus, + pageItems + } = usePageItems(currentPaginationNumber, isMultipleSelectable, isServerSideMode, items, rowsPerPageRef, selectItemsComputed, showIndex, totalItems, totalItemsLength); + const prevPageEndIndex = computed(() => { + if (currentPaginationNumber.value === 0) + return 0; + return (currentPaginationNumber.value - 1) * rowsPerPageRef.value; + }); + const { + expandingItemIndexList, + updateExpandingItemIndexList, + clearExpandingItemIndexList + } = useExpandableRow(pageItems, prevPageEndIndex, emits); + const { + fixedHeaders, + lastFixedColumn, + fixedColumnsInfos + } = useFixedColumn(headersForRender); + const { + clickRow + } = useClickRow(clickEventType, isMultipleSelectable, showIndex, emits); + const getColStyle = (header) => { + var _a; + const width = (_a = header.width) != null ? _a : fixedHeaders.value.length ? 100 : null; + if (width) + return `width: ${width}px; min-width: ${width}px;`; + return void 0; + }; + const getFixedDistance = (column, type = "th") => { + if (!fixedHeaders.value.length) + return void 0; + const columInfo = fixedColumnsInfos.value.find((info) => info.value === column); + if (columInfo) { + return `left: ${columInfo.distance}px;z-index: ${type === "th" ? 3 : 1};position: sticky;`; + } + return void 0; + }; + watch(loading, (newVal, oldVal) => { + if (serverOptionsComputed.value) { + if (newVal === false && oldVal === true) { + updateCurrentPaginationNumber(serverOptionsComputed.value.page); + clearExpandingItemIndexList(); + } + } + }); + watch(rowsPerPageRef, (value) => { + if (!isServerSideMode.value) { + updatePage(1); + } else { + updateServerOptionsRowsPerPage(value); + } + }); + watch([searchValue, filterOptions], () => { + if (!isServerSideMode.value) { + updatePage(1); + } + }); + watch([currentPaginationNumber, clientSortOptions, searchField, searchValue, filterOptions], () => { + clearExpandingItemIndexList(); + }, { deep: true }); + watch(pageItems, (value) => { + emits("updatePageItems", value); + }, { deep: true }); + watch(totalItems, (value) => { + emits("updateTotalItems", value); + }, { deep: true }); + expose({ + currentPageFirstIndex, + currentPageLastIndex, + clientItemsLength: totalItemsLength, + maxPaginationNumber, + currentPaginationNumber, + isLastPage, + isFirstPage, + nextPage, + prevPage, + updatePage, + rowsPerPageOptions: rowsItemsComputed, + rowsPerPageActiveOption: rowsPerPageRef, + updateRowsPerPageActiveOption: updateRowsPerPage + }); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", { + ref_key: "dataTable", + ref: dataTable, + class: normalizeClass(["vue3-easy-data-table", [_ctx.tableClassName]]) + }, [ + createElementVNode("div", { + ref_key: "tableBody", + ref: tableBody, + class: normalizeClass(["vue3-easy-data-table__main", { + "fixed-header": unref(fixedHeader), + "fixed-height": unref(tableHeight), + "show-shadow": showShadow.value, + "table-fixed": unref(fixedHeaders).length, + "hoverable": !_ctx.noHover, + "border-cell": _ctx.borderCell + }]) + }, [ + createElementVNode("table", { id: unref(tableNodeId) }, [ + createElementVNode("colgroup", null, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headersForRender), (header, index) => { + return openBlock(), createElementBlock("col", { + key: index, + style: normalizeStyle(getColStyle(header)) + }, null, 4); + }), 128)) + ]), + unref(headersForRender).length && !_ctx.hideHeader ? (openBlock(), createElementBlock("thead", { + key: 0, + class: normalizeClass(["vue3-easy-data-table__header", [_ctx.headerClassName]]) + }, [ + createElementVNode("tr", null, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headersForRender), (header, index) => { + return openBlock(), createElementBlock("th", { + key: index, + class: normalizeClass([{ + sortable: header.sortable, + "none": header.sortable && header.sortType === "none", + "desc": header.sortable && header.sortType === "desc", + "asc": header.sortable && header.sortType === "asc", + "shadow": header.value === unref(lastFixedColumn) + }, typeof _ctx.headerItemClassName === "string" ? _ctx.headerItemClassName : _ctx.headerItemClassName(header, index + 1)]), + style: normalizeStyle(getFixedDistance(header.value)), + onClick: withModifiers(($event) => header.sortable && header.sortType ? unref(updateSortField)(header.value, header.sortType) : null, ["stop"]) + }, [ + header.text === "checkbox" ? (openBlock(), createBlock(MultipleSelectCheckBox, { + key: unref(multipleSelectStatus), + status: unref(multipleSelectStatus), + onChange: unref(toggleSelectAll) + }, null, 8, ["status", "onChange"])) : (openBlock(), createElementBlock("span", { + key: 1, + class: normalizeClass(["header", `direction-${unref(headerTextDirection)}`]) + }, [ + unref(slots)[`header-${header.value}`] ? renderSlot(_ctx.$slots, `header-${header.value}`, normalizeProps(mergeProps({ key: 0 }, header)), void 0, true) : unref(slots)[`header-${header.value.toLowerCase()}`] ? renderSlot(_ctx.$slots, `header-${header.value.toLowerCase()}`, normalizeProps(mergeProps({ key: 1 }, header)), void 0, true) : unref(slots)["header"] ? renderSlot(_ctx.$slots, "header", normalizeProps(mergeProps({ key: 2 }, header)), void 0, true) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(header.text), 1)), + header.sortable ? (openBlock(), createElementBlock("i", { + key: header.sortType ? header.sortType : "none", + class: normalizeClass(["sortType-icon", { "desc": header.sortType === "desc" }]) + }, null, 2)) : createCommentVNode("", true), + unref(multiSort) && unref(isMultiSorting)(header.value) ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(getMultiSortNumber)(header.value)), 1)) : createCommentVNode("", true) + ], 2)) + ], 14, _hoisted_2); + }), 128)) + ]) + ], 2)) : createCommentVNode("", true), + unref(ifHasBodySlot) ? renderSlot(_ctx.$slots, "body", normalizeProps(mergeProps({ key: 1 }, unref(pageItems))), void 0, true) : unref(headerColumns).length ? (openBlock(), createElementBlock("tbody", { + key: 2, + class: normalizeClass(["vue3-easy-data-table__body", { "row-alternation": _ctx.alternating }]) + }, [ + renderSlot(_ctx.$slots, "body-prepend", normalizeProps(guardReactiveProps({ + items: unref(pageItems), + pagination: { + isFirstPage: unref(isFirstPage), + isLastPage: unref(isLastPage), + currentPaginationNumber: unref(currentPaginationNumber), + maxPaginationNumber: unref(maxPaginationNumber), + nextPage: unref(nextPage), + prevPage: unref(prevPage) + }, + headers: unref(headersForRender) + })), void 0, true), + (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pageItems), (item, index) => { + return openBlock(), createElementBlock(Fragment, { key: index }, [ + createElementVNode("tr", { + class: normalizeClass([ + { "even-row": (index + 1) % 2 === 0 }, + typeof _ctx.bodyRowClassName === "string" ? _ctx.bodyRowClassName : _ctx.bodyRowClassName(item, index + 1) + ]), + onClick: ($event) => { + unref(clickRow)(item, "single", $event); + _ctx.clickRowToExpand && unref(updateExpandingItemIndexList)(index + unref(prevPageEndIndex), item, $event); + }, + onDblclick: ($event) => { + unref(clickRow)(item, "double", $event); + } + }, [ + (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 _ctx.bodyItemClassName === "string" ? _ctx.bodyItemClassName : _ctx.bodyItemClassName(column, index + 1), `direction-${unref(bodyTextDirection)}`]), + onClick: ($event) => column === "expand" ? unref(updateExpandingItemIndexList)(index + unref(prevPageEndIndex), item, $event) : null + }, [ + unref(slots)[`item-${column}`] ? renderSlot(_ctx.$slots, `item-${column}`, normalizeProps(mergeProps({ key: 0 }, item)), void 0, true) : unref(slots)[`item-${column.toLowerCase()}`] ? renderSlot(_ctx.$slots, `item-${column.toLowerCase()}`, normalizeProps(mergeProps({ key: 1 }, item)), void 0, true) : column === "expand" ? (openBlock(), createElementBlock("i", { + key: 2, + class: normalizeClass(["expand-icon", { "expanding": unref(expandingItemIndexList).includes(unref(prevPageEndIndex) + index) }]) + }, null, 2)) : column === "checkbox" ? (openBlock(), createBlock(SingleSelectCheckBox, { + key: 3, + checked: item[column], + onChange: ($event) => unref(toggleSelectItem)(item) + }, null, 8, ["checked", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [ + createTextVNode(toDisplayString(unref(generateColumnContent)(column, item)), 1) + ], 64)) + ], 14, _hoisted_6); + }), 128)) + ], 42, _hoisted_5), + unref(ifHasExpandSlot) && unref(expandingItemIndexList).includes(index + unref(prevPageEndIndex)) ? (openBlock(), createElementBlock("tr", { + key: 0, + class: normalizeClass([ + { "even-row": (index + 1) % 2 === 0 }, + typeof _ctx.bodyExpandRowClassName === "string" ? _ctx.bodyExpandRowClassName : _ctx.bodyExpandRowClassName(item, index + 1) + ]) + }, [ + 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_7) + ], 2)) : createCommentVNode("", true) + ], 64); + }), 128)), + renderSlot(_ctx.$slots, "body-append", normalizeProps(guardReactiveProps({ + items: unref(pageItems), + pagination: { + isFirstPage: unref(isFirstPage), + isLastPage: unref(isLastPage), + currentPaginationNumber: unref(currentPaginationNumber), + maxPaginationNumber: unref(maxPaginationNumber), + nextPage: unref(nextPage), + prevPage: unref(prevPage), + updatePage: unref(updatePage) + }, + headers: unref(headersForRender) + })), void 0, true) + ], 2)) : createCommentVNode("", true) + ], 8, _hoisted_1), + unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_8, [ + _hoisted_9, + createElementVNode("div", _hoisted_10, [ + unref(ifHasLoadingSlot) ? renderSlot(_ctx.$slots, "loading", { key: 0 }, void 0, true) : (openBlock(), createBlock(Loading, { key: 1 })) + ]) + ])) : createCommentVNode("", true), + !unref(pageItems).length && !unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_11, [ + renderSlot(_ctx.$slots, "empty-message", {}, () => [ + createElementVNode("span", { innerHTML: _ctx.emptyMessage }, null, 8, _hoisted_12) + ], true) + ])) : createCommentVNode("", true) + ], 2), + !_ctx.hideFooter ? (openBlock(), createElementBlock("div", _hoisted_13, [ + !_ctx.hideRowsPerPage ? (openBlock(), createElementBlock("div", _hoisted_14, [ + createTextVNode(toDisplayString(_ctx.rowsPerPageMessage) + " ", 1), + createVNode(RowsSelector, { + modelValue: unref(rowsPerPageRef), + "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(rowsPerPageRef) ? rowsPerPageRef.value = $event : null), + "rows-items": unref(rowsItemsComputed) + }, null, 8, ["modelValue", "rows-items"]) + ])) : createCommentVNode("", true), + createElementVNode("div", _hoisted_15, toDisplayString(`${unref(currentPageFirstIndex)}\u2013${unref(currentPageLastIndex)}`) + " " + toDisplayString(unref(rowsOfPageSeparatorMessage)) + " " + toDisplayString(unref(totalItemsLength)), 1), + unref(ifHasPaginationSlot) ? renderSlot(_ctx.$slots, "pagination", normalizeProps(mergeProps({ key: 1 }, { + isFirstPage: unref(isFirstPage), + isLastPage: unref(isLastPage), + currentPaginationNumber: unref(currentPaginationNumber), + maxPaginationNumber: unref(maxPaginationNumber), + nextPage: unref(nextPage), + prevPage: unref(prevPage) + })), void 0, true) : (openBlock(), createBlock(PaginationArrows, { + key: 2, + "is-first-page": unref(isFirstPage), + "is-last-page": unref(isLastPage), + onClickNextPage: unref(nextPage), + onClickPrevPage: unref(prevPage) + }, createSlots({ _: 2 }, [ + _ctx.buttonsPagination ? { + name: "buttonsPagination", + fn: withCtx(() => [ + createVNode(ButtonsPagination, { + "current-pagination-number": unref(currentPaginationNumber), + "max-pagination-number": unref(maxPaginationNumber), + onUpdatePage: unref(updatePage) + }, null, 8, ["current-pagination-number", "max-pagination-number", "onUpdatePage"]) + ]), + key: "0" + } : void 0 + ]), 1032, ["is-first-page", "is-last-page", "onClickNextPage", "onClickPrevPage"])) + ])) : createCommentVNode("", true) + ], 2); + }; + } +}); +var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-513716fe"]]); +if (typeof window !== "undefined" && window.Vue) { + window.Vue.createApp({}).component("Vue3EasyDataTable", DataTable); +} +export { DataTable as default }; diff --git a/dist/vue3-easy-data-table.umd.js b/dist/vue3-easy-data-table.umd.js new file mode 100644 index 0000000..b86a456 --- /dev/null +++ b/dist/vue3-easy-data-table.umd.js @@ -0,0 +1 @@ +(function(e,I){typeof exports=="object"&&typeof module!="undefined"?module.exports=I(require("vue")):typeof define=="function"&&define.amd?define(["vue"],I):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=I(e.Vue))})(this,function(e){"use strict";var Zt=Object.defineProperty,ea=Object.defineProperties;var ta=Object.getOwnPropertyDescriptors;var ve=Object.getOwnPropertySymbols;var aa=Object.prototype.hasOwnProperty,na=Object.prototype.propertyIsEnumerable;var Le=(e,I,S)=>I in e?Zt(e,I,{enumerable:!0,configurable:!0,writable:!0,value:S}):e[I]=S,T=(e,I)=>{for(var S in I||(I={}))aa.call(I,S)&&Le(e,S,I[S]);if(ve)for(var S of ve(I))na.call(I,S)&&Le(e,S,I[S]);return e},le=(e,I)=>ea(e,ta(I));var I="",S=(r,s)=>{const t=r.__vccOpts||r;for(const[a,f]of s)t[a]=f;return t};const Re=r=>(e.pushScopeId("data-v-e0a0b7f0"),r=r(),e.popScopeId(),r),Te=["onClick"],Fe=["checked"],De=Re(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ze=S(e.defineComponent({__name:"MultipleSelectCheckBox",props:{status:{type:String,required:!0}},emits:["change"],setup(r,{emit:s}){const t=r;e.useCssVars(g=>({"51ab8a49":e.unref(c)}));const a=e.computed(()=>t.status==="allSelected"),f=()=>{s("change",!a.value)},c=e.inject("themeColor");return(g,o)=>(e.openBlock(),e.createElementBlock("div",{class:"easy-checkbox",onClick:e.withModifiers(f,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(a),class:e.normalizeClass(r.status)},null,10,Fe),De],8,Te))}}),[["__scopeId","data-v-e0a0b7f0"]]),oa="";const He=r=>(e.pushScopeId("data-v-7e69a276"),r=r(),e.popScopeId(),r),Me=["checked"],Oe=He(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var je=S(e.defineComponent({__name:"SingleSelectCheckBox",props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(r,{emit:s}){e.useCssVars(a=>({fdaf7e9e:e.unref(t)}));const t=e.inject("themeColor");return(a,f)=>(e.openBlock(),e.createElementBlock("div",{class:"easy-checkbox",onClick:f[0]||(f[0]=e.withModifiers(c=>s("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:r.checked},null,8,Me),Oe]))}}),[["__scopeId","data-v-7e69a276"]]),sa="";const We=r=>(e.pushScopeId("data-v-4ca5de3a"),r=r(),e.popScopeId(),r),qe={class:"easy-data-table__rows-selector"},Je={class:"rows-input"},Ue=We(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),Ge=["onClick"];var Ke=S(e.defineComponent({__name:"RowsSelector",props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(r,{emit:s}){const t=r;e.useCssVars(_=>({"1b889342":e.unref(h)}));const a=e.ref(!1),f=e.ref(!1),c=e.inject("dataTable");e.watch(a,_=>{if(_&&c){const m=window.innerHeight,b=c.value.getBoundingClientRect().height,L=c.value.getBoundingClientRect().top;m-(b+L)<=100?f.value=!0:f.value=!1}});const g=e.computed({get:()=>t.modelValue,set:_=>{s("update:modelValue",_)}}),o=_=>{g.value=_,a.value=!1},n=(_,m)=>{let b=_.parentNode;for(;b!=null;){if(b.classList&&b.classList.contains(m))return!0;b=b.parentNode}return!1},l=_=>{n(_.target,"easy-data-table__rows-selector")||(a.value=!1)};e.onMounted(()=>{document.addEventListener("click",l)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",l)});const h=e.inject("themeColor");return(_,m)=>(e.openBlock(),e.createElementBlock("div",qe,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:m[0]||(m[0]=b=>a.value=!a.value)},[e.createElementVNode("div",Je,e.toDisplayString(e.unref(g)),1),Ue]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:a.value,inside:f.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.rowsItems,b=>(e.openBlock(),e.createElementBlock("li",{key:b,class:e.normalizeClass({selected:b===e.unref(g)}),onClick:L=>o(b)},e.toDisplayString(b),11,Ge))),128))],2)]))}}),[["__scopeId","data-v-4ca5de3a"]]),ca="";const se=r=>(e.pushScopeId("data-v-1fa3a520"),r=r(),e.popScopeId(),r),Qe={class:"lds-ring"},Xe=[se(()=>e.createElementVNode("div",null,null,-1)),se(()=>e.createElementVNode("div",null,null,-1)),se(()=>e.createElementVNode("div",null,null,-1)),se(()=>e.createElementVNode("div",null,null,-1))];var Ye=S(e.defineComponent({__name:"Loading",setup(r){e.useCssVars(t=>({"26774109":e.unref(s)}));const s=e.inject("themeColor");return(t,a)=>(e.openBlock(),e.createElementBlock("div",Qe,Xe))}}),[["__scopeId","data-v-1fa3a520"]]),ga="";const Ze={class:"loader-line"};var et=S(e.defineComponent({__name:"LoadingLine",setup(r){e.useCssVars(t=>({"0d327f57":e.unref(s)}));const s=e.inject("themeColor");return(t,a)=>(e.openBlock(),e.createElementBlock("div",Ze))}}),[["__scopeId","data-v-7d281cac"]]),ha="";const tt={class:"buttons-pagination"},at=["onClick"];var nt=S(e.defineComponent({__name:"ButtonsPagination",props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(r,{emit:s}){const t=r;e.useCssVars(o=>({"40dd4f07":e.unref(g)}));const a=7,f=o=>{o.type==="button"&&!o.active&&s("updatePage",o.page)},c=e.computed(()=>{const o=[];if(t.maxPaginationNumber<=a)for(let n=1;n<=t.maxPaginationNumber;n+=1)o.push({type:"button",page:n,active:n===t.currentPaginationNumber,activePrev:n+1===t.currentPaginationNumber});else if([1,2,t.maxPaginationNumber,t.maxPaginationNumber-1].includes(t.currentPaginationNumber))for(let n=1;n<=a;n+=1)if(n<=3)o.push({type:"button",page:n,active:n===t.currentPaginationNumber,activePrev:n+1===t.currentPaginationNumber});else if(n===4)o.push({type:"omission"});else{const l=t.maxPaginationNumber-(a-n);o.push({type:"button",page:l,active:l===t.currentPaginationNumber,activePrev:l+1===t.currentPaginationNumber})}else if([3,4].includes(t.currentPaginationNumber))for(let n=1;n<=a;n+=1)n<=5?o.push({type:"button",page:n,active:n===t.currentPaginationNumber,activePrev:n+1===t.currentPaginationNumber}):n===6?o.push({type:"omission"}):o.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber,activePrev:n+1===t.currentPaginationNumber});else if([t.maxPaginationNumber-2,t.maxPaginationNumber-3].includes(t.currentPaginationNumber))for(let n=1;n<=a;n+=1)if(n===1)o.push({type:"button",page:1,active:t.currentPaginationNumber===1,activePrev:n+1===t.currentPaginationNumber});else if(n===2)o.push({type:"omission"});else{const l=t.maxPaginationNumber-(a-n);o.push({type:"button",page:l,active:l===t.currentPaginationNumber,activePrev:l+1===t.currentPaginationNumber})}else for(let n=1;n<=a;n+=1)if(n===1)o.push({type:"button",page:1,active:t.currentPaginationNumber===1,activePrev:n+1===t.currentPaginationNumber});else if(n===2||n===6)o.push({type:"omission"});else if(n===7)o.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber,activePrev:n+1===t.currentPaginationNumber});else{const l=4-n,h=t.currentPaginationNumber-l;o.push({type:"button",page:h,active:h===t.currentPaginationNumber,activePrev:h+1===t.currentPaginationNumber})}return o}),g=e.inject("themeColor");return(o,n)=>(e.openBlock(),e.createElementBlock("div",tt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),(l,h)=>(e.openBlock(),e.createElementBlock("div",{key:h,class:e.normalizeClass(["item",{button:l.type==="button",active:l.type==="button"&&l.active,"active-prev":l.type==="button"&&l.activePrev,omission:l.type==="omission"}]),onClick:_=>f(l)},e.toDisplayString(l.type==="button"?l.page:"..."),11,at))),128))]))}}),[["__scopeId","data-v-4c681fa2"]]),ba="";const me=r=>(e.pushScopeId("data-v-c9da5286"),r=r(),e.popScopeId(),r),rt=[me(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],ot=[me(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var lt=S(e.defineComponent({__name:"PaginationArrows",props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(r,{emit:s}){const t=e.useSlots();return(a,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]=c=>s("clickPrevPage"))},rt,2),e.unref(t).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":r.isLastPage}]),onClick:f[1]||(f[1]=c=>s("clickNextPage"))},ot,2)],64))}}),[["__scopeId","data-v-c9da5286"]]);function st(r,s,t,a){return{clickRow:(c,g,o)=>{if(r.value!==g)return;const n=T({},c);if(s.value){const{checkbox:l}=c;delete n.checkbox,n.isSelected=l}if(t.value){const{index:l}=c;delete n.index,n.indexInCurrentPage=l}a("clickRow",n,o)}}}function it(r,s,t){const a=e.ref([]);return{expandingItemIndexList:a,updateExpandingItemIndexList:(g,o,n)=>{n.stopPropagation();const l=a.value.indexOf(g);if(l!==-1)a.value.splice(l,1);else{const h=r.value.findIndex(_=>JSON.stringify(_)===JSON.stringify(o));t("expandRow",s.value+h,o),a.value.push(s.value+h)}},clearExpandingItemIndexList:()=>{a.value=[]}}}function ct(r){const s=e.computed(()=>r.value.filter(f=>f.fixed)),t=e.computed(()=>s.value.length?s.value[s.value.length-1].value:""),a=e.computed(()=>{if(!s.value.length)return[];const f=s.value.map(c=>{var g;return(g=c.width)!=null?g:100});return s.value.map((c,g)=>{var o,n;return{value:c.value,fixed:(o=c.fixed)!=null?o:!0,width:(n=c.width)!=null?n:100,distance:g===0?0:f.reduce((l,h,_)=>{let m=l;return _g.value.findIndex(y=>y.fixed)!==-1),P=e.computed(()=>u.value?g.value.filter(y=>y.fixed):[]),x=e.computed(()=>g.value.filter(y=>!y.fixed)),w=(y,z)=>Array.isArray(y)&&Array.isArray(z)?{sortBy:y,sortDesc:z.map(N=>N==="desc")}:y!==""?{sortBy:L.value,sortDesc:k.value==="desc"}:null,p=e.ref(w(L.value,k.value)),C=e.computed(()=>{var ie;const z=[...P.value,...x.value].map(Q=>{const v=Object.assign(Q);if(v.sortable&&(v.sortType="none"),m.value)if(Array.isArray(m.value.sortBy)&&Array.isArray(m.value.sortType)&&m.value.sortBy.includes(v.value)){const Y=m.value.sortBy.indexOf(v.value);v.sortType=m.value.sortType[Y]}else v.value===m.value.sortBy&&m.value.sortType&&(v.sortType=m.value.sortType);if(p.value&&Array.isArray(p.value.sortBy)&&Array.isArray(p.value.sortDesc)&&p.value.sortBy.includes(v.value)){const Y=p.value.sortBy.indexOf(v.value);v.sortType=p.value.sortDesc[Y]?"desc":"asc"}else p.value&&v.value===p.value.sortBy&&(v.sortType=p.value.sortDesc?"desc":"asc");return v});let N=[];o.value?N=[f.value||u.value?{text:"",value:"expand",fixed:!0,width:t.value}:{text:"",value:"expand"},...z]:N=z;let R=[];b.value?R=[c.value||u.value?{text:r.value,value:"index",fixed:!0,width:n.value}:{text:r.value,value:"index"},...N]:R=N;let X=[];return l.value?X=[a.value||u.value?{text:"checkbox",value:"checkbox",fixed:!0,width:(ie=s.value)!=null?ie:36}:{text:"checkbox",value:"checkbox"},...R]:X=R,X}),V=e.computed(()=>C.value.map(y=>y.value));return{clientSortOptions:p,headerColumns:V,headersForRender:C,updateSortField:(y,z)=>{let N=null;if(z==="none"?N="asc":z==="asc"?N="desc":N=_.value?"asc":null,h.value&&F(y,N),p.value&&Array.isArray(p.value.sortBy)&&Array.isArray(p.value.sortDesc)){const R=p.value.sortBy.indexOf(y);R===-1?N!==null&&(p.value.sortBy.push(y),p.value.sortDesc.push(N==="desc")):N===null?(p.value.sortDesc.splice(R,1),p.value.sortBy.splice(R,1)):p.value.sortDesc[R]=N==="desc"}else N===null?p.value=null:p.value={sortBy:y,sortDesc:N==="desc"};D("updateSort",{sortType:N,sortBy:y})},isMultiSorting:y=>m.value&&Array.isArray(m.value.sortBy)?m.value.sortBy.includes(y):p.value&&Array.isArray(p.value.sortBy)?p.value.sortBy.includes(y):!1,getMultiSortNumber:y=>m.value&&Array.isArray(m.value.sortBy)?m.value.sortBy.indexOf(y)+1:p.value&&Array.isArray(p.value.sortBy)?p.value.sortBy.indexOf(y)+1:!1}}function ut(r,s,t,a,f,c,g,o,n){const l=e.computed(()=>(r.value-1)*f.value+1),h=e.computed(()=>t.value?Math.min(n.value,r.value*f.value):Math.min(o.value.length,r.value*f.value)),_=e.computed(()=>t.value?a.value:o.value.slice(l.value-1,h.value)),m=e.computed(()=>g.value?_.value.map((k,$)=>T({index:l.value+$},k)):_.value),b=e.computed(()=>c.value.length===0||c.value.every($=>o.value.findIndex(F=>JSON.stringify($)===JSON.stringify(F))===-1)?"noneSelected":c.value.length===o.value.length&&c.value.every(F=>o.value.findIndex(D=>JSON.stringify(F)===JSON.stringify(D))!==-1)?"allSelected":"partSelected"),L=e.computed(()=>s.value?b.value==="allSelected"?m.value.map(k=>T({checkbox:!0},k)):b.value==="noneSelected"?m.value.map(k=>T({checkbox:!1},k)):m.value.map(k=>{const $=c.value.findIndex(F=>{const D=T({},k);return delete D.index,JSON.stringify(F)===JSON.stringify(D)})!==-1;return T({checkbox:$},k)}):m.value);return{currentPageFirstIndex:l,currentPageLastIndex:h,multipleSelectStatus:b,pageItems:L}}function pt(r,s,t,a,f,c,g){const o=e.ref(c.value?c.value.page:r.value),n=e.computed(()=>Math.ceil(a.value/f.value)),l=e.computed(()=>n.value===0||o.value===n.value),h=e.computed(()=>o.value===1);return{currentPaginationNumber:o,maxPaginationNumber:n,isLastPage:l,isFirstPage:h,nextPage:()=>{if(a.value!==0&&!l.value&&!t.value)if(s.value){const k=o.value+1;g(k)}else o.value+=1},prevPage:()=>{if(a.value!==0&&!h.value&&!t.value)if(s.value){const k=o.value-1;g(k)}else o.value-=1},updatePage:k=>{t.value||(s.value?g(k):o.value=k)},updateCurrentPaginationNumber:k=>{o.value=k}}}function ft(r,s,t,a){const f=e.computed(()=>!r.value&&s.value.findIndex(o=>o===a.value)===-1?[a.value,...s.value]:s.value),c=e.ref(t.value?t.value.rowsPerPage:a.value);return{rowsItemsComputed:f,rowsPerPageRef:c,updateRowsPerPage:o=>{c.value=o}}}function mt(r,s,t){const a=e.computed({get:()=>{if(r.value){const{page:o,rowsPerPage:n,sortBy:l,sortType:h}=r.value;return{page:o,rowsPerPage:n,sortBy:l!=null?l:null,sortType:h!=null?h:null}}return null},set:o=>{t("update:serverOptions",o)}});return{serverOptionsComputed:a,updateServerOptionsPage:o=>{a.value&&(a.value=le(T({},a.value),{page:o}))},updateServerOptionsSort:(o,n)=>{if(a.value)if(s.value&&Array.isArray(a.value.sortBy)&&Array.isArray(a.value.sortType)){const l=a.value.sortBy.findIndex(h=>h===o);l===-1&&n!==null&&(a.value.sortBy.push(o),a.value.sortType.push(n)),n===null?(a.value.sortBy.splice(l,1),a.value.sortType.splice(l,1)):a.value.sortType[l]=n}else a.value=le(T({},a.value),{sortBy:n!==null?o:null,sortType:n})},updateServerOptionsRowsPerPage:o=>{a.value&&(a.value=le(T({},a.value),{page:1,rowsPerPage:o}))}}}function A(r,s){if(r.includes(".")){let t="";const a=r.split("."),{length:f}=a;let c=0;for(;c{if(typeof c.value=="string"&&c.value!=="")return A(c.value,u);if(Array.isArray(c.value)){let P="";return c.value.forEach(x=>{P+=A(x,u)}),P}return Object.values(u).join(" ")},_=e.computed(()=>{if(!t.value&&g.value!==""){const u=new RegExp(g.value,"i");return a.value.filter(P=>u.test(h(P)))}return a.value}),m=e.computed(()=>{let u=[..._.value];return s.value?(s.value.forEach(P=>{u=u.filter(x=>{const{field:w,comparison:p,criteria:C}=P;if(typeof p=="function")return p(A(w,x),C);const V=A(w,x);switch(p){case"=":return V===C;case"!=":return V!==C;case">":return V>C;case"<":return V=":return V>=C;case"between":return V>=Math.min(...C)&&V<=Math.max(...C);case"in":return C.includes(V);default:return V===C}})}),u):_.value});e.watch(m,u=>{s.value&&l("updateFilter",u)},{immediate:!0,deep:!0});function b(u,P,x,w){const p=u[w],C=P[w];return(w===0?x:b(u,P,x,w-1)).sort((j,K)=>{let W=!0;for(let y=0;yA(p,K)?C?-1:1:0:0})}const L=e.computed(()=>{if(t.value)return a.value;if(r.value===null)return m.value;const{sortBy:u,sortDesc:P}=r.value,x=[...m.value];return n&&Array.isArray(u)&&Array.isArray(P)?u.length===0?x:b(u,P,x,u.length-1):x.sort((w,p)=>A(u,w)A(u,p)?P?-1:1:0)}),k=e.computed(()=>t.value?o.value:L.value.length),$=e.computed({get:()=>{var u;return(u=f.value)!=null?u:[]},set:u=>{l("update:itemsSelected",u)}});return{totalItems:L,selectItemsComputed:$,totalItemsLength:k,toggleSelectAll:u=>{$.value=u?L.value:[]},toggleSelectItem:u=>{const P=u.checkbox;if(delete u.checkbox,delete u.index,P)$.value=$.value.filter(x=>JSON.stringify(x)!==JSON.stringify(u)),l("deselectRow",u);else{const x=$.value;x.unshift(u),$.value=x,l("selectRow",u)}}}}var ht={alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},checkboxColumnWidth:{type:Number,default:null},currentPage:{type:Number,default:1},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},headerTextDirection:{type:String,default:"left"},bodyTextDirection:{type:String,default:"left"},hideFooter:{type:Boolean,default:!1},hideRowsPerPage:{type:Boolean,default:!1},hideHeader:{type:Boolean,default:!1},indexColumnWidth:{type:Number,default:60},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,Array],default:""},searchValue:{type:String,default:""},serverOptions:{type:Object,default:null},serverItemsLength:{type:Number,default:0},showIndex:{type:Boolean,default:!1},sortBy:{type:[String,Array],default:""},sortType:{type:[String,Array],default:"asc"},multiSort:{type:Boolean,default:!1},tableMinHeight:{type:Number,default:180},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:""},bodyExpandRowClassName:{type:[Function,String],default:""},bodyItemClassName:{type:[Function,String],default:""},noHover:{type:Boolean,default:!1},borderCell:{type:Boolean,default:!1},mustSort:{type:Boolean,default:!1},rowsOfPageSeparatorMessage:{type:String,default:"of"},clickEventType:{type:String,default:"single"},clickRowToExpand:{type:Boolean,default:!1},tableNodeId:{type:String,default:""},showIndexSymbol:{type:String,default:"#"}},Na="",Sa="";const _t=r=>(e.pushScopeId("data-v-513716fe"),r=r(),e.popScopeId(),r),bt=["id"],kt=["onClick"],Pt={key:3,class:"header-text"},xt={key:5,class:"multi-sort__number"},Nt=["onClick","onDblclick"],St=["onClick"],Ct=["colspan"],Bt={key:0,class:"vue3-easy-data-table__loading"},wt=_t(()=>e.createElementVNode("div",{class:"vue3-easy-data-table__loading-mask"},null,-1)),It={class:"loading-entity"},Et={key:1,class:"vue3-easy-data-table__message"},$t=["innerHTML"],Vt={key:0,class:"vue3-easy-data-table__footer"},At={key:0,class:"pagination__rows-per-page"},vt={class:"pagination__items-index"},Lt=e.defineComponent({__name:"DataTable",props:le(T({},ht),{items:{type:Array,required:!0},headers:{type:Array,required:!0}}),emits:["clickRow","selectRow","deselectRow","expandRow","updateSort","updateFilter","update:itemsSelected","update:serverOptions","updatePageItems","updateTotalItems"],setup(r,{expose:s,emit:t}){const a=r;e.useCssVars(d=>({ed764a26:e.unref(Rt),"787ca023":e.unref(Y)}));const{tableNodeId:f,clickEventType:c,bodyTextDirection:g,checkboxColumnWidth:o,currentPage:n,expandColumnWidth:l,filterOptions:h,fixedCheckbox:_,fixedExpand:m,fixedHeader:b,fixedIndex:L,headers:k,headerTextDirection:$,indexColumnWidth:F,items:D,itemsSelected:u,loading:P,mustSort:x,multiSort:w,rowsItems:p,rowsPerPage:C,searchField:V,searchValue:j,serverItemsLength:K,serverOptions:W,showIndex:y,sortBy:z,sortType:N,tableHeight:R,tableMinHeight:X,themeColor:ie,rowsOfPageSeparatorMessage:Q,showIndexSymbol:v}=e.toRefs(a),Y=e.computed(()=>R.value?`${R.value}px`:null),Rt=e.computed(()=>`${X.value}px`);e.provide("themeColor",ie.value);const M=e.useSlots(),Tt=e.computed(()=>!!M.pagination),Ft=e.computed(()=>!!M.loading),ye=e.computed(()=>!!M.expand),Dt=e.computed(()=>!!M.body),he=e.ref(),de=e.ref();e.provide("dataTable",he);const _e=e.ref(!1);e.onMounted(()=>{de.value.addEventListener("scroll",()=>{_e.value=de.value.scrollLeft>0})});const ue=e.computed(()=>u.value!==null),J=e.computed(()=>W.value!==null),{serverOptionsComputed:pe,updateServerOptionsPage:zt,updateServerOptionsSort:Ht,updateServerOptionsRowsPerPage:Mt}=mt(W,w,t),{clientSortOptions:be,headerColumns:ke,headersForRender:U,updateSortField:Ot,isMultiSorting:jt,getMultiSortNumber:Wt}=dt(v,o,l,_,m,L,k,ye,F,ue,J,x,pe,y,z,N,w,Ht,t),{rowsItemsComputed:Pe,rowsPerPageRef:q,updateRowsPerPage:qt}=ft(J,p,W,C),{totalItems:xe,selectItemsComputed:Jt,totalItemsLength:ce,toggleSelectAll:Ut,toggleSelectItem:Gt}=yt(be,h,J,D,u,V,j,K,w,t),{currentPaginationNumber:O,maxPaginationNumber:Z,isLastPage:ee,isFirstPage:te,nextPage:ae,prevPage:ne,updatePage:re,updateCurrentPaginationNumber:Kt}=pt(n,J,P,ce,q,W,zt),{currentPageFirstIndex:Ne,currentPageLastIndex:Se,multipleSelectStatus:Ce,pageItems:G}=ut(O,ue,J,D,q,Jt,y,xe,ce),oe=e.computed(()=>O.value===0?0:(O.value-1)*q.value),{expandingItemIndexList:Be,updateExpandingItemIndexList:we,clearExpandingItemIndexList:Ie}=it(G,oe,t),{fixedHeaders:fe,lastFixedColumn:Ee,fixedColumnsInfos:Qt}=ct(U),{clickRow:$e}=st(c,ue,y,t),Xt=d=>{var i;const H=(i=d.width)!=null?i:fe.value.length?100:null;if(H)return`width: ${H}px; min-width: ${H}px;`},Ve=(d,H="th")=>{if(!fe.value.length)return;const i=Qt.value.find(E=>E.value===d);if(i)return`left: ${i.distance}px;z-index: ${H==="th"?3:1};position: sticky;`};return e.watch(P,(d,H)=>{pe.value&&d===!1&&H===!0&&(Kt(pe.value.page),Ie())}),e.watch(q,d=>{J.value?Mt(d):re(1)}),e.watch([j,h],()=>{J.value||re(1)}),e.watch([O,be,V,j,h],()=>{Ie()},{deep:!0}),e.watch(G,d=>{t("updatePageItems",d)},{deep:!0}),e.watch(xe,d=>{t("updateTotalItems",d)},{deep:!0}),s({currentPageFirstIndex:Ne,currentPageLastIndex:Se,clientItemsLength:ce,maxPaginationNumber:Z,currentPaginationNumber:O,isLastPage:ee,isFirstPage:te,nextPage:ae,prevPage:ne,updatePage:re,rowsPerPageOptions:Pe,rowsPerPageActiveOption:q,updateRowsPerPageActiveOption:qt}),(d,H)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataTable",ref:he,class:e.normalizeClass(["vue3-easy-data-table",[d.tableClassName]])},[e.createElementVNode("div",{ref_key:"tableBody",ref:de,class:e.normalizeClass(["vue3-easy-data-table__main",{"fixed-header":e.unref(b),"fixed-height":e.unref(R),"show-shadow":_e.value,"table-fixed":e.unref(fe).length,hoverable:!d.noHover,"border-cell":d.borderCell}])},[e.createElementVNode("table",{id:e.unref(f)},[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(U),(i,E)=>(e.openBlock(),e.createElementBlock("col",{key:E,style:e.normalizeStyle(Xt(i))},null,4))),128))]),e.unref(U).length&&!d.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:0,class:e.normalizeClass(["vue3-easy-data-table__header",[d.headerClassName]])},[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(U),(i,E)=>(e.openBlock(),e.createElementBlock("th",{key:E,class:e.normalizeClass([{sortable:i.sortable,none:i.sortable&&i.sortType==="none",desc:i.sortable&&i.sortType==="desc",asc:i.sortable&&i.sortType==="asc",shadow:i.value===e.unref(Ee)},typeof d.headerItemClassName=="string"?d.headerItemClassName:d.headerItemClassName(i,E+1)]),style:e.normalizeStyle(Ve(i.value)),onClick:e.withModifiers(B=>i.sortable&&i.sortType?e.unref(Ot)(i.value,i.sortType):null,["stop"])},[i.text==="checkbox"?(e.openBlock(),e.createBlock(ze,{key:e.unref(Ce),status:e.unref(Ce),onChange:e.unref(Ut)},null,8,["status","onChange"])):(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["header",`direction-${e.unref($)}`])},[e.unref(M)[`header-${i.value}`]?e.renderSlot(d.$slots,`header-${i.value}`,e.normalizeProps(e.mergeProps({key:0},i)),void 0,!0):e.unref(M)[`header-${i.value.toLowerCase()}`]?e.renderSlot(d.$slots,`header-${i.value.toLowerCase()}`,e.normalizeProps(e.mergeProps({key:1},i)),void 0,!0):e.unref(M).header?e.renderSlot(d.$slots,"header",e.normalizeProps(e.mergeProps({key:2},i)),void 0,!0):(e.openBlock(),e.createElementBlock("span",Pt,e.toDisplayString(i.text),1)),i.sortable?(e.openBlock(),e.createElementBlock("i",{key:i.sortType?i.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:i.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0),e.unref(w)&&e.unref(jt)(i.value)?(e.openBlock(),e.createElementBlock("span",xt,e.toDisplayString(e.unref(Wt)(i.value)),1)):e.createCommentVNode("",!0)],2))],14,kt))),128))])],2)):e.createCommentVNode("",!0),e.unref(Dt)?e.renderSlot(d.$slots,"body",e.normalizeProps(e.mergeProps({key:1},e.unref(G))),void 0,!0):e.unref(ke).length?(e.openBlock(),e.createElementBlock("tbody",{key:2,class:e.normalizeClass(["vue3-easy-data-table__body",{"row-alternation":d.alternating}])},[e.renderSlot(d.$slots,"body-prepend",e.normalizeProps(e.guardReactiveProps({items:e.unref(G),pagination:{isFirstPage:e.unref(te),isLastPage:e.unref(ee),currentPaginationNumber:e.unref(O),maxPaginationNumber:e.unref(Z),nextPage:e.unref(ae),prevPage:e.unref(ne)},headers:e.unref(U)})),void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(G),(i,E)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:E},[e.createElementVNode("tr",{class:e.normalizeClass([{"even-row":(E+1)%2===0},typeof d.bodyRowClassName=="string"?d.bodyRowClassName:d.bodyRowClassName(i,E+1)]),onClick:B=>{e.unref($e)(i,"single",B),d.clickRowToExpand&&e.unref(we)(E+e.unref(oe),i,B)},onDblclick:B=>{e.unref($e)(i,"double",B)}},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(ke),(B,Yt)=>(e.openBlock(),e.createElementBlock("td",{key:Yt,style:e.normalizeStyle(Ve(B,"td")),class:e.normalizeClass([{shadow:B===e.unref(Ee),"can-expand":B==="expand"},typeof d.bodyItemClassName=="string"?d.bodyItemClassName:d.bodyItemClassName(B,E+1),`direction-${e.unref(g)}`]),onClick:Ae=>B==="expand"?e.unref(we)(E+e.unref(oe),i,Ae):null},[e.unref(M)[`item-${B}`]?e.renderSlot(d.$slots,`item-${B}`,e.normalizeProps(e.mergeProps({key:0},i)),void 0,!0):e.unref(M)[`item-${B.toLowerCase()}`]?e.renderSlot(d.$slots,`item-${B.toLowerCase()}`,e.normalizeProps(e.mergeProps({key:1},i)),void 0,!0):B==="expand"?(e.openBlock(),e.createElementBlock("i",{key:2,class:e.normalizeClass(["expand-icon",{expanding:e.unref(Be).includes(e.unref(oe)+E)}])},null,2)):B==="checkbox"?(e.openBlock(),e.createBlock(je,{key:3,checked:i[B],onChange:Ae=>e.unref(Gt)(i)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:4},[e.createTextVNode(e.toDisplayString(e.unref(gt)(B,i)),1)],64))],14,St))),128))],42,Nt),e.unref(ye)&&e.unref(Be).includes(E+e.unref(oe))?(e.openBlock(),e.createElementBlock("tr",{key:0,class:e.normalizeClass([{"even-row":(E+1)%2===0},typeof d.bodyExpandRowClassName=="string"?d.bodyExpandRowClassName:d.bodyExpandRowClassName(i,E+1)])},[e.createElementVNode("td",{colspan:e.unref(U).length,class:"expand"},[i.expandLoading?(e.openBlock(),e.createBlock(et,{key:0,class:"expand-loading"})):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"expand",e.normalizeProps(e.guardReactiveProps(i)),void 0,!0)],8,Ct)],2)):e.createCommentVNode("",!0)],64))),128)),e.renderSlot(d.$slots,"body-append",e.normalizeProps(e.guardReactiveProps({items:e.unref(G),pagination:{isFirstPage:e.unref(te),isLastPage:e.unref(ee),currentPaginationNumber:e.unref(O),maxPaginationNumber:e.unref(Z),nextPage:e.unref(ae),prevPage:e.unref(ne),updatePage:e.unref(re)},headers:e.unref(U)})),void 0,!0)],2)):e.createCommentVNode("",!0)],8,bt),e.unref(P)?(e.openBlock(),e.createElementBlock("div",Bt,[wt,e.createElementVNode("div",It,[e.unref(Ft)?e.renderSlot(d.$slots,"loading",{key:0},void 0,!0):(e.openBlock(),e.createBlock(Ye,{key:1}))])])):e.createCommentVNode("",!0),!e.unref(G).length&&!e.unref(P)?(e.openBlock(),e.createElementBlock("div",Et,[e.renderSlot(d.$slots,"empty-message",{},()=>[e.createElementVNode("span",{innerHTML:d.emptyMessage},null,8,$t)],!0)])):e.createCommentVNode("",!0)],2),d.hideFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Vt,[d.hideRowsPerPage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",At,[e.createTextVNode(e.toDisplayString(d.rowsPerPageMessage)+" ",1),e.createVNode(Ke,{modelValue:e.unref(q),"onUpdate:modelValue":H[0]||(H[0]=i=>e.isRef(q)?q.value=i:null),"rows-items":e.unref(Pe)},null,8,["modelValue","rows-items"])])),e.createElementVNode("div",vt,e.toDisplayString(`${e.unref(Ne)}\u2013${e.unref(Se)}`)+" "+e.toDisplayString(e.unref(Q))+" "+e.toDisplayString(e.unref(ce)),1),e.unref(Tt)?e.renderSlot(d.$slots,"pagination",e.normalizeProps(e.mergeProps({key:1},{isFirstPage:e.unref(te),isLastPage:e.unref(ee),currentPaginationNumber:e.unref(O),maxPaginationNumber:e.unref(Z),nextPage:e.unref(ae),prevPage:e.unref(ne)})),void 0,!0):(e.openBlock(),e.createBlock(lt,{key:2,"is-first-page":e.unref(te),"is-last-page":e.unref(ee),onClickNextPage:e.unref(ae),onClickPrevPage:e.unref(ne)},e.createSlots({_:2},[d.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(nt,{"current-pagination-number":e.unref(O),"max-pagination-number":e.unref(Z),onUpdatePage:e.unref(re)},null,8,["current-pagination-number","max-pagination-number","onUpdatePage"])]),key:"0"}:void 0]),1032,["is-first-page","is-last-page","onClickNextPage","onClickPrevPage"]))]))],2))}});var ge=S(Lt,[["__scopeId","data-v-513716fe"]]);return typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("Vue3EasyDataTable",ge),ge}); diff --git a/package-lock.json b/package-lock.json index a65f376..9c1c816 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-easy-data-table", - "version": "1.5.16", + "version": "1.5.34", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vue3-easy-data-table", - "version": "1.5.16", + "version": "1.5.34", "license": "MIT", "dependencies": { "vue": "^3.2.45" diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue index 0c58648..64533e6 100644 --- a/src/components/DataTable.vue +++ b/src/components/DataTable.vue @@ -227,7 +227,7 @@ class="vue3-easy-data-table__message" > - {{ emptyMessage }} +