@dt-frames/ui 3.0.1 → 4.0.1

package/es/components/container/index.js

@@ -1,367 +0,0 @@
-import { ref, unref, defineComponent, getCurrentInstance, inject, computed, onUnmounted, h, provide, onMounted, nextTick, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createVNode, mergeProps } from "vue";
-import { isWindow, off, on, withInstall } from "@dt-frames/core";
-const easeInOutQuad = (t, b, c, d) => {
-  t /= d / 2;
-  if (t < 1) {
-    return c / 2 * t * t + b;
-  }
-  t--;
-  return -c / 2 * (t * (t - 2) - 1) + b;
-};
-const move = (el, amount) => {
-  el.scrollTop = amount;
-};
-const position = (el) => {
-  return el.scrollTop;
-};
-function useScrollTo({ el, to, duration = 500, callback }) {
-  const isActiveRef = ref(false);
-  const start = position(el);
-  const change = to - start;
-  const increment = 20;
-  let currentTime = 0;
-  const animateScroll = function() {
-    if (!unref(isActiveRef))
-      return;
-    currentTime += increment;
-    const val = easeInOutQuad(currentTime, start, change, duration);
-    move(el, val);
-    if (currentTime < duration && unref(isActiveRef)) {
-      requestAnimationFrame(animateScroll);
-    } else {
-      if (callback && typeof callback === "function") {
-        callback();
-      }
-    }
-  };
-  const run = () => {
-    isActiveRef.value = true;
-    animateScroll();
-  };
-  const stop = () => {
-    isActiveRef.value = false;
-  };
-  return { start: run, stop };
-}
-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: move2, size, bar }) {
-  const style = {};
-  const translate = `translate${bar.axis}(${move2}%)`;
-  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 (!isWindow())
-    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" };
-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(style.value),
-          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, { expose: __expose }) {
-    const scrollbarRef = ref(null);
-    function scrollTo(to, duration = 500) {
-      const scrollbar = unref(scrollbarRef);
-      if (!scrollbar)
-        return;
-      nextTick(() => {
-        const wrap = unref(scrollbar.wrap);
-        if (!wrap)
-          return;
-        const { start } = useScrollTo({
-          el: wrap,
-          to,
-          duration
-        });
-        start();
-      });
-    }
-    function getScrollWrap() {
-      const scrollbar = unref(scrollbarRef);
-      return !scrollbar ? null : scrollbar.wrap;
-    }
-    function scrollBottom() {
-      const scrollbar = unref(scrollbarRef);
-      if (!scrollbar)
-        return;
-      nextTick(() => {
-        const wrap = unref(scrollbar.wrap);
-        if (!wrap)
-          return;
-        const scrollHeight = wrap.scrollHeight;
-        const { start } = useScrollTo({
-          el: wrap,
-          to: scrollHeight
-        });
-        start();
-      });
-    }
-    __expose({
-      scrollTo,
-      getScrollWrap,
-      scrollBottom
-    });
-    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 DtScrollContainer = withInstall(_sfc_main$1);
-const DtSlotContainer = withInstall(_sfc_main);
-export {
-  DtScrollContainer,
-  DtSlotContainer
-};

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

@@ -1,14 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    vertical: BooleanConstructor;
-    size: StringConstructor;
-    move: NumberConstructor;
-}, () => globalThis.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/hooks/scroll.d.ts

@@ -1,10 +0,0 @@
-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/index.scss

@@ -1,57 +0,0 @@
-.scrollbar{
-    @apply relative h-full overflow-hidden;
-
-    // 滚动条样式
-    &__wrap--hidden-default {
-        scrollbar-width: none;
-    
-        &::-webkit-scrollbar {
-            @apply hidden w-0 h-0 opacity-0;
-        }
-    }
-
-    &__thumb {
-        @apply relative block w-0 h-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 {
-        @apply absolute rounded-xl opacity-0;
-        right: 2px;
-        bottom: 2px;
-        z-index: 1;
-        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/types/index.d.ts

@@ -1,22 +0,0 @@
-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

@@ -1,5 +0,0 @@
-import { BarMap, BarStyle } from "../types/index";
-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

@@ -1,4 +0,0 @@
-import { useCurd } from './src/hooks/useCurd';
-import { CurdActionType } from './src/types/curd.type';
-export { useCurd };
-export type { CurdActionType };

package/es/components/curd/index.js

@@ -1,141 +0,0 @@
-import { ref, useSlots, unref, h, createVNode, mergeProps, isVNode } from "vue";
-import { useI18n, isFunction, message, confirm, error } from "@dt-frames/core";
-import { useModalOut, DtModal } from "../modal";
-import { DtForm } from "../form";
-import { useForm } from "@dt-frames/ui";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-function useCurd(opt) {
-  const [register, {
-    openModal,
-    closeModal,
-    setModalProps
-  }, visiabled] = useModalOut();
-  const {
-    t
-  } = useI18n("UI");
-  const {
-    formProps,
-    schemas,
-    title: _title,
-    titlePrefix = true
-  } = opt;
-  const [registerForm, curdFormMethods] = useForm({
-    ...formProps || {},
-    schemas,
-    mode: "dialog"
-  });
-  const oriTitle = isFunction(_title) ? _title() : _title;
-  const title = ref(oriTitle);
-  const DtCurdModal = () => {
-    const slots = useSlots();
-    return unref(visiabled) ? h(createVNode("div", {
-      "class": "dt-curd-modal"
-    }, [createVNode(DtModal, mergeProps(opt, {
-      "title": unref(title),
-      "onRegister": register
-    }), {
-      default: () => [createVNode(DtForm, {
-        "onRegister": registerForm
-      }, _isSlot(slots) ? slots : {
-        default: () => [slots]
-      })]
-    })])) : "";
-  };
-  function openAddDialog() {
-    const {
-      afterClose
-    } = opt;
-    title.value = (titlePrefix ? t("ADD") + " - " : "") + unref(oriTitle);
-    openModal({}, (data) => {
-      afterClose && afterClose({
-        data,
-        type: "ADD"
-      });
-    });
-  }
-  function del(row) {
-    const {
-      primaryKey = "id",
-      onDeletes
-    } = opt;
-    if (onDeletes && isFunction(onDeletes)) {
-      onDeletes([row[primaryKey]]);
-    }
-  }
-  function openEditDialog(row) {
-    const {
-      primaryKey = "id",
-      onQueryById,
-      afterClose,
-      defaultFormValue = {},
-      formProps: formProps2 = {}
-    } = opt;
-    title.value = (titlePrefix ? t("EDIT") + " - " : "") + oriTitle;
-    openModal({
-      ...opt,
-      title
-    }, (data) => {
-      afterClose && afterClose({
-        data,
-        type: "EDIT"
-      });
-    });
-    const model = {
-      ...defaultFormValue,
-      ...formProps2.model ?? {}
-    };
-    if (onQueryById && isFunction(onQueryById)) {
-      onQueryById(row[primaryKey]).then((rsp) => {
-        curdFormMethods.setFormValues({
-          ...rsp,
-          ...model
-        });
-      });
-    } else {
-      curdFormMethods.setFormValues({
-        ...model
-      });
-    }
-  }
-  function dels(ids = []) {
-    if (!ids.length) {
-      message.error(t("EMPTY"));
-      return;
-    }
-    const {
-      onDeletes
-    } = opt;
-    if (onDeletes && isFunction(onDeletes)) {
-      confirm({
-        title: t("MULTIFY_DELETE_CONFIRM"),
-        content: t("CONFIRM_MULTIFY_DELETE", {
-          length: ids.length
-        }),
-        iconType: "warning",
-        onOk() {
-          onDeletes(ids);
-        }
-      });
-    } else {
-      error(t("NEED_CURD"));
-    }
-  }
-  const instance = {
-    openAddDialog,
-    del,
-    openEditDialog,
-    dels,
-    closeModal,
-    setModalProps,
-    beforeSave: opt.beforeSave,
-    afterClose: opt.afterClose,
-    ...curdFormMethods
-  };
-  opt.registerInstance && opt.registerInstance(instance);
-  return [DtCurdModal, instance];
-}
-export {
-  useCurd
-};

package/es/components/curd/src/components/props.d.ts

@@ -1,53 +0,0 @@
-import { ButtonProps, FormSchema } from '../../../form';
-import { Key } from 'ant-design-vue/es/table/interface';
-import { CurdActionType } from './types/curd.type';
-export declare const basicProps: {
-    t: {
-        type: StringConstructor;
-    };
-    title: {
-        type: globalThis.PropType<String | globalThis.ComputedRef<String> | globalThis.Ref<String> | ((data: Recordable) => String)>;
-    };
-    width: {
-        type: globalThis.PropType<String | Number>;
-        default: string;
-    };
-    schemas: {
-        type: globalThis.PropType<FormSchema[]>;
-        default: () => any[];
-    };
-    footer: {
-        type: globalThis.PropType<ButtonProps[]>;
-        default: any;
-    };
-    authPrefix: {
-        type: StringConstructor;
-    };
-    showFullscreen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showClosable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    primaryKey: {
-        type: globalThis.PropType<String | Number>;
-        default: string;
-    };
-    onSave: {
-        type: globalThis.PropType<() => void>;
-        default: () => {};
-    };
-    onDeletes: {
-        type: globalThis.PropType<(keys: Key[]) => void>;
-        default: (keys: Key[]) => {};
-    };
-    onQueryById: {
-        type: globalThis.PropType<(id: Key) => Promise<any>>;
-        default: (id: Key) => {};
-    };
-    registerInstance: {
-        type: globalThis.PropType<(instance: CurdActionType) => void>;
-    };
-};

package/es/components/curd/src/components/types/curd.type.d.ts

@@ -1,13 +0,0 @@
-import { PropType, ExtractPropTypes } from 'vue';
-import { Recordable } from '@dt-frames/core';
-import { basicProps } from '../props';
-import { FormActionType } from '../../../../form';
-export type CurdActionType = {
-    openAddDialog: () => void;
-    del: (row: Recordable) => void;
-    dels: (ids: PropType<String | Number>[]) => void;
-    openUpdateDialog: (row: Recordable) => void;
-    closeModal: () => void;
-    setModalProps: (props: Partial<ExtractPropTypes<typeof basicProps>>) => void;
-    curdFormMethods: FormActionType;
-};

package/es/components/curd/src/hooks/useCurd.d.ts

@@ -1,3 +0,0 @@
-import { FunctionalComponent } from 'vue';
-import { CurdActionType, CurdType } from '../types/curd.type';
-export declare function useCurd(opt: CurdType): (CurdActionType | FunctionalComponent<{}, {}, any>)[];