@aplus-frontend/ui 0.4.3 → 0.4.5

package/theme/scroll-bar/index.less

@@ -0,0 +1,62 @@
+@import '../mixins/mixins.less';
+@import '../mixins/config.less';
+
+@bar: ~'@{ns}-scroll-bar__bar--disabled';
+@bc: ~'--@{ns}-scroll-bar-bar-color';
+@tc: ~'--@{ns}-scroll-bar-track-color';
+@bw: ~'--@{ns}-scroll-bar-bar-width';
+@tw: ~'--@{ns}-scroll-bar-track-width';
+
+.b('scroll-bar', {
+  position: relative;
+
+  &--horizontal {
+    width: 100%;
+    height: var(@tw, 10px);
+  }
+
+  &--vertical {
+    width: var(@tw, 10px);
+    height: 100%;
+  }
+
+  &__track {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    inset-inline-start: 0;
+    cursor: pointer;
+    background-color:  var(@tc, rgb(0 0 0 / 5%));
+    &--disabled {
+      pointer-events: none;
+      background-color: rgb(0 0 0 / 2%);
+    }
+    &--hidden {
+      pointer-events: none;
+      background-color: transparent;
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    border-radius: var(@bw, 8px);
+    background-color:  var(@bc, #c7c8cc);
+    cursor: pointer;
+
+    &--disabled {
+      pointer-events: none;
+      box-shadow: none;
+    }
+
+    &--horizontal {
+      height: var(@bw, 8px);
+      top: calc(var(@tw, 10px) - var(@bw, 8px));
+    }
+
+    &--vertical {
+      width: var(@bw, 8px);
+      left: calc(var(@tw, 10px) / 2 - var(@bw, 8px) / 2);
+    }
+  }
+});

package/es/src/ap-scroll-bar/ap-scroll-bar.vue.d.ts

@@ -1,8 +0,0 @@
-import { ApScrollBarProps } from './interface';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ApScrollBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ApScrollBarProps> & Readonly<{}>, {
-    type: "horizontal" | "vertical";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-    containerRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/es/src/ap-scroll-bar/ap-scroll-bar.vue.mjs

@@ -1,4 +0,0 @@
-import f from "./ap-scroll-bar.vue2.mjs";
-export {
-  f as default
-};

package/es/src/ap-scroll-bar/ap-scroll-bar.vue2.mjs

@@ -1,116 +0,0 @@
-import { defineComponent as O, ref as a, nextTick as $, onMounted as Q, watch as Z, onUnmounted as ee, openBlock as te, createElementBlock as le, normalizeClass as N, unref as u, normalizeStyle as U, createElementVNode as oe } from "vue";
-import "../config-provider/index.mjs";
-import { Subject as ae, fromEvent as v, map as _, takeUntil as h, throttleTime as X, concatAll as Y, withLatestFrom as ne } from "rxjs";
-import { useNamespace as ce } from "../config-provider/hooks/use-namespace.mjs";
-const ve = /* @__PURE__ */ O({
-  __name: "ap-scroll-bar",
-  props: {
-    target: {},
-    type: {
-      default: "horizontal"
-    }
-  },
-  setup(j) {
-    const o = j, r = a(), H = a(0), T = a(0), p = a(0), d = a(0), g = a(), y = a(), b = a(), W = a(), t = a(), w = a(!1), f = new ae(), z = a();
-    let k = 0, B = 0;
-    const E = (e) => e / y.value, S = (e) => e * y.value, R = () => {
-      if (t.value)
-        if (o.type === "horizontal") {
-          const e = t.value.scrollWidth, l = t.value.clientWidth;
-          w.value = l >= e;
-        } else {
-          const e = t.value.scrollHeight, l = t.value.clientHeight;
-          w.value = l >= e;
-        }
-    }, L = () => {
-      if (t.value && r.value)
-        if (o.type === "horizontal") {
-          const e = t.value.scrollWidth, l = t.value.clientWidth, n = t.value.scrollLeft, s = r.value.clientWidth;
-          g.value = l / e, y.value = s / e, H.value = Math.round(s * g.value), p.value = S(n);
-        } else {
-          const e = t.value.scrollHeight, l = t.value.clientHeight, n = t.value.scrollTop, s = r.value.clientHeight;
-          g.value = l / e, y.value = s / e, T.value = Math.floor(s * g.value), d.value = E(n);
-        }
-    }, P = () => {
-      const e = v(W.value, "mousedown"), l = v(b.value, "mousemove"), n = v(b.value, "mouseup"), s = v(b.value, "selectstart");
-      e.pipe(_(() => s.pipe(h(n), h(f), X(16))), Y()).subscribe((c) => c.preventDefault()), e.pipe(_(() => l.pipe(h(n), h(f), X(16))), Y(), ne(e), _(([c, x]) => {
-        console.log("move!!!", c);
-        const m = c, i = x, C = m.pageX - z.value.left - i.offsetX, M = m.pageY - z.value.top - i.offsetY, J = r.value.clientWidth, K = r.value.clientHeight;
-        return {
-          x: C > 0 ? Math.min(C, J - H.value) : Math.max(C, 0),
-          y: M > 0 ? Math.min(M, K - T.value) : Math.max(M, 0)
-        };
-      })).subscribe((c) => {
-        var x, m;
-        if (o.type === "horizontal") {
-          const i = E(c.x);
-          c.x !== p.value && t.value && ((x = t.value) == null || x.scrollTo({
-            left: i
-          })), p.value = c.x;
-        } else {
-          const i = E(c.y);
-          c.y !== d.value && t.value && ((m = t.value) == null || m.scrollTo({
-            top: i
-          })), d.value = c.y;
-        }
-      });
-    }, q = () => {
-      t.value && v(t.value, "scroll").pipe(h(f)).subscribe((l) => {
-        var s;
-        const n = l.target;
-        n && o.type === "horizontal" && (k = n.scrollLeft, p.value = S(k)), n && o.type === "vertical" && B !== ((s = t == null ? void 0 : t.value) == null ? void 0 : s.scrollTop) && (B = n.scrollTop, d.value = S(B));
-      });
-    }, A = () => {
-      v(window, "resize").pipe(h(f)).subscribe(() => {
-        R(), $(() => {
-          var l;
-          z.value = (l = r.value) == null ? void 0 : l.getBoundingClientRect(), L();
-        });
-      });
-    }, F = () => {
-      console.log("targetEle.value", t.value), t.value && W.value && (R(), $(() => {
-        var e;
-        z.value = (e = r.value) == null ? void 0 : e.getBoundingClientRect(), L(), P(), q(), A();
-      }));
-    };
-    Q(() => {
-      Z(() => o.target, () => {
-        $(() => {
-          var e, l;
-          typeof o.target == "string" ? t.value = document.querySelector(o.target) : t.value = (e = o.target) == null ? void 0 : e.call(o), b.value = (l = document.getElementsByTagName("body")) == null ? void 0 : l[0], W.value = document.getElementById("bar"), F();
-        });
-      }, {
-        immediate: !0
-      });
-    }), ee(() => {
-      f.next(0);
-    });
-    const {
-      b: V,
-      e: G,
-      m: D,
-      em: I
-    } = ce("ap-scroll-bar");
-    return (e, l) => (te(), le("div", {
-      ref_key: "containerRef",
-      ref: r,
-      class: N(`${u(V)()} ${o.type === "horizontal" ? u(D)("horizontal") : u(D)("vertical")}`),
-      style: U({
-        display: w.value ? "none" : "block"
-      })
-    }, [oe("div", {
-      id: "bar",
-      class: N(`${u(G)("bar")} ${o.type === "horizontal" ? u(I)("bar", "horizontal") : u(I)("bar", "vertical")}`),
-      style: U(o.type === "horizontal" ? {
-        width: `${H.value}px`,
-        left: `${p.value}px`
-      } : {
-        height: `${T.value}px`,
-        top: `${d.value}px`
-      })
-    }, null, 6)], 6));
-  }
-});
-export {
-  ve as default
-};

package/es/src/ap-scroll-bar/index.d.ts

@@ -1,29 +0,0 @@
-import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
-import { ApScrollBarProps } from './interface';
-export * from './interface';
-declare const ApScrollBar: {
-    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-        type: "horizontal" | "vertical";
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-        containerRef: HTMLDivElement;
-    }, HTMLDivElement, ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, {
-        type: "horizontal" | "vertical";
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & ComponentOptionsBase<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-    type: "horizontal" | "vertical";
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & ( Plugin & (new (...args: any[]) => {
-    $props: {
-        onClick?: () => void;
-    };
-}));
-export { ApScrollBar };

package/es/src/ap-scroll-bar/index.mjs

@@ -1,8 +0,0 @@
-import "./interface.mjs";
-import { withInstall as o } from "@aplus-frontend/utils";
-import "./ap-scroll-bar.vue.mjs";
-import r from "./ap-scroll-bar.vue2.mjs";
-const l = o(r);
-export {
-  l as ApScrollBar
-};

package/es/src/ap-scroll-bar/interface.d.ts

@@ -1,4 +0,0 @@
-export interface ApScrollBarProps {
-    target: string | (() => Element);
-    type?: 'horizontal' | 'vertical';
-}

package/es/src/ap-scroll-bar/style/css.js

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

package/es/src/ap-scroll-bar/style/index.js

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

package/lib/src/ap-scroll-bar/ap-scroll-bar.vue.d.ts

@@ -1,8 +0,0 @@
-import { ApScrollBarProps } from './interface';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ApScrollBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ApScrollBarProps> & Readonly<{}>, {
-    type: "horizontal" | "vertical";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-    containerRef: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/lib/src/ap-scroll-bar/ap-scroll-bar.vue.js

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

package/lib/src/ap-scroll-bar/ap-scroll-bar.vue2.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../config-provider/index.js");const o=require("rxjs"),X=require("../config-provider/hooks/use-namespace.js"),Y=e.defineComponent({__name:"ap-scroll-bar",props:{target:{},type:{default:"horizontal"}},setup($){const a=$,i=e.ref(),z=e.ref(0),T=e.ref(0),v=e.ref(0),f=e.ref(0),d=e.ref(),p=e.ref(),g=e.ref(),x=e.ref(),l=e.ref(),E=e.ref(!1),h=new o.Subject,y=e.ref();let w=0,H=0;const W=t=>t/p.value,k=t=>t*p.value,B=()=>{if(l.value)if(a.type==="horizontal"){const t=l.value.scrollWidth,n=l.value.clientWidth;E.value=n>=t}else{const t=l.value.scrollHeight,n=l.value.clientHeight;E.value=n>=t}},C=()=>{if(l.value&&i.value)if(a.type==="horizontal"){const t=l.value.scrollWidth,n=l.value.clientWidth,r=l.value.scrollLeft,s=i.value.clientWidth;d.value=n/t,p.value=s/t,z.value=Math.round(s*d.value),v.value=k(r)}else{const t=l.value.scrollHeight,n=l.value.clientHeight,r=l.value.scrollTop,s=i.value.clientHeight;d.value=n/t,p.value=s/t,T.value=Math.floor(s*d.value),f.value=W(r)}},R=()=>{const t=o.fromEvent(x.value,"mousedown"),n=o.fromEvent(g.value,"mousemove"),r=o.fromEvent(g.value,"mouseup"),s=o.fromEvent(g.value,"selectstart");t.pipe(o.map(()=>s.pipe(o.takeUntil(r),o.takeUntil(h),o.throttleTime(16))),o.concatAll()).subscribe(c=>c.preventDefault()),t.pipe(o.map(()=>n.pipe(o.takeUntil(r),o.takeUntil(h),o.throttleTime(16))),o.concatAll(),o.withLatestFrom(t),o.map(([c,b])=>{console.log("move!!!",c);const m=c,u=b,S=m.pageX-y.value.left-u.offsetX,M=m.pageY-y.value.top-u.offsetY,I=i.value.clientWidth,P=i.value.clientHeight;return{x:S>0?Math.min(S,I-z.value):Math.max(S,0),y:M>0?Math.min(M,P-T.value):Math.max(M,0)}})).subscribe(c=>{var b,m;if(a.type==="horizontal"){const u=W(c.x);c.x!==v.value&&l.value&&((b=l.value)==null||b.scrollTo({left:u})),v.value=c.x}else{const u=W(c.y);c.y!==f.value&&l.value&&((m=l.value)==null||m.scrollTo({top:u})),f.value=c.y}})},q=()=>{l.value&&o.fromEvent(l.value,"scroll").pipe(o.takeUntil(h)).subscribe(n=>{var s;const r=n.target;r&&a.type==="horizontal"&&(w=r.scrollLeft,v.value=k(w)),r&&a.type==="vertical"&&H!==((s=l==null?void 0:l.value)==null?void 0:s.scrollTop)&&(H=r.scrollTop,f.value=k(H))})},L=()=>{o.fromEvent(window,"resize").pipe(o.takeUntil(h)).subscribe(()=>{B(),e.nextTick(()=>{var n;y.value=(n=i.value)==null?void 0:n.getBoundingClientRect(),C()})})},j=()=>{console.log("targetEle.value",l.value),l.value&&x.value&&(B(),e.nextTick(()=>{var t;y.value=(t=i.value)==null?void 0:t.getBoundingClientRect(),C(),R(),q(),L()}))};e.onMounted(()=>{e.watch(()=>a.target,()=>{e.nextTick(()=>{var t,n;typeof a.target=="string"?l.value=document.querySelector(a.target):l.value=(t=a.target)==null?void 0:t.call(a),g.value=(n=document.getElementsByTagName("body"))==null?void 0:n[0],x.value=document.getElementById("bar"),j()})},{immediate:!0})}),e.onUnmounted(()=>{h.next(0)});const{b:N,e:D,m:_,em:U}=X.useNamespace("ap-scroll-bar");return(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:i,class:e.normalizeClass(`${e.unref(N)()} ${a.type==="horizontal"?e.unref(_)("horizontal"):e.unref(_)("vertical")}`),style:e.normalizeStyle({display:E.value?"none":"block"})},[e.createElementVNode("div",{id:"bar",class:e.normalizeClass(`${e.unref(D)("bar")} ${a.type==="horizontal"?e.unref(U)("bar","horizontal"):e.unref(U)("bar","vertical")}`),style:e.normalizeStyle(a.type==="horizontal"?{width:`${z.value}px`,left:`${v.value}px`}:{height:`${T.value}px`,top:`${f.value}px`})},null,6)],6))}});exports.default=Y;

package/lib/src/ap-scroll-bar/index.d.ts

@@ -1,29 +0,0 @@
-import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
-import { ApScrollBarProps } from './interface';
-export * from './interface';
-declare const ApScrollBar: {
-    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-        type: "horizontal" | "vertical";
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-        containerRef: HTMLDivElement;
-    }, HTMLDivElement, ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, {
-        type: "horizontal" | "vertical";
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & ComponentOptionsBase<Readonly< ApScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-    type: "horizontal" | "vertical";
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & ( Plugin & (new (...args: any[]) => {
-    $props: {
-        onClick?: () => void;
-    };
-}));
-export { ApScrollBar };

package/lib/src/ap-scroll-bar/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./interface.js");const e=require("@aplus-frontend/utils");require("./ap-scroll-bar.vue.js");const r=require("./ap-scroll-bar.vue2.js"),t=e.withInstall(r.default);exports.ApScrollBar=t;

package/lib/src/ap-scroll-bar/interface.d.ts

@@ -1,4 +0,0 @@
-export interface ApScrollBarProps {
-    target: string | (() => Element);
-    type?: 'horizontal' | 'vertical';
-}

package/lib/src/ap-scroll-bar/style/css.cjs

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

package/lib/src/ap-scroll-bar/style/index.cjs

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