vft 0.0.524 → 0.0.525

package/es/components/menu-item/style/index.js

@@ -1,3 +1,3 @@
-import "vft/theme-style/src/base.scss";
-import "vft/theme-style/src/divider.scss";
+import "../../base/style/index.js";
+import "../../divider/style/index.js";
 import "vft/theme-style/src/menu-item.scss";

package/es/components/menu-item-group/style/css.js

@@ -1,2 +1,2 @@
-import "vft/theme-style/base.css";
+import "../../base/style/css.js";
 import "vft/theme-style/vft-menu-item-group.css";

package/es/components/menu-item-group/style/index.js

@@ -1,2 +1,2 @@
-import "vft/theme-style/src/base.scss";
+import "../../base/style/index.js";
 import "vft/theme-style/src/menu-item-group.scss";

package/es/components/message/index.js

@@ -1,17 +1,7 @@
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "vue";
-import { withInstallFunction as s } from "../../utils/vue/install.js";
-import "lodash-es";
-import "../form/index.js";
-import e from "./method.js";
-import { messageDefaults as u, messageTypes as c } from "./types.js";
-const g = s(e, "$message");
-export {
-  g as Message,
-  g as VftMessage,
-  g as default,
-  u as messageDefaults,
-  c as messageTypes
-};
+import { withInstallFunction } from "../../utils/vue/install.js";
+import { messageDefaults, messageTypes } from "./types.js";
+import message from "./method.js";
+//#region ../../packages/components/message/index.ts
+const VftMessage = withInstallFunction(message, "$message");
+//#endregion
+export { VftMessage as Message, VftMessage, VftMessage as default, messageDefaults, messageTypes };

package/es/components/message/instance.js

@@ -1,15 +1,23 @@
-import { shallowReactive as c } from "vue";
-const r = c([]), i = (e) => {
-  const t = r.findIndex((o) => o.id === e), s = r[t];
-  let n;
-  return t > 0 && (n = r[t - 1]), { current: s, prev: n };
-}, f = (e) => {
-  const { prev: t } = i(e);
-  return t ? t.vm.exposed.bottom.value : 0;
-}, a = (e, t) => r.findIndex((n) => n.id === e) > 0 ? 20 : t;
-export {
-  i as getInstance,
-  f as getLastOffset,
-  a as getOffsetOrSpace,
-  r as instances
+import { shallowReactive } from "vue";
+//#region ../../packages/components/message/instance.ts
+const instances = shallowReactive([]);
+const getInstance = (id) => {
+	const idx = instances.findIndex((instance) => instance.id === id);
+	const current = instances[idx];
+	let prev;
+	if (idx > 0) prev = instances[idx - 1];
+	return {
+		current,
+		prev
+	};
 };
+const getLastOffset = (id) => {
+	const { prev } = getInstance(id);
+	if (!prev) return 0;
+	return prev.vm.exposed.bottom.value;
+};
+const getOffsetOrSpace = (id, offset) => {
+	return instances.findIndex((instance) => instance.id === id) > 0 ? 20 : offset;
+};
+//#endregion
+export { getInstance, getLastOffset, getOffsetOrSpace, instances };

package/es/components/message/message.js

@@ -0,0 +1,5 @@
+import message_vue_vue_type_script_setup_true_lang_default from "./message.vue_vue_type_script_setup_true_lang.js";
+//#region ../../packages/components/message/message.vue
+var message_default = message_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { message_default as default };

package/es/components/message/message.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,192 @@
+import { useGlobalComponentSettings } from "../config-provider/hooks/use-global-config.js";
+import { VftIcon } from "../icon/index.js";
+import { getLastOffset, getOffsetOrSpace } from "./instance.js";
+import { singleAttrToObj } from "@vft/utils";
+import { useResizeObserver, useTimeoutFn } from "@vueuse/core";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { useEventListener as useEventListener$1 } from "@vft/use";
+import { EVENT_CODE } from "@vft/constants";
+//#region ../../packages/components/message/message.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["innerHTML"];
+var message_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "message",
+	props: {
+		customClass: {
+			type: String,
+			required: false
+		},
+		center: {
+			type: Boolean,
+			required: false
+		},
+		dangerouslyUseHTMLString: {
+			type: Boolean,
+			required: false
+		},
+		duration: {
+			type: Number,
+			required: true
+		},
+		icon: {
+			type: null,
+			required: false
+		},
+		showIcon: {
+			type: Boolean,
+			required: false
+		},
+		closeIcon: {
+			type: null,
+			required: false
+		},
+		id: {
+			type: String,
+			required: true
+		},
+		message: {
+			type: [
+				String,
+				Object,
+				Function
+			],
+			required: false
+		},
+		onClose: {
+			type: Function,
+			required: false
+		},
+		showClose: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		offset: {
+			type: Number,
+			required: true
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		grouping: {
+			type: Boolean,
+			required: false
+		},
+		repeatNum: {
+			type: Number,
+			required: false
+		}
+	},
+	emits: ["destroy"],
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { ns, zIndex } = useGlobalComponentSettings("message");
+		const { currentZIndex, nextZIndex } = zIndex;
+		const messageRef = ref();
+		const visible = ref(false);
+		const height = ref(0);
+		let stopTimer;
+		const iconCfgMap = /* @__PURE__ */ new Map([
+			["primary", { icon: "icon-info-filled" }],
+			["info", { icon: "icon-info-filled" }],
+			["success", { icon: "icon-success-filled" }],
+			["error", { icon: "icon-circle-close-filled" }],
+			["warning", { icon: "icon-warning-filled" }]
+		]);
+		const iconCfg = computed(() => singleAttrToObj(props.icon, "icon", { icon: iconCfgMap.get(props.type)?.icon }));
+		const closeIconCfg = computed(() => singleAttrToObj(props.icon, "icon", { icon: "icon-close" }));
+		const typeClass = computed(() => {
+			const type = props.type;
+			return { [ns.bm("icon", type)]: type };
+		});
+		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?.();
+		}
+		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$1(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: __props.onClose,
+				onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy")),
+				persisted: ""
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					id: __props.id,
+					ref_key: "messageRef",
+					ref: messageRef,
+					class: normalizeClass([
+						unref(ns).b(),
+						{ [unref(ns).m(__props.type)]: __props.type && !__props.icon },
+						unref(ns).is("center", __props.center),
+						unref(ns).is("closable", __props.showClose),
+						__props.customClass
+					]),
+					style: normalizeStyle(customStyle.value),
+					role: "alert",
+					onMouseenter: clearTimer,
+					onMouseleave: startTimer
+				}, [
+					__props.showIcon && iconCfg.value?.icon ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass([unref(ns).e("icon"), typeClass.value])
+					}, [createVNode(unref(VftIcon), normalizeProps(guardReactiveProps(iconCfg.value)), null, 16)], 2)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
+						key: 0,
+						class: normalizeClass(unref(ns).e("content"))
+					}, toDisplayString(__props.message), 3)) : (openBlock(), createElementBlock("p", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("content")),
+						innerHTML: __props.message
+					}, null, 10, _hoisted_2))]),
+					__props.showClose ? (openBlock(), createBlock(unref(VftIcon), mergeProps({
+						key: 1,
+						class: unref(ns).e("closeBtn")
+					}, closeIconCfg.value, { onClick: withModifiers(close, ["stop"]) }), null, 16, ["class"])) : createCommentVNode("v-if", true)
+				], 46, _hoisted_1), [[vShow, visible.value]])]),
+				_: 3
+			}, 8, ["name", "onBeforeLeave"]);
+		};
+	}
+});
+//#endregion
+export { message_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/message/method.js

@@ -1,104 +1,108 @@
-import { isNumber as T, isString as u, isFunction as p, isElement as v } from "@vft/utils";
-import { isVNode as h, createVNode as C, render as g } from "vue";
-import "../config-provider/index.js";
-import { isClient as b } from "@vueuse/core";
-import { debugWarn as y } from "../../utils/error.js";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import "../form/index.js";
-import { instances as r } from "./instance.js";
-import E from "./message.vue2.js";
-import { messageDefaults as _, messageTypes as z } from "./types.js";
-import { messageConfig as a } from "../config-provider/constants.js";
-let D = 1;
-const x = (e) => {
-  const o = !e || u(e) || h(e) || p(e) ? { message: e } : e, n = {
-    ...{
-      ..._,
-      ...a
-    },
-    ...o
-  };
-  if (!n.appendTo)
-    n.appendTo = document.body;
-  else if (u(n.appendTo)) {
-    let t = document.querySelector(n.appendTo);
-    v(t) || (y(
-      "VftMessage",
-      "the appendTo option is not an HTMLElement. Falling back to document.body."
-    ), t = document.body), n.appendTo = t;
-  }
-  return n;
-}, M = (e) => {
-  const o = r.indexOf(e);
-  if (o === -1) return;
-  r.splice(o, 1);
-  const { handler: s } = e;
-  s.close();
-}, N = ({ appendTo: e, ...o }, s) => {
-  const n = `message_${D++}`, t = o.onClose, l = document.createElement("div"), i = {
-    ...o,
-    id: n,
-    onClose: () => {
-      t?.(), M(f);
-    },
-    // 清除 message element 防止内存泄漏
-    onDestroy: () => {
-      g(null, l);
-    }
-  }, c = C(
-    E,
-    i,
-    p(i.message) || h(i.message) ? {
-      default: p(i.message) ? i.message : () => i.message
-    } : null
-  );
-  c.appContext = s || m._context, g(c, l), e.appendChild(l.firstElementChild);
-  const d = c.component, f = {
-    id: n,
-    vnode: c,
-    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: c.component.props
-  };
-  return f;
-}, m = (e = {}, o) => {
-  if (!b) return { close: () => {
-  } };
-  if (T(a.max) && r.length >= a.max)
-    return { close: () => {
-    } };
-  const s = x(e);
-  if (s.grouping && r.length) {
-    const t = r.find(
-      ({ vnode: l }) => l.props?.message === s.message
-    );
-    if (t)
-      return t.props.repeatNum += 1, t.props.type = s.type, t.handler;
-  }
-  const n = N(s, o);
-  return r.push(n), n.handler;
+import { debugWarn } from "../../utils/error.js";
+import { messageConfig } from "../config-provider/constants.js";
+import { instances } from "./instance.js";
+import message_default from "./message.js";
+import { messageDefaults, messageTypes } from "./types.js";
+import { isElement, isFunction, isNumber, isString } from "@vft/utils";
+import { isClient as isClient$1 } from "@vueuse/core";
+import { createVNode, isVNode, render } from "vue";
+//#region ../../packages/components/message/method.ts
+let seed = 1;
+const normalizeOptions = (params) => {
+	const options = !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params;
+	const normalized = {
+		...messageDefaults,
+		...messageConfig,
+		...options
+	};
+	if (!normalized.appendTo) normalized.appendTo = document.body;
+	else if (isString(normalized.appendTo)) {
+		let appendTo = document.querySelector(normalized.appendTo);
+		if (!isElement(appendTo)) {
+			debugWarn("VftMessage", "the appendTo option is not an HTMLElement. Falling back to document.body.");
+			appendTo = document.body;
+		}
+		normalized.appendTo = appendTo;
+	}
+	return normalized;
 };
-z.forEach((e) => {
-  m[e] = (o = {}, s) => {
-    const n = x(o);
-    return m({ ...n, type: e }, s);
-  };
+const closeMessage = (instance) => {
+	const idx = instances.indexOf(instance);
+	if (idx === -1) return;
+	instances.splice(idx, 1);
+	const { handler } = instance;
+	handler.close();
+};
+/**
+* @description 创建一个 message 实例
+* @author wfd
+* @date 2022/10/31 15:37
+* @example
+* @param {any} appendTo
+* @param {Omit<, "appendTo">} options
+* @param {AppContext | null} context
+* @returns {MessageContext}
+*/
+const createMessage = ({ appendTo, ...options }, context) => {
+	const id = `message_${seed++}`;
+	const userOnClose = options.onClose;
+	const container = document.createElement("div");
+	const props = {
+		...options,
+		id,
+		onClose: () => {
+			userOnClose?.();
+			closeMessage(instance);
+		},
+		onDestroy: () => {
+			render(null, container);
+		}
+	};
+	const vnode = createVNode(message_default, props, isFunction(props.message) || isVNode(props.message) ? { default: isFunction(props.message) ? props.message : () => props.message } : null);
+	vnode.appContext = context || message._context;
+	render(vnode, container);
+	appendTo.appendChild(container.firstElementChild);
+	const vm = vnode.component;
+	const instance = {
+		id,
+		vnode,
+		vm,
+		handler: { close: () => {
+			vm.exposed.visible.value = false;
+		} },
+		props: vnode.component.props
+	};
+	return instance;
+};
+const message = (options = {}, context) => {
+	if (!isClient$1) return { close: () => void 0 };
+	if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) return { close: () => void 0 };
+	const normalized = normalizeOptions(options);
+	if (normalized.grouping && instances.length) {
+		const instance = instances.find(({ vnode: vm }) => vm.props?.message === normalized.message);
+		if (instance) {
+			instance.props.repeatNum += 1;
+			instance.props.type = normalized.type;
+			return instance.handler;
+		}
+	}
+	const instance = createMessage(normalized, context);
+	instances.push(instance);
+	return instance.handler;
+};
+messageTypes.forEach((type) => {
+	message[type] = (options = {}, appContext) => {
+		const normalized = normalizeOptions(options);
+		return message({
+			...normalized,
+			type
+		}, appContext);
+	};
 });
-function O(e) {
-  for (const o of r)
-    (!e || e === o.props.type) && o.handler.close();
+function closeAll(type) {
+	for (const instance of instances) if (!type || type === instance.props.type) instance.handler.close();
 }
-m.closeAll = O;
-m._context = null;
-export {
-  O as closeAll,
-  m as default
-};
+message.closeAll = closeAll;
+message._context = null;
+//#endregion
+export { closeAll, message as default };

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

@@ -1,2 +1,2 @@
-import "vft/theme-style/base.css";
+import "../../base/style/css.js";
 import "vft/theme-style/vft-message.css";

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

@@ -1,2 +1,2 @@
-import "vft/theme-style/src/base.scss";
+import "../../base/style/index.js";
 import "vft/theme-style/src/message.scss";

package/es/components/message/types.js

@@ -1,23 +1,29 @@
-import { isClient as e } from "@vueuse/core";
-const o = ["primary", "success", "info", "warning", "error"], n = {
-  customClass: "",
-  center: !1,
-  dangerouslyUseHTMLString: !1,
-  duration: 3e3,
-  icon: void 0,
-  showIcon: !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
+import { isClient } from "@vueuse/core";
+//#region ../../packages/components/message/types.ts
+const messageTypes = [
+	"primary",
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+const messageDefaults = {
+	customClass: "",
+	center: false,
+	dangerouslyUseHTMLString: false,
+	duration: 3e3,
+	icon: void 0,
+	showIcon: true,
+	id: "",
+	message: "",
+	onClose: void 0,
+	showClose: false,
+	type: "info",
+	offset: 16,
+	zIndex: 0,
+	grouping: false,
+	repeatNum: 1,
+	appendTo: isClient ? document.body : void 0
 };
+//#endregion
+export { messageDefaults, messageTypes };

package/es/components/message-box/index.js

@@ -1,14 +1,6 @@
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "vue";
-import { withInstallFunction as o } from "../../utils/vue/install.js";
-import "lodash-es";
-import "../form/index.js";
-import t from "./method.js";
-const f = o(t, "$msgbox");
-export {
-  f as MessageBox,
-  f as VftMessageBox,
-  f as default
-};
+import { withInstallFunction } from "../../utils/vue/install.js";
+import MessageBox from "./method.js";
+//#region ../../packages/components/message-box/index.ts
+const VftMessageBox = withInstallFunction(MessageBox, "$msgbox");
+//#endregion
+export { VftMessageBox as MessageBox, VftMessageBox, VftMessageBox as default };

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

@@ -0,0 +1,5 @@
+import message_box_vue_vue_type_script_setup_true_lang_default from "./message-box.vue_vue_type_script_setup_true_lang.js";
+//#region ../../packages/components/message-box/message-box.vue
+var message_box_default = message_box_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { message_box_default as default };