tablevu 0.2.2 → 0.2.5

package/dist/array.js

@@ -1 +1 @@
-export default function adapter(t,e){let a=e;if(t.filter||t.search){const r=t.cols.map((e,a)=>({index:a,searchable:null==q.searchable||1==q.searchable})).filter(e=>1==e.searchable).map(e=>e.index);0<r.length&&(t.filter||t.search)&&(t.filter,t.search)&&(a=a.filter(e=>Object.values(e).filter((e,a)=>-1<r.indexOf(a)).some(e=>-1<e.indexOf(t.search))))}if(t.sort&&0<t.sort.length)for(let e=t.sort.length-1;0<=e;e--){let r=t.sort[e];"desc"==r.dir?a.sort((e,a)=>e[r.name]<a[r.name]?1:a[r.name]<e[r.name]?-1:0):a.sort((e,a)=>e[r.name]>a[r.name]?1:a[r.name]>e[r.name]?-1:0)}return{rows:a=t.pageSize&&a.length>t.pageSize?a.filter((e,a,r)=>a>=t.pageSize*(t.currPage-1)&&a<t.pageSize*t.currPage):a,count:e.length}}
+export default function(a,b){let c=[];return Array.isArray(b)&&(c=b),new Promise(b=>{if(a.pageSize&&(c=c.slice((a.currPage-1)*a.pageSize,a.currPage*a.pageSize)),a.sort&&0<a.sort.length)for(let d,b=a.sort.length-1;0<=b;b--)d=null,d=-1<a.sort[b].index?a.cols[a.sort[b].index].name:a.sort[b].name,"desc"==a.sort[b].dir?c.sort((c,a)=>c[d]<a[d]?1:a[d]<c[d]?-1:0):c.sort((c,a)=>c[d]>a[d]?1:a[d]>c[d]?-1:0);b({rows:c,count:c.length})})}

package/dist/get.js

@@ -1 +1 @@
-export default function get(n){return new Promise((o,t)=>{fetch(n).then(n=>n.json()).then(n=>{let t,e=0;n?(e=n.hasOwnProperty("value")?(t=n.value,n.hasOwnProperty("@count")?parseInt(n["@count"]):n.hasOwnProperty("count")?parseInt(n.count):0):(t=n,0),o({rows:t,count:e})):o({rows:null,count:null})}).catch(n=>{console.error(n),t(n)})})}
+export default function get(a,b){return new Promise((d,e)=>{fetch(a,b).then(a=>a.json()).then(a=>{let b,e=0;a?(a.hasOwnProperty("value")?(b=a.value,e=a.hasOwnProperty("@count")?parseInt(a["@count"]):a.hasOwnProperty("count")?parseInt(a.count):0):(b=a,e=0),d({rows:b,count:e})):d({rows:null,count:null})}).catch(a=>{console.error(a),e(a)})})}

package/dist/odata.js

@@ -1 +1 @@
-import get from"./get.js";function filter(t){function r(e){return null===e?"null":"string"==typeof e?10==e.length&&"-"==e[4]&&"-"==e[7]&&Date.parse(e)?e:"'"+e+"'":"number"==typeof e?e:e.getMonth&&"function"==typeof e.getMonth?e.toISOString():e.func+"("+e.params.join(",")+")"}let n="";if(t&&t.filters)for(let e=0;e<t.filters.length;e++)0<e&&(n+=` ${t.type||"and"} `),t.filters[e].column?n="in"==t.filters[e].operator?n+r(t.filters[e].value)+" "+t.filters[e].operator+" "+t.filters[e].column:n+t.filters[e].column+" "+t.filters[e].operator+" "+r(t.filters[e].value):t.filters[e].func?n=n+t.filters[e].func+"("+t.filters[e].params.map(e=>r(e)).join(",")+")":t.filters[e]&&(n=n+"("+filter(t.filters[e])+")");return n}function sefs(e,t,n){let a="";if(t.select&&0<t.select.length&&(n?a+="$select="+t.select.join(","):e.searchParams.append("$select",t.select.join(","))),t.expand&&0<t.expand.length){let r=[];t.expand.forEach(e=>{var t=sefs(null,e,";");t?r.push(e.name+"("+t+")"):r.push(e.name)}),n?a+=(0<a.length?n:"")+"$expand="+r.join(","):e.searchParams.append("$expand",r.join(","))}return a}export default class odata{constructor(l,s,i){this.adapter=t=>{var e,r=new URL(l.url),n=(t.pageSize&&(r.searchParams.append("$skip",t.pageSize*(t.currPage-1)),r.searchParams.append("$top",t.pageSize)),sefs(r,s),[]);t.filter&&Object.prototype.hasOwnProperty.call(t.filter,"filters")&&(e=filter(t.filter))&&n.push(e),t.filter&&(e=filter(t.filter))&&n.push(e),t.search&&(e=t.cols.filter(e=>null==e.searchable||1==e.searchable).map(e=>"contains("+e.name.replaceAll(".","/")+",'"+t.search+"')").join(" or "))&&n.push("("+e+")"),n&&0<n.length&&r.searchParams.append("$filter",n.join(" and ")),t.sort&&0<t.sort.length&&r.searchParams.append("$orderby",t.sort.map(e=>{var t={index:-1,name:"",dir:null};return Object.prototype.hasOwnProperty.call(e,"index")?t.index=e.index:t.name=e.name,t.dir=e.dir,t}).map(e=>(-1<e.index?t.cols[e.index]:e).name.replaceAll(".","/")+(e.dir?" "+e.dir:"")).join(","));let a=null;return a=i&&i.onfetch&&"function"==typeof i.onfetch?i.onfetch(new Request(r,l)):new Request(r,l),get(a)}}}
+import get from"./get.js";function filter(a){function b(a){if(null===a)return"null";if("string"==typeof a)return"'"+a+"'";if("number"==typeof a)return a;debugger;return a.getMonth&&"function"==typeof a.getMonth?a.toISOString():a.func+"("+a.params.join(",")+")"}let c="";if(a&&a.filters)for(let d=0;d<a.filters.length;d++)0<d&&(c+=` ${a.type||"and"} `),a.filters[d].column?"in"==a.filters[d].operator?c=c+b(a.filters[d].value)+" "+a.filters[d].operator+" "+a.filters[d].column:c=c+a.filters[d].column+" "+a.filters[d].operator+" "+b(a.filters[d].value):a.filters[d].func?c=c+a.filters[d].func+"("+a.filters[d].params.map(a=>b(a)).join(",")+")":a.filters[d]&&(c=c+"("+filter(a.filters[d])+")");return c}export default class odata{constructor(a,b){this.adapter=c=>{const d=new URL(a);console.log(d),c.pageSize&&(d.searchParams.append("$skip",c.pageSize*(c.currPage-1)),d.searchParams.append("$top",c.pageSize)),c.select&&0<c.select.length&&d.searchParams.append("$select",c.select.join(",")),c.expand&&0<c.expand.length&&d.searchParams.append("$expand",c.expand.map(a=>a.name+(a.select&&0<a.select.length?"($select="+a.select.join(",")+")":"")).join(","));let e=[];if(c.filter&&Object.prototype.hasOwnProperty.call(c.filter,"filters")){let a=filter(c.filter);a&&e.push(a)}if(c.filter){let a=filter(c.filter);a&&e.push(a)}if(c.search){let a=c.cols.filter(a=>null==a.searchable||!0==a.searchable).map(a=>"contains("+a.name.replaceAll(".","/")+",'"+c.search+"')").join(" or ");a&&e.push("("+a+")")}return 0<e.length&&d.searchParams.append("$filter",e.join(" and ")),c.sort&&0<c.sort.length&&d.searchParams.append("$orderby",c.sort.map(a=>{let b={index:-1,name:"",dir:null};return Object.prototype.hasOwnProperty.call(a,"index")?b.index=a.index:b.name=a.name,b.dir=a.dir,b}).map(a=>(-1<a.index?c.cols[a.index].name:a.name)+(a.dir?" "+a.dir:"")).join(",")),c.count&&d.searchParams.append("$count",!0),get(d,b)}}}

package/dist/table.js

@@ -1 +1 @@
-import{h,onMounted,reactive,ref,watch}from"vue";import adaptarr from"./array.js";const tablevuStatuses={Error:-1,Ready:0,Loading:1},tablevu={props:{settings:{type:Object,default:null},data:{type:[Array,Function]},search:{type:String},filter:{type:[Array,Object]},command:{type:Array,default:[]},rowid:{type:String},onRowClick:{type:Function},onRowDblClick:{type:Function},class:{type:String,default:"table"},style:{type:String,default:null},buttonClass:{type:String,default:"btn"}},emits:["onRowClick","onRowDblClick"],setup(i,{emit:c}){let l=[],u=[],n=0;const d=reactive({adapter:null,group:{value:i.settings&&i.settings.group?i.settings.group.value:i.group||null,content:i.settings&&i.settings.group?i.settings.group.content:null,expandAll:!0,class:"table-light"},page:{count:0,size:i.settings&&i.settings.page?i.settings.page.size:0,current:0,type:null},footer:{button:{first:{visible:!0,content:null},prior:{visible:!0,content:null},next:{visible:!0,content:null},last:{visible:!0,content:null},page:{visible:!0,content:null},size:{visible:!0,content:null},class:"btn"}},sort:i.settings&&i.settings.sort?i.settings.sort:[],columns:i.settings&&i.settings.columns?i.settings.columns:[],onRowClick:i.settings.onRowClick||i.onRowClick,onRowDblClick:i.settings.onRowDblClick||i.onRowDblClick});function r(){m(1)}function a(){1<d.page.current?m(d.page.current-1):m(d.page.current)}function s(){m(d.page.current+1)}function p(){m(d.page.count)}function o(){m(d.page.current)}function g(e,t){var n;d.sort&&0<d.sort.length?(0==(n=d.sort.findIndex(t=>t.index==e))?d.sort[n].dir=t||(d.sort[0].dir?null:"desc"):0<n&&d.sort.splice(n,1),0!=n&&d.sort.unshift({index:e,dir:t||null}),2<d.sort.length&&d.sort.pop()):d.sort.push({index:e,dir:t||null}),m(d.page.current)}function m(e){let t=null;i.data&&(Array.isArray(i.data)&&(t=i.data),d.status=tablevuStatuses.Loading,d.adapter)&&d.adapter({pageSize:d.page.size,currPage:e,sort:d.sort,cols:d.columns,filter:d.filter,search:d.search},t).then(t=>{u=d.onData?d.onData(t.rows):t.rows,n=t.count,d.group&&(l=function(o,l){var r=[];for(let n=0;n<l.length;n++){let e=null,t=null;var a=l[n],s=(o.value?e="function"==typeof o.value?o.value(a):a[o.value]:"function"==typeof o?e=o(a):"bigint"==typeof o||"number"==typeof o?(s=parseInt(o))&&(e=a[s]):"string"==typeof o&&(e=a[o]),o.content&&(t="function"==typeof o.content?o.content(a):a[o.content]),r.findIndex(t=>t.group==e));-1<s?r[s].rows.push(a):r.push({group:e,content:t,expand:d.group.expandAll,rows:[a]})}return r}(d.group,u)),d.page.count=0<t.count&&0<d.page.size?t.count/d.page.size:0,d.page.current=e,d.status=tablevuStatuses.Ready,d.time=Date.now()})}function f(t,e){var n={style:{}},t=(t.colspan&&1<t.colspan&&(n.colspan=t.colspan),t.align&&(n.style["text-align"]=t.align),t.width&&(n.style["max-width"]=t.width),t.color&&(n.style.color=t.color),t.backgroundColor&&(n.style["background-color"]=t.backgroundColor),function(e,n){if(n){let t;var o;return t="datetime"==e.type||"date"==e.type||"time"==e.type?(o=new Date(n),"date"==e.type?o.toLocaleDateString():"time"==e.type?o.toLocaleTimeString():o.toLocaleString()):"numeric"==e.type?parseFloat(n):"integer"==e.type?parseInt(n):n}return""}(t,e));return h("td",n,t)}function y(t,n){var o,l,r,e={},a=[];e.key=t,e.index=t,i.rowid&&(e.rowid=n[i.rowid]);for(let t=0;t<d.columns.length;t+=1){let e;var s=d.columns[t];if(s.render)e=(l=n,void 0,r={style:{}},(o=s).colspan&&1<o.colspan&&(r.colspan=o.colspan),o.align&&(r.style["text-align"]=o.align),o.width&&(r.style["max-width"]=o.width),o=o.render(l),h("td",r,o)),a.push(e);else{if(s.depth){e=n;for(let t=0;t<s.depth.length;t+=1)e=e&&e[s.depth[t]]}else e=n[s.name];a.push(f(s,e))}}return e.ondblclick=t=>{var e=u[t.currentTarget.attributes.index.value];c("onRowDblClick",t,e)},i.onRowClick&&(e.onClick=t=>{var e=u[t.currentTarget.attributes.index.value];i.onRowClick(t,e)}),h("tr",e,a)}i.data&&(Array.isArray(i.data)?d.adapter=adaptarr:d.adapter=i.data),i.filter&&(d.filter=i.filter),watch(()=>i.filter,(t,e)=>{d.filter=t||null,o()},{deep:!0}),watch(()=>i.search,(t,e)=>{d.timer&&clearTimeout(d.timer),(e&&e.length>(i.data.searchMinChar||3)&&(null==t||t.length<=(i.data.searchMinChar||3))||t&&t.length>(i.data.searchMinChar||3))&&(d.timer=setTimeout(()=>{i.search&&i.search.length>(i.data.searchMinChar||3)?d.search=i.search:d.search=null,o()},444))}),watch(()=>i.command,(t,e)=>{t&&0<t.length&&((t=i.command[t.length-1])&&t.name&&("refresh"==t.name.toLowerCase()?o():"first"==t.name.toLowerCase()?r():"prior"==t.name.toLowerCase()?a():"next"==t.name.toLowerCase()?s():"last"==t.name.toLowerCase()?p():console.log("Unknown command")),i.command.length=0)},{deep:!0}),0==d.columns.length&&alert("Columns not defined !");for(let t=0;t<d.columns.length;t++)d.columns[t].name&&-1<d.columns[t].name.indexOf(".")&&(d.columns[t].depth=d.columns[t].name.split("."));return m(1),onMounted(()=>{console.log("tablevu.mounted")}),{spec:d,renderHeader:function(){var o=[];let l=1;for(let n=0;n<d.columns.length;n+=1)if(1<l)l--;else{var r=[],a=(d.columns[n].label?r.push(h("span",d.columns[n].label)):r.push(h("span",d.columns[n].name)),d.sort&&0<d.sort.length&&d.sort[0].index==n&&("desc"==d.sort[0].dir?r.push(h("span",{style:{float:"right"}},"▼")):r.push(h("span",{style:{float:"right"}},"▲"))),{position:"relative"}),s=(d.columns[n].width&&(a.width=d.columns[n].width,a.minWidth=d.columns[n].width,a.maxWidth=d.columns[n].width),{display:"block","font-weight":500,textDecoration:"none",color:"black",textAlign:"center"});d.columns[n].header&&(d.columns[n].header.colspan&&(l=parseInt(d.columns[n].header.colspan)||1),d.columns[n].header.align&&(s.textAlign=d.columns[n].header.align),d.columns[n].header.backgroundColor&&(a.backgroundColor=d.columns[n].header.backgroundColor),d.columns[n].header.color)&&(s.color=d.columns[n].header.color);let t,e;if(d.columns[n].popup){const c=ref(null);var i=[h("a",{href:"#",onClick(t){g(n),t.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Ascending"),h("a",{href:"#",onClick(t){g(n,"desc"),t.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Descending")];t=h("a",{href:"#",onClick(t){c.value&&c.value.style&&c.value.style.display&&"block"==c.value.style.display?c.value.style.display="none":c.value.style.display="block",t.preventDefault()},style:s},r),e=h("div",{ref:c,style:{position:"absolute",display:"none",width:d.columns[n].width||"12rem",height:"fit-content",border:"1px solid lightgray",backgroundColor:"whitesmoke",zIndex:1,left:0,top:"2rem",bottom:0,right:0,padding:".25rem"}},i)}else t=h("a",{href:"#",onClick(t){g(n),t.preventDefault()},style:s},r);d.columns[n].filter,o.push(h("th",{colspan:1<l?l:null,style:a},[t,e]))}return[h("tr",{},o)]},renderBody:function(){var n=[];if(l&&0<l.length){let e=0;for(let t=0;t<l.length;t+=1){var o=l[t];if(n.push(function(e){var t=h("button",{title:e.expand,onClick:t=>{console.log(e.expand),e.expand=!e.expand,t.currentTarget.value=e.expand?"▼":"►",d.time=Date.now(),t.preventDefault()},style:{padding:0,margin:"0 6px 0 0",width:"12px",height:"100%",border:"none",outline:0,backgroundColor:"transparent"}},e.expand?"▼":"►"),n=e.content||e.group;return h("tr",{},h("td",{colspan:d.columns.length,class:d.group.class},[t,n]))}(o)),o.expand&&o.rows&&0<o.rows.length)for(let t=0;t<o.rows.length;t+=1)n.push(y(e,o.rows[t])),e++}}else if(u&&0<u.length)for(let t=0;t<u.length;t+=1)n.push(y(t,u[t]));return n},renderFooter:function(){var t=h("button",{class:d.footer.button.class,style:"margin-right: .5rem",onClick:r,disabled:1==d.page.current},"◀◀"),e=h("button",{class:d.footer.button.class,style:"margin-right: .5rem",onClick:p,disabled:0<d.page.count},"▶▶"),n=h("button",{class:d.footer.button.class,style:"margin-right: .5rem"},d.page.current),o=h("button",{class:d.footer.button.class,style:"margin-right: .5rem",onClick:a,disabled:1==d.page.current},"◀"),l=h("button",{class:d.footer.button.class,style:"margin-right: .5rem",onClick:s,disabled:0<d.page.count&&d.page.current==d.page.count},"▶"),t=h("td",{colspan:d.columns.length,align:"center"},[t,o,n,l,e]);return[h("tr",{},[t])]},renderCaption:function(){return null}}},render(t){console.log("tablevu.render",this.spec.status);var e={class:"tablevu"},t=(t.class&&(e.class="tablevu "+t.class),t.style&&(e.style=t.style),[]);return t.push(h("thead",{},this.renderHeader())),this.spec.status==tablevuStatuses.Ready&&t.push(h("tbody",{"data-time":this.spec.time},this.renderBody())),this.spec.caption&&t.push(h("caption",{},this.renderCaption())),0<this.spec.page.size&&t.push(h("tfoot",{},this.renderFooter())),h("table",e,t)}};export default tablevu;
+import{h,onMounted,reactive,ref,watch,isReactive,isRef}from"vue";import adaptarr from"./array.js";const tablevuStatuses={Error:-1,Ready:0,Loading:1},tablevu={props:{settings:{type:Object,default:null},data:{type:[Array,Function]},group:{type:[String,Object]},search:{type:String},filter:{type:[Array,Object]},command:{type:Array,default:[]},rowid:{type:String},onRowClick:{type:Function},onRowDblClick:{type:Function},class:{type:String,default:"table"},style:{type:String,default:null}},emits:["onRowClick","onRowDblClick"],setup(a,{attrs:b,slots:c,emit:d,expose:e}){function f(a,b){z=[],y=[];for(let d=0;d<b.length;d++){let e=null,f=null;const c=b[d];if(a.value)e="function"==typeof a.value?a.value(c):c[a.value];else if("function"==typeof a)e=a(c);else if("bigint"==typeof a||"number"==typeof a){const b=parseInt(a);b&&(e=c[b])}else"string"==typeof a&&(e=c[a]);a.content&&("function"==typeof a.content?f=a.content(c):f=c[a.content]);let g=z.findIndex(a=>a.group==e);-1==g&&(g=z.push({group:e,content:f,expand:D.group.expandAll})-1),y.push(g)}}function g(){n(1)}function i(){1<D.page.current?n(D.page.current-1):n(D.page.current)}function j(){n(D.page.current+1)}function k(){n(D.page.count)}function l(){n(D.page.current)}function m(a,b){if(D.sort&&0<D.sort.length){let c=D.sort.findIndex(b=>b.index==a);if(0>c){let b=D.columns[a].name;c=D.sort.findIndex(a=>a.name==b)}0==c?D.sort[c].dir=b?b:D.sort[0].dir?null:"desc":0<c&&D.sort.splice(c,1),0!=c&&D.sort.unshift({index:a,dir:b?b:null}),2<D.sort.length&&D.sort.pop()}else D.sort.push({index:a,dir:b?b:null});n(D.page.current)}function n(b){let c=null;if(a.data)Array.isArray(a.data)&&(c=a.data);else return;D.status=tablevuStatuses.Loading,A&&A({pageSize:D.page.size,currPage:b,sort:D.sort,cols:D.columns,filter:D.filter,search:D.search},c).then(a=>{w=D.onData?D.onData(a.rows):a.rows,D.group&&("string"==typeof D.group||"bigint"==typeof D.group||"object"==typeof D.group&&D.group.value)&&f(D.group,w),D.page.count=0<a.count&&0<D.page.size?a.count/D.page.size:0,D.page.current=b,D.status=tablevuStatuses.Ready,D.time=Date.now()})}function p(a,b){if(b){let c;if("datetime"==a.type||"date"==a.type||"time"==a.type){let d=new Date(b);c="date"==a.type?d.toLocaleDateString():"time"==a.type?d.toLocaleTimeString():d.toLocaleString()}else c="numeric"==a.type?parseFloat(b):"integer"==a.type?parseInt(b):b;return c}return""}function q(a,b){const c={style:{}};a.colspan&&1<a.colspan&&(c.colspan=a.colspan),a.align&&(c.style["text-align"]=a.align),a.width&&(c.style["max-width"]=a.width),a.color&&(c.style.color=a.color),a.backgroundColor&&(c.style["background-color"]=a.backgroundColor);const d=p(a,b);return h("td",c,d)}function s(a,b){const c={style:{}};a.colspan&&1<a.colspan&&(c.colspan=a.colspan),a.align&&(c.style["text-align"]=a.align),a.width&&(c.style["max-width"]=a.width);let d=a.render(b);return h("td",c,d)}function t(a){const c=h("button",{title:a.expand,onClick:b=>{console.log(a.expand),a.expand=!a.expand,b.currentTarget.value=a.expand?"\u25BC":"\u25BA",D.time=Date.now(),b.preventDefault()},style:{padding:0,margin:"0 6px 0 0",width:"12px",height:"100%",border:"none",outline:0,backgroundColor:"transparent"}},a.expand?"\u25BC":"\u25BA"),b=a.content||a.group;return h("tr",{},h("td",{colspan:D.columns.length,class:D.group.class},[c,b]))}function u(b,e){const f={},g=[];f.key=b,f.index=b,a.rowid&&(f.rowid=e[a.rowid]);for(let a=0;a<D.columns.length;a+=1){let b;const d=D.columns[a];if(d.render)b=s(d,e),g.push(b);else{if(d.depth){b=e;for(let a=0;a<d.depth.length;a+=1)b&&(b=b[d.depth[a]])}else b=e[d.name];g.push(q(d,b))}}return f.ondblclick=a=>{const b=w[a.currentTarget.attributes.index.value];d("onRowDblClick",a,b)},a.onRowClick&&(f.onClick=b=>{const c=w[b.currentTarget.attributes.index.value];a.onRowClick(b,c)}),h("tr",f,g)}function v(){const a=[];if(w&&0<w.length)if(z&&0<z.length){let b=[];for(let a=0;a<z.length;a++)b.push({index:a,childs:[]});for(let a=0;a<w.length;a++){const c=y[a];b[c].childs.push(u(a,w[a]))}for(let c=0;c<z.length;c++)a.push(t(z[c])),z[c].expand&&a.push(b[c].childs)}else for(let b=0;b<w.length;b++)a.push(u(b,w[b]));return a}let w=[],y=[],z=[],A=null,B=null,C={rowClick:a.settings.onRowClick||a.onRowClick,rowDblClick:a.settings.onRowDblClick||a.onRowDblClick};const D=reactive({caption:null,group:{value:a.settings&&a.settings.group?a.settings.group.value:a.group?a.group:null,content:a.settings&&a.settings.group?a.settings.group.content:null,expandAll:!0,class:"table-light"},page:{count:0,size:a.settings&&a.settings.page?a.settings.page.size:0,current:0,type:null},sort:a.settings&&a.settings.sort?a.settings.sort:[],columns:a.settings&&a.settings.columns?a.settings.columns:[],footer:{button:{class:"btn"}}});a.data&&(Array.isArray(a.data)?A=adaptarr:A=a.data),a.filter&&(D.filter=a.filter),(isRef(a.search)||isReactive(a.search))&&watch(()=>a.search,(b,c)=>{const d=parseInt(a.settings.searchMinChar)||3;B&&clearTimeout(B),(c&&c.length>d&&(null==b||null==b||b.length<=d)||b&&b.length>d)&&(B=setTimeout(()=>{D.search=b&&b.length>d?a.search:null,l()},444))}),a.filter&&(D.filter=a.filter),(isRef(a.filter)||isReactive(a.filter))&&watch(()=>a.filter,()=>{D.filter=a.filter?a.filter:null,l()},{deep:!0}),(isRef(a.command)||isReactive(a.command))&&watch(()=>a.command,b=>{if(b&&0<b.length){const d=a.command[b.length-1];d&&d.name&&("refresh"==d.name.toLowerCase()?l():"first"==d.name.toLowerCase()?g():"prior"==d.name.toLowerCase()?i():"next"==d.name.toLowerCase()?j():"last"==d.name.toLowerCase()?k():console.log("Unknown command")),a.command.length=0}},{deep:!0}),0==D.columns.length&&alert("Columns not defined !");for(let f=0;f<D.columns.length;f++)D.columns[f].name&&-1<D.columns[f].name.indexOf(".")&&(D.columns[f].depth=D.columns[f].name.split("."));return n(1),onMounted(()=>{console.log("tablevu.mounted")}),{spec:D,renderHeader:function(){let b=[],c=1;for(let d=0;d<D.columns.length;d+=1){if(1<c){c--;continue}const e=[];D.columns[d].label?e.push(h("span",D.columns[d].label)):e.push(h("span",D.columns[d].name)),D.sort&&0<D.sort.length&&D.sort[0].index==d&&("desc"==D.sort[0].dir?e.push(h("span",{style:{float:"right"}},"\u25BC")):e.push(h("span",{style:{float:"right"}},"\u25B2")));let g={position:"relative"};D.columns[d].width&&(g.width=D.columns[d].width,g.minWidth=D.columns[d].width,g.maxWidth=D.columns[d].width);let i={display:"block","font-weight":500,textDecoration:"none",color:"black",textAlign:"center"};D.columns[d].header&&(D.columns[d].header.colspan&&(c=parseInt(D.columns[d].header.colspan)||1),D.columns[d].header.align&&(i.textAlign=D.columns[d].header.align),D.columns[d].header.backgroundColor&&(g.backgroundColor=D.columns[d].header.backgroundColor),D.columns[d].header.color&&(i.color=D.columns[d].header.color));let j,a;if(D.columns[d].popup){const b=ref(null);let f=[h("a",{href:"#",onClick(a){m(d),a.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Ascending"),h("a",{href:"#",onClick(a){m(d,"desc"),a.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Descending")];j=h("a",{href:"#",onClick(a){b.value.style.display=b.value&&b.value.style&&b.value.style.display&&"block"==b.value.style.display?"none":"block",a.preventDefault()},style:i},e),a=h("div",{ref:b,style:{position:"absolute",display:"none",width:D.columns[d].width||"12rem",height:"fit-content",border:"1px solid lightgray",backgroundColor:"whitesmoke",zIndex:1,left:0,top:"2rem",bottom:0,right:0,padding:".25rem"}},f)}else j=h("a",{href:"#",onClick(a){m(d),a.preventDefault()},style:i},e);D.columns[d].filter,b.push(h("th",{colspan:1<c?c:null,style:g},[j,a]))}const a=h("tr",{},b);return[a]},renderBody:v,renderFooter:function(){const a=h("button",{class:D.footer.button.class,style:"margin-right: .5rem",onClick:g,disabled:1==D.page.current},"\u25C0\u25C0"),b=h("button",{class:D.footer.button.class,style:"margin-right: .5rem",onClick:k,disabled:0<D.page.count},"\u25B6\u25B6"),c=h("button",{class:D.footer.button.class,style:"margin-right: .5rem"},D.page.current),d=h("button",{class:D.footer.button.class,style:"margin-right: .5rem",onClick:i,disabled:1==D.page.current},"\u25C0"),e=h("button",{class:D.footer.button.class,style:"margin-right: .5rem",onClick:j,disabled:0<D.page.count&&D.page.current==D.page.count},"\u25B6"),f=h("td",{colspan:D.columns.length,align:"center"},[a,d,c,e,b]),l=h("tr",{},[f]);return[l]},renderCaption:function(){return null}}},render(a){console.log("tablevu.render",this.spec.status);let b={class:"tablevu"};a.class&&(b.class="tablevu "+a.class),a.style&&(b.style=a.style);let c=[];return c.push(h("thead",{},this.renderHeader())),this.spec.status==tablevuStatuses.Ready&&c.push(h("tbody",{"data-time":this.spec.time},this.renderBody())),this.spec.caption&&c.push(h("caption",{},this.renderCaption())),0<this.spec.page.size&&c.push(h("tfoot",{},this.renderFooter())),h("table",b,c)}};export default tablevu;

package/dist/webapi.js

@@ -1 +1 @@
-import get from"./get.js";export default class webapi{constructor(t,e,n){this.adapter=a=>{var e=new URL(t.url);a.pageSize&&(e.searchParams.append("skip",a.pageSize*(a.currPage-1)),e.searchParams.append("top",a.pageSize)),a.search&&e.searchParams.append("search",a.search),a.sort&&0<a.sort.length&&e.searchParams.append("orderby",a.sort.map(e=>{var a={index:-1,name:""};return Object.prototype.hasOwnProperty.call(e,"index")?a.index=e.index:a.name=e.name,a}).map(e=>(-1<e.index?a.cols[e.index]:e).name));let r=null;return r=n&&n.onfetch&&"function"==typeof n.onfetch?n.onfetch(new Request(e,t)):new Request(e,t),get(r)}}}
+import get from"./get.js";export default class webapi{constructor(a,b,c){this.adapter=b=>{const d=new URL(a.url);b.pageSize&&(d.searchParams.append("skip",b.pageSize*(b.currPage-1)),d.searchParams.append("top",b.pageSize)),b.search&&d.searchParams.append("search",b.search),b.sort&&0<b.sort.length&&d.searchParams.append("orderby",b.sort.map(a=>{let b={index:-1,name:""};return Object.prototype.hasOwnProperty.call(a,"index")?b.index=a.index:b.name=a.name,b}).map(a=>-1<a.index?b.cols[a.index].name:a.name));let e=null;return e=c&&c.onfetch&&"function"==typeof c.onfetch?c.onfetch(new Request(d,a)):new Request(d,a),get(e)}}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tablevu",
-	"version": "0.2.2",
+	"version": "0.2.5",
 	"description": "vue 3 data table",
 	"main": "index.js",
 	"directories": {

package/src/array.js

@@ -1,5 +1,40 @@
+export default function (props, data) {
+	let d = [];
+
+	if (Array.isArray(data))
+		d = data;
+
+	return new Promise((resolve, reject) => {
+		// Paging //
+		if (props.pageSize) {
+			d = d.slice((props.currPage - 1) * props.pageSize, props.currPage * props.pageSize);
+		}
+
+		// Sort //
+		if (props.sort && props.sort.length > 0) {
+			for (let i = props.sort.length - 1; i >= 0; i--) {
+				let f = null;
+				
+				if (props.sort[i].index > -1)
+					f = props.cols[props.sort[i].index].name;
+				else
+					f = props.sort[i].name;
+
+				if (props.sort[i].dir == 'desc')
+					d.sort((a,b) => (a[f] < b[f]) ? 1 : ((b[f] < a[f]) ? -1 : 0));
+				else
+					d.sort((a,b) => (a[f] > b[f]) ? 1 : ((b[f] > a[f]) ? -1 : 0));
+			}
+		};
+
+
+		resolve({ rows: d, count: d.length })
+	})
+}
+/*
 export default function adapter(params, data) {
-	let rsl = data;
+	debugger;
+	const rsl = data;
 
 	// Filter & Search //
 	if (params.filter || params.search) {
@@ -40,3 +75,4 @@ export default function adapter(params, data) {
 
 	return { rows: rsl, count: data.length };
 }
+*/

package/src/get.js

@@ -1,6 +1,6 @@
-export default function get(req) {
+export default function get(url, options) {
 	return new Promise((resolve, reject) => {
-		fetch(req).then(res => res.json()).then(res => {
+		fetch(url, options).then(res => res.json()).then(res => {
 			let r;
 			let c = 0;
 

package/src/odata.js

@@ -6,14 +6,12 @@ function filter(q) {
 		if (q === null) {
 			return 'null'
 		} else if (typeof(q) === 'string') {
-			if (q.length == 10 && q[4] == '-' && q[7] == '-' && Date.parse(q)) { // input date return iso string
-				return q;
-			} else
-				return '\'' + q + '\'';
+			return '\'' + q + '\'';
 		} else {
 			if (typeof(q) === 'number')
 				return q;
 			else {
+				debugger;
 				if (q.getMonth && typeof q.getMonth === "function")
 					return q.toISOString()
 				else
@@ -46,59 +44,26 @@ function filter(q) {
 	return s;
 }
 
-function sefs(url, query, seperator) {
-	let r = '';
-
-	if (query.select && query.select.length > 0) {
-		if (seperator)
-			r += '$select=' + query.select.join(',');
-		else
-			url.searchParams.append('$select', query.select.join(','));
-	};
-
-	if (query.expand && query.expand.length > 0) {
-		let a = [];
-
-		query.expand.forEach(e => {
-			let q = sefs(null, e, ';');
-
-			if (q)
-				a.push(e.name + '(' + q + ')');
-			else
-				a.push(e.name);
-		});
-
-		if (seperator)
-			r += (r.length > 0 ? seperator: '') + '$expand=' + a.join(',');
-		else
-			url.searchParams.append('$expand', a.join(','));
-	};
-
-	return r;
-}
-
 export default class odata {
-	constructor(req, data, events) {
+	constructor(url, options) {
 		this.adapter = (props) => {
-			const u = new URL(req.url);
+			const u = new URL(url);
+			console.log(u);
 
 			// Paging //
 			if (props.pageSize) {
 				u.searchParams.append('$skip', props.pageSize * (props.currPage - 1));
 				u.searchParams.append('$top', props.pageSize);
 			}
-
-			sefs(u, data);
-	/*	
+		
 			// Select //
-			if (data.select && data.select.length > 0)
-				u.searchParams.append('$select', data.select.join(','));
+			if (props.select && props.select.length > 0)
+				u.searchParams.append('$select', props.select.join(','));
 		
 			// Expand //
-			if (data.expand && data.expand.length > 0) {
-				const a =
-				u.searchParams.append('$expand', data.expand.map(m => m.name + ((m.select && m.select.length > 0) ? '($select=' + m.select.join(',') + ')' : '')).join(','));
-			}*/
+			if (props.expand && props.expand.length > 0)
+				u.searchParams.append('$expand', props.expand.map(m => m.name + ((m.select && m.select.length > 0) ? '($select=' + m.select.join(',') + ')' : '')).join(','));
+		
 			// Filter //
 			let f = [];
 		
@@ -124,18 +89,16 @@ export default class odata {
 		
 			if (f && f.length > 0)
 				u.searchParams.append('$filter', f.join(' and '));
-
+		
 			// Sort //
 			if (props.sort && props.sort.length > 0)
-				u.searchParams.append('$orderby', props.sort.map(m => { let n = { index: -1, name: '', dir: null }; if (Object.prototype.hasOwnProperty.call(m, 'index')) { n.index = m.index } else { n.name = m.name }; n.dir = m.dir; return n; }).map(m => { return (m.index > -1 ? props.cols[m.index].name : m.name).replaceAll('.', '/') + (m.dir ? (' ' + m.dir): '') }).join(','));
+				u.searchParams.append('$orderby', props.sort.map(m => { let n = { index: -1, name: '', dir: null }; if (Object.prototype.hasOwnProperty.call(m, 'index')) { n.index = m.index } else { n.name = m.name }; n.dir = m.dir; return n; }).map(m => { return (m.index > -1 ? props.cols[m.index].name : m.name) + (m.dir ? (' ' + m.dir): '') }).join(','));
 
-			let r = null;
-			if (events && events.onfetch && typeof events.onfetch == 'function')
-				r = events.onfetch(new Request(u, req))
-			else
-				r = new Request(u, req);
+			// Count //
+			if (props.count)
+				u.searchParams.append('$count', true);
 
-			return get(r);
+			return get(u, options);
 		}
 	}
 }

package/src/table.js

@@ -5,7 +5,7 @@
  *  https://github.com/endb/tablevu/LICENCE
  */
 
-import { h, onMounted, reactive, ref, watch } from 'vue';
+import { h, onMounted, reactive, ref, watch, isReactive, isRef } from 'vue';
 import adaptarr from './array.js';
 
 const tablevuStatuses = { Error: -1, Ready: 0, Loading: 1 };
@@ -14,7 +14,7 @@ const tablevu = {
 	props: {
 		settings: { type: Object, default: null },
 		data: { type: [Array, Function] },
-		//group: { type: Object, default: { value: null, expandAll: true, class: 'table-light' } },
+		group: { type: [String, Object] }, 
 		search: { type: String },
 		filter: { type: [Array, Object] },
 		command: { type: Array, default: [] },
@@ -22,19 +22,26 @@ const tablevu = {
 		onRowClick: { type: Function },
 		onRowDblClick: { type: Function },
 		class: { type: String, default: 'table' },
-		style: { type: String, default: null },
-		buttonClass: { type: String, default: 'btn' }
+		style: { type: String, default: null }
 	},
 
 	emits: ['onRowClick', 'onRowDblClick'],
 
 	setup(props, { attrs, slots, emit, expose }) {
-		let grps = [];
 		let rows = [];
-		let count = 0;
+		let rowg = [];
+		let grps = [];
+
+		let adapter = null;
+		let timer = null;
+
+		let events = {
+			rowClick: props.settings.onRowClick || props.onRowClick,
+			rowDblClick: props.settings.onRowDblClick || props.onRowDblClick
+		};
 
 		const spec = reactive({
-			adapter: null,
+			caption: null,
 			group: {
 				value: (props.settings && props.settings.group) ? props.settings.group.value : props.group ? props.group: null, // string ise alan adı, int ise index, fonksiyon ise calistirip alacak.
 				content: (props.settings && props.settings.group) ? props.settings.group.content : null, // grid de ne gosterilecek
@@ -47,75 +54,78 @@ const tablevu = {
 				current: 0,
 				type: null // incrementral, dynamic
 			},
+			sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
+			columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
 			footer: {
 				button: {
-					first: { visible: true, content: null },
-					prior: { visible: true, content: null },
-					next: { visible: true, content: null },
-					last: { visible: true, content: null },
-					page: { visible: true, content: null },
-					size: { visible: true, content: null },
 					class: 'btn'
 				}
-			},
-			sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
-			columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
-			onRowClick: props.settings.onRowClick || props.onRowClick,
-			onRowDblClick: props.settings.onRowDblClick || props.onRowDblClick,
+			}
 		});
 
 		if (props.data) {
 			if (Array.isArray(props.data)) {
-				spec.adapter = adaptarr;
+				adapter = adaptarr;
 			}
 			else {
-				spec.adapter = props.data;
+				adapter = props.data;
 			}
 		};
 
-		// Setup dynamic filter //
+		// Setup Search Input //
 		if (props.filter)
 			spec.filter = props.filter;
 
-		watch(() => props.filter, (n, o) => {
-			if (n)
-				spec.filter = n;
-			else
-				spec.filter = null;
+		if (isRef(props.search) || isReactive(props.search))
+			watch(() => props.search, (n,o) => {
+				const x = parseInt(props.settings.searchMinChar) || 3;
 
-			refresh();
-		}, { deep: true });
+				if (timer)
+					clearTimeout(timer);
 
-		// Setup Search Input //
-		watch(() => props.search, (n,o) => {
-			if (spec.timer)
-				clearTimeout(spec.timer);
+				if ((o && o.length > x && (n == undefined || n == null || n.length <= x)) || (n && n.length > x)) {
+					timer = setTimeout(() => { if (n && n.length > x) spec.search = props.search; else spec.search = null; refresh(); }, 444);
+				}
+			});
 
-			if ((o && o.length > (props.data.searchMinChar || 3) && (n == undefined || n == null || n.length <= (props.data.searchMinChar || 3))) || (n && n.length > (props.data.searchMinChar || 3))) {
-				spec.timer = setTimeout(() => { if (props.search && props.search.length > (props.data.searchMinChar || 3)) spec.search = props.search; else spec.search = null; refresh(); }, 444);
-			}
-		});
+		// Setup dynamic filter //
+		if (props.filter)
+			spec.filter = props.filter;
+
+		if (isRef(props.filter) || isReactive(props.filter))
+			watch(() => props.filter, () => {
+				if (props.filter)
+					spec.filter = props.filter;
+				else
+					spec.filter = null;
+
+				refresh();
+			}, { deep: true });
 
 		// Setup commands //
-		watch(() => props.command, (n,o) => {
-			if (n && n.length > 0) {
-				const c = props.command[n.length-1];
-
-				if (c && c.name) {
-					if (c.name.toLowerCase() == 'refresh') refresh()
-					else if (c.name.toLowerCase() == 'first') first()
-					else if (c.name.toLowerCase() == 'prior') prior()
-					else if (c.name.toLowerCase() == 'next') next()
-					else if (c.name.toLowerCase() == 'last') last()
-					else console.log('Unknown command');
-				}
+		if (isRef(props.command) || isReactive(props.command))
+			watch(() => props.command, (n,o) => {
+				if (n && n.length > 0) {
+					const c = props.command[n.length-1];
+
+					if (c && c.name) {
+						if (c.name.toLowerCase() == 'refresh') refresh()
+						else if (c.name.toLowerCase() == 'first') first()
+						else if (c.name.toLowerCase() == 'prior') prior()
+						else if (c.name.toLowerCase() == 'next') next()
+						else if (c.name.toLowerCase() == 'last') last()
+						else console.log('Unknown command');
+					}
 
-				props.command.length = 0;
-			}
-		}, { deep: true });
+					props.command.length = 0;
+				}
+			}, { deep: true });
+		/*****************************************************************
 
+		*****************************************************************/
 		function prepareGroup(g, r) {
-			let s = [];
+			grps = [];
+			rowg = [];
 
 			for (let i = 0; i < r.length; i++) {
 				let v = null;
@@ -149,15 +159,14 @@ const tablevu = {
 						c = o[g.content];
 				};
 
-				const n = s.findIndex(f => f.group == v);
+				let n = grps.findIndex(f => f.group == v);
 
-				if (n > -1)
-					s[n].rows.push(o);
-				else
-					s.push({ group: v, content: c, expand: spec.group.expandAll, rows: [o] });
-			};
+				if (n == -1) {
+					n = grps.push({ group: v, content: c, expand: spec.group.expandAll }) - 1;
+				};
 
-			return s;
+				rowg.push(n);
+			};
 		}
 		/*****************************************************************
 
@@ -190,6 +199,12 @@ const tablevu = {
 			if (spec.sort && spec.sort.length > 0) {
 				let l = spec.sort.findIndex(f => f.index == ind);
 
+				if (l < 0) {
+					let n = spec.columns[ind].name;
+
+					l = spec.sort.findIndex(f => f.name == n);
+				}
+
 				if (l == 0) {
 					spec.sort[l].dir = dir ? dir: (spec.sort[0].dir ? null : 'desc');
 				} else if (l > 0) {
@@ -221,25 +236,22 @@ const tablevu = {
 
 			spec.status = tablevuStatuses.Loading;
 
-			if (spec.adapter) {
-				spec.adapter({ pageSize: spec.page.size, currPage: currentPage, sort: spec.sort, cols: spec.columns, filter: spec.filter, search: spec.search }, dat).then(ada => {
-
+			if (adapter) {
+				adapter({ pageSize: spec.page.size, currPage: currentPage, sort: spec.sort, cols: spec.columns, filter: spec.filter, search: spec.search }, dat).then(ada => {
 					if (spec.onData)
 						rows = spec.onData(ada.rows);
 					else
 						rows = ada.rows;
 					
-					count = ada.count;
-
-					if (spec.group)
-						grps = prepareGroup(spec.group, rows);
+					if (spec.group && (typeof spec.group == 'string' || typeof spec.group == 'bigint' || (typeof spec.group == 'object' && spec.group.value )))
+						prepareGroup(spec.group, rows);
 
 					spec.page.count = (ada.count > 0 && spec.page.size > 0) ? (ada.count / spec.page.size) : 0
 					spec.page.current = currentPage;
 
 					spec.status = tablevuStatuses.Ready;
 					spec.time = Date.now();
-			});
+				});
 			}
 		}
 		/*****************************************************************
@@ -460,27 +472,31 @@ const tablevu = {
 		function renderBody() {
 			const dr = [];
 
-			if (grps && grps.length > 0) {
-				let x = 0;
+			if (rows && rows.length > 0) {
+				if (grps && grps.length > 0) {
+					let r = [];
 
-				for (let g = 0; g < grps.length; g += 1) {
-					const r = grps[g];
+					for (let g = 0; g < grps.length; g++)
+						r.push({ index: g, childs: [] });
 
-					dr.push(renderGroup(r));
+					for (let i = 0; i < rows.length; i++) {
+						const x = rowg[i];
 
-					if (r.expand && r.rows && r.rows.length > 0) {
-						for (let i = 0; i < r.rows.length; i += 1) {
-							dr.push(renderRow(x, r.rows[i]));
-							x++;
-						}
+						r[x].childs.push(renderRow(i, rows[i]));
+					};
+
+					for (let g = 0; g < grps.length; g++) {
+						dr.push(renderGroup(grps[g]));
+
+						if (grps[g].expand)
+							dr.push(r[g].childs);
 					}
-				}
-			} else
-				if (rows && rows.length > 0) {
-					for (let i = 0; i < rows.length; i += 1) {
+				} else {
+					for (let i = 0; i < rows.length; i++) {
 						dr.push(renderRow(i, rows[i]));
 					}
 				}
+			};
 
 			return dr;
 		}