@makeform/choice 2.1.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Logs
 
+## v4.0.0
+
+ - support @grantdash/composer host
+ - ensure error information is shown correctly in corresponding field, either select or input box.
+ - show error about fill other only if other is chosen
+
+
+## v3.0.0
+
+ - change default value of `other.editable` to `true`.
+   in similar widgets, enable `other` always brings up a edit field. Use default `true` value maintains the consistency and still keep the flexibility to turn it off.
+
+
 ## v2.1.0
 
  - support `chosen` selector for list of selected items

package/README.md

@@ -9,7 +9,7 @@ Dropdown style widget for users to make one single choice between multiple optio
  - `multiple`: default false. when set to true, allow multiple choices
  - `other`: an object with following fields, for configuration of custom data:
    - `enabled`: show a dedicated `other` option.
-   - `editable`: show a text field when `other` is chosen
+   - `editable`: show a text field when `other` is chosen. default true if omitted
    - `requireOnCheck`: default false. when set to true, text field for `other` must not empty if `other` is chosen.
  - `sep`: default `,`. text separator for joining values from multiple choice in view mode.
  - `layout`: either `row` or `column`. default `column`. decide how to layout text field for `other` and select widget.

package/index.html

@@ -1 +1 @@
-<div><style type="text/css">[ld="input-group"]{display:flex;gap:.5em;flex-direction:column}[ld="input-group"].layout-row{flex-direction:row}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/choice",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 s,t,n,r,i,v,h,m,p;s=e.root,t=e.ctx,n=e.data,r=e.pubsub,i=e.parent,v=e.t,h=e.i18n;m=t.ldview;p={};r.on("init.choice",function(e){return p.defcfg=e});return{init:function(){var i,l,n,o,u,r,a,e,f,c,t,d=this;h.on("languageChanged",function(){return a()});i=function(e){if(typeof e==="object"){return e.value}else{return e}};l=function(){var e;e=p.value;e=e&&e.list?e.list:typeof e==="string"?[e]:[];return e.filter(function(e){return e})};n=function(){if(p.other.enabled){return["__other__"]}else{return[]}};o=function(e){if(e==="__other__"){return v("other")}else if(typeof e==="object"){return v(e.label)}else{return v(e)}};u=function(t){var e;e=p.values.concat(n()).filter(function(e){return i(e)===t})[0];e=e&&e.label?e.label:e;return e?v(e):typeof t==="string"?v(t):t};r=function(e){return in$(e,(p.values||[]).map(function(e){return i(e)}).concat(n()))};a=debounce(100,function(){if(d.mod.child.optionView){return d.mod.child.optionView.render()}});e=function(){var e,t,n,r;if(!p.defcfg){e=d.mod.info.config||{}}else{e=import$({},p.defcfg.config||{});for(t in n=d.mod.info.config){r=n[t];if(e[t]==null){e[t]=r}}}p.meta=d.mod.info.meta;p.cfg=e;p.other=e.other||(e.other={});p.values=e.values||[];if(d.mod.child.view){d.mod.child.view.render()}return a()};e();this.on("meta",function(){return e()});this.on("change",function(e){var t;p.value=e||{};p.value.list=((t=p.value).list||(t.list=[])).filter(function(e){return r(e)});d.mod.child.view.render(["input","content","other-text"]);return a()});f=function(e){var t,n,r,i,o,u;t=e.select,n=e.value,r=e.other;if(!(p.cfg.multiple||p.other.enabled)){if(t){return d.value(p.value=t.value)}else if(n){return d.value(p.value=n||"")}}if(p.value==null){p.value={list:[]}}else if(typeof p.value==="string"){p.value={list:[p.value].filter(function(e){return e})}}if(t){if(!p.cfg.multiple){p.value.list=[t.value].filter(function(e){return e})}else{i=Array.from(t.selectedOptions).map(function(e){return e.value}).filter(function(e){return e});p.value={list:i}}}else if(n){if(~(o=p.value.list.indexOf(n))){p.value.list.splice(o,1)}else{p.value.list.push(n)}}else if(r!=null&&p.other.enabled){((u=p.value).other||(u.other={})).text=r}return d.value(p.value)};c=debounce(150,function(e){var t;t=(e!=null?e:{}).kw;p.kw=((t||"")+"").toLowerCase();return d.mod.child.optionView.render("option")});this.mod.child.ldcv={};this.mod.child.optionView=new m({root:s,handler:{chosen:{list:function(){var e;if(typeof(e=d.value())==="string"){return[e]}else if(e){return e.list||[]}else{return[]}},key:function(e){return i(e)},view:{action:{click:{"@":function(e){var t,n;t=e.node,n=e.ctx;return f({value:i(n)})}}},text:{label:function(e){var t,n;t=e.node,n=e.ctx;return o(n)}}}},option:{list:function(){var e;e=p.values;if(p.kw){e=e.filter(function(e){if(e.keyword){return!!~e.keyword.toLowerCase().indexOf(p.kw)}return!!~(e.label||e).toLowerCase().indexOf(p.kw)||!!~(e.value||"").toLowerCase().indexOf(p.kw)})}return e.concat(n())},key:function(e){return i(e)},view:{action:{click:{"@":function(e){var t,n;t=e.node,n=e.ctx;return f({value:t.dataset.value})}}},handler:{"@":function(e){var t,n,r;t=e.node,n=e.ctx;r=i(n);t.setAttribute("value",r);t.dataset.value=r;t.textContent=o(n);return t.classList.toggle("active",in$(r,l()))}}}}}});return this.mod.child.view=t=new m({root:s,action:{input:{search:function(e){var t;t=e.node;return c({kw:t.value})},input:function(e){var t;t=e.node;return f({select:t})},"other-text":function(e){var t;t=e.node;return f({other:t.value})}},change:{search:function(e){var t;t=e.node;return c({kw:t.value})},input:function(e){var t;t=e.node;return f({select:t})},"other-text":function(e){var t;t=e.node;return f({other:t.value})}},click:{toggle:function(e){var t;t=e.node;return d.mod.child.ldcv[t.dataset.name].toggle()},reset:function(e){var t;t=e.node;p.value=null;return f({})}}},init:{ldcv:function(e){var t;t=e.node;return d.mod.child.ldcv[t.dataset.name]=new ldcover({root:t,resident:true})}},text:{content:function(e){var t,n,r,i,o;t=e.node;if(d.isEmpty()){return v("empty")}n=d.value();r=(n||{}).other;n=typeof n==="string"?[n]:n.list||[];i="";if(in$("__other__",n)&&p.other.enabled){i=v("other");if(p.other.editable&&(r||{}).text){i+=":"+r.text}}n=n.filter(function(e){return e!=="__other__"}).map(function(e){return u(e)});if(p.other.enabled&&i){n.push(i)}n=n.join((o=p.cfg.sep)?o:", ");if(!n){n=v("empty")}return n}},handler:{input:function(e){var t,n,r,i,o,u;t=e.node;if(p.cfg.multiple){t.setAttribute("multiple","")}else{t.removeAttribute("multiple")}if(!d.mod.info.meta.readonly){t.removeAttribute("readonly");t.removeAttribute("disabled")}else{t.setAttribute("readonly",null);t.setAttribute("disabled",null)}n=l();for(r=0,o=(i=t.options||[]).length;r<o;++r){u=i[r];u.selected=in$(u.value,n)}return t.classList.toggle("is-invalid",d.status()===2)},"other-text":function(e){var t,n,r;t=e.node;if(!p.meta.readonly){t.removeAttribute("readonly")}else{t.setAttribute("readonly",null)}n=l();r=p.other.enabled&&p.other.editable&&in$("__other__",n);t.classList.toggle("d-none",!r);return t.value=((p.value||{}).other||{}).text||""},"input-group":function(e){var t;t=e.node;return t.classList.toggle("layout-row",p.cfg.layout==="row")}}})},render:function(){return this.mod.child.view.render()},validate:function(){var t=this;return Promise.resolve().then(function(){var e;if(!((t.mod.info.config||{}).other||{}).requireOnCheck){return}e=t.value();if(e&&(e.other||{}).enabled&&!(e.other||{}).text){return["other-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"><div class="m-edit has-tips manual" ld="error-root"><div ld="input-group"><select class="form-control" ld="input"><option value="">...</option><option ld-each="option">...</option></select><input class="form-control d-none" ld="other-text" t t-placeholder="fill-other"></div><div class="m-edit"><div class="hover-tip tip-sm"><div ld-each="error"></div></div></div></div><div class="m-view"><div ld="content"></div></div></div></div>
+<div><style type="text/css">[ld="input-group"]{display:flex;gap:.5em;flex-direction:column}[ld="input-group"].layout-row{flex-direction:row}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/choice",extend:{name:"@makeform/common"},host:{name:"@grantdash/composer"},i18n:{en:{empty:"(empty)",other:"Other","fill-other":"Please fill","edit options":"Edit Options",config:{other:{enabled:{name:"enable 'other' option",desc:"show an 'other' option when enabled"},editable:{name:"input for other",desc:"show an text input for other value"},requireOnCheck:{name:"input required",desc:"text input is required when enabled"}},multiple:{name:"multi-choice",desc:"user can choose multiple entries when enabled"},sep:{name:"separator",desc:"separator character for choices in view mode"},layout:{name:"layout",desc:"how widget is layouted"}}},"zh-TW":{empty:"(未填寫)",other:"其它","fill-other":"請填寫","edit options":"編輯清單",config:{other:{enabled:{name:"使用「其它」選項",desc:"啟用時，顯示一個額外的「其它」選項"},editable:{name:"顯示輸入框",desc:"啟用時，提供一個供用戶填「其它」值的輸入框"},requireOnCheck:{name:"輸入框必填",desc:"若用戶勾選其它且輸入框有顯示，則輸入框必填"}},multiple:{name:"多選",desc:"啟用時，用戶可進行多選"},sep:{name:"分隔字元",desc:"瀏覽模式下，顯示多選值時的分隔字元"},layout:{name:"排版",desc:"元件的排版方向"}}}}},init:function(e){var t=this;e.pubsub.on("inited",function(e){e==null&&(e={});return import$(t,e)});return e.pubsub.fire("subinit",{mod:mod.call(this,e)})}};mod=function(e){var o,t,n,r,i,l,a,c,f,d,u,s,v,h,m,p,g,b,w=this;o=e.root,t=e.ctx,n=e.data,r=e.pubsub,i=e.parent,l=e.t,a=e.i18n;c=t.ldview;f={};d=function(){return w.hitf};u=function(e){if(typeof e==="string"){return e}else{return(e!=null?e.value:void 8)||d().totext(e!=null?e.label:void 8)}};s=function(){var e;e=f.value;e=e&&e.list?e.list:typeof e==="string"?[e]:[];return e.filter(function(e){return e})};v=function(){if(f.other.enabled){return["__other__"]}else{return[]}};h=function(e){var t;t=e.ctx;t=t==="__other__"?"other":typeof t!=="object"?t||"":t.label;if(typeof t==="string"){return e.node.textContent=l(t)}else{return d().render({obj:function(){return t}})(e)}};m=function(t){var e;e=(f.values||(f.values=[])).concat(v()).filter(function(e){return b(e)===t})[0];e=(e!=null?e.label:void 8)||(e!=null?e:t!=null?t:void 8);if(typeof e==="object"){return d().totext(d().content(e))}else if(typeof e==="string"){return l(e)}else{return e||""}};p=function(e){return in$(e,(f.values||[]).map(function(e){return b(e)}).concat(v()))};g=function(){return Date.now()+"-"+(g.idx=(g.idx||0)+1)+"-"+Math.random().toString(36).substring(2)};b=function(e){return e.key||u(e)};r.on("init.choice",function(e){return f.defcfg=e});this.client=function(){return{minibar:[],meta:{config:{other:{enabled:{type:"boolean",name:"config.other.enabled.name",desc:"config.other.enabled.desc"},editable:{type:"boolean",name:"config.other.editable.name",desc:"config.other.editable.desc"},requireOnCheck:{type:"boolean",name:"config.other.requireOnCheck.name",desc:"config.other.requireOnCheck.desc"}},multiple:{type:"boolean",name:"config.multiple.name",desc:"config.multiple.desc"},sep:{type:"text",name:"config.sep.name",desc:"config.sep.desc",default:","},layout:{type:"choice",name:"config.layout.name",desc:"config.layout.desc",values:["row","column"]}}},render:function(){f.view.render();return f.optionView.render()},sample:function(){var e;return{config:{values:[{key:g(),label:d().wrap((e={},e[a.language+""]="Option 1",e))},{key:g(),label:d().wrap((e={},e[a.language+""]="Option 2",e))},{key:g(),label:d().wrap((e={},e[a.language+""]="Option 3",e))}]}}}}};return{init:function(){var i,e,r,n,t,u=this;a.on("languageChanged",function(){return i()});i=debounce(100,function(){if(u.mod.child.optionView){return u.mod.child.optionView.render()}});e=function(){var e,t,n,r;if(!f.defcfg){e=u.mod.info.config||{}}else{e=import$({},f.defcfg.config||{});for(t in n=u.mod.info.config){r=n[t];if(e[t]==null){e[t]=r}}}f.meta=u.mod.info.meta;f.cfg=e;f.other=e.other||(e.other={});f.values=e.values||[];if(u.mod.child.view){u.mod.child.view.render()}return i()};e();this.on("meta",function(){return e()});this.on("change",function(e){var t;f.value=e||{};f.value.list=((t=f.value).list||(t.list=[])).filter(function(e){return p(e)});u.mod.child.view.render(["input","content","other-text"]);return i()});r=function(e){var t,n,r,i,o,l;t=e.select,n=e.value,r=e.other;if(!(f.cfg.multiple||f.other.enabled)){if(t){return u.value(f.value=t.value)}else if(n){return u.value(f.value=n||"")}}if(f.value==null){f.value={list:[]}}else if(typeof f.value==="string"){f.value={list:[f.value].filter(function(e){return e})}}if(t){if(!f.cfg.multiple){f.value.list=[t.value].filter(function(e){return e})}else{i=Array.from(t.selectedOptions).map(function(e){return e.value}).filter(function(e){return e});f.value={list:i}}}else if(n){if(~(o=f.value.list.indexOf(n))){f.value.list.splice(o,1)}else{f.value.list.push(n)}}else if(r!=null&&f.other.enabled){((l=f.value).other||(l.other={})).text=r}return u.value(f.value)};n=debounce(150,function(e){var t;t=(e!=null?e:{}).kw;f.kw=((t||"")+"").toLowerCase();return u.mod.child.optionView.render("option")});this.mod.child.ldcv={};f.optionView=this.mod.child.optionView=new c({root:o,handler:{chosen:{list:function(){var e;if(typeof(e=u.value())==="string"){return[e]}else if(e){return e.list||[]}else{return[]}},key:function(e){return b(e)},view:{action:{click:{"@":function(e){var t,n;t=e.node,n=e.ctx;return r({value:b(n)})}}},handler:{label:function(e){var t,n;t=e.node,n=e.ctx;return h({node:t,ctx:n})}}}},option:{list:function(){var e,t,n,r,i,o,l,u;e=((t=d().get())!=null?(n=t.config)!=null?n.values:void 8:void 8)||[];if(((r=f.defcfg)!=null?r.overwrite:void 8)==null||f.defcfg.overwrite){if(i=f!=null?(o=f.defcfg)!=null?(l=o.config)!=null?l.values:void 8:void 8:void 8){e=i}}u=Array.isArray(e)?e:e?[e]:[];if(f.kw){u=u.filter(function(e){if(e.keyword){return!!~e.keyword.toLowerCase().indexOf(f.kw)}return!!~(e.label||e).toLowerCase().indexOf(f.kw)||!!~(e.value||"").toLowerCase().indexOf(f.kw)})}return u.concat(v())},key:function(e){return b(e)},view:{action:{click:{"@":function(e){var t,n;t=e.node,n=e.ctx;return r({value:t.dataset.value})}}},handler:{"@":function(e){var t,n,r;t=e.node,n=e.ctx;r=b(n);t.setAttribute("value",r);t.dataset.value=r;t.classList.toggle("active",in$(r,s()));return h({node:t,ctx:n})}}}}}});return f.view=this.mod.child.view=t=new c({root:o,action:{input:{search:function(e){var t;t=e.node;return n({kw:t.value})},input:function(e){var t;t=e.node;return r({select:t})},"other-text":function(e){var t;t=e.node;return r({other:t.value})}},change:{search:function(e){var t;t=e.node;return n({kw:t.value})},input:function(e){var t;t=e.node;return r({select:t})},"other-text":function(e){var t;t=e.node;return r({other:t.value})}},click:{toggle:function(e){var t;t=e.node;return u.mod.child.ldcv[t.dataset.name].toggle()},reset:function(e){var t;t=e.node;f.value=null;return r({})},"add-option":function(e){var t,n,r,i,o;t=e.node,n=e.views;r={key:g(),label:d().wrap((i={},i[a.language+""]="untitled",i))};((i=(o=d().get()).config||(o.config={})).values||(i.values=[])).push(r);d().set();return n[0].render()}}},init:{ldcv:function(e){var t;t=e.node;return u.mod.child.ldcv[t.dataset.name]=new ldcover({root:t,resident:true})}},text:{content:function(e){var t,n,r,i,o;t=e.node;if(u.isEmpty()){return l("empty")}n=u.value();r=(n||{}).other;n=typeof n==="string"?[n]:n.list||[];i="";if(in$("__other__",n)&&f.other.enabled){i=l("other");if((f.other.editable||!(f.other.editable!=null))&&(r||{}).text){i+=":"+r.text}}n=n.filter(function(e){return e!=="__other__"}).map(function(e){return m(e)});if(f.other.enabled&&i){n.push(i)}n=n.join((o=f.cfg.sep)?o:", ");if(!n){n=l("empty")}return n}},handler:{"editable-option":{list:function(){var e;return(e=d().get().config)!=null?e.values||(e.values=[]):void 8},key:function(e){return b(e)},view:{action:{click:{text:d().edit({obj:function(e){var t;t=e.ctx;return t.label=typeof t.label==="string"?{}:t.label||(t.label={})}}),remove:function(e){var t,n,r,i,o;t=e.node,n=e.ctx,r=e.views;i=(o=d().get()).config||(o.config={});i.values=(i.values||(i.values=[])).filter(function(e){return b(e)!==b(n)});return d().set()}}},handler:{text:d().render({obj:function(e){var t;t=e.ctx;return t.label||t}})}}},input:function(e){var t,n,r,i,o,l;t=e.node;if(f.cfg.multiple){t.setAttribute("multiple","")}else{t.removeAttribute("multiple")}if(!d().get().readonly){t.removeAttribute("readonly");t.removeAttribute("disabled")}else{t.setAttribute("readonly",null);t.setAttribute("disabled",null)}n=s();for(r=0,o=(i=t.options||[]).length;r<o;++r){l=i[r];l.selected=in$(l.value,n)}return t.classList.toggle("is-invalid",u.status()===2&&u.errors().filter(function(e){return e!=="fill-other"}).length)},"other-text":function(e){var t,n,r;t=e.node;if(!f.meta.readonly){t.removeAttribute("readonly")}else{t.setAttribute("readonly",null)}n=s();r=f.other.enabled&&(f.other.editable||f.other.editable==null)&&in$("__other__",n);t.classList.toggle("d-none",!r);t.value=((f.value||{}).other||{}).text||"";return t.classList.toggle("is-invalid",u.status()===2)&&in$("fill-other",u.errors())},"input-group":function(e){var t;t=e.node;return t.classList.toggle("layout-row",f.cfg.layout==="row")}}})},render:function(){return this.mod.child.view.render()},validate:function(){var o=this;return Promise.resolve().then(function(){var e,t,n,r,i;if(!((e=d().get().config)!=null&&((t=e.other)!=null&&t.requireOnCheck))){return}n=o.value();if(n&&(in$("__other__",n.list||[])||(r=n.other)!=null&&r.enabled)&&!((i=n.other)!=null&&i.text)){return["fill-other"]}})}}};function import$(e,t){var n={}.hasOwnProperty;for(var r in t)if(n.call(t,r))e[r]=t[r];return e}function in$(e,t){var n=-1,r=t.length>>>0;while(++n<r)if(e===t[n])return true;return false}</script><div plug="body"><div class="m-edit has-tips manual" ld="error-root"><div class="rounded border mb-2 py-1 px-2 cps-ctrl"><div class="d-flex flex-wrap g-2 align-items-center"><div class="btn btn-light btn-sm" t="edit options"></div><div ld-each="editable-option"><span><span ld="text"></span><i class="i-close text-sm ml-1 cps-hover cps-remove" ld="remove"></i></span></div><div class="clickable rounded-sm bg-dark cps-add" ld="add-option">＋</div></div></div><div ld="input-group"><select class="form-control" ld="input"><option value="">...</option><option ld-each="option">...</option></select><input class="form-control d-none" ld="other-text" t t-placeholder="fill-other"></div><div class="m-edit"><div class="hover-tip tip-sm"><div ld-each="error"></div></div></div></div><div class="m-view"><div ld="content"></div></div></div></div>

package/package.json

@@ -1 +1 @@
-{"name":"@makeform/choice","version":"2.1.0","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.68"},"devDependencies":{"fedep":"^1.3.0"}}
+{"name":"@makeform/choice","version":"4.0.0","description":"","scripts":{},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69"},"devDependencies":{"fedep":"^1.6.0"}}