@madgex/design-system-ce 5.5.3 → 5.5.5
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 +11 -0
- package/components/combobox/Combobox.ce.vue +3 -3
- package/components/combobox/ListBox.vue +1 -5
- package/dist/custom-elements/mds-combobox.js +1 -1
- package/dist/custom-elements/mds-text-editor.js +22 -21
- package/dist/plugin-vue_export-helper.js +10 -10
- package/eslint.config.js +6 -0
- package/package.json +2 -9
- package/.eslintrc.js +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.5](https://github.com/wiley/madgex-design-system/compare/@madgex/design-system-ce@5.5.4...@madgex/design-system-ce@5.5.5) (2025-04-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @madgex/design-system-ce
|
|
9
|
+
|
|
10
|
+
## [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)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- leave role on listbox component but move aria-labelledby to combobox ([33fe91d](https://github.com/wiley/madgex-design-system/commit/33fe91d42ea16714a44cadb456e3e845a731aca1))
|
|
15
|
+
- use aria-controls instead of aria-owns + fix aria-activedescendant ([eba1a06](https://github.com/wiley/madgex-design-system/commit/eba1a0678ad9579848c2194ff48fa573462f65f6))
|
|
16
|
+
|
|
6
17
|
## [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)
|
|
7
18
|
|
|
8
19
|
### 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}`"
|
|
@@ -165,7 +165,7 @@ export default {
|
|
|
165
165
|
return this.options.length === 0 && this.expanded;
|
|
166
166
|
},
|
|
167
167
|
selectedOptionId() {
|
|
168
|
-
const index = this.visibleOptions.
|
|
168
|
+
const index = this.visibleOptions.findIndex((obj) => obj.value == this.selectedOption?.value);
|
|
169
169
|
|
|
170
170
|
if (index > -1) {
|
|
171
171
|
return `${this.optionId}-${index}`;
|
|
@@ -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 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"]},
|
|
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};
|