vft 0.0.48 → 0.0.51

package/es/components/scrollbar/index.d.ts

@@ -0,0 +1,113 @@
+export declare const VftScrollbar: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    height: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    maxHeight: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    native: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    wrapStyle: {
+        type: import("vue").PropType<import("vue").StyleValue | undefined>;
+        required: false;
+    };
+    wrapClass: {
+        type: import("vue").PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewClass: {
+        type: import("vue").PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewStyle: {
+        type: import("vue").PropType<import("vue").StyleValue | undefined>;
+        required: false;
+    };
+    noresize: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    tag: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    always: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    minSize: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+}, {
+    wrapRef: import("vue").Ref<HTMLDivElement | undefined>;
+    update: () => void;
+    scrollTo: (arg1: unknown, arg2?: number | undefined) => void;
+    setScrollTop: (value: number) => void;
+    setScrollLeft: (value: number) => void;
+    handleScroll: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: ({ scrollTop, scrollLeft }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    height: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    maxHeight: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    native: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    wrapStyle: {
+        type: import("vue").PropType<import("vue").StyleValue | undefined>;
+        required: false;
+    };
+    wrapClass: {
+        type: import("vue").PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewClass: {
+        type: import("vue").PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewStyle: {
+        type: import("vue").PropType<import("vue").StyleValue | undefined>;
+        required: false;
+    };
+    noresize: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    tag: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    always: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    minSize: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+}>> & {
+    onScroll?: ((args_0: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => any) | undefined;
+}, {}>> & Record<string, any>;
+export default VftScrollbar;
+export * from './util';
+export * from './scrollbar.vue';
+export * from './thumb.vue';
+export * from './constants';

package/es/components/scrollbar/index.js

@@ -0,0 +1,23 @@
+import { withInstall as r } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import o from "./scrollbar.vue2.js";
+import { BAR_MAP as d, GAP as h, renderThumbStyle as u } from "./util.js";
+import "../config-provider/hooks/use-global-config.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { scrollbarContextKey as P } from "./constants.js";
+const b = r(o);
+export {
+  d as BAR_MAP,
+  h as GAP,
+  b as VftScrollbar,
+  b as default,
+  u as renderThumbStyle,
+  P as scrollbarContextKey
+};

package/es/components/scrollbar/scrollbar.vue.d.ts

@@ -0,0 +1,163 @@
+import type { PropType as __PropType } from 'vue';
+import type { StyleValue } from 'vue';
+export interface ScrollbarProps {
+    /**
+     * @description height of scrollbar
+     */
+    height?: string | number;
+    /**
+     * @description max height of scrollbar
+     */
+    maxHeight?: string | number;
+    /**
+     * @description whether to use the native scrollbar
+     */
+    native?: boolean;
+    /**
+     * @description style of wrap
+     */
+    wrapStyle?: StyleValue;
+    /**
+     * @description class of wrap
+     */
+    wrapClass?: string | Array<any>;
+    /**
+     * @description class of view
+     */
+    viewClass?: string | Array<any>;
+    /**
+     * @description style of view
+     */
+    viewStyle?: StyleValue;
+    /**
+     * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
+     */
+    noresize?: boolean;
+    /**
+     * @description element tag of the view
+     */
+    tag?: string;
+    /**
+     * @description always show
+     */
+    always?: boolean;
+    /**
+     * @description minimum size of scrollbar
+     */
+    minSize?: number;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    height: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+    };
+    maxHeight: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+    };
+    native: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    wrapStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    wrapClass: {
+        type: __PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewClass: {
+        type: __PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    noresize: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    tag: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    always: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    minSize: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}, {
+    /** @description scrollbar wrap ref */
+    wrapRef: import("vue").Ref<HTMLDivElement | undefined>;
+    /** @description update scrollbar state manually */
+    update: () => void;
+    /** @description scrolls to a particular set of coordinates */
+    scrollTo: (arg1: unknown, arg2?: number) => void;
+    /** @description set distance to scroll top */
+    setScrollTop: (value: number) => void;
+    /** @description set distance to scroll left */
+    setScrollLeft: (value: number) => void;
+    /** @description handle scroll event */
+    handleScroll: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: ({ scrollTop, scrollLeft }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    height: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+    };
+    maxHeight: {
+        type: __PropType<string | number | undefined>;
+        required: false;
+    };
+    native: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    wrapStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    wrapClass: {
+        type: __PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewClass: {
+        type: __PropType<string | any[] | undefined>;
+        required: false;
+    };
+    viewStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    noresize: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    tag: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    always: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    minSize: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}>> & {
+    onScroll?: ((args_0: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/es/components/scrollbar/scrollbar.vue.js

@@ -0,0 +1,4 @@
+import f from "./scrollbar.vue2.js";
+export {
+  f as default
+};

package/es/components/scrollbar/scrollbar.vue2.js

@@ -0,0 +1,154 @@
+import { defineComponent as $, ref as o, computed as g, watch as E, nextTick as N, provide as D, reactive as G, onMounted as X, onUpdated as Y, openBlock as b, createElementBlock as q, normalizeClass as S, unref as m, createElementVNode as F, normalizeStyle as R, createBlock as B, resolveDynamicComponent as I, withCtx as J, renderSlot as Q, createCommentVNode as Z } from "vue";
+import { useResizeObserver as _, useEventListener as ee } from "@vueuse/core";
+import { isNumber as r, addUnit as W, isObject as te } from "@vft/utils";
+import { useNamespace as le } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import { debugWarn as M } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { GAP as d } from "./util.js";
+import ae from "./bar.vue2.js";
+import { scrollbarContextKey as oe } from "./constants.js";
+const L = "ElScrollbar", s = (
+  /* hoist-static*/
+  le("scrollbar")
+), ie = $({
+  name: s.b()
+}), Se = /* @__PURE__ */ $({
+  ...ie,
+  props: {
+    height: { default: "" },
+    maxHeight: { default: "" },
+    native: { type: Boolean, default: !1 },
+    wrapStyle: { default: "" },
+    wrapClass: { default: "" },
+    viewClass: { default: "" },
+    viewStyle: { default: "" },
+    noresize: { type: Boolean },
+    tag: { default: "div" },
+    always: { type: Boolean },
+    minSize: { default: 20 }
+  },
+  emits: {
+    scroll: ({
+      scrollTop: t,
+      scrollLeft: v
+    }) => [t, v].every(r)
+  },
+  setup(t, { expose: v, emit: K }) {
+    let n, c;
+    const x = o(), l = o(), z = o(), C = o("0"), H = o("0"), h = o(), k = o(1), T = o(1), O = g(() => {
+      const e = {};
+      return t.height && (e.height = W(t.height)), t.maxHeight && (e.maxHeight = W(t.maxHeight)), [t.wrapStyle, e];
+    }), A = g(() => [
+      t.wrapClass,
+      s.e("wrap"),
+      { [s.em("wrap", "hidden-default")]: !t.native }
+    ]), P = g(() => [s.e("view"), t.viewClass]), p = () => {
+      var e;
+      l.value && ((e = h.value) == null || e.handleScroll(l.value), K("scroll", {
+        scrollTop: l.value.scrollTop,
+        scrollLeft: l.value.scrollLeft
+      }));
+    };
+    function U(e, a) {
+      te(e) ? l.value.scrollTo(e) : r(e) && r(a) && l.value.scrollTo(e, a);
+    }
+    const V = (e) => {
+      if (!r(e)) {
+        M(L, "value must be a number");
+        return;
+      }
+      l.value.scrollTop = e;
+    }, j = (e) => {
+      if (!r(e)) {
+        M(L, "value must be a number");
+        return;
+      }
+      l.value.scrollLeft = e;
+    }, i = () => {
+      if (!l.value)
+        return;
+      const e = l.value.offsetHeight - d, a = l.value.offsetWidth - d, y = e ** 2 / l.value.scrollHeight, w = a ** 2 / l.value.scrollWidth, f = Math.max(y, t.minSize), u = Math.max(w, t.minSize);
+      k.value = y / (e - y) / (f / (e - f)), T.value = w / (a - w) / (u / (a - u)), H.value = f + d < e ? `${f}px` : "", C.value = u + d < a ? `${u}px` : "";
+    };
+    return E(
+      () => t.noresize,
+      (e) => {
+        e ? (n == null || n(), c == null || c()) : ({ stop: n } = _(z, i), c = ee("resize", i));
+      },
+      { immediate: !0 }
+    ), E(
+      () => [t.maxHeight, t.height],
+      () => {
+        t.native || N(() => {
+          var e;
+          i(), l.value && ((e = h.value) == null || e.handleScroll(l.value));
+        });
+      }
+    ), D(
+      oe,
+      G({
+        scrollbarElement: x,
+        wrapElement: l
+      })
+    ), X(() => {
+      t.native || N(() => {
+        i();
+      });
+    }), Y(() => i()), v({
+      /** @description scrollbar wrap ref */
+      wrapRef: l,
+      /** @description update scrollbar state manually */
+      update: i,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo: U,
+      /** @description set distance to scroll top */
+      setScrollTop: V,
+      /** @description set distance to scroll left */
+      setScrollLeft: j,
+      /** @description handle scroll event */
+      handleScroll: p
+    }), (e, a) => (b(), q("div", {
+      ref_key: "scrollbarRef",
+      ref: x,
+      class: S(m(s).b())
+    }, [
+      F("div", {
+        ref_key: "wrapRef",
+        ref: l,
+        class: S(m(A)),
+        style: R(m(O)),
+        onScroll: p
+      }, [
+        (b(), B(I(t.tag), {
+          ref_key: "resizeRef",
+          ref: z,
+          class: S(m(P)),
+          style: R(t.viewStyle)
+        }, {
+          default: J(() => [
+            Q(e.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["class", "style"]))
+      ], 38),
+      t.native ? Z("", !0) : (b(), B(ae, {
+        key: 0,
+        ref_key: "barRef",
+        ref: h,
+        height: H.value,
+        width: C.value,
+        always: t.always,
+        "ratio-x": T.value,
+        "ratio-y": k.value
+      }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"]))
+    ], 2));
+  }
+});
+export {
+  Se as default
+};

package/es/components/scrollbar/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-scrollbar.css";

package/es/components/scrollbar/style/index.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/scrollbar.scss";

package/es/components/scrollbar/thumb.vue.d.ts

@@ -0,0 +1,52 @@
+import type { PropType as __PropType } from 'vue';
+export interface ThumbProps {
+    vertical?: boolean;
+    size?: string;
+    move?: number;
+    ratio: number;
+    always?: boolean;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    vertical: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    move: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    ratio: {
+        type: __PropType<number>;
+        required: true;
+    };
+    always: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    vertical: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    move: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    ratio: {
+        type: __PropType<number>;
+        required: true;
+    };
+    always: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>>, {}>;
+export default _sfc_main;

package/es/components/scrollbar/thumb.vue.js

@@ -0,0 +1,4 @@
+import f from "./thumb.vue2.js";
+export {
+  f as default
+};

package/es/components/scrollbar/thumb.vue2.js

@@ -0,0 +1,113 @@
+import { defineComponent as T, inject as D, ref as v, computed as E, onBeforeUnmount as N, toRef as S, openBlock as A, createBlock as O, Transition as j, unref as u, withCtx as K, withDirectives as U, createElementVNode as z, normalizeClass as C, normalizeStyle as I, vShow as V } from "vue";
+import { useEventListener as P, isClient as _ } from "@vueuse/core";
+import "@vft/utils";
+import { throwError as q } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { useNamespace as F } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { scrollbarContextKey as G } from "./constants.js";
+import { BAR_MAP as J, renderThumbStyle as Q } from "./util.js";
+const W = "Thumb", ce = /* @__PURE__ */ T({
+  __name: "thumb",
+  props: {
+    vertical: { type: Boolean },
+    size: null,
+    move: null,
+    ratio: null,
+    always: { type: Boolean }
+  },
+  setup(a) {
+    const o = D(G), c = F("scrollbar");
+    o || q(W, "can not inject scrollbar context");
+    const n = v(), r = v(), f = v({}), i = v(!1);
+    let m = !1, d = !1, b = _ ? document.onselectstart : null;
+    const e = E(() => J[a.vertical ? "vertical" : "horizontal"]), k = E(
+      () => Q({
+        size: a.size,
+        move: a.move,
+        bar: e.value
+      })
+    ), g = E(
+      () => (
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        n.value[e.value.offset] ** 2 / o.wrapElement[e.value.scrollSize] / a.ratio / r.value[e.value.offset]
+      )
+    ), B = (t) => {
+      var s;
+      if (t.stopPropagation(), t.ctrlKey || [1, 2].includes(t.button))
+        return;
+      (s = window.getSelection()) == null || s.removeAllRanges(), L(t);
+      const l = t.currentTarget;
+      l && (f.value[e.value.axis] = l[e.value.offset] - (t[e.value.client] - l.getBoundingClientRect()[e.value.direction]));
+    }, x = (t) => {
+      if (!r.value || !n.value || !o.wrapElement)
+        return;
+      const l = Math.abs(
+        t.target.getBoundingClientRect()[e.value.direction] - t[e.value.client]
+      ), s = r.value[e.value.offset] / 2, h = (l - s) * 100 * g.value / n.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = h * o.wrapElement[e.value.scrollSize] / 100;
+    }, L = (t) => {
+      t.stopImmediatePropagation(), m = !0, document.addEventListener("mousemove", w), document.addEventListener("mouseup", p), b = document.onselectstart, document.onselectstart = () => !1;
+    }, w = (t) => {
+      if (!n.value || !r.value || m === !1)
+        return;
+      const l = f.value[e.value.axis];
+      if (!l)
+        return;
+      const s = (n.value.getBoundingClientRect()[e.value.direction] - t[e.value.client]) * -1, h = r.value[e.value.offset] - l, R = (s - h) * 100 * g.value / n.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = R * o.wrapElement[e.value.scrollSize] / 100;
+    }, p = () => {
+      m = !1, f.value[e.value.axis] = 0, document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", p), y(), d && (i.value = !1);
+    }, M = () => {
+      d = !1, i.value = !!a.size;
+    }, H = () => {
+      d = !0, i.value = m;
+    };
+    N(() => {
+      y(), document.removeEventListener("mouseup", p);
+    });
+    const y = () => {
+      document.onselectstart !== b && (document.onselectstart = b);
+    };
+    return P(
+      S(o, "scrollbarElement"),
+      "mousemove",
+      M
+    ), P(
+      S(o, "scrollbarElement"),
+      "mouseleave",
+      H
+    ), (t, l) => (A(), O(j, {
+      name: u(c).b("fade")
+    }, {
+      default: K(() => [
+        U(z("div", {
+          ref_key: "instance",
+          ref: n,
+          class: C([u(c).e("bar"), u(c).is(u(e).key)]),
+          onMousedown: x
+        }, [
+          z("div", {
+            ref_key: "thumb",
+            ref: r,
+            class: C(u(c).e("thumb")),
+            style: I(u(k)),
+            onMousedown: B
+          }, null, 38)
+        ], 34), [
+          [V, a.always || i.value]
+        ])
+      ]),
+      _: 1
+    }, 8, ["name"]));
+  }
+});
+export {
+  ce as default
+};

package/es/components/scrollbar/types.d.ts

@@ -0,0 +1,2 @@
+import type Bar from './bar.vue';
+export type BarInstance = InstanceType<typeof Bar>;

package/es/components/scrollbar/types.js

@@ -0,0 +1 @@
+

package/es/components/scrollbar/util.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'vue';
+import type { ThumbProps } from './thumb.vue';
+export declare const GAP = 4;
+export declare const BAR_MAP: {
+    readonly vertical: {
+        readonly offset: "offsetHeight";
+        readonly scroll: "scrollTop";
+        readonly scrollSize: "scrollHeight";
+        readonly size: "height";
+        readonly key: "vertical";
+        readonly axis: "Y";
+        readonly client: "clientY";
+        readonly direction: "top";
+    };
+    readonly horizontal: {
+        readonly offset: "offsetWidth";
+        readonly scroll: "scrollLeft";
+        readonly scrollSize: "scrollWidth";
+        readonly size: "width";
+        readonly key: "horizontal";
+        readonly axis: "X";
+        readonly client: "clientX";
+        readonly direction: "left";
+    };
+};
+export declare const renderThumbStyle: ({ move, size, bar }: Pick<ThumbProps, "size" | "move"> & {
+    bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
+}) => CSSProperties;