@qingmingmu/components 0.1.0-beta.0

package/es/components/message/index.mjs

@@ -0,0 +1,232 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, createVNode, toDisplayString, reactive, createApp, h, TransitionGroup } from 'vue';
+import { I as Icon } from '../../shared/components.D3on6_fI.mjs';
+import { _ as _export_sfc } from '../../shared/components.pcqpp-6-.mjs';
+import '@qingmingmu/components/es/components/message/style.css';
+import '@qingmingmu/icons';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmMessage" },
+  __name: "message",
+  props: {
+    item: { type: Object, required: true }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const iconName = computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "check-circle";
+        case "error":
+          return "error";
+        case "warning":
+          return "warning";
+        case "loading":
+          return "loading";
+        default:
+          return "info";
+      }
+    });
+    const colorVar = computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "var(--qm-message-color-success)";
+        case "error":
+          return "var(--qm-message-color-error)";
+        case "warning":
+          return "var(--qm-message-color-warning)";
+        case "loading":
+          return "var(--qm-message-color-loading)";
+        default:
+          return "var(--qm-message-color-info)";
+      }
+    });
+    function handleClose() {
+      emit("close", props.item.id);
+    }
+    const __returned__ = { props, emit, iconName, colorVar, handleClose, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-message__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-message", [`qm-message--${$props.item.type}`, { "qm-message--closable": $props.item.closable }]]),
+			role: "status",
+			"aria-live": "polite"
+		},
+		[
+			createCommentVNode(" 类型图标 "),
+			createElementVNode(
+				"span",
+				{
+					class: "qm-message__icon",
+					style: normalizeStyle({ color: $setup.colorVar }),
+					"aria-hidden": "true"
+				},
+				[createVNode($setup["QmIcon"], {
+					name: $setup.iconName,
+					class: normalizeClass({ "qm-message__spinner": $props.item.type === "loading" })
+				}, null, 8, ["name", "class"])],
+				4
+				/* STYLE */
+			),
+			createCommentVNode(" 文案 "),
+			createElementVNode(
+				"span",
+				_hoisted_1,
+				toDisplayString($props.item.content),
+				1
+				/* TEXT */
+			),
+			createCommentVNode(" 手动关闭 "),
+			$props.item.closable ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				type: "button",
+				class: "qm-message__close",
+				"aria-label": "关闭消息",
+				onClick: $setup.handleClose
+			}, [createVNode($setup["QmIcon"], {
+				name: "close",
+				style: { "font-size": "16px" }
+			})])) : createCommentVNode("v-if", true)
+		],
+		2
+		/* CLASS */
+	);
+}
+const MessageItem = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\message\\message.vue"]]);
+
+const DEFAULT_DURATION = 3e3;
+const DEFAULT_MAX = 5;
+let seed = 0;
+const instances = reactive([]);
+const timers = /* @__PURE__ */ new Map();
+let container = null;
+let app = null;
+function clearTimer(id) {
+  const t = timers.get(id);
+  if (t) {
+    clearTimeout(t);
+    timers.delete(id);
+  }
+}
+function startTimer(item) {
+  clearTimer(item.id);
+  if (item.duration > 0) {
+    timers.set(
+      item.id,
+      setTimeout(() => removeInstance(item.id), item.duration)
+    );
+  }
+}
+function removeInstance(id) {
+  clearTimer(id);
+  const idx = instances.findIndex((i) => i.id === id);
+  if (idx === -1)
+    return;
+  const [removed] = instances.splice(idx, 1);
+  removed?.onClose?.();
+}
+function createRoot() {
+  return {
+    setup() {
+      return () => h("div", { class: "qm-message-container" }, [
+        h(TransitionGroup, { name: "qm-message", tag: "div", class: "qm-message__list" }, () => instances.map(
+          (item) => h(MessageItem, {
+            key: item.id,
+            item,
+            onClose: () => removeInstance(item.id)
+          })
+        ))
+      ]);
+    }
+  };
+}
+function ensureContainer() {
+  if (container && app)
+    return;
+  container = document.createElement("div");
+  container.className = "qm-message-container-root";
+  document.body.appendChild(container);
+  app = createApp(createRoot());
+  app.mount(container);
+}
+function destroyMessageManager() {
+  for (const id of instances.map((i) => i.id)) clearTimer(id);
+  instances.splice(0, instances.length);
+  if (app) {
+    app.unmount();
+    app = null;
+  }
+  if (container) {
+    container.remove();
+    container = null;
+  }
+}
+function normalize(type, input) {
+  const opts = typeof input === "string" ? { content: input } : { ...input };
+  return {
+    content: opts.content ?? "",
+    type: opts.type ?? type,
+    duration: opts.duration ?? DEFAULT_DURATION,
+    closable: opts.closable ?? false,
+    max: opts.max ?? DEFAULT_MAX,
+    onClose: opts.onClose
+  };
+}
+function openMessage(type, input) {
+  const opts = normalize(type, input);
+  ensureContainer();
+  const item = reactive({
+    id: ++seed,
+    type: opts.type,
+    content: opts.content,
+    duration: opts.duration,
+    closable: opts.closable,
+    visible: true,
+    onClose: opts.onClose
+  });
+  if (opts.max > 0 && instances.length >= opts.max)
+    removeInstance(instances[instances.length - 1].id);
+  instances.unshift(item);
+  startTimer(item);
+  return {
+    close: () => removeInstance(item.id),
+    update: (patch) => {
+      if (typeof patch === "string") {
+        item.content = patch;
+        return;
+      }
+      if (patch.content !== void 0)
+        item.content = patch.content;
+      if (patch.type !== void 0)
+        item.type = patch.type;
+      if (patch.closable !== void 0)
+        item.closable = patch.closable;
+      if (patch.duration !== void 0) {
+        item.duration = patch.duration;
+        startTimer(item);
+      }
+    }
+  };
+}
+
+const message = {
+  success: (input) => openMessage("success", input),
+  error: (input) => openMessage("error", input),
+  warning: (input) => openMessage("warning", input),
+  info: (input) => openMessage("info", input),
+  loading: (input) => openMessage("loading", input)
+};
+const QmMessage = message;
+
+export { QmMessage, destroyMessageManager, message };

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

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/message/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱 / 命令式入口自引入）。
+import './style.css'

package/es/components/message/style.css

@@ -0,0 +1,121 @@
+@charset "UTF-8";
+.qm-message-container-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--qm-message-z-index);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.qm-message__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--qm-message-stack-gap);
+  align-items: center;
+  margin-top: 16px;
+}
+
+.qm-message {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--qm-message-gap);
+  align-items: center;
+  min-width: var(--qm-message-min-width);
+  max-width: var(--qm-message-max-width);
+  padding: var(--qm-message-padding);
+  font-size: var(--qm-message-font-size);
+  color: var(--qm-message-foreground);
+  pointer-events: auto;
+  background-color: var(--qm-message-bg);
+  border: 1px solid var(--qm-message-border);
+  border-radius: var(--qm-message-border-radius);
+  box-shadow: var(--qm-message-box-shadow);
+  /* 青冥品牌装饰：卡片底部天青飞白线 */
+}
+.qm-message::after {
+  position: absolute;
+  right: 16px;
+  bottom: 0;
+  left: 16px;
+  height: 2px;
+  pointer-events: none;
+  content: "";
+  background: var(--qm-message-decoration-color);
+  border-radius: 0 0 var(--qm-message-border-radius) var(--qm-message-border-radius);
+}
+.qm-message__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--qm-message-icon-size);
+  height: var(--qm-message-icon-size);
+  /* 统一走 QmIcon：1em 撑满图标容器，颜色由行内 colorVar 驱动 */
+}
+.qm-message__icon .qm-icon {
+  font-size: var(--qm-message-icon-size);
+}
+.qm-message__spinner {
+  /* 原内联 loading 线宽 2.5；旋转动画作用于内部 svg */
+  --qm-icon-stroke-width: 2.5;
+}
+.qm-message__spinner > svg {
+  transform-origin: center;
+  animation: qm-message-spin 0.9s linear infinite;
+}
+.qm-message__content {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+  word-break: break-word;
+}
+.qm-message__close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: var(--qm-message-close-color);
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+}
+.qm-message__close .qm-icon {
+  color: inherit;
+}
+.qm-message__close:hover {
+  color: var(--qm-message-close-hover-color);
+}
+.qm-message__close:focus-visible {
+  outline: 2px solid var(--qm-message-color-info);
+  outline-offset: 2px;
+}
+
+@keyframes qm-message-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.qm-message-enter-active,
+.qm-message-leave-active {
+  transition: opacity var(--qm-message-transition), transform var(--qm-message-transition);
+}
+
+.qm-message-enter-from {
+  opacity: 0;
+  transform: translateY(-12px) scale(0.96);
+}
+
+.qm-message-leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.98);
+}
+
+.qm-message-move {
+  transition: transform var(--qm-message-transition);
+}

package/es/components/notification/index.cjs

@@ -0,0 +1,288 @@
+'use strict';
+
+const vue = require('vue');
+const icon = require('../../shared/components.CRtd1JMp.cjs');
+const exportHelper = require('../../shared/components.DUidQ77e.cjs');
+require('@qingmingmu/components/es/components/notification/style.css');
+require('@qingmingmu/icons');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmNotification" },
+  __name: "notification",
+  props: {
+    item: { type: Object, required: true }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const iconName = vue.computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "check-circle";
+        case "error":
+          return "error";
+        case "warning":
+          return "warning";
+        default:
+          return "info";
+      }
+    });
+    const colorVar = vue.computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "var(--qm-notification-color-success)";
+        case "error":
+          return "var(--qm-notification-color-error)";
+        case "warning":
+          return "var(--qm-notification-color-warning)";
+        default:
+          return "var(--qm-notification-color-info)";
+      }
+    });
+    function handleClose() {
+      emit("close", props.item.id);
+    }
+    function handleAction() {
+      props.item.action?.onClick();
+    }
+    const __returned__ = { props, emit, iconName, colorVar, handleClose, handleAction, get QmIcon() {
+      return icon.Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-notification__main" };
+const _hoisted_2 = { class: "qm-notification__text" };
+const _hoisted_3 = {
+	key: 0,
+	class: "qm-notification__title"
+};
+const _hoisted_4 = {
+	key: 1,
+	class: "qm-notification__message"
+};
+const _hoisted_5 = { class: "qm-notification__aside" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		"div",
+		{
+			class: vue.normalizeClass(["qm-notification", [`qm-notification--${$props.item.type}`]]),
+			role: "status",
+			"aria-live": "polite"
+		},
+		[vue.createElementVNode("div", _hoisted_1, [vue.createElementVNode(
+			"span",
+			{
+				class: "qm-notification__icon",
+				style: vue.normalizeStyle({ color: $setup.colorVar }),
+				"aria-hidden": "true"
+			},
+			[vue.createVNode($setup["QmIcon"], { name: $setup.iconName }, null, 8, ["name"])],
+			4
+			/* STYLE */
+		), vue.createElementVNode("div", _hoisted_2, [
+			$props.item.title ? (vue.openBlock(), vue.createElementBlock(
+				"h3",
+				_hoisted_3,
+				vue.toDisplayString($props.item.title),
+				1
+				/* TEXT */
+			)) : vue.createCommentVNode("v-if", true),
+			$props.item.message ? (vue.openBlock(), vue.createElementBlock(
+				"p",
+				_hoisted_4,
+				vue.toDisplayString($props.item.message),
+				1
+				/* TEXT */
+			)) : vue.createCommentVNode("v-if", true),
+			vue.createCommentVNode(" footer 插槽：组件化使用时可自定义操作区；命令式由 action 渲染 "),
+			vue.renderSlot(_ctx.$slots, "footer")
+		])]), vue.createElementVNode("div", _hoisted_5, [$props.item.closable ? (vue.openBlock(), vue.createElementBlock("button", {
+			key: 0,
+			type: "button",
+			class: "qm-notification__close",
+			"aria-label": "关闭通知",
+			onClick: $setup.handleClose
+		}, [vue.createVNode($setup["QmIcon"], {
+			name: "close",
+			style: { "font-size": "14px" }
+		})])) : vue.createCommentVNode("v-if", true), $props.item.action ? (vue.openBlock(), vue.createElementBlock(
+			"button",
+			{
+				key: 1,
+				type: "button",
+				class: "qm-notification__action",
+				onClick: $setup.handleAction
+			},
+			vue.toDisplayString($props.item.action.text),
+			1
+			/* TEXT */
+		)) : vue.createCommentVNode("v-if", true)])],
+		2
+		/* CLASS */
+	);
+}
+const NotificationItem = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\notification\\notification.vue"]]);
+
+const DEFAULT_DURATION = 4500;
+const PLACEMENTS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+let seed = 0;
+const queues = {
+  "top-left": vue.reactive([]),
+  "top-right": vue.reactive([]),
+  "bottom-left": vue.reactive([]),
+  "bottom-right": vue.reactive([])
+};
+const timers = /* @__PURE__ */ new Map();
+let container = null;
+let app = null;
+function clearTimer(id) {
+  const t = timers.get(id);
+  if (t) {
+    clearTimeout(t);
+    timers.delete(id);
+  }
+}
+function startTimer(item) {
+  clearTimer(item.id);
+  if (item.duration > 0) {
+    timers.set(
+      item.id,
+      setTimeout(() => removeInstance(item.id), item.duration)
+    );
+  }
+}
+function findQueue(id) {
+  return PLACEMENTS.map((p) => queues[p]).find((q) => q.some((i) => i.id === id));
+}
+function removeInstance(id) {
+  clearTimer(id);
+  const queue = findQueue(id);
+  if (!queue)
+    return;
+  const idx = queue.findIndex((i) => i.id === id);
+  if (idx === -1)
+    return;
+  const [removed] = queue.splice(idx, 1);
+  removed?.onClose?.();
+}
+function createRoot() {
+  return {
+    setup() {
+      return () => vue.h(
+        "div",
+        { class: "qm-notification-container-root" },
+        PLACEMENTS.map(
+          (placement) => vue.h(
+            "div",
+            {
+              key: placement,
+              class: ["qm-notification-placement", `qm-notification-placement--${placement}`]
+            },
+            [
+              vue.h(
+                vue.TransitionGroup,
+                { name: "qm-notification", tag: "div", class: "qm-notification__list" },
+                () => queues[placement].map(
+                  (item) => vue.h(NotificationItem, {
+                    key: item.id,
+                    item,
+                    onClose: () => removeInstance(item.id)
+                  })
+                )
+              )
+            ]
+          )
+        )
+      );
+    }
+  };
+}
+function ensureContainer() {
+  if (container && app)
+    return;
+  container = document.createElement("div");
+  container.className = "qm-notification-root";
+  document.body.appendChild(container);
+  app = vue.createApp(createRoot());
+  app.mount(container);
+}
+function destroyNotificationManager() {
+  for (const id of [...timers.keys()]) clearTimer(id);
+  for (const p of PLACEMENTS) queues[p].splice(0, queues[p].length);
+  if (app) {
+    app.unmount();
+    app = null;
+  }
+  if (container) {
+    container.remove();
+    container = null;
+  }
+}
+function normalize(type, input) {
+  const opts = typeof input === "string" ? { message: input } : { ...input };
+  return {
+    ...opts,
+    type: opts.type ?? type,
+    duration: opts.duration ?? DEFAULT_DURATION,
+    closable: opts.closable ?? true,
+    placement: opts.placement ?? "top-right"
+  };
+}
+function openNotification(type, input) {
+  const opts = normalize(type, input);
+  ensureContainer();
+  const item = vue.reactive({
+    id: ++seed,
+    type: opts.type,
+    title: opts.title ?? "",
+    message: opts.message ?? "",
+    closable: opts.closable ?? true,
+    placement: opts.placement ?? "top-right",
+    action: opts.action,
+    visible: true,
+    duration: opts.duration ?? DEFAULT_DURATION,
+    onClose: opts.onClose
+  });
+  queues[item.placement].unshift(item);
+  startTimer(item);
+  return {
+    close: () => removeInstance(item.id),
+    update: (patch) => {
+      if (typeof patch === "string") {
+        item.message = patch;
+        return;
+      }
+      if (patch.title !== void 0)
+        item.title = patch.title;
+      if (patch.message !== void 0)
+        item.message = patch.message;
+      if (patch.type !== void 0)
+        item.type = patch.type;
+      if (patch.closable !== void 0)
+        item.closable = patch.closable;
+      if (patch.action !== void 0)
+        item.action = patch.action;
+      if (patch.duration !== void 0) {
+        item.duration = patch.duration;
+        startTimer(item);
+      }
+    }
+  };
+}
+
+const notification = {
+  success: (input) => openNotification("success", input),
+  error: (input) => openNotification("error", input),
+  warning: (input) => openNotification("warning", input),
+  info: (input) => openNotification("info", input)
+};
+const QmNotification = notification;
+
+exports.QmNotification = QmNotification;
+exports.destroyNotificationManager = destroyNotificationManager;
+exports.notification = notification;