@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
2 lines • 5.53 kB
JavaScript
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../loader/loader.cjs`),r=require(`./button-constants.cjs`),i=require(`../link/link-constants.cjs`),a=require(`../../localization/index.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtButton`,components:{DtLoader:n.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:`left`,validator:e=>Object.keys(r.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:`primary`,validator:e=>Object.keys(r.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:`default`,validator:e=>Object.keys(i.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:`button`,validator:e=>r.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:String,default:`md`,validator:e=>Object.keys(r.BUTTON_SIZE_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},kind:{type:String,default:`default`,validator:e=>Object.keys(r.BUTTON_KIND_MODIFIERS).includes(e)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1},to:{type:[String,Object],default:null},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null},replace:{type:Boolean,default:!1}},emits:[`focusin`,`focusout`],data(){return{ICON_POSITION_MODIFIERS:r.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:e.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{computedTag(){return this.to?this.resolveRouterLink():this.href?`a`:`button`},isNativeButton(){return!this.to&&!this.href},computedAttrs(){return this.to?{to:this.to,replace:this.replace,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:this.href?{href:this.disabled?null:this.href,target:this.target,rel:this.rel,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:{type:this.type,disabled:this.disabled}},computedListeners(){let e={focusin:e=>{this.isInFocus=this.assertiveOnFocus,this.$emit(`focusin`,e)},focusout:e=>{this.isInFocus=!1,this.$emit(`focusout`,e)}};return this.isNativeButton||(this.disabled&&(e.click=e=>{e.preventDefault(),e.stopImmediatePropagation()}),e.keydown=e=>{(e.key===` `||e.code===`Space`)&&(e.preventDefault(),this.disabled||e.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?`assertive`:this.$attrs.ariaLive},iconSize(){return r.BUTTON_ICON_SIZES[this.size]},loaderSize(){return r.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!==`production`&&(this.circle&&this.link&&(0,o.warn)(`You cannot enable circle and link at the same time`,this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{resolveRouterLink(){try{return(0,o.resolveComponent)(`RouterLink`)}catch{return(0,o.warn)(`DtButton: "to" prop requires vue-router. Falling back to <a>.`),`a`}},buttonClasses(){return this.link?[`d-link`,i.getLinkKindModifier(this.linkKind,this.linkInverted),r.BUTTON_SIZE_MODIFIERS[this.size]]:this.kind===`unstyled`?[`d-btn--unstyled`]:[`d-btn`,r.BUTTON_IMPORTANCE_MODIFIERS[this.importance],r.BUTTON_KIND_MODIFIERS[this.kind],r.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(e,t,n){if(this.kind===`unstyled`)return!0;for(let i of r.INVALID_COMBINATION)if(e===i.circle&&t===i.kind&&n===i.importance)return(0,o.warn)(i.message),!1;return!0},shouldRenderIcon(){return e.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!e.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&[`top`,`bottom`].includes(this.iconPosition)}}};function c(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-loader`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.computedTag),(0,o.mergeProps)({class:[`base-button__button`,a.buttonClasses()],"data-qa":`dt-button`,style:{width:n.width},"aria-live":a.computedAriaLive,"aria-label":n.loading?i.i18n.$t(`DIALTONE_LOADING`):e.$attrs[`aria-label`]},a.computedAttrs,(0,o.toHandlers)(a.computedListeners)),{default:(0,o.withCtx)(()=>[n.loading&&n.kind!==`unstyled`?((0,o.openBlock)(),(0,o.createBlock)(s,{key:0,class:`d-btn__loader`,size:a.loaderSize,"aria-hidden":`true`},null,8,[`size`])):(0,o.createCommentVNode)(``,!0),a.shouldRenderIcon()?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,"data-qa":`dt-button-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,[i.ICON_POSITION_MODIFIERS[n.iconPosition]]:n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,"data-qa":`dt-button-label`,class:(0,o.normalizeClass)([`base-button__label`,{"d-btn__label":n.kind!==`unstyled`},n.labelClass])},[(0,o.renderSlot)(e.$slots,`default`)],2)):(0,o.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`aria-live`,`aria-label`])}var l=t.t(s,[[`render`,c]]);exports.default=l;
//# sourceMappingURL=button.cjs.map