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

package/es/modules/global-modal/src/BasicModal.vue.mjs

@@ -0,0 +1,221 @@
+import { defineComponent, useAttrs, ref, getCurrentInstance, computed, unref, toRef, watchEffect, watch, nextTick, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, createCommentVNode, createVNode } from 'vue';
+import Modal from './components/GlboalModal.mjs';
+import ModalWrapper from './components/ModalWrapper.vue.mjs';
+import _sfc_main$1 from './components/ModalClose.vue.mjs';
+import './components/ModalClose.css';/* empty css                            */
+import _sfc_main$2 from './components/ModalFooter.vue.mjs';
+import ModalHeader from './components/ModalHeader.vue.mjs';
+import { omit, isFunction } from 'lodash-es';
+import { basicProps } from './props.mjs';
+import { useFullScreen } from './hooks/useModalFullScreen.mjs';
+import { useNamespace, deepMerge } from '@gct-paas/core';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BasicModal",
+  props: basicProps,
+  emits: [
+    "visible-change",
+    "height-change",
+    "cancel",
+    "ok",
+    "register",
+    "update:visible"
+  ],
+  setup(__props, { emit: __emit }) {
+    const attrs = useAttrs();
+    const props = __props;
+    const emit = __emit;
+    const visibleRef = ref(false);
+    const propsRef = ref(null);
+    const modalWrapperRef = ref(null);
+    const ns = useNamespace("basic-modal");
+    const extHeightRef = ref(0);
+    const modalMethods = {
+      setModalProps,
+      emitVisible: void 0,
+      redoModalHeight: () => {
+        nextTick(() => {
+          if (unref(modalWrapperRef)) {
+            unref(modalWrapperRef).setModalHeight();
+          }
+        });
+      }
+    };
+    const instance = getCurrentInstance();
+    if (instance) {
+      emit("register", modalMethods, instance.uid);
+    }
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        height: props.outHeight ? props.outHeight : props.height && props.height + 120,
+        ...unref(propsRef)
+      };
+    });
+    const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
+      wrapClassName: ref(`vben ${toRef(getMergeProps.value, "wrapClassName")}`)
+    });
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        visible: unref(visibleRef),
+        okButtonProps: void 0,
+        cancelButtonProps: void 0,
+        title: void 0
+      };
+      return {
+        ...opt,
+        wrapClassName: unref(getWrapClassName)
+      };
+    });
+    const getBindValue = computed(() => {
+      const attr = {
+        ...attrs,
+        ...unref(getMergeProps),
+        visible: unref(visibleRef)
+      };
+      attr["wrapClassName"] = `${attr?.["wrapClassName"] || ""} ${unref(getWrapClassName)}`;
+      if (unref(fullScreenRef)) {
+        return omit(attr, ["height", "title"]);
+      }
+      return omit(attr, "title");
+    });
+    const getWrapperHeight = computed(() => {
+      if (unref(fullScreenRef)) return void 0;
+      return unref(getProps).height;
+    });
+    watchEffect(() => {
+      visibleRef.value = !!props.visible;
+      fullScreenRef.value = !!props.defaultFullscreen;
+    });
+    const resetState = () => {
+      fullScreenRef.value = props.defaultFullscreen;
+    };
+    watch(
+      () => unref(visibleRef),
+      (v) => {
+        emit("visible-change", v);
+        emit("update:visible", v);
+        instance && modalMethods.emitVisible?.(v, instance.uid);
+        nextTick(() => {
+          if (props.scrollTop && v && unref(modalWrapperRef)) {
+            unref(modalWrapperRef).scrollTop();
+          }
+        });
+        if (props.destroyOnClose && v === false) {
+          resetState();
+        }
+      },
+      {
+        immediate: false
+      }
+    );
+    async function handleCancel(e) {
+      e?.stopPropagation();
+      if (e.target?.classList?.contains(ns.b() + "-close--custom"))
+        return;
+      if (props.closeFunc && isFunction(props.closeFunc)) {
+        const isClose = await props.closeFunc();
+        visibleRef.value = !isClose;
+        return;
+      }
+      visibleRef.value = false;
+      emit("cancel", e);
+    }
+    function setModalProps(props2) {
+      const _props = unref(propsRef) || {};
+      propsRef.value = deepMerge(_props, props2);
+      if (Reflect.has(props2, "visible")) {
+        visibleRef.value = !!props2.visible;
+      }
+      if (Reflect.has(props2, "defaultFullscreen")) {
+        fullScreenRef.value = !!props2.defaultFullscreen;
+      }
+    }
+    function handleOk(e) {
+      emit("ok", e);
+    }
+    function handleHeightChange(height) {
+      emit("height-change", height);
+    }
+    function handleExtHeight(height) {
+      extHeightRef.value = height;
+    }
+    function handleTitleDbClick(e) {
+      if (!props.canFullscreen) return;
+      e.stopPropagation();
+      handleFullScreen(e);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), mergeProps(getBindValue.value, { onCancel: handleCancel }), createSlots({
+        default: withCtx(() => [
+          _ctx.$slots.closeIcon ? renderSlot(_ctx.$slots, "closeIcon", { key: 0 }) : createCommentVNode("", true),
+          _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 1 }) : createCommentVNode("", true),
+          _ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 2 }) : createCommentVNode("", true),
+          createVNode(ModalWrapper, mergeProps(
+            {
+              ref_key: "modalWrapperRef",
+              ref: modalWrapperRef,
+              "use-wrapper": getProps.value.useWrapper,
+              "footer-offset": _ctx.wrapperFooterOffset,
+              "full-screen": unref(fullScreenRef),
+              loading: getProps.value.loading,
+              "loading-tip": getProps.value.loadingTip,
+              "min-height": getProps.value.minHeight,
+              height: getWrapperHeight.value,
+              visible: visibleRef.value,
+              "modal-footer-height": _ctx.footer !== void 0 && !_ctx.footer ? 0 : void 0
+            },
+            unref(omit)(getProps.value.wrapperProps, "visible", "height", "modalFooterHeight"),
+            {
+              onExtHeight: handleExtHeight,
+              onHeightChange: handleHeightChange
+            }
+          ), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["use-wrapper", "footer-offset", "full-screen", "loading", "loading-tip", "min-height", "height", "visible", "modal-footer-height"])
+        ]),
+        _: 2
+      }, [
+        !_ctx.$slots.closeIcon ? {
+          name: "closeIcon",
+          fn: withCtx(() => [
+            createVNode(_sfc_main$1, {
+              "can-fullscreen": getProps.value.canFullscreen,
+              "full-screen": unref(fullScreenRef),
+              onCancel: handleCancel,
+              onFullscreen: unref(handleFullScreen)
+            }, null, 8, ["can-fullscreen", "full-screen", "onFullscreen"])
+          ]),
+          key: "0"
+        } : void 0,
+        !_ctx.$slots.title ? {
+          name: "title",
+          fn: withCtx(() => [
+            createVNode(ModalHeader, {
+              "help-message": getProps.value.helpMessage,
+              title: getMergeProps.value.title,
+              onDblclick: handleTitleDbClick
+            }, null, 8, ["help-message", "title"])
+          ]),
+          key: "1"
+        } : void 0,
+        !_ctx.$slots.footer ? {
+          name: "footer",
+          fn: withCtx(() => [
+            createVNode(_sfc_main$2, mergeProps(getBindValue.value, {
+              onOk: handleOk,
+              onCancel: handleCancel
+            }), null, 16)
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/modules/global-modal/src/BasicModal.vue2.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from './BasicModal.vue.mjs';
+
+
+
+export { _sfc_main as default };

package/es/modules/global-modal/src/components/GlboalModal.d.ts

@@ -0,0 +1,251 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+    };
+    scrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    outHeight: {
+        type: NumberConstructor;
+    };
+    minHeight: {
+        type: NumberConstructor;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    centered: {
+        type: BooleanConstructor;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeFunc: import('vue').PropType<() => Promise<boolean>>;
+} & {
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperFooterOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    helpMessage: import('vue').PropType<string | string[]>;
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+    };
+    loadingTip: {
+        type: StringConstructor;
+    };
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperProps: import('vue').PropType<Partial<import('../typing').ModalWrapperProps>>;
+    afterClose: FunctionConstructor;
+    bodyStyle: import('vue').PropType<import('vue').CSSProperties>;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeIcon: import('vue').PropType<import('vue').VNode>;
+    confirmLoading: {
+        type: BooleanConstructor;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    footer: import('vue').PropType<import('vue').VNode>;
+    getContainer: import('vue').PropType<() => IObject>;
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: import('vue').PropType<import('vue').CSSProperties>;
+    okType: {
+        type: import('vue').PropType<import('ant-design-vue/es/button').ButtonType>;
+        default: string;
+    };
+    okButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    cancelButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    title: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    width: import('vue').PropType<string | number>;
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "cancel"[], "cancel", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+    };
+    scrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    outHeight: {
+        type: NumberConstructor;
+    };
+    minHeight: {
+        type: NumberConstructor;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    centered: {
+        type: BooleanConstructor;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeFunc: import('vue').PropType<() => Promise<boolean>>;
+} & {
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperFooterOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    helpMessage: import('vue').PropType<string | string[]>;
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+    };
+    loadingTip: {
+        type: StringConstructor;
+    };
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperProps: import('vue').PropType<Partial<import('../typing').ModalWrapperProps>>;
+    afterClose: FunctionConstructor;
+    bodyStyle: import('vue').PropType<import('vue').CSSProperties>;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeIcon: import('vue').PropType<import('vue').VNode>;
+    confirmLoading: {
+        type: BooleanConstructor;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    footer: import('vue').PropType<import('vue').VNode>;
+    getContainer: import('vue').PropType<() => IObject>;
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: import('vue').PropType<import('vue').CSSProperties>;
+    okType: {
+        type: import('vue').PropType<import('ant-design-vue/es/button').ButtonType>;
+        default: string;
+    };
+    okButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    cancelButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    title: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    width: import('vue').PropType<string | number>;
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    scrollTop: boolean;
+    draggable: boolean;
+    centered: boolean;
+    cancelText: string;
+    okText: string;
+    defaultFullscreen: boolean;
+    canFullscreen: boolean;
+    wrapperFooterOffset: number;
+    useWrapper: boolean;
+    loading: boolean;
+    showCancelBtn: boolean;
+    showOkBtn: boolean;
+    closable: boolean;
+    confirmLoading: boolean;
+    destroyOnClose: boolean;
+    mask: boolean;
+    maskClosable: boolean;
+    keyboard: boolean;
+    okType: import('ant-design-vue/es/button').ButtonType;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/global-modal/src/components/GlboalModal.mjs

@@ -0,0 +1,40 @@
+import { Modal as Modal$1 } from 'ant-design-vue';
+import { defineComponent, toRefs, h } from 'vue';
+import { basicProps } from '../props.mjs';
+import { useModalDragMove } from '../hooks/useModalDrag.mjs';
+
+const Modal = /* @__PURE__ */ defineComponent({
+  name: 'GlobalModal',
+  inheritAttrs: false,
+  props: basicProps,
+  emits: ['cancel'],
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      visible,
+      draggable,
+      destroyOnClose
+    } = toRefs(props);
+    useModalDragMove({
+      visible,
+      destroyOnClose,
+      draggable
+    });
+    const onCancel = e => {
+      emit('cancel', e);
+    };
+    return () => {
+      const propsData = {
+        ...attrs,
+        ...props,
+        onCancel
+      };
+      return h(Modal$1, propsData, slots);
+    };
+  }
+});
+
+export { Modal as default };

package/es/modules/global-modal/src/components/ModalClose.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.vben .ant-modal-close {
+  right: 16px;
+}
+.vben .ant-modal-close-x .anticon.anticon-close {
+  margin-left: 27px;
+}
+.gct-basic-modal-close {
+  display: flex;
+  align-items: center;
+  height: 95%;
+}
+.gct-basic-modal-close > span {
+  margin-left: 48px;
+  font-size: 16px;
+}
+.gct-basic-modal-close--can-full > span {
+  margin-left: 12px;
+}
+.gct-basic-modal-close:not(.gct-basic-modal-close--can-full) > span:nth-child(1):hover {
+  font-weight: 700;
+}
+.gct-basic-modal-close span:nth-child(1) {
+  display: inline-block;
+  padding: 10px;
+}
+.gct-basic-modal-close span:nth-child(1):hover {
+  color: var(--ant-primary-color);
+}
+.gct-basic-modal-close span:last-child:hover {
+  color: var(--ant-error-color);
+}

package/es/modules/global-modal/src/components/ModalClose.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullScreen: {
+        type: BooleanConstructor;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: (...args: any[]) => void;
+    fullscreen: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullScreen: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onFullscreen?: ((...args: any[]) => any) | undefined;
+}>, {
+    canFullscreen: boolean;
+    fullScreen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;