@madgex/design-system-ce 5.6.1 → 5.6.3

package/components/combobox/ListBoxOption.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    ref="listItem"
+    ref="$listItem"
     class="mds-combobox__option"
     role="option"
     :class="{ 'mds-combobox__option--focused': focused }"
@@ -10,41 +10,30 @@
   />
 </template>
 
-<script>
-export default {
-  name: 'ListBoxOption',
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-    focused: {
-      type: Boolean,
-      default: false,
-    },
-    searchValue: {
-      type: String,
-      default: '',
-    },
-  },
-  watch: {
-    searchValue(newSearchValue) {
-      return newSearchValue;
-    },
-    focused(value) {
-      if (value) {
-        this.$refs.listItem.scrollIntoView({block: 'nearest', inline: 'nearest'});
-      }
-    },
-  },
-  methods: {
-    highlightOption() {
-      const optionLabelHtml = this.option.label.replace(
-        new RegExp(this.searchValue, 'gi'),
-        (match) => `<span class="mds-combobox__option--marked">${match}</span>`
-      );
-      return optionLabelHtml;
-    },
+<script setup>
+import { useTemplateRef, watch } from 'vue';
+
+const props = defineProps({
+  optionLabel: { type: String, required: true },
+  focused: { type: Boolean, default: false },
+  searchValue: { type: String, default: '' },
+});
+
+const $listItem = useTemplateRef('$listItem');
+
+watch(
+  () => props.focused,
+  (value) => {
+    if (value) {
+      $listItem.value?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
   },
-};
+);
+function highlightOption() {
+  const optionLabelHtml = props.optionLabel.replace(
+    new RegExp(props.searchValue, 'gi'),
+    (match) => `<span class="mds-combobox__option--marked">${match}</span>`,
+  );
+  return optionLabelHtml;
+}
 </script>

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 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({block:"nearest",inline:"nearest"})}},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};
+import{v as I,a as p,i as c,f as x,u as _,q as b,b as j,x as D,t as N,y as k,z as U,e as q,r as y,A as h,B as C,p as A,j as K,C as se,F as re,l as ie,s as ue}from"../runtime-dom.esm-bundler.js";function ce(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var L=de;function de(n,e,l){if(!n)return l;var a,t;if(Array.isArray(e)&&(a=e.slice(0)),typeof e=="string"&&(a=e.split(".")),typeof e=="symbol"&&(a=[e]),!Array.isArray(a))throw new Error("props arg must be an array, a string or a symbol");for(;a.length;)if(t=a.shift(),!n||(n=n[t],n===void 0))return l;return n}var V=pe;function pe(n,e,l){var a=null,t=null,o=function(){a&&(clearTimeout(a),t=null,a=null)},s=function(){var d=t;o(),d&&d()},i=function(){if(!e)return n.apply(this,arguments);var d=this,w=arguments,m=l&&!a;if(o(),t=function(){n.apply(d,w)},a=setTimeout(function(){if(a=null,!m){var f=t;return t=null,f()}},e),m)return t()};return i.cancel=o,i.flush=s,i}var M={},R;function fe(){return R||(R=1,(function(n){const e={suspectRx:/"(?:_|\\u005[Ff])(?:_|\\u005[Ff])(?:p|\\u0070)(?:r|\\u0072)(?:o|\\u006[Ff])(?:t|\\u0074)(?:o|\\u006[Ff])(?:_|\\u005[Ff])(?:_|\\u005[Ff])"\s*\:/};n.parse=function(l,...a){const t=typeof a[0]=="object"&&a[0],o=a.length>1||!t?a[0]:void 0,s=a.length>1&&a[1]||t||{},i=JSON.parse(l,o);return s.protoAction==="ignore"||!i||typeof i!="object"||!l.match(e.suspectRx)||n.scan(i,s),i},n.scan=function(l,a={}){let t=[l];for(;t.length;){const o=t;t=[];for(const s of o){if(Object.prototype.hasOwnProperty.call(s,"__proto__")){if(a.protoAction!=="remove")throw new SyntaxError("Object contains forbidden prototype property");delete s.__proto__}for(const i in s){const d=s[i];d&&typeof d=="object"&&t.push(s[i])}}}},n.safeParse=function(l,a){try{return n.parse(l,a)}catch{return null}}})(M)),M}var ve=fe();const me=ce(ve),be=["aria-label","title"],he={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},ye=["href"],ge={__name:"ComboboxClear",setup(n){const e=I("iconPath"),l=I("clearInput");return(a,t)=>(c(),p("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:t[0]||(t[0]=o=>a.$emit("clear",o)),onKeydown:t[1]||(t[1]=b(o=>a.$emit("clear",o),["enter"])),"aria-label":_(l),title:_(l)},[(c(),p("svg",he,[x("use",{href:`${_(e)}#icon-close`},null,8,ye)]))],40,be))}},_e=["hidden"],xe={key:0,class:"mds-combobox-loading"},$e={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},Ie=["href"],we={class:"mds-visually-hidden"},Se={__name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0}},setup(n){const e=I("iconPath"),l=I("loadingText");return(a,t)=>(c(),p("ul",{class:"mds-combobox__listbox",role:"listbox",hidden:n.hidden},[n.isLoading?(c(),p("li",xe,[(c(),p("svg",$e,[x("use",{href:`${_(e)}#icon-spinner`},null,8,Ie)])),x("span",we,N(_(l)),1)])):j("",!0),D(a.$slots,"default")],8,_e))}},Oe=["aria-selected","innerHTML"],Ce={__name:"ListBoxOption",props:{optionLabel:{type:String,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},setup(n){const e=n,l=k("$listItem");U(()=>e.focused,t=>{t&&l.value?.scrollIntoView({block:"nearest",inline:"nearest"})});function a(){return e.optionLabel.replace(new RegExp(e.searchValue,"gi"),o=>`<span class="mds-combobox__option--marked">${o}</span>`)}return(t,o)=>(c(),p("li",{ref_key:"$listItem",ref:l,class:q(["mds-combobox__option",{"mds-combobox__option--focused":n.focused}]),role:"option","aria-selected":n.focused.toString(),onMousedown:o[0]||(o[0]=s=>t.$emit("mousedown",s)),innerHTML:a()},null,42,Oe))}},Le={role:"status",class:"mds-visually-hidden"},Me={__name:"ComboboxAriaLive",props:{visibleOptions:{type:Array,default:()=>[]},expanded:{type:Boolean,default:!1},resultsMessage:{type:String},resultsMessage_plural:{type:String}},setup(n){const e=n;U([()=>e.expanded,()=>e.visibleOptions],()=>{t()},{deep:!0});const l=y(null),a=V(function(){const s=e.visibleOptions.length===1?e.resultsMessage:e.resultsMessage_plural;l.value=s.replace("{count}",e.visibleOptions.length)},1400);function t(){l.value=null,e.expanded&&a()}return(o,s)=>(c(),p("div",Le,N(l.value),1))}},ke=["id","value","name","placeholder","aria-controls","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],Be={__name:"Combobox.ce",props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:String,default:"[]"},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""},minSearchCharacters:{type:Number,default:2},apiUrl:{type:String,default:void 0},apiQueryKey:{type:String,default:"searchText"},apiOptionsPath:{type:String,default:void 0},optionLabelPath:{type:String,default:"label"}},setup(n){const e=n,l=k("$comboInput"),a=k("$targetInputs"),t=y(!1),o=y(null),s=y(e.value),i=y(!1),d=y([]),w=h(()=>{try{return me.parse(e.options)}catch(r){return console.error(r),[]}}),m=h(()=>e.i18n?JSON.parse(e.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}),f=h(()=>e.apiUrl?d.value:w.value.filter(r=>S(r).toLowerCase().includes(s.value.toLowerCase()))),B=h(()=>`${e.comboboxid}-listbox`);function E(r){if(typeof r=="number"&&r>-1)return`${e.comboboxid}-option-${r}`}const H=h(()=>t.value?"true":"false"),Q=h(()=>e.dataAriaInvalid?"true":"false");function F(r){s.value=S(r),P(r),$(),o.value=null}function P(r){const v=Array.from(a.value?.querySelectorAll("[data-key]"));for(const u of v)u.value=r?L(r,u.getAttribute("data-key")):"",u.dispatchEvent(new Event("input",{bubbles:!0}))}function z(){t.value=!0}function $(){t.value=!1}function T(){s.value="",P()}const J=V(async function(){if(!e.apiUrl||i.value)return;const v=s?.value?.trim();try{i.value=!0;let u=await fetch(`${e.apiUrl}?${e.apiQueryKey}=${encodeURIComponent(v)}`);if(!u.ok)return;u=await u.json();const g=e.apiOptionsPath?L(u,e.apiOptionsPath):u;d.value=g||[]}finally{i.value=!1}},200);function S(r){const v=L(r,e.optionLabelPath);return String(v)}function G(r){o.value=null,s.value=r.target?r.target.value:"",O(),J()}function O(){s.value.length===0&&T(),s.value.length>=e.minSearchCharacters?z():$()}function W(){O()}function X(){T(),l.value?.focus()}function Y(r){F(r)}function Z(r){if(t.value){r.preventDefault();const v=f.value?.[o.value];F(v)}}function ee(){$()}function te(){t.value&&(o.value!==null?o.value=Math.min(o.value+1,f.value.length-1):o.value=0)}function ne(){t.value&&(o.value!==null?o.value=Math.max(o.value-1,0):o.value=f.value.length-1)}function ae(){t.value&&(o.value=0)}function oe(){t.value&&(o.value=f.value.length-1)}function le(){$()}return C("iconPath",e.iconpath),C("loadingText",m.value.loadingText),C("clearInput",m.value.clearInput),(r,v)=>(c(),p("div",{class:q(["mds-combobox",{"mds-combobox--active":t.value}]),onKeydown:[b(te,["down"]),b(ne,["up"]),b(ae,["home"]),b(oe,["end"]),b(le,["esc"]),b(Z,["enter"])]},[x("input",{id:n.comboboxid,ref_key:"$comboInput",ref:l,value:s.value,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:n.name,placeholder:n.placeholder,"aria-controls":B.value,"aria-expanded":H.value,"aria-autocomplete":"list","aria-describedby":n.describedbyId,"aria-activedescendant":E(o.value),"aria-invalid":Q.value,onInput:G,onChange:O,onBlur:ee,onFocus:W},null,40,ke),s.value.length>0?(c(),A(ge,{key:0,onClear:X})):j("",!0),K(Se,{id:B.value,hidden:!t.value,"aria-labelledby":`${n.comboboxid}-label`,"is-loading":i.value},{default:se(()=>[(c(!0),p(re,null,ie(f.value,(u,g)=>(c(),A(Ce,{id:E(g),key:g,"option-label":S(u),focused:o.value===g,"search-value":s.value,onMousedown:Ee=>Y(u)},null,8,["id","option-label","focused","search-value","onMousedown"]))),128))]),_:1},8,["id","hidden","aria-labelledby","is-loading"]),K(Me,{"visible-options":f.value,expanded:t.value,"results-message":m.value.resultsMessage,"results-message_plural":m.value.resultsMessage_plural},null,8,["visible-options","expanded","results-message","results-message_plural"]),x("span",{ref_key:"$targetInputs",ref:a},[D(r.$slots,"target-inputs")],512)],34))}},Pe=ue(Be,{shadowRoot:!1});export{Pe as default};