@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 3.83 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),l=require("../../common/constants/index.cjs"),a=require("./select-menu-constants.cjs"),r=require("../../common/utils/index.cjs"),o=require("../../common/mixins/input.cjs"),d=require("./select-menu-validators.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),u=require("../validation-messages/validation-messages.cjs"),_={name:"DtSelectMenu",components:{DtValidationMessages:u.default},mixins:[o.MessagesMixin],inheritAttrs:!1,props:{label:{type:String,default:""},description:{type:String,default:""},options:{type:Array,default:()=>[],validator:t=>d.optionsValidator(t)},value:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(a.SELECT_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""},selectClass:{type:[String,Array,Object],default:""},optionClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},optionChildProps:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1}},emits:["input","change"],data(){return{LABEL_SIZE_MODIFIERS:l.LABEL_SIZE_MODIFIERS,DESCRIPTION_SIZE_MODIFIERS:l.DESCRIPTION_SIZE_MODIFIERS,SELECT_SIZE_MODIFIERS:a.SELECT_SIZE_MODIFIERS,SELECT_STATE_MODIFIERS:a.SELECT_STATE_MODIFIERS}},computed:{selectListeners(){return{...this.$listeners,input:()=>{},change:t=>this.emitValue(t.target.value,t)}},state(){return r.getValidationState(this.formattedMessages)},selectKey(){return r.getUniqueString()},descriptionKey(){return`select-${this.selectKey}-description`},labelAriaDetails(){return this.$slots.description||this.description?this.descriptionKey:this.$attrs["aria-details"]}},mounted(){this.validateOptionsPresence()},beforeUpdate(){this.validateOptionsPresence()},methods:{emitValue(t,e){this.$emit("input",t,e),this.$emit("change",t,e)},getOptionKey(t){return`select-${this.selectKey}-option-${t}`},validateOptionsPresence(){var t;((t=this.options)==null?void 0:t.length)<1&&!this.$slots.default&&n.util.warn("Options are expected to be provided via prop or slot",this)}}};var p=function(){var e=this,s=e._self._c;return s("div",[s("label",[e.$slots.label||e.label?s("div",e._b({class:["d-label",e.LABEL_SIZE_MODIFIERS[e.size],e.labelClass],attrs:{"aria-details":e.labelAriaDetails,"data-qa":"dt-select-label"}},"div",e.labelChildProps,!1),[e._t("label",function(){return[e._v(e._s(e.label))]})],2):e._e(),e.$slots.description||e.description?s("div",e._b({class:["d-description",e.DESCRIPTION_SIZE_MODIFIERS[e.size],e.descriptionClass],attrs:{id:e.descriptionKey,"data-qa":"dt-select-description"}},"div",e.descriptionChildProps,!1),[e._t("description",function(){return[e._v(e._s(e.description))]})],2):e._e(),s("div",{class:["d-select",e.SELECT_SIZE_MODIFIERS[e.size],e.selectClass,{"d-select--disabled":e.disabled}],attrs:{"data-qa":"dt-select-wrapper"}},[s("select",e._g(e._b({ref:"selectElement",class:["d-select__input",e.SELECT_STATE_MODIFIERS[e.state]],attrs:{"data-qa":"dt-select",disabled:e.disabled},domProps:{value:e.value}},"select",e.$attrs,!1),e.selectListeners),[e._t("default",function(){return e._l(e.options,function(i){return s("option",e._b({key:e.getOptionKey(i.value),class:e.optionClass,domProps:{value:i.value}},"option",e.optionChildProps,!1),[e._v(" "+e._s(i.label)+" ")])})})],2)])]),s("dt-validation-messages",e._b({class:e.messagesClass,attrs:{"validation-messages":e.formattedMessages,"show-messages":e.showMessages,"data-qa":"dt-select-messages"}},"dt-validation-messages",e.messagesChildProps,!1))],1)},S=[],E=c.n(_,p,S);const I=E.exports;exports.default=I;
//# sourceMappingURL=select-menu.cjs.map