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"),$=require("../tooltip/index.cjs"),i=require("../utils/index.cjs"),x={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"},M=e.defineComponent({__name:"BackTop",props:{icon:{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(w,{emit:y}){const o=w,a=e.ref(null),s=e.ref(0),r=e.ref(null),n=e.ref(null),{colorPalettes:c}=i.useInject("BackTop"),u=y,p=i.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})),d=e.computed(()=>s.value>=o.visibilityHeight),E=e.computed(()=>p.tooltip||o.tooltip),f=e.computed(()=>p.description||o.description);e.watch(()=>o.to,()=>{k()},{flush:"post"}),e.watch(()=>o.listenTo,()=>{b()},{flush:"post"}),e.watch(d,t=>{u("show",t)}),e.onMounted(()=>{b()}),e.onBeforeUnmount(()=>{var t;h(),(t=a.value)==null||t.remove()});const m=i.useMutationObserver(r,()=>{var t;s.value=((t=r.value)==null?void 0:t.scrollTop)??0},{subtree:!0,childList:!0,attributes:!0,characterData:!0});function v(t){s.value=t.target.scrollTop}function b(){h(),o.listenTo===void 0?r.value=g(a.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),r.value===document.documentElement&&m.start(),k()}function h(){r.value&&r.value.removeEventListener("scroll",v),r.value=null,m.stop()}function k(){var t;typeof o.to=="string"?n.value=document.getElementsByTagName(o.to)[0]:o.to instanceof HTMLElement&&(n.value=o.to),n.value&&((t=n.value)==null||t.appendChild(a.value))}function T(t){return t===document.documentElement?null:t.parentElement}function g(t){if(t===null)return null;const l=T(t);return l===null?null:l===document.documentElement?document.documentElement:(S=>{const{overflow:N,overflowX:B,overflowY:V}=getComputedStyle(S);return/(auto|scroll|overlay)/.test(N+V+B)})(l)?l:g(l)}function C(){r.value&&r.value.scrollTo({top:0,behavior:"smooth"}),u("click")}return(t,l)=>(e.openBlock(),e.createBlock(e.Transition,{name:"zoom"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"backtopRef",ref:a,class:"m-backtop",style:e.normalizeStyle([L.value,`
          --backtop-z-index: ${t.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(c)[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(c)[5]};
          --backtop-primary-bg-color-hover: ${e.unref(c)[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},[e.createVNode(e.unref($.default),e.mergeProps({style:`border-radius: var(--${t.shape}-border-radius)`,"content-style":{borderRadius:`var(--${t.shape}-border-radius)`}},t.tooltipProps),e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["backtop-wrap",`backtop-${t.type} backtop-${t.shape}`])},[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(["backtop-icon",{"icon-with-description":f.value}])},[e.renderSlot(t.$slots,"icon",{},()=>[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0})):(e.openBlock(),e.createElementBlock("svg",x,l[0]||(l[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),f.value?(e.openBlock(),e.createElementBlock("span",z,[e.renderSlot(t.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)],!0)])):e.createCommentVNode("",!0)],!0)],2)]),_:2},[E.value?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)],!0)]),key:"0"}:void 0]),1040,["style","content-style"])],4),[[e.vShow,d.value]])]),_:3}))}});exports.default=M;