tablevu 0.1.4 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Ender Boz
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Ender Boz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,29 +1,119 @@
-# tablevu (alpha version)
-Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)
-No Dependencies
-
-## Install
-```shell
-npm install tablevu
-```
-
-## Documentation
-
-Preparing ..
-
-
-## Dev. Dependencies
-
-- [Vuejs](https://github.com/vuejs/vue) 3.0+
-
-
-## Browser Support
-
-Modern browsers.
-
-
-## Authors
-endb
-
-## License
-tablevu is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
+# tablevu (alpha version)
+Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)
+
+* No Dependencies
+
+* Working with javascript array or server side (odata or default request)
+
+* Sorting
+
+* Filtering
+
+* Custom column rendering
+
+* ...
+
+
+## Install
+```shell
+npm install tablevu
+```
+
+
+## Usage
+* **data**		: Array or Server side parameters
+
+* **search**		: Reactive filter value
+
+* **rowid**		: Key value for row.
+
+* **class**		: Table class name. (default "table")
+
+* **buttonclass**	: Arrow buttons class name (default "btn")
+
+* **onRowClick**	: Row click event
+
+* **onRowDblClick**	: Row double click event
+
+* **columns**
+  * **name**	  	: Column name
+  
+  * **label**	  	: Column label
+  
+  * **searchable** 	: Column is searchable (default true)
+  
+  * **orderable**	: Column is orderable (default true)
+  
+  * **width**	  	: Column width
+  
+  * **align**	  	: Column align
+  
+  * **type**	  	: Data type (datetime, date, time, numeric). Show local value
+  
+  * **render**  	: Render value
+
+
+## Samples
+
+* odata sample (Coming soon..)
+* search sample (Coming soon..)
+
+
+**odata sample**
+
+```code
+<template>
+  <tablevu :data="grid" rowid="OrderId" />
+</template>
+
+<script>
+import { tablevu, odata } from 'tablevu'
+
+export default {
+  name: 'App',
+  components: {
+    tablevu
+  },
+  setup() {
+    const prm = {
+      url: `https://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json`,
+      header: { 'Content-Type': 'application/json;odata=verbose' },
+      select: ['OrderID', 'OrderDate', 'ShipName', 'ShipAddress'],
+      expand: [
+      ]
+    };
+
+    const grid = {
+      adapter: (grd) => {
+        return odata(prm, grd);
+      },
+      pageSize: 10,
+      columns: [
+        { name: 'OrderID', label: 'id', width: '26rem' },
+        { name: 'OrderDate', label: 'name', width: '26rem' },
+        { name: 'ShipName', label: 'name', width: '26rem' },
+        { name: 'ShipAddress', label: 'name', width: '26rem' },
+      ]
+    }
+
+    return { grid }
+  }
+}
+</script>
+```
+
+## Dev. Dependencies
+
+- [Vuejs](https://github.com/vuejs/vue) 3.0+
+
+
+## Browser Support
+
+Modern browsers.
+
+
+## Authors
+endb
+
+## License
+tablevu is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).

package/dist/array.js

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

package/dist/get.js

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

package/dist/odata.js

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

package/dist/table.js

@@ -1 +1 @@
-import{h,reactive,watch}from"vue";const tablevuStatuses={Error:-1,Ready:0,Loading:1},tablevu={props:{data:{type:[Array,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"},buttonclass:{type:String,default:"btn"}},setup(t){let e=[];const r=reactive({pageSize:t.data.pageSize||20,pageCount:0,currPage:0,sort:t.data.sort||[],status:tablevuStatuses.Ready,timer:null,time:null,cols:[],filter:null,search:null});function a(){c(1)}function n(){r.currPage>1?c(r.currPage-1):c(r.currPage)}function l(){c(r.currPage+1)}function o(){c(r.pageCount)}function s(){c(r.currPage)}function i(t){if(r.sort&&r.sort.length>0){let e=r.sort.findIndex(e=>e.index==t);0==e?r.sort[e].dir=r.sort[0].dir?null:"desc":e>0&&r.sort.splice(e,1),0!=e&&r.sort.unshift({index:t,dir:null}),r.sort.length>2&&r.sort.pop()}else r.sort.push({index:t,dir:null});c(r.currPage)}function c(a){if(t.data&&(r.status=tablevuStatuses.Loading,Array.isArray(t.data)&&(e=t.data,r.pageCount=e.length>0&&r.pageSize>0?e.length/r.pageSize:0,r.status=tablevuStatuses.Ready,r.currPage=a,r.time=Date.now()),t.data.adapter)){const n=t.data.adapter({pageSize:r.pageSize,pageCount:r.pageCount,currPage:a,sort:r.sort,cols:r.cols,filter:r.filter,search:r.search});fetch(n).then(t=>t.json()).then(t=>{let n=0;t&&Object.hasOwnProperty.call(t,"@count")&&(n=BigInt.parse(t["@count"])),t&&t.value&&(e=t.value,r.pageCount=n>0&&r.pageSize>0?n/r.pageSize:0,r.status=tablevuStatuses.Ready,r.currPage=a,r.time=Date.now())}).catch(t=>{console.error(t),r.status=tablevuStatuses.Error,alert(t.message)})}}function u(t,e){let r;const a={style:{}};if(t.align&&(a.style["text-align"]=t.align),t.width&&(a.style["max-width"]=t.width),e)if("datetime"==t.type||"date"==t.type||"time"==t.type){let a=new Date(e);r="date"==t.type?a.toLocaleDateString():"time"==t.type?a.toLocaleTimeString():a.toLocaleString()}else r="numeric"==t.type?Number.parse(e):e;else r="";return h("td",a,r)}function d(t,e){const r={style:{}};t.align&&(r.style["text-align"]=t.align),t.width&&(r.style["max-width"]=t.width);let a=t.render(e);return h("td",r,a)}function g(a,n){const l={},o=[];l.key=a,t.rowid&&(l.rowid=n[t.rowid]);for(let t=0;t<r.cols.length;t+=1){let e;const a=r.cols[t];if(a.render)e=d(a,n),o.push(e);else{if(a.depth){e=n;for(let t=0;t<a.depth.length;t+=1)e&&(e=e[a.depth[t]])}else e=n[a.name];o.push(u(a,e))}}return t.data.onRowDblClick?l.ondblclick=(r=>{const a=e[r.currentTarget.rowIndex-1];t.data.onRowDblClick(r,a)}):t.onRowDblClick&&(l.ondblclick=(r=>{const a=e[r.currentTarget.rowIndex-1];t.onRowDblClick(r,a)})),t.onRowClick&&(l.onClick=(r=>{const a=e[r.currentTarget.rowIndex-1];t.onRowClick(r,a)})),h("tr",l,o)}watch(()=>t.search,(e,a)=>{r.timer&&clearTimeout(r.timer),(a&&a.length>(t.data.searchMinChar||3)&&(null==e||null==e||e.length<=(t.data.searchMinChar||3))||e&&e.length>(t.data.searchMinChar||3))&&(r.timer=setTimeout(()=>{t.search&&t.search.length>(t.data.searchMinChar||3)?r.search=t.search:r.search=null,s()},444))}),watch(()=>t.filter,()=>{t.filter?r.filter=t.filter:r.filter=null,s()},{deep:!0}),watch(()=>t.command,(e,r)=>{if(e&&e.length>0){const r=t.command[e.length-1];r&&r.name&&("refresh"==r.name.toLowerCase()?s():"first"==r.name.toLowerCase()?a():"prior"==r.name.toLowerCase()?n():"next"==r.name.toLowerCase()?l():"last"==r.name.toLowerCase()?o():console.log("Unknown command")),t.command.length=0}},{deep:!0});let p=[];t.data.columns?p=t.data.columns:alert("not ready !");for(let t=0;t<p.length;t+=1){let e=p[t];e.name.indexOf(".")>-1&&(e.depth=e.name.split(".")),r.cols.push(e)}return c(1),{spec:r,rows:e,first:a,prior:n,next:l,last:o,refresh:s,orderby:i,renderHeader:function(){const t=[];for(let e=0;e<r.cols.length;e+=1){const a=[];r.cols[e].label?a.push(h("span",r.cols[e].label)):a.push(h("span",r.cols[e].name)),r.sort&&r.sort.length>0&&r.sort[0].index==e&&("desc"==r.sort[0].dir?a.push(h("span",{style:{float:"right"}},"⯆")):a.push(h("span",{style:{float:"right"}},"⯅")));const n=h("a",{href:"#",onClick(t){i(e),t.preventDefault()},style:{display:"block","font-weight":500,"text-decoration":"none",color:"black"}},a);t.push(h("th",{style:{width:r.cols[e].width?r.cols[e].width:"auto","max-width":r.cols[e].width?r.cols[e].width:"auto"}},[n]))}return[h("tr",{},t)]},renderCell:u,renderCustomCell:d,renderRow:g,renderBody:function(){const t=[];if(e&&e.length>0)for(let r=0;r<e.length;r+=1)t.push(g(r,e[r]));return t},renderFooter:function(){const e=h("button",{class:t.buttonclass,style:"margin-right: .5rem",onClick:a,disabled:1==r.currPage},"⯅"),s=h("button",{class:t.buttonclass,style:"margin-right: .5rem",onClick:o,disabled:r.pageCount>0},"⯆"),i=h("button",{class:t.buttonclass,style:"margin-right: .5rem"},r.currPage),c=h("button",{class:t.buttonclass,style:"margin-right: .5rem",onClick:n,disabled:1==r.currPage},"⯇"),u=h("button",{class:t.buttonclass,style:"margin-right: .5rem",onClick:l},"⯈"),d=h("td",{colspan:r.cols.length,align:"center"},[e,c,i,u,s]);return[h("tr",{},[d])]}}},render(t){const e=h("thead",{},this.renderHeader()),r=h("tbody",{"data-time":this.spec.time},this.renderBody()),a=h("tfoot",{},this.renderFooter());return h("table",{class:t.class},[e,r,a])}};export default tablevu;
+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(t,{attrs:e,slots:n,emit:o,expose:l}){let s=[],r=[],a=0;const i=reactive({adapter:null,group:{value:t.settings&&t.settings.group?t.settings.group.value:t.group?t.group:null,content:t.settings&&t.settings.group?t.settings.group.content:null,expandAll:!0,class:"table-light"},page:{count:0,size:t.settings&&t.settings.page?t.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:t.settings&&t.settings.sort?t.settings.sort:[],columns:t.settings&&t.settings.columns?t.settings.columns:[],onRowClick:t.settings.onRowClick||t.onRowClick,onRowDblClick:t.settings.onRowDblClick||t.onRowDblClick});function c(){f(1)}function u(){i.page.current>1?f(i.page.current-1):f(i.page.current)}function p(){f(i.page.current+1)}function d(){f(i.page.count)}function g(){f(i.page.current)}function m(t,e){if(i.sort&&i.sort.length>0){let n=i.sort.findIndex(e=>e.index==t);0==n?i.sort[n].dir=e||(i.sort[0].dir?null:"desc"):n>0&&i.sort.splice(n,1),0!=n&&i.sort.unshift({index:t,dir:e||null}),i.sort.length>2&&i.sort.pop()}else i.sort.push({index:t,dir:e||null});f(i.page.current)}function f(e){let n=null;t.data&&(Array.isArray(t.data)&&(n=t.data),i.status=tablevuStatuses.Loading,i.adapter&&i.adapter({pageSize:i.page.size,currPage:e,sort:i.sort,cols:i.columns,filter:i.filter,search:i.search},n).then(t=>{r=i.onData?i.onData(t.rows):t.rows,a=t.count,i.group&&(s=function(t,e){let n=[];for(let o=0;o<e.length;o++){let l=null,s=null;const r=e[o];if(t.value)l="function"==typeof t.value?t.value(r):r[t.value];else if("function"==typeof t)l=t(r);else if("bigint"==typeof t||"number"==typeof t){const e=parseInt(t);e&&(l=r[e])}else"string"==typeof t&&(l=r[t]);t.content&&(s="function"==typeof t.content?t.content(r):r[t.content]);const a=n.findIndex(t=>t.group==l);a>-1?n[a].rows.push(r):n.push({group:l,content:s,expand:i.group.expandAll,rows:[r]})}return n}(i.group,r)),i.page.count=t.count>0&&i.page.size>0?t.count/i.page.size:0,i.page.current=e,i.status=tablevuStatuses.Ready,i.time=Date.now()}))}function y(t,e){const n={style:{}};t.colspan&&t.colspan>1&&(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);const o=function(t,e){if(e){let n;if("datetime"==t.type||"date"==t.type||"time"==t.type){let o=new Date(e);n="date"==t.type?o.toLocaleDateString():"time"==t.type?o.toLocaleTimeString():o.toLocaleString()}else n="numeric"==t.type?parseFloat(e):"integer"==t.type?parseInt(e):e;return n}return""}(t,e);return h("td",n,o)}function b(t,e){const n={style:{}};t.colspan&&t.colspan>1&&(n.colspan=t.colspan),t.align&&(n.style["text-align"]=t.align),t.width&&(n.style["max-width"]=t.width);let o=t.render(e);return h("td",n,o)}function w(t){const e=h("button",{title:t.expand,onClick:e=>{console.log(t.expand),t.expand=!t.expand,e.currentTarget.value=t.expand?"▼":"►",i.time=Date.now(),e.preventDefault()},style:{padding:0,margin:"0 6px 0 0",width:"12px",height:"100%",border:"none",outline:0,backgroundColor:"transparent"}},t.expand?"▼":"►"),n=t.content||t.group;return h("tr",{},h("td",{colspan:i.columns.length,class:i.group.class},[e,n]))}function k(e,n){const l={},s=[];l.key=e,l.index=e,t.rowid&&(l.rowid=n[t.rowid]);for(let t=0;t<i.columns.length;t+=1){let e;const o=i.columns[t];if(o.render)e=b(o,n),s.push(e);else{if(o.depth){e=n;for(let t=0;t<o.depth.length;t+=1)e&&(e=e[o.depth[t]])}else e=n[o.name];s.push(y(o,e))}}return l.ondblclick=(t=>{const e=r[t.currentTarget.attributes.index.value];o("onRowDblClick",t,e)}),t.onRowClick&&(l.onClick=(e=>{const n=r[e.currentTarget.attributes.index.value];t.onRowClick(e,n)})),h("tr",l,s)}t.data&&(Array.isArray(t.data)?i.adapter=adaptarr:i.adapter=t.data),t.filter&&(i.filter=t.filter),watch(()=>t.filter,(t,e)=>{i.filter=t||null,g()},{deep:!0}),watch(()=>t.search,(e,n)=>{i.timer&&clearTimeout(i.timer),(n&&n.length>(t.data.searchMinChar||3)&&(null==e||null==e||e.length<=(t.data.searchMinChar||3))||e&&e.length>(t.data.searchMinChar||3))&&(i.timer=setTimeout(()=>{t.search&&t.search.length>(t.data.searchMinChar||3)?i.search=t.search:i.search=null,g()},444))}),watch(()=>t.command,(e,n)=>{if(e&&e.length>0){const n=t.command[e.length-1];n&&n.name&&("refresh"==n.name.toLowerCase()?g():"first"==n.name.toLowerCase()?c():"prior"==n.name.toLowerCase()?u():"next"==n.name.toLowerCase()?p():"last"==n.name.toLowerCase()?d():console.log("Unknown command")),t.command.length=0}},{deep:!0}),0==i.columns.length&&alert("Columns not defined !");for(let t=0;t<i.columns.length;t++)i.columns[t].name&&i.columns[t].name.indexOf(".")>-1&&(i.columns[t].depth=i.columns[t].name.split("."));return f(1),onMounted(()=>{console.log("tablevu.mounted")}),{spec:i,renderHeader:function(){let t=[],e=1;for(let n=0;n<i.columns.length;n+=1){if(e>1){e--;continue}const o=[];i.columns[n].label?o.push(h("span",i.columns[n].label)):o.push(h("span",i.columns[n].name)),i.sort&&i.sort.length>0&&i.sort[0].index==n&&("desc"==i.sort[0].dir?o.push(h("span",{style:{float:"right"}},"▼")):o.push(h("span",{style:{float:"right"}},"▲")));let l={position:"relative"};i.columns[n].width&&(l.width=i.columns[n].width,l.minWidth=i.columns[n].width,l.maxWidth=i.columns[n].width);let s,r,a={display:"block","font-weight":500,textDecoration:"none",color:"black",textAlign:"center"};if(i.columns[n].header&&(i.columns[n].header.colspan&&(e=parseInt(i.columns[n].header.colspan)||1),i.columns[n].header.align&&(a.textAlign=i.columns[n].header.align),i.columns[n].header.backgroundColor&&(l.backgroundColor=i.columns[n].header.backgroundColor),i.columns[n].header.color&&(a.color=i.columns[n].header.color)),i.columns[n].popup){const t=ref(null);let e=[h("a",{href:"#",onClick(t){m(n),t.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Ascending"),h("a",{href:"#",onClick(t){m(n,"desc"),t.preventDefault()},style:{display:"block",textDecoration:"none",color:"black",fontWeight:"initial",padding:".25rem"}},"Order by Descending")];s=h("a",{href:"#",onClick(e){t.value&&t.value.style&&t.value.style.display&&"block"==t.value.style.display?t.value.style.display="none":t.value.style.display="block",e.preventDefault()},style:a},o),r=h("div",{ref:t,style:{position:"absolute",display:"none",width:i.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"}},e)}else s=h("a",{href:"#",onClick(t){m(n),t.preventDefault()},style:a},o);i.columns[n].filter,t.push(h("th",{colspan:e>1?e:null,style:l},[s,r]))}return[h("tr",{},t)]},renderBody:function(){const t=[];if(s&&s.length>0){let e=0;for(let n=0;n<s.length;n+=1){const o=s[n];if(t.push(w(o)),o.expand&&o.rows&&o.rows.length>0)for(let n=0;n<o.rows.length;n+=1)t.push(k(e,o.rows[n])),e++}}else if(r&&r.length>0)for(let e=0;e<r.length;e+=1)t.push(k(e,r[e]));return t},renderFooter:function(){const t=h("button",{class:i.footer.button.class,style:"margin-right: .5rem",onClick:c,disabled:1==i.page.current},"◀◀"),e=h("button",{class:i.footer.button.class,style:"margin-right: .5rem",onClick:d,disabled:i.page.count>0},"▶▶"),n=h("button",{class:i.footer.button.class,style:"margin-right: .5rem"},i.page.current),o=h("button",{class:i.footer.button.class,style:"margin-right: .5rem",onClick:u,disabled:1==i.page.current},"◀"),l=h("button",{class:i.footer.button.class,style:"margin-right: .5rem",onClick:p,disabled:i.page.count>0&&i.page.current==i.page.count},"▶"),s=h("td",{colspan:i.columns.length,align:"center"},[t,o,n,l,e]);return[h("tr",{},[s])]},renderCaption:function(){return null}}},render(t){console.log("tablevu.render",this.spec.status);let e={class:"tablevu"};t.class&&(e.class="tablevu "+t.class),t.style&&(e.style=t.style);let n=[];return n.push(h("thead",{},this.renderHeader())),this.spec.status==tablevuStatuses.Ready&&n.push(h("tbody",{"data-time":this.spec.time},this.renderBody())),this.spec.caption&&n.push(h("caption",{},this.renderCaption())),this.spec.page.size>0&&n.push(h("tfoot",{},this.renderFooter())),h("table",e,n)}};export default tablevu;

package/dist/webapi.js

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

package/index.js

@@ -1,5 +1,5 @@
-import tablevu from './dist/table'
-import odata from './dist/odata'
-import webapi from './dist/webapi'
-
-export { tablevu, odata, webapi };
+import tablevu from './dist/table'
+import odata from './dist/odata'
+import webapi from './dist/webapi'
+
+export { tablevu, odata, webapi };

package/package.json

@@ -1,35 +1,35 @@
-{
-	"name": "tablevu",
-	"version": "0.1.4",
-	"description": "vue 3 data table",
-	"main": "index.js",
-	"directories": {
-		"dist": "dist"
-	},
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"dependencies": {
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/endb/tablevu.git"
-	},
-	"keywords": [
-		"table",
-		"datatable",
-		"vue3 table",
-		"vue3 datatable",
-		"vue 3 table",
-		"vue 3 datatable"
-	],
-	"author": "endb <ender.boz@gmail.com>",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/endb/tablevu/issues"
-	},
-	"homepage": "https://github.com/endb/tablevu#readme",
-	"devDependencies": {
-		"vue": ">=3.0.0"
-	}
-}
+{
+	"name": "tablevu",
+	"version": "0.2.0",
+	"description": "vue 3 data table",
+	"main": "index.js",
+	"directories": {
+		"dist": "dist"
+	},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"dependencies": {
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/endb/tablevu.git"
+	},
+	"keywords": [
+		"table",
+		"datatable",
+		"vue3 table",
+		"vue3 datatable",
+		"vue 3 table",
+		"vue 3 datatable"
+	],
+	"author": "endb <ender.boz@gmail.com>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/endb/tablevu/issues"
+	},
+	"homepage": "https://github.com/endb/tablevu#readme",
+	"devDependencies": {
+		"vue": ">=3.0.0"
+	}
+}

package/src/array.js

@@ -0,0 +1,42 @@
+export default function adapter(params, data) {
+	let rsl = data;
+
+	// Filter & Search //
+	if (params.filter || params.search) {
+		const cls = params.cols.map((m,i) => ({ index: i, searchable: q.searchable == undefined || q.searchable == true})).filter(q => q.searchable == true).map(m => m.index);
+
+		if (cls.length > 0 && (params.filter || params.search)) {
+			if (params.filter) {
+
+			}
+
+			if (params.search) {
+				rsl = rsl.filter(f => {
+					return Object.values(f).filter((l,x) => cls.indexOf(x) > -1).some(s => s.indexOf(params.search) > -1) 
+				  })
+			}
+		}
+	}
+
+	// Sort //
+	if (params.sort && params.sort.length > 0) {
+		for (let i = params.sort.length - 1; i >= 0; i--) {
+			let s = params.sort[i];
+			if (s.dir == 'desc')
+				rsl.sort((a,b) => (a[s.name] < b[s.name]) ? 1 : ((b[s.name] < a[s.name]) ? -1 : 0));
+			else
+				rsl.sort((a,b) => (a[s.name] > b[s.name]) ? 1 : ((b[s.name] > a[s.name]) ? -1 : 0));
+		}
+	}
+		
+	// Paging //
+	if (params.pageSize && rsl.length > params.pageSize) {
+		rsl = rsl.filter((v,i,s) => i >= params.pageSize * (params.currPage - 1) && i < params.pageSize * params.currPage);
+	}
+
+	// Select - None //
+
+	// Expand - None //
+
+	return { rows: rsl, count: data.length };
+}

package/src/get.js

@@ -0,0 +1,29 @@
+export default function get(req) {
+	return new Promise((resolve, reject) => {
+		fetch(req).then(res => res.json()).then(res => {
+			let r;
+			let c = 0;
+
+			if (res) {
+				if (res.hasOwnProperty('value')) {
+					r = res.value;
+
+					if (res.hasOwnProperty('@count'))
+						c = parseInt(res['@count']);
+					else if (res.hasOwnProperty('count'))
+						c = parseInt(res['count']);
+					else
+						c = 0;
+				} else {
+					r = res;
+					c = 0;
+				}
+				resolve({ rows: r, count: c })
+			} else
+				resolve({ rows: null, count: null })
+		}).catch(err => {
+			console.error(err);
+			reject(err);
+		})
+	})
+}