bani-ui 1.0.2-alpha.1 → 1.0.2-alpha.11

package/dist/es/{Button-Bwc0dTzv.js → Button-CsYVYbtY.js}

@@ -1,9 +1,9 @@
 import { defineComponent, inject, computed, useSlots, ref, openBlock, createBlock, resolveDynamicComponent, unref, normalizeClass, withCtx, renderSlot, createVNode, normalizeStyle, createCommentVNode } from "vue";
-import { _ as _sfc_main$1 } from "./Icon-CseJvWyQ.js";
+import { _ as _sfc_main$1 } from "./Icon-C5WM3GNh.js";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { t as throttle } from "./vendor-BkjRo-uZ.js";
-import { w as withInstall } from "./utils-B5aZ4w8w.js";
+import { t as throttle } from "./vendor-R0ZbR4ac.js";
+import { w as withInstall } from "./utils-Uf9tqvV5.js";
 const BUTTON_GROUP_CTX_KEY = Symbol(
   "BUTTON_GROUP_CTX_KEY"
 );
@@ -49,7 +49,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { trailing: false }
     );
     __expose({
-      ref: _ref,
+      get ref() {
+        return _ref.value ?? void 0;
+      },
       disabled,
       size,
       type
@@ -98,5 +100,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 const BnButton = withInstall(_sfc_main);
 export {
   BUTTON_GROUP_CTX_KEY as B,
+  _sfc_main as _,
   BnButton as a
 };

package/dist/es/{ButtonGroup-C4UHHgrM.js → ButtonGroup-CUSVCVC9.js}

@@ -1,6 +1,7 @@
 import { defineComponent, provide, reactive, toRef, openBlock, createElementBlock, renderSlot } from "vue";
-import { B as BUTTON_GROUP_CTX_KEY } from "./Button-Bwc0dTzv.js";
-import { w as withInstall } from "./utils-B5aZ4w8w.js";
+import { B as BUTTON_GROUP_CTX_KEY } from "./Button-CsYVYbtY.js";
+import { w as withInstall } from "./utils-Uf9tqvV5.js";
+import "@fortawesome/free-solid-svg-icons";
 const _hoisted_1 = { class: "er-button-group" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -31,5 +32,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const BnButtonGroup = withInstall(_sfc_main);
 export {
-  BnButtonGroup as B
+  BnButtonGroup as B,
+  _sfc_main as _
 };

package/dist/es/Dropdown-BVnXCHJZ.js

@@ -0,0 +1,175 @@
+import { defineComponent, inject, computed, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeClass, unref, renderSlot, createTextVNode, toDisplayString, useSlots, ref, provide, createVNode, mergeProps, withCtx, createBlock, renderList } from "vue";
+import { b as useId } from "./hooks-D92zul9o.js";
+import { _ as _sfc_main$2 } from "./ButtonGroup-CUSVCVC9.js";
+import { _ as _sfc_main$3 } from "./Button-CsYVYbtY.js";
+import { B as BnTooltip } from "./Tooltip-BF6cY52d.js";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { p as omit, k as isNil } from "./vendor-R0ZbR4ac.js";
+import { w as withInstall } from "./utils-Uf9tqvV5.js";
+const DROPDOWN_CTX_KEY = Symbol("dropdownContext");
+const _hoisted_1$1 = {
+  key: 0,
+  role: "separator",
+  class: "divided-placeholder"
+};
+const _hoisted_2 = ["id"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "BnDropdownItem",
+    inheritAttrs: false
+  },
+  __name: "DropdownItem",
+  props: {
+    command: { default: useId().value },
+    label: {},
+    disabled: { type: Boolean, default: false },
+    divided: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = inject(DROPDOWN_CTX_KEY);
+    const size = computed(() => ctx == null ? void 0 : ctx.size.value);
+    function handleClick() {
+      if (props.disabled) return;
+      ctx == null ? void 0 : ctx.handleItemClick(props);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.divided ? (openBlock(), createElementBlock("li", _hoisted_1$1)) : createCommentVNode("", true),
+        createElementVNode("li", {
+          id: `dropdown-item-${__props.command ?? unref(useId)().value}`,
+          class: normalizeClass({
+            "er-dropdown__item": true,
+            ["er-dropdown__item--" + size.value]: size.value,
+            "is-disabled": __props.disabled,
+            "is-divided": __props.divided
+          }),
+          onClick: handleClick
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ], 10, _hoisted_2)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1 = { class: "er-dropdown__menu" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "BnDropdown",
+    inheritAttrs: false
+  },
+  __name: "Dropdown",
+  props: {
+    type: {},
+    size: {},
+    items: { default: () => [] },
+    hideOnClick: { type: Boolean, default: true },
+    splitButton: { type: Boolean },
+    content: {},
+    trigger: {},
+    placement: {},
+    manual: { type: Boolean },
+    disabled: { type: Boolean },
+    popperOptions: {},
+    transition: {},
+    showTimeout: {},
+    hideTimeout: {}
+  },
+  emits: ["visible-change", "command", "click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    library.add(faAngleDown);
+    const props = __props;
+    const emits = __emit;
+    useSlots();
+    const tooltipRef = ref();
+    const triggerRef = ref();
+    const virtualRef = computed(() => {
+      var _a;
+      return ((_a = triggerRef.value) == null ? void 0 : _a.ref) ?? void 0;
+    });
+    const tooltipProps = computed(
+      () => omit(props, ["items", "hideAfterClick", "size", "type", "splitButton"])
+    );
+    function handleItemClick(e) {
+      var _a;
+      props.hideOnClick && ((_a = tooltipRef.value) == null ? void 0 : _a.hide());
+      !isNil(e.command) && emits("command", e.command);
+    }
+    provide(DROPDOWN_CTX_KEY, {
+      handleItemClick,
+      size: computed(() => props.size)
+    });
+    __expose({
+      open: () => {
+        var _a;
+        return (_a = tooltipRef.value) == null ? void 0 : _a.show();
+      },
+      close: () => {
+        var _a;
+        return (_a = tooltipRef.value) == null ? void 0 : _a.hide();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["er-dropdown", { "is-disabled": props.disabled }])
+      }, [
+        createVNode(BnTooltip, mergeProps({
+          ref_key: "tooltipRef",
+          ref: tooltipRef
+        }, tooltipProps.value, {
+          "virtual-triggering": __props.splitButton,
+          "virtual-ref": virtualRef.value,
+          onVisibleChange: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("visible-change", $event))
+        }), {
+          content: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              renderSlot(_ctx.$slots, "dropdown", {}, () => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                  return openBlock(), createBlock(_sfc_main$1, mergeProps({
+                    key: item.command,
+                    ref_for: true
+                  }, item), null, 16);
+                }), 128))
+              ])
+            ])
+          ]),
+          default: withCtx(() => [
+            __props.splitButton ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              type: __props.type,
+              size: __props.size,
+              disabled: __props.disabled
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$3, {
+                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _: 3
+                }),
+                createVNode(_sfc_main$3, {
+                  ref_key: "triggerRef",
+                  ref: triggerRef,
+                  icon: "angle-down"
+                }, null, 512)
+              ]),
+              _: 3
+            }, 8, ["type", "size", "disabled"])) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          ]),
+          _: 3
+        }, 16, ["virtual-triggering", "virtual-ref"])
+      ], 2);
+    };
+  }
+});
+const BnDropdown = withInstall(_sfc_main);
+const BnDropdownItem = withInstall(_sfc_main$1);
+export {
+  BnDropdown as B,
+  BnDropdownItem as a
+};

package/dist/es/{Icon-CseJvWyQ.js → Icon-C5WM3GNh.js}

@@ -1,7 +1,8 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, createVNode, unref, normalizeProps, guardReactiveProps } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { o as omit } from "./vendor-BkjRo-uZ.js";
-import { w as withInstall } from "./utils-B5aZ4w8w.js";
+import { p as omit } from "./vendor-R0ZbR4ac.js";
+import { w as withInstall } from "./utils-Uf9tqvV5.js";
+import "@fortawesome/free-solid-svg-icons";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "BnIcon",

package/dist/es/Loading-DEDOSX2q.js

@@ -0,0 +1,269 @@
+import { defineComponent, useCssVars, computed, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createCommentVNode, createElementBlock, toDisplayString, vShow, nextTick, ref, reactive, createApp } from "vue";
+import { e as useZIndex } from "./hooks-D92zul9o.js";
+import { _ as _sfc_main$1 } from "./Icon-C5WM3GNh.js";
+import { m as isString, k as isNil, a as defer, e as delay } from "./vendor-R0ZbR4ac.js";
+const _hoisted_1 = { class: "er-loading__spinner" };
+const _hoisted_2 = {
+  key: 1,
+  class: "er-loading-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "BnLoading",
+    inheritAttrs: false
+  },
+  __name: "Loading",
+  props: {
+    visible: {},
+    background: {},
+    spinner: {},
+    text: {},
+    fullscreen: {},
+    lock: {},
+    beforeClose: { type: Function },
+    closed: { type: Function },
+    target: {},
+    body: { type: Boolean },
+    zIndex: {},
+    onAfterLeave: { type: Function }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v098d7d6e": _ctx.background,
+      "v1880a613": _ctx.zIndex
+    }));
+    const props = __props;
+    const iconName = computed(() => {
+      if (isString(props.spinner)) {
+        return props.spinner;
+      }
+      return "spinner";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: "fade-in-linear",
+        onAfterLeave: __props.onAfterLeave
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            class: normalizeClass(["er-loading er-loading__mask", { "is-fullscreen": __props.fullscreen }])
+          }, [
+            createElementVNode("div", _hoisted_1, [
+              props.spinner !== false ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                icon: iconName.value,
+                spin: ""
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              __props.text ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+            ])
+          ], 2), [
+            [vShow, props.visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["onAfterLeave"]);
+    };
+  }
+});
+const RELATIVE_CLASS = "er-loading-parent--relative";
+const HIDDEN_CLASS = "er-loading-parent--hiden";
+const LOADING_NUMB_KEY = "er-loading-numb";
+const instanceMap = /* @__PURE__ */ new Map();
+const { nextZIndex } = useZIndex(3e4);
+function createLoadingComponent(options) {
+  const visible = ref(options.visible);
+  const afterLeaveFlag = ref(false);
+  const handleAfterLeave = () => {
+    if (!afterLeaveFlag.value) return;
+    destory();
+  };
+  const data = reactive({
+    ...options,
+    onAfterLeave: handleAfterLeave
+  });
+  const setText = (text) => data.text = text;
+  const destory = () => {
+    var _a, _b;
+    const target = data.parent;
+    subtLoadingNumb(target);
+    if (getLoadingNumb(target)) return;
+    delay(() => {
+      removeRelativeClass(target);
+      removeHiddenClass(target);
+    }, 1);
+    instanceMap.delete(target ?? document.body);
+    (_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
+    app.unmount();
+  };
+  let afterLeaveTimer;
+  const close = () => {
+    var _a;
+    if (options.beforeClose && !options.beforeClose()) return;
+    afterLeaveFlag.value = true;
+    clearTimeout(afterLeaveTimer);
+    afterLeaveTimer = defer(handleAfterLeave);
+    visible.value = false;
+    (_a = options.closed) == null ? void 0 : _a.call(options);
+  };
+  const app = createApp(_sfc_main, {
+    ...data,
+    zIndex: data.fullscreen ? nextZIndex() : void 0,
+    visible
+  });
+  const vm = app.mount(document.createElement("div"));
+  return {
+    get $el() {
+      return vm.$el;
+    },
+    vm,
+    close,
+    visible,
+    setText
+  };
+}
+function resolveOptions(options) {
+  let target;
+  if (isString(options.target)) {
+    target = document.querySelector(options.target) ?? document.body;
+  } else {
+    target = options.target || document.body;
+  }
+  return {
+    parent: target === document.body || options.body ? document.body : target,
+    background: options.background ?? "rgba(0, 0, 0, 0.5)",
+    spinner: options.spinner,
+    text: options.text,
+    fullscreen: target === document.body && (options.fullscreen ?? true),
+    lock: options.lock ?? false,
+    visible: options.visible ?? true,
+    target
+  };
+}
+function addRelativeClass(target = document.body) {
+  target.classList.add(RELATIVE_CLASS);
+}
+function removeRelativeClass(target = document.body) {
+  target.classList.remove(RELATIVE_CLASS);
+}
+function addHiddenClass(target = document.body) {
+  target.classList.add(HIDDEN_CLASS);
+}
+function removeHiddenClass(target = document.body) {
+  target.classList.remove(HIDDEN_CLASS);
+}
+function getLoadingNumb(target = document.body) {
+  return target.getAttribute(LOADING_NUMB_KEY);
+}
+function removeLoadingNumb(target = document.body) {
+  target.removeAttribute(LOADING_NUMB_KEY);
+}
+function addLoadingNumb(target = document.body) {
+  const numb = getLoadingNumb(target) ?? "0";
+  target.setAttribute(LOADING_NUMB_KEY, `${Number.parseInt(numb) + 1}`);
+}
+function subtLoadingNumb(target = document.body) {
+  const numb = getLoadingNumb(target);
+  if (numb) {
+    const newNumb = Number.parseInt(numb) - 1;
+    if (newNumb === 0) {
+      removeLoadingNumb(target);
+    } else {
+      target.setAttribute(LOADING_NUMB_KEY, `${newNumb}`);
+    }
+  }
+}
+function addClass(options, parent = document.body) {
+  if (options.lock) {
+    addHiddenClass(parent);
+  } else {
+    removeHiddenClass(parent);
+  }
+  addRelativeClass(parent);
+}
+let fullscreenInstance = null;
+function Loading(options = {}) {
+  var _a;
+  const resolved = resolveOptions(options);
+  const target = resolved.parent ?? document.body;
+  if (resolved.fullscreen && !isNil(fullscreenInstance)) {
+    return fullscreenInstance;
+  }
+  addLoadingNumb(resolved == null ? void 0 : resolved.parent);
+  if (instanceMap.has(target)) {
+    return instanceMap.get(target);
+  }
+  const instance = createLoadingComponent({
+    ...resolved,
+    closed: () => {
+      var _a2;
+      (_a2 = resolved.closed) == null ? void 0 : _a2.call(resolved);
+      if (resolved.fullscreen) {
+        fullscreenInstance = null;
+      }
+    }
+  });
+  addClass(options, resolved == null ? void 0 : resolved.parent);
+  (_a = resolved.parent) == null ? void 0 : _a.appendChild(instance.$el);
+  nextTick(() => instance.visible.value = !!resolved.visible);
+  if (resolved.fullscreen) {
+    fullscreenInstance = instance;
+  }
+  instanceMap.set(target, instance);
+  return instance;
+}
+const INSTANCE_KEY = Symbol("loading");
+function createInstance(el, binding) {
+  const getProp = (name) => {
+    return el.getAttribute(`er-loading-${name}`);
+  };
+  const getModifier = (name) => {
+    return binding.modifiers[name];
+  };
+  const fullscreen = getModifier("fullscreen");
+  const options = {
+    text: getProp("text"),
+    spinner: getProp("spinner"),
+    background: getProp("background"),
+    target: fullscreen ? void 0 : el,
+    body: getModifier("body"),
+    lock: getModifier("lock"),
+    fullscreen
+  };
+  el[INSTANCE_KEY] = {
+    options,
+    instance: Loading(options)
+  };
+}
+const vLoading = {
+  mounted(el, binding) {
+    if (binding.value) createInstance(el, binding);
+  },
+  updated(el, binding) {
+    var _a, _b;
+    if (binding.oldValue === binding.value) return;
+    if (binding.value && !binding.oldValue) {
+      createInstance(el, binding);
+      return;
+    }
+    (_b = (_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance) == null ? void 0 : _b.close();
+  },
+  unmounted(el) {
+    var _a;
+    (_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close();
+    el[INSTANCE_KEY] = void 0;
+  }
+};
+const BnLoading = {
+  name: "BnLoading",
+  install(app) {
+    app.directive("loading", vLoading);
+    app.config.globalProperties.$loading = Loading;
+  },
+  directive: vLoading,
+  service: Loading
+};
+export {
+  BnLoading as B,
+  Loading as L,
+  vLoading as v
+};

package/dist/es/Message-DxBWtBTF.js

@@ -0,0 +1,203 @@
+import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createVNode, renderSlot, unref, createCommentVNode, createElementBlock, withModifiers, vShow, shallowReactive, isVNode, h, render } from "vue";
+import { d as useOffset, a as useEventListener, e as useZIndex, b as useId } from "./hooks-D92zul9o.js";
+import { t as typeIconMap, R as RenderVnode, b as withInstallFunction } from "./utils-Uf9tqvV5.js";
+import { _ as _sfc_main$1 } from "./Icon-C5WM3GNh.js";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { b as bind, e as delay, g as forEach, m as isString, f as findIndex, h as get, s as set } from "./vendor-R0ZbR4ac.js";
+const messageTypes = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "error"
+];
+const _hoisted_1 = { class: "er-message__content" };
+const _hoisted_2 = {
+  key: 0,
+  class: "er-message__close"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "BnMessage"
+  },
+  __name: "Message",
+  props: {
+    id: {},
+    message: {},
+    duration: { default: 3e3 },
+    showClose: { type: Boolean },
+    center: { type: Boolean },
+    type: { default: "info" },
+    offset: { default: 10 },
+    zIndex: {},
+    transitionName: { default: "fade-up" },
+    onDestory: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const visible = ref(false);
+    const messageRef = ref();
+    const iconName = computed(() => typeIconMap.get(props.type) ?? faCircleInfo);
+    const boxHeight = ref(0);
+    const { topOffset, bottomOffset } = useOffset({
+      getLastBottomOffset: bind(getLastBottomOffset, props),
+      offset: props.offset,
+      boxHeight
+    });
+    const cssStyle = computed(() => ({
+      top: topOffset.value + "px",
+      zIndex: props.zIndex
+    }));
+    let timer;
+    function startTimmer() {
+      if (props.duration === 0) return;
+      timer = delay(close, props.duration);
+    }
+    function clearTimer() {
+      clearTimeout(timer);
+    }
+    function close() {
+      visible.value = false;
+    }
+    onMounted(() => {
+      visible.value = true;
+      startTimmer();
+    });
+    watch(visible, (val) => {
+      if (!val) boxHeight.value = -props.offset;
+    });
+    useEventListener(document, "keydown", (e) => {
+      const { code } = e;
+      if (code === "Escape") {
+        close();
+      }
+    });
+    __expose({
+      bottomOffset,
+      close
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: __props.transitionName,
+        onEnter: _cache[0] || (_cache[0] = ($event) => boxHeight.value = messageRef.value.getBoundingClientRect().height),
+        onAfterLeave: _cache[1] || (_cache[1] = ($event) => !visible.value && __props.onDestory())
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            ref_key: "messageRef",
+            ref: messageRef,
+            class: normalizeClass(["er-message", {
+              [`er-message--${__props.type}`]: __props.type,
+              "is-close": __props.showClose,
+              "text-center": __props.center
+            }]),
+            style: normalizeStyle(cssStyle.value),
+            role: "alert",
+            onMouseenter: clearTimer,
+            onMouseleave: startTimmer
+          }, [
+            createVNode(_sfc_main$1, {
+              class: "er-message__icon",
+              icon: iconName.value
+            }, null, 8, ["icon"]),
+            createElementVNode("div", _hoisted_1, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                __props.message ? (openBlock(), createBlock(unref(RenderVnode), {
+                  key: 0,
+                  vNode: __props.message
+                }, null, 8, ["vNode"])) : createCommentVNode("", true)
+              ])
+            ]),
+            __props.showClose ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(_sfc_main$1, {
+                icon: "xmark",
+                onClick: withModifiers(close, ["stop"])
+              })
+            ])) : createCommentVNode("", true)
+          ], 38), [
+            [vShow, visible.value]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"]);
+    };
+  }
+});
+const instances = shallowReactive([]);
+const { nextZIndex } = useZIndex();
+const messageDefaults = {
+  type: "info",
+  duration: 3e3,
+  offset: 10,
+  transitionName: "fade-up"
+};
+function normalizeOptions(options) {
+  const result = !options || isVNode(options) || isString(options) ? {
+    message: options
+  } : options;
+  return { ...messageDefaults, ...result };
+}
+function createMessage(props) {
+  const id = useId().value;
+  const container = document.createElement("div");
+  const destory = () => {
+    const idx = findIndex(instances, { id });
+    if (idx === -1) return;
+    instances.splice(idx, 1);
+    render(null, container);
+  };
+  const _props = {
+    ...props,
+    id,
+    zIndex: nextZIndex(),
+    onDestory: destory
+  };
+  const vnode = h(_sfc_main, _props);
+  render(vnode, container);
+  document.body.appendChild(container.firstElementChild);
+  const vm = vnode.component;
+  const handler = {
+    close: () => vm.exposed.close()
+  };
+  const instance = {
+    props: _props,
+    id,
+    vm,
+    vnode,
+    handler
+  };
+  instances.push(instance);
+  return instance;
+}
+const message = function(options = {}) {
+  const normalized = normalizeOptions(options);
+  const instance = createMessage(normalized);
+  return instance.handler;
+};
+function getLastBottomOffset() {
+  const idx = findIndex(instances, { id: this.id });
+  if (idx <= 0) return 0;
+  return get(instances, [idx - 1, "vm", "exposed", "bottomOffset", "value"]);
+}
+function closeAll(type) {
+  forEach(instances, (instance) => {
+    if (type) {
+      instance.props.type === type && instance.handler.close();
+      return;
+    }
+    instance.handler.close();
+  });
+}
+forEach(
+  messageTypes,
+  (type) => set(message, type, (options) => {
+    const normalized = normalizeOptions(options);
+    return message({ ...normalized, type });
+  })
+);
+message.closeAll = closeAll;
+const BnMessage = withInstallFunction(message, "$message");
+export {
+  BnMessage as B,
+  messageTypes as m
+};