@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/link/index.css

@@ -18,9 +18,6 @@
   width: 14px;
   fill: var(--text-color);
 }
-.px-link-icon__loading {
-  animation: px-icon-spin 1s linear infinite;
-}
 .px-link__loading {
   cursor: auto;
 }
@@ -169,8 +166,8 @@
   --text-color: var(--px-neutral-10);
 }
 .px-link.px-link__info:hover {
-  --text-color: var(--px-neutral-7);
+  --text-color: var(--px-neutral-8);
 }
 .px-link.px-link__info:active {
-  --text-color: var(--px-neutral-8);
+  --text-color: var(--px-neutral-9);
 }

package/es/link/index.js

@@ -1,7 +1,7 @@
 import './css.js'
 import { defineComponent, useSlots, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, renderSlot, unref, createBlock } from "vue";
 import { p as parseColor, a as generatePalette, r as rgbaColor2string } from "../share/util/color.js";
-import { S as SpinnerThirdSolid } from "../button/index.js";
+import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
 import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
 const _hoisted_1 = ["href", "target"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -46,7 +46,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return rgbaColor2string(palette2[5]);
     };
     const textColor = computed(() => {
-      return getTextColorWithPalette(palette.value, props.disabled, props.loading, hoverFlag.value, activeFlag.value);
+      return getTextColorWithPalette(
+        palette.value,
+        props.disabled,
+        props.loading,
+        hoverFlag.value,
+        activeFlag.value
+      );
     });
     const clickHandler = (e) => {
       if (props.disabled || props.loading) {
@@ -83,13 +89,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           [
             props.loading ? (openBlock(), createBlock(unref(SpinnerThirdSolid), {
               key: 0,
-              class: normalizeClass(["px-link-icon", {
-                "px-link-icon__loading": props.loading
-              }]),
+              class: "px-link-icon px-animation__loading",
               style: normalizeStyle({
                 fill: textColor.value
               })
-            }, null, 8, ["class", "style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
+            }, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
           ],
           2
           /* CLASS */

package/es/main/css.js

@@ -1,2 +1,2 @@
-import './index.css'
 import '../index.css'
+import './index.css'

package/es/mask/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/mask/index.css

@@ -0,0 +1,17 @@
+.px-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-width: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.px-mask-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}

package/es/mask/index.d.ts

@@ -0,0 +1,8 @@
+import type { MaskProps } from './type';
+declare const _default: import("vue").DefineComponent<MaskProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MaskProps> & Readonly<{}>, {
+    zIndex: number;
+    step: number;
+    grid: boolean;
+    lineWidth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/mask/index.js

@@ -0,0 +1,117 @@
+import './css.js'
+import { defineComponent, shallowRef, ref, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, createCommentVNode } from "vue";
+import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { a as canvasPreprocess } from "../share/util/plot.js";
+import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { g as getGlobalThemeColor, r as rgbaColor2string } from "../share/util/color.js";
+import { C as COVER_Z_INDEX } from "../share/const/index.js";
+import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Mask"
+  },
+  __name: "index",
+  props: {
+    color: null,
+    step: { default: 1 },
+    lineWidth: { default: 2 },
+    grid: { type: Boolean, default: true },
+    zIndex: { default: COVER_Z_INDEX }
+  },
+  setup(__props) {
+    const darkMode = useDarkMode();
+    const props = __props;
+    const canvasRef = shallowRef(null);
+    const wrapperRef = shallowRef(null);
+    const calcDefaultBackgroundColor = () => {
+      const color = getGlobalThemeColor("neutral", 8);
+      color.a = Math.floor(255 * 0.5);
+      return rgbaColor2string(color);
+    };
+    const defaultBackgroundColor = ref(calcDefaultBackgroundColor());
+    const drawGrid = () => {
+      if (!props.grid) {
+        return;
+      }
+      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+      if (!preprocessData) {
+        return;
+      }
+      const { ctx, width, height } = preprocessData;
+      const lineWidth = props.lineWidth;
+      ctx.clearRect(0, 0, width, height);
+      ctx.strokeStyle = props.color || defaultBackgroundColor.value;
+      ctx.lineWidth = lineWidth;
+      const step = Math.max(1, props.step);
+      for (let x = 0; x <= width; x += step + lineWidth) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 0; y <= height; y += step + lineWidth) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+    };
+    onMounted(() => {
+      nextTick(() => {
+        drawGrid();
+      });
+    });
+    useResizeObserver(wrapperRef, drawGrid);
+    useWatchGlobalCssVal(() => {
+      drawGrid();
+      defaultBackgroundColor.value = calcDefaultBackgroundColor();
+    });
+    watch(
+      [
+        darkMode,
+        defaultBackgroundColor,
+        () => props.grid,
+        () => props.color,
+        () => props.step,
+        () => props.lineWidth
+      ],
+      () => {
+        defaultBackgroundColor.value = calcDefaultBackgroundColor();
+        drawGrid();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: "pixelium px-mask",
+          style: normalizeStyle({
+            zIndex: props.zIndex,
+            backgroundColor: !props.grid ? props.color || defaultBackgroundColor.value : void 0
+          }),
+          ref_key: "wrapperRef",
+          ref: wrapperRef
+        },
+        [
+          props.grid ? (openBlock(), createElementBlock(
+            "canvas",
+            {
+              key: 0,
+              ref_key: "canvasRef",
+              ref: canvasRef,
+              class: "px-mask-canvas"
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )) : createCommentVNode("v-if", true)
+        ],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/mask/type.d.ts

@@ -0,0 +1,27 @@
+export type MaskProps = {
+    /**
+     * @property {string} [color]
+     * @version 0.0.2
+     */
+    color?: string;
+    /**
+     * @property {number} [step=1]
+     * @version 0.0.2
+     */
+    step?: number;
+    /**
+     * @property {number} [lineWidth=2]
+     * @version 0.0.2
+     */
+    lineWidth?: number;
+    /**
+     * @property {boolean} [grid=true]
+     * @version 0.0.2
+     */
+    grid?: boolean;
+    /**
+     * @property {number} [zIndex=20]
+     * @version 0.0.2
+     */
+    zIndex?: number;
+};

package/es/message/css.js

@@ -1,2 +1,2 @@
-import './index.css'
 import '../index.css'
+import './index.css'

package/es/message/index.css

@@ -39,19 +39,16 @@
   height: 16px;
   fill: var(--text-color);
 }
-.px-message-icon-wrapper svg.px-message-icon__loading {
-  animation: px-icon-spin 1s linear infinite;
-}
 .px-message-close-wrapper {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  margin-left: 8px;
+  margin-left: var(--px-interval-2);
 }
 .px-message-close-wrapper .px-message-icon {
   cursor: pointer;
-  width: 10px;
-  height: 10px;
+  width: 1em;
+  height: 1em;
   fill: var(--text-color);
   transition: 0.25s;
 }
@@ -59,62 +56,65 @@
   --text-color: var(--px-sakura-6);
 }
 .px-message.px-message__sakura .px-message-close-wrapper > .px-message-icon:hover {
-  --text-color: var(--px-sakura-5);
+  fill: var(--px-sakura-5);
 }
 .px-message.px-message__sakura .px-message-close-wrapper > .px-message-icon:active {
-  --text-color: var(--px-sakura-7);
+  fill: var(--px-sakura-7);
 }
 .px-message.px-message__success {
   --text-color: var(--px-success-6);
 }
 .px-message.px-message__success .px-message-close-wrapper > .px-message-icon:hover {
-  --text-color: var(--px-success-5);
+  fill: var(--px-success-5);
 }
 .px-message.px-message__success .px-message-close-wrapper > .px-message-icon:active {
-  --text-color: var(--px-success-7);
+  fill: var(--px-success-7);
 }
 .px-message.px-message__warning {
   --text-color: var(--px-warning-6);
 }
 .px-message.px-message__warning .px-message-close-wrapper > .px-message-icon:hover {
-  --text-color: var(--px-warning-5);
+  fill: var(--px-warning-5);
 }
 .px-message.px-message__warning .px-message-close-wrapper > .px-message-icon:active {
-  --text-color: var(--px-warning-7);
+  fill: var(--px-warning-7);
 }
 .px-message.px-message__info {
   --text-color: var(--px-primary-6);
 }
 .px-message.px-message__info .px-message-close-wrapper > .px-message-icon:hover {
-  --text-color: var(--px-primary-5);
+  fill: var(--px-primary-5);
 }
 .px-message.px-message__info .px-message-close-wrapper > .px-message-icon:active {
-  --text-color: var(--px-primary-7);
+  fill: var(--px-primary-7);
 }
 .px-message.px-message__error {
   --text-color: var(--px-danger-6);
 }
-.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:hover:hover {
-  --text-color: var(--px-danger-5);
+.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:hover {
+  fill: var(--px-danger-5);
 }
-.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:hover:active {
-  --text-color: var(--px-danger-7);
+.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:active {
+  fill: var(--px-danger-7);
 }
 .px-message.px-message__loading {
   --text-color: var(--px-neutral-8);
 }
-.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:hover:hover {
-  --text-color: var(--px-neutral-7);
+.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:hover {
+  fill: var(--px-neutral-7);
 }
-.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:hover:active {
-  --text-color: var(--px-neutral-9);
+.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:active {
+  fill: var(--px-neutral-9);
 }
 .px-message.px-message__normal {
   --text-color: var(--px-neutral-10);
 }
-.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:hover:hover {
-  --text-color: var(--px-neutral-9);
+.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon {
+  fill: var(--px-neutral-8);
 }
-.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:hover:active {
-  --text-color: var(--px-neutral-8);
+.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:active {
+  fill: var(--px-neutral-9);
 }

package/es/message/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<MessageProps, {
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     type: "info" | "success" | "warning" | "error" | "loading" | "normal" | "sakura";
-    content: import("../share/type").ValidContent;
+    content: import("..").ValidContent;
     duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/es/message/index.js

@@ -1,10 +1,12 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, ref, onMounted, onBeforeUnmount, computed, watch, createVNode, Transition } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, ref, onMounted, onBeforeUnmount, shallowRef, computed, watch, createVNode, Transition } from "vue";
 import { p as parseColor, a as generatePalette, r as rgbaColor2string, g as getGlobalThemeColor } from "../share/util/color.js";
 import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
 import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { S as SpinnerThirdSolid } from "../button/index.js";
+import { S as SpinnerThirdSolid, T as TimesCircleSolid } from "../auto-complete/index.js";
 import { p } from "../aside/index.js";
+import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { a as canvasPreprocess, c as calcPixelSize } from "../share/util/plot.js";
 const InfoCircleSolid = /* @__PURE__ */ defineComponent({
   props: {
     size: {},
@@ -139,37 +141,6 @@ const CheckCircleSolid = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Times = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M14 13h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2H9v-1H8V9H7V8H6V7H5V6H4V5H3V4H2V3h1V2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -227,8 +198,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("close", props.id);
       clearTimer();
     };
-    const canvasRef = ref();
-    const messageRef = ref();
+    const canvasRef = shallowRef(null);
+    const messageRef = shallowRef(null);
     const themeMap = (type) => {
       if (!type) {
         return "normal";
@@ -273,30 +244,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const draw = (ctx, width, height, borderColor, pixelSize) => {
-      ctx.fillStyle = `rgba(${borderColor.r}, ${borderColor.g}, ${borderColor.b}, ${borderColor.a / 255})`;
+      ctx.fillStyle = rgbaColor2string(borderColor);
       ctx.fillRect(pixelSize, 0, width - 2 * pixelSize, pixelSize);
       ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - 2 * pixelSize);
       ctx.fillRect(pixelSize, height - pixelSize, width - 2 * pixelSize, pixelSize);
       ctx.fillRect(0, pixelSize, pixelSize, height - 2 * pixelSize);
       const backgroundColor = getGlobalThemeColor("neutral", 1);
-      ctx.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a / 255})`;
+      ctx.fillStyle = rgbaColor2string(backgroundColor);
       ctx.fillRect(pixelSize, pixelSize, width - 2 * pixelSize, height - 2 * pixelSize);
     };
     const drawPixel = () => {
-      const globalComputedStyle = getComputedStyle(document.documentElement);
-      const pixelSize = parseInt(globalComputedStyle.getPropertyValue("--px-bit"));
-      if (!canvasRef.value || !messageRef.value) return;
-      const ctx = canvasRef.value.getContext("2d", {
-        willReadFrequently: true
-      });
-      const buttonRect = messageRef.value.getBoundingClientRect();
-      canvasRef.value.width = buttonRect.width;
-      canvasRef.value.height = buttonRect.height;
-      if (!ctx) return;
+      const preprocessData = canvasPreprocess(messageRef, canvasRef);
+      if (!preprocessData) {
+        return;
+      }
+      const {
+        ctx,
+        width,
+        height
+      } = preprocessData;
+      const pixelSize = calcPixelSize();
       const borderColor = getBorderColor(props.type, palette.value);
-      draw(ctx, canvasRef.value.width, canvasRef.value.height, borderColor, pixelSize);
+      draw(ctx, width, height, borderColor, pixelSize);
     };
     useResizeObserver(messageRef, drawPixel);
+    useWatchGlobalCssVal(drawPixel);
     watch([() => props.type, palette, darkMode], () => {
       setTimeout(() => {
         drawPixel();
@@ -342,7 +314,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             fill: textColor.value
           }
         }, null) : props.type === "loading" && createVNode(SpinnerThirdSolid, {
-          "class": "px-message-icon px-message-icon__loading",
+          "class": "px-message-icon px-animation__loading",
           "style": {
             fill: textColor.value
           }
@@ -353,7 +325,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }, [p(props.content) ? props.content : props.content()]), props.closable && createVNode("div", {
           "class": "px-message-close-wrapper"
-        }, [createVNode(Times, {
+        }, [createVNode(TimesCircleSolid, {
           "class": "px-message-icon",
           "style": {
             fill: closeIconColor.value

package/es/message-box/css.js

@@ -1,2 +1,2 @@
-import './message-box.css'
 import '../index.css'
+import './message-box.css'

package/es/message-box/index.js

@@ -1,8 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, createVNode, render } from "vue";
-import { M as MESSAGE_Z_INDEX } from "../share/const/index.js";
+import { ref, createVNode, render, nextTick } from "vue";
 import { _ as _sfc_main } from "./message-box.js";
 import { p, m } from "../aside/index.js";
 const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
@@ -18,11 +17,11 @@ class MessageManager {
   constructor(options) {
     __publicField(this, "messages");
     __publicField(this, "messageBox");
+    __publicField(this, "container", null);
     this.messages = ref([]);
     this.messageBox = createVNode(_sfc_main, {
       messages: this.messages.value,
-      zIndex: options.zIndex,
-      position: options.position,
+      placement: options.placement,
       onClose: (id2) => {
         const idx = this.messages.value.findIndex((e) => e.id === id2);
         if (idx >= 0) {
@@ -32,11 +31,11 @@ class MessageManager {
     });
     const root = (p(options.root) ? document.querySelector(options.root) : options.root) || document.body;
     const id = nanoid();
-    const container = document.createElement("div");
-    container.id = id;
-    container.className = `px-message-box-wrapper`;
-    root.appendChild(container);
-    render(this.messageBox, container);
+    this.container = document.createElement("div");
+    this.container.id = id;
+    this.container.className = `px-message-box-wrapper`;
+    root.appendChild(this.container);
+    render(this.messageBox, this.container);
   }
   push(options) {
     const id = options.id ?? nanoid();
@@ -53,14 +52,24 @@ class MessageManager {
   clear() {
     this.messages.value.length = 0;
   }
+  unmount() {
+    if (this.container) {
+      const container = this.container;
+      render(this.messageBox, container);
+      nextTick(() => {
+        container.remove();
+        this.container = null;
+      });
+    }
+  }
 }
 const messageManagers = {
   top: void 0,
   bottom: void 0,
-  topLeft: void 0,
-  topRight: void 0,
-  bottomLeft: void 0,
-  bottomRight: void 0
+  "top-left": void 0,
+  "top-right": void 0,
+  "bottom-left": void 0,
+  "bottom-right": void 0
 };
 const messageCall = (options) => {
   if (p(options) || m(options)) {
@@ -68,10 +77,9 @@ const messageCall = (options) => {
       content: options
     };
   }
-  const position = options.position || "top";
-  const currentManager = messageManagers[position] ? messageManagers[position] : messageManagers[position] = new MessageManager({
-    position,
-    zIndex: MESSAGE_Z_INDEX,
+  const placement = options.placement || options.position || "top";
+  const currentManager = messageManagers[placement] ? messageManagers[placement] : messageManagers[placement] = new MessageManager({
+    placement,
     root: options.root || "body"
   });
   const id = currentManager.push({
@@ -88,19 +96,21 @@ const messageCall = (options) => {
   };
 };
 const message = messageCall;
-["info", "success", "warning", "error", "loading", "sakura", "normal"].forEach((key) => {
-  message[key] = (options) => {
-    if (p(options) || m(options)) {
-      options = {
-        content: options
-      };
-    }
-    return message({
-      ...options,
-      type: key
-    });
-  };
-});
+["info", "success", "warning", "error", "loading", "sakura", "normal"].forEach(
+  (key) => {
+    message[key] = (options) => {
+      if (p(options) || m(options)) {
+        options = {
+          content: options
+        };
+      }
+      return message({
+        ...options,
+        type: key
+      });
+    };
+  }
+);
 export {
   message as m,
   nanoid as n

package/es/message-box/message-box-wrapped.d.ts

@@ -5,7 +5,6 @@ type __VLS_Props = MessageBoxProps & {
     onClose: (id: string | number | symbol) => any;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, MessageBoxExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    zIndex: number;
     root: string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/es/message-box/message-box-wrapped.js

@@ -1,6 +1,5 @@
 import { defineComponent, useAttrs, ref, createBlock, openBlock, Teleport, createVNode, mergeProps, unref } from "vue";
 import { _ as _sfc_main$1 } from "./message-box.js";
-import { M as MESSAGE_Z_INDEX } from "../share/const/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "MessageBox"
@@ -8,8 +7,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "message-box-wrapped",
   props: {
     messages: null,
+    placement: null,
     position: null,
-    zIndex: { default: MESSAGE_Z_INDEX },
+    zIndex: null,
     root: { default: "body" },
     "onUpdate:messages": { type: Function },
     onClose: { type: Function }

package/es/message-box/message-box.d.ts

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, MessageBoxExp
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((id: string | number | symbol) => any) | undefined;
 }>, {
-    zIndex: number;
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    position: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;