@gct-paas/core-web 0.1.4-dev.8 → 0.1.4-dev.9

package/es/modules/global-modal/src/components/ModalWrapper.vue2.mjs

@@ -0,0 +1,136 @@
+import { defineComponent, ref, watch, computed, watchEffect, unref, onMounted, onUnmounted, nextTick } from 'vue';
+import { useWindowSize, useMutationObserver } from '@vueuse/core';
+import { createModalContext } from '../hooks/useModalContext.mjs';
+
+const props = {
+  loading: { type: Boolean },
+  useWrapper: { type: Boolean, default: true },
+  modalHeaderHeight: { type: Number, default: 57 },
+  modalFooterHeight: { type: Number, default: 74 },
+  minHeight: { type: Number, default: 320 },
+  height: { type: Number },
+  footerOffset: { type: Number, default: 0 },
+  visible: { type: Boolean },
+  fullScreen: { type: Boolean },
+  loadingTip: { type: String }
+};
+const _sfc_main = defineComponent({
+  name: "ModalWrapper",
+  inheritAttrs: false,
+  props,
+  emits: ["height-change", "ext-height"],
+  setup(props2, { emit }) {
+    const wrapperRef = ref();
+    const spinRef = ref(null);
+    const realHeightRef = ref(0);
+    const minRealHeightRef = ref(0);
+    let realHeight = 0;
+    const spinStyle = ref();
+    const { width, height } = useWindowSize();
+    watch([height, width], () => {
+      setModalHeight();
+    });
+    useMutationObserver(
+      spinRef,
+      () => {
+        setModalHeight();
+      },
+      {
+        attributes: true,
+        subtree: true
+      }
+    );
+    createModalContext({
+      redoModalHeight: setModalHeight
+    });
+    const scrollHeight = computed(() => {
+      const modalheight = window.innerHeight * 0.88 - 120;
+      return {
+        height: `${props2.height ? modalheight > props2.height - 120 ? props2.height - 120 : modalheight : props2.height}px`
+      };
+    });
+    watchEffect(() => {
+      props2.useWrapper && setModalHeight();
+    });
+    watch(
+      () => props2.fullScreen,
+      (v) => {
+        setModalHeight();
+        if (!v) {
+          realHeightRef.value = minRealHeightRef.value;
+        } else {
+          minRealHeightRef.value = realHeightRef.value;
+        }
+      }
+    );
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const height2 = entry.contentRect.height;
+        const modalheight = height2 * 0.88 - 152;
+        spinStyle.value = {
+          height: `${props2.height ? modalheight > props2.height - 152 ? props2.height - 152 : modalheight : props2.height}px`,
+          minHeight: `${props2.minHeight - 152}px`,
+          [props2.fullScreen ? "height" : "maxHeight"]: `${unref(realHeightRef)}px`,
+          maxHeight: `calc(88vh - 152px)`
+        };
+      }
+    });
+    observer.observe(document.documentElement);
+    onMounted(() => {
+      const { modalHeaderHeight, modalFooterHeight } = props2;
+      emit("ext-height", modalHeaderHeight + modalFooterHeight);
+    });
+    onUnmounted(() => {
+    });
+    async function scrollTop() {
+      nextTick(() => {
+        if (wrapperRef.value) {
+          wrapperRef.value.getElement()?.scrollTo(0, 0);
+        }
+      });
+    }
+    async function setModalHeight() {
+      if (!props2.visible) return;
+      if (!wrapperRef.value) {
+        return;
+      }
+      const bodyDom = wrapperRef.value?.getElement()?.parentElement;
+      if (!bodyDom) return;
+      bodyDom.style.padding = "0";
+      await nextTick();
+      try {
+        const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+        if (!modalDom) return;
+        const modalRect = getComputedStyle(modalDom).top;
+        const modalTop = Number.parseInt(modalRect);
+        let maxHeight = window.innerHeight - modalTop * 2 + (props2.footerOffset || 0) - props2.modalFooterHeight - props2.modalHeaderHeight;
+        if (modalTop < 40) {
+          maxHeight -= 26;
+        }
+        await nextTick();
+        const spinEl = unref(spinRef);
+        if (!spinEl) return;
+        await nextTick();
+        realHeight = spinEl.scrollHeight;
+        if (props2.fullScreen) {
+          realHeightRef.value = window.innerHeight - props2.modalFooterHeight - props2.modalHeaderHeight - 28;
+        } else {
+          realHeightRef.value = props2.height ? props2.height : realHeight > maxHeight ? maxHeight : realHeight;
+        }
+        emit("height-change", unref(realHeightRef));
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    return {
+      wrapperRef,
+      spinRef,
+      spinStyle,
+      scrollTop,
+      setModalHeight,
+      scrollHeight
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/modules/global-modal/src/hooks/useModal.d.ts

@@ -0,0 +1,6 @@
+import { UseModalReturnType, UseModalInnerReturnType } from '../typing';
+/**
+ * @description: Applicable to independent modal and call outside
+ */
+export declare function useModal(): UseModalReturnType;
+export declare const useModalInner: (callbackFn?: Fn) => UseModalInnerReturnType;

package/es/modules/global-modal/src/hooks/useModal.mjs

@@ -0,0 +1,120 @@
+import { reactive, ref, computed, unref, getCurrentInstance, watchEffect, nextTick, onUnmounted, toRaw } from 'vue';
+import { isFunction, isEqual } from 'lodash-es';
+import { tryOnUnmounted } from '@vueuse/core';
+
+const dataTransfer = reactive({});
+const visibleData = reactive({});
+function useModal() {
+  const modal = ref(null);
+  const loaded = ref(false);
+  const uid = ref("");
+  function register(modalMethod, uuid) {
+    if (!getCurrentInstance()) {
+      throw new Error(
+        "useModal() can only be used inside setup() or functional components!"
+      );
+    }
+    uid.value = uuid || "";
+    onUnmounted(() => {
+      modal.value = null;
+      loaded.value = false;
+      dataTransfer[unref(uid)] = null;
+    });
+    if (unref(loaded) && modalMethod === unref(modal)) return;
+    modal.value = modalMethod;
+    loaded.value = true;
+    modalMethod.emitVisible = (visible, uid2) => {
+      visibleData[uid2] = visible;
+    };
+  }
+  const getInstance = () => {
+    const instance = unref(modal);
+    if (!instance) {
+      throw new Error("useModal instance is undefined!");
+    }
+    return instance;
+  };
+  const methods = {
+    setModalProps: (props) => {
+      getInstance()?.setModalProps(props);
+    },
+    getVisible: computed(() => {
+      return visibleData[~~unref(uid)];
+    }),
+    redoModalHeight: () => {
+      getInstance()?.redoModalHeight?.();
+    },
+    openModal: (visible = true, data, openOnSet = true) => {
+      getInstance()?.setModalProps({
+        visible
+      });
+      const id = unref(uid);
+      if (openOnSet) {
+        dataTransfer[id] = null;
+        dataTransfer[id] = toRaw(data);
+        return;
+      }
+      const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data));
+      if (!equal) {
+        dataTransfer[id] = toRaw(data);
+      }
+    },
+    closeModal: () => {
+      getInstance()?.setModalProps({ visible: false });
+    }
+  };
+  return [register, methods];
+}
+const useModalInner = (callbackFn) => {
+  const modalInstanceRef = ref(null);
+  const currentInstance = getCurrentInstance();
+  const uidRef = ref("");
+  const getInstance = () => {
+    const instance = unref(modalInstanceRef);
+    if (!instance) {
+      throw new Error("useModalInner instance is undefined!");
+    }
+    return instance;
+  };
+  const register = (modalInstance, uuid) => {
+    tryOnUnmounted(() => {
+      modalInstanceRef.value = null;
+    });
+    uidRef.value = uuid || "";
+    modalInstanceRef.value = modalInstance;
+    currentInstance?.emit("register", modalInstance, uuid);
+  };
+  watchEffect(() => {
+    const data = dataTransfer[unref(uidRef)];
+    if (!callbackFn || !isFunction(callbackFn)) return;
+    nextTick(() => {
+      callbackFn(data);
+    });
+  });
+  return [
+    register,
+    {
+      changeLoading: (loading = true) => {
+        getInstance()?.setModalProps({ loading });
+      },
+      getVisible: computed(() => {
+        return visibleData[~~unref(uidRef)];
+      }),
+      changeOkLoading: (loading = true) => {
+        getInstance()?.setModalProps({ confirmLoading: loading });
+      },
+      closeModal: () => {
+        getInstance()?.setModalProps({ visible: false });
+      },
+      setModalProps: (props) => {
+        getInstance()?.setModalProps(props);
+      },
+      redoModalHeight: () => {
+        const callRedo = getInstance()?.redoModalHeight;
+        callRedo?.();
+      }
+    }
+  ];
+};
+
+export { useModal, useModalInner };

package/es/modules/global-modal/src/hooks/useModalContext.d.ts

@@ -0,0 +1,5 @@
+export interface ModalContextProps {
+    redoModalHeight: () => void;
+}
+export declare function createModalContext(context: ModalContextProps): void;
+export declare function useModalContext(): ModalContextProps | undefined;

package/es/modules/global-modal/src/hooks/useModalContext.mjs

@@ -0,0 +1,11 @@
+import { provide, inject } from 'vue';
+
+const key = /* @__PURE__ */ Symbol();
+function createModalContext(context) {
+  return provide(key, context);
+}
+function useModalContext() {
+  return inject(key);
+}
+
+export { createModalContext, useModalContext };

package/es/modules/global-modal/src/hooks/useModalDrag.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export interface UseModalDragMoveContext {
+    draggable: Ref<boolean>;
+    destroyOnClose: Ref<boolean | undefined> | undefined;
+    visible: Ref<boolean>;
+}
+export declare function useModalDragMove(context: UseModalDragMoveContext): void;

package/es/modules/global-modal/src/hooks/useModalDrag.mjs

@@ -0,0 +1,82 @@
+import { useTimeoutFn } from '@vueuse/core';
+import { watchEffect, unref } from 'vue';
+
+function useModalDragMove(context) {
+  const getStyle = (dom, attr) => {
+    return getComputedStyle(dom)[attr];
+  };
+  const drag = (wrap) => {
+    if (!wrap) return;
+    wrap.setAttribute("data-drag", unref(context.draggable));
+    const dialogHeaderEl = wrap.querySelector(".ant-modal-header");
+    const dragDom = wrap.querySelector(".ant-modal");
+    if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
+    dialogHeaderEl.style.cursor = "move";
+    dialogHeaderEl.onmousedown = (e) => {
+      if (!e) return;
+      const disX = e.clientX;
+      const disY = e.clientY;
+      const screenWidth = document.body.clientWidth;
+      const screenHeight = document.documentElement.clientHeight;
+      const dragDomWidth = dragDom.offsetWidth;
+      const dragDomheight = dragDom.offsetHeight;
+      const minDragDomLeft = dragDom.offsetLeft;
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+      const minDragDomTop = dragDom.offsetTop;
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+      const domLeft = getStyle(dragDom, "left");
+      const domTop = getStyle(dragDom, "top");
+      let styL = +domLeft;
+      let styT = +domTop;
+      if (domLeft.includes("%")) {
+        styL = +document.body.clientWidth * (+domLeft.replace(/%/g, "") / 100);
+        styT = +document.body.clientHeight * (+domTop.replace(/%/g, "") / 100);
+      } else {
+        styL = +domLeft.replace(/px/g, "");
+        styT = +domTop.replace(/px/g, "");
+      }
+      document.onmousemove = function(e2) {
+        let left = e2.clientX - disX;
+        let top = e2.clientY - disY;
+        if (-left > minDragDomLeft) {
+          left = -minDragDomLeft;
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft;
+        }
+        if (-top > minDragDomTop) {
+          top = -minDragDomTop;
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop;
+        }
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+      };
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  };
+  const handleDrag = () => {
+    const dragWraps = document.querySelectorAll(".ant-modal-wrap");
+    for (const wrap of Array.from(dragWraps)) {
+      if (!wrap) continue;
+      const display = getStyle(wrap, "display");
+      const draggable = wrap.getAttribute("data-drag");
+      if (display !== "none") {
+        if (draggable === null || unref(context.destroyOnClose)) {
+          drag(wrap);
+        }
+      }
+    }
+  };
+  watchEffect(() => {
+    if (!unref(context.visible) || !unref(context.draggable)) {
+      return;
+    }
+    useTimeoutFn(() => {
+      handleDrag();
+    }, 30);
+  });
+}
+
+export { useModalDragMove };

package/es/modules/global-modal/src/hooks/useModalFullScreen.d.ts

@@ -0,0 +1,11 @@
+import { Component, Ref } from 'vue';
+export interface UseFullScreenContext {
+    wrapClassName: Ref<string | undefined>;
+    modalWrapperRef: Ref<Component>;
+    extHeightRef: Ref<number>;
+}
+export declare function useFullScreen(context: UseFullScreenContext): {
+    getWrapClassName: import('vue').ComputedRef<string>;
+    handleFullScreen: (e: Event) => void;
+    fullScreenRef: Ref<boolean, boolean>;
+};

package/es/modules/global-modal/src/hooks/useModalFullScreen.mjs

@@ -0,0 +1,16 @@
+import { ref, computed, unref } from 'vue';
+
+function useFullScreen(context) {
+  const fullScreenRef = ref(false);
+  const getWrapClassName = computed(() => {
+    const clsName = unref(context.wrapClassName) || "";
+    return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
+  });
+  function handleFullScreen(e) {
+    e?.stopPropagation();
+    fullScreenRef.value = !unref(fullScreenRef);
+  }
+  return { getWrapClassName, handleFullScreen, fullScreenRef };
+}
+
+export { useFullScreen };

package/es/modules/global-modal/src/index.css

@@ -0,0 +1,153 @@
+.vben.fullscreen-modal {
+  overflow: hidden;
+}
+.vben.fullscreen-modal .ant-modal {
+  inset: 0 !important;
+  width: 100% !important;
+  max-width: 100vw !important;
+  height: 100%;
+}
+.vben.fullscreen-modal .ant-modal-content {
+  height: 100%;
+}
+.vben .ant-modal {
+  width: 520px;
+  padding-bottom: 0;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar {
+  height: 100%;
+  padding: 14px;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar .scrollbar__wrap {
+  max-height: calc(88vh - 152px);
+}
+.vben .ant-modal-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.vben .ant-modal-title .base-title {
+  cursor: move !important;
+}
+.vben .ant-modal .ant-modal-body {
+  height: calc(100% - 120px);
+  max-height: calc(88vh - 120px);
+  padding: 0;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar > .scrollbar__bar.is-horizontal {
+  display: none;
+}
+.vben .ant-modal-large {
+  top: 60px;
+}
+.vben .ant-modal-large--mini {
+  top: 16px;
+}
+.vben .ant-modal-header {
+  padding: 16px;
+}
+.vben .ant-modal-content {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.vben .ant-modal-footer {
+  padding: 16px;
+}
+.vben .ant-modal-footer button + button {
+  margin-left: 16px;
+}
+.vben .ant-modal-close {
+  outline: none;
+  font-weight: normal;
+}
+.vben .ant-modal-close-x {
+  display: inline-block;
+  width: 96px;
+  height: 56px;
+  line-height: 56px;
+}
+.vben .ant-modal-confirm-body .ant-modal-confirm-content > * {
+  color: #909399;
+}
+.vben .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-error);
+}
+.vben .ant-modal-confirm-btns .ant-btn:last-child {
+  margin-right: 0;
+}
+.vben .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-warning);
+}
+.vben .ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-success);
+}
+.vben .ant-modal-confirm .ant-modal-body {
+  padding: 24px !important;
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 600px) {
+  .ant-modal {
+    top: 60px;
+  }
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 540px) {
+  .ant-modal {
+    top: 30px;
+  }
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 480px) {
+  .ant-modal {
+    top: 10px;
+  }
+}
+.options-field-modal.ant-modal .ant-modal-content .ant-modal-body {
+  padding-bottom: 0;
+}
+.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+  margin-left: 16px;
+}
+.ant-modal {
+  max-height: 88vh;
+}
+.ant-modal .ant-modal-content {
+  border-radius: 4px;
+}
+.ant-modal.ant-modal-confirm .ant-modal-body {
+  padding: 16px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon {
+  margin-right: 8px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon .iconfont {
+  top: 4px !important;
+  font-size: 14px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon > svg {
+  width: 14px;
+  height: 14px;
+  margin-top: 3px;
+}
+.ant-modal .ant-modal-confirm-body > .ant-modal-confirm-title {
+  color: #1a1d23;
+  font-size: 14px;
+  line-height: unset;
+}
+.ant-modal .ant-modal-confirm-body > .ant-modal-confirm-content {
+  color: #5a5f6b;
+  font-size: 12px;
+}
+.ant-modal .ant-modal-confirm-body .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+  margin-left: 22px;
+}
+.ant-modal .ant-modal-confirm-btns {
+  margin-top: 12px;
+}
+.ant-modal .ant-modal-confirm-btns > .ant-btn {
+  height: 24px;
+  padding: 2px 10px;
+  color: #384356;
+  line-height: 16px;
+}
+.ant-modal .ant-modal-confirm-btns > .ant-btn.ant-btn-primary {
+  color: #fff;
+}