@dt-frames/ui 2.0.10 → 2.0.12

package/es/components/drawer/index.js

@@ -1,297 +1,12 @@
-import { Button, FormItem, Col, Drawer } from "ant-design-vue/es";
+import { Drawer } from "ant-design-vue/es";
 import "ant-design-vue/es/drawer/style";
-import { defineComponent, getCurrentInstance, ref, inject, computed, onUnmounted, h, provide, onMounted, nextTick as nextTick$1, unref, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createVNode, mergeProps, toDisplayString, watch, resolveDirective, normalizeProps, Fragment, renderList, withDirectives, createCommentVNode, createTextVNode, useAttrs, toRaw, createSlots, guardReactiveProps, reactive, watchEffect } from "vue";
-import { off, on, useI18n, dispatchResize, isFunction, DtCache, CacheKey, deepMerge, isUnDef, useApp, isObject, error } from "@dt-frames/core";
-import "ant-design-vue/es/col/style";
-import "ant-design-vue/es/form/style";
-import "ant-design-vue/es/button/style";
-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$3 = { class: "scrollbar relative h-full overflow-hidden" };
-const _sfc_main$6 = /* @__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$1(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$3, [
-        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$5 = /* @__PURE__ */ defineComponent({
-  __name: "scroll-container",
-  setup(__props) {
-    const scrollbarRef = ref(null);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$6, mergeProps({
-        ref_key: "scrollbarRef",
-        ref: scrollbarRef
-      }, _ctx.$attrs, { class: "w-full h-full" }), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-const _sfc_main$4 = /* @__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$5);
-withInstall(_sfc_main$4);
-const _hoisted_1$2 = { class: "flex h-full items-center" };
-const _hoisted_2$1 = { class: "pr-12" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot, computed, createVNode, unref, useAttrs, ref, toRaw, getCurrentInstance, watch, createBlock, mergeProps, createSlots, withCtx, normalizeStyle, renderList, normalizeProps, guardReactiveProps, reactive, watchEffect, onUnmounted } from "vue";
+import { useI18n, DtCache, CacheKey, deepMerge, isUnDef, isFunction, useApp, isObject, error } from "@dt-frames/core";
+import { DtScrollContainer } from "../container";
+import { DtFormButtons } from "../form";
+const _hoisted_1$1 = { class: "flex h-full items-center" };
+const _hoisted_2 = { class: "pr-12" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "DrawerHeader",
   props: {
     title: {
@@ -300,174 +15,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createElementVNode("span", null, toDisplayString(__props.title), 1),
-        createElementVNode("span", _hoisted_2$1, [
+        createElementVNode("span", _hoisted_2, [
           renderSlot(_ctx.$slots, "titleToolbar")
         ])
       ]);
     };
   }
 });
-const _hoisted_1$1 = {
-  key: 0,
-  className: "preIcon pr-1"
-};
-const _hoisted_2 = {
-  key: 0,
-  className: "preIcon pl-1"
-};
-const _hoisted_3 = { class: "text" };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "text-2xl i ic:baseline-arrow-drop-down" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
-];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "FormButtons",
-  props: {
-    mode: {
-      type: String,
-      default: "search"
-    },
-    show: {
-      type: Boolean,
-      default: true
-    },
-    showAdvancedButton: {
-      type: Boolean,
-      default: true
-    },
-    minShowColumn: {
-      type: Number,
-      default: 2
-    },
-    buttonList: {
-      type: [Array],
-      default: []
-    },
-    isAdvanced: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["handle-method"],
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const { t } = useI18n();
-    const advancedRef = ref(props.isAdvanced);
-    let key = 0;
-    const showAdvanceRef = computed(() => {
-      return props.mode === "search" ? props.showAdvancedButton : false;
-    });
-    const colOpt = computed(() => {
-      let style = {
-        textAlign: "right"
-      };
-      if (props.mode === "dialog") {
-        Object.assign(style, {
-          display: "inline-block"
-        });
-      }
-      return { style };
-    });
-    const getAdvanceClass = computed(() => {
-      return [
-        "basic-arrow",
-        { "basic-arrow--active": !advancedRef.value }
-      ];
-    });
-    const toggleAdvanced = () => {
-      advancedRef.value = !advancedRef.value;
-      dispatchResize();
-      emits("handle-method", advancedRef.value);
-    };
-    function handleBtnClick(button) {
-      if (button.onClick && isFunction(button.onClick)) {
-        button.onClick();
-      } else {
-        emits("handle-method", button);
-      }
-    }
-    watch(() => props.isAdvanced, (v) => {
-      if (v) {
-        nextTick$1(() => toggleAdvanced());
-      }
-    }, {
-      immediate: true
-    });
-    watch(
-      () => props.buttonList,
-      (v) => key = new Date().getTime(),
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-    return (_ctx, _cache) => {
-      const _component_AButton = Button;
-      const _component_AFormItem = FormItem;
-      const _component_ACol = Col;
-      const _directive_icon = resolveDirective("icon");
-      const _directive_auth = resolveDirective("auth");
-      return __props.show ? (openBlock(), createBlock(_component_ACol, normalizeProps(mergeProps({ key: 0 }, unref(colOpt))), {
-        default: withCtx(() => [
-          createVNode(_component_AFormItem, {
-            class: "dt-form-btns",
-            style: normalizeStyle({
-              "margin-bottom": __props.mode === "search" ? "16px" : "0px"
-            })
-          }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttonList, (button) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  (button.show === void 0 ? true : button.show) ? withDirectives((openBlock(), createBlock(_component_AButton, {
-                    type: button.type,
-                    class: normalizeClass(button.class),
-                    loading: button.loading,
-                    disabled: button.disabled,
-                    key: unref(key),
-                    onClick: ($event) => handleBtnClick(button)
-                  }, {
-                    icon: withCtx(() => [
-                      button.preIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$1, null, 512)), [
-                        [_directive_icon, button.preIcon]
-                      ]) : createCommentVNode("", true)
-                    ]),
-                    default: withCtx(() => [
-                      createTextVNode(" " + toDisplayString(unref(t)(button.label)) + " ", 1),
-                      button.postIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2, null, 512)), [
-                        [_directive_icon, button.postIcon]
-                      ]) : createCommentVNode("", true)
-                    ]),
-                    _: 2
-                  }, 1032, ["type", "class", "loading", "disabled", "onClick"])), [
-                    [_directive_auth, button.auth]
-                  ]) : createCommentVNode("", true)
-                ], 64);
-              }), 256)),
-              unref(showAdvanceRef) ? (openBlock(), createBlock(_component_AButton, {
-                key: 0,
-                type: "link",
-                class: "advanced",
-                onClick: toggleAdvanced
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("span", _hoisted_3, toDisplayString(advancedRef.value ? unref(t)("UI.ADVANCED") : unref(t)("UI.EXPAND")), 1),
-                  createElementVNode("span", {
-                    class: normalizeClass(unref(getAdvanceClass))
-                  }, _hoisted_5, 2)
-                ]),
-                _: 1
-              })) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["style"])
-        ]),
-        _: 1
-      }, 16)) : createCommentVNode("", true);
-    };
-  }
-});
 const _hoisted_1 = {
   class: "flex items-center",
   style: { gap: "10px" }
@@ -492,8 +48,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (props.buttons && props.buttons.length)
         return props.buttons;
       let buttonActions = [
-        { t: "\u4FDD\u5B58", label: props.okText || t("SAVE"), preIcon: "mdi:content-save", type: "primary", flag: "OK" },
-        { t: "\u5173\u95ED", label: props.cancelText || t("CLOSE"), preIcon: "mdi:close", flag: "CANCEL" }
+        { t: "\u5173\u95ED", label: props.cancelText || t("CLOSE"), preIcon: "mdi:close", flag: "CANCEL" },
+        { t: "\u4FDD\u5B58", label: props.okText || t("SAVE"), preIcon: "mdi:content-save", type: "primary", flag: "OK" }
       ];
       if (!props.showSave)
         buttonActions = buttonActions.filter((btn) => btn.flag !== "OK");
@@ -514,7 +70,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         renderSlot(_ctx.$slots, "appendFooter"),
-        createVNode(_sfc_main$2, {
+        createVNode(unref(DtFormButtons), {
           mode: "dialog",
           buttonList: unref(buttonList),
           onHandleMethod: _cache[0] || (_cache[0] = ($event) => handleMethod($event))
@@ -597,16 +153,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         visible: unref(visibleRef),
         bodyStyle: {
           padding: 0
+        },
+        style: {
+          position: "absolute"
         }
       };
       const { getContainer, width } = opt;
-      if (!getContainer) {
+      if (isUnDef(getContainer)) {
         opt = {
           ...opt,
           getContainer: ".dt-layout-content",
-          style: {
-            position: "absolute"
-          },
           width: width || "100%"
         };
       } else {
@@ -679,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         !_ctx.$slots.title ? {
           name: "title",
           fn: withCtx(() => [
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$2, {
               title: unref(getProps).title
             }, {
               titleToolbar: withCtx(() => [
@@ -830,6 +386,12 @@ function useDrawer(props, setModalData) {
   };
   return [register, methods];
 }
+const withInstall = (comp) => {
+  comp.install = (app) => {
+    app.component(comp.name, comp);
+  };
+  return comp;
+};
 const DtDrawer = withInstall(_sfc_main);
 export {
   DtDrawer,

package/es/components/drawer/src/components/DrawerFooter.d.ts

@@ -29,90 +29,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     props: any;
     buttonList: import("vue").ComputedRef<ButtonProps[]>;
     handleMethod: (item: ButtonProps) => void;
-    DtFormButtons: import("vue").DefineComponent<{
-        mode: {
-            type: PropType<"search" | "dialog">;
-            default: string;
-        };
-        show: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showAdvancedButton: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        minShowColumn: {
-            type: NumberConstructor;
-            default: number;
-        };
-        buttonList: {
-            type: PropType<ButtonProps[]>;
-            default: any[];
-        };
-        isAdvanced: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }, {
-        props: any;
-        emits: (event: "handle-method", ...args: any[]) => void;
-        t: {
-            (key: string): string;
-            (key: string, locale: string): string;
-            (key: string, locale: string, list: unknown[]): string;
-            (key: string, locale: string, named: Record<string, unknown>): string;
-            (key: string, list: unknown[]): string;
-            (key: string, named: Record<string, unknown>): string;
-        };
-        advancedRef: import("vue").Ref<{
-            valueOf: () => boolean;
-        }>;
-        key: number;
-        showAdvanceRef: import("vue").ComputedRef<boolean>;
-        colOpt: import("vue").ComputedRef<{
-            style: import("@dt-frames/core").Recordable<any>;
-        }>;
-        getAdvanceClass: import("vue").ComputedRef<(string | {
-            'basic-arrow--active': boolean;
-        })[]>;
-        toggleAdvanced: () => void;
-        handleBtnClick: (button: ButtonProps) => void;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "handle-method"[], "handle-method", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        mode: {
-            type: PropType<"search" | "dialog">;
-            default: string;
-        };
-        show: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showAdvancedButton: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        minShowColumn: {
-            type: NumberConstructor;
-            default: number;
-        };
-        buttonList: {
-            type: PropType<ButtonProps[]>;
-            default: any[];
-        };
-        isAdvanced: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & {
-        "onHandle-method"?: (...args: any[]) => any;
-    }, {
-        mode: "search" | "dialog";
-        show: boolean;
-        showAdvancedButton: boolean;
-        minShowColumn: number;
-        buttonList: ButtonProps[];
-        isAdvanced: boolean;
-    }>;
+    readonly DtFormButtons: import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("handleSave" | "handleCancel")[], "handleSave" | "handleCancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     buttons: PropType<ButtonProps[]>;
     showSave: {