@makeform/choice 1.0.3 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Logs
 
+## v2.0.1
+
+ - fix bug: content in view mode isn't translated
+
+
+## v2.0.0
+
+ - support object values
+ - tweak DOM based on updated `@makeform/common` DOM structure.
+ - support multiple choice
+ - support `other` and toggling other text field
+ - support inline / block display with different multiple / other configuration
+ - support ldcover-based editing mechanism
+ - support configuration overridding from subblock via `init.choice` pubsub event.
+ - support custom separator in view mode
+
+
 ## v1.0.3
 
  - ensure translated value to be string, otherwise `n/a` will be shown.

package/README.md

@@ -1,5 +1,32 @@
 # @makeform/choice
 
+Dropdown style widget for users to make one single choice between multiple options.
+
+
+## Configs
+
+ - `values`: Array of string for options in this widget.
+ - `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
+   - `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.
+ 
+
+
+## Extension
+
+use `init.choice` event with `{config: { ... }}` parameter to create a new widget based on certain configuration. For example:
+
+    module.exports =
+      pkg: extend: name: "@makeform/choice"
+      init: ({pubsub}) -> pubsub.fire \init.choice, config: values: <[Apple Orange Banana]>
+
+Specified configurations won't be overrided by users so always predefine a config if you don't want user to change its value.
+
+
 ## License
 
 MIT

package/index.html

@@ -1 +1 @@
-<div><div class="form-group has-tips manual" ld="base error-root" 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><select class="m-edit form-control" ld="input"><option value="">...</option><option ld-each="option">...</option></select><div class="m-edit"><div class="hover-tip tip-sm"><div ld-each="error"></div></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 class="m-view"><div ld="content"></div></div></div><script type="@plotdb/block">var mod;module.exports={pkg:{name:"@makeform/choice",extend:{name:"@makeform/common"}},init:function(n){return n.pubsub.fire("subinit",{mod:mod(n)})}};mod=function(n){var e,t,i,r,o,u,a,d;e=n.root,t=n.ctx,i=n.data,r=n.parent,o=n.t,u=n.i18n;a=t.ldview;d={};return{init:function(){var n,t,i=this;this.on("change",function(n){i.mod.child.view.get("input").value=n||"";return i.mod.child.view.render(["input","content"])});n=function(n){var t;t=n.node;return i.value(t.value)};return this.mod.child.view=t=new a({root:e,action:{input:{input:n},change:{input:n}},handler:{content:function(n){var t,e;t=n.node;if(i.isEmpty()||typeof(e=i.content())!=="string"){return"n/a"}else{return o(e)}},option:{list:function(){return i.mod.info.config.values||[]},key:function(n){return n},handler:function(n){var t,e;t=n.node,e=n.data;t.setAttribute("value",e);return t.innerText=o(e)}},input:function(n){var t;t=n.node;if(!i.mod.info.meta.readonly){t.removeAttribute("readonly");t.removeAttribute("disabled")}else{t.setAttribute("readonly",null);t.setAttribute("disabled",null)}t.value=i.value();return t.classList.toggle("is-invalid",i.status()===2)}}})},render:function(){return this.mod.child.view.render()}}};</script></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"},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:{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")}if(!(p.cfg.multiple||p.other.enabled)){return d.content()}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(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>

package/package.json

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