@dt-frames/ui 2.0.1 → 2.0.3

package/es/components/container/index.js

@@ -0,0 +1,290 @@
+import { defineComponent, getCurrentInstance, ref, inject, computed, onUnmounted, h, provide, onMounted, nextTick, unref, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createVNode, mergeProps } from "vue";
+import { off, on } from "@dt-frames/core";
+const isServer = typeof window === "undefined";
+const BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${move}%)`;
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+  return style;
+}
+function resizeHandler(entries) {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach((fn) => {
+        fn();
+      });
+    }
+  }
+}
+function addResizeListener(element, fn) {
+  if (isServer)
+    return;
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
+  }
+  element.__resizeListeners__.push(fn);
+}
+function removeResizeListener(element, fn) {
+  if (!element || !element.__resizeListeners__)
+    return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
+  }
+}
+const Bar = defineComponent({
+  name: "Bar",
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = ref();
+    const wrap = inject("scroll-bar-wrap", {});
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
+    });
+    const barStore = ref({});
+    const cursorDown = ref();
+    const clickThumbHandler = (e) => {
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, "mousemove", mouseMoveDocumentHandler);
+      on(document, "mouseup", mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (cursorDown.value === false)
+        return;
+      const prevPage = barStore.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    function mouseUpDocumentHandler() {
+      cursorDown.value = false;
+      barStore.value[bar.value.axis] = 0;
+      off(document, "mousemove", mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+    onUnmounted(() => {
+      off(document, "mouseup", mouseUpDocumentHandler);
+    });
+    return () => h(
+      "div",
+      {
+        class: ["scrollbar__bar", "is-" + bar.value.key],
+        onMousedown: clickTrackHandler
+      },
+      h("div", {
+        ref: thumb,
+        class: "scrollbar__thumb",
+        onMousedown: clickThumbHandler,
+        style: renderThumbStyle({
+          size: props.size,
+          move: props.move,
+          bar: bar.value
+        })
+      })
+    );
+  }
+});
+const _hoisted_1 = { class: "scrollbar relative h-full overflow-hidden" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "scroll-bar",
+  props: {
+    wrapClass: {
+      type: [String, Array],
+      default: ""
+    },
+    wrapStyle: Array,
+    viewClass: {
+      type: [String, Array],
+      default: ""
+    },
+    viewStyle: {
+      type: [String, Array],
+      default: ""
+    },
+    noresize: Boolean,
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const sizeWidth = ref("0");
+    const sizeHeight = ref("0");
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const wrap = ref();
+    const resize = ref();
+    provide("scroll-bar-wrap", wrap);
+    const style = computed(() => {
+      let rsStyle = {};
+      if (Array.isArray(props.wrapStyle)) {
+        props.wrapStyle.forEach((it) => {
+          if (it)
+            rsStyle = Object.assign({}, rsStyle, it);
+        });
+      }
+      return rsStyle;
+    });
+    const handleScroll = () => {
+      moveY.value = unref(wrap).scrollTop * 100 / unref(wrap).clientHeight;
+      moveX.value = unref(wrap).scrollLeft * 100 / unref(wrap).clientWidth;
+    };
+    const update = () => {
+      if (!unref(wrap))
+        return;
+      const heightPercentage = unref(wrap).clientHeight * 100 / unref(wrap).scrollHeight;
+      const widthPercentage = unref(wrap).clientWidth * 100 / unref(wrap).scrollWidth;
+      sizeHeight.value = heightPercentage < 100 ? heightPercentage + "%" : "";
+      sizeWidth.value = widthPercentage < 100 ? widthPercentage + "%" : "";
+    };
+    onMounted(() => {
+      nextTick(update);
+      if (!props.noresize) {
+        addResizeListener(unref(resize), update);
+        addResizeListener(unref(wrap), update);
+        addEventListener("resize", update);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (!props.noresize) {
+        removeResizeListener(unref(resize), update);
+        removeResizeListener(unref(wrap), update);
+        removeEventListener("resize", update);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "wrap",
+          ref: wrap,
+          class: normalizeClass([[__props.wrapClass, "scrollbar__wrap--hidden-default"], "h-full overflow-auto"]),
+          style: normalizeStyle(unref(style)),
+          onScroll: handleScroll
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+            class: normalizeClass(["box-border", __props.viewClass]),
+            ref_key: "resize",
+            ref: resize,
+            style: normalizeStyle(__props.viewStyle)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style"]))
+        ], 38),
+        createVNode(unref(Bar), {
+          move: moveX.value,
+          size: sizeWidth.value
+        }, null, 8, ["move", "size"]),
+        createVNode(unref(Bar), {
+          vertical: "",
+          move: moveY.value,
+          size: sizeHeight.value
+        }, null, 8, ["move", "size"])
+      ]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "scroll-container",
+  setup(__props) {
+    const scrollbarRef = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+        ref_key: "scrollbarRef",
+        ref: scrollbarRef
+      }, _ctx.$attrs, { class: "w-full h-full" }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "slot-container",
+  props: {
+    template: {
+      type: Function
+    },
+    data: {
+      type: Object
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const Container = h("div", [props.template(props.data)]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Container));
+    };
+  }
+});
+const withInstall = (comp) => {
+  comp.install = (app) => {
+    app.component(comp.name, comp);
+  };
+  return comp;
+};
+const DtScrollContainer = withInstall(_sfc_main$1);
+const DtSlotContainer = withInstall(_sfc_main);
+export {
+  DtScrollContainer,
+  DtSlotContainer
+};

package/es/components/container/index.less

@@ -0,0 +1,64 @@
+.scrollbar {
+    // 滚动条样式
+    &__wrap--hidden-default{
+        scrollbar-width: none;
+    
+        &::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+            opacity: 0;
+        }
+    }
+
+    &__thumb {
+        position: relative;
+        display: block;
+        width: 0;
+        height: 0;
+        cursor: pointer;
+        background-color: rgba(144, 147, 153, 0.3);
+        border-radius: inherit;
+        transition: 0.3s background-color;
+    
+        &:hover {
+            background-color: rgba(144, 147, 153, 0.5);
+        }
+    }
+    
+    &__bar {
+        position: absolute;
+        right: 2px;
+        bottom: 2px;
+        z-index: 1;
+        border-radius: 4px;
+        opacity: 0;
+        -webkit-transition: opacity 80ms ease;
+        transition: opacity 80ms ease;
+    
+        &.is-vertical {
+            top: 2px;
+            width: 6px;
+    
+            & > div {
+                width: 100%;
+            }
+        }
+    
+        &.is-horizontal {
+            left: 2px;
+            height: 6px;
+    
+            & > div {
+                height: 100%;
+            }
+        }
+    }
+
+    &:active > &__bar,
+    &:focus > &__bar,
+    &:hover > &__bar {
+        opacity: 1;
+        transition: opacity 340ms ease-out;
+    }
+}

package/es/components/container/src/components/bar.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    vertical: BooleanConstructor;
+    size: StringConstructor;
+    move: NumberConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    vertical: BooleanConstructor;
+    size: StringConstructor;
+    move: NumberConstructor;
+}>>, {
+    vertical: boolean;
+}>;
+export default _default;

package/es/components/container/src/components/scroll-bar.d.ts

@@ -0,0 +1,70 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    wrapClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    wrapStyle: ArrayConstructor;
+    viewClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    viewStyle: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    noresize: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    sizeWidth: import("vue").Ref<string>;
+    sizeHeight: import("vue").Ref<string>;
+    moveX: import("vue").Ref<number>;
+    moveY: import("vue").Ref<number>;
+    wrap: import("vue").Ref<any>;
+    resize: import("vue").Ref<any>;
+    props: any;
+    style: import("vue").ComputedRef<{}>;
+    handleScroll: () => void;
+    update: () => void;
+    readonly Bar: import("vue").DefineComponent<{
+        vertical: BooleanConstructor;
+        size: StringConstructor;
+        move: NumberConstructor;
+    }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        vertical: BooleanConstructor;
+        size: StringConstructor;
+        move: NumberConstructor;
+    }>>, {
+        vertical: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    wrapClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    wrapStyle: ArrayConstructor;
+    viewClass: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    viewStyle: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    noresize: BooleanConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    wrapClass: string | unknown[];
+    viewClass: string | unknown[];
+    viewStyle: string | unknown[];
+    noresize: boolean;
+    tag: string;
+}>;
+export default _sfc_main;

package/es/components/container/src/hooks/scroll.d.ts

@@ -0,0 +1,10 @@
+export interface ScrollToParams {
+    el: any;
+    to: number;
+    duration?: number;
+    callback?: () => any;
+}
+export declare function useScrollTo({ el, to, duration, callback }: ScrollToParams): {
+    start: () => void;
+    stop: () => void;
+};

package/es/components/container/src/scroll-container.d.ts

@@ -0,0 +1,76 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    scrollbarRef: any;
+    scrollTo: (to: number, duration?: number) => void;
+    getScrollWrap: () => any;
+    scrollBottom: () => void;
+    ScrollBar: import("vue").DefineComponent<{
+        wrapClass: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        wrapStyle: ArrayConstructor;
+        viewClass: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        viewStyle: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        noresize: BooleanConstructor;
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, {
+        sizeWidth: import("vue").Ref<string>;
+        sizeHeight: import("vue").Ref<string>;
+        moveX: import("vue").Ref<number>;
+        moveY: import("vue").Ref<number>;
+        wrap: import("vue").Ref<any>;
+        resize: import("vue").Ref<any>;
+        props: any;
+        style: import("vue").ComputedRef<{}>;
+        handleScroll: () => void;
+        update: () => void;
+        readonly Bar: import("vue").DefineComponent<{
+            vertical: BooleanConstructor;
+            size: StringConstructor;
+            move: NumberConstructor;
+        }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+            vertical: BooleanConstructor;
+            size: StringConstructor;
+            move: NumberConstructor;
+        }>>, {
+            vertical: boolean;
+        }>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        wrapClass: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        wrapStyle: ArrayConstructor;
+        viewClass: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        viewStyle: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        noresize: BooleanConstructor;
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>>, {
+        wrapClass: string | unknown[];
+        viewClass: string | unknown[];
+        viewStyle: string | unknown[];
+        noresize: boolean;
+        tag: string;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/components/container/src/slot-container.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    template: {
+        type: FunctionConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}, {
+    props: any;
+    Container: Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    template: {
+        type: FunctionConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}>>, {}>;
+export default _sfc_main;

package/es/components/container/src/types/scroll.type.d.ts

@@ -0,0 +1,22 @@
+export interface BarMapItem {
+    offset: string;
+    scroll: string;
+    scrollSize: string;
+    size: string;
+    key: string;
+    axis: string;
+    client: string;
+    direction: string;
+}
+export interface BarMap {
+    vertical: BarMapItem;
+    horizontal: BarMapItem;
+}
+export interface ScrollbarType {
+    wrap: any;
+}
+export declare type BarStyle = {
+    bar: any;
+    size: String;
+    move: any;
+};

package/es/components/container/src/utils/scroll.d.ts

@@ -0,0 +1,5 @@
+import { BarMap, BarStyle } from "../types/scroll.type";
+export declare const BAR_MAP: BarMap;
+export declare function renderThumbStyle({ move, size, bar }: BarStyle): any;
+export declare function addResizeListener(element: any, fn: () => any): void;
+export declare function removeResizeListener(element: any, fn: () => any): void;

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

@@ -0,0 +1,2 @@
+import { useCurd } from "./src/hooks/useCurd";
+export { useCurd };