vue-amazing-ui/lib/floatbutton/FloatButton.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("../tooltip/index.cjs"),x=require("../badge/index.cjs"),d=require("../utils/index.cjs"),B={class:"float-btn-body"},C={class:"float-btn-content"},N={key:0,class:"float-btn-icon"},V={key:1,class:"close-svg",focusable:"false","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true","fill-rule":"evenodd",viewBox:"64 64 896 896"},S={key:1,class:"float-btn-description"},T={class:"float-btn-menu"},E=e.defineComponent({__name:"FloatButton",props:{top:{default:void 0},bottom:{default:40},left:{default:void 0},right:{default:40},zIndex:{default:9},width:{default:44},height:{default:44},type:{default:"default"},shape:{default:"circle"},icon:{type:[Object,Function],default:void 0},description:{default:void 0},href:{default:void 0},target:{default:"_self"},menuTrigger:{default:void 0},tooltip:{default:void 0},tooltipProps:{default:()=>({})},badgeProps:{default:()=>({})}},emits:["click","openChange"],setup(o,{emit:s}){const t=o,n=e.ref(!1),{colorPalettes:a}=d.useInject("FloatButton"),u=s,i=d.useSlotsExist(["icon","description","tooltip","menu"]),f=e.computed(()=>i.tooltip||t.tooltip),m=e.computed(()=>i.icon||t.icon),h=e.computed(()=>i.description||t.description),p=e.computed(()=>typeof t.width=="number"?`${t.width}px`:t.width),v=e.computed(()=>typeof t.height=="number"?`${t.height}px`:t.height),g=e.computed(()=>typeof t.left=="number"?`${t.left}px`:t.left),b=e.computed(()=>t.left?null:typeof t.right=="number"?`${t.right}px`:t.right),y=e.computed(()=>typeof t.top=="number"?`${t.top}px`:t.top),$=e.computed(()=>t.top?null:typeof t.bottom=="number"?`${t.bottom}px`:t.bottom);e.watch(n,l=>{u("openChange",l)});function k(l){u("click",l),t.menuTrigger==="click"&&i.menu&&(n.value=!n.value)}return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.href?"a":"div"),{tabindex:"0",class:e.normalizeClass(["float-btn-wrap",`float-btn-${o.type} float-btn-${o.shape}`]),style:e.normalizeStyle(`
      --float-btn-width: ${p.value};
      --float-btn-height: ${v.value};
      --float-btn-left: ${g.value};
      --float-btn-right: ${b.value};
      --float-btn-top: ${y.value};
      --float-btn-bottom: ${$.value};
      --float-btn-z-index: ${o.zIndex};
      --float-btn-primary-color: ${e.unref(a)[5]};
      --float-btn-primary-color-hover: ${e.unref(a)[4]};
    `),href:o.href,target:o.target,onClick:k,onBlur:r[0]||(r[0]=c=>o.menuTrigger==="click"?n.value=!1:null),onMouseenter:r[1]||(r[1]=c=>o.menuTrigger==="hover"?n.value=!0:null),onMouseleave:r[2]||(r[2]=c=>o.menuTrigger==="hover"?n.value=!1:null)},{default:e.withCtx(()=>[e.createVNode(e.unref(w.default),e.mergeProps({placement:"left"},o.tooltipProps,{class:"float-btn-tooltip"}),e.createSlots({default:e.withCtx(()=>[e.createVNode(e.unref(x.default),e.normalizeProps(e.guardReactiveProps(o.badgeProps)),{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.createElementVNode("div",C,[m.value?(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("svg",V,[...r[3]||(r[3]=[e.createElementVNode("path",{d:"M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"},null,-1)])])):e.renderSlot(l.$slots,"icon",{key:0},()=>[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0})):e.createCommentVNode("",!0)],!0)]),_:3})])):e.createCommentVNode("",!0),h.value?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(l.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(o.description),1)],!0)])):e.createCommentVNode("",!0)])])]),_:3},16)]),_:2},[f.value?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(o.tooltip),1)],!0)]),key:"0"}:void 0]),1040),e.withDirectives(e.createVNode(e.Transition,{name:"move"},{default:e.withCtx(()=>[e.createElementVNode("div",T,[e.renderSlot(l.$slots,"menu",{},void 0,!0)])]),_:3},512),[[e.vShow,n.value]])]),_:3},40,["class","style","href","target"]))}});exports.default=E;