vue-devui 1.0.0-beta.1 → 1.0.0-beta.13

package/modal/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, getCurrentInstance, nextTick, toRef, onBeforeUnmount, isRef, h, render, readonly, Fragment, mergeProps } from "vue";
+import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, toRef, isRef, h, render, readonly, mergeProps, resolveDirective } from "vue";
 const modalProps = {
   width: {
     type: String,
@@ -68,7 +68,7 @@ const modalProps = {
   },
   backdropCloseable: {
     type: Boolean,
-    default: false
+    default: true
   },
   bodyScrollable: {
     type: Boolean,
@@ -115,9 +115,6 @@ const overlayProps = {
   visible: {
     type: Boolean
   },
-  "onUpdate:visible": {
-    type: Function
-  },
   backgroundBlock: {
     type: Boolean,
     default: false
@@ -129,27 +126,57 @@ const overlayProps = {
   backgroundStyle: {
     type: [String, Object]
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function
   },
   backdropClose: {
     type: Boolean,
     default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
   }
 };
-function useOverlayLogic(props) {
+const overlayEmits = ["update:visible", "backdropClick"];
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const flexibleOverlayProps = __spreadValues({
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "top",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  }
+}, overlayProps);
+function useOverlayLogic(props, ctx) {
   const backgroundClass = computed(() => {
-    return ["devui-overlay-background", "devui-overlay-background__color", props.backgroundClass];
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
   });
   const overlayClass = computed(() => {
     return "devui-overlay";
   });
   const handleBackdropClick = (event) => {
-    var _a, _b;
+    var _a;
     event.preventDefault();
-    (_a = props.backdropClick) == null ? void 0 : _a.call(props);
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
     if (props.backdropClose) {
-      (_b = props["onUpdate:visible"]) == null ? void 0 : _b.call(props, false);
+      ctx.emit("update:visible", false);
     }
   };
   const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
@@ -185,19 +212,15 @@ function useOverlayLogic(props) {
 }
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
-  props: __spreadProps(__spreadValues({}, overlayProps), {
-    overlayStyle: {
-      type: Object,
-      default: void 0
-    }
-  }),
+  props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const {
       backgroundClass,
       overlayClass,
       handleBackdropClick,
       handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
+    } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
       default: () => [withDirectives(createVNode("div", {
         "class": backgroundClass.value,
@@ -211,84 +234,70 @@ const FixedOverlay = defineComponent({
     });
   }
 });
+function isComponent(target) {
+  return !!(target == null ? void 0 : target.$el);
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
 const FlexibleOverlay = defineComponent({
   name: "DFlexibleOverlay",
-  props: __spreadValues({
-    origin: {
-      type: Object,
-      require: true
-    },
-    position: {
-      type: Object,
-      default: () => ({
-        originX: "left",
-        originY: "top",
-        overlayX: "left",
-        overlayY: "top"
-      })
-    }
-  }, overlayProps),
-  emits: ["onUpdate:visible"],
+  props: flexibleOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const overlayRef = ref(null);
     const positionedStyle = reactive({
       position: "absolute"
     });
-    const instance = getCurrentInstance();
     onMounted(async () => {
-      await nextTick();
-      const overlay2 = overlayRef.value;
-      if (!overlay2) {
-        return;
-      }
-      const origin = getOrigin(props.origin);
-      if (!origin) {
-        return;
-      }
-      const handleRectChange = (rect) => {
-        const point = calculatePosition(props.position, rect, origin);
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
         positionedStyle.left = `${point.x}px`;
         positionedStyle.top = `${point.y}px`;
       };
-      const handleChange = () => handleRectChange(overlay2.getBoundingClientRect());
-      watch(toRef(props, "visible"), (visible, ov, onInvalidate) => {
-        if (visible) {
-          subscribeLayoutEvent(handleChange);
-        } else {
-          unsbscribeLayoutEvent(handleChange);
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
         }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
+      const visibleRef = toRef(props, "visible");
+      const positionRef = toRef(props, "position");
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
+        }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
         onInvalidate(() => {
-          unsbscribeLayoutEvent(handleChange);
+          unsubscriptions.forEach((fn) => fn());
         });
       });
-      watch(toRef(props, "position"), () => {
-        handleChange();
-      });
-      const resizeObserver = new ResizeObserver((entries) => {
-        handleRectChange(entries[0].contentRect);
-      });
-      resizeObserver.observe(overlay2);
-      onBeforeUnmount(() => {
-        resizeObserver.disconnect();
-      }, instance);
-      if (origin instanceof Element) {
-        const observer = new MutationObserver(handleChange);
-        observer.observe(origin, {
-          attributeFilter: ["style"]
-        });
-        onBeforeUnmount(() => {
-          observer.disconnect();
-        }, instance);
-      }
-    }, instance);
+    });
     const {
       backgroundClass,
       overlayClass,
       handleBackdropClick,
       handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
+    } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
       default: () => [withDirectives(createVNode("div", {
+        "style": props.backgroundStyle,
         "class": backgroundClass.value,
         "onClick": handleBackdropClick
       }, [createVNode("div", {
@@ -300,15 +309,6 @@ const FlexibleOverlay = defineComponent({
     });
   }
 });
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
-  }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
-  }
-  return null;
-}
 function getOrigin(origin) {
   if (origin instanceof Element) {
     return origin;
@@ -316,17 +316,14 @@ function getOrigin(origin) {
   if (isRef(origin)) {
     return getElement(origin.value);
   }
+  if (isComponent(origin)) {
+    return getElement(origin);
+  }
   return origin;
 }
-function calculatePosition(position, panelOrRect, origin) {
+function calculatePosition(position, rect, origin) {
   const originRect = getOriginRect(origin);
   const originPoint = getOriginRelativePoint(originRect, position);
-  let rect;
-  if (panelOrRect instanceof HTMLElement) {
-    rect = panelOrRect.getBoundingClientRect();
-  } else {
-    rect = panelOrRect;
-  }
   return getOverlayPoint(originPoint, rect, position);
 }
 function getOriginRect(origin) {
@@ -390,11 +387,31 @@ function subscribeLayoutEvent(event) {
   window.addEventListener("scroll", event, true);
   window.addEventListener("resize", event);
   window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
 }
-function unsbscribeLayoutEvent(event) {
-  window.removeEventListener("scroll", event, true);
-  window.removeEventListener("resize", event);
-  window.removeEventListener("orientationchange", event);
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
+}
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
 }
 const inBrowser = typeof window !== "undefined";
 FlexibleOverlay.install = function(app) {
@@ -544,7 +561,7 @@ const dialogProps = {
   },
   backdropCloseable: {
     type: Boolean,
-    default: false
+    default: true
   },
   bodyScrollable: {
     type: Boolean,
@@ -688,11 +705,12 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
-        width: size
+        width: size,
+        verticalAlign: "text-bottom"
       }
     }, null) : createVNode("i", {
       "class": `${classPrefix} ${classPrefix}-${name}`,
@@ -700,18 +718,214 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
 const buttonProps = {
   type: {
     type: String,
     default: "button"
   },
-  btnStyle: {
+  variant: {
     type: String,
     default: "primary"
   },
@@ -753,6 +967,9 @@ const buttonProps = {
 var button = "";
 var Button = defineComponent({
   name: "DButton",
+  directives: {
+    devLoading: loadingDirective
+  },
   props: buttonProps,
   setup(props, ctx) {
     const buttonContent = ref(null);
@@ -766,15 +983,15 @@ var Button = defineComponent({
     const hasContent = computed(() => ctx.slots.default);
     const btnClass = computed(() => {
       const {
-        btnStyle,
+        variant,
         size,
         position,
         bordered,
         icon
       } = props;
-      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
       const borderedClass = bordered ? "bordered" : "";
-      const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
+      const btnIcon = !!icon && !hasContent.value && variant !== "primary" ? "d-btn-icon" : "";
       const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
       return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
     });
@@ -800,7 +1017,7 @@ var Button = defineComponent({
       } = props;
       return createVNode("div", mergeProps({
         "class": "devui-btn-host"
-      }, ctx.attrs), [createVNode("button", {
+      }, ctx.attrs), [withDirectives(createVNode("button", {
         "class": btnClass.value,
         "type": type,
         "disabled": disabled,
@@ -809,16 +1026,18 @@ var Button = defineComponent({
         },
         "onClick": onClick
       }, [!!icon ? createVNode(Icon, {
-        "name": props.icon,
+        "name": icon,
         "class": iconClass.value
       }, null) : null, createVNode("span", {
         "class": "button-content",
         "ref": buttonContent
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("devLoading"), showLoading]])]);
     };
   }
 });
+defineComponent(Loading);
 Button.install = function(app) {
+  app.directive("dLoading", loadingDirective);
   app.component(Button.name, Button);
 };
 function _isSlot(s) {
@@ -872,7 +1091,7 @@ var Dialog = defineComponent({
     const buttonsRef = computed(() => {
       return props.buttons.map((buttonProps2, index2) => {
         const {
-          btnStyle,
+          variant,
           disabled,
           handler,
           text
@@ -883,7 +1102,7 @@ var Dialog = defineComponent({
             display: "inline-block",
             margin: "0 5px"
           },
-          "btnStyle": btnStyle,
+          "variant": variant,
           "disabled": disabled,
           "onClick": handler
         }, _isSlot(text) ? text : {
@@ -931,7 +1150,7 @@ var Dialog = defineComponent({
         }, null) : null, createVNode("span", null, [props.title]), createVNode(Button, {
           "class": "btn-close",
           "icon": "close",
-          "btnStyle": "text-dark",
+          "variant": "text-dark",
           "onClick": closeModal
         }, null)]), createVNode("div", {
           "class": "devui-modal-body"
@@ -990,7 +1209,7 @@ Modal.install = function(app) {
 var index = {
   title: "Modal \u5F39\u7A97",
   category: "\u53CD\u9988",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
     app.use(Modal);
     if (!inBrowser) {