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"),B=require("../badge/index.cjs"),s=require("../utils/index.cjs"),C={class:"float-btn-body"},N={class:"float-btn-content"},V={key:0,class:"float-btn-icon"},S={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"},T={key:1,class:"float-btn-description"},E={class:"float-btn-menu"},P=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(d,{emit:c}){const t=d,n=e.ref(!1),{colorPalettes:i}=s.useInject("FloatButton"),a=c,r=s.useSlotsExist(["icon","description","tooltip","menu"]),f=e.computed(()=>r.tooltip||t.tooltip),p=e.computed(()=>r.icon||t.icon),m=e.computed(()=>r.description||t.description),h=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,o=>{a("openChange",o)});function k(o){a("click",o),t.menuTrigger==="click"&&r.menu&&(n.value=!n.value)}return(o,l)=>(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: ${h.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(i)[5]};
      --float-btn-primary-color-hover: ${e.unref(i)[4]};
    `),href:o.href,target:o.target,onClick:k,onBlur:l[0]||(l[0]=u=>o.menuTrigger==="click"?n.value=!1:null),onMouseenter:l[1]||(l[1]=u=>o.menuTrigger==="hover"?n.value=!0:null),onMouseleave:l[2]||(l[2]=u=>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(B.default),e.normalizeProps(e.guardReactiveProps(o.badgeProps)),{default:e.withCtx(()=>[e.createElementVNode("div",C,[e.createElementVNode("div",N,[p.value?(e.openBlock(),e.createElementBlock("div",V,[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("svg",S,[...l[3]||(l[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(o.$slots,"icon",{key:0},()=>[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0})):e.createCommentVNode("",!0)],!0)]),_:3})])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(o.$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(o.$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",E,[e.renderSlot(o.$slots,"menu",{},void 0,!0)])]),_:3},512),[[e.vShow,n.value]])]),_:3},40,["class","style","href","target"]))}});exports.default=P;