@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.1AjWnZ2u.cjs

@@ -0,0 +1,557 @@
+'use strict';
+
+const vue = require('vue');
+const usePositioning = require('./components.CUxPJ0rN.cjs');
+const icon = require('./components.CRtd1JMp.cjs');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const datePickerProps = {
+  /** 受控值（v-model，YYYY-MM-DD 字符串） */
+  modelValue: { type: String, default: "" },
+  /** 选择类型 */
+  type: { type: String, default: "date" },
+  /** 占位文案 */
+  placeholder: { type: String, default: "\u8BF7\u9009\u62E9\u65E5\u671F" },
+  /** 显示格式（YYYY-MM-DD 令牌） */
+  format: { type: String, default: "YYYY-MM-DD" },
+  /** 禁用态：输入框禁用 + 面板不可展开 */
+  disabled: { type: Boolean, default: false },
+  /** 有值时显示清除按钮 */
+  clearable: { type: Boolean, default: true },
+  /** 最小可选日期（YYYY-MM-DD，范围外禁用） */
+  min: { type: String, default: "" },
+  /** 最大可选日期（YYYY-MM-DD，范围外禁用） */
+  max: { type: String, default: "" }
+};
+
+function toDateString(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function parseDate(value) {
+  if (!value)
+    return null;
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match)
+    return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function formatDate(date, format) {
+  const y = String(date.getFullYear());
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return format.replace(/YYYY/g, y).replace(/MM/g, m).replace(/DD/g, d);
+}
+function getMonthMatrix(year, month) {
+  const firstWeekday = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const prevDaysInMonth = new Date(year, month, 0).getDate();
+  const cells = [];
+  for (let i = firstWeekday - 1; i >= 0; i--) {
+    const day = prevDaysInMonth - i;
+    cells.push({ date: toDateString(new Date(year, month - 1, day)), day, inMonth: false });
+  }
+  for (let day = 1; day <= daysInMonth; day++)
+    cells.push({ date: toDateString(new Date(year, month, day)), day, inMonth: true });
+  let nextDay = 1;
+  while (cells.length < 42) {
+    cells.push({
+      date: toDateString(new Date(year, month + 1, nextDay)),
+      day: nextDay,
+      inMonth: false
+    });
+    nextDay++;
+  }
+  const rows = [];
+  for (let i = 0; i < 42; i += 7) rows.push(cells.slice(i, i + 7));
+  return rows;
+}
+const WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+function useDatePicker(options) {
+  const { modelValue, format, disabled, min, max, emitUpdate, emitChange, emitClear } = options;
+  const open = vue.ref(false);
+  const viewYear = vue.ref(0);
+  const viewMonth = vue.ref(0);
+  const innerValue = vue.ref(modelValue.value);
+  vue.watch(modelValue, (v) => {
+    innerValue.value = v;
+  });
+  const highlightDate = vue.ref("");
+  const displayValue = vue.computed(() => {
+    const date = parseDate(innerValue.value);
+    return date ? formatDate(date, format.value) : "";
+  });
+  const calendarRows = vue.computed(() => getMonthMatrix(viewYear.value, viewMonth.value));
+  function syncView() {
+    const date = parseDate(innerValue.value) ?? /* @__PURE__ */ new Date();
+    viewYear.value = date.getFullYear();
+    viewMonth.value = date.getMonth();
+  }
+  function syncHighlight() {
+    highlightDate.value = innerValue.value || toDateString(/* @__PURE__ */ new Date());
+  }
+  function openPanel() {
+    if (disabled.value)
+      return;
+    syncView();
+    syncHighlight();
+    open.value = true;
+  }
+  function closePanel() {
+    open.value = false;
+  }
+  function togglePanel() {
+    if (open.value)
+      closePanel();
+    else openPanel();
+  }
+  function isToday(date) {
+    return date === toDateString(/* @__PURE__ */ new Date());
+  }
+  function isSelected(date) {
+    return date === innerValue.value;
+  }
+  function isDisabled(date) {
+    if (min.value && date < min.value)
+      return true;
+    if (max.value && date > max.value)
+      return true;
+    return false;
+  }
+  function selectDate(date) {
+    if (isDisabled(date))
+      return;
+    innerValue.value = date;
+    emitUpdate(date);
+    emitChange(date);
+    const parsed = parseDate(date);
+    if (parsed) {
+      viewYear.value = parsed.getFullYear();
+      viewMonth.value = parsed.getMonth();
+    }
+    closePanel();
+  }
+  function moveHighlight(deltaDays) {
+    const base = parseDate(highlightDate.value) ?? /* @__PURE__ */ new Date();
+    const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);
+    highlightDate.value = toDateString(next);
+    viewYear.value = next.getFullYear();
+    viewMonth.value = next.getMonth();
+  }
+  function prevMonth() {
+    if (viewMonth.value === 0) {
+      viewMonth.value = 11;
+      viewYear.value -= 1;
+    } else {
+      viewMonth.value -= 1;
+    }
+  }
+  function nextMonth() {
+    if (viewMonth.value === 11) {
+      viewMonth.value = 0;
+      viewYear.value += 1;
+    } else {
+      viewMonth.value += 1;
+    }
+  }
+  function clear() {
+    innerValue.value = "";
+    emitClear();
+    emitUpdate("");
+    emitChange("");
+  }
+  vue.watch(modelValue, () => {
+    if (open.value)
+      syncView();
+  });
+  return {
+    open,
+    viewYear,
+    viewMonth,
+    displayValue,
+    highlightDate,
+    calendarRows,
+    isToday,
+    isSelected,
+    isDisabled,
+    togglePanel,
+    openPanel,
+    closePanel,
+    selectDate,
+    moveHighlight,
+    prevMonth,
+    nextMonth,
+    clear
+  };
+}
+
+const _sfc_main = /* @__PURE__ */ vue.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 = vue.useId();
+    const panelId = `qm-date-picker-panel-${uid}`;
+    const rootRef = vue.ref(null);
+    const triggerRef = vue.ref(null);
+    const panelRef = vue.ref(null);
+    const dp = useDatePicker({
+      modelValue: vue.toRef(props, "modelValue"),
+      format: vue.toRef(props, "format"),
+      disabled: vue.toRef(props, "disabled"),
+      min: vue.toRef(props, "min"),
+      max: vue.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.usePositioning({
+      triggerRef,
+      panelRef,
+      placement: vue.ref("bottom"),
+      offset: 4,
+      flip: true
+    });
+    function onDocumentMouseDown(event) {
+      const target = event.target;
+      if (rootRef.value?.contains(target) || panelRef.value?.contains(target))
+        return;
+      closePanel();
+    }
+    vue.watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+          document.addEventListener("mousedown", onDocumentMouseDown, true);
+        } else {
+          stopAutoReposition();
+          document.removeEventListener("mousedown", onDocumentMouseDown, true);
+        }
+      },
+      { flush: "post" }
+    );
+    vue.onMounted(() => {
+      if (open.value)
+        void updatePosition();
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onDocumentMouseDown, true);
+      disposePositioning();
+    });
+    const rootClass = vue.computed(() => ["qm-date-picker", { "qm-date-picker--disabled": props.disabled }]);
+    const triggerClass = vue.computed(() => [
+      "qm-date-picker__trigger",
+      { "qm-date-picker__trigger--open": open.value }
+    ]);
+    const todayString = vue.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;
+      }
+    }
+    vue.watch(
+      open,
+      async (val) => {
+        if (!val)
+          return;
+        await vue.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.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 vue.openBlock(), vue.createElementBlock(
+		"div",
+		{
+			ref: "rootRef",
+			class: vue.normalizeClass($setup.rootClass),
+			"data-qm": "date-picker"
+		},
+		[
+			vue.createCommentVNode(" 触发器 "),
+			vue.createElementVNode("div", {
+				ref: "triggerRef",
+				class: vue.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
+			}, [
+				vue.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 ? (vue.openBlock(), vue.createElementBlock(
+					"button",
+					{
+						key: 0,
+						type: "button",
+						class: "qm-date-picker__clear",
+						"aria-label": "清除",
+						onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {}, ["prevent"])),
+						onClick: vue.withModifiers($setup.onClear, ["stop"])
+					},
+					[vue.createVNode($setup["QmIcon"], {
+						name: "close",
+						class: "qm-date-picker__clear-icon",
+						style: { "font-size": "12px" }
+					})],
+					32
+					/* NEED_HYDRATION */
+				)) : vue.createCommentVNode("v-if", true),
+				vue.createElementVNode("span", _hoisted_3, [vue.createVNode($setup["QmIcon"], {
+					name: "calendar",
+					class: "qm-date-picker__icon-icon",
+					style: { "font-size": "14px" }
+				})])
+			], 42, _hoisted_1),
+			vue.createCommentVNode(" 日历面板（Teleport 到 body，fixed 定位 + 视口翻转） "),
+			(vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [$setup.open ? (vue.openBlock(), vue.createElementBlock(
+				"div",
+				{
+					key: 0,
+					id: $setup.panelId,
+					ref: "panelRef",
+					class: "qm-date-picker__panel",
+					style: vue.normalizeStyle($setup.positionStyle),
+					role: "dialog",
+					"aria-label": "日期选择面板",
+					onKeydown: $setup.onPanelKeydown
+				},
+				[
+					vue.createElementVNode("div", _hoisted_4, [
+						vue.createElementVNode("button", {
+							type: "button",
+							class: "qm-date-picker__nav",
+							"aria-label": "上个月",
+							onClick: _cache[2] || (_cache[2] = (...args) => $setup.prevMonth && $setup.prevMonth(...args))
+						}, [vue.createVNode($setup["QmIcon"], {
+							name: "chevron-left",
+							class: "qm-date-picker__nav-icon",
+							style: { "font-size": "14px" }
+						})]),
+						vue.createElementVNode(
+							"div",
+							_hoisted_5,
+							vue.toDisplayString($setup.viewYear) + "年" + vue.toDisplayString($setup.viewMonth + 1) + "月 ",
+							1
+							/* TEXT */
+						),
+						vue.createElementVNode("button", {
+							type: "button",
+							class: "qm-date-picker__nav",
+							"aria-label": "下个月",
+							onClick: _cache[3] || (_cache[3] = (...args) => $setup.nextMonth && $setup.nextMonth(...args))
+						}, [vue.createVNode($setup["QmIcon"], {
+							name: "chevron-right",
+							class: "qm-date-picker__nav-icon",
+							style: { "font-size": "14px" }
+						})])
+					]),
+					vue.createElementVNode("div", _hoisted_6, [(vue.openBlock(true), vue.createElementBlock(
+						vue.Fragment,
+						null,
+						vue.renderList($setup.WEEKDAYS, (weekday) => {
+							return vue.openBlock(), vue.createElementBlock(
+								"span",
+								{
+									key: weekday,
+									class: "qm-date-picker__weekday"
+								},
+								vue.toDisplayString(weekday),
+								1
+								/* TEXT */
+							);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))]),
+					vue.createElementVNode("div", _hoisted_7, [(vue.openBlock(true), vue.createElementBlock(
+						vue.Fragment,
+						null,
+						vue.renderList($setup.calendarRows, (row, rowIndex) => {
+							return vue.openBlock(), vue.createElementBlock("div", {
+								key: rowIndex,
+								class: "qm-date-picker__row"
+							}, [(vue.openBlock(true), vue.createElementBlock(
+								vue.Fragment,
+								null,
+								vue.renderList(row, (cell) => {
+									return vue.openBlock(), vue.createElementBlock("button", {
+										key: cell.date,
+										type: "button",
+										class: vue.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)
+									}, vue.toDisplayString(cell.day), 11, _hoisted_8);
+								}),
+								128
+								/* KEYED_FRAGMENT */
+							))]);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))]),
+					vue.createElementVNode("div", _hoisted_9, [vue.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 */
+			)) : vue.createCommentVNode("v-if", true)]))
+		],
+		2
+		/* CLASS */
+	);
+}
+const DatePicker = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\date-picker\\date-picker.vue"]]);
+
+exports.DatePicker = DatePicker;
+exports.WEEKDAYS = WEEKDAYS;
+exports.datePickerProps = datePickerProps;
+exports.formatDate = formatDate;
+exports.getMonthMatrix = getMonthMatrix;
+exports.parseDate = parseDate;
+exports.toDateString = toDateString;
+exports.useDatePicker = useDatePicker;

package/es/shared/components.1J_ThqaI.d.cts

@@ -0,0 +1,95 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.cjs';
+
+/**
+ * QmBadge 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 基础-05：徽标，绝对定位角标；value/max 封顶 / dot 圆点 / hidden 隐藏 / type 语义类型。
+ */
+
+/** 徽标语义类型（当前共享 --qm-badge-* 单色 Token 族，供主题层扩展） */
+type BadgeType = 'primary' | 'success' | 'warning' | 'error';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const badgeProps: {
+    /** 显示值：number 参与 max 封顶；string 原样展示 */
+    readonly value: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /** 最大值封顶：number 且 value > max 时显示 max+ */
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 99;
+    };
+    /** 圆点模式：不显示数字 */
+    readonly dot: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 隐藏徽标 */
+    readonly hidden: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 语义类型：primary / success / warning / error */
+    readonly type: {
+        readonly type: PropType<BadgeType>;
+        readonly default: "error";
+    };
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmBadge" },
+  __name: "badge",
+  props: badgeProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const visible = computed(() => {
+      if (props.hidden)
+        return false;
+      if (props.dot)
+        return true;
+      return props.value !== "" && props.value !== null && props.value !== void 0;
+    });
+    const displayValue = computed(() => {
+      if (props.dot)
+        return "";
+      if (typeof props.value === "number" && props.max != null && props.value > props.max)
+        return `${props.max}+`;
+      return String(props.value);
+    });
+    const typeClass = computed(() => `qm-badge--${props.type}`);
+    const __returned__ = { props, visible, displayValue, typeClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"span",
+		{
+			class: normalizeClass(["qm-badge", [$setup.typeClass, {
+				"qm-badge--fixed": _ctx.$slots.default,
+				"qm-badge--dot": _ctx.dot
+			}]]),
+			"data-qm": "badge"
+		},
+		[renderSlot(_ctx.$slots, "default"), $setup.visible ? (openBlock(), createElementBlock(
+			"sup",
+			{
+				key: 0,
+				class: normalizeClass(["qm-badge__content", { "qm-badge__content--dot": _ctx.dot }])
+			},
+			toDisplayString($setup.displayValue),
+			3
+			/* TEXT, CLASS */
+		)) : createCommentVNode("v-if", true)],
+		2
+		/* CLASS */
+	);
+}
+var Badge = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\badge\\badge.vue"]]);
+
+export { Badge as a, badgeProps as b };
+export type { BadgeType as B };