beyond-webui 1.1.36 → 1.1.37

package/es/components/message/src/message.mjs

@@ -1,98 +1,205 @@
-import { isClient } from '@vueuse/core';
+import { createElementVNode, defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, Transition, unref, withCtx, withDirectives, normalizeClass, normalizeStyle, createCommentVNode, createElementBlock, resolveDynamicComponent, renderSlot, toDisplayString, Fragment, withModifiers, vShow } from 'vue';
+import { useTimeoutFn, useEventListener, useResizeObserver } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import { mutable } from '../../../utils/typescript.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { iconPropType } from '../../../utils/vue/icon.mjs';
+import '../../../constants/index.mjs';
+import { ElBadge } from '../../badge/index.mjs';
+import '../../config-provider/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { messageProps, messageEmits } from './message2.mjs';
+import { getLastOffset, getOffsetOrSpace } from './instance.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { TypeComponents, TypeComponentsMap } from '../../../utils/vue/icon.mjs';
+import { useGlobalComponentSettings } from '../../config-provider/src/hooks/use-global-config.mjs';
+import { EVENT_CODE } from '../../../constants/aria.mjs';
 
-const messageTypes = ["success", "info", "warning", "error"];
-const messageDefaults = mutable({
-  customClass: "",
-  center: false,
-  dangerouslyUseHTMLString: false,
-  duration: 3e3,
-  icon: void 0,
-  closeIcon: void 0,
-  id: "",
-  message: "",
-  onClose: void 0,
-  showClose: false,
-  type: "info",
-  offset: 16,
-  zIndex: 0,
-  grouping: false,
-  repeatNum: 1,
-  appendTo: isClient ? document.body : void 0
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("g", { "clip-path": "url(#clip0_391_15356)" }, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M6.475 17.1576C6.14433 17.1583 5.81677 17.0936 5.51116 16.9674C5.20555 16.8411 4.9279 16.6557 4.69417 16.4218L0 11.7276L1.18667 10.5401L5.88083 15.2343C6.03835 15.3917 6.25191 15.4801 6.47458 15.4801C6.69726 15.4801 6.91082 15.3917 7.06833 15.2343L18.8133 3.48926L20 4.67676L8.255 16.4218C8.02142 16.6556 7.74392 16.8411 7.43844 16.9673C7.13297 17.0936 6.80555 17.1583 6.475 17.1576Z" })
+], -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("defs", null, [
+  /* @__PURE__ */ createElementVNode("clipPath", { id: "clip0_391_15356" }, [
+    /* @__PURE__ */ createElementVNode("rect", {
+      width: "20",
+      height: "20"
+    })
+  ])
+], -1);
+const _hoisted_5 = [
+  _hoisted_3,
+  _hoisted_4
+];
+const _hoisted_6 = {
+  key: 1,
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("path", { d: "M10 20C8.02219 20 6.08879 19.4135 4.4443 18.3147C2.79981 17.2159 1.51809 15.6541 0.761209 13.8268C0.00433286 11.9996 -0.193701 9.98891 0.192152 8.0491C0.578004 6.10929 1.53041 4.32746 2.92894 2.92894C4.32746 1.53041 6.10929 0.578004 8.0491 0.192152C9.98891 -0.193701 11.9996 0.00433286 13.8268 0.761209C15.6541 1.51809 17.2159 2.79981 18.3147 4.4443C19.4135 6.08879 20 8.02219 20 10C19.9971 12.6513 18.9426 15.1932 17.0679 17.0679C15.1932 18.9426 12.6513 19.9971 10 20ZM10 1.66667C8.35183 1.66667 6.74066 2.15541 5.37025 3.07109C3.99984 3.98677 2.93174 5.28826 2.30101 6.81098C1.67028 8.33369 1.50525 10.0092 1.82679 11.6258C2.14834 13.2423 2.94201 14.7271 4.10745 15.8926C5.27289 17.058 6.75774 17.8517 8.37425 18.1732C9.99076 18.4948 11.6663 18.3297 13.189 17.699C14.7118 17.0683 16.0132 16.0002 16.9289 14.6298C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3309 7.79061 17.4522 5.67241 15.8899 4.11013C14.3276 2.54785 12.2094 1.6691 10 1.66667Z" }, null, -1);
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M10.8346 5H9.16797V11.6667H10.8346V5ZM10.8346 13.3333H9.16797V15H10.8346V13.3333Z"
+}, null, -1);
+const _hoisted_9 = [
+  _hoisted_7,
+  _hoisted_8
+];
+const _hoisted_10 = ["innerHTML"];
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("svg", {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  xmlns: "http://www.w3.org/2000/svg"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M15.5885 5.5891L14.4102 4.41077L9.99932 8.8216L5.58849 4.41077L4.41016 5.5891L8.82099 9.99993L4.41016 14.4108L5.58849 15.5891L9.99932 11.1783L14.4102 15.5891L15.5885 14.4108L11.1777 9.99993L15.5885 5.5891Z" })
+], -1);
+const __default__ = defineComponent({
+  name: "ElMessage"
 });
-const messageProps = buildProps({
-  customClass: {
-    type: String,
-    default: messageDefaults.customClass
-  },
-  center: {
-    type: Boolean,
-    default: messageDefaults.center
-  },
-  dangerouslyUseHTMLString: {
-    type: Boolean,
-    default: messageDefaults.dangerouslyUseHTMLString
-  },
-  duration: {
-    type: Number,
-    default: messageDefaults.duration
-  },
-  icon: {
-    type: iconPropType,
-    default: messageDefaults.icon
-  },
-  closeIcon: {
-    type: iconPropType,
-    default: messageDefaults.icon
-  },
-  id: {
-    type: String,
-    default: messageDefaults.id
-  },
-  message: {
-    type: definePropType([
-      String,
-      Object,
-      Function
-    ]),
-    default: messageDefaults.message
-  },
-  onClose: {
-    type: definePropType(Function),
-    required: false
-  },
-  showClose: {
-    type: Boolean,
-    default: messageDefaults.showClose
-  },
-  type: {
-    type: String,
-    values: messageTypes,
-    default: messageDefaults.type
-  },
-  offset: {
-    type: Number,
-    default: messageDefaults.offset
-  },
-  zIndex: {
-    type: Number,
-    default: messageDefaults.zIndex
-  },
-  grouping: {
-    type: Boolean,
-    default: messageDefaults.grouping
-  },
-  repeatNum: {
-    type: Number,
-    default: messageDefaults.repeatNum
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: messageProps,
+  emits: messageEmits,
+  setup(__props, { expose }) {
+    const props = __props;
+    const { Close } = TypeComponents;
+    const { ns, zIndex } = useGlobalComponentSettings("message");
+    const { currentZIndex, nextZIndex } = zIndex;
+    const messageRef = ref();
+    const visible = ref(false);
+    const height = ref(0);
+    let stopTimer = void 0;
+    const badgeType = computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
+    const typeClass = computed(() => {
+      const type = props.type;
+      return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
+    });
+    const iconComponent = computed(() => props.icon || TypeComponentsMap[props.type] || "");
+    const closeIconComponent = computed(() => props.closeIcon || Close || "");
+    const lastOffset = computed(() => getLastOffset(props.id));
+    const offset = computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
+    const bottom = computed(() => height.value + offset.value);
+    const customStyle = computed(() => ({
+      top: `${offset.value}px`,
+      zIndex: currentZIndex.value
+    }));
+    function startTimer() {
+      if (props.duration === 0)
+        return;
+      ({ stop: stopTimer } = useTimeoutFn(() => {
+        close();
+      }, props.duration));
+    }
+    function clearTimer() {
+      stopTimer == null ? void 0 : stopTimer();
+    }
+    function close() {
+      visible.value = false;
+    }
+    function keydown({ code }) {
+      if (code === EVENT_CODE.esc) {
+        close();
+      }
+    }
+    onMounted(() => {
+      startTimer();
+      nextZIndex();
+      visible.value = true;
+    });
+    watch(() => props.repeatNum, () => {
+      clearTimer();
+      startTimer();
+    });
+    useEventListener(document, "keydown", keydown);
+    useResizeObserver(messageRef, () => {
+      height.value = messageRef.value.getBoundingClientRect().height;
+    });
+    expose({
+      visible,
+      bottom,
+      close
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: unref(ns).b("fade"),
+        onBeforeLeave: _ctx.onClose,
+        onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy")),
+        persisted: ""
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            id: _ctx.id,
+            ref_key: "messageRef",
+            ref: messageRef,
+            class: normalizeClass([
+              unref(ns).b(),
+              { [unref(ns).m(_ctx.type)]: _ctx.type },
+              unref(ns).is("center", _ctx.center),
+              unref(ns).is("closable", _ctx.showClose),
+              _ctx.customClass
+            ]),
+            style: normalizeStyle(unref(customStyle)),
+            role: "alert",
+            onMouseenter: clearTimer,
+            onMouseleave: startTimer
+          }, [
+            _ctx.repeatNum > 1 ? (openBlock(), createBlock(unref(ElBadge), {
+              key: 0,
+              value: _ctx.repeatNum,
+              type: unref(badgeType),
+              class: normalizeClass(unref(ns).e("badge"))
+            }, null, 8, ["value", "type", "class"])) : createCommentVNode("v-if", true),
+            unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 1,
+              class: normalizeClass([unref(ns).e("icon"), unref(typeClass)]),
+              size: "20px"
+            }, {
+              default: withCtx(() => [
+                _ctx.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_2, _hoisted_5)) : _ctx.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_6, _hoisted_9)) : (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), { key: 2 }))
+              ]),
+              _: 1
+            }, 8, ["class"])) : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
+                key: 0,
+                class: normalizeClass(unref(ns).e("content"))
+              }, toDisplayString(_ctx.message), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
+                createElementVNode("p", {
+                  class: normalizeClass(unref(ns).e("content")),
+                  innerHTML: _ctx.message
+                }, null, 10, _hoisted_10)
+              ], 2112))
+            ]),
+            _ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 2,
+              class: normalizeClass(unref(ns).e("closeBtn")),
+              size: "20px",
+              onClick: withModifiers(close, ["stop"])
+            }, {
+              default: withCtx(() => [
+                _hoisted_11
+              ]),
+              _: 1
+            }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
+          ], 46, _hoisted_1), [
+            [vShow, visible.value]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name", "onBeforeLeave"]);
+    };
   }
 });
-const messageEmits = {
-  destroy: () => true
-};
+var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "D:\\beyondtrucks\\beyond-ui\\packages\\components\\message\\src\\message.vue"]]);
 
-export { messageDefaults, messageEmits, messageProps, messageTypes };
+export { MessageConstructor as default };
 //# sourceMappingURL=message.mjs.map

package/es/components/message/src/message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"message.mjs","sources":["../../../../../../packages/components/message/src/message.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\nimport {\n  buildProps,\n  definePropType,\n  iconPropType,\n  mutable,\n} from '@element-plus/utils'\nimport type { AppContext, ExtractPropTypes, VNode } from 'vue'\nimport type { Mutable } from '@element-plus/utils'\nimport type MessageConstructor from './message.vue'\n\nexport const messageTypes = ['success', 'info', 'warning', 'error'] as const\n\nexport type messageType = typeof messageTypes[number]\n\nexport interface MessageConfigContext {\n  max?: number\n}\n\nexport const messageDefaults = mutable({\n  customClass: '',\n  center: false,\n  dangerouslyUseHTMLString: false,\n  duration: 3000,\n  icon: undefined,\n  closeIcon: undefined,\n  id: '',\n  message: '',\n  onClose: undefined,\n  showClose: false,\n  type: 'info',\n  offset: 16,\n  zIndex: 0,\n  grouping: false,\n  repeatNum: 1,\n  appendTo: isClient ? document.body : (undefined as never),\n} as const)\n\nexport const messageProps = buildProps({\n  customClass: {\n    type: String,\n    default: messageDefaults.customClass,\n  },\n  center: {\n    type: Boolean,\n    default: messageDefaults.center,\n  },\n  dangerouslyUseHTMLString: {\n    type: Boolean,\n    default: messageDefaults.dangerouslyUseHTMLString,\n  },\n  duration: {\n    type: Number,\n    default: messageDefaults.duration,\n  },\n  icon: {\n    type: iconPropType,\n    default: messageDefaults.icon,\n  },\n  closeIcon: {\n    type: iconPropType,\n    default: messageDefaults.icon,\n  },\n  id: {\n    type: String,\n    default: messageDefaults.id,\n  },\n  message: {\n    type: definePropType<string | VNode | (() => VNode)>([\n      String,\n      Object,\n      Function,\n    ]),\n    default: messageDefaults.message,\n  },\n  onClose: {\n    type: definePropType<() => void>(Function),\n    required: false,\n  },\n  showClose: {\n    type: Boolean,\n    default: messageDefaults.showClose,\n  },\n  type: {\n    type: String,\n    values: messageTypes,\n    default: messageDefaults.type,\n  },\n  offset: {\n    type: Number,\n    default: messageDefaults.offset,\n  },\n  zIndex: {\n    type: Number,\n    default: messageDefaults.zIndex,\n  },\n  grouping: {\n    type: Boolean,\n    default: messageDefaults.grouping,\n  },\n  repeatNum: {\n    type: Number,\n    default: messageDefaults.repeatNum,\n  },\n} as const)\nexport type MessageProps = ExtractPropTypes<typeof messageProps>\n\nexport const messageEmits = {\n  destroy: () => true,\n}\nexport type MessageEmits = typeof messageEmits\n\nexport type MessageInstance = InstanceType<typeof MessageConstructor>\n\nexport type MessageOptions = Partial<\n  Mutable<\n    Omit<MessageProps, 'id'> & {\n      appendTo?: HTMLElement | string\n    }\n  >\n>\nexport type MessageParams = MessageOptions | MessageOptions['message']\nexport type MessageParamsNormalized = Omit<MessageProps, 'id'> & {\n  appendTo: HTMLElement\n}\nexport type MessageOptionsWithType = Omit<MessageOptions, 'type'>\nexport type MessageParamsWithType =\n  | MessageOptionsWithType\n  | MessageOptions['message']\n\nexport interface MessageHandler {\n  close: () => void\n}\n\nexport type MessageFn = {\n  (options?: MessageParams, appContext?: null | AppContext): MessageHandler\n  closeAll(type?: messageType): void\n}\nexport type MessageTypedFn = (\n  options?: MessageParamsWithType,\n  appContext?: null | AppContext\n) => MessageHandler\n\nexport interface Message extends MessageFn {\n  success: MessageTypedFn\n  warning: MessageTypedFn\n  info: MessageTypedFn\n  error: MessageTypedFn\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"message.mjs","sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"messageRef\"\n      :class=\"[\n        ns.b(),\n        { [ns.m(type)]: type },\n        ns.is('center', center),\n        ns.is('closable', showClose),\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        :class=\"ns.e('badge')\"\n      />\n      <el-icon\n        v-if=\"iconComponent\"\n        :class=\"[ns.e('icon'), typeClass]\"\n        size=\"20px\"\n      >\n        <svg\n          v-if=\"type === 'success'\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clip-path=\"url(#clip0_391_15356)\">\n            <path\n              d=\"M6.475 17.1576C6.14433 17.1583 5.81677 17.0936 5.51116 16.9674C5.20555 16.8411 4.9279 16.6557 4.69417 16.4218L0 11.7276L1.18667 10.5401L5.88083 15.2343C6.03835 15.3917 6.25191 15.4801 6.47458 15.4801C6.69726 15.4801 6.91082 15.3917 7.06833 15.2343L18.8133 3.48926L20 4.67676L8.255 16.4218C8.02142 16.6556 7.74392 16.8411 7.43844 16.9673C7.13297 17.0936 6.80555 17.1583 6.475 17.1576Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_391_15356\">\n              <rect width=\"20\" height=\"20\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <svg\n          v-else-if=\"type === 'error'\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M10 20C8.02219 20 6.08879 19.4135 4.4443 18.3147C2.79981 17.2159 1.51809 15.6541 0.761209 13.8268C0.00433286 11.9996 -0.193701 9.98891 0.192152 8.0491C0.578004 6.10929 1.53041 4.32746 2.92894 2.92894C4.32746 1.53041 6.10929 0.578004 8.0491 0.192152C9.98891 -0.193701 11.9996 0.00433286 13.8268 0.761209C15.6541 1.51809 17.2159 2.79981 18.3147 4.4443C19.4135 6.08879 20 8.02219 20 10C19.9971 12.6513 18.9426 15.1932 17.0679 17.0679C15.1932 18.9426 12.6513 19.9971 10 20ZM10 1.66667C8.35183 1.66667 6.74066 2.15541 5.37025 3.07109C3.99984 3.98677 2.93174 5.28826 2.30101 6.81098C1.67028 8.33369 1.50525 10.0092 1.82679 11.6258C2.14834 13.2423 2.94201 14.7271 4.10745 15.8926C5.27289 17.058 6.75774 17.8517 8.37425 18.1732C9.99076 18.4948 11.6663 18.3297 13.189 17.699C14.7118 17.0683 16.0132 16.0002 16.9289 14.6298C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3309 7.79061 17.4522 5.67241 15.8899 4.11013C14.3276 2.54785 12.2094 1.6691 10 1.66667Z\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M10.8346 5H9.16797V11.6667H10.8346V5ZM10.8346 13.3333H9.16797V15H10.8346V13.3333Z\"\n          />\n        </svg>\n\n        <component :is=\"iconComponent\" v-else />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" :class=\"ns.e('content')\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else :class=\"ns.e('content')\" v-html=\"message\" />\n      </slot>\n      <el-icon\n        v-if=\"showClose\"\n        :class=\"ns.e('closeBtn')\"\n        size=\"20px\"\n        @click.stop=\"close\"\n      >\n        <svg\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M15.5885 5.5891L14.4102 4.41077L9.99932 8.8216L5.58849 4.41077L4.41016 5.5891L8.82099 9.99993L4.41016 14.4108L5.58849 15.5891L9.99932 11.1783L14.4102 15.5891L15.5885 14.4108L11.1777 9.99993L15.5885 5.5891Z\"\n          />\n        </svg>\n      </el-icon>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport ElBadge from '@element-plus/components/badge'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { messageEmits, messageProps } from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport type { BadgeProps } from '@element-plus/components/badge'\nimport type { CSSProperties } from 'vue'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElMessage',\n})\n\nconst props = defineProps(messageProps)\ndefineEmits(messageEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('message')\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n)\nconst typeClass = computed(() => {\n  const type = props.type\n  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }\n})\nconst iconComponent = computed(\n  () => props.icon || TypeComponentsMap[props.type] || ''\n)\n\nconst closeIconComponent = computed(() => props.closeIcon || Close || '')\n\nconst lastOffset = computed(() => getLastOffset(props.id))\nconst offset = computed(\n  () => getOffsetOrSpace(props.id, props.offset) + lastOffset.value\n)\nconst bottom = computed((): number => height.value + offset.value)\nconst customStyle = computed<CSSProperties>(() => ({\n  top: `${offset.value}px`,\n  zIndex: currentZIndex.value,\n}))\n\nfunction startTimer() {\n  if (props.duration === 0) return\n  ;({ stop: stopTimer } = useTimeoutFn(() => {\n    close()\n  }, props.duration))\n}\n\nfunction clearTimer() {\n  stopTimer?.()\n}\n\nfunction close() {\n  visible.value = false\n}\n\nfunction keydown({ code }: KeyboardEvent) {\n  if (code === EVENT_CODE.esc) {\n    // press esc to close the message\n    close()\n  }\n}\n\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer()\n    startTimer()\n  }\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n  visible,\n  bottom,\n  close,\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/message/src/message.vue.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly showClose: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "error" | "success" | "warning" | "info", unknown, "info", boolean>;
+    readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "error" | "info", unknown, "info", boolean>;
     readonly offset: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
     readonly zIndex: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly grouping: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -70,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
             __epPropKey: true;
         };
         readonly showClose: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "error" | "success" | "warning" | "info", unknown, "info", boolean>;
+        readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "error" | "info", unknown, "info", boolean>;
         readonly offset: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
         readonly zIndex: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly grouping: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -266,7 +266,7 @@ declare const _default: import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly showClose: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "error" | "success" | "warning" | "info", unknown, "info", boolean>;
+    readonly type: import("beyond-webui/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "error" | "info", unknown, "info", boolean>;
     readonly offset: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
     readonly zIndex: import("beyond-webui/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly grouping: import("beyond-webui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -274,7 +274,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onDestroy?: (() => any) | undefined;
 }, {
-    readonly type: import("beyond-webui/es/utils").EpPropMergeType<StringConstructor, "error" | "success" | "warning" | "info", unknown>;
+    readonly type: import("beyond-webui/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown>;
     readonly zIndex: number;
     readonly offset: number;
     readonly center: import("beyond-webui/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;