@makeform/choicegrid 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Logs
 
+## v0.1.2
+
+ - use cps-hover-host and cps-hover-reveal to replace cps-hover class
+
+
+## v0.1.1
+
+ - tweak option text layout
+ - fix bug: removing option causes layout to corrupt
+
+
 ## v0.1.0
 
  - support `@grantdash/composer` host

package/index.html

@@ -1 +1 @@
-<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:space-between;gap:.5em;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 t,n,r,i,o,v,g,p,m,y,h,u=this;t=e.root,n=e.ctx,r=e.data,i=e.pubsub,o=e.parent,v=e.t,g=e.i18n;p=n.ldview;m={};y=function(){return u.hitf};h=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 m.view.render()},sample:function(){var e;return{config:{values:[{key:h(),label:y().wrap((e={},e[g.language+""]="Option 1",e))},{key:h(),label:y().wrap((e={},e[g.language+""]="Option 2",e))},{key:h(),label:y().wrap((e={},e[g.language+""]="Option 3",e))}],entries:[{key:h(),label:y().wrap((e={},e[g.language+""]="Entry 1",e))},{key:h(),label:y().wrap((e={},e[g.language+""]="Entry 2",e))},{key:h(),label:y().wrap((e={},e[g.language+""]="Entry 3",e))}]}}}}};return{init:function(){var u,i,o,l,e,a,c,s,f,n,d=this;g.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)||y().totext(e!=null?e.label:void 8)}};i=function(e){var n,t;n=e.entry;t=((m.value||{})[n]||{}).list||[];return t.filter(function(e){return e})};o=function(e){return in$(e,(m.values||[]).map(function(e){return u(e)}))};l=debounce(100,function(){if(d.mod.child.optionView){return d.mod.child.optionView.render()}});e=function(){var e;e=d.mod.info.config||{};m.meta=d.mod.info.meta;m.cfg=e;m.values=e.values||[];m.entries=e.entries||[];if(d.mod.child.view){d.mod.child.view.render()}return l()};e();this.on("meta",function(){return e()});this.on("change",function(e){var n,t;m.value=e||{};for(n in t=m.value){e=t[n];e.list=(e.list||(e.list=[])).filter(r)}d.mod.child.view.render(["content","entry"]);return l();function r(e){return o(e)}});a=function(e){var n,t,r;n=e.entry,t=e.value;((r=m.value||(m.value={}))[n]||(r[n]={})).list=[t];m.value.raw=f();return d.value(m.value)};c=function(n){var e,t,r,i;e=((t=y().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 y().totext(typeof i==="string"?i:(i!=null?i.value:void 8)||(i!=null?i.label:void 8))};s=function(n){var e,t,r,i;e=((t=y().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 y().totext(typeof i==="string"?i:(i!=null?i.value:void 8)||(i!=null?i.label:void 8))};f=function(){var e,n;return(((e=y().get())!=null?(n=e.config)!=null?n.entries:void 8:void 8)||[]).map(function(e){var n,t,r,i;n=s(e);t=(((r=m.value)!=null?(i=r[u(e)])!=null?i.list:void 8:void 8)||[]).map(function(e){return c(e)}).join(m.cfg.sep);return n+": "+t}).join("\n")};return this.mod.child.view=n=m.view=new p({root:t,text:{content:function(e){var n,t;n=e.node;if(d.isEmpty()){return v("empty")}t=d.value();t=f();if(!t){t=v("empty")}return t}},action:{click:{"add-option":function(e){var n,t,r,i,o;n=e.node,t=e.views;r={key:h(),label:y().wrap((i={},i[g.language+""]="untitled",i))};((i=(o=y().get()).config||(o.config={})).values||(i.values=[])).push(r);y().set();return t[0].render()},"add-entry":function(e){var n,t,r,i,o;n=e.node,t=e.views;r={key:h(),label:y().wrap((i={},i[g.language+""]="untitled",i))};((i=(o=y().get()).config||(o.config={})).entries||(i.entries=[])).push(r);y().set();return t[0].render()}}},handler:{grid:function(e){var n,t,r,i;n=e.node;t=((r=y().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=y().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=y().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=y().get()).config||(o.config={});i.values=(i.values||(i.values=[])).filter(function(e){return u(e)!==u(t)});y().set();return r[0].render()},label:y().edit({obj:function(e){var n;n=e.ctx;return n.label||(n.label={})}})}},handler:{label:y().render({obj:function(e){var n;n=e.ctx;return n.label||n}})}}},entry:{list:function(){var e,n;e=((n=y().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=y().get()).config||(o.config={});i.entries=(i.entries||(i.entries=[])).filter(function(e){return u(e)!==u(t)});y().set();return r[0].render()},label:y().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=y().get().config)!=null?r.values:void 8)||[];t=Array.isArray(t)?t:t?[t]:[];return n.style.gridColumn="span "+(t.length+1)},label:y().render({obj:function(e){var n;n=e.ctx;return n.label||n}}),option:{list:function(){return m.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 a({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="flex-grow-1 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>
+<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 cps-hover-host" ld-each="option"><div class="option-wrap"><div class="clickable" ld="label"></div><i class="i-close text-sm ml-1 cps-hover-reveal cps-remove" ld="remove-option"></i></div></div></div><div class="body cps-hover-host" 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-reveal 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.1.0","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69"},"devDependencies":{"fedep":"^1.6.0"}}
+{"name":"@makeform/choicegrid","version":"0.1.2","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69"},"devDependencies":{"fedep":"^1.6.0"}}