vft 0.0.20 → 0.0.21

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

@@ -0,0 +1,129 @@
+import type { PropType as __PropType } from 'vue';
+import { type VNode } from 'vue';
+import type { MessageType } from './types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    customClass: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    center: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    dangerouslyUseHTMLString: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    duration: {
+        type: __PropType<number>;
+        required: true;
+    };
+    icon: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string>;
+        required: true;
+    };
+    message: {
+        type: __PropType<string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | (() => VNode) | undefined>;
+        required: false;
+    };
+    onClose: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    showClose: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<MessageType>;
+        required: true;
+    };
+    offset: {
+        type: __PropType<number>;
+        required: true;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    grouping: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    repeatNum: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}, {
+    visible: import("vue").Ref<boolean>;
+    bottom: import("vue").ComputedRef<number>;
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "destroy"[], "destroy", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    customClass: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    center: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    dangerouslyUseHTMLString: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    duration: {
+        type: __PropType<number>;
+        required: true;
+    };
+    icon: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string>;
+        required: true;
+    };
+    message: {
+        type: __PropType<string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | (() => VNode) | undefined>;
+        required: false;
+    };
+    onClose: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    showClose: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<MessageType>;
+        required: true;
+    };
+    offset: {
+        type: __PropType<number>;
+        required: true;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    grouping: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    repeatNum: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+}>> & {
+    onDestroy?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/es/components/message/message.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./message.vue2.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=message.vue.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/message/message.vue2.mjs

@@ -0,0 +1,129 @@
+import { defineComponent as E, ref as g, computed as i, onMounted as x, watch as O, openBlock as l, createBlock as R, Transition as V, unref as e, withCtx as H, withDirectives as I, createElementVNode as $, normalizeClass as r, normalizeStyle as D, createElementBlock as m, createVNode as w, normalizeProps as F, guardReactiveProps as P, createCommentVNode as k, renderSlot as U, toDisplayString as j, withModifiers as A, vShow as q } from "vue";
+import { EVENT_CODE as G } from "@vft/constants";
+import { isObject as J } from "@vft/utils";
+import { useResizeObserver as K, useTimeoutFn as Q } from "@vueuse/core";
+import { useEventListener as W } from "@vft/use";
+import { useNamespace as X } from "../../hooks/use-namespace/index.mjs";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import "@vue/shared";
+import { getLastOffset as Y } from "./instance.mjs";
+import { VftIcon as B } from "../icon/index.mjs";
+const Z = ["id"], _ = ["innerHTML"], ee = ["onClick"], ge = /* @__PURE__ */ E({
+  __name: "message",
+  props: {
+    customClass: null,
+    center: { type: Boolean },
+    dangerouslyUseHTMLString: { type: Boolean },
+    duration: null,
+    icon: null,
+    id: null,
+    message: { type: [String, null, Function] },
+    onClose: { type: Function },
+    showClose: { type: Boolean },
+    type: null,
+    offset: null,
+    zIndex: null,
+    grouping: { type: Boolean },
+    repeatNum: null
+  },
+  emits: ["destroy"],
+  setup(t, { expose: M }) {
+    const o = t, n = X("message"), f = g(), c = g(!1), v = g(0);
+    let a;
+    const L = /* @__PURE__ */ new Map([
+      ["success", { icon: "vi-fill-success" }],
+      ["error", { icon: "vi-fill-error" }],
+      ["warning", { icon: "vi-fill-warning" }]
+    ]), y = i(() => (o.icon ? J(o.icon) ? o.icon : { icon: o.icon } : "") || L.get(o.type) || ""), b = i(() => {
+      const s = o.type;
+      return { [n.bm("icon", s)]: s };
+    }), S = i(() => Y(o.id)), p = i(() => o.offset + S.value), T = i(() => v.value + p.value), z = i(() => ({
+      top: `${p.value}px`,
+      zIndex: o.zIndex
+    }));
+    function d() {
+      o.duration !== 0 && ({ stop: a } = Q(() => {
+        u();
+      }, o.duration));
+    }
+    function C() {
+      a == null || a();
+    }
+    function u() {
+      c.value = !1;
+    }
+    function N({ code: s }) {
+      s === G.esc && u();
+    }
+    return x(() => {
+      d(), c.value = !0;
+    }), O(
+      () => o.repeatNum,
+      () => {
+        C(), d();
+      }
+    ), W(document, "keydown", N), K(f, () => {
+      v.value = f.value.getBoundingClientRect().height;
+    }), M({
+      visible: c,
+      bottom: T,
+      close: u
+    }), (s, h) => (l(), R(V, {
+      name: e(n).b("fade"),
+      onBeforeLeave: t.onClose,
+      onAfterLeave: h[0] || (h[0] = (te) => s.$emit("destroy"))
+    }, {
+      default: H(() => [
+        I($("div", {
+          id: t.id,
+          ref_key: "messageRef",
+          ref: f,
+          class: r([
+            e(n).b(),
+            { [e(n).m(t.type)]: t.type && !t.icon },
+            e(n).is("center", t.center),
+            e(n).is("closable", t.showClose),
+            t.customClass
+          ]),
+          style: D(e(z)),
+          role: "alert",
+          onMouseenter: C,
+          onMouseleave: d
+        }, [
+          e(y) ? (l(), m("div", {
+            key: 0,
+            class: r([e(n).e("icon"), e(b)])
+          }, [
+            w(e(B), F(P(e(y))), null, 16)
+          ], 2)) : k("", !0),
+          U(s.$slots, "default", {}, () => [
+            t.dangerouslyUseHTMLString ? (l(), m("p", {
+              key: 1,
+              class: r(e(n).e("content")),
+              innerHTML: t.message
+            }, null, 10, _)) : (l(), m("p", {
+              key: 0,
+              class: r(e(n).e("content"))
+            }, j(t.message), 3))
+          ]),
+          t.showClose ? (l(), m("div", {
+            key: 1,
+            class: r(e(n).e("closeBtn")),
+            onClick: A(u, ["stop"])
+          }, [
+            w(e(B), { icon: "vi-close" })
+          ], 10, ee)) : k("", !0)
+        ], 46, Z), [
+          [q, c.value]
+        ])
+      ]),
+      _: 3
+    }, 8, ["name", "onBeforeLeave"]));
+  }
+});
+export {
+  ge as default
+};
+//# sourceMappingURL=message.vue2.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.vue2.mjs","sources":["../../../../../packages/components/message/message.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { EVENT_CODE } from '@vft/constants';\nimport { isObject } from '@vft/utils';\nimport { useResizeObserver, useTimeoutFn } from '@vueuse/core';\nimport { useEventListener } from '@vft/use';\nimport type { CSSProperties } from 'vue';\nimport { computed, onMounted, ref, type VNode, watch } from 'vue';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { getLastOffset } from './instance';\nimport Icon from '@vft-ui/components/icon';\nimport type { MessageType } from './types';\n\ninterface MessageProps {\n  customClass?: string;\n  center?: boolean;\n  dangerouslyUseHTMLString?: boolean;\n  duration: number;\n  icon?: string;\n  id: string;\n  message?: string | VNode | (() => VNode);\n  onClose?: Function;\n  showClose?: boolean;\n  type: MessageType;\n  offset: number;\n  zIndex?: number;\n  grouping?: boolean;\n  repeatNum?: number;\n}\n\nconst props = defineProps({\n  \"customClass\": null,\n  \"center\": { type: Boolean,  },\n  \"dangerouslyUseHTMLString\": { type: Boolean,  },\n  \"duration\": null,\n  \"icon\": null,\n  \"id\": null,\n  \"message\": { type: [String, null, Function],  },\n  \"onClose\": { type: Function,  },\n  \"showClose\": { type: Boolean,  },\n  \"type\": null,\n  \"offset\": null,\n  \"zIndex\": null,\n  \"grouping\": { type: Boolean,  },\n  \"repeatNum\": null\n});\n\ndefineEmits(['destroy']);\n\nconst ns = useNamespace('message');\n\n// 消息框 ref\nconst messageRef = ref<HTMLDivElement>();\n// 是否可见\nconst visible = ref(false);\nconst height = ref(0);\n\nlet stopTimer: (() => void) | undefined = undefined;\n\nconst iconCfgMap = new Map([\n  ['success', { icon: 'vi-fill-success' }],\n  ['error', { icon: 'vi-fill-error' }],\n  ['warning', { icon: 'vi-fill-warning' }]\n]);\n\nconst iconCfg = computed(() => {\n  const _iconCfg = props.icon ? isObject(props.icon) ? props.icon : { icon: props.icon } : '';\n\n  return _iconCfg || iconCfgMap.get(props.type) || '';\n});\n\nconst typeClass = computed(() => {\n  const type = props.type;\n  return { [ns.bm('icon', type)]: type };\n});\n\nconst lastOffset = computed(() => getLastOffset(props.id));\n// 偏移量\nconst offset = computed(() => props.offset + lastOffset.value);\nconst bottom = computed((): number => height.value + offset.value);\nconst customStyle = computed<CSSProperties>(() => ({\n  top: `${offset.value}px`,\n  zIndex: props.zIndex\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\n// 监听退出键关闭\nfunction keydown ({ code }: KeyboardEvent) {\n  if (code === EVENT_CODE.esc) {\n    close();\n  }\n}\n\nonMounted(() => {\n  startTimer();\n  visible.value = true;\n});\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer();\n    startTimer();\n  }\n);\n\n// 监听键盘事件\nuseEventListener(document, 'keydown', keydown);\n\n// 监听 messageRef 消息框的大小变化\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height;\n});\n\ndefineExpose({\n  visible,\n  bottom,\n  close\n});\n</script>\n\n<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 && !icon },\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      <div v-if=\"iconCfg\" :class=\"[ns.e('icon'), typeClass]\">\n        <icon v-bind=\"iconCfg\" />\n      </div>\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      <div v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n        <icon icon=\"vi-close\"/>\n      </div>\n    </div>\n  </transition>\n</template>\n"],"names":["ns","useNamespace","messageRef","ref","visible","height","stopTimer","iconCfgMap","iconCfg","computed","props","isObject","typeClass","type","lastOffset","getLastOffset","offset","bottom","customStyle","startTimer","useTimeoutFn","close","clearTimer","keydown","code","EVENT_CODE","onMounted","watch","useEventListener","useResizeObserver","expose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgDMA,IAAKC,EAAa,SAAS,GAG3BC,IAAaC,KAEbC,IAAUD,EAAI,EAAK,GACnBE,IAASF,EAAI,CAAC;AAEpB,QAAIG;AAEE,UAAAC,wBAAiB,IAAI;AAAA,MACzB,CAAC,WAAW,EAAE,MAAM,mBAAmB;AAAA,MACvC,CAAC,SAAS,EAAE,MAAM,iBAAiB;AAAA,MACnC,CAAC,WAAW,EAAE,MAAM,mBAAmB;AAAA,IAAA,CACxC,GAEKC,IAAUC,EAAS,OACNC,EAAM,OAAOC,EAASD,EAAM,IAAI,IAAIA,EAAM,OAAO,EAAE,MAAMA,EAAM,SAAS,OAEtEH,EAAW,IAAIG,EAAM,IAAI,KAAK,EAClD,GAEKE,IAAYH,EAAS,MAAM;AAC/B,YAAMI,IAAOH,EAAM;AACZ,aAAA,EAAE,CAACV,EAAG,GAAG,QAAQa,CAAI,CAAC,GAAGA;IAAK,CACtC,GAEKC,IAAaL,EAAS,MAAMM,EAAcL,EAAM,EAAE,CAAC,GAEnDM,IAASP,EAAS,MAAMC,EAAM,SAASI,EAAW,KAAK,GACvDG,IAASR,EAAS,MAAcJ,EAAO,QAAQW,EAAO,KAAK,GAC3DE,IAAcT,EAAwB,OAAO;AAAA,MACjD,KAAK,GAAGO,EAAO;AAAA,MACf,QAAQN,EAAM;AAAA,IACd,EAAA;AAEF,aAASS,IAAc;AACrB,MAAIT,EAAM,aAAa,MACtB,EAAE,MAAMJ,EAAU,IAAIc,EAAa,MAAM;AAClC,QAAAC;MAAA,GACLX,EAAM,QAAQ;AAAA,IACnB;AAEA,aAASY,IAAc;AACT,MAAAhB,KAAA,QAAAA;AAAA,IACd;AAEA,aAASe,IAAS;AAChB,MAAAjB,EAAQ,QAAQ;AAAA,IAClB;AAGS,aAAAmB,EAAS,EAAE,MAAAC,KAAuB;AACrC,MAAAA,MAASC,EAAW,OAChBJ;IAEV;AAEA,WAAAK,EAAU,MAAM;AACH,MAAAP,KACXf,EAAQ,QAAQ;AAAA,IAAA,CACjB,GAEDuB;AAAA,MACE,MAAMjB,EAAM;AAAA,MACZ,MAAM;AACO,QAAAY,KACAH;MACb;AAAA,IAAA,GAIeS,EAAA,UAAU,WAAWL,CAAO,GAG7CM,EAAkB3B,GAAY,MAAM;AAClC,MAAAG,EAAO,QAAQH,EAAW,MAAO,sBAAA,EAAwB;AAAA,IAAA,CAC1D,GAEY4B,EAAA;AAAA,MACX,SAAA1B;AAAA,MACA,QAAAa;AAAA,MACA,OAAAI;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/message/method.d.ts

@@ -0,0 +1,4 @@
+import type { Message, MessageType } from './types';
+export declare function closeAll(type?: MessageType): void;
+declare const _default: Message;
+export default _default;

package/es/components/message/method.mjs

@@ -0,0 +1,98 @@
+import { render as u, createVNode as v } from "vue";
+import { isClient as b } from "@vueuse/core";
+import { isNumber as y, isString as g, isVNode as h, isFunction as a, isElement as z } from "@vft/utils";
+import "@popperjs/core";
+import "lodash";
+import { useZIndex as C } from "../../hooks/use-z-index/index.mjs";
+import "@vue/shared";
+import { debugWarn as E } from "../../utils/error.mjs";
+import _ from "./message.vue2.mjs";
+import { messageTypes as I, messageDefaults as M } from "./types.mjs";
+import { instances as r } from "./instance.mjs";
+import "../config-provider/index.mjs";
+import { messageConfig as x } from "../config-provider/constants.mjs";
+let N = 1;
+const T = (e) => {
+  const n = !e || g(e) || h(e) || a(e) ? { message: e } : e, o = {
+    ...M,
+    ...n
+  };
+  if (!o.appendTo)
+    o.appendTo = document.body;
+  else if (g(o.appendTo)) {
+    let s = document.querySelector(o.appendTo);
+    z(s) || (E("VriMessage", "the appendTo option is not an HTMLElement. Falling back to document.body."), s = document.body), o.appendTo = s;
+  }
+  return o;
+}, V = (e) => {
+  const n = r.indexOf(e);
+  if (n === -1)
+    return;
+  r.splice(n, 1);
+  const { handler: o } = e;
+  o.close();
+}, A = ({ appendTo: e, ...n }, o) => {
+  const { nextZIndex: s } = C(), t = `message_${N++}`, l = n.onClose, i = document.createElement("div"), c = {
+    ...n,
+    zIndex: s() + n.zIndex,
+    id: t,
+    onClose: () => {
+      l == null || l(), V(f);
+    },
+    // 清除 message element 防止内存泄漏
+    onDestroy: () => {
+      u(null, i);
+    }
+  }, m = v(_, c, a(c.message) || h(c.message) ? { default: a(c.message) ? c.message : () => c.message } : null);
+  m.appContext = o || p._context, u(m, i), e.appendChild(i.firstElementChild);
+  const d = m.component, f = {
+    id: t,
+    vnode: m,
+    vm: d,
+    handler: {
+      // instead of calling the onClose function directly,
+      // setting this value so that we can have the full lifecycle
+      // for out component, so that all closing steps will not be skipped.
+      close: () => {
+        d.exposed.visible.value = !1;
+      }
+    },
+    props: m.component.props
+  };
+  return f;
+}, p = (e = {}, n) => {
+  if (!b)
+    return { close: () => {
+    } };
+  if (y(x.max) && r.length >= x.max)
+    return { close: () => {
+    } };
+  const o = T(e);
+  if (o.grouping && r.length) {
+    const t = r.find(({ vnode: l }) => {
+      var i;
+      return ((i = l.props) == null ? void 0 : i.message) === o.message;
+    });
+    if (t)
+      return t.props.repeatNum += 1, t.props.type = o.type, t.handler;
+  }
+  const s = A(o, n);
+  return r.push(s), s.handler;
+};
+I.forEach((e) => {
+  p[e] = (n = {}, o) => {
+    const s = T(n);
+    return p({ ...s, type: e }, o);
+  };
+});
+function D(e) {
+  for (const n of r)
+    (!e || e === n.props.type) && n.handler.close();
+}
+p.closeAll = D;
+p._context = null;
+export {
+  D as closeAll,
+  p as default
+};
+//# sourceMappingURL=method.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"method.mjs","sources":["../../../../../packages/components/message/method.ts"],"sourcesContent":["import { createVNode, render } from 'vue';\nimport { isClient } from '@vueuse/core';\nimport { isElement, isFunction, isNumber, isString, isVNode } from '@vft/utils';\nimport { useZIndex } from '@vft-ui/hooks';\nimport { debugWarn } from '../../utils';\nimport MessageConstructor from './message.vue';\nimport { messageDefaults, messageTypes } from './types';\nimport { instances } from './instance';\nimport { messageConfig } from '@vft-ui/components/config-provider';\nimport type { MessageContext } from './instance';\nimport type { AppContext } from 'vue';\nimport type { Message, MessageFn, MessageHandler, MessageParamsNormalized, MessageParams, MessageType } from './types';\n\nlet seed = 1;\n\n// 获取最终处理后的 message 的参数\nconst normalizeOptions = (params?: MessageParams) => {\n  const options = !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params;\n\n  // 合并传入的数据与默认的值\n  const normalized = {\n    ...messageDefaults,\n    ...options\n  };\n\n  // appendTo 默认指定为 body\n  if (!normalized.appendTo) {\n    normalized.appendTo = document.body;\n  } else if (isString(normalized.appendTo)) {\n    let appendTo = document.querySelector<HTMLElement>(normalized.appendTo);\n    // 当外部传入了 appendTo 但是我们获取到的 appendTo 不是一个元素节点，抛出警告，然后继续默认指定为 body\n    if (!isElement(appendTo)) {\n      debugWarn('VriMessage', 'the appendTo option is not an HTMLElement. Falling back to document.body.');\n      appendTo = document.body;\n    }\n\n    normalized.appendTo = appendTo;\n  }\n\n  return normalized as MessageParamsNormalized;\n};\n\n// 关闭 message\nconst closeMessage = (instance: MessageContext) => {\n  const idx = instances.indexOf(instance);\n  if (idx === -1) return;\n\n  instances.splice(idx, 1);\n  const { handler } = instance;\n  handler.close();\n};\n\n/**\n * @description 创建一个 message 实例\n * @author wfd\n * @date 2022/10/31 15:37\n * @example\n * @param {any} appendTo\n * @param {Omit<, \"appendTo\">} options\n * @param {AppContext | null} context\n * @returns {MessageContext}\n */\nconst createMessage = ({ appendTo, ...options }: MessageParamsNormalized, context?: AppContext | null): MessageContext => {\n  // z-index 的设置\n  const { nextZIndex } = useZIndex();\n  // 自定义 message 的 id\n  const id = `message_${seed++}`;\n  // 获取用户自定义的 onClose\n  const userOnClose = options.onClose;\n\n  const container = document.createElement('div');\n\n  const props = {\n    ...options,\n    zIndex: nextZIndex() + options.zIndex!,\n    id,\n    onClose: () => {\n      userOnClose?.();\n      closeMessage(instance);\n    },\n\n    // 清除 message element 防止内存泄漏\n    onDestroy: () => {\n      render(null, container);\n    }\n  };\n  // 创建一个虚拟节点，children 的用处是为了 message 可能是函数或者虚拟节点\n  const vnode = createVNode(MessageConstructor, props, isFunction(props.message) || isVNode(props.message) ? { default: isFunction(props.message) ? props.message : () => props.message } : null);\n\n  // 设置 context\n  vnode.appContext = context || message._context;\n  // 渲染虚拟dom\n  render(vnode, container);\n\n  // 将渲染好的 dom 添加到 appendTo 上，默认是添加到 body 上\n  appendTo.appendChild(container.firstElementChild!);\n\n  const vm = vnode.component!;\n\n  const handler: MessageHandler = {\n    // instead of calling the onClose function directly,\n    // setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () => {\n      // 将 message 组件暴露出来的 visible 设置为 false\n      vm.exposed!.visible.value = false;\n    }\n  };\n\n  // 返回这个实例\n  const instance: MessageContext = {\n    id,\n    vnode,\n    vm,\n    handler,\n    props: (vnode.component as any).props\n  };\n\n  return instance;\n};\n\n// message 初始化相关\nconst message: MessageFn & Partial<Message> & { _context: AppContext | null } = (options = {}, context) => {\n  if (!isClient) return { close: () => undefined };\n\n  // 判断设置最大的 message 展示的数量\n  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n    return { close: () => undefined };\n  }\n  // 获取最终处理后的 message 的参数\n  const normalized = normalizeOptions(options);\n\n  // 开启分组，message 实例存在\n  if (normalized.grouping && instances.length) {\n    // 找出当前实例中展示的 message 与现在 options 参数中 message 一致的 message 实例\n    const instance = instances.find(({ vnode: vm }) => vm.props?.message === normalized.message);\n    // repeatNum ++\n    if (instance) {\n      instance.props.repeatNum += 1;\n      instance.props.type = normalized.type;\n      return instance.handler;\n    }\n  }\n  // 创建一个 message 实例\n  const instance = createMessage(normalized, context);\n  // 将 message 实例 push 至数组中\n  instances.push(instance);\n\n  return instance.handler;\n};\n\n//\nmessageTypes.forEach((type) => {\n  message[type] = (options = {}, appContext) => {\n    const normalized = normalizeOptions(options);\n    return message({ ...normalized, type }, appContext);\n  };\n});\n\n// 关闭所有 message\nexport function closeAll(type?: MessageType): void {\n  for (const instance of instances) {\n    if (!type || type === instance.props.type) {\n      instance.handler.close();\n    }\n  }\n}\n\nmessage.closeAll = closeAll;\nmessage._context = null;\n\nexport default message as Message;\n"],"names":["seed","normalizeOptions","params","options","isString","isVNode","isFunction","normalized","messageDefaults","appendTo","isElement","debugWarn","closeMessage","instance","idx","instances","handler","createMessage","context","nextZIndex","useZIndex","id","userOnClose","container","props","render","vnode","createVNode","MessageConstructor","message","vm","isClient","isNumber","messageConfig","_a","messageTypes","type","appContext","closeAll"],"mappings":"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"}

package/es/components/message/style/css.mjs

@@ -0,0 +1,3 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-message.css";
+//# sourceMappingURL=css.mjs.map

package/es/components/message/style/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/es/components/message/style/index.mjs

@@ -0,0 +1,3 @@
+import "../../../theme-style/src/base.scss.mjs";
+import "../../../theme-style/src/message.scss.mjs";
+//# sourceMappingURL=index.mjs.map

package/es/components/message/style/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/es/components/message/types.d.ts

@@ -0,0 +1,63 @@
+import type { AppContext, VNode } from 'vue';
+export declare const messageTypes: readonly ["success", "info", "warning", "error"];
+export type MessageType = 'success' | 'warning' | 'info' | 'error';
+export interface MessageConfigContext {
+    /** 可同时显示的消息最大数量 */
+    max?: number;
+}
+export declare const messageDefaults: {
+    customClass: string;
+    center: boolean;
+    dangerouslyUseHTMLString: boolean;
+    duration: number;
+    icon: undefined;
+    id: string;
+    message: string;
+    onClose: undefined;
+    showClose: boolean;
+    type: string;
+    offset: number;
+    zIndex: number;
+    grouping: boolean;
+    repeatNum: number;
+    appendTo: HTMLElement;
+};
+export interface MessageProps {
+    customClass?: string;
+    center?: boolean;
+    dangerouslyUseHTMLString?: boolean;
+    duration?: number;
+    icon?: string;
+    id?: string;
+    message?: string | VNode | (() => VNode);
+    onClose?: Function;
+    showClose?: boolean;
+    type?: MessageType;
+    offset?: number;
+    zIndex?: number;
+    grouping?: boolean;
+    repeatNum: number;
+}
+export type MessageOptions = Partial<Omit<MessageProps, 'id'> & {
+    appendTo?: HTMLElement | string;
+}>;
+export type MessageParams = MessageOptions | MessageOptions['message'];
+export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
+    appendTo: HTMLElement;
+};
+export type MessageOptionsWithType = Omit<MessageOptions, 'type'>;
+export type MessageParamsWithType = MessageOptionsWithType | MessageOptions['message'];
+export interface MessageHandler {
+    close: () => void;
+}
+export type MessageFn = {
+    (options?: MessageParams, appContext?: null | AppContext): MessageHandler;
+    closeAll(type?: MessageType): void;
+};
+export type MessageTypedFn = (options?: MessageParamsWithType, appContext?: null | AppContext) => MessageHandler;
+export interface Message extends MessageFn {
+    success: MessageTypedFn;
+    warning: MessageTypedFn;
+    info: MessageTypedFn;
+    error: MessageTypedFn;
+}

package/es/components/message/types.mjs

@@ -0,0 +1,23 @@
+import { isClient as e } from "@vueuse/core";
+const o = ["success", "info", "warning", "error"], n = {
+  customClass: "",
+  center: !1,
+  dangerouslyUseHTMLString: !1,
+  duration: 3e3,
+  icon: void 0,
+  id: "",
+  message: "",
+  onClose: void 0,
+  showClose: !1,
+  type: "info",
+  offset: 16,
+  zIndex: 0,
+  grouping: !1,
+  repeatNum: 1,
+  appendTo: e ? document.body : void 0
+};
+export {
+  n as messageDefaults,
+  o as messageTypes
+};
+//# sourceMappingURL=types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../../../packages/components/message/types.ts"],"sourcesContent":["import { isClient } from '@vueuse/core';\nimport type { AppContext, VNode } from 'vue';\n\nexport const messageTypes = ['success', 'info', 'warning', 'error'] as const;\nexport type MessageType = 'success' | 'warning' | 'info' | 'error';\n\nexport interface MessageConfigContext {\n  /** 可同时显示的消息最大数量 */\n  max?: number;\n}\n\n// props 默认赋值\nexport const messageDefaults = {\n  customClass: '',\n  center: false,\n  dangerouslyUseHTMLString: false,\n  duration: 3000,\n  icon: 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};\n\nexport interface MessageProps {\n  customClass?: string;\n  center?: boolean;\n  dangerouslyUseHTMLString?: boolean;\n  duration?: number;\n  icon?: string;\n  id?: string;\n  message?: string | VNode | (() => VNode);\n  onClose?: Function;\n  showClose?: boolean;\n  type?: MessageType;\n  offset?: number;\n  zIndex?: number;\n  grouping?: boolean;\n  repeatNum: number;\n}\n\n// 排除 id 增加 appendTo\nexport type MessageOptions = Partial<\n  Omit<MessageProps, 'id'> & {\n    appendTo?: HTMLElement | string;\n  }\n>;\n\nexport type MessageParams = MessageOptions | MessageOptions['message'];\n\nexport type MessageParamsNormalized = Omit<MessageProps, 'id'> & {\n  appendTo: HTMLElement;\n};\n\nexport type MessageOptionsWithType = Omit<MessageOptions, 'type'>;\nexport type MessageParamsWithType = MessageOptionsWithType | 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};\n\nexport type MessageTypedFn = (options?: MessageParamsWithType, appContext?: null | AppContext) => MessageHandler;\n\nexport interface Message extends MessageFn {\n  success: MessageTypedFn\n  warning: MessageTypedFn\n  info: MessageTypedFn\n  error: MessageTypedFn\n}\n"],"names":["messageTypes","messageDefaults","isClient"],"mappings":";AAGO,MAAMA,IAAe,CAAC,WAAW,QAAQ,WAAW,OAAO,GASrDC,IAAkB;AAAA,EAC7B,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAUC,IAAW,SAAS,OAAQ;AACxC;"}

package/es/components/multiple-tabs/multiple-tabs.vue2.mjs

@@ -44,6 +44,8 @@ import "../qrcode/index.mjs";
 import "../overlay/index.mjs";
 import "../clamp/index.mjs";
 import "../clamp-toggle/index.mjs";
+import "../page-wrapper/index.mjs";
+import "../message/index.mjs";
 import Z from "./tab-content.vue2.mjs";
 import { initAffixTabs as ee, useTabsDrag as te } from "./use/use-multiple-tabs.mjs";
 const P = (
@@ -51,7 +53,7 @@ const P = (
   W("multiple-tabs")
 ), oe = _({
   name: P.b()
-}), Xe = /* @__PURE__ */ _({
+}), Ze = /* @__PURE__ */ _({
   ...oe,
   props: {
     tabsStyle: null,
@@ -167,6 +169,6 @@ const P = (
   }
 });
 export {
-  Xe as default
+  Ze as default
 };
 //# sourceMappingURL=multiple-tabs.vue2.mjs.map

package/es/components/multiple-tabs/multiple-tabs.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"multiple-tabs.vue2.mjs","sources":["../../../../../packages/components/multiple-tabs/multiple-tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('multiple-tabs')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { getRouterKeyPath, listenerRouteChange, useRouterHelper } from '@vft/router';\nimport { useMultipleTabStore, useTabs } from '@vft/store';\nimport { useRefs } from '@vft/use';\nimport { generateCssVars } from '@vft/utils';\nimport hotkeys from 'hotkeys-js';\nimport { computed, ref, unref, watchEffect } from 'vue';\nimport type { RouteLocationNormalized, RouteMeta } from 'vue-router';\nimport { useRouter, onBeforeRouteLeave } from 'vue-router';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { VftTabs, VftTabPane, type TabsPaneContext } from '@vft-ui/components';\n\nimport TabContent from './tab-content.vue';\nimport type { TabContentExpose } from './types';\nimport { initAffixTabs, useTabsDrag } from './use';\n\ninterface MultipleTabsProps {\n  tabsStyle?: Record<string, Numberish>;\n  contextMenuStyle?: Record<string, Numberish>;\n  canDrag?: boolean;\n}\n\ndefineProps({\n  \"tabsStyle\": null,\n  \"contextMenuStyle\": null,\n  \"canDrag\": { type: Boolean,  }\n})\n\n\n\n;\n\nconst affixList = initAffixTabs();\n\nif (__props.canDrag) {\n  useTabsDrag(affixList);\n}\n\nconst tabStore = useMultipleTabStore();\n\n// active path for tab\nconst activePathRef = ref('');\nconst activeIndex = ref(0);\nconst fromRoute = ref();\n\nconst router = useRouter();\nconst { go } = useRouterHelper();\n\n// get current tab list\nconst getTabsState = computed(() => {\n  return tabStore.getTabList.filter((item) => {\n    return !item.meta?.hideTab;\n  });\n});\n\n\nwatchEffect(() => {\n  if (activePathRef.value) {\n    const _activeIndex = getTabsState.value.findIndex(item => {\n      return getRouterKeyPath(item) === activePathRef.value;\n    });\n    if (_activeIndex === -1) {\n      activeIndex.value = getTabsState.value?.length - 1;\n    } else {\n      activeIndex.value = _activeIndex;\n    }\n    activeIndex.value = activeIndex.value < affixList?.length ? affixList?.length - 1 : activeIndex.value;\n  }\n});\n\nonBeforeRouteLeave(() => {\n  fromRoute.value = unref(router.currentRoute);\n});\n\nlistenerRouteChange((route) => {\n  if (!route) {\n    return;\n  }\n\n  const { meta = {} } = route;\n  const { currentActivePath, hideTab } = meta as RouteMeta;\n\n  const isHide = !hideTab ? null : currentActivePath;\n\n  // set current active tab value\n  const activePath = getRouterKeyPath(route);\n\n  if (activePathRef.value !== activePath) {\n    activePathRef.value = activePath;\n  }\n\n  if (isHide) {\n    // 如果当前 tab 是隐藏的，则从路由中根据 currentActivePath 寻找到此路由的信息，然后在 tabStore 添加此路由\n    let findParentRoute = router.getRoutes().find((item) => item.path === currentActivePath);\n    findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized, unref(fromRoute), activeIndex.value, route);\n  } else {\n    tabStore.addTab(unref(route), unref(fromRoute), activeIndex.value);\n  }\n});\n\n// 点击 tab 根据 tab 传入的 path 路径，跳转到对应页面\nfunction handleClick (pane: TabsPaneContext) {\n  if (activePathRef.value === pane.paneName) {\n  \treturn;\n  }\n  const clickTab = getTabsState.value[pane.attrs.index];\n  activePathRef.value = pane.paneName as string;\n  const hideActiveRoutePath = (clickTab?.meta?.hideActiveRoute as RouteLocationNormalized)?.fullPath;\n  if (hideActiveRoutePath) {\n    go(hideActiveRoutePath);\n  } else {\n    go(clickTab.fullPath || clickTab.path);\n  }\n}\n\n// click x close tab\nfunction handleRemove (targetPath: string) {\n  tabStore.closeTabByKey(targetPath, router);\n}\n\nconst [refs, setRefs] = useRefs<TabContentExpose>();\n\nfunction handleContextMenu (data: {pane: {attrs: {index: number;};}; event: any;}) {\n  const _index = data.pane.attrs.index;\n  const _event = data.event;\n  refs.value[_index].handleContext(_event);\n}\n\nconst _tabsStyle = computed(() => {\n  let initTabStyle: Record<string, Numberish> = {\n    padding: '4px 0 0',\n    'header-height': '26px',\n    'item-color': '#5C5C5C',\n    'item-bg-color': '#f8f8f8',\n    'font-size': '13px',\n    'item-padding': '0 10px',\n    'close-icon-left': '8px',\n    'item-distance': '10px',\n    'item-max-width': '348px',\n    'header-margin': '0 0 0 8px'\n  };\n\n  return { ...generateCssVars(initTabStyle, 'tabs', 'vft'), ...__props.tabsStyle };\n});\n\nconst { closeCurrent } = useTabs();\n\nhotkeys('command+e, ctrl+e', function () {\n  closeCurrent();\n  return false;\n});\n\nconst _contextMenuStyle = computed(() => {\n  return {\n    ...generateCssVars({\n      border: '1px solid #dcdfe6',\n      'sub-item-height': '40px',\n      'item-min-width': '150px'\n    }, 'menu', 'vft'),\n    ...__props.contextMenuStyle\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ns.b()\" :style=\"_tabsStyle\">\n    <vft-tabs\n      v-model:model-value=\"activePathRef\"\n      type=\"card\"\n      @tabClick=\"handleClick\"\n      @tabRemove=\"handleRemove\"\n      @tabContextMenu=\"handleContextMenu\"\n      :closeIconCfg=\"{ color: 'white'}\"\n    >\n      <!--why key add index：key not update after sort -->\n      <template v-for=\"(item, index) in getTabsState\" :key=\"getRouterKeyPath(item) + index\">\n        <vft-tab-pane :closable=\"!(item.meta?.affix)\" :index=\"index\" :name=\"getRouterKeyPath(item)\">\n          <template #label>\n            <tab-content :contextMenuStyle=\"_contextMenuStyle\" :affixNum=\"affixList?.length\"\n              :ref=\"setRefs(index)\" :tabItem=\"item\" />\n          </template>\n        </vft-tab-pane>\n      </template>\n    </vft-tabs>\n  </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","affixList","initAffixTabs","__props","useTabsDrag","tabStore","useMultipleTabStore","activePathRef","ref","activeIndex","fromRoute","router","useRouter","go","useRouterHelper","getTabsState","computed","item","_a","watchEffect","_activeIndex","getRouterKeyPath","onBeforeRouteLeave","unref","listenerRouteChange","route","meta","currentActivePath","hideTab","isHide","activePath","findParentRoute","handleClick","pane","clickTab","hideActiveRoutePath","_b","handleRemove","targetPath","refs","setRefs","useRefs","handleContextMenu","data","_index","_event","_tabsStyle","generateCssVars","closeCurrent","useTabs","hotkeys","_contextMenuStyle"],"mappings":"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"}
+{"version":3,"file":"multiple-tabs.vue2.mjs","sources":["../../../../../packages/components/multiple-tabs/multiple-tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('multiple-tabs')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { getRouterKeyPath, listenerRouteChange, useRouterHelper } from '@vft/router';\nimport { useMultipleTabStore, useTabs } from '@vft/store';\nimport { useRefs } from '@vft/use';\nimport { generateCssVars } from '@vft/utils';\nimport hotkeys from 'hotkeys-js';\nimport { computed, ref, unref, watchEffect } from 'vue';\nimport type { RouteLocationNormalized, RouteMeta } from 'vue-router';\nimport { useRouter, onBeforeRouteLeave } from 'vue-router';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { VftTabs, VftTabPane, type TabsPaneContext } from '@vft-ui/components';\n\nimport TabContent from './tab-content.vue';\nimport type { TabContentExpose } from './types';\nimport { initAffixTabs, useTabsDrag } from './use';\n\ninterface MultipleTabsProps {\n  tabsStyle?: Record<string, Numberish>;\n  contextMenuStyle?: Record<string, Numberish>;\n  canDrag?: boolean;\n}\n\ndefineProps({\n  \"tabsStyle\": null,\n  \"contextMenuStyle\": null,\n  \"canDrag\": { type: Boolean,  }\n})\n\n\n\n;\n\nconst affixList = initAffixTabs();\n\nif (__props.canDrag) {\n  useTabsDrag(affixList);\n}\n\nconst tabStore = useMultipleTabStore();\n\n// active path for tab\nconst activePathRef = ref('');\nconst activeIndex = ref(0);\nconst fromRoute = ref();\n\nconst router = useRouter();\nconst { go } = useRouterHelper();\n\n// get current tab list\nconst getTabsState = computed(() => {\n  return tabStore.getTabList.filter((item) => {\n    return !item.meta?.hideTab;\n  });\n});\n\n\nwatchEffect(() => {\n  if (activePathRef.value) {\n    const _activeIndex = getTabsState.value.findIndex(item => {\n      return getRouterKeyPath(item) === activePathRef.value;\n    });\n    if (_activeIndex === -1) {\n      activeIndex.value = getTabsState.value?.length - 1;\n    } else {\n      activeIndex.value = _activeIndex;\n    }\n    activeIndex.value = activeIndex.value < affixList?.length ? affixList?.length - 1 : activeIndex.value;\n  }\n});\n\nonBeforeRouteLeave(() => {\n  fromRoute.value = unref(router.currentRoute);\n});\n\nlistenerRouteChange((route) => {\n  if (!route) {\n    return;\n  }\n\n  const { meta = {} } = route;\n  const { currentActivePath, hideTab } = meta as RouteMeta;\n\n  const isHide = !hideTab ? null : currentActivePath;\n\n  // set current active tab value\n  const activePath = getRouterKeyPath(route);\n\n  if (activePathRef.value !== activePath) {\n    activePathRef.value = activePath;\n  }\n\n  if (isHide) {\n    // 如果当前 tab 是隐藏的，则从路由中根据 currentActivePath 寻找到此路由的信息，然后在 tabStore 添加此路由\n    let findParentRoute = router.getRoutes().find((item) => item.path === currentActivePath);\n    findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized, unref(fromRoute), activeIndex.value, route);\n  } else {\n    tabStore.addTab(unref(route), unref(fromRoute), activeIndex.value);\n  }\n});\n\n// 点击 tab 根据 tab 传入的 path 路径，跳转到对应页面\nfunction handleClick (pane: TabsPaneContext) {\n  if (activePathRef.value === pane.paneName) {\n  \treturn;\n  }\n  const clickTab = getTabsState.value[pane.attrs.index];\n  activePathRef.value = pane.paneName as string;\n  const hideActiveRoutePath = (clickTab?.meta?.hideActiveRoute as RouteLocationNormalized)?.fullPath;\n  if (hideActiveRoutePath) {\n    go(hideActiveRoutePath);\n  } else {\n    go(clickTab.fullPath || clickTab.path);\n  }\n}\n\n// click x close tab\nfunction handleRemove (targetPath: string) {\n  tabStore.closeTabByKey(targetPath, router);\n}\n\nconst [refs, setRefs] = useRefs<TabContentExpose>();\n\nfunction handleContextMenu (data: {pane: {attrs: {index: number;};}; event: any;}) {\n  const _index = data.pane.attrs.index;\n  const _event = data.event;\n  refs.value[_index].handleContext(_event);\n}\n\nconst _tabsStyle = computed(() => {\n  let initTabStyle: Record<string, Numberish> = {\n    padding: '4px 0 0',\n    'header-height': '26px',\n    'item-color': '#5C5C5C',\n    'item-bg-color': '#f8f8f8',\n    'font-size': '13px',\n    'item-padding': '0 10px',\n    'close-icon-left': '8px',\n    'item-distance': '10px',\n    'item-max-width': '348px',\n    'header-margin': '0 0 0 8px'\n  };\n\n  return { ...generateCssVars(initTabStyle, 'tabs', 'vft'), ...__props.tabsStyle };\n});\n\nconst { closeCurrent } = useTabs();\n\nhotkeys('command+e, ctrl+e', function () {\n  closeCurrent();\n  return false;\n});\n\nconst _contextMenuStyle = computed(() => {\n  return {\n    ...generateCssVars({\n      border: '1px solid #dcdfe6',\n      'sub-item-height': '40px',\n      'item-min-width': '150px'\n    }, 'menu', 'vft'),\n    ...__props.contextMenuStyle\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ns.b()\" :style=\"_tabsStyle\">\n    <vft-tabs\n      v-model:model-value=\"activePathRef\"\n      type=\"card\"\n      @tabClick=\"handleClick\"\n      @tabRemove=\"handleRemove\"\n      @tabContextMenu=\"handleContextMenu\"\n      :closeIconCfg=\"{ color: 'white'}\"\n    >\n      <!--why key add index：key not update after sort -->\n      <template v-for=\"(item, index) in getTabsState\" :key=\"getRouterKeyPath(item) + index\">\n        <vft-tab-pane :closable=\"!(item.meta?.affix)\" :index=\"index\" :name=\"getRouterKeyPath(item)\">\n          <template #label>\n            <tab-content :contextMenuStyle=\"_contextMenuStyle\" :affixNum=\"affixList?.length\"\n              :ref=\"setRefs(index)\" :tabItem=\"item\" />\n          </template>\n        </vft-tab-pane>\n      </template>\n    </vft-tabs>\n  </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","affixList","initAffixTabs","__props","useTabsDrag","tabStore","useMultipleTabStore","activePathRef","ref","activeIndex","fromRoute","router","useRouter","go","useRouterHelper","getTabsState","computed","item","_a","watchEffect","_activeIndex","getRouterKeyPath","onBeforeRouteLeave","unref","listenerRouteChange","route","meta","currentActivePath","hideTab","isHide","activePath","findParentRoute","handleClick","pane","clickTab","hideActiveRoutePath","_b","handleRemove","targetPath","refs","setRefs","useRefs","handleContextMenu","data","_index","_event","_tabsStyle","generateCssVars","closeCurrent","useTabs","hotkeys","_contextMenuStyle"],"mappings":"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"}