@dialpad/dialtone/dist/vue3/lib/button/button.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../common/utils/index.cjs"),n=require("./button-constants.cjs"),d=require("../../localization/index.cjs"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../link/link-constants.cjs"),I={compatConfig:{MODE:3},name:"DtButton",props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(n.ICON_POSITION_MODIFIERS).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(n.BUTTON_IMPORTANCE_MODIFIERS).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(u.LINK_KIND_MODIFIERS).includes(t)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>n.BUTTON_TYPES.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(n.BUTTON_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(n.BUTTON_KIND_MODIFIERS).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:n.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:a.hasSlotContent,i18n:new d.DialtoneLocalization}},computed:{buttonListeners(){return{focusin:t=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",t)},focusout:t=>{this.isInFocus=!1,this.$emit("focusout",t)}}},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return n.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&e.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{buttonClasses(){return this.link?["d-link",u.getLinkKindModifier(this.linkKind,this.linkInverted),n.BUTTON_SIZE_MODIFIERS[this.size]]:this.kind==="unstyled"?["d-btn--unstyled"]:["d-btn",n.BUTTON_IMPORTANCE_MODIFIERS[this.importance],n.BUTTON_KIND_MODIFIERS[this.kind],n.BUTTON_SIZE_MODIFIERS[this.size],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(t,r,i){if(this.kind==="unstyled")return!0;for(const s of n.INVALID_COMBINATION)if(t===s.circle&&r===s.kind&&i===s.importance)return console.warn(s.message),!1;return!0},shouldRenderIcon(){return a.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!a.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},_=["type","disabled","aria-live","aria-label"];function O(t,r,i,s,o,l){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",l.buttonClasses()],"data-qa":"dt-button",type:i.type,disabled:i.disabled,style:{width:i.width},"aria-live":l.computedAriaLive,"aria-label":i.loading?o.i18n.$t("DIALTONE_LOADING"):t.$attrs["aria-label"]},e.toHandlers(l.buttonListeners,!0)),[l.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon",{"d-btn__icon":i.kind!=="unstyled",[o.ICON_POSITION_MODIFIERS[i.iconPosition]]:i.kind!=="unstyled"}])},[e.renderSlot(t.$slots,"icon",{iconSize:l.iconSize})],2)):e.createCommentVNode("",!0),o.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["base-button__label",{"d-btn__label":i.kind!=="unstyled"},i.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,_)}const b=c._(I,[["render",O]]);exports.default=b;
//# sourceMappingURL=button.cjs.map