@makeform/choicegrid 0.0.1 → 0.1.1

package/CHANGELOG.md

@@ -1 +1,16 @@
 # Change Logs
+
+## v0.1.1
+
+ - tweak option text layout
+ - fix bug: removing option causes layout to corrupt
+
+
+## v0.1.0
+
+ - support `@grantdash/composer` host
+
+
+## v0.0.1
+
+ - initial release

package/index.html

@@ -1 +1 @@
-<div><style type="text/css">.grid{display:grid;grid-template-columns:repeat(auto-fill,10em);gap:.25em}.grid .head,.grid .body{display:grid;grid-template-columns:subgrid}.grid .cell{border-radius:.25em;padding:.25em;text-align:center}.grid .head{position:sticky;top:0}.grid .head .cell{border:0}.grid .check{cursor:pointer;color:#d1d2d3;border-radius:.25em;border:1px solid transparent;padding:.25em 1em;width:fit-content;margin:auto}.grid .check:hover{background:rgba(255,255,0,0.25)}.grid .check.active{color:#00c000;border-color:#00c000}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/choicegrid",extend:{name:"@makeform/common"},i18n:{en:{empty:"(empty)",other:"Other","fill-other":"Please fill"},"zh-TW":{empty:"(未填寫)",other:"其它","fill-other":"請填寫"}}},init:function(e){return e.pubsub.fire("subinit",{mod:mod(e)})}};mod=function(e){var t,n,r,i,o,d,h,s,v;t=e.root,n=e.ctx,r=e.data,i=e.pubsub,o=e.parent,d=e.t,h=e.i18n;s=n.ldview;v={};i.on("init.choice",function(e){return v.defcfg=e});return{init:function(){var i,o,r,u,f,l,e,c,n,a=this;h.on("languageChanged",function(){return l()});i=function(e){if(typeof e==="object"){return e.value}else{return e}};o=function(e){var n,t;n=e.entry;t=((v.value||{})[n]||{}).list||[];return t.filter(function(e){return e})};r=function(e){if(e==="__other__"){return d("other")}else if(typeof e==="object"){return d(e.label)}else{return d(e)}};u=function(n){var e;e=v.values.filter(function(e){return i(e)===n})[0];e=e&&e.label?e.label:e;return e?d(e):typeof n==="string"?d(n):n};f=function(e){return in$(e,(v.values||[]).map(function(e){return i(e)}))};l=debounce(100,function(){if(a.mod.child.optionView){return a.mod.child.optionView.render()}});e=function(){var e,n,t,r;if(!v.defcfg){e=a.mod.info.config||{}}else{e=import$({},v.defcfg.config||{});for(n in t=a.mod.info.config){r=t[n];if(e[n]==null){e[n]=r}}}v.meta=a.mod.info.meta;v.cfg=e;v.other=e.other||(e.other={});v.values=e.values||[];v.entries=e.entries||[];if(a.mod.child.view){a.mod.child.view.render()}return l()};e();this.on("meta",function(){return e()});this.on("change",function(e){var n,t;v.value=e||{};for(n in t=v.value){e=t[n];e.list=(e.list||(e.list=[])).filter(r)}a.mod.child.view.render(["content"]);return l();function r(e){return f(e)}});c=function(e){var n,t,r;n=e.entry,t=e.value;((r=v.value||(v.value={}))[n]||(r[n]={})).list=[t];return a.value(v.value)};return this.mod.child.view=n=new s({root:t,text:{content:function(e){var n,t,r,i,o;n=e.node;if(a.isEmpty()){return d("empty")}t=a.value();r=(t||{}).other;t=typeof t==="string"?[t]:t.list||[];i="";if(in$("__other__",t)&&v.other.enabled){i=d("other");if(v.other.editable&&(r||{}).text){i+=":"+r.text}}t=t.filter(function(e){return e!=="__other__"}).map(function(e){return u(e)});if(v.other.enabled&&i){t.push(i)}t=t.join((o=v.cfg.sep)?o:", ");if(!t){t=d("empty")}return t}},handler:{head:function(e){var n;n=e.node;return n.style.gridColumn="span "+(v.values.length+1)},option:{list:function(){return v.values},key:function(e){return i(e)},view:{handler:{label:function(e){var n,t;n=e.node,t=e.ctx;return n.textContent=r(t)}}}},entry:{list:function(){return v.entries},key:function(e){return i(e)},view:{handler:{"@":function(e){var n;n=e.node;return n.style.gridColumn="span "+(v.values.length+1)},label:function(e){var n,t;n=e.node,t=e.ctx;return n.textContent=r(t)},option:{list:function(){return v.values},key:function(e){return i(e)},view:{action:{click:{"@":function(e){var n,t,r;n=e.node,t=e.ctx,r=e.ctxs;return c({entry:i(r[0]),value:i(t)})}}},handler:{check:function(e){var n,t,r;n=e.node,t=e.ctx,r=e.ctxs;return n.classList.toggle("active",in$(i(t),o({entry:i(r[0])})))}}}}}}},input:function(e){var n;n=e.node}}})},render:function(){return this.mod.child.view.render()},validate:function(){var n=this;return Promise.resolve().then(function(){var e;if(!((n.mod.info.config||{}).other||{}).requireOnCheck){return}e=n.value();if(e&&(e.other||{}).enabled&&!(e.other||{}).text){return["other-error"]}})}}};function in$(e,n){var t=-1,r=n.length>>>0;while(++t<r)if(e===n[t])return true;return false}function import$(e,n){var t={}.hasOwnProperty;for(var r in n)if(t.call(n,r))e[r]=n[r];return e}</script><div plug="body"><div class="m-edit has-tips manual" ld="error-root"><div class="grid" ld="grid"><div class="head" ld="head"><div></div><div class="cell" ld-each="option"><div ld="label"></div></div></div><div class="body" ld-each="entry"><div ld="label"></div><div class="cell" ld-each="option"><div class="check" ld="check"><i class="i-check"></i></div></div></div></div><!--.m-edit: .hover-tip.tip-sm: div(ld-each="error")--></div><!--.m-view: div(ld="content")--></div></div>
+<div><style type="text/css">.grid{display:grid;gap:.25em;max-width:100%;min-width:0;width:100%;overflow-x:auto}.grid .head,.grid .body{display:grid;grid-template-columns:subgrid}.grid .head .cell:first-child,.grid .body .cell:first-child{position:sticky;left:0;background:#fff}.grid .cell{border-radius:.25em;padding:.25em;text-align:center;min-width:8em}.grid .head{position:sticky;top:0;z-index:1}.grid .head .cell{border:0;background:#fff;font-weight:600}.grid .option-wrap,.grid .entry-wrap{display:flex;align-items:center;justify-content:center;gap:.25em;width:100%}.grid .entry-header{text-align:left;font-weight:500}.grid .check{cursor:pointer;color:#d1d2d3;border-radius:.25em;border:1px solid transparent;padding:.25em 1em;width:fit-content;margin:auto}.grid .check:hover{background:rgba(255,255,0,0.25)}.grid .check.active{color:#00c000;border-color:#00c000}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/choicegrid",extend:{name:"@makeform/common"},i18n:{en:{"new entry":"New Entry","new option":"New Option",empty:"(empty)",config:{values:{name:"Options",desc:"List of column options for the grid"},entries:{name:"Entries",desc:"List of row entries for the grid"},sep:{name:"Separator",desc:"Separator for displaying multiple selected values"}}},"zh-TW":{"new entry":"新題目","new option":"新選項",empty:"(未填寫)",config:{values:{name:"選項",desc:"網格的欄位選項列表"},entries:{name:"條目",desc:"網格的列條目列表"},sep:{name:"分隔符號",desc:"顯示多個選中值時的分隔符號"}}}}},init:function(e){var n=this;e.pubsub.on("inited",function(e){e==null&&(e={});return import$(n,e)});return e.pubsub.fire("subinit",{mod:mod.call(this,e)})}};mod=function(e){var n,t,r,i,o,g,p,m,y,h,w,u=this;n=e.root,t=e.ctx,r=e.data,i=e.pubsub,o=e.parent,g=e.t,p=e.i18n;m=t.ldview;y={};h=function(){return u.hitf};w=function(){return"_"+Date.now()+Math.random().toString(36).substring(2)};this.client=function(){return{minibar:[],meta:{config:{values:{type:"list",name:"config.values.name",desc:"config.values.desc"},entries:{type:"list",name:"config.entries.name",desc:"config.entries.desc"},sep:{type:"text",name:"config.sep.name",desc:"config.sep.desc"}}},render:function(){return y.view.render()},sample:function(){var e;return{config:{values:[{key:w(),label:h().wrap((e={},e[p.language+""]="Option 1",e))},{key:w(),label:h().wrap((e={},e[p.language+""]="Option 2",e))},{key:w(),label:h().wrap((e={},e[p.language+""]="Option 3",e))}],entries:[{key:w(),label:h().wrap((e={},e[p.language+""]="Entry 1",e))},{key:w(),label:h().wrap((e={},e[p.language+""]="Entry 2",e))},{key:w(),label:h().wrap((e={},e[p.language+""]="Entry 3",e))}]}}}}};return{init:function(){var u,i,o,l,a,c,s,f,d,e,v=this;p.on("languageChanged",function(){return l()});u=function(e){if(typeof e==="string"){return e}else{return(e!=null?e.key:void 8)||(e!=null?e.value:void 8)||h().totext(e!=null?e.label:void 8)}};i=function(e){var n,t;n=e.entry;t=((y.value||{})[n]||{}).list||[];return t.filter(function(e){return e})};o=function(e){return in$(e,(y.values||[]).map(function(e){return u(e)}))};l=debounce(100,function(){if(v.mod.child.optionView){return v.mod.child.optionView.render()}});a=function(){var e;y.meta=h().get()||{};e=y.meta.config||{};y.cfg=e;y.values=e.values||[];y.entries=e.entries||[];if(v.mod.child.view){v.mod.child.view.render()}return l()};a();this.on("meta",function(){return a()});this.on("change",function(e){var n,t;y.value=e||{};for(n in t=y.value){e=t[n];e.list=(e.list||(e.list=[])).filter(r)}v.mod.child.view.render(["content","entry"]);return l();function r(e){return o(e)}});c=function(e){var n,t,r;n=e.entry,t=e.value;((r=y.value||(y.value={}))[n]||(r[n]={})).list=[t];y.value.raw=d();return v.value(y.value)};s=function(n){var e,t,r,i;e=((t=h().get())!=null?(r=t.config)!=null?r.values:void 8:void 8)||[];n=u(n);i=e.filter(function(e){return u(e)===n})[0];return h().totext(typeof i==="string"?i:(i!=null?i.value:void 8)||(i!=null?i.label:void 8))};f=function(n){var e,t,r,i;e=((t=h().get())!=null?(r=t.config)!=null?r.entries:void 8:void 8)||[];n=u(n);i=e.filter(function(e){return u(e)===n})[0];return h().totext(typeof i==="string"?i:(i!=null?i.value:void 8)||(i!=null?i.label:void 8))};d=function(){var e,n;return(((e=h().get())!=null?(n=e.config)!=null?n.entries:void 8:void 8)||[]).map(function(e){var n,t,r,i;n=f(e);t=(((r=y.value)!=null?(i=r[u(e)])!=null?i.list:void 8:void 8)||[]).map(function(e){return s(e)}).join(y.cfg.sep);return n+": "+t}).join("\n")};return this.mod.child.view=e=y.view=new m({root:n,text:{content:function(e){var n,t;n=e.node;if(v.isEmpty()){return g("empty")}t=v.value();t=d();if(!t){t=g("empty")}return t}},action:{click:{"add-option":function(e){var n,t,r,i,o;n=e.node,t=e.views;r={key:w(),label:h().wrap((i={},i[p.language+""]="untitled",i))};((i=(o=h().get()).config||(o.config={})).values||(i.values=[])).push(r);h().set();return t[0].render()},"add-entry":function(e){var n,t,r,i,o;n=e.node,t=e.views;r={key:w(),label:h().wrap((i={},i[p.language+""]="untitled",i))};((i=(o=h().get()).config||(o.config={})).entries||(i.entries=[])).push(r);h().set();return t[0].render()}}},handler:{grid:function(e){var n,t,r,i;n=e.node;t=((r=h().get().config)!=null?r.values:void 8)||[];t=Array.isArray(t)?t:t?[t]:[];i=t.length+1;return n.style.gridTemplateColumns="repeat("+i+", minmax(8em, 1fr))"},head:function(e){var n,t,r;n=e.node;t=((r=h().get().config)!=null?r.values:void 8)||[];t=Array.isArray(t)?t:t?[t]:[];return n.style.gridColumn="span "+(t.length+1)},option:{list:function(){var e,n;e=((n=h().get().config)!=null?n.values:void 8)||[];if(Array.isArray(e)){return e}else if(e){return[e]}else{return[]}},key:function(e){return u(e)},view:{action:{click:{"@":function(e){var n,t,r;n=e.node,t=e.evt;if(!(n.parentNode&&(r=ld$.find(n.parentNode,"[ld=editor]",0)))){return}t.stopPropagation();return t.preventDefault()},"remove-option":function(e){var n,t,r,i,o;n=e.node,t=e.ctx,r=e.views;i=(o=h().get()).config||(o.config={});i.values=(i.values||(i.values=[])).filter(function(e){return u(e)!==u(t)});h().set();return a()},label:h().edit({obj:function(e){var n;n=e.ctx;return n.label||(n.label={})}})}},handler:{label:h().render({obj:function(e){var n;n=e.ctx;return n.label||n}})}}},entry:{list:function(){var e,n;e=((n=h().get().config)!=null?n.entries:void 8)||[];if(Array.isArray(e)){return e}else if(e){return[e]}else{return[]}},key:function(e){return u(e)},view:{action:{click:{"@":function(e){var n,t,r;n=e.node,t=e.evt;if(!(n.parentNode&&(r=ld$.find(n.parentNode,"[ld=editor]",0)))){return}t.stopPropagation();return t.preventDefault()},"remove-entry":function(e){var n,t,r,i,o;n=e.node,t=e.ctx,r=e.views;i=(o=h().get()).config||(o.config={});i.entries=(i.entries||(i.entries=[])).filter(function(e){return u(e)!==u(t)});h().set();a();return r[0].render()},label:h().edit({obj:function(e){var n;n=e.ctx;return n.label||(n.label={})}})}},handler:{"@":function(e){var n,t,r;n=e.node;t=((r=h().get().config)!=null?r.values:void 8)||[];t=Array.isArray(t)?t:t?[t]:[];return n.style.gridColumn="span "+(t.length+1)},label:h().render({obj:function(e){var n;n=e.ctx;return n.label||n}}),option:{list:function(){return y.values},key:function(e){return u(e)},view:{action:{click:{"@":function(e){var n,t,r;n=e.node,t=e.ctx,r=e.ctxs;return c({entry:u(r[0]),value:u(t)})}}},handler:{check:function(e){var n,t,r;n=e.node,t=e.ctx,r=e.ctxs;return n.classList.toggle("active",in$(u(t),i({entry:u(r[0])})))}}}}}}}}})},render:function(){return this.mod.child.view.render()}}};function import$(e,n){var t={}.hasOwnProperty;for(var r in n)if(t.call(n,r))e[r]=n[r];return e}function in$(e,n){var t=-1,r=n.length>>>0;while(++t<r)if(e===n[t])return true;return false}</script><div plug="body"><div class="m-edit has-tips manual" ld="error-root"><div class="grid" ld="grid"><div class="head" ld="head"><div class="cell"></div><div class="cell" ld-each="option"><div class="option-wrap"><div class="clickable" ld="label"></div><i class="i-close text-sm ml-1 cps-hover cps-remove" ld="remove-option"></i></div></div></div><div class="body" ld-each="entry"><div class="cell entry-header"><div class="entry-wrap"><div class="flex-grow-1 clickable" ld="label"></div><i class="i-close text-sm ml-1 cps-hover cps-remove" ld="remove-entry"></i></div></div><div class="cell" ld-each="option"><div class="check" ld="check"><i class="i-check"></i></div></div></div></div><div class="cps-ctrl"><div class="mt-2 d-flex g-2"><div class="clickable rounded-sm bg-dark cps-add px-2 py-1" ld="add-entry" style="font-size:0.875rem" t="new entry"></div><div class="clickable rounded-sm bg-dark cps-add px-2 py-1" ld="add-option" style="font-size:0.875rem" t="new option"></div></div></div></div><div class="m-view"><div ld="content" style="white-space:pre-wrap"></div></div></div></div>

package/package.json

@@ -1 +1 @@
-{"name":"@makeform/choicegrid","version":"0.0.1","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.68"},"devDependencies":{"fedep":"^1.4.0"}}
+{"name":"@makeform/choicegrid","version":"0.1.1","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69"},"devDependencies":{"fedep":"^1.6.0"}}