@madgex/design-system-ce 5.5.2 → 5.5.3

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.5.3](https://github.com/wiley/madgex-design-system/compare/@madgex/design-system-ce@5.5.2...@madgex/design-system-ce@5.5.3) (2024-08-05)
+
+### Bug Fixes
+
+- added minimum search characters to component ([7d6b88c](https://github.com/wiley/madgex-design-system/commit/7d6b88c04347fb04f3899a66f8b481463a6f302c))
+- adding prop to trigger inactive state ([ff7cbe4](https://github.com/wiley/madgex-design-system/commit/ff7cbe4e0c2adfaedba52536892fd4833387b6d8))
+- removing returned empty functionality ([f68f46c](https://github.com/wiley/madgex-design-system/commit/f68f46c450373620322bb9e744135503e1d06a1b))
+- updating variables ([abb6c3c](https://github.com/wiley/madgex-design-system/commit/abb6c3c8782365210c4accfee7b65bde480d3ecf))
+
 ## [5.5.2](https://github.com/wiley/madgex-design-system/compare/@madgex/design-system-ce@5.5.1...@madgex/design-system-ce@5.5.2) (2024-07-11)
 
 ### Bug Fixes

package/components/combobox/Combobox.ce.vue

@@ -107,6 +107,10 @@ export default {
       type: String,
       default: ''
     },
+    minSearchCharacters: {
+      type: Number,
+      default: 2
+    }
   },
   emits: ['search', 'select-option', 'clear-all'],
   data() {
@@ -220,7 +224,7 @@ export default {
     },
     handleChange() {
       if (this.searchValue.length === 0) this.clearField();
-      if (this.searchValue.length > 1) {
+      if (this.searchValue.length >= this.minSearchCharacters) {
         this.makeActive();
         this.updateCount();
       } else {

package/dist/custom-elements/mds-combobox.js

@@ -1 +1 @@
-import{_ as h,o as a,c as o,a as c,w as r,t as x,b as v,r as y,n as g,d as p,e as f,f as _,g as C,F as B,h as k,i as w}from"../plugin-vue_export-helper.js";const L={name:"ComboboxClear",inject:["iconPath","clearInput"]},V=["aria-label","title"],S={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},E=["href"];function K(t,n,s,u,l,e){return a(),o("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:n[0]||(n[0]=d=>t.$emit("clear",d)),onKeydown:n[1]||(n[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),o("svg",S,[c("use",{href:`${e.iconPath}#icon-close`},null,8,E)]))],40,V)}var M=h(L,[["render",K]]);const T={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},H=["aria-labelledby","hidden"],F={key:0,class:"mds-combobox-loading"},D={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},A=["href"],q={class:"mds-visually-hidden"};function G(t,n,s,u,l,e){return a(),o("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${s.comboboxid}-label`,hidden:s.hidden},[s.isLoading?(a(),o("li",F,[(a(),o("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",q,x(e.loadingText),1)])):v("",!0),y(t.$slots,"default")],8,H)}var P=h(T,[["render",G]]);const N={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),n=>`<span class="mds-combobox__option--marked">${n}</span>`)}}},j=["aria-selected","innerHTML"];function R(t,n,s,u,l,e){return a(),o("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":s.focused}]),role:"option","aria-selected":s.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var U=h(N,[["render",R]]);const $={name:"Combobox",components:{ComboboxClear:M,ListBox:P,ListBoxOption:U},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""}},emits:["search","select-option","clear-all"],data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},mounted(){var s,u,l,e;const t=(u=(s=this.$el.parentElement)==null?void 0:s.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),n=(e=(l=this.$el.parentElement)==null?void 0:l.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),n&&n.removeAttribute("id")},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>1?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},handleKeyDownEnter(t){this.expanded&&(t.preventDefault(),this.chooseOption())},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[n]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===0?t:t-1;this.selectedOption=this.visibleOptions[n]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},z=["id","value","name","placeholder","aria-owns","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"};function Q(t,n,s,u,l,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),I=p("ListBox");return a(),o("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[n[4]||(n[4]=r(i=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(i=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(i=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(i=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...i)=>e.makeInactive&&e.makeInactive(...i),["esc"])),n[9]||(n[9]=r((...i)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...i),["enter"]))]},[c("input",{id:s.comboboxid,ref:"comboInput",value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:s.name,placeholder:s.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-describedby":s.describedbyId,"aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,onInput:n[0]||(n[0]=(...i)=>e.handleInput&&e.handleInput(...i)),onChange:n[1]||(n[1]=(...i)=>e.handleChange&&e.handleChange(...i)),onBlur:n[2]||(n[2]=(...i)=>e.onInputBlur&&e.onInputBlur(...i)),onFocus:n[3]||(n[3]=(...i)=>e.handleFocus&&e.handleFocus(...i))},null,40,z),l.searchValue.length>0?(a(),f(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),_(I,{id:e.listBoxId,hidden:e.listBoxHidden,"is-loading":e.isLoading,comboboxid:s.comboboxid},{default:C(()=>[(a(!0),o(B,null,k(e.visibleOptions,(i,m)=>{var b;return a(),f(O,{id:`${e.optionId}-${m}`,key:m,option:i,focused:((b=e.selectedOption)==null?void 0:b.value)===(i==null?void 0:i.value),"search-value":l.searchValue,onMousedown:X=>e.clickOption(i)},null,8,["id","option","focused","search-value","onMousedown"])}),128))]),_:1},8,["id","hidden","is-loading","comboboxid"]),c("div",J,x(l.resultCountMessage),1)],34)}var W=h($,[["render",Q]]);const Z=w(W,{shadowRoot:!1});export{Z as default};
+import{_ as h,o as a,c as o,a as c,w as r,t as x,b as v,r as y,n as g,d as p,e as f,f as C,g as _,F as B,h as k,i as w}from"../plugin-vue_export-helper.js";const L={name:"ComboboxClear",inject:["iconPath","clearInput"]},S=["aria-label","title"],V={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},E=["href"];function K(t,n,s,u,l,e){return a(),o("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:n[0]||(n[0]=d=>t.$emit("clear",d)),onKeydown:n[1]||(n[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),o("svg",V,[c("use",{href:`${e.iconPath}#icon-close`},null,8,E)]))],40,S)}var M=h(L,[["render",K]]);const T={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},H=["aria-labelledby","hidden"],F={key:0,class:"mds-combobox-loading"},D={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},A=["href"],q={class:"mds-visually-hidden"};function G(t,n,s,u,l,e){return a(),o("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${s.comboboxid}-label`,hidden:s.hidden},[s.isLoading?(a(),o("li",F,[(a(),o("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",q,x(e.loadingText),1)])):v("",!0),y(t.$slots,"default")],8,H)}var N=h(T,[["render",G]]);const P={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),n=>`<span class="mds-combobox__option--marked">${n}</span>`)}}},j=["aria-selected","innerHTML"];function R(t,n,s,u,l,e){return a(),o("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":s.focused}]),role:"option","aria-selected":s.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var U=h(P,[["render",R]]);const $={name:"Combobox",components:{ComboboxClear:M,ListBox:N,ListBoxOption:U},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2}},emits:["search","select-option","clear-all"],data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},mounted(){var s,u,l,e;const t=(u=(s=this.$el.parentElement)==null?void 0:s.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),n=(e=(l=this.$el.parentElement)==null?void 0:l.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),n&&n.removeAttribute("id")},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>=this.minSearchCharacters?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},handleKeyDownEnter(t){this.expanded&&(t.preventDefault(),this.chooseOption())},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[n]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===0?t:t-1;this.selectedOption=this.visibleOptions[n]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},z=["id","value","name","placeholder","aria-owns","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"};function Q(t,n,s,u,l,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),I=p("ListBox");return a(),o("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[n[4]||(n[4]=r(i=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(i=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(i=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(i=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...i)=>e.makeInactive&&e.makeInactive(...i),["esc"])),n[9]||(n[9]=r((...i)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...i),["enter"]))]},[c("input",{id:s.comboboxid,ref:"comboInput",value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:s.name,placeholder:s.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-describedby":s.describedbyId,"aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,onInput:n[0]||(n[0]=(...i)=>e.handleInput&&e.handleInput(...i)),onChange:n[1]||(n[1]=(...i)=>e.handleChange&&e.handleChange(...i)),onBlur:n[2]||(n[2]=(...i)=>e.onInputBlur&&e.onInputBlur(...i)),onFocus:n[3]||(n[3]=(...i)=>e.handleFocus&&e.handleFocus(...i))},null,40,z),l.searchValue.length>0?(a(),f(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),C(I,{id:e.listBoxId,hidden:e.listBoxHidden,"is-loading":e.isLoading,comboboxid:s.comboboxid},{default:_(()=>[(a(!0),o(B,null,k(e.visibleOptions,(i,m)=>{var b;return a(),f(O,{id:`${e.optionId}-${m}`,key:m,option:i,focused:((b=e.selectedOption)==null?void 0:b.value)===(i==null?void 0:i.value),"search-value":l.searchValue,onMousedown:X=>e.clickOption(i)},null,8,["id","option","focused","search-value","onMousedown"])}),128))]),_:1},8,["id","hidden","is-loading","comboboxid"]),c("div",J,x(l.resultCountMessage),1)],34)}var W=h($,[["render",Q]]);const Z=w(W,{shadowRoot:!1});export{Z as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system-ce",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "description": "Custom Elements built in Vue3",
   "main": "dist/index.js",
   "exports": {
@@ -45,5 +45,5 @@
   },
   "author": "",
   "license": "UNLICENSED",
-  "gitHead": "7ec00c135ac3528a950502bb6188554132f8816c"
+  "gitHead": "53a2afb020575b576ab5b8ca2da1af17b0c17e71"
 }