@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.P8ob4csG.d.mts

@@ -0,0 +1,499 @@
+import { PropType, Ref, ComputedRef, defineComponent, useId, ref, toRef, watch, onMounted, onBeforeUnmount, computed, nextTick, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, withModifiers, createVNode, createBlock, Teleport, normalizeStyle, toDisplayString, Fragment, renderList } from 'vue';
+import { u as usePositioning } from './components.4UjasbrA.mjs';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmDatePicker 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 04-T10：输入框 + 下拉日历面板 / 月份切换 / 今日高亮 / min-max 禁用 / 清除
+ */
+
+/** 选择类型（daterange 为 API 兼容预留，当前实现聚焦 date 单选） */
+type DatePickerType = 'date' | 'daterange';
+/** 显示格式（YYYY / MM / DD 令牌，默认 YYYY-MM-DD） */
+type DatePickerFormat = string;
+/** props 声明（纯类型 + 默认值，供 SFC 与行为层复用） */
+declare const datePickerProps: {
+    /** 受控值（v-model，YYYY-MM-DD 字符串） */
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 选择类型 */
+    readonly type: {
+        readonly type: PropType<DatePickerType>;
+        readonly default: "date";
+    };
+    /** 占位文案 */
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "请选择日期";
+    };
+    /** 显示格式（YYYY-MM-DD 令牌） */
+    readonly format: {
+        readonly type: StringConstructor;
+        readonly default: "YYYY-MM-DD";
+    };
+    /** 禁用态：输入框禁用 + 面板不可展开 */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 有值时显示清除按钮 */
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 最小可选日期（YYYY-MM-DD，范围外禁用） */
+    readonly min: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 最大可选日期（YYYY-MM-DD，范围外禁用） */
+    readonly max: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+};
+/** emits 声明 */
+interface DatePickerEmits {
+    /** 值同步（v-model） */
+    'update:modelValue': [value: string];
+    /** 选中日期变化 */
+    'change': [value: string];
+    /** 清除时触发 */
+    'clear': [];
+}
+
+/**
+ * useDatePicker 行为层（04-T10）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 日期计算全部基于原生 Date（零第三方依赖）：
+ *   · toDateString / parseDate：YYYY-MM-DD 字符串 ↔ Date；
+ *   · formatDate：YYYY/MM/DD 令牌格式化；
+ *   · getMonthMatrix：6 行 7 列日历网格（含上月/下月补位，非本月标记）；
+ * - 面板状态：open / 视图年月（viewYear/viewMonth）/ 月份切换；
+ * - 选中语义：selectDate emit update:modelValue + change 并关闭面板；
+ * - 禁用判定：min/max 字符串比较（YYYY-MM-DD 字典序即时间序）。
+ */
+
+/** Date → YYYY-MM-DD */
+declare function toDateString(date: Date): string;
+/** YYYY-MM-DD → Date（非法日期如 2026-02-30 返回 null） */
+declare function parseDate(value: string): Date | null;
+/** Date → 按 format 格式化（YYYY/MM/DD 令牌） */
+declare function formatDate(date: Date, format: string): string;
+/** 日历格子 */
+interface CalendarDay {
+    /** YYYY-MM-DD */
+    date: string;
+    /** 日号 */
+    day: number;
+    /** 是否属于当前展示月份（否则为前后月补位） */
+    inMonth: boolean;
+}
+/**
+ * 生成 6 行 7 列日历网格（42 格，含上月尾部 / 下月头部补位）。
+ * 基于原生 Date：new Date(year, month+1, 0) 取当月天数，getDay() 取星期。
+ */
+declare function getMonthMatrix(year: number, month: number): CalendarDay[][];
+/** 周表头（周日开头，与中国日历惯例一致） */
+declare const WEEKDAYS: string[];
+interface UseDatePickerOptions {
+    modelValue: Ref<string>;
+    format: Ref<string>;
+    disabled: Ref<boolean>;
+    min: Ref<string>;
+    max: Ref<string>;
+    emitUpdate: (value: string) => void;
+    emitChange: (value: string) => void;
+    emitClear: () => void;
+}
+interface UseDatePickerReturn {
+    open: Ref<boolean>;
+    /** 面板视图年 */
+    viewYear: Ref<number>;
+    /** 面板视图月（0-11） */
+    viewMonth: Ref<number>;
+    /** 展示值（按 format 格式化，非受控模式驱动自内部态） */
+    displayValue: ComputedRef<string>;
+    /** 键盘高亮日期（YYYY-MM-DD，面板内方向键移动） */
+    highlightDate: Ref<string>;
+    /** 6x7 日历网格 */
+    calendarRows: ComputedRef<CalendarDay[][]>;
+    /** 是否今日 */
+    isToday: (date: string) => boolean;
+    /** 是否选中 */
+    isSelected: (date: string) => boolean;
+    /** 是否禁用（min/max 范围外） */
+    isDisabled: (date: string) => boolean;
+    togglePanel: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    /** 选中日期（禁用拦截；更新内部态 + emit + 关闭面板） */
+    selectDate: (date: string) => void;
+    /** 键盘高亮移动（deltaDays：±1 天 / ±7 天），视图跟随跨月 */
+    moveHighlight: (deltaDays: number) => void;
+    prevMonth: () => void;
+    nextMonth: () => void;
+    /** 清除（emit clear + update:modelValue('') + 清内部态） */
+    clear: () => void;
+}
+declare function useDatePicker(options: UseDatePickerOptions): UseDatePickerReturn;
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmDatePicker" },
+  __name: "date-picker",
+  props: datePickerProps,
+  emits: ["update:modelValue", "change", "clear"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = useId();
+    const panelId = `qm-date-picker-panel-${uid}`;
+    const rootRef = ref(null);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const dp = useDatePicker({
+      modelValue: toRef(props, "modelValue"),
+      format: toRef(props, "format"),
+      disabled: toRef(props, "disabled"),
+      min: toRef(props, "min"),
+      max: toRef(props, "max"),
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value),
+      emitClear: () => emit("clear")
+    });
+    const {
+      open,
+      viewYear,
+      viewMonth,
+      displayValue,
+      highlightDate,
+      calendarRows,
+      isToday,
+      isSelected,
+      isDisabled,
+      togglePanel,
+      closePanel,
+      selectDate,
+      moveHighlight,
+      prevMonth,
+      nextMonth,
+      clear
+    } = dp;
+    const {
+      positionStyle,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning({
+      triggerRef,
+      panelRef,
+      placement: ref("bottom"),
+      offset: 4,
+      flip: true
+    });
+    function onDocumentMouseDown(event) {
+      const target = event.target;
+      if (rootRef.value?.contains(target) || panelRef.value?.contains(target))
+        return;
+      closePanel();
+    }
+    watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+          document.addEventListener("mousedown", onDocumentMouseDown, true);
+        } else {
+          stopAutoReposition();
+          document.removeEventListener("mousedown", onDocumentMouseDown, true);
+        }
+      },
+      { flush: "post" }
+    );
+    onMounted(() => {
+      if (open.value)
+        void updatePosition();
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onDocumentMouseDown, true);
+      disposePositioning();
+    });
+    const rootClass = computed(() => ["qm-date-picker", { "qm-date-picker--disabled": props.disabled }]);
+    const triggerClass = computed(() => [
+      "qm-date-picker__trigger",
+      { "qm-date-picker__trigger--open": open.value }
+    ]);
+    const todayString = computed(() => toDateString(/* @__PURE__ */ new Date()));
+    function cellClass(cell) {
+      return {
+        "qm-date-picker__cell--other": !cell.inMonth,
+        "qm-date-picker__cell--today": isToday(cell.date),
+        "qm-date-picker__cell--selected": isSelected(cell.date),
+        "qm-date-picker__cell--highlight": cell.date === highlightDate.value,
+        "qm-date-picker__cell--disabled": isDisabled(cell.date)
+      };
+    }
+    function onTriggerKeydown(event) {
+      if (props.disabled)
+        return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        togglePanel();
+      } else if (event.key === "Escape") {
+        closePanel();
+      }
+    }
+    function onPanelKeydown(event) {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          moveHighlight(-1);
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          moveHighlight(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveHighlight(-7);
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          moveHighlight(7);
+          break;
+        case "Enter": {
+          if (!isDisabled(highlightDate.value)) {
+            event.preventDefault();
+            selectDate(highlightDate.value);
+          }
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          closePanel();
+          break;
+      }
+    }
+    watch(
+      open,
+      async (val) => {
+        if (!val)
+          return;
+        await nextTick();
+        const cell = panelRef.value?.querySelector(".qm-date-picker__cell--highlight");
+        cell?.focus();
+      },
+      { flush: "post" }
+    );
+    function onClear() {
+      clear();
+    }
+    const __returned__ = { props, emit, uid, panelId, rootRef, triggerRef, panelRef, dp, open, viewYear, viewMonth, displayValue, highlightDate, calendarRows, isToday, isSelected, isDisabled, togglePanel, closePanel, selectDate, moveHighlight, prevMonth, nextMonth, clear, positionStyle, updatePosition, startAutoReposition, stopAutoReposition, disposePositioning, onDocumentMouseDown, rootClass, triggerClass, todayString, cellClass, onTriggerKeydown, onPanelKeydown, onClear, get QmIcon() {
+      return Icon;
+    }, get WEEKDAYS() {
+      return WEEKDAYS;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-disabled"
+];
+const _hoisted_2 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-label"
+];
+const _hoisted_3 = {
+	class: "qm-date-picker__icon",
+	"aria-hidden": "true"
+};
+const _hoisted_4 = { class: "qm-date-picker__header" };
+const _hoisted_5 = {
+	class: "qm-date-picker__title",
+	"aria-live": "polite"
+};
+const _hoisted_6 = { class: "qm-date-picker__weekdays" };
+const _hoisted_7 = { class: "qm-date-picker__body" };
+const _hoisted_8 = [
+	"disabled",
+	"aria-pressed",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_9 = { class: "qm-date-picker__footer" };
+const _hoisted_10 = ["disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			ref: "rootRef",
+			class: normalizeClass($setup.rootClass),
+			"data-qm": "date-picker"
+		},
+		[
+			createCommentVNode(" 触发器 "),
+			createElementVNode("div", {
+				ref: "triggerRef",
+				class: normalizeClass($setup.triggerClass),
+				role: "combobox",
+				"aria-expanded": $setup.open,
+				"aria-haspopup": "dialog",
+				"aria-controls": $setup.open ? $setup.panelId : undefined,
+				"aria-disabled": _ctx.disabled || undefined,
+				onClick: _cache[1] || (_cache[1] = (...args) => $setup.togglePanel && $setup.togglePanel(...args)),
+				onKeydown: $setup.onTriggerKeydown
+			}, [
+				createElementVNode("input", {
+					class: "qm-date-picker__input",
+					type: "text",
+					readonly: "",
+					value: $setup.displayValue,
+					placeholder: _ctx.placeholder,
+					disabled: _ctx.disabled,
+					"aria-label": _ctx.placeholder
+				}, null, 8, _hoisted_2),
+				_ctx.clearable && $setup.displayValue && !_ctx.disabled ? (openBlock(), createElementBlock(
+					"button",
+					{
+						key: 0,
+						type: "button",
+						class: "qm-date-picker__clear",
+						"aria-label": "清除",
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+						onClick: withModifiers($setup.onClear, ["stop"])
+					},
+					[createVNode($setup["QmIcon"], {
+						name: "close",
+						class: "qm-date-picker__clear-icon",
+						style: { "font-size": "12px" }
+					})],
+					32
+					/* NEED_HYDRATION */
+				)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3, [createVNode($setup["QmIcon"], {
+					name: "calendar",
+					class: "qm-date-picker__icon-icon",
+					style: { "font-size": "14px" }
+				})])
+			], 42, _hoisted_1),
+			createCommentVNode(" 日历面板（Teleport 到 body，fixed 定位 + 视口翻转） "),
+			(openBlock(), createBlock(Teleport, { to: "body" }, [$setup.open ? (openBlock(), createElementBlock(
+				"div",
+				{
+					key: 0,
+					id: $setup.panelId,
+					ref: "panelRef",
+					class: "qm-date-picker__panel",
+					style: normalizeStyle($setup.positionStyle),
+					role: "dialog",
+					"aria-label": "日期选择面板",
+					onKeydown: $setup.onPanelKeydown
+				},
+				[
+					createElementVNode("div", _hoisted_4, [
+						createElementVNode("button", {
+							type: "button",
+							class: "qm-date-picker__nav",
+							"aria-label": "上个月",
+							onClick: _cache[2] || (_cache[2] = (...args) => $setup.prevMonth && $setup.prevMonth(...args))
+						}, [createVNode($setup["QmIcon"], {
+							name: "chevron-left",
+							class: "qm-date-picker__nav-icon",
+							style: { "font-size": "14px" }
+						})]),
+						createElementVNode(
+							"div",
+							_hoisted_5,
+							toDisplayString($setup.viewYear) + "年" + toDisplayString($setup.viewMonth + 1) + "月 ",
+							1
+							/* TEXT */
+						),
+						createElementVNode("button", {
+							type: "button",
+							class: "qm-date-picker__nav",
+							"aria-label": "下个月",
+							onClick: _cache[3] || (_cache[3] = (...args) => $setup.nextMonth && $setup.nextMonth(...args))
+						}, [createVNode($setup["QmIcon"], {
+							name: "chevron-right",
+							class: "qm-date-picker__nav-icon",
+							style: { "font-size": "14px" }
+						})])
+					]),
+					createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(
+						Fragment,
+						null,
+						renderList($setup.WEEKDAYS, (weekday) => {
+							return openBlock(), createElementBlock(
+								"span",
+								{
+									key: weekday,
+									class: "qm-date-picker__weekday"
+								},
+								toDisplayString(weekday),
+								1
+								/* TEXT */
+							);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))]),
+					createElementVNode("div", _hoisted_7, [(openBlock(true), createElementBlock(
+						Fragment,
+						null,
+						renderList($setup.calendarRows, (row, rowIndex) => {
+							return openBlock(), createElementBlock("div", {
+								key: rowIndex,
+								class: "qm-date-picker__row"
+							}, [(openBlock(true), createElementBlock(
+								Fragment,
+								null,
+								renderList(row, (cell) => {
+									return openBlock(), createElementBlock("button", {
+										key: cell.date,
+										type: "button",
+										class: normalizeClass(["qm-date-picker__cell", $setup.cellClass(cell)]),
+										disabled: $setup.isDisabled(cell.date),
+										"aria-pressed": $setup.isSelected(cell.date),
+										"aria-label": cell.date,
+										onClick: ($event) => $setup.selectDate(cell.date)
+									}, toDisplayString(cell.day), 11, _hoisted_8);
+								}),
+								128
+								/* KEYED_FRAGMENT */
+							))]);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))]),
+					createElementVNode("div", _hoisted_9, [createElementVNode("button", {
+						type: "button",
+						class: "qm-date-picker__today",
+						disabled: $setup.isDisabled($setup.todayString),
+						onClick: _cache[4] || (_cache[4] = ($event) => $setup.selectDate($setup.todayString))
+					}, " 今天 ", 8, _hoisted_10)])
+				],
+				36
+				/* STYLE, NEED_HYDRATION */
+			)) : createCommentVNode("v-if", true)]))
+		],
+		2
+		/* CLASS */
+	);
+}
+var DatePicker = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\date-picker\\date-picker.vue"]]);
+
+export { WEEKDAYS as W, DatePicker as c, datePickerProps as e, formatDate as f, getMonthMatrix as g, parseDate as p, toDateString as t, useDatePicker as u };
+export type { CalendarDay as C, DatePickerEmits as D, UseDatePickerOptions as U, DatePickerFormat as a, DatePickerType as b, UseDatePickerReturn as d };

package/es/shared/components.PG8w8Qmv.mjs

@@ -0,0 +1,64 @@
+import { defineComponent, onMounted, openBlock, createElementBlock, normalizeClass, createBlock } from 'vue';
+import { useTheme } from '@qingmingmu/hooks';
+import { I as Icon } from './components.D3on6_fI.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const themeToggleProps = {
+  /** 初始主题模式（挂载时应用一次；缺省跟随 useTheme 单例） */
+  mode: { type: String, default: void 0 },
+  /** 按钮尺寸 */
+  size: { type: String, default: "medium" }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmThemeToggle" },
+  __name: "theme-toggle",
+  props: themeToggleProps,
+  emits: ["change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { isDark, setStyle } = useTheme();
+    onMounted(() => {
+      if (props.mode) {
+        if (props.mode === "system")
+          setStyle("system");
+        else setStyle(props.mode === "dark" ? "black" : "white");
+      }
+    });
+    function toggle() {
+      const next = isDark.value ? "white" : "black";
+      setStyle(next);
+      emit("change", next === "black" ? "dark" : "light");
+    }
+    const __returned__ = { props, emit, isDark, setStyle, toggle, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["aria-label", "title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("button", {
+		type: "button",
+		class: normalizeClass(["qm-theme-toggle", `qm-theme-toggle--${_ctx.size}`]),
+		"data-qm": "theme-toggle",
+		"aria-label": $setup.isDark ? "切换到亮色模式" : "切换到暗色模式",
+		title: $setup.isDark ? "切换到亮色模式" : "切换到暗色模式",
+		onClick: $setup.toggle
+	}, [$setup.isDark ? (openBlock(), createBlock($setup["QmIcon"], {
+		key: 0,
+		name: "sun",
+		class: "qm-theme-toggle__icon"
+	})) : (openBlock(), createBlock($setup["QmIcon"], {
+		key: 1,
+		name: "moon",
+		class: "qm-theme-toggle__icon"
+	}))], 10, _hoisted_1);
+}
+const ThemeToggle = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\theme-toggle\\theme-toggle.vue"]]);
+
+export { ThemeToggle as T, themeToggleProps as t };