UNPKG

@dialpad/dialtone-vue

Version:

Vue component library for Dialpad's design system Dialtone

3 lines (2 loc) 2.38 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue"),i=require("../../common/utils/index.cjs"),a=require("./toggle-constants.cjs"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r={name:"DtToggle",inheritAttrs:!1,model:{prop:"checked",event:"change"},props:{id:{type:String,default(){return i.default.getUniqueString()}},disabled:{type:Boolean,default:!1},checked:{type:[Boolean,String],default:!1,validator:t=>a.TOGGLE_CHECKED_VALUES.includes(t)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.keys(a.TOGGLE_SIZE_MODIFIERS).includes(t)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})}},emits:["change"],data(){return{internalChecked:this.checked}},computed:{inputListeners(){return{...this.$listeners,click:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked==="mixed"},toggleRole(){return this.isIndeterminate?"checkbox":"switch"},toggleClasses(){return["d-toggle",a.TOGGLE_SIZE_MODIFIERS[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{checked(t){this.internalChecked=t}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit("change",!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs["aria-label"])},validateInputLabels(t,e){!t&&!e&&s.util.warn("You must provide an aria-label when there is no label passed",this)}}};var d=function(){var e=this,l=e._self._c;return l("div",{staticClass:"d-toggle-wrapper"},[e.$slots.default?l("label",e._b({class:e.labelClass,attrs:{for:e.id,"data-qa":"toggle-label"}},"label",e.labelChildProps,!1),[e._t("default")],2):e._e(),l("button",e._g(e._b({class:e.toggleClasses,attrs:{id:e.id,role:e.toggleRole,type:"button","aria-checked":e.internalChecked.toString(),disabled:e.disabled,"aria-disabled":e.disabled.toString()}},"button",e.$attrs,!1),e.inputListeners),[e.showIcon?l("span",{staticClass:"d-toggle__inner"}):e._e()])])},o=[],c=n.n(r,d,o);const u=c.exports;exports.default=u; //# sourceMappingURL=toggle.cjs.map