@qingmingmu/components 0.1.0-beta.0

package/es/components/date-picker/style.css

@@ -0,0 +1,221 @@
+@charset "UTF-8";
+.qm-date-picker {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 240px;
+}
+.qm-date-picker__trigger {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: var(--qm-date-picker-height);
+  padding: var(--qm-date-picker-padding);
+  color: var(--qm-date-picker-foreground);
+  cursor: pointer;
+  background-color: var(--qm-date-picker-bg);
+  border: 1px solid var(--qm-date-picker-border);
+  border-radius: var(--qm-date-picker-border-radius);
+  transition: border-color var(--qm-date-picker-transition) ease, box-shadow var(--qm-date-picker-transition) ease;
+}
+.qm-date-picker__trigger:hover:not(.qm-date-picker--disabled) {
+  border-color: var(--qm-date-picker-focus-border);
+}
+.qm-date-picker__trigger:focus-within {
+  border-color: var(--qm-date-picker-focus-border);
+  box-shadow: var(--qm-date-picker-focus-ring);
+}
+.qm-date-picker__trigger--open {
+  border-color: var(--qm-date-picker-focus-border);
+  box-shadow: var(--qm-date-picker-focus-ring);
+}
+.qm-date-picker__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  font-size: var(--qm-date-picker-cell-font-size);
+  color: var(--qm-date-picker-foreground);
+  cursor: pointer;
+  outline: none;
+  background: transparent;
+  border: none;
+}
+.qm-date-picker__input::placeholder {
+  color: var(--qm-date-picker-placeholder);
+}
+.qm-date-picker__input:disabled {
+  cursor: not-allowed;
+}
+.qm-date-picker__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--qm-date-picker-placeholder);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--qm-date-picker-border-radius);
+  /* 统一走 QmIcon：颜色随按钮，保持原 2.5 线宽 */
+}
+.qm-date-picker__clear .qm-icon {
+  color: inherit;
+  --qm-icon-stroke-width: 2.5;
+}
+.qm-date-picker__clear:hover {
+  color: var(--qm-date-picker-foreground);
+}
+.qm-date-picker__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+  color: var(--qm-date-picker-placeholder);
+  pointer-events: none;
+}
+.qm-date-picker__icon .qm-icon {
+  color: inherit;
+}
+.qm-date-picker__panel {
+  z-index: var(--qm-date-picker-panel-z-index);
+  box-sizing: border-box;
+  width: 280px;
+  padding: 8px;
+  color: var(--qm-date-picker-foreground);
+  background-color: var(--qm-date-picker-panel-bg);
+  border: 1px solid var(--qm-date-picker-panel-border);
+  border-radius: var(--qm-date-picker-panel-border-radius);
+  box-shadow: var(--qm-date-picker-panel-shadow);
+}
+.qm-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--qm-date-picker-header-padding);
+}
+.qm-date-picker__title {
+  font-size: var(--qm-date-picker-header-font-size);
+  font-weight: var(--qm-date-picker-header-font-weight);
+  color: var(--qm-date-picker-foreground);
+}
+.qm-date-picker__nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: var(--qm-date-picker-foreground);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--qm-date-picker-border-radius);
+  transition: background-color var(--qm-date-picker-transition) ease;
+  /* 统一走 QmIcon：颜色随按钮 */
+}
+.qm-date-picker__nav .qm-icon {
+  color: inherit;
+}
+.qm-date-picker__nav:hover {
+  background-color: var(--qm-date-picker-cell-hover-bg);
+}
+.qm-date-picker__nav:focus-visible {
+  outline: none;
+  box-shadow: var(--qm-date-picker-focus-ring);
+}
+.qm-date-picker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding-bottom: 4px;
+}
+.qm-date-picker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--qm-date-picker-cell-size);
+  font-size: var(--qm-date-picker-cell-font-size);
+  color: var(--qm-date-picker-placeholder);
+}
+.qm-date-picker__row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.qm-date-picker__cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-date-picker-cell-size);
+  height: var(--qm-date-picker-cell-size);
+  padding: 0;
+  margin: 0 auto;
+  font-size: var(--qm-date-picker-cell-font-size);
+  color: var(--qm-date-picker-foreground);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--qm-date-picker-border-radius);
+  transition: background-color var(--qm-date-picker-transition) ease, color var(--qm-date-picker-transition) ease;
+}
+.qm-date-picker__cell:hover:not(:disabled) {
+  background-color: var(--qm-date-picker-cell-hover-bg);
+}
+.qm-date-picker__cell:focus-visible {
+  outline: none;
+  box-shadow: var(--qm-date-picker-focus-ring);
+}
+.qm-date-picker__cell--other {
+  color: var(--qm-date-picker-cell-other-color);
+}
+.qm-date-picker__cell--today {
+  font-weight: var(--qm-date-picker-header-font-weight);
+  color: var(--qm-date-picker-cell-active-bg);
+}
+.qm-date-picker__cell--highlight {
+  box-shadow: inset 0 0 0 2px var(--qm-date-picker-focus-border);
+}
+.qm-date-picker__cell--selected {
+  color: var(--qm-date-picker-cell-active-color);
+  background-color: var(--qm-date-picker-cell-active-bg);
+}
+.qm-date-picker__cell--disabled {
+  color: var(--qm-date-picker-disabled-color);
+  cursor: not-allowed;
+  background-color: var(--qm-date-picker-disabled-bg);
+}
+.qm-date-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 4px;
+  margin-top: 4px;
+  border-top: 1px solid var(--qm-date-picker-panel-border);
+}
+.qm-date-picker__today {
+  padding: 4px 8px;
+  font-size: var(--qm-date-picker-cell-font-size);
+  color: var(--qm-date-picker-cell-active-bg);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--qm-date-picker-border-radius);
+  transition: background-color var(--qm-date-picker-transition) ease;
+}
+.qm-date-picker__today:hover:not(:disabled) {
+  background-color: var(--qm-date-picker-cell-hover-bg);
+}
+.qm-date-picker__today:disabled {
+  color: var(--qm-date-picker-disabled-color);
+  cursor: not-allowed;
+}
+.qm-date-picker--disabled .qm-date-picker__trigger {
+  cursor: not-allowed;
+  background-color: var(--qm-date-picker-disabled-bg);
+  border-color: var(--qm-date-picker-border);
+  box-shadow: none;
+}
+.qm-date-picker--disabled .qm-date-picker__input,
+.qm-date-picker--disabled .qm-date-picker__icon {
+  color: var(--qm-date-picker-disabled-color);
+}

package/es/components/dialog/index.cjs

@@ -0,0 +1,278 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const vue = require('vue');
+const icon = require('../../shared/components.CRtd1JMp.cjs');
+const useDialog = require('../../shared/components.CAVYcOKF.cjs');
+const exportHelper = require('../../shared/components.DUidQ77e.cjs');
+require('@qingmingmu/icons');
+
+const dialogProps = {
+  /** 受控 v-model：是否显示 */
+  modelValue: { type: Boolean, default: false },
+  /** 标题（也可用 header 插槽） */
+  title: { type: String, default: "" },
+  /** 尺寸：small / medium / large */
+  size: { type: String, default: "medium" },
+  /** 自定义宽度（覆盖 size），如 '500px' / '80%' */
+  width: { type: String, default: "" },
+  /** 点击遮罩是否关闭 */
+  closeOnClickOverlay: { type: Boolean, default: true },
+  /** 按 Esc 是否关闭 */
+  closeOnEsc: { type: Boolean, default: true },
+  /** Teleport 目标，默认 body */
+  appendTo: { type: String, default: "body" },
+  /** 是否显示关闭按钮 */
+  showClose: { type: Boolean, default: true },
+  /** 关闭时销毁子元素（v-if 控制） */
+  destroyOnClose: { type: Boolean, default: false },
+  /** 是否显示遮罩 */
+  modal: { type: Boolean, default: true }
+};
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmDialog" },
+  __name: "dialog",
+  props: dialogProps,
+  emits: ["update:modelValue", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = vue.useId();
+    const titleId = `qm-dialog-title-${uid}`;
+    const mounted = vue.ref(false);
+    const panelRef = vue.ref(null);
+    let mouseDownInside = false;
+    const visible = vue.computed(() => props.modelValue);
+    const widthStyle = vue.computed(() => props.width ? { width: props.width } : void 0);
+    const { close, handleKeydown, trap, dispose } = useDialog.useDialog({
+      modelValue: visible,
+      closeOnEsc: vue.computed(() => props.closeOnEsc),
+      panelRef,
+      emitClose: (reason) => {
+        emit("update:modelValue", false);
+        emit("close", reason);
+      }
+    });
+    function handleAfterLeave() {
+      unlock();
+    }
+    let finalized = false;
+    function unlock() {
+      if (finalized)
+        return;
+      finalized = true;
+      dispose();
+      trap.restore();
+    }
+    function handleOverlayMouseDown(event) {
+      mouseDownInside = panelRef.value?.contains(event.target) ?? false;
+    }
+    function handleOverlayClick(event) {
+      if (mouseDownInside)
+        return;
+      if (props.closeOnClickOverlay && event.target === event.currentTarget)
+        close("overlay");
+    }
+    function handleOpen() {
+      emit("open");
+    }
+    vue.onMounted(() => {
+      mounted.value = true;
+      if (visible.value) {
+        useDialog.lockBodyScroll();
+        trap.record();
+        vue.nextTick(() => trap.focusFirst());
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      unlock();
+    });
+    vue.watch(
+      visible,
+      (val) => {
+        if (val) {
+          finalized = false;
+          handleOpen();
+        } else {
+          unlock();
+        }
+      },
+      { immediate: true }
+    );
+    const __returned__ = { props, emit, uid, titleId, mounted, panelRef, get mouseDownInside() {
+      return mouseDownInside;
+    }, set mouseDownInside(v) {
+      mouseDownInside = v;
+    }, visible, widthStyle, close, handleKeydown, trap, dispose, handleAfterLeave, get finalized() {
+      return finalized;
+    }, set finalized(v) {
+      finalized = v;
+    }, unlock, handleOverlayMouseDown, handleOverlayClick, handleOpen, get QmIcon() {
+      return icon.Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = { class: "qm-dialog__header" };
+const _hoisted_3 = { class: "qm-dialog__body" };
+const _hoisted_4 = {
+	key: 0,
+	class: "qm-dialog__footer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createBlock(vue.Teleport, {
+		to: _ctx.appendTo,
+		disabled: !$setup.mounted
+	}, [vue.createVNode(vue.Transition, {
+		name: "qm-dialog",
+		onAfterLeave: $setup.handleAfterLeave
+	}, {
+		default: vue.withCtx(() => [$setup.visible ? (vue.openBlock(), vue.createElementBlock(
+			"div",
+			{
+				key: 0,
+				class: vue.normalizeClass(["qm-dialog-overlay", { "qm-dialog-overlay--transparent": !_ctx.modal }]),
+				onMousedown: $setup.handleOverlayMouseDown,
+				onClick: $setup.handleOverlayClick,
+				onKeydown: _cache[1] || (_cache[1] = (...args) => $setup.handleKeydown && $setup.handleKeydown(...args))
+			},
+			[vue.createElementVNode("div", {
+				ref: "panelRef",
+				class: vue.normalizeClass(["qm-dialog", [`qm-dialog--${_ctx.size}`]]),
+				style: vue.normalizeStyle($setup.widthStyle),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": _ctx.title ? $setup.titleId : undefined,
+				"aria-label": _ctx.title ? undefined : "对话框",
+				tabindex: "-1"
+			}, [
+				vue.createElementVNode("header", _hoisted_2, [vue.renderSlot(_ctx.$slots, "header", { title: _ctx.title }, () => [_ctx.title ? (vue.openBlock(), vue.createElementBlock(
+					"h2",
+					{
+						key: 0,
+						id: $setup.titleId,
+						class: "qm-dialog__title"
+					},
+					vue.toDisplayString(_ctx.title),
+					1
+					/* TEXT */
+				)) : vue.createCommentVNode("v-if", true)]), _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "qm-dialog__close",
+					"aria-label": "关闭",
+					onClick: _cache[0] || (_cache[0] = ($event) => $setup.close("close-btn"))
+				}, [vue.createVNode($setup["QmIcon"], {
+					name: "close",
+					class: "qm-dialog__close-icon",
+					style: { "font-size": "14px" }
+				})])) : vue.createCommentVNode("v-if", true)]),
+				vue.createElementVNode("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_4, [vue.renderSlot(_ctx.$slots, "footer", { close: $setup.close })])) : vue.createCommentVNode("v-if", true)
+			], 14, _hoisted_1)],
+			34
+			/* CLASS, NEED_HYDRATION */
+		)) : vue.createCommentVNode("v-if", true)]),
+		_: 3
+	})], 8, ["to", "disabled"]);
+}
+const Dialog = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dialog\\dialog.vue"]]);
+
+function openDialog(options = {}) {
+  const {
+    title = "",
+    content = "",
+    size = "medium",
+    width = "",
+    okText = "\u786E\u5B9A",
+    cancelText = "\u53D6\u6D88",
+    showCancel = true,
+    closeOnClickOverlay = true,
+    closeOnEsc = true
+  } = options;
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const state = vue.reactive({ modelValue: true });
+    let settled = false;
+    const settle = (reason) => {
+      if (settled)
+        return;
+      settled = true;
+      state.modelValue = false;
+      resolve(reason);
+    };
+    const app = vue.createApp({
+      render() {
+        return vue.h(
+          Dialog,
+          {
+            "modelValue": state.modelValue,
+            title,
+            size,
+            width,
+            closeOnClickOverlay,
+            closeOnEsc,
+            "onUpdate:modelValue": (v) => {
+              state.modelValue = v;
+            },
+            "onClose": (reason) => {
+              settle(reason);
+            }
+          },
+          {
+            default: () => vue.h("p", null, content),
+            footer: () => [
+              showCancel ? vue.h(
+                "button",
+                {
+                  class: "qm-dialog__imperative-btn",
+                  onClick: () => settle("cancel")
+                },
+                cancelText
+              ) : null,
+              vue.h(
+                "button",
+                {
+                  class: "qm-dialog__imperative-btn qm-dialog__imperative-btn--primary",
+                  onClick: () => settle("ok")
+                },
+                okText
+              )
+            ]
+          }
+        );
+      }
+    });
+    app.mount(container);
+    const stop = vue.watch(
+      () => state.modelValue,
+      async (visible) => {
+        if (visible)
+          return;
+        stop();
+        await vue.nextTick();
+        setTimeout(() => {
+          app.unmount();
+          container.remove();
+        }, 300);
+      }
+    );
+  });
+}
+
+const QmDialogNamespace = Object.assign(Dialog, { open: openDialog });
+
+exports.createFocusTrap = useDialog.createFocusTrap;
+exports.getFocusable = useDialog.getFocusable;
+exports.lockBodyScroll = useDialog.lockBodyScroll;
+exports.unlockBodyScroll = useDialog.unlockBodyScroll;
+exports.default = QmDialogNamespace;
+exports.dialogProps = dialogProps;
+exports.openDialog = openDialog;

package/es/components/dialog/index.d.cts

@@ -0,0 +1,133 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+export { c as createFocusTrap, g as getFocusable, l as lockBodyScroll, u as unlockBodyScroll } from '../../shared/components.B_aXqCE8.cjs';
+
+/**
+ * QmDialog 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 03-T2：受控 v-model 开合 / 模态遮罩 / 尺寸 / 可访问性完整
+ */
+
+/** 关闭原因契约（task-02 §4：便于业务区分） */
+type DialogCloseReason = 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel';
+/** 对话框尺寸（§6.3：small | medium | large） */
+type DialogSize = 'small' | 'medium' | 'large';
+/** props 声明 */
+declare const dialogProps: {
+    /** 受控 v-model：是否显示 */
+    readonly modelValue: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 标题（也可用 header 插槽） */
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 尺寸：small / medium / large */
+    readonly size: {
+        readonly type: PropType<DialogSize>;
+        readonly default: "medium";
+    };
+    /** 自定义宽度（覆盖 size），如 '500px' / '80%' */
+    readonly width: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 点击遮罩是否关闭 */
+    readonly closeOnClickOverlay: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 按 Esc 是否关闭 */
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** Teleport 目标，默认 body */
+    readonly appendTo: {
+        readonly type: StringConstructor;
+        readonly default: "body";
+    };
+    /** 是否显示关闭按钮 */
+    readonly showClose: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 关闭时销毁子元素（v-if 控制） */
+    readonly destroyOnClose: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 是否显示遮罩 */
+    readonly modal: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+/** emits 声明 */
+interface DialogEmits {
+    'update:modelValue': [value: boolean];
+    'open': [];
+    'close': [reason: DialogCloseReason];
+}
+
+/**
+ * QmDialog.open 命令式打开（03-T4 §3.5）
+ *
+ * 契约：
+ *   const reason = await openDialog({ title: '删除确认', content: '...' })
+ *   // reason: 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel'
+ *
+ * 实现：
+ * - 复用受控 QmDialog 组件渲染（焦点陷阱/遮罩/滚动锁定/关闭原因全部复用 03-T2）；
+ * - 动态挂载到 body：createApp 挂到独立容器，关闭离开动画完成后卸载应用、移除容器（无泄漏）；
+ * - 默认渲染「取消 / 确定」底部按钮，点击分别以 cancel / ok 原因 resolve。
+ */
+
+/** openDialog 入参 */
+interface OpenDialogOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文（纯文本） */
+    content?: string;
+    /** 尺寸 */
+    size?: DialogSize;
+    /** 自定义宽度 */
+    width?: string;
+    /** 确定按钮文案，默认「确定」 */
+    okText?: string;
+    /** 取消按钮文案，默认「取消」 */
+    cancelText?: string;
+    /** 是否显示取消按钮，默认 true */
+    showCancel?: boolean;
+    /** 点击遮罩是否关闭，默认 true */
+    closeOnClickOverlay?: boolean;
+    /** Esc 是否关闭，默认 true */
+    closeOnEsc?: boolean;
+}
+/**
+ * 命令式打开对话框。
+ * @returns Promise，resolve 为关闭原因
+ */
+declare function openDialog(options?: OpenDialogOptions): Promise<DialogCloseReason>;
+
+declare const QmDialogNamespace: {
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<Record<string, unknown>>, Record<string, unknown>, {}, vue.ComputedOptions, vue.MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & vue.ComponentOptionsBase<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    open: typeof openDialog;
+};
+
+// @ts-ignore
+export = QmDialogNamespace;
+export { dialogProps, openDialog };
+export type { DialogCloseReason, DialogEmits, DialogSize, OpenDialogOptions };