vue-amazing-ui/lib/backtop/BackTop.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"),V=require("../tooltip/index.cjs"),n=require("../utils/index.cjs"),$={key:1,width:"1em",height:"1em",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xlinkHref:"http://www.w3.org/1999/xlink"},z={key:0,class:"backtop-description"},P=e.defineComponent({__name:"BackTop",props:{icon:{type:[Object,Function],default:void 0},description:{default:void 0},tooltip:{default:void 0},tooltipProps:{default:()=>({})},type:{default:"default"},shape:{default:"circle"},bottom:{default:40},right:{default:40},zIndex:{default:9},visibilityHeight:{default:180},to:{default:"body"},listenTo:{default:void 0}},emits:["click","show"],setup(l,{emit:w}){const o=l,c=e.ref(!1),p=e.ref(null),i=e.ref(0),r=e.ref(null),{colorPalettes:s}=n.useInject("BackTop"),{isSupported:y}=n.useOptionsSupported("passive"),m=w,f=n.useSlotsExist(["tooltip","icon","description"]),L=e.computed(()=>({bottom:typeof o.bottom=="number"?`${o.bottom}px`:o.bottom,right:typeof o.right=="number"?`${o.right}px`:o.right})),u=e.computed(()=>i.value>=o.visibilityHeight),T=e.computed(()=>f.tooltip||o.tooltip),b=e.computed(()=>f.description||o.description);e.watch(u,t=>{t&&!c.value&&(c.value=!0)},{immediate:!0}),e.watch(()=>o.listenTo,()=>{k()},{flush:"post"}),e.watch(u,t=>{m("show",t)}),e.onMounted(()=>{k()}),e.onBeforeUnmount(()=>{h()});const d=n.useMutationObserver(r,()=>{i.value=r.value?.scrollTop??0},{subtree:!0,childList:!0,attributes:!0,characterData:!0});function v(t){i.value=t.target.scrollTop}function k(){h(),o.listenTo===void 0?r.value=g(p.value):typeof o.listenTo=="string"?r.value=document.getElementsByTagName(o.listenTo)[0]:o.listenTo instanceof HTMLElement&&(r.value=o.listenTo),r.value||console.warn("Container of back-top element is not found."),r.value&&r.value.addEventListener("scroll",v,y.value?{passive:!0}:void 0),r.value===document.documentElement?d.start():d.stop()}function h(){r.value&&r.value.removeEventListener("scroll",v),r.value=null,d.stop()}function E(t){return t===document.documentElement?null:t.parentElement}function g(t){if(t===null)return null;const a=E(t);return a===null?null:a===document.documentElement?document.documentElement:(S=>{const{overflow:x,overflowX:B,overflowY:N}=getComputedStyle(S);return/(auto|scroll|overlay)/.test(x+N+B)})(a)?a:g(a)}function C(){r.value&&r.value.scrollTo({top:0,behavior:"smooth"}),m("click")}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"backTopPlaceholderRef",ref:p,class:"back-top-placeholder",style:{display:"none"}},[(e.openBlock(),e.createBlock(e.Teleport,{to:l.to},[e.createVNode(e.Transition,{name:"zoom"},{default:e.withCtx(()=>[c.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,class:"back-top",style:[L.value,`
              --backtop-z-index: ${l.zIndex};
              --backtop-width: 44px;
              --backtop-height: 44px;
              --backtop-icon-size: 26px;
              --backtop-icon-with-desc-size: 24px;
              --backtop-desc-font-size: 12px;
              --backtop-default-color: rgba(0, 0, 0, 0.88);
              --backtop-default-color-hover: ${e.unref(s)[5]};
              --backtop-default-bg-color: rgba(255, 255, 255, 0.88);
              --backtop-default-bg-color-hover: rgba(255, 255, 255);
              --backtop-default-shadow-color: rgba(0, 0, 0, 0.12);
              --backtop-default-shadow-color-hover: rgba(0, 0, 0, 0.12);
              --backtop-primary-color: #fff;
              --backtop-primary-color-hover: #fff;
              --backtop-primary-bg-color: ${e.unref(s)[5]};
              --backtop-primary-bg-color-hover: ${e.unref(s)[4]};
              --backtop-primary-shadow-color: rgba(9, 88, 217, 0.32);
              --backtop-primary-shadow-color-hover: rgba(9, 88, 217, 0.32);
              --backtop-circle-border-radius: calc(var(--backtop-width) / 2);
              --backtop-square-border-radius: 8px;
            `],onClick:C},t.$attrs),[e.createVNode(e.unref(V.default),e.mergeProps({style:`border-radius: var(--backtop-${l.shape}-border-radius)`,"content-style":{borderRadius:`var(--backtop-${l.shape}-border-radius)`}},l.tooltipProps),e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["backtop-wrap",`backtop-${l.type} backtop-${l.shape}`])},[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(["backtop-icon",{"icon-with-description":b.value}])},[e.renderSlot(t.$slots,"icon",{},()=>[l.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.icon),{key:0})):(e.openBlock(),e.createElementBlock("svg",$,[...a[0]||(a[0]=[e.createElementVNode("g",{stroke:"none","stroke-width":"1","fill-rule":"evenodd"},[e.createElementVNode("g",{transform:"translate(-139.000000, -4423.000000)","fill-rule":"nonzero"},[e.createElementVNode("g",{transform:"translate(120.000000, 4285.000000)"},[e.createElementVNode("g",{transform:"translate(7.000000, 126.000000)"},[e.createElementVNode("g",{transform:"translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)"},[e.createElementVNode("g",{transform:"translate(4.000000, 2.000000)"},[e.createElementVNode("path",{d:"M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z"}),e.createElementVNode("path",{d:"M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z"})])])])])])],-1)])]))],!0)],2),b.value?(e.openBlock(),e.createElementBlock("span",z,[e.renderSlot(t.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(l.description),1)],!0)])):e.createCommentVNode("",!0)],!0)],2)]),_:2},[T.value?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(l.tooltip),1)],!0)]),key:"0"}:void 0]),1040,["style","content-style"])],16)),[[e.vShow,u.value]]):e.createCommentVNode("",!0)]),_:3})],8,["to"]))],512))}});exports.default=P;