@wikimedia/codex/dist/modules/CdxSelect.cjs

Codex Design System for Wikimedia

"use strict";var y=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var b=(e,n)=>{var u={};for(var o in e)A.call(e,o)&&n.indexOf(o)<0&&(u[o]=e[o]);if(e!=null&&y)for(var o of y(e))n.indexOf(o)<0&&K.call(e,o)&&(u[o]=e[o]);return u};const t=require("vue"),g=require("./Icon.js"),w=require("./CdxMenu.cjs"),D=require("./useModelWrapper.cjs"),H=require("./useFieldData.cjs"),W=require("./useSplitAttributes.cjs"),j=require("./useFloatingMenu.cjs"),p=require("./constants.js"),F=require("./_plugin-vue_export-helper.js"),R=p.makeStringTypeValidator(p.ValidationStatusTypes),T=t.defineComponent({name:"CdxSelect",components:{CdxIcon:g.CdxIcon,CdxMenu:w},inheritAttrs:!1,props:{menuItems:{type:Array,required:!0},selected:{type:[String,Number,null],required:!0},defaultLabel:{type:String,default:""},name:{type:String,default:void 0},disabled:{type:Boolean,default:!1},menuConfig:{type:Object,default:()=>({})},defaultIcon:{type:[String,Object],default:void 0},status:{type:String,default:"default",validator:R}},emits:["update:selected","load-more"],setup(e,{emit:n,attrs:u}){const o=t.ref(),i=t.ref(),v=t.inject(p.FieldDescriptionIdKey,void 0),m=t.useId(),r=t.ref(!1),l=u.id||t.useId(),{computedDisabled:c,computedStatus:C,computedInputId:S}=H(t.toRef(e,"disabled"),t.toRef(e,"status"),l),h=D(t.toRef(e,"selected"),n,"update:selected"),a=t.computed(()=>{var d;return(d=i.value)==null?void 0:d.getComputedMenuItems().find(s=>s.value===e.selected)}),k=t.computed(()=>{var d;return a.value?(d=a.value.label)!=null?d:a.value.value:e.defaultLabel}),f=t.computed(()=>{var d;if(e.defaultIcon&&!a.value)return e.defaultIcon;if((d=a.value)!=null&&d.icon)return a.value.icon}),q=t.computed(()=>({"cdx-select-vue--enabled":!c.value,"cdx-select-vue--disabled":c.value,"cdx-select-vue--expanded":r.value,"cdx-select-vue--value-selected":!!a.value,"cdx-select-vue--no-selections":!a.value,"cdx-select-vue--has-start-icon":!!f.value,["cdx-select-vue--status-".concat(C.value)]:!0})),{rootClasses:B,rootStyle:M,otherAttrs:V}=W(u,q),x=t.computed(()=>{const I=V.value,{id:d}=I;return b(I,["id"])}),N=t.computed(()=>{var d,s;return(s=(d=i.value)==null?void 0:d.getHighlightedMenuItem())==null?void 0:s.id});function $(){r.value=!1}function E(){var d;c.value||(r.value=!r.value,(d=o.value)==null||d.focus())}function L(d){var s;c.value||(s=i.value)==null||s.delegateKeyNavigation(d,{characterNavigation:!0})}return j(o,i),{handle:o,menu:i,computedHandleId:S,descriptionId:v,menuId:m,modelWrapper:h,selectedMenuItem:a,highlightedId:N,expanded:r,computedDisabled:c,onBlur:$,currentLabel:k,rootClasses:B,rootStyle:M,otherAttrsMinusId:x,onClick:E,onKeydown:L,startIcon:f,cdxIconExpand:g.C4}}}),z=["aria-disabled"],O=["id","aria-controls","aria-activedescendant","aria-expanded","aria-describedby"],P=["name","value"];function U(e,n,u,o,i,v){const m=t.resolveComponent("cdx-icon"),r=t.resolveComponent("cdx-menu");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["cdx-select-vue",e.rootClasses]),style:t.normalizeStyle(e.rootStyle),"aria-disabled":e.computedDisabled},[t.createElementVNode("div",t.mergeProps({id:e.computedHandleId,ref:"handle",class:"cdx-select-vue__handle"},e.otherAttrsMinusId,{tabindex:"0",role:"combobox","aria-controls":e.menuId,"aria-activedescendant":e.highlightedId,"aria-expanded":e.expanded,"aria-describedby":e.descriptionId,onClick:n[0]||(n[0]=(...l)=>e.onClick&&e.onClick(...l)),onBlur:n[1]||(n[1]=(...l)=>e.onBlur&&e.onBlur(...l)),onKeydown:n[2]||(n[2]=(...l)=>e.onKeydown&&e.onKeydown(...l))}),[t.renderSlot(e.$slots,"label",{selectedMenuItem:e.selectedMenuItem,defaultLabel:e.defaultLabel},()=>[t.createTextVNode(t.toDisplayString(e.currentLabel),1)]),e.startIcon?(t.openBlock(),t.createBlock(m,{key:0,icon:e.startIcon,class:"cdx-select-vue__start-icon"},null,8,["icon"])):t.createCommentVNode("v-if",!0),t.createVNode(m,{icon:e.cdxIconExpand,class:"cdx-select-vue__indicator"},null,8,["icon"])],16,O),t.createVNode(r,t.mergeProps({id:e.menuId,ref:"menu",selected:e.modelWrapper,"onUpdate:selected":n[3]||(n[3]=l=>e.modelWrapper=l),expanded:e.expanded,"onUpdate:expanded":n[4]||(n[4]=l=>e.expanded=l),"menu-items":e.menuItems},e.menuConfig,{onLoadMore:n[5]||(n[5]=l=>e.$emit("load-more"))}),{default:t.withCtx(({menuItem:l})=>[t.renderSlot(e.$slots,"menu-item",{menuItem:l})]),_:3},16,["id","selected","expanded","menu-items"]),e.name?(t.openBlock(),t.createElementBlock("input",{key:0,type:"hidden",name:e.name,value:e.selected},null,8,P)):t.createCommentVNode("v-if",!0)],14,z)}const G=F._export_sfc(T,[["render",U]]);module.exports=G;