eslink-ui-plus/umd/scroll/index.js

vue3 component library, css framework

(function(t,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(t=typeof globalThis!="undefined"?globalThis:t||self,t["es-scroll"]=h(t.Vue))})(this,function(t){"use strict";const h={vertical:{offset:"offsetHeight",key:"vertical",size:"height",wide:"width",axis:"Y",client:"clientY",scroll:"scrollTop",scrollSize:"scrollHeight",direction:"top"},horizontal:{offset:"offsetWidth",key:"horizontal",size:"width",wide:"height",axis:"X",client:"clientX",scroll:"scrollLeft",scrollSize:"scrollWidth",direction:"left"}};var B=Object.defineProperty,$=Object.defineProperties,C=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,O=(e,r,n)=>r in e?B(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,L=(e,r)=>{for(var n in r||(r={}))T.call(r,n)&&O(e,n,r[n]);if(z)for(var n of z(r))H.call(r,n)&&O(e,n,r[n]);return e},E=(e,r)=>$(e,C(r)),v=t.defineComponent({name:"EsBar",props:{parentRef:{required:!0},direction:{type:String,default:"vertical"},size:{type:String,default:""},move:{type:String,default:""},trigger:{type:String,default:"hover"},trackStyle:{type:Object,default:()=>({})},thumbStyle:{type:Object,default:()=>({})}},setup(e){const r=t.ref(),n=t.ref(),s=t.ref(!1),o=t.computed(()=>h[e.direction]),c=t.computed(()=>E(L({},e.thumbStyle),{[o.value.size]:e.size,transform:`translate${o.value.axis}(${e.move})`})),l=i=>{const p=i[o.value.client],y=r.value.getBoundingClientRect()[o.value.direction],w=Math.abs(y-p),g=n.value[o.value.offset]/2,b=e.parentRef,S=(w-g)*100/r.value[o.value.offset];b[o.value.scroll]=S*b[o.value.scrollSize]/100},u=i=>{if(!s.value)return;const p=i[o.value.client],y=r.value.getBoundingClientRect()[o.value.direction],w=Math.abs(y-p),g=n.value[o.value.offset]/2,b=e.parentRef,S=(w-g)*100/r.value[o.value.offset];b[o.value.scroll]=S*b[o.value.scrollSize]/100},m=i=>{s.value=!1,i.target&&(document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",m)),document.onselectstart=()=>null},a=i=>{s.value=!0,i.target&&(document.addEventListener("mousemove",u),document.addEventListener("mouseup",m)),document.onselectstart=()=>!1};return{trackRef:r,thumbRef:n,bar:o,thumbStyleObj:c,handleBarMouseDown:l,handleThumbMouseDown:i=>{a(i)}}}});function D(e,r,n,s,o,c){return t.openBlock(),t.createElementBlock("div",{ref:"trackRef",class:t.normalizeClass([`es-scroll-bar es-scroll-${e.direction}`]),style:t.normalizeStyle(e.trackStyle),onMousedown:r[1]||(r[1]=(...l)=>e.handleBarMouseDown&&e.handleBarMouseDown(...l))},[t.createElementVNode("div",{ref:"thumbRef",class:t.normalizeClass(["es-scroll-thumb"]),style:t.normalizeStyle(e.thumbStyleObj),onMousedown:r[0]||(r[0]=(...l)=>e.handleThumbMouseDown&&e.handleThumbMouseDown(...l))},null,36)],38)}v.render=D,v.__file="components/scroll/bar.vue";const R=typeof window=="undefined",j=(e,r,n)=>{const s=n.resizeListners||[];s.length&&s.forEach(o=>o())},M=(e,r)=>{if(!R){if(!e.resizeListners&&(e.resizeListners=[],window.addEventListener("resize",r),typeof MutationObserver!="undefined")){e.observer=new MutationObserver((o,c)=>j(o,c,e));const s={attributes:!0,childList:!0,subtree:!0,characterData:!0};e.observer.observe(e,s)}e.resizeListners.push(r)}},_=(e,r)=>{!e||!e.resizeListners||(e.resizeListners.splice(e.resizeListners.indexOf(r),1),e.resizeListners.length||e.observer.disconnect())};var N=Object.defineProperty,V=Object.defineProperties,W=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,I=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,k=(e,r,n)=>r in e?N(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,A=(e,r)=>{for(var n in r||(r={}))I.call(r,n)&&k(e,n,r[n]);if(P)for(var n of P(r))X.call(r,n)&&k(e,n,r[n]);return e},Y=(e,r)=>V(e,W(r)),d=t.defineComponent({name:"ImScroll",components:{EsBar:v},props:{trigger:{type:String,default:"always"},width:{type:String,default:"100%"},height:{type:String,default:""},maxHeight:{type:String,default:""},direction:{type:String,default:"all"},wrapClass:{type:[String,Array],default:""},contentClass:{type:[String,Array],default:""},wrapName:{type:String,default:""},trackStyle:{type:Object,default:()=>({})},thumbStyle:{type:Object,default:()=>({"background-color":"rgba(0, 0, 0, 0.2)","border-radius":"4px"})},native:{type:Boolean,default:!1},tag:{type:String,default:"div"},noresize:{type:Boolean,default:!1}},setup(e,r){const{emit:n}=r,s=t.ref(),o=t.reactive({vThumbHeight:"0",hThumbWidth:"0",moveX:"0%",moveY:"0%",hover:!1,showVBar:!1,showHBar:!1}),c=a=>{const f=s.value.scrollTop,i=s.value.clientHeight,p=s.value.scrollHeight;!e.native&&s.value&&(o.moveY=`${s.value.scrollTop*100/s.value.clientHeight}%`,o.moveX=`${s.value.scrollLeft*100/s.value.clientWidth}%`),n("scroll",a),f+i==p&&n("scroll-bottom",a)},l=()=>{if(!s.value)return;const a=s.value.clientHeight*100/s.value.scrollHeight,f=s.value.clientWidth*100/s.value.scrollWidth;o.showVBar=a<100,o.showHBar=f<100,o.vThumbHeight=a<100?`${a}%`:"",o.hThumbWidth=f<100?`${f}%`:""},u=a=>{s.value.scrollTop=a},m=a=>{s.value.scrollLeft=a};return t.onMounted(()=>{e.native||(t.nextTick(l),e.noresize||M(s.value,l))}),t.onBeforeUnmount(()=>{e.native||e.noresize||_(s.value,l)}),Y(A({},t.toRefs(o)),{wrap:s,handleScroll:c,setScrollTop:u,setScrollLeft:m})}});t.pushScopeId("data-v-28bd29cb");const q=["name"];t.popScopeId();function U(e,r,n,s,o,c){const l=t.resolveComponent("es-bar");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`es-scroll es-scroll-${e.trigger}`),style:t.normalizeStyle({width:e.width,height:e.height,maxHeight:e.maxHeight})},[t.createElementVNode("div",{ref:"wrap",class:t.normalizeClass(["es-scroll-wrap",e.native?"":"es-scroll-wrap--hidden",[`es-scroll-wrap-${e.direction}`],e.wrapClass]),name:e.wrapName,onScrollPassive:r[0]||(r[0]=(...u)=>e.handleScroll&&e.handleScroll(...u))},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{class:t.normalizeClass(["es-scroll-content",e.contentClass])},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class"])),e.native?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[e.direction!=="x"?t.withDirectives((t.openBlock(),t.createBlock(l,{key:0,class:"es-scroll-bar-v-bar",direction:"vertical",parentRef:e.wrap,size:e.vThumbHeight,move:e.moveY,trackStyle:e.trackStyle,thumbStyle:e.thumbStyle},null,8,["parentRef","size","move","trackStyle","thumbStyle"])),[[t.vShow,e.showVBar]]):t.createCommentVNode("v-if",!0),e.direction!=="y"?t.withDirectives((t.openBlock(),t.createBlock(l,{key:1,class:"es-scroll-bar-h-bar",direction:"horizontal",parentRef:e.wrap,size:e.hThumbWidth,move:e.moveX,trackStyle:e.trackStyle,thumbStyle:e.thumbStyle},null,8,["parentRef","size","move","trackStyle","thumbStyle"])),[[t.vShow,e.showHBar]]):t.createCommentVNode("v-if",!0)],64))],42,q)],6)}function F(e,r){r===void 0&&(r={});var n=r.insertAt;if(!(!e||typeof document=="undefined")){var s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&s.firstChild?s.insertBefore(o,s.firstChild):s.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var G=`.es-scroll[data-v-28bd29cb] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  white-space: nowrap;
  background: transparent;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.es-scroll.es-scroll-hover .es-scroll-bar[data-v-28bd29cb] {
  opacity: 0;
}
.es-scroll.es-scroll-hover:hover .es-scroll-bar[data-v-28bd29cb], .es-scroll.es-scroll-hover:focus .es-scroll-bar[data-v-28bd29cb], .es-scroll.es-scroll-hover:active .es-scroll-bar[data-v-28bd29cb] {
  opacity: 1;
}
.es-scroll.es-scroll-always .es-scroll-bar[data-v-28bd29cb] {
  opacity: 1;
}
.es-scroll.es-scroll-none .es-scroll-bar[data-v-28bd29cb] {
  opacity: 0;
}
.es-scroll-wrap-all[data-v-28bd29cb] {
  overflow: scroll;
}
.es-scroll-wrap-x[data-v-28bd29cb] {
  overflow-x: scroll;
  overflow-y: hidden;
}
.es-scroll-wrap-y[data-v-28bd29cb] {
  overflow-y: scroll;
  overflow-x: hidden;
}
.es-scroll-wrap[data-v-28bd29cb] {
  overflow: auto;
  height: 100%;
}
.es-scroll-wrap--hidden[data-v-28bd29cb] {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}
.es-scroll-wrap--hidden[data-v-28bd29cb]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.es-scroll-bar[data-v-28bd29cb] {
  position: absolute;
  z-index: 9999999;
  border-radius: 4px;
  transition: opacity 120ms ease-out;
  cursor: pointer;
}
.es-scroll-bar .es-scroll-thumb[data-v-28bd29cb] {
  width: 0;
  height: 0;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.3 background-color;
}
.es-scroll-bar.es-scroll-vertical[data-v-28bd29cb] {
  width: 6px;
  top: 0;
  bottom: 0;
  right: 0;
}
.es-scroll-bar.es-scroll-vertical[data-v-28bd29cb] .es-scroll-thumb {
  width: 100%;
}
.es-scroll-bar.es-scroll-horizontal[data-v-28bd29cb] {
  height: 8px;
  left: 0;
  right: 0;
  bottom: 0;
}
.es-scroll-bar.es-scroll-horizontal[data-v-28bd29cb] .es-scroll-thumb {
  height: 100%;
}`;return F(G),d.render=U,d.__scopeId="data-v-28bd29cb",d.__file="components/scroll/index.vue",d.install=e=>{e.component("es-scroll",d)},d});