@makeform/table 1.3.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Logs
 
+## v2.0.0
+
+ - tweak DOM based on updated `@makeform/common` DOM structure.
+
+
 ## v1.3.0
 
  - support `no-header` flag

package/README.md

@@ -5,6 +5,14 @@
  - `fields`: array of fields definition for fields to be used in this table.
  - `noHeader`: default false. hide table header if true.
  - `entryName`: default ''. name used when referring to a single entry in this table.
+   - this will be used in places like button text such as "add entry", "add item", etc.
+
+## Fields
+
+`fields` in config is an array of widget definition object. it instructs how we should render and control the dynamics of each field. Each object contains following fields:
+
+ - `type`: `@plotdb/block` style block identifier (bid) to indicate the widget to use. can also be a string such as `@makeform/input`.
+ - `meta`: widget meta object. see `@plotdb/form` for more detail.
 
 
 ## License

package/index.html

@@ -1 +1 @@
-<div><style type="text/css">:scope.has-error table{outline:1px solid var(--danger)}table{table-layout:fixed}table .adder-hidden{visibility:hidden;pointer-events:none;position:relative;overflow:hidden}table .adder-hidden>div{position:absolute}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/table",extend:{name:"@makeform/common"},dependencies:[{name:"ldcover"},{name:"ldcover",type:"css",global:true}],i18n:{en:{"加入":"Add","新增":"Add","刪除":"Delete","無資料":"No data"},zh:{"加入":"加入","新增":"新增","刪除":"刪除","無資料":"無資料"}}},init:function(e){return e.pubsub.fire("subinit",{mod:mod(e)})}};mod=function(e){var t,n,r,i,a,l,u,d;t=e.root,n=e.ctx,r=e.data,i=e.parent,a=e.t,l=e.manager;u=n.ldview,d=n.ldcover;return{init:function(){var c,f,i,o,m=this;c=this.mod.child;c.data=[];c.editor=[];c.adder={fields:[]};c.lastmeta={};c.isnew={};this.on("change",function(e){e==null&&(e=[]);c.data=e;return c.view.render()});this.on("mode",function(){return this.mod.child.view.render()});f=function(){return m.value(c.data).then(function(){c.view.render();return m.mod.info.view.render()})};i=this.mod.child.getkey=function(e,t){return e.alias||e.key||e.title||t};o=function(e){var t;e.proxise=t=proxise(function(e){if(Array.isArray(e)){return t._list=e,t._hash={},t}if(in$(e,t._list||(t._list=[]))){t._hash[e]=true}if(t._list.filter(function(e){return!t._hash[e]}).length){return}t.resolve();return Promise.resolve()});return e.proxise(e.list.map(function(e){return e.key}))};return this.mod.child.view=new u({root:t,init:{"popup-input":function(e){var t;t=e.node;return c.popupInput=new d({root:t,resident:true,inPlace:true})}},action:{click:{"popup-input-toggle":function(){if(m.mod.info.meta.readonly){return}return c.popupInput.get()},add:function(e){var t,n,r;t=e.views;if(m.mod.info.meta.readonly){return}c.data.push(n={list:m.mod.info.config.fields.map(function(e,t){var n;n=i(e,t);return{key:n,value:c.adder.fields[n].itf.value()}}),key:Math.round(Date.now()+Math.random()*65535).toString(36).substring(2)});r=o(n);t[0].render();return r.then(function(){m.mod.info.config.fields.map(function(e,t){return c.adder.fields[i(e,t)].itf.value(null)});f();return t[0].render()})}}},handler:{"popup-input-toggle":function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},add:function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},"entry-name":function(e){var t,n;t=e.node;n=m.mod.info.meta.config.entryName;return t.innerText=!n?"":a(n)},"no-data":function(e){var t;t=e.node;return t.classList.toggle("d-none",c.data&&c.data.length)},"no-data-cell":function(e){var t;t=e.node;return t.setAttribute("colspan",m.mod.info.config.fields.length+1)},headers:function(e){var t;t=e.node;return t.classList.toggle("d-none",!!m.mod.info.config.noHeader)},head:{list:function(){return m.mod.info.config.fields.map(function(e,t){return{cfg:e,key:i(e,t)}})},key:function(e){return e.key},text:function(e){var t;t=e.data;return a(t.cfg.meta.title||"untitled")}},row:{list:function(){return c.data},key:function(e){return e.key},view:{init:{t:function(e){var t;t=e.node;return t.setAttribute("t",t.innerText)}},action:{click:{delete:function(e){var t,n,r;t=e.views,n=e.ctx;if(m.mod.info.meta.readonly){return}c.editor[n.key]=null;r=c.data.map(function(e){return e.key}).indexOf(n.key);if(r===-1){return}c.data.splice(r,1);f();return t[1].render()}}},text:{t:function(e){var t;t=e.node;return t.innerText=a(t.getAttribute("t"))}},handler:{delete:function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},"editor-field":{list:function(e){var t;t=e.ctx;return t.list},key:function(e){return e.key},view:{init:{"@":function(e){var t,a,u,n,r,i,d,o;t=e.node,a=e.ctx,u=e.ctxs;n=m.mod.child.metamap;r=n[a.key]||{},i=r.type,d=r.meta;if(!d){return}if(((r=c.editor)[o=u[0].key]||(r[o]={}))[a.key]){return}return l.from({name:i},{root:t,data:d}).then(function(e){var t,n,r,i,o;t=((t=c.editor)[n=u[0].key]||(t[n]={}))[a.key]={bi:e.instance,itf:e["interface"]},r=t.bi,i=t.itf;((t=c.isnew)[n=u[0].key]||(t[n]={}))[a.key]=true;if(m.mod.child.host){i.adapt({upload:function(e){var t,n;t=e.file,n=e.progress;return m.mod.child.host.upload({file:t,progress:n,alias:d.title})}})}i.value(a.value);i.on("change",function(){var e,t;e=c.data.filter(function(e){return e.key===u[0].key})[0]||{};t=(e.list||(e.list=[])).filter(function(e){return e.key===a.key})[0];if(!t){return}t.value=i.value();return f()});if(o=u[0].proxise){return o(a.key)}})}},handler:{"@":function(e){var t,n,r,i,o,a,u,d,f,l,s;t=e.ctx,n=e.ctxs;r=m.mod.child.metamap;i=m.mod.child.lastmeta;o=m.mod.child.isnew;if(!(a=((u=c.editor)[d=n[0].key]||(u[d]={}))[t.key])){return}if(!a.itf){return}f=(u=import$({},r[t.key].meta||{}),u.readonly=m.mod.info.meta.readonly,u);l=JSON.stringify(f);s=(i[d=n[0].key]||(i[d]={}))[t.key];i[n[0].key][t.key]=l;return Promise.resolve().then(function(){var e;if(l===s){return}(o[e=n[0].key]||(o[e]={}))[t.key]=false;return a.itf.deserialize(f,{init:true})}).then(function(){a.bi.transform("i18n");return a.itf.value(t.value,{fromSource:true})}).then(function(){return a.itf.mode(m.mode())})}}}}}}},"adder-field":{list:function(){return m.mod.info.config.fields.map(function(e,t){return{cfg:e,key:i(e,t)}})},key:function(e){return e.key},view:{init:{"@":function(e){var t,n,r,i,o;t=e.ctx,n=e.node;r=t.cfg,i=r.type,o=r.meta;t.cfg._meta=o=(r=import$({},o)||{},r.isRequired=false,r);return l.get({name:i||"input"}).then(function(e){return e.create()}).then(function(e){return e.attach({root:n,data:o}).then(function(){return c.adder.fields[t.key]={bi:e,itf:e["interface"]()}})})}},handler:{"@":function(e){var r,t,n,i;r=e.ctx;t=c.adder.fields[r.key]||{},n=t.bi,i=t.itf;if(!i){return}if(m.mod.child.host){i.adapt({upload:function(e){var t,n;t=e.file,n=e.progress;return m.mod.child.host.upload({file:t,progress:n,alias:r.cfg.meta.title})}})}return i.deserialize((t=import$({},r.cfg._meta),t.readonly=m.mod.info.meta.readonly,t)).then(function(){n.transform("i18n");return i.render()})}}}}}})},render:function(){var n=this;this.mod.child.metamap=Object.fromEntries(this.mod.info.config.fields.map(function(e,t){return[n.mod.child.getkey(e,t),e]}));return this.mod.child.view.render()},adapt:function(e){this.mod.child.host=e;return this.render()},isEmpty:function(e){return!Array.isArray(e)||!e.length},validate:function(n){var o,a=this;n==null&&(n={});o=[];if(this.mod.info.meta.isRequired&&this.isEmpty()){this._errors=["required"];this.status(n.init?1:2);this.render();return Promise.resolve(this._errors)}this.mod.child.data.map(function(i){return i.list.map(function(e){var t,n,r;if(t=((n=a.mod.child.editor)[r=i.key]||(n[r]={}))[e.key]){return o.push({itf:t.itf,isnew:((n=a.mod.child.isnew)[r=i.key]||(n[r]={}))[e.key]})}})});return Promise.all(o.map(function(e){return e.itf.validate((n.init=e.isnew||n.init,n))})).then(function(){var e,t;e=(t=Math.max.apply(Math,o.map(function(e){return e.itf.status()})))>1?t:1;if(!n.init&&e===1){e=a.mod.info.isRequired?2:0}a.status(e);return a._errors=e===2?["error"]:[]})}}};function in$(e,t){var n=-1,r=t.length>>>0;while(++n<r)if(e===t[n])return true;return false}function import$(e,t){var n={}.hasOwnProperty;for(var r in t)if(n.call(t,r))e[r]=t[r];return e}</script><div class="mb-4" plug="widget"><div ld="display" data-display="block"><label class="d-flex align-items-end flex-wrap"><div><span ld="label"></span><span class="text-danger ml-2" ld="is-required">*</span></div><div class="flex-grow-1"></div><div class="m-edit"><div class="mf-note text-sm" ld="limitation"></div></div></label></div><div class="text-sm text-muted" ld="display" data-display="block"><div ld="desc" style="margin:-.6em 0 .7em"></div></div><table class="table mb-0"><tr ld="headers"><th ld-each="head"></th><th class="m-edit" style="width:6em">&nbsp;</th></tr><tr ld="no-data"><td class="text-muted" t ld="no-data-cell">無資料</td></tr><tr ld-each="row"><td ld-each="editor-field"></td><td class="m-edit" style="width:6em"><div class="btn btn-block btn-outline-secondary text-nowrap" ld="t delete">刪除</div></td></tr><tr class="m-edit"><td class="adder-hidden" ld-each="adder-field"></td><td style="width:6em"><div class="btn btn-block btn-outline-secondary text-nowrap" ld="add"><span t="新增"></span><span ld="entry-name"></span></div></td></tr></table><div class="m-edit"><div class="text-danger mt-2" ld-each="error"></div></div><div class="m-edit" ld="display" data-display="block"><div class="mf-note text-sm mt-2 note" ld-each="note"></div></div></div></div>
+<div><style type="text/css">:scope.has-error table{outline:1px solid var(--danger)}table{table-layout:fixed}table .adder-hidden{visibility:hidden;pointer-events:none;position:relative;overflow:hidden}table .adder-hidden>div{position:absolute}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/table",extend:{name:"@makeform/common"},dependencies:[{name:"ldcover"},{name:"ldcover",type:"css",global:true}],i18n:{en:{"加入":"Add","新增":"Add","刪除":"Delete","無資料":"No data"},zh:{"加入":"加入","新增":"新增","刪除":"刪除","無資料":"無資料"}}},init:function(e){return e.pubsub.fire("subinit",{mod:mod(e)})}};mod=function(e){var t,n,r,i,a,l,u,d;t=e.root,n=e.ctx,r=e.data,i=e.parent,a=e.t,l=e.manager;u=n.ldview,d=n.ldcover;return{init:function(){var c,f,i,o,m=this;c=this.mod.child;c.data=[];c.editor=[];c.adder={fields:[]};c.lastmeta={};c.isnew={};this.on("change",function(e){e==null&&(e=[]);c.data=e;return c.view.render()});this.on("mode",function(){return this.mod.child.view.render()});f=function(){return m.value(c.data).then(function(){c.view.render();return m.mod.info.view.render()})};i=this.mod.child.getkey=function(e,t){return e.alias||e.key||e.title||t};o=function(e){var t;e.proxise=t=proxise(function(e){if(Array.isArray(e)){return t._list=e,t._hash={},t}if(in$(e,t._list||(t._list=[]))){t._hash[e]=true}if(t._list.filter(function(e){return!t._hash[e]}).length){return}t.resolve();return Promise.resolve()});return e.proxise(e.list.map(function(e){return e.key}))};return this.mod.child.view=new u({root:t,init:{"popup-input":function(e){var t;t=e.node;return c.popupInput=new d({root:t,resident:true,inPlace:true})}},action:{click:{"popup-input-toggle":function(){if(m.mod.info.meta.readonly){return}return c.popupInput.get()},add:function(e){var t,n,r;t=e.views;if(m.mod.info.meta.readonly){return}c.data.push(n={list:m.mod.info.config.fields.map(function(e,t){var n;n=i(e,t);return{key:n,value:c.adder.fields[n].itf.value()}}),key:Math.round(Date.now()+Math.random()*65535).toString(36).substring(2)});r=o(n);t[0].render();return r.then(function(){m.mod.info.config.fields.map(function(e,t){return c.adder.fields[i(e,t)].itf.value(null)});f();return t[0].render()})}}},handler:{"popup-input-toggle":function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},add:function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},"entry-name":function(e){var t,n;t=e.node;n=m.mod.info.meta.config.entryName;return t.innerText=!n?"":a(n)},"no-data":function(e){var t;t=e.node;return t.classList.toggle("d-none",c.data&&c.data.length)},"no-data-cell":function(e){var t;t=e.node;return t.setAttribute("colspan",m.mod.info.config.fields.length+1)},headers:function(e){var t;t=e.node;return t.classList.toggle("d-none",!!m.mod.info.config.noHeader)},head:{list:function(){return m.mod.info.config.fields.map(function(e,t){return{cfg:e,key:i(e,t)}})},key:function(e){return e.key},text:function(e){var t;t=e.data;return a(t.cfg.meta.title||"untitled")}},row:{list:function(){return c.data},key:function(e){return e.key},view:{init:{t:function(e){var t;t=e.node;return t.setAttribute("t",t.innerText)}},action:{click:{delete:function(e){var t,n,r;t=e.views,n=e.ctx;if(m.mod.info.meta.readonly){return}c.editor[n.key]=null;r=c.data.map(function(e){return e.key}).indexOf(n.key);if(r===-1){return}c.data.splice(r,1);f();return t[1].render()}}},text:{t:function(e){var t;t=e.node;return t.innerText=a(t.getAttribute("t"))}},handler:{delete:function(e){var t;t=e.node;return t.classList.toggle("disabled",!!m.mod.info.meta.readonly)},"editor-field":{list:function(e){var t;t=e.ctx;return t.list},key:function(e){return e.key},view:{init:{"@":function(e){var t,a,u,n,r,i,d,o;t=e.node,a=e.ctx,u=e.ctxs;n=m.mod.child.metamap;r=n[a.key]||{},i=r.type,d=r.meta;if(!d){return}if(((r=c.editor)[o=u[0].key]||(r[o]={}))[a.key]){return}return l.from({name:i},{root:t,data:d}).then(function(e){var t,n,r,i,o;t=((t=c.editor)[n=u[0].key]||(t[n]={}))[a.key]={bi:e.instance,itf:e["interface"]},r=t.bi,i=t.itf;((t=c.isnew)[n=u[0].key]||(t[n]={}))[a.key]=true;if(m.mod.child.host){i.adapt({upload:function(e){var t,n;t=e.file,n=e.progress;return m.mod.child.host.upload({file:t,progress:n,alias:d.title})}})}i.value(a.value);i.on("change",function(){var e,t;e=c.data.filter(function(e){return e.key===u[0].key})[0]||{};t=(e.list||(e.list=[])).filter(function(e){return e.key===a.key})[0];if(!t){return}t.value=i.value();return f()});if(o=u[0].proxise){return o(a.key)}})}},handler:{"@":function(e){var t,n,r,i,o,a,u,d,f,l,s;t=e.ctx,n=e.ctxs;r=m.mod.child.metamap;i=m.mod.child.lastmeta;o=m.mod.child.isnew;if(!(a=((u=c.editor)[d=n[0].key]||(u[d]={}))[t.key])){return}if(!a.itf){return}f=(u=import$({},r[t.key].meta||{}),u.readonly=m.mod.info.meta.readonly,u);l=JSON.stringify(f);s=(i[d=n[0].key]||(i[d]={}))[t.key];i[n[0].key][t.key]=l;return Promise.resolve().then(function(){var e;if(l===s){return}(o[e=n[0].key]||(o[e]={}))[t.key]=false;return a.itf.deserialize(f,{init:true})}).then(function(){a.bi.transform("i18n");return a.itf.value(t.value,{fromSource:true})}).then(function(){return a.itf.mode(m.mode())})}}}}}}},"adder-field":{list:function(){return m.mod.info.config.fields.map(function(e,t){return{cfg:e,key:i(e,t)}})},key:function(e){return e.key},view:{init:{"@":function(e){var t,n,r,i,o;t=e.ctx,n=e.node;r=t.cfg,i=r.type,o=r.meta;t.cfg._meta=o=(r=import$({},o)||{},r.isRequired=false,r);return l.get({name:i||"input"}).then(function(e){return e.create()}).then(function(e){return e.attach({root:n,data:o}).then(function(){return c.adder.fields[t.key]={bi:e,itf:e["interface"]()}})})}},handler:{"@":function(e){var r,t,n,i;r=e.ctx;t=c.adder.fields[r.key]||{},n=t.bi,i=t.itf;if(!i){return}if(m.mod.child.host){i.adapt({upload:function(e){var t,n;t=e.file,n=e.progress;return m.mod.child.host.upload({file:t,progress:n,alias:r.cfg.meta.title})}})}return i.deserialize((t=import$({},r.cfg._meta),t.readonly=m.mod.info.meta.readonly,t)).then(function(){n.transform("i18n");return i.render()})}}}}}})},render:function(){var n=this;this.mod.child.metamap=Object.fromEntries(this.mod.info.config.fields.map(function(e,t){return[n.mod.child.getkey(e,t),e]}));return this.mod.child.view.render()},adapt:function(e){this.mod.child.host=e;return this.render()},isEmpty:function(e){return!Array.isArray(e)||!e.length},validate:function(n){var o,a=this;n==null&&(n={});o=[];if(this.mod.info.meta.isRequired&&this.isEmpty()){this._errors=["required"];this.status(n.init?1:2);this.render();return Promise.resolve(this._errors)}this.mod.child.data.map(function(i){return i.list.map(function(e){var t,n,r;if(t=((n=a.mod.child.editor)[r=i.key]||(n[r]={}))[e.key]){return o.push({itf:t.itf,isnew:((n=a.mod.child.isnew)[r=i.key]||(n[r]={}))[e.key]})}})});return Promise.all(o.map(function(e){return e.itf.validate((n.init=e.isnew||n.init,n))})).then(function(){var e,t;e=(t=Math.max.apply(Math,o.map(function(e){return e.itf.status()})))>1?t:1;if(!n.init&&e===1){e=a.mod.info.isRequired?2:0}a.status(e);return a._errors=e===2?["error"]:[]})}}};function in$(e,t){var n=-1,r=t.length>>>0;while(++n<r)if(e===t[n])return true;return false}function import$(e,t){var n={}.hasOwnProperty;for(var r in t)if(n.call(t,r))e[r]=t[r];return e}</script><div plug="body"><table class="table mb-0"><tr ld="headers"><th ld-each="head"></th><th class="m-edit" style="width:6em">&nbsp;</th></tr><tr ld="no-data"><td class="text-muted" t ld="no-data-cell">無資料</td></tr><tr ld-each="row"><td ld-each="editor-field"></td><td class="m-edit" style="width:6em"><div class="btn btn-block btn-outline-secondary text-nowrap" ld="t delete">刪除</div></td></tr><tr class="m-edit"><td class="adder-hidden" ld-each="adder-field"></td><td style="width:6em"><div class="btn btn-block btn-outline-secondary text-nowrap" ld="add"><span t="新增"></span><span ld="entry-name"></span></div></td></tr></table><div class="m-edit"><div class="text-danger mt-2" ld-each="error"></div></div></div></div>

package/package.json

@@ -1 +1 @@
-{"name":"@makeform/table","version":"1.3.0","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","devDependencies":{"@plotdb/srcbuild":"^0.0.68","fedep":"^1.3.0"}}
+{"name":"@makeform/table","version":"2.0.0","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","devDependencies":{"@plotdb/srcbuild":"^0.0.68","fedep":"^1.3.0"}}