@madgex/design-system-ce 5.5.2 → 5.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.5.4](https://github.com/wiley/madgex-design-system/compare/@madgex/design-system-ce@5.5.3...@madgex/design-system-ce@5.5.4) (2024-10-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- leave role on listbox component but move aria-labelledby to combobox ([33fe91d](https://github.com/wiley/madgex-design-system/commit/33fe91d42ea16714a44cadb456e3e845a731aca1))
|
|
11
|
+
- use aria-controls instead of aria-owns + fix aria-activedescendant ([eba1a06](https://github.com/wiley/madgex-design-system/commit/eba1a0678ad9579848c2194ff48fa573462f65f6))
|
|
12
|
+
|
|
13
|
+
## [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)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
- added minimum search characters to component ([7d6b88c](https://github.com/wiley/madgex-design-system/commit/7d6b88c04347fb04f3899a66f8b481463a6f302c))
|
|
18
|
+
- adding prop to trigger inactive state ([ff7cbe4](https://github.com/wiley/madgex-design-system/commit/ff7cbe4e0c2adfaedba52536892fd4833387b6d8))
|
|
19
|
+
- removing returned empty functionality ([f68f46c](https://github.com/wiley/madgex-design-system/commit/f68f46c450373620322bb9e744135503e1d06a1b))
|
|
20
|
+
- updating variables ([abb6c3c](https://github.com/wiley/madgex-design-system/commit/abb6c3c8782365210c4accfee7b65bde480d3ecf))
|
|
21
|
+
|
|
6
22
|
## [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)
|
|
7
23
|
|
|
8
24
|
### Bug Fixes
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
role="combobox"
|
|
20
20
|
:name="name"
|
|
21
21
|
:placeholder="placeholder"
|
|
22
|
-
:aria-
|
|
22
|
+
:aria-controls="listBoxId"
|
|
23
23
|
:aria-expanded="ariaExpanded"
|
|
24
24
|
aria-autocomplete="list"
|
|
25
25
|
:aria-describedby="describedbyId"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
/>
|
|
33
33
|
|
|
34
34
|
<ComboboxClear v-if="searchValue.length > 0" @clear="handleClear" />
|
|
35
|
-
<ListBox :id="listBoxId" :hidden="listBoxHidden" :
|
|
35
|
+
<ListBox :id="listBoxId" :hidden="listBoxHidden" :aria-labelledby="`${comboboxid}-label`" :is-loading="isLoading">
|
|
36
36
|
<ListBoxOption
|
|
37
37
|
v-for="(option, index) in visibleOptions"
|
|
38
38
|
:id="`${optionId}-${index}`"
|
|
@@ -107,6 +107,10 @@ export default {
|
|
|
107
107
|
type: String,
|
|
108
108
|
default: ''
|
|
109
109
|
},
|
|
110
|
+
minSearchCharacters: {
|
|
111
|
+
type: Number,
|
|
112
|
+
default: 2
|
|
113
|
+
}
|
|
110
114
|
},
|
|
111
115
|
emits: ['search', 'select-option', 'clear-all'],
|
|
112
116
|
data() {
|
|
@@ -161,7 +165,7 @@ export default {
|
|
|
161
165
|
return this.options.length === 0 && this.expanded;
|
|
162
166
|
},
|
|
163
167
|
selectedOptionId() {
|
|
164
|
-
const index = this.visibleOptions.
|
|
168
|
+
const index = this.visibleOptions.findIndex((obj) => obj.value == this.selectedOption?.value);
|
|
165
169
|
|
|
166
170
|
if (index > -1) {
|
|
167
171
|
return `${this.optionId}-${index}`;
|
|
@@ -220,7 +224,7 @@ export default {
|
|
|
220
224
|
},
|
|
221
225
|
handleChange() {
|
|
222
226
|
if (this.searchValue.length === 0) this.clearField();
|
|
223
|
-
if (this.searchValue.length
|
|
227
|
+
if (this.searchValue.length >= this.minSearchCharacters) {
|
|
224
228
|
this.makeActive();
|
|
225
229
|
this.updateCount();
|
|
226
230
|
} else {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ul class="mds-combobox__listbox" role="listbox" :
|
|
2
|
+
<ul class="mds-combobox__listbox" role="listbox" :hidden="hidden">
|
|
3
3
|
<li v-if="isLoading" class="mds-combobox-loading">
|
|
4
4
|
<!-- Ideally we would pass this in as a slot in the custom element with MdsIcon, but something is borked
|
|
5
5
|
with passing slots in Chrome https://github.com/karol-f/vue-custom-element/issues/162 -->
|
|
@@ -24,10 +24,6 @@ export default {
|
|
|
24
24
|
type: Boolean,
|
|
25
25
|
default: true,
|
|
26
26
|
},
|
|
27
|
-
comboboxid: {
|
|
28
|
-
type: String,
|
|
29
|
-
required: true,
|
|
30
|
-
},
|
|
31
27
|
},
|
|
32
28
|
inject: ['iconPath', 'loadingText'],
|
|
33
29
|
};
|
|
@@ -1 +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
|
|
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 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"]},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,i,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}},inject:["iconPath","loadingText"]},H=["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"],G={class:"mds-visually-hidden"};function N(t,n,i,u,l,e){return a(),o("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:i.hidden},[i.isLoading?(a(),o("li",F,[(a(),o("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",G,x(e.loadingText),1)])):v("",!0),y(t.$slots,"default")],8,H)}var P=h(T,[["render",N]]);const q={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 $(t,n,i,u,l,e){return a(),o("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":i.focused}]),role:"option","aria-selected":i.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var R=h(q,[["render",$]]);const U={name:"Combobox",components:{ComboboxClear:M,ListBox:P,ListBoxOption:R},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.findIndex(n=>{var i;return n.value==((i=this.selectedOption)==null?void 0:i.value)});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 i,u,l,e;const t=(u=(i=this.$el.parentElement)==null?void 0:i.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(i=>i.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(i=>i.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-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"};function Q(t,n,i,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(s=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(s=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(s=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(s=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...s)=>e.makeInactive&&e.makeInactive(...s),["esc"])),n[9]||(n[9]=r((...s)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...s),["enter"]))]},[c("input",{id:i.comboboxid,ref:"comboInput",value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:i.name,placeholder:i.placeholder,"aria-controls":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-describedby":i.describedbyId,"aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,onInput:n[0]||(n[0]=(...s)=>e.handleInput&&e.handleInput(...s)),onChange:n[1]||(n[1]=(...s)=>e.handleChange&&e.handleChange(...s)),onBlur:n[2]||(n[2]=(...s)=>e.onInputBlur&&e.onInputBlur(...s)),onFocus:n[3]||(n[3]=(...s)=>e.handleFocus&&e.handleFocus(...s))},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,"aria-labelledby":`${i.comboboxid}-label`,"is-loading":e.isLoading},{default:_(()=>[(a(!0),o(B,null,k(e.visibleOptions,(s,m)=>{var b;return a(),f(O,{id:`${e.optionId}-${m}`,key:m,option:s,focused:((b=e.selectedOption)==null?void 0:b.value)===(s==null?void 0:s.value),"search-value":l.searchValue,onMousedown:X=>e.clickOption(s)},null,8,["id","option","focused","search-value","onMousedown"])}),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),c("div",J,x(l.resultCountMessage),1)],34)}var W=h(U,[["render",Q]]);const Z=w(W,{shadowRoot:!1});export{Z as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madgex/design-system-ce",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.4",
|
|
4
4
|
"description": "Custom Elements built in Vue3",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
},
|
|
46
46
|
"author": "",
|
|
47
47
|
"license": "UNLICENSED",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "62c941b7a9f95d134cabf9ae2dd7cc56f151f01c"
|
|
49
49
|
}
|