@aplus-frontend/ui 0.4.8 → 0.4.10

package/lib/src/scroll-view/index.vue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../config-provider/index.js");require("../scroll-bar/index.js");const c=require("../utils/index.js"),o=require("../scroll-bar/utils/index.js"),Z=require("./hooks/use-scroll-wrapper.js"),W=require("lodash-unified"),w=require("@vueuse/core"),b=require("@aplus-frontend/utils"),ee=require("./hooks/use-scroll-back.js"),te=require("./hooks/use-scroll-smooth.js"),re=require("./utils/index.js"),ae=require("../config-provider/hooks/use-namespace.js"),D=require("../scroll-bar/internal.vue.js"),ne=e.defineComponent({name:"ScrollView",__name:"index",props:{width:{},heigth:{},showXBar:{type:Boolean,default:!0},showYBar:{type:Boolean,default:!0},autoPlay:{type:[Boolean,Object]},xBarProps:{default:()=>({})},yBarProps:{default:()=>({})},onWheel:{}},setup($,{expose:C}){const n=$,M={direction:"vertical",rate:1,repeat:!0},{b:X,e:g,em:z}=ae.useNamespace("scroll-view"),f=e.ref(),u=e.reactive({x:30,y:30});let m=!1;const{scrollOffset:a,maxScrollDistance:i,xBarRef:Y,yBarRef:O,containerRef:s,scrollYBar:h,scrollXBar:d,updateMaxScrollDistance:A}=Z.default(),{width:L,height:T}=w.useElementSize(f),{width:j,height:F}=w.useElementSize(s),{start:P}=ee.useScrollBack({scrollOffset:a,maxScrollDistance:i,onScroll:r=>{r==="horizontal"?d():h()},async onScrollEnd(){await b.wait(200),S()}}),{start:R}=te.useScrollSmooth({scrollOffset:a,maxScrollDistance:i,onScroll(r,t){V.value&&(y(),m=!0),r&&d(),t&&h()},async onScrollEnd(){m&&(await b.wait(200),S(),m=!1)}}),{resume:S,pause:y,isActive:V}=w.useRafFn(()=>{if(!n.autoPlay){y();return}const r=n.autoPlay===!0?{}:n.autoPlay,t={...M,...r};if(t.direction==="horizontal"){if(a.x===i.x){y(),t.repeat&&P("horizontal");return}a.x=o.ensureRangeValue(a.x+t.rate,0,i.x),d()}else{if(a.y===i.y){y(),t.repeat&&P("vertical");return}a.y=o.ensureRangeValue(a.y+t.rate,0,i.y),h()}},{immediate:!0}),p=e.computed(()=>n.showXBar&&u.x!==100),x=e.computed(()=>n.showYBar&&u.y!==100),H=e.computed(()=>({width:c.isDef(n.width)?W.isString(n.width)?n.width:Number.isNaN(n.width)?void 0:`${n.width}px`:void 0,height:c.isDef(n.heigth)?W.isString(n.heigth)?n.heigth:Number.isNaN(n.heigth)?void 0:`${n.heigth}px`:void 0,padding:`${n.xBarProps.trackWidth||10}px ${n.yBarProps.trackWidth||10}px`}));async function B(){V.value&&(y(),await b.wait(500),S())}async function I(r){var t;if(e.unref(x))r.preventDefault(),r.stopPropagation();else return;a.y=o.ensureRangeValue(a.y+r.deltaY,0,i.y),h(),(t=n.onWheel)==null||t.call(n,"vertical",a.y),B()}function U(r){var t;if(e.unref(p))r.preventDefault(),r.stopPropagation();else return;a.x=o.ensureRangeValue(a.x+r.deltaX,0,i.x),d(),(t=n.onWheel)==null||t.call(n,"horizontal",a.x),B()}function k(){if(n.showYBar){const{visibleSize:r,totalSize:t}=o.getScrollable(s.value,"vertical");u.y=o.ensureRangeValue(Math.min(r/(t||1)*100))}if(n.showXBar){const{visibleSize:r,totalSize:t}=o.getScrollable(s.value,"horizontal");u.x=o.ensureRangeValue(Math.min(r/(t||1)*100))}}function q(r,t){const l=e.unref(s),v=e.unref(f);if(!l||!v)return;const{visibleSize:N,totalSize:_}=o.getScrollable(l,t);if(_<=N)return;const E=(_-N)*r/100,Q=t==="vertical";if(B(),Q){a.y=E;return}a.x=E}e.watchEffect(()=>{e.unref(s.value)&&k()},{flush:"post"}),e.watch(()=>[L.value,T.value,j.value,F.value],()=>{k(),A()}),e.watchEffect(()=>{f.value&&(f.value.style.transform=`translate3d(-${a.x}px, -${a.y}px, 0px)`)});function G(r,t){c.isDef(r)&&p.value&&(a.x=o.ensureRangeValue(r,0,i.x),d()),c.isDef(t)&&x.value&&(a.y=o.ensureRangeValue(t,0,i.y),h())}function J({smooth:r,left:t,top:l}){r?R({x:t,y:l}):(c.isDef(t)&&(a.x=t),c.isDef(l)&&(a.y=l))}function K(r,t="start"){const l=re.getElementScrollOffset(s.value,r,t),v={};p.value&&(v.x=o.ensureRangeValue(a.x+l.x,0,i.x)),x.value&&(v.y=o.ensureRangeValue(a.y+l.y,0,i.y)),R(v)}return C({scrollTop:e.computed(()=>a.y),scrollLeft:e.computed(()=>a.x),scroll:G,scrollTo:J,scrollIntoView:K}),(r,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:s,class:e.normalizeClass(e.unref(X)()),style:e.normalizeStyle(H.value),onWheel:[e.withModifiers(I,["exact"]),e.withModifiers(U,["shift"])]},[e.createElementVNode("div",{ref_key:"contentRef",ref:f,class:e.normalizeClass(e.unref(g)("content"))},[e.renderSlot(r.$slots,"default")],2),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","vertical")]),style:e.normalizeStyle(`height: calc(100% - ${p.value?r.xBarProps.trackWidth||10:0}px)`)},[x.value?(e.openBlock(),e.createBlock(e.unref(D.default),e.mergeProps({key:0,ref_key:"yBarRef",ref:O},r.yBarProps,{"bar-length":u.y,onScroll:t[0]||(t[0]=l=>q(l,"vertical"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","horizontal")])},[p.value?(e.openBlock(),e.createBlock(e.unref(D.default),e.mergeProps({key:0,ref_key:"xBarRef",ref:Y},r.xBarProps,{direction:"horizontal","bar-length":u.x,onScroll:t[1]||(t[1]=l=>q(l,"horizontal"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],2)],38))}});exports.default=ne;

package/lib/src/scroll-view/index.vue2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.vue.js");exports.default=e.default;

package/lib/src/scroll-view/interface.d.ts

@@ -0,0 +1,92 @@
+import { InternalScrollBarProps, ScrollBarDirection } from '../scroll-bar';
+import { Ref } from 'vue';
+type BarExtraProps = Omit<InternalScrollBarProps, 'direction' | 'scroll' | 'barLength'>;
+export type ScrollOffsetType = {
+    x: number;
+    y: number;
+};
+export type AutoPlayConfig = {
+    /**
+     * 自动滚动的方向
+     */
+    direction?: ScrollBarDirection;
+    /**
+     * 自动滚动的速率，每一帧滚动的长度
+     */
+    rate?: number;
+    /**
+     * 是否开启重复滚动
+     */
+    repeat?: boolean;
+};
+export interface ScrollViewProps {
+    /**
+     * 外部容器的宽度，当需要横向滚动条时必需设置
+     */
+    width?: number | string;
+    /**
+     * 外部容器的高度，当需要竖向滚动时必须设置
+     */
+    heigth?: number | string;
+    /**
+     * 是否显示横向滚动条（前提是可以横向滚动）
+     */
+    showXBar?: boolean;
+    /**
+     * 是否显示竖向滚动条（前提是可以竖向滚动）
+     */
+    showYBar?: boolean;
+    /**
+     * 设置自动滚动
+     */
+    autoPlay?: true | AutoPlayConfig;
+    /**
+     * 横向滚动条额外可配置的属性
+     */
+    xBarProps?: BarExtraProps;
+    /**
+     * 竖向滚动条额外可配置属性
+     */
+    yBarProps?: BarExtraProps;
+    /**
+     * 滚轮滚动事件
+     * @returns
+     */
+    onWheel?: (direction: ScrollBarDirection, offset: number) => void;
+}
+export type ScrollOptions = {
+    top?: number;
+    left?: number;
+    smooth?: boolean;
+};
+export type ScrollViewExpose = {
+    /**
+     * 当前滚动距离顶部的位置
+     */
+    scrollTop: Ref<number>;
+    /**
+     * 当前滚动距离左侧的位置
+     */
+    scrollLeft: Ref<number>;
+    /**
+     * 滚动到指定位置
+     * @param x
+     * @param y
+     * @returns
+     */
+    scroll: (x?: number, y?: number) => void;
+    /**
+     * 滚动到指定位置(支持指定平滑滚动)
+     * @param options
+     * @returns
+     */
+    scrollTo: (options: ScrollOptions) => void;
+    /**
+     * 将子元素滚动到可视区域
+     * @param element
+     * @param position
+     * @returns
+     */
+    scrollIntoView: (element: Element, position?: 'start' | 'center' | 'end') => void;
+};
+export {};

package/lib/src/scroll-view/interface.js

@@ -0,0 +1 @@
+"use strict";

package/lib/src/scroll-view/style/css.cjs

@@ -0,0 +1,2 @@
+import '@aplus-frontend/ui/theme/scroll-bar/index.css';
+import '@aplus-frontend/ui/theme/scroll-view/index.css';

package/lib/src/scroll-view/style/index.cjs

@@ -0,0 +1,2 @@
+import '@aplus-frontend/ui/theme/scroll-bar/index.less';
+import '@aplus-frontend/ui/theme/scroll-view/index.less';

package/lib/src/scroll-view/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取某个元素相对滚动容器可见应该滚动的偏移量（绝对值）
+ * @param container
+ * @param element
+ * @param position
+ * @returns
+ */
+export declare function getElementScrollOffset(container: HTMLElement, element: HTMLElement, position: 'start' | 'center' | 'end'): {
+    x: number;
+    y: number;
+};

package/lib/src/scroll-view/utils/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(o,c,t){const e=o.getBoundingClientRect(),n=c.getBoundingClientRect(),s=t==="x"?"left":"top",f=t==="x"?"right":"bottom",l=t==="x"?"width":"height";return{start:n[s]-e[s],end:n[f]-e[f],center:n[f]-e[f]+(e[l]-n[l])/2}}function r(o,c,t){const e=g(o,c,"x"),n=g(o,c,"y");return{x:e[t],y:n[t]}}exports.getElementScrollOffset=r;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "main": "./lib/index.js",
   "type": "module",
   "files": [
@@ -65,22 +65,23 @@
     "sortablejs": "^1.15.2",
     "vue-virtual-scroller": "2.0.0-beta.8",
     "vuedraggable": "^4.1.0",
-    "@aplus-frontend/hooks": "1.0.7",
-    "@aplus-frontend/utils": "1.0.47"
+    "@aplus-frontend/utils": "1.0.48",
+    "@aplus-frontend/hooks": "1.0.7"
   },
   "peerDependencies": {
-    "@aplus-frontend/antdv": "^1.0.10",
+    "@aplus-frontend/antdv": "^1.0.11",
     "@aplus-frontend/icon": "^1.2.1",
     "@aplus-frontend/oss": "^1.1.2",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@aplus-frontend/antdv": "^1.0.10",
+    "@aplus-frontend/antdv": "^1.0.11",
     "@aplus-frontend/icon": "^1.2.1",
     "@aplus-frontend/oss": "^1.1.2",
     "@types/sortablejs": "^1.15.8",
     "@vue/test-utils": "^2.4.6",
     "axios": "^1.7.2",
+    "csstype": "^3.1.3",
     "jsdom": "^25.0.0",
     "vue": "^3.5.13",
     "vue-types": "3.0.2",

package/theme/index.css

@@ -1769,7 +1769,7 @@ div.aplus-ap-info-layout-admin__header-shadow.aplus-ap-info-layout-admin__sticky
 }
 .aplus-scroll-bar__bar--horizontal {
   height: var(--aplus-scroll-bar-bar-width, 8px);
-  top: calc(var(--aplus-scroll-bar-track-width, 10px) - var(--aplus-scroll-bar-bar-width, 8px));
+  top: calc(var(--aplus-scroll-bar-track-width, 10px) / 2 - var(--aplus-scroll-bar-bar-width, 8px) / 2);
 }
 .aplus-scroll-bar__bar--vertical {
   width: var(--aplus-scroll-bar-bar-width, 8px);
@@ -2093,3 +2093,23 @@ div.aplus-ap-info-layout-admin__header-shadow.aplus-ap-info-layout-admin__sticky
 .aplus-batch-input-group-popover-input__popover--content textarea {
   padding: 0;
 }
+.aplus-scroll-view {
+  position: relative;
+  overflow: hidden;
+}
+.aplus-scroll-view__content {
+  display: inline-block;
+}
+.aplus-scroll-view__bar-wrapper {
+  position: absolute;
+}
+.aplus-scroll-view__bar-wrapper--horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.aplus-scroll-view__bar-wrapper--vertical {
+  top: 0;
+  right: 0;
+  height: 100%;
+}

package/theme/index.less

@@ -34,3 +34,4 @@
 @import './ap-upload-single/index.less';
 @import './ap-image/ap-image.less';
 @import './batch-input-group/index.less';
+@import './scroll-view/index.less';

package/theme/scroll-bar/index.css

@@ -38,7 +38,7 @@
 }
 .aplus-scroll-bar__bar--horizontal {
   height: var(--aplus-scroll-bar-bar-width, 8px);
-  top: calc(var(--aplus-scroll-bar-track-width, 10px) - var(--aplus-scroll-bar-bar-width, 8px));
+  top: calc(var(--aplus-scroll-bar-track-width, 10px) / 2 - var(--aplus-scroll-bar-bar-width, 8px) / 2);
 }
 .aplus-scroll-bar__bar--vertical {
   width: var(--aplus-scroll-bar-bar-width, 8px);

package/theme/scroll-bar/index.less

@@ -51,7 +51,7 @@
 
     &--horizontal {
       height: var(@bw, 8px);
-      top: calc(var(@tw, 10px) - var(@bw, 8px));
+      top: calc(var(@tw, 10px) / 2 - var(@bw, 8px) / 2);
     }
 
     &--vertical {

package/theme/scroll-view/index.css

@@ -0,0 +1,20 @@
+.aplus-scroll-view {
+  position: relative;
+  overflow: hidden;
+}
+.aplus-scroll-view__content {
+  display: inline-block;
+}
+.aplus-scroll-view__bar-wrapper {
+  position: absolute;
+}
+.aplus-scroll-view__bar-wrapper--horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.aplus-scroll-view__bar-wrapper--vertical {
+  top: 0;
+  right: 0;
+  height: 100%;
+}

package/theme/scroll-view/index.less

@@ -0,0 +1,23 @@
+@import '../mixins/mixins.less';
+@import '../mixins/config.less';
+
+.b(scroll-view, {
+  position: relative;
+  overflow: hidden;
+  &__content {
+    display: inline-block;
+  }
+  &__bar-wrapper {
+    position: absolute;
+    &--horizontal {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+    &--vertical {
+      top: 0;
+      right: 0;
+      height: 100%
+    }
+  }
+});