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

Comparing version 1.0.11 to 1.0.12

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

@@ -456,3 +456,3 @@ var __defProp = Object.defineProperty;
       type: Number,
-      default: () => 400
+      default: () => null
     },
@@ -531,10 +531,10 @@ wrapLines: {
     useCssVars((_ctx) => ({
-      "d36133b2": unref(borderColor),
-      "a0959aba": unref(maxHeightPx),
-      "0aea1d88": unref(fontSizePx),
-      "5fec7119": unref(rowHeightPx),
-      "14d8efd7": unref(headerFontColor),
-      "01bf27d0": __props.headerBackgroundColor,
-      "6760b6de": unref(rowHoverColor),
-      "3acf373c": unref(bodyFontColor)
+      "74ab61a9": unref(borderColor),
+      "e3dda3b6": unref(maxHeightPx),
+      "9180ac74": unref(fontSizePx),
+      "3e486c9b": unref(rowHeightPx),
+      "25e75a59": unref(headerFontColor),
+      "81bd25cc": __props.headerBackgroundColor,
+      "f8ca70da": unref(rowHoverColor),
+      "cc38f138": unref(bodyFontColor)
     }));
@@ -550,3 +550,3 @@ const {
     const rowHeightPx = computed(() => `${rowHeight.value}px`);
-    const maxHeightPx = computed(() => `${props.maxHeight}px`);
+    const maxHeightPx = computed(() => props.maxHeight ? `${props.maxHeight}px` : null);
     provide("themeColor", props.themeColor);
@@ -876,3 +876,3 @@ provide("rowHeight", rowHeight.value);
 });
-var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-159b8c13"]]);
+var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3aa48a5c"]]);
 export { DataTable as default };

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

@@ -1,1 +0,1 @@
-(function(e,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f(require("vue")):typeof define=="function"&&define.amd?define(["vue"],f):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=f(e.Vue))})(this,function(e){"use strict";var je=Object.defineProperty,Re=Object.defineProperties;var qe=Object.getOwnPropertyDescriptors;var J=Object.getOwnPropertySymbols;var Je=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;var W=(e,f,u)=>f in e?je(e,f,{enumerable:!0,configurable:!0,writable:!0,value:u}):e[f]=u,x=(e,f)=>{for(var u in f||(f={}))Je.call(f,u)&&W(e,u,f[u]);if(J)for(var u of J(f))We.call(f,u)&&W(e,u,f[u]);return e},V=(e,f)=>Re(e,qe(f));var f="",u=(r,m)=>{const t=r.__vccOpts||r;for(const[l,d]of m)t[l]=d;return t};const U=r=>(e.pushScopeId("data-v-566775ba"),r=r(),e.popScopeId(),r),G=["onClick"],K=["checked"],Q=U(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var X=u(e.defineComponent({name:"MutipleSelectCheckBox",props:{status:{type:String,required:!0}},emits:["change"],setup(r,{emit:m}){const t=r;e.useCssVars(B=>({"7f84b28f":e.unref(b)}));const l=e.computed(()=>t.status==="allSelected"),d=()=>{m("change",!l.value)},b=e.inject("themeColor");return(B,P)=>(e.openBlock(),e.createElementBlock("div",{class:"multi-select__checkbox",onClick:e.withModifiers(d,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(l),class:e.normalizeClass(r.status)},null,10,K),Q],8,G))}}),[["__scopeId","data-v-566775ba"]]),Ge="";const Y=r=>(e.pushScopeId("data-v-39f156fd"),r=r(),e.popScopeId(),r),Z=["checked"],v=Y(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ee=u(e.defineComponent({name:"SingleSelectCheckBox",props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(r,{emit:m}){e.useCssVars(l=>({"20cfc5a0":e.unref(t)}));const t=e.inject("themeColor");return(l,d)=>(e.openBlock(),e.createElementBlock("div",{class:"single-select__checkbox",onClick:d[0]||(d[0]=e.withModifiers(b=>m("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:r.checked},null,8,Z),v]))}}),[["__scopeId","data-v-39f156fd"]]),Qe="";const te=r=>(e.pushScopeId("data-v-490fbe16"),r=r(),e.popScopeId(),r),oe={class:"easy-data-table__rows-selector"},ne={class:"rows-input"},ae=te(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),re=["onClick"];var se=u(e.defineComponent({name:"RowsSelector",props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(r,{emit:m}){const t=r;e.useCssVars(y=>({10352173:e.unref($)}));const l=e.ref(!1),d=e.computed({get:()=>t.modelValue,set:y=>{m("update:modelValue",y)}}),b=y=>{d.value=y,l.value=!1},B=(y,s)=>{let a=y.parentNode;for(;a!=null;){if(a.classList&&a.classList.contains(s))return!0;a=a.parentNode}return!1},P=y=>{B(y.target,"easy-data-table__rows-selector")||(l.value=!1)};e.onMounted(()=>{document.addEventListener("click",P)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",P)});const $=e.inject("themeColor");return(y,s)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:s[0]||(s[0]=a=>l.value=!l.value)},[e.createElementVNode("div",ne,e.toDisplayString(e.unref(d)),1),ae]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:l.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.rowsItems,a=>(e.openBlock(),e.createElementBlock("li",{key:a,class:e.normalizeClass({selected:a===e.unref(d)}),onClick:g=>b(a)},e.toDisplayString(a),11,re))),128))],2)]))}}),[["__scopeId","data-v-490fbe16"]]),Ye="";const le={class:"loader-line"};var ce=u(e.defineComponent({name:"LoadingLine",setup(r){e.useCssVars(t=>({"38295e65":e.unref(m)}));const m=e.inject("themeColor");return(t,l)=>(e.openBlock(),e.createElementBlock("div",le))}}),[["__scopeId","data-v-1ec0ad4e"]]),ve="";const ie={class:"buttons-pagination"},de=["onClick"];var pe=u(e.defineComponent({name:"ButtonsPagination",props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(r,{emit:m}){const t=r;e.useCssVars(s=>({e0267a50:e.unref($),"6e139f9a":e.unref(P),c360928e:e.unref(y)}));const l=7,d=s=>{s.type==="button"&&!s.active&&m("updatePage",s.page)},b=e.computed(()=>{const s=[];if(t.maxPaginationNumber<=l)for(let a=1;a<=t.maxPaginationNumber;a+=1)s.push({type:"button",page:a,active:a===t.currentPaginationNumber});else if([1,2,t.maxPaginationNumber,t.maxPaginationNumber-1].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)if(a<=3)s.push({type:"button",page:a,active:a===t.currentPaginationNumber});else if(a===4)s.push({type:"omission"});else{const g=t.maxPaginationNumber-(l-a);s.push({type:"button",page:g,active:g===t.currentPaginationNumber})}else if([3,4].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)a<=5?s.push({type:"button",page:a,active:a===t.currentPaginationNumber}):a===6?s.push({type:"omission"}):s.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber});else if([t.maxPaginationNumber-2,t.maxPaginationNumber-3].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)if(a===1)s.push({type:"button",page:1,active:t.currentPaginationNumber===1});else if(a===2)s.push({type:"omission"});else{const g=t.maxPaginationNumber-(l-a);s.push({type:"button",page:g,active:g===t.currentPaginationNumber})}else for(let a=1;a<=l;a+=1)if(a===1)s.push({type:"button",page:1,active:t.currentPaginationNumber===1});else if(a===2||a===6)s.push({type:"omission"});else if(a===7)s.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber});else{const g=4-a,p=t.currentPaginationNumber-g;s.push({type:"button",page:p,active:p===t.currentPaginationNumber})}return s}),B=e.inject("rowHeight"),P=e.computed(()=>`${B*.6}px`),$=e.inject("borderColor"),y=e.inject("themeColor");return(s,a)=>(e.openBlock(),e.createElementBlock("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),(g,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,class:e.normalizeClass(["item",{button:g.type==="button",active:g.type==="button"&&g.active,omission:g.type==="omission"}]),onClick:F=>d(g)},e.toDisplayString(g.type==="button"?g.page:"..."),11,de))),128))]))}}),[["__scopeId","data-v-69ff0f2b"]]),tt="";const D=r=>(e.pushScopeId("data-v-c9da5286"),r=r(),e.popScopeId(),r),ue=[D(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],me=[D(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var ge=u(e.defineComponent({name:"PaginationArrows",props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(r,{emit:m}){const t=e.useSlots();return(l,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":r.isFirstPage}]),onClick:d[0]||(d[0]=b=>m("clickPrevPage"))},ue,2),e.unref(t).buttonsPagination?e.renderSlot(l.$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:d[1]||(d[1]=b=>m("clickNextPage"))},me,2)],64))}}),[["__scopeId","data-v-c9da5286"]]);const fe={class:"icon",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48"},_e=[e.createElementVNode("path",{d:"M576 234.688V1024H448V234.688L213.312 469.312 128 384 512 0l384 384-85.312 85.312L576 234.688z",fill:"#373D41"},null,-1)];function he(r,m){return e.openBlock(),e.createElementBlock("svg",fe,_e)}var ye={render:he},st="";const be={class:"data-table"},ke={key:0},xe=["onClick"],Se={key:1,class:"header-text__wrapper"},Ce={class:"header-text"},Be=["colspan"],Pe={key:0,class:"data-table__message"},Ne={key:1,class:"data-table__message"},we={class:"data-table__footer"},$e={class:"footer__rows-per-page"},Ve=e.createTextVNode(" rows per page: "),Ee={class:"footer__items-index"};var Ie=u(e.defineComponent({name:"DataTable",props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},borderColor:{type:String,default:"#e0e0e0"},bodyFontColor:{type:String,default:"#212121"},emptyMessage:{type:String,default:"No Available Data"},fixedHeader:{type:Boolean,default:!0},headerFontColor:{type:String,default:"#373737"},headerBackgroundColor:{type:String,default:"#fff"},bodyFontSize:{type:Number,default:12},headers:{type:Array,required:!0},items:{type:Array,required:!0},maxHeight:{type:Number,default:()=>400},wrapLines:{type:Boolean,default:!1},itemsSelected:{type:Array,default:null},searchField:{type:String,default:""},searchValue:{type:String,default:""},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowHoverColor:{type:String,default:"#eee"},loading:{type:Boolean,deault:!1},loadingMessage:{type:String,default:"Loading, please wait."},serverOptions:{type:Object,default:()=>null},serverItemsLength:{type:Number,default:0},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},themeColor:{type:String,default:"#42b883"},dense:{type:Boolean,default:!1},showIndex:{type:Boolean,default:!1}},emits:["update:itemsSelected","update:serverOptions"],setup(r,{emit:m}){const t=r;e.useCssVars(o=>({d36133b2:e.unref(l),a0959aba:e.unref(s),"0aea1d88":e.unref(P),"5fec7119":e.unref(y),"14d8efd7":e.unref(d),"01bf27d0":r.headerBackgroundColor,"6760b6de":e.unref(B),"3acf373c":e.unref(b)}));const{borderColor:l,headerFontColor:d,bodyFontColor:b,rowHoverColor:B}=e.toRefs(t),P=e.computed(()=>`${t.bodyFontSize}px`),$=e.computed(()=>t.bodyFontSize*(t.dense?2:3)),y=e.computed(()=>`${$.value}px`),s=e.computed(()=>`${t.maxHeight}px`);e.provide("themeColor",t.themeColor),e.provide("rowHeight",$.value),e.provide("borderColor",l.value);const a=e.useSlots(),g=e.computed(()=>a.body),p=e.computed({get:()=>{const{page:o,rowsPerPage:c,sortBy:n,sortType:i}=t.serverOptions;return{page:o,rowsPerPage:c,sortBy:n!=null?n:null,sortType:i!=null?i:null}},set:o=>{m("update:serverOptions",o)}}),F=e.computed(()=>t.itemsSelected!==null),_=e.computed(()=>t.serverOptions!==null),Le=()=>t.sortBy!==""?{sortBy:t.sortBy,sortDesc:t.sortType==="desc"}:null,N=e.ref(Le()),T=e.computed(()=>{const o=t.headers.map(i=>{const k=i;return i.sortable&&(k.sortType="none"),_.value&&i.value===p.value.sortBy&&p.value.sortType&&(k.sortType=p.value.sortType),!_.value&&N.value&&i.value===N.value.sortBy&&(k.sortType=N.value.sortDesc?"desc":"asc"),k}),c=t.showIndex?[{text:"#",value:"index"},...o]:o;return F.value?[{text:"checkbox",value:"checkbox"},...c]:c}),O=e.computed(()=>T.value.map(o=>o.value)),S=e.computed({get:()=>t.itemsSelected,set:o=>{m("update:itemsSelected",o)}}),I=e.computed(()=>S.value.length===t.items.length?"allSelected":S.value.length===0?"noneSelected":"partSelected"),E=e.computed(()=>{if(!_.value&&t.searchValue!==""){const o=new RegExp(t.searchValue,"i");return t.items.filter(c=>o.test(t.searchField!==""?c[t.searchField]:Object.values(c).join(" ")))}return t.items}),h=e.ref(_.value?t.serverOptions.page:1),C=e.ref(_.value?t.serverOptions.rowsPerPage:t.rowsPerPage);e.watch(C,o=>{_.value&&(p.value=V(x({},p.value),{page:1,rowsPerPage:o})),h.value=1});const Fe=(o,c)=>{let n=null;c==="none"?n="asc":c==="asc"?n="desc":n=null,_.value?p.value=V(x({},p.value),{sortBy:n!==null?o:null,sortType:n}):n===null?N.value=null:N.value={sortBy:o,sortDesc:n==="desc"}},Te=e.computed(()=>{if(_.value)return t.items;if(N.value===null)return E.value;const{sortBy:o,sortDesc:c}=N.value;return structuredClone(E.value).sort((i,k)=>i[o]<k[o]?c?1:-1:i[o]>k[o]?c?-1:1:0)}),z=e.computed(()=>_.value?t.serverItemsLength:E.value.length),A=e.computed(()=>_.value?h.value*C.value:Math.min(E.value.length,h.value*C.value)),M=e.computed(()=>(h.value-1)*C.value+1),H=e.computed(()=>Math.ceil(z.value/C.value)),j=e.computed(()=>h.value===H.value),R=e.computed(()=>h.value===1),{loading:w}=e.toRefs(t),Oe=()=>{if(!j.value&&!w.value)if(_.value){const o=h.value+1;p.value=V(x({},p.value),{page:o})}else h.value+=1},De=()=>{if(!R.value&&!w.value)if(_.value){const o=h.value-1;p.value=V(x({},p.value),{page:o})}else h.value-=1},ze=o=>{w.value||(_.value?p.value=V(x({},p.value),{page:o}):h.value=o)};e.watch(w,(o,c)=>{_.value&&o===!1&&c===!0&&(h.value=p.value.page)});const q=e.computed(()=>_.value?t.items:Te.value.slice(M.value-1,A.value)),L=e.computed(()=>{if(t.showIndex){const o=C.value*(h.value-1);return q.value.map((c,n)=>x({index:o+n+1},c))}return q.value}),Ae=e.computed(()=>F.value?I.value==="allSelected"?L.value.map(o=>x({checkbox:!0},o)):I.value==="noneSelected"?L.value.map(o=>x({checkbox:!1},o)):L.value.map(o=>{const c=S.value.findIndex(n=>JSON.stringify(n)===JSON.stringify(o))!==-1;return x({checkbox:c},o)}):L.value),Me=o=>{S.value=o?E.value:[]},He=o=>{const c=o.checkbox;if(delete o.checkbox,c)S.value=S.value.filter(n=>JSON.stringify(n)!==JSON.stringify(o));else{const n=S.value;n.unshift(o),S.value=n}};return(o,c)=>(e.openBlock(),e.createElementBlock("div",be,[e.createElementVNode("div",{class:e.normalizeClass(["data-table__body",{"fixed-header":r.fixedHeader,"wrap-lines":r.wrapLines}])},[e.createElementVNode("table",null,[e.unref(T).length?(e.openBlock(),e.createElementBlock("thead",ke,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(T),(n,i)=>(e.openBlock(),e.createElementBlock("th",{key:i,class:e.normalizeClass({sortable:n.sortable,none:n.sortable&&n.sortType==="none",desc:n.sortable&&n.sortType==="desc",asc:n.sortable&&n.sortType==="asc"}),onClick:k=>n.sortable&&n.sortType?Fe(n.value,n.sortType):null},[n.text==="checkbox"?(e.openBlock(),e.createBlock(X,{key:e.unref(I),status:e.unref(I),onChange:Me},null,8,["status"])):(e.openBlock(),e.createElementBlock("span",Se,[e.createElementVNode("span",Ce,e.toDisplayString(n.text),1),n.sortable?(e.openBlock(),e.createBlock(e.unref(ye),{key:n.sortType?n.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:n.sortType==="desc"}])},null,8,["class"])):e.createCommentVNode("",!0)]))],10,xe))),128))]),e.unref(w)?(e.openBlock(),e.createElementBlock("th",{key:0,class:"loading-th",colspan:e.unref(O).length},[e.createVNode(ce)],8,Be)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.unref(g)?e.renderSlot(o.$slots,"body",{key:1},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[r.items.length&&e.unref(O).length?(e.openBlock(),e.createElementBlock("tbody",{key:0,class:e.normalizeClass({"row-alternation":r.alternating})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Ae),n=>(e.openBlock(),e.createElementBlock("tr",{key:JSON.stringify(n)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O),(i,k)=>(e.openBlock(),e.createElementBlock("td",{key:k},[e.unref(a)[i]?e.renderSlot(o.$slots,i,e.normalizeProps(e.mergeProps({key:0},n)),void 0,!0):i==="checkbox"?(e.openBlock(),e.createBlock(ee,{key:1,checked:n[i],onChange:ct=>He(n)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(Array.isArray(n[i])?n[i].join(","):n[i]),1)],64))]))),128))]))),128))],2)):e.createCommentVNode("",!0)],64))]),!r.items.length&&!e.unref(w)?(e.openBlock(),e.createElementBlock("div",Pe,e.toDisplayString(r.emptyMessage),1)):e.createCommentVNode("",!0),!r.items.length&&e.unref(w)?(e.openBlock(),e.createElementBlock("div",Ne,e.toDisplayString(r.loadingMessage),1)):e.createCommentVNode("",!0)],2),e.createElementVNode("div",we,[e.createElementVNode("div",$e,[Ve,e.createVNode(se,{modelValue:C.value,"onUpdate:modelValue":c[0]||(c[0]=n=>C.value=n),"rows-items":r.rowsItems},null,8,["modelValue","rows-items"])]),e.createElementVNode("div",Ee,e.toDisplayString(`${e.unref(M)}-${e.unref(A)}`)+" of "+e.toDisplayString(e.unref(z)),1),e.createVNode(ge,{"is-first-page":e.unref(R),"is-last-page":e.unref(j),onClickNextPage:Oe,onClickPrevPage:De},e.createSlots({_:2},[r.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(pe,{"current-pagination-number":h.value,"max-pagination-number":e.unref(H),onUpdatePage:ze},null,8,["current-pagination-number","max-pagination-number"])])}:void 0]),1032,["is-first-page","is-last-page"])])]))}}),[["__scopeId","data-v-159b8c13"]]);return Ie});
+(function(e,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f(require("vue")):typeof define=="function"&&define.amd?define(["vue"],f):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=f(e.Vue))})(this,function(e){"use strict";var je=Object.defineProperty,Re=Object.defineProperties;var qe=Object.getOwnPropertyDescriptors;var J=Object.getOwnPropertySymbols;var Je=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;var W=(e,f,u)=>f in e?je(e,f,{enumerable:!0,configurable:!0,writable:!0,value:u}):e[f]=u,x=(e,f)=>{for(var u in f||(f={}))Je.call(f,u)&&W(e,u,f[u]);if(J)for(var u of J(f))We.call(f,u)&&W(e,u,f[u]);return e},V=(e,f)=>Re(e,qe(f));var f="",u=(r,m)=>{const t=r.__vccOpts||r;for(const[l,d]of m)t[l]=d;return t};const U=r=>(e.pushScopeId("data-v-566775ba"),r=r(),e.popScopeId(),r),G=["onClick"],K=["checked"],Q=U(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var X=u(e.defineComponent({name:"MutipleSelectCheckBox",props:{status:{type:String,required:!0}},emits:["change"],setup(r,{emit:m}){const t=r;e.useCssVars(B=>({"7f84b28f":e.unref(b)}));const l=e.computed(()=>t.status==="allSelected"),d=()=>{m("change",!l.value)},b=e.inject("themeColor");return(B,P)=>(e.openBlock(),e.createElementBlock("div",{class:"multi-select__checkbox",onClick:e.withModifiers(d,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(l),class:e.normalizeClass(r.status)},null,10,K),Q],8,G))}}),[["__scopeId","data-v-566775ba"]]),Ge="";const Y=r=>(e.pushScopeId("data-v-39f156fd"),r=r(),e.popScopeId(),r),Z=["checked"],v=Y(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ee=u(e.defineComponent({name:"SingleSelectCheckBox",props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(r,{emit:m}){e.useCssVars(l=>({"20cfc5a0":e.unref(t)}));const t=e.inject("themeColor");return(l,d)=>(e.openBlock(),e.createElementBlock("div",{class:"single-select__checkbox",onClick:d[0]||(d[0]=e.withModifiers(b=>m("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:r.checked},null,8,Z),v]))}}),[["__scopeId","data-v-39f156fd"]]),Qe="";const te=r=>(e.pushScopeId("data-v-490fbe16"),r=r(),e.popScopeId(),r),oe={class:"easy-data-table__rows-selector"},ne={class:"rows-input"},ae=te(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),re=["onClick"];var se=u(e.defineComponent({name:"RowsSelector",props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(r,{emit:m}){const t=r;e.useCssVars(y=>({10352173:e.unref($)}));const l=e.ref(!1),d=e.computed({get:()=>t.modelValue,set:y=>{m("update:modelValue",y)}}),b=y=>{d.value=y,l.value=!1},B=(y,s)=>{let a=y.parentNode;for(;a!=null;){if(a.classList&&a.classList.contains(s))return!0;a=a.parentNode}return!1},P=y=>{B(y.target,"easy-data-table__rows-selector")||(l.value=!1)};e.onMounted(()=>{document.addEventListener("click",P)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",P)});const $=e.inject("themeColor");return(y,s)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:s[0]||(s[0]=a=>l.value=!l.value)},[e.createElementVNode("div",ne,e.toDisplayString(e.unref(d)),1),ae]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:l.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.rowsItems,a=>(e.openBlock(),e.createElementBlock("li",{key:a,class:e.normalizeClass({selected:a===e.unref(d)}),onClick:g=>b(a)},e.toDisplayString(a),11,re))),128))],2)]))}}),[["__scopeId","data-v-490fbe16"]]),Ye="";const le={class:"loader-line"};var ce=u(e.defineComponent({name:"LoadingLine",setup(r){e.useCssVars(t=>({"38295e65":e.unref(m)}));const m=e.inject("themeColor");return(t,l)=>(e.openBlock(),e.createElementBlock("div",le))}}),[["__scopeId","data-v-1ec0ad4e"]]),ve="";const ie={class:"buttons-pagination"},de=["onClick"];var pe=u(e.defineComponent({name:"ButtonsPagination",props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(r,{emit:m}){const t=r;e.useCssVars(s=>({e0267a50:e.unref($),"6e139f9a":e.unref(P),c360928e:e.unref(y)}));const l=7,d=s=>{s.type==="button"&&!s.active&&m("updatePage",s.page)},b=e.computed(()=>{const s=[];if(t.maxPaginationNumber<=l)for(let a=1;a<=t.maxPaginationNumber;a+=1)s.push({type:"button",page:a,active:a===t.currentPaginationNumber});else if([1,2,t.maxPaginationNumber,t.maxPaginationNumber-1].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)if(a<=3)s.push({type:"button",page:a,active:a===t.currentPaginationNumber});else if(a===4)s.push({type:"omission"});else{const g=t.maxPaginationNumber-(l-a);s.push({type:"button",page:g,active:g===t.currentPaginationNumber})}else if([3,4].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)a<=5?s.push({type:"button",page:a,active:a===t.currentPaginationNumber}):a===6?s.push({type:"omission"}):s.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber});else if([t.maxPaginationNumber-2,t.maxPaginationNumber-3].includes(t.currentPaginationNumber))for(let a=1;a<=l;a+=1)if(a===1)s.push({type:"button",page:1,active:t.currentPaginationNumber===1});else if(a===2)s.push({type:"omission"});else{const g=t.maxPaginationNumber-(l-a);s.push({type:"button",page:g,active:g===t.currentPaginationNumber})}else for(let a=1;a<=l;a+=1)if(a===1)s.push({type:"button",page:1,active:t.currentPaginationNumber===1});else if(a===2||a===6)s.push({type:"omission"});else if(a===7)s.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber});else{const g=4-a,p=t.currentPaginationNumber-g;s.push({type:"button",page:p,active:p===t.currentPaginationNumber})}return s}),B=e.inject("rowHeight"),P=e.computed(()=>`${B*.6}px`),$=e.inject("borderColor"),y=e.inject("themeColor");return(s,a)=>(e.openBlock(),e.createElementBlock("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),(g,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,class:e.normalizeClass(["item",{button:g.type==="button",active:g.type==="button"&&g.active,omission:g.type==="omission"}]),onClick:F=>d(g)},e.toDisplayString(g.type==="button"?g.page:"..."),11,de))),128))]))}}),[["__scopeId","data-v-69ff0f2b"]]),tt="";const D=r=>(e.pushScopeId("data-v-c9da5286"),r=r(),e.popScopeId(),r),ue=[D(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],me=[D(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var ge=u(e.defineComponent({name:"PaginationArrows",props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(r,{emit:m}){const t=e.useSlots();return(l,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":r.isFirstPage}]),onClick:d[0]||(d[0]=b=>m("clickPrevPage"))},ue,2),e.unref(t).buttonsPagination?e.renderSlot(l.$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:d[1]||(d[1]=b=>m("clickNextPage"))},me,2)],64))}}),[["__scopeId","data-v-c9da5286"]]);const fe={class:"icon",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48"},_e=[e.createElementVNode("path",{d:"M576 234.688V1024H448V234.688L213.312 469.312 128 384 512 0l384 384-85.312 85.312L576 234.688z",fill:"#373D41"},null,-1)];function he(r,m){return e.openBlock(),e.createElementBlock("svg",fe,_e)}var ye={render:he},st="";const be={class:"data-table"},ke={key:0},xe=["onClick"],Se={key:1,class:"header-text__wrapper"},Ce={class:"header-text"},Be=["colspan"],Pe={key:0,class:"data-table__message"},Ne={key:1,class:"data-table__message"},we={class:"data-table__footer"},$e={class:"footer__rows-per-page"},Ve=e.createTextVNode(" rows per page: "),Ee={class:"footer__items-index"};var Ie=u(e.defineComponent({name:"DataTable",props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},borderColor:{type:String,default:"#e0e0e0"},bodyFontColor:{type:String,default:"#212121"},emptyMessage:{type:String,default:"No Available Data"},fixedHeader:{type:Boolean,default:!0},headerFontColor:{type:String,default:"#373737"},headerBackgroundColor:{type:String,default:"#fff"},bodyFontSize:{type:Number,default:12},headers:{type:Array,required:!0},items:{type:Array,required:!0},maxHeight:{type:Number,default:()=>null},wrapLines:{type:Boolean,default:!1},itemsSelected:{type:Array,default:null},searchField:{type:String,default:""},searchValue:{type:String,default:""},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowHoverColor:{type:String,default:"#eee"},loading:{type:Boolean,deault:!1},loadingMessage:{type:String,default:"Loading, please wait."},serverOptions:{type:Object,default:()=>null},serverItemsLength:{type:Number,default:0},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},themeColor:{type:String,default:"#42b883"},dense:{type:Boolean,default:!1},showIndex:{type:Boolean,default:!1}},emits:["update:itemsSelected","update:serverOptions"],setup(r,{emit:m}){const t=r;e.useCssVars(o=>({"74ab61a9":e.unref(l),e3dda3b6:e.unref(s),"9180ac74":e.unref(P),"3e486c9b":e.unref(y),"25e75a59":e.unref(d),"81bd25cc":r.headerBackgroundColor,f8ca70da:e.unref(B),cc38f138:e.unref(b)}));const{borderColor:l,headerFontColor:d,bodyFontColor:b,rowHoverColor:B}=e.toRefs(t),P=e.computed(()=>`${t.bodyFontSize}px`),$=e.computed(()=>t.bodyFontSize*(t.dense?2:3)),y=e.computed(()=>`${$.value}px`),s=e.computed(()=>t.maxHeight?`${t.maxHeight}px`:null);e.provide("themeColor",t.themeColor),e.provide("rowHeight",$.value),e.provide("borderColor",l.value);const a=e.useSlots(),g=e.computed(()=>a.body),p=e.computed({get:()=>{const{page:o,rowsPerPage:c,sortBy:n,sortType:i}=t.serverOptions;return{page:o,rowsPerPage:c,sortBy:n!=null?n:null,sortType:i!=null?i:null}},set:o=>{m("update:serverOptions",o)}}),F=e.computed(()=>t.itemsSelected!==null),_=e.computed(()=>t.serverOptions!==null),Le=()=>t.sortBy!==""?{sortBy:t.sortBy,sortDesc:t.sortType==="desc"}:null,N=e.ref(Le()),T=e.computed(()=>{const o=t.headers.map(i=>{const k=i;return i.sortable&&(k.sortType="none"),_.value&&i.value===p.value.sortBy&&p.value.sortType&&(k.sortType=p.value.sortType),!_.value&&N.value&&i.value===N.value.sortBy&&(k.sortType=N.value.sortDesc?"desc":"asc"),k}),c=t.showIndex?[{text:"#",value:"index"},...o]:o;return F.value?[{text:"checkbox",value:"checkbox"},...c]:c}),O=e.computed(()=>T.value.map(o=>o.value)),S=e.computed({get:()=>t.itemsSelected,set:o=>{m("update:itemsSelected",o)}}),I=e.computed(()=>S.value.length===t.items.length?"allSelected":S.value.length===0?"noneSelected":"partSelected"),E=e.computed(()=>{if(!_.value&&t.searchValue!==""){const o=new RegExp(t.searchValue,"i");return t.items.filter(c=>o.test(t.searchField!==""?c[t.searchField]:Object.values(c).join(" ")))}return t.items}),h=e.ref(_.value?t.serverOptions.page:1),C=e.ref(_.value?t.serverOptions.rowsPerPage:t.rowsPerPage);e.watch(C,o=>{_.value&&(p.value=V(x({},p.value),{page:1,rowsPerPage:o})),h.value=1});const Fe=(o,c)=>{let n=null;c==="none"?n="asc":c==="asc"?n="desc":n=null,_.value?p.value=V(x({},p.value),{sortBy:n!==null?o:null,sortType:n}):n===null?N.value=null:N.value={sortBy:o,sortDesc:n==="desc"}},Te=e.computed(()=>{if(_.value)return t.items;if(N.value===null)return E.value;const{sortBy:o,sortDesc:c}=N.value;return structuredClone(E.value).sort((i,k)=>i[o]<k[o]?c?1:-1:i[o]>k[o]?c?-1:1:0)}),z=e.computed(()=>_.value?t.serverItemsLength:E.value.length),A=e.computed(()=>_.value?h.value*C.value:Math.min(E.value.length,h.value*C.value)),H=e.computed(()=>(h.value-1)*C.value+1),M=e.computed(()=>Math.ceil(z.value/C.value)),j=e.computed(()=>h.value===M.value),R=e.computed(()=>h.value===1),{loading:w}=e.toRefs(t),Oe=()=>{if(!j.value&&!w.value)if(_.value){const o=h.value+1;p.value=V(x({},p.value),{page:o})}else h.value+=1},De=()=>{if(!R.value&&!w.value)if(_.value){const o=h.value-1;p.value=V(x({},p.value),{page:o})}else h.value-=1},ze=o=>{w.value||(_.value?p.value=V(x({},p.value),{page:o}):h.value=o)};e.watch(w,(o,c)=>{_.value&&o===!1&&c===!0&&(h.value=p.value.page)});const q=e.computed(()=>_.value?t.items:Te.value.slice(H.value-1,A.value)),L=e.computed(()=>{if(t.showIndex){const o=C.value*(h.value-1);return q.value.map((c,n)=>x({index:o+n+1},c))}return q.value}),Ae=e.computed(()=>F.value?I.value==="allSelected"?L.value.map(o=>x({checkbox:!0},o)):I.value==="noneSelected"?L.value.map(o=>x({checkbox:!1},o)):L.value.map(o=>{const c=S.value.findIndex(n=>JSON.stringify(n)===JSON.stringify(o))!==-1;return x({checkbox:c},o)}):L.value),He=o=>{S.value=o?E.value:[]},Me=o=>{const c=o.checkbox;if(delete o.checkbox,c)S.value=S.value.filter(n=>JSON.stringify(n)!==JSON.stringify(o));else{const n=S.value;n.unshift(o),S.value=n}};return(o,c)=>(e.openBlock(),e.createElementBlock("div",be,[e.createElementVNode("div",{class:e.normalizeClass(["data-table__body",{"fixed-header":r.fixedHeader,"wrap-lines":r.wrapLines}])},[e.createElementVNode("table",null,[e.unref(T).length?(e.openBlock(),e.createElementBlock("thead",ke,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(T),(n,i)=>(e.openBlock(),e.createElementBlock("th",{key:i,class:e.normalizeClass({sortable:n.sortable,none:n.sortable&&n.sortType==="none",desc:n.sortable&&n.sortType==="desc",asc:n.sortable&&n.sortType==="asc"}),onClick:k=>n.sortable&&n.sortType?Fe(n.value,n.sortType):null},[n.text==="checkbox"?(e.openBlock(),e.createBlock(X,{key:e.unref(I),status:e.unref(I),onChange:He},null,8,["status"])):(e.openBlock(),e.createElementBlock("span",Se,[e.createElementVNode("span",Ce,e.toDisplayString(n.text),1),n.sortable?(e.openBlock(),e.createBlock(e.unref(ye),{key:n.sortType?n.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:n.sortType==="desc"}])},null,8,["class"])):e.createCommentVNode("",!0)]))],10,xe))),128))]),e.unref(w)?(e.openBlock(),e.createElementBlock("th",{key:0,class:"loading-th",colspan:e.unref(O).length},[e.createVNode(ce)],8,Be)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.unref(g)?e.renderSlot(o.$slots,"body",{key:1},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[r.items.length&&e.unref(O).length?(e.openBlock(),e.createElementBlock("tbody",{key:0,class:e.normalizeClass({"row-alternation":r.alternating})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Ae),n=>(e.openBlock(),e.createElementBlock("tr",{key:JSON.stringify(n)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O),(i,k)=>(e.openBlock(),e.createElementBlock("td",{key:k},[e.unref(a)[i]?e.renderSlot(o.$slots,i,e.normalizeProps(e.mergeProps({key:0},n)),void 0,!0):i==="checkbox"?(e.openBlock(),e.createBlock(ee,{key:1,checked:n[i],onChange:ct=>Me(n)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(Array.isArray(n[i])?n[i].join(","):n[i]),1)],64))]))),128))]))),128))],2)):e.createCommentVNode("",!0)],64))]),!r.items.length&&!e.unref(w)?(e.openBlock(),e.createElementBlock("div",Pe,e.toDisplayString(r.emptyMessage),1)):e.createCommentVNode("",!0),!r.items.length&&e.unref(w)?(e.openBlock(),e.createElementBlock("div",Ne,e.toDisplayString(r.loadingMessage),1)):e.createCommentVNode("",!0)],2),e.createElementVNode("div",we,[e.createElementVNode("div",$e,[Ve,e.createVNode(se,{modelValue:C.value,"onUpdate:modelValue":c[0]||(c[0]=n=>C.value=n),"rows-items":r.rowsItems},null,8,["modelValue","rows-items"])]),e.createElementVNode("div",Ee,e.toDisplayString(`${e.unref(H)}-${e.unref(A)}`)+" of "+e.toDisplayString(e.unref(z)),1),e.createVNode(ge,{"is-first-page":e.unref(R),"is-last-page":e.unref(j),onClickNextPage:Oe,onClickPrevPage:De},e.createSlots({_:2},[r.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(pe,{"current-pagination-number":h.value,"max-pagination-number":e.unref(M),onUpdatePage:ze},null,8,["current-pagination-number","max-pagination-number"])])}:void 0]),1032,["is-first-page","is-last-page"])])]))}}),[["__scopeId","data-v-3aa48a5c"]]);return Ie});

package.json

@@ -6,3 +6,3 @@ {
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "types": "./types/main.d.ts",
@@ -9,0 +9,0 @@ "files": [

README.md

@@ -188,2 +188,3 @@ <p align="center">
 | max-height | false | number | 400 | Max height of table (table header and table body, not including footer pagination) |
+| rows-hover-color | false | string | '#eee' | Background color of row when mouse hover |
 | rows-items | false | number[] | [25, 50, 100] | A number array of rows-per-page, working as the options of `rows per page` selector |
@@ -212,5 +213,2 @@ | rows-per-page | false | number | 25 | Rows of items to display in per page |
 
-## Todo
-This component just satisfied my needs, if you find any bug or demand any other features, plese report an issue and making pull requests is very welcomed!
-
 ## Version update
@@ -223,2 +221,5 @@ ### v1.0.11
   <img src="./images/show-index.png"  />
+
+## Todo
+If you find any bug or demand any other features, plese report an issue and making pull requests is very welcomed!
   

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73217

increased by0.13%

Number of lines in readme file

223

increased by0.45%

No dependency changes