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

vue3 component library, css framework

import{defineComponent as B,ref as m,computed as T,openBlock as u,createElementBlock as z,normalizeClass as p,normalizeStyle as O,createElementVNode as H,reactive as j,onMounted as _,nextTick as W,onBeforeUnmount as I,toRefs as N,pushScopeId as V,popScopeId as X,resolveComponent as A,createBlock as P,resolveDynamicComponent as Y,withCtx as U,renderSlot as q,Fragment as F,withDirectives as L,vShow as C,createCommentVNode as $}from"vue";const G={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 J=Object.defineProperty,K=Object.defineProperties,Q=Object.getOwnPropertyDescriptors,R=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,D=(e,t,o)=>t in e?J(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,ee=(e,t)=>{for(var o in t||(t={}))Z.call(t,o)&&D(e,o,t[o]);if(R)for(var o of R(t))x.call(t,o)&&D(e,o,t[o]);return e},te=(e,t)=>K(e,Q(t)),k=B({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 t=m(),o=m(),s=m(!1),r=T(()=>G[e.direction]),i=T(()=>te(ee({},e.thumbStyle),{[r.value.size]:e.size,transform:`translate${r.value.axis}(${e.move})`})),l=a=>{const h=a[r.value.client],y=t.value.getBoundingClientRect()[r.value.direction],w=Math.abs(y-h),g=o.value[r.value.offset]/2,f=e.parentRef,S=(w-g)*100/t.value[r.value.offset];f[r.value.scroll]=S*f[r.value.scrollSize]/100},c=a=>{if(!s.value)return;const h=a[r.value.client],y=t.value.getBoundingClientRect()[r.value.direction],w=Math.abs(y-h),g=o.value[r.value.offset]/2,f=e.parentRef,S=(w-g)*100/t.value[r.value.offset];f[r.value.scroll]=S*f[r.value.scrollSize]/100},b=a=>{s.value=!1,a.target&&(document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",b)),document.onselectstart=()=>null},n=a=>{s.value=!0,a.target&&(document.addEventListener("mousemove",c),document.addEventListener("mouseup",b)),document.onselectstart=()=>!1};return{trackRef:t,thumbRef:o,bar:r,thumbStyleObj:i,handleBarMouseDown:l,handleThumbMouseDown:a=>{n(a)}}}});function re(e,t,o,s,r,i){return u(),z("div",{ref:"trackRef",class:p([`es-scroll-bar es-scroll-${e.direction}`]),style:O(e.trackStyle),onMousedown:t[1]||(t[1]=(...l)=>e.handleBarMouseDown&&e.handleBarMouseDown(...l))},[H("div",{ref:"thumbRef",class:p(["es-scroll-thumb"]),style:O(e.thumbStyleObj),onMousedown:t[0]||(t[0]=(...l)=>e.handleThumbMouseDown&&e.handleThumbMouseDown(...l))},null,36)],38)}k.render=re,k.__file="components/scroll/bar.vue";const oe=typeof window=="undefined",se=(e,t,o)=>{const s=o.resizeListners||[];s.length&&s.forEach(r=>r())},le=(e,t)=>{if(!oe){if(!e.resizeListners&&(e.resizeListners=[],window.addEventListener("resize",t),typeof MutationObserver!="undefined")){e.observer=new MutationObserver((r,i)=>se(r,i,e));const s={attributes:!0,childList:!0,subtree:!0,characterData:!0};e.observer.observe(e,s)}e.resizeListners.push(t)}},ne=(e,t)=>{!e||!e.resizeListners||(e.resizeListners.splice(e.resizeListners.indexOf(t),1),e.resizeListners.length||e.observer.disconnect())};var ae=Object.defineProperty,ie=Object.defineProperties,ce=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,de=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable,M=(e,t,o)=>t in e?ae(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,ve=(e,t)=>{for(var o in t||(t={}))de.call(t,o)&&M(e,o,t[o]);if(E)for(var o of E(t))ue.call(t,o)&&M(e,o,t[o]);return e},he=(e,t)=>ie(e,ce(t)),v=B({name:"ImScroll",components:{EsBar:k},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,t){const{emit:o}=t,s=m(),r=j({vThumbHeight:"0",hThumbWidth:"0",moveX:"0%",moveY:"0%",hover:!1,showVBar:!1,showHBar:!1}),i=n=>{const d=s.value.scrollTop,a=s.value.clientHeight,h=s.value.scrollHeight;!e.native&&s.value&&(r.moveY=`${s.value.scrollTop*100/s.value.clientHeight}%`,r.moveX=`${s.value.scrollLeft*100/s.value.clientWidth}%`),o("scroll",n),d+a==h&&o("scroll-bottom",n)},l=()=>{if(!s.value)return;const n=s.value.clientHeight*100/s.value.scrollHeight,d=s.value.clientWidth*100/s.value.scrollWidth;r.showVBar=n<100,r.showHBar=d<100,r.vThumbHeight=n<100?`${n}%`:"",r.hThumbWidth=d<100?`${d}%`:""},c=n=>{s.value.scrollTop=n},b=n=>{s.value.scrollLeft=n};return _(()=>{e.native||(W(l),e.noresize||le(s.value,l))}),I(()=>{e.native||e.noresize||ne(s.value,l)}),he(ve({},N(r)),{wrap:s,handleScroll:i,setScrollTop:c,setScrollLeft:b})}});V("data-v-28bd29cb");const fe=["name"];X();function pe(e,t,o,s,r,i){const l=A("es-bar");return u(),z("div",{class:p(`es-scroll es-scroll-${e.trigger}`),style:O({width:e.width,height:e.height,maxHeight:e.maxHeight})},[H("div",{ref:"wrap",class:p(["es-scroll-wrap",e.native?"":"es-scroll-wrap--hidden",[`es-scroll-wrap-${e.direction}`],e.wrapClass]),name:e.wrapName,onScrollPassive:t[0]||(t[0]=(...c)=>e.handleScroll&&e.handleScroll(...c))},[(u(),P(Y(e.tag),{class:p(["es-scroll-content",e.contentClass])},{default:U(()=>[q(e.$slots,"default")]),_:3},8,["class"])),e.native?$("v-if",!0):(u(),z(F,{key:0},[e.direction!=="x"?L((u(),P(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"])),[[C,e.showVBar]]):$("v-if",!0),e.direction!=="y"?L((u(),P(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"])),[[C,e.showHBar]]):$("v-if",!0)],64))],42,fe)],6)}function be(e,t){t===void 0&&(t={});var o=t.insertAt;if(!(!e||typeof document=="undefined")){var s=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",o==="top"&&s.firstChild?s.insertBefore(r,s.firstChild):s.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var me=`.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%;
}`;be(me),v.render=pe,v.__scopeId="data-v-28bd29cb",v.__file="components/scroll/index.vue",v.install=e=>{e.component("es-scroll",v)};export{v as default};