yc-design-vue 1.0.1

package/es/Modal/ModalService.vue.js

@@ -0,0 +1,138 @@
+import { defineComponent, ref, onMounted, createBlock, openBlock, mergeProps, withCtx, createElementVNode, resolveDynamicComponent, unref, createElementBlock, createCommentVNode } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getSlotFunction } from "../_shared/utils/vue-utils.js";
+import "../Empty/index.js";
+/* empty css                         */
+import { TYPE_ICON_MAP } from "../_shared/constants/index.js";
+import _Modal from "./Modal.vue.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "yc-modal-title-icon"
+};
+const _hoisted_2 = { class: "yc-modal-title-content text-ellipsis" };
+const _hoisted_3 = { class: "yc-modal-body-content text-ellipsis" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ModalService",
+  props: {
+    width: { default: 520 },
+    top: { default: 100 },
+    mask: { type: Boolean, default: true },
+    title: { type: [String, Array, Function], default: "" },
+    titleAlign: { default: "center" },
+    alignCenter: { type: Boolean, default: true },
+    unmountOnClose: { type: Boolean, default: false },
+    maskClosable: { type: Boolean, default: true },
+    hideCancel: { type: Boolean, default: false },
+    closable: { type: Boolean, default: true },
+    okText: { default: "确认" },
+    cancelText: { default: "取消" },
+    okLoading: { type: Boolean, default: false },
+    okButtonProps: { default: () => {
+      return {};
+    } },
+    cancelButtonProps: { default: () => {
+      return {};
+    } },
+    footer: { type: Boolean, default: true },
+    renderToBody: { type: Boolean, default: true },
+    popupContainer: { default: ".yc-overlay-modal" },
+    maskStyle: { default: () => {
+      return {};
+    } },
+    modalClass: { default: "" },
+    modalStyle: { default: () => {
+      return {};
+    } },
+    escToClose: { type: Boolean, default: true },
+    draggable: { type: Boolean, default: false },
+    fullscreen: { type: Boolean, default: false },
+    maskAnimationName: { default: "fade" },
+    modalAnimationName: { default: "zoom-modal" },
+    bodyClass: { default: "" },
+    bodyStyle: { default: () => {
+      return {};
+    } },
+    hideTitle: { type: Boolean, default: false },
+    simple: { type: Boolean, default: false },
+    onBeforeCancel: { type: Function, default: () => {
+      return true;
+    } },
+    onBeforeOk: { type: Function, default: () => {
+      return true;
+    } },
+    content: { type: [String, Array, Function], default: "" },
+    type: {},
+    onOk: {},
+    onCancel: {},
+    onOpen: {},
+    onClose: {},
+    onBeforeOpen: {},
+    onBeforeClose: {},
+    serviceClose: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { onClose, serviceClose } = props;
+    const visible = ref(false);
+    const handleClose = () => {
+      serviceClose == null ? void 0 : serviceClose();
+      onClose == null ? void 0 : onClose();
+    };
+    onMounted(() => {
+      visible.value = true;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_Modal, mergeProps(props, {
+        visible: visible.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+        "modal-class": [
+          "yc-service-modal",
+          {
+            [`yc-service-modal-${_ctx.type}`]: !!_ctx.type
+          }
+        ],
+        onOk: _cache[1] || (_cache[1] = ($event) => {
+          var _a;
+          return (_a = _ctx.onOk) == null ? void 0 : _a.call(_ctx);
+        }),
+        onCancel: _cache[2] || (_cache[2] = ($event) => {
+          var _a;
+          return (_a = _ctx.onCancel) == null ? void 0 : _a.call(_ctx);
+        }),
+        onBeforeOpen: _cache[3] || (_cache[3] = ($event) => {
+          var _a;
+          return (_a = _ctx.onBeforeOpen) == null ? void 0 : _a.call(_ctx);
+        }),
+        onBeforeClose: _cache[4] || (_cache[4] = ($event) => {
+          var _a;
+          return (_a = _ctx.onBeforeClose) == null ? void 0 : _a.call(_ctx);
+        }),
+        onOpen: _cache[5] || (_cache[5] = ($event) => {
+          var _a;
+          return (_a = _ctx.onOpen) == null ? void 0 : _a.call(_ctx);
+        }),
+        onClose: handleClose
+      }), {
+        title: withCtx(() => [
+          _ctx.type ? (openBlock(), createElementBlock("span", _hoisted_1, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(TYPE_ICON_MAP)[_ctx.type])))
+          ])) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_2, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(getSlotFunction)(_ctx.title))))
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_3, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(getSlotFunction)(_ctx.content))))
+          ])
+        ]),
+        _: 1
+      }, 16, ["visible", "modal-class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Modal/ModalService.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ModalService.vue.js";
+/* empty css                  */
+export {
+  _sfc_main as default
+};

package/es/Modal/hooks/useModalClose.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { ModalEmits, OnBeforeOk, OnBeforeCancel } from '../type';
+declare const _default: (params: {
+    visible: Ref<boolean | undefined>;
+    defaultVisible: Ref<boolean>;
+    maskClosable: Ref<boolean>;
+    escToClose: Ref<boolean>;
+    onBeforeOk: OnBeforeOk;
+    onBeforeCancel: OnBeforeCancel;
+    emits: ModalEmits;
+}) => {
+    asyncLoading: Ref<boolean, boolean>;
+    outerVisible: Ref<boolean, boolean>;
+    innerVisible: import('vue').WritableComputedRef<any, boolean>;
+    handleClose: (type: string, ev: MouseEvent | KeyboardEvent) => Promise<void>;
+    handleAfterLeave: () => void;
+};
+export default _default;

package/es/Modal/hooks/useModalClose.js

@@ -0,0 +1,78 @@
+import { ref, watch } from "vue";
+import { onKeyStroke } from "../../node_modules/@vueuse/core/index.js";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import "../../_shared/utils/time.js";
+import "../../Empty/index.js";
+/* empty css                            */
+import useControlValue from "../../_shared/utils/control.js";
+import useOnBeforeClose from "./useOnBeforeClose.js";
+const useModalClose = (params) => {
+  const {
+    maskClosable,
+    escToClose,
+    visible,
+    defaultVisible,
+    onBeforeCancel,
+    onBeforeOk,
+    emits
+  } = params;
+  const outerVisible = ref(false);
+  const asyncLoading = ref(false);
+  const innerVisible = useControlValue(
+    visible,
+    defaultVisible.value,
+    (val) => {
+      emits("update:visible", val);
+    }
+  );
+  const handleAfterLeave = () => {
+    emits("close");
+    outerVisible.value = false;
+  };
+  const handleClose = async (type, ev) => {
+    const isClose = await useOnBeforeClose(
+      type,
+      asyncLoading,
+      onBeforeOk,
+      onBeforeCancel
+    );
+    if (!isClose) {
+      return;
+    }
+    if (type == "mask" && !maskClosable.value) {
+      return;
+    }
+    if (type == "confirmBtn") {
+      emits("ok");
+    }
+    emits("cancel", ev);
+    innerVisible.value = false;
+  };
+  if (escToClose.value) {
+    onKeyStroke(["Escape"], (ev) => {
+      if (!innerVisible.value) return;
+      handleClose("esc", ev);
+    });
+  }
+  watch(
+    () => innerVisible.value,
+    (val) => {
+      if (!val) return;
+      outerVisible.value = val;
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    asyncLoading,
+    outerVisible,
+    innerVisible,
+    handleClose,
+    handleAfterLeave
+  };
+};
+export {
+  useModalClose as default
+};

package/es/Modal/hooks/useModalDraggable.d.ts

@@ -0,0 +1,14 @@
+import { Ref, CSSProperties } from 'vue';
+declare const _default: (params: {
+    draggable: Ref<boolean>;
+    fullscreen: Ref<boolean>;
+    alignCenter: Ref<boolean>;
+    top: Ref<number>;
+    visible: Ref<boolean>;
+    triggerRef: Ref<HTMLDivElement | undefined>;
+    modalRef: Ref<HTMLDivElement | undefined>;
+}) => {
+    dragStyle: import('vue').ComputedRef<CSSProperties>;
+    isDraggable: import('vue').ComputedRef<boolean>;
+};
+export default _default;

package/es/Modal/hooks/useModalDraggable.js

@@ -0,0 +1,66 @@
+import { ref, computed, watch } from "vue";
+import { useDraggable } from "../../node_modules/@vueuse/core/index.js";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import { valueToPx, sleep } from "../../_shared/utils/fn.js";
+import "../../_shared/utils/time.js";
+import "../../Empty/index.js";
+/* empty css                            */
+const useModalDraggable = (params) => {
+  const {
+    visible,
+    triggerRef,
+    modalRef,
+    draggable,
+    fullscreen,
+    alignCenter,
+    top
+  } = params;
+  const originX = ref(0);
+  const originY = ref(0);
+  const { x, y } = useDraggable(triggerRef, {
+    onMove() {
+      if (!isDraggable.value) return;
+      const maxX = window.innerWidth - modalRef.value.offsetWidth;
+      const maxY = window.innerHeight - modalRef.value.offsetHeight;
+      x.value = x.value >= maxX ? maxX : x.value;
+      x.value = x.value <= 0 ? 0 : x.value;
+      y.value = y.value >= maxY ? maxY : y.value;
+      y.value = y.value <= 0 ? 0 : y.value;
+    }
+  });
+  const isDraggable = computed(() => draggable.value && !fullscreen.value);
+  const dragStyle = computed(() => {
+    return isDraggable.value && (x.value != originX.value || y.value != originY.value) ? {
+      transform: `translate(${valueToPx(x.value)},${valueToPx(y.value)})`
+    } : {
+      left: valueToPx(originX.value),
+      top: valueToPx(originY.value)
+    };
+  });
+  watch(
+    () => visible.value,
+    async (v) => {
+      if (!v) return;
+      await sleep(0);
+      const offsetX = (window.innerWidth - modalRef.value.offsetWidth) / 2;
+      const offsetY = (window.innerHeight - modalRef.value.offsetHeight) / 2;
+      const finalX = offsetX <= 0 ? 0 : offsetX;
+      const finalY = offsetY <= 0 ? 0 : offsetY;
+      originX.value = finalX;
+      originY.value = alignCenter.value ? finalY : top.value;
+      x.value = originX.value;
+      y.value = originY.value;
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    dragStyle,
+    isDraggable
+  };
+};
+export {
+  useModalDraggable as default
+};

package/es/Modal/hooks/useOnBeforeClose.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { OnBeforeOk, OnBeforeCancel } from '../type';
+declare const _default: (type: string, asyncLoading: Ref<boolean>, onBeforeOk: OnBeforeOk, onBeforeCancel: OnBeforeCancel) => Promise<boolean>;
+export default _default;

package/es/Modal/hooks/useOnBeforeClose.js

@@ -0,0 +1,40 @@
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../_shared/utils/dom.js";
+import { isBoolean } from "../../_shared/utils/is.js";
+import "../../_shared/utils/time.js";
+import "vue";
+import "../../Empty/index.js";
+/* empty css                            */
+const useOnBeforeClose = async (type, asyncLoading, onBeforeOk, onBeforeCancel) => {
+  const handleBeforeOk = () => {
+    return new Promise(async (resolve) => {
+      const closeResult = onBeforeOk(resolve);
+      let isClose2 = true;
+      if (isBoolean(closeResult)) {
+        isClose2 = closeResult;
+      } else if (closeResult instanceof Promise) {
+        try {
+          const _isClose = await closeResult;
+          if (isBoolean(_isClose)) {
+            isClose2 = _isClose;
+          }
+        } catch {
+          isClose2 = false;
+        }
+      }
+      resolve(isClose2);
+    });
+  };
+  let isClose;
+  if (type == "confirmBtn") {
+    asyncLoading.value = true;
+    isClose = await handleBeforeOk();
+    asyncLoading.value = false;
+  } else {
+    isClose = onBeforeCancel();
+  }
+  return isClose;
+};
+export {
+  useOnBeforeClose as default
+};

package/es/Modal/index.d.ts

@@ -0,0 +1,185 @@
+import { App } from 'vue';
+import { ModalConfig } from './type';
+import { default as _Modal } from './Modal.vue';
+export type ModalInstance = InstanceType<typeof _Modal>;
+export * from './type';
+declare const Modal: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./type').ModalProps> & Readonly<{
+        onCancel?: ((ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
+        "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+        onOk?: (() => any) | undefined;
+        "onBefore-open"?: (() => any) | undefined;
+        "onBefore-close"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        cancel: (ev: MouseEvent | KeyboardEvent) => any;
+        close: () => any;
+        open: () => any;
+        "update:visible": (value: boolean) => any;
+        ok: () => any;
+        "before-open": () => any;
+        "before-close": () => any;
+    }, import('vue').PublicProps, {
+        top: number;
+        unmountOnClose: boolean;
+        popupContainer: import('..').PopupContainer;
+        renderToBody: boolean;
+        width: number | string;
+        visible: boolean;
+        footer: boolean;
+        title: string;
+        mask: boolean;
+        defaultVisible: boolean;
+        closable: boolean;
+        bodyStyle: import('vue').CSSProperties;
+        titleAlign: import('./type').ModalTitleAlign;
+        alignCenter: boolean;
+        maskClosable: boolean;
+        hideCancel: boolean;
+        okText: string;
+        cancelText: string;
+        okLoading: boolean;
+        okButtonProps: import('..').ButtonProps;
+        cancelButtonProps: import('..').ButtonProps;
+        maskStyle: import('vue').CSSProperties;
+        modalClass: import('../_shared/type').ClassName;
+        modalStyle: import('vue').CSSProperties;
+        escToClose: boolean;
+        draggable: boolean;
+        fullscreen: boolean;
+        maskAnimationName: string;
+        modalAnimationName: string;
+        bodyClass: import('../_shared/type').ClassName;
+        hideTitle: boolean;
+        simple: boolean;
+        onBeforeCancel: import('./type').OnBeforeCancel;
+        onBeforeOk: import('./type').OnBeforeOk;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        modalRef: HTMLDivElement;
+        headerRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./type').ModalProps> & Readonly<{
+        onCancel?: ((ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
+        "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+        onOk?: (() => any) | undefined;
+        "onBefore-open"?: (() => any) | undefined;
+        "onBefore-close"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        top: number;
+        unmountOnClose: boolean;
+        popupContainer: import('..').PopupContainer;
+        renderToBody: boolean;
+        width: number | string;
+        visible: boolean;
+        footer: boolean;
+        title: string;
+        mask: boolean;
+        defaultVisible: boolean;
+        closable: boolean;
+        bodyStyle: import('vue').CSSProperties;
+        titleAlign: import('./type').ModalTitleAlign;
+        alignCenter: boolean;
+        maskClosable: boolean;
+        hideCancel: boolean;
+        okText: string;
+        cancelText: string;
+        okLoading: boolean;
+        okButtonProps: import('..').ButtonProps;
+        cancelButtonProps: import('..').ButtonProps;
+        maskStyle: import('vue').CSSProperties;
+        modalClass: import('../_shared/type').ClassName;
+        modalStyle: import('vue').CSSProperties;
+        escToClose: boolean;
+        draggable: boolean;
+        fullscreen: boolean;
+        maskAnimationName: string;
+        modalAnimationName: string;
+        bodyClass: import('../_shared/type').ClassName;
+        hideTitle: boolean;
+        simple: boolean;
+        onBeforeCancel: import('./type').OnBeforeCancel;
+        onBeforeOk: import('./type').OnBeforeOk;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./type').ModalProps> & Readonly<{
+    onCancel?: ((ev: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+    onOk?: (() => any) | undefined;
+    "onBefore-open"?: (() => any) | undefined;
+    "onBefore-close"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    cancel: (ev: MouseEvent | KeyboardEvent) => any;
+    close: () => any;
+    open: () => any;
+    "update:visible": (value: boolean) => any;
+    ok: () => any;
+    "before-open": () => any;
+    "before-close": () => any;
+}, string, {
+    top: number;
+    unmountOnClose: boolean;
+    popupContainer: import('..').PopupContainer;
+    renderToBody: boolean;
+    width: number | string;
+    visible: boolean;
+    footer: boolean;
+    title: string;
+    mask: boolean;
+    defaultVisible: boolean;
+    closable: boolean;
+    bodyStyle: import('vue').CSSProperties;
+    titleAlign: import('./type').ModalTitleAlign;
+    alignCenter: boolean;
+    maskClosable: boolean;
+    hideCancel: boolean;
+    okText: string;
+    cancelText: string;
+    okLoading: boolean;
+    okButtonProps: import('..').ButtonProps;
+    cancelButtonProps: import('..').ButtonProps;
+    maskStyle: import('vue').CSSProperties;
+    modalClass: import('../_shared/type').ClassName;
+    modalStyle: import('vue').CSSProperties;
+    escToClose: boolean;
+    draggable: boolean;
+    fullscreen: boolean;
+    maskAnimationName: string;
+    modalAnimationName: string;
+    bodyClass: import('../_shared/type').ClassName;
+    hideTitle: boolean;
+    simple: boolean;
+    onBeforeCancel: import('./type').OnBeforeCancel;
+    onBeforeOk: import('./type').OnBeforeOk;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<import('./type').ModalSlots> & import('./type').ModalSlots;
+}) & {
+    open: (props: ModalConfig) => import('./type').ModalReturn;
+    success: (props: ModalConfig) => import('./type').ModalReturn;
+    error: (props: ModalConfig) => import('./type').ModalReturn;
+    warning: (props: ModalConfig) => import('./type').ModalReturn;
+    info: (props: ModalConfig) => import('./type').ModalReturn;
+    confirm: (props: ModalConfig) => import('vm').ModuleStatus;
+    install: (app: App) => void;
+};
+declare module 'vue' {
+    interface GlobalComponents {
+        YcModal: typeof Modal;
+    }
+    interface ComponentCustomProperties {
+        $modal: typeof Modal;
+    }
+}
+export default Modal;

package/es/Modal/index.js

@@ -0,0 +1,56 @@
+import { h, render } from "vue";
+import _Modal from "./Modal.vue.js";
+import _sfc_main from "./ModalService.vue.js";
+/* empty css                  */
+let container;
+const open = (props) => {
+  if (!container) {
+    container = document.createElement("div");
+    container.className = "yc-overlay yc-overlay-modal";
+    document.body.append(container);
+  }
+  const close = () => {
+    render(null, container);
+  };
+  const update = (updateProps) => {
+    console.log("函数执行了", updateProps);
+  };
+  const vnode = h(_sfc_main, {
+    ...props,
+    serviceClose: close
+  });
+  render(vnode, container);
+  return {
+    close,
+    update
+  };
+};
+const modalMethod = {
+  open,
+  ...Object.fromEntries(
+    ["info", "warning", "error", "success", "confirm"].map((type) => {
+      return [
+        type,
+        (props) => {
+          return open({
+            ...props,
+            type,
+            simple: true,
+            hideCancel: type != "confirm",
+            width: 400
+          });
+        }
+      ];
+    })
+  )
+};
+const Modal = Object.assign(_Modal, {
+  install: (app) => {
+    app.component("Yc" + _Modal.name, _Modal);
+    app.config.globalProperties.$modal = Object.assign(Modal, modalMethod);
+  },
+  ...modalMethod
+});
+export {
+  Modal as default
+};