@qingmingmu/components 0.1.0-beta.0

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

@@ -0,0 +1,338 @@
+import { InjectionKey, Ref, PropType, defineComponent, reactive, ref, useId, watch, computed, provide, onMounted, onBeforeUnmount, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, withModifiers, createVNode, createCommentVNode, normalizeStyle, renderSlot, inject, withDirectives, vShow } from 'vue';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmTabs 组件类型定义（03-数据展示）
+ * 标签页：选项卡切换 / 可关闭 / 自定义标签
+ */
+
+/** 标签类型：line 下划线 / card 卡片 */
+type TabsType = 'line' | 'card';
+/** 标签位置 */
+type TabsPosition = 'top' | 'bottom' | 'left' | 'right';
+declare const tabsProps: {
+    /** 当前激活面板 name（v-model） */
+    readonly modelValue: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /** 非受控模式的初始激活面板 name（未绑定 v-model 时的默认激活项） */
+    readonly defaultActiveName: {
+        readonly type: PropType<string | number | undefined>;
+        readonly default: undefined;
+    };
+    /** 标签类型：line / card */
+    readonly type: {
+        readonly type: PropType<TabsType>;
+        readonly default: "line";
+    };
+    /** 标签位置：top / bottom / left / right */
+    readonly position: {
+        readonly type: PropType<TabsPosition>;
+        readonly default: "top";
+    };
+    /** 标签可关闭（emit tabRemove，由父级决定是否移除面板） */
+    readonly closable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** emits 声明 */
+interface TabsEmits {
+    'update:modelValue': [name: string | number];
+    'change': [name: string | number];
+    'tabRemove': [name: string | number];
+}
+/** QmTabPane 注册的面板状态（标签栏渲染数据源） */
+interface TabPaneState {
+    name: string | number;
+    label: string;
+    disabled: boolean;
+}
+/** QmTabs 向 QmTabPane 提供的上下文（provide/inject 收集子项） */
+interface TabsContext {
+    /** 当前激活 name（含未显式 v-model 时的内部态/首面板兜底） */
+    activeName: Ref<string | number>;
+    /** 注册面板（挂载时） */
+    register: (pane: TabPaneState) => void;
+    /** 注销面板（卸载时） */
+    unregister: (pane: TabPaneState) => void;
+    /** 未指定 name 的面板自动编号 */
+    nextSeq: () => number;
+    /** 转发 tabRemove（由 QmTabs 统一 emit） */
+    emitRemove: (name: string | number) => void;
+    /** 生成 tab 元素 id（与 tabpanel aria-labelledby 关联） */
+    getTabId: (name: string | number) => string;
+    /** 生成 tabpanel 元素 id（与 tab aria-controls 关联） */
+    getPanelId: (name: string | number) => string;
+}
+declare const tabsContextKey: InjectionKey<TabsContext>;
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmTabs" },
+  __name: "tabs",
+  props: tabsProps,
+  emits: ["update:modelValue", "change", "tabRemove"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const panes = reactive([]);
+    let seq = 0;
+    const navRef = ref(null);
+    const indicatorStyle = ref({ left: "0px", width: "0px" });
+    const uid = useId();
+    const getTabId = (name) => `qm-tab-${uid}-${String(name)}`;
+    const getPanelId = (name) => `qm-tab-panel-${uid}-${String(name)}`;
+    const innerActiveName = ref(props.defaultActiveName ?? "");
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v !== "" && v !== void 0)
+          innerActiveName.value = v;
+      }
+    );
+    const effectiveActive = computed(() => {
+      if (props.modelValue !== "" && props.modelValue !== void 0)
+        return props.modelValue;
+      if (innerActiveName.value !== "" && innerActiveName.value !== void 0)
+        return innerActiveName.value;
+      const first = panes.find((p) => !p.disabled);
+      return first ? first.name : "";
+    });
+    const context = {
+      activeName: effectiveActive,
+      register: (pane) => {
+        panes.push(pane);
+        void updateIndicator();
+      },
+      unregister: (pane) => {
+        const i = panes.indexOf(pane);
+        if (i >= 0)
+          panes.splice(i, 1);
+        void updateIndicator();
+      },
+      nextSeq: () => ++seq,
+      emitRemove: (name) => emit("tabRemove", name),
+      getTabId,
+      getPanelId
+    };
+    provide(tabsContextKey, context);
+    const isLine = computed(() => props.type === "line");
+    const showIndicator = computed(
+      () => isLine.value && (props.position === "top" || props.position === "bottom")
+    );
+    function selectPane(pane) {
+      if (pane.disabled)
+        return;
+      innerActiveName.value = pane.name;
+      if (effectiveActive.value !== pane.name) {
+        emit("update:modelValue", pane.name);
+        emit("change", pane.name);
+      }
+    }
+    function handleRemove(event, pane) {
+      event.stopPropagation();
+      context.emitRemove(pane.name);
+    }
+    function onTabKeydown(event, pane) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectPane(pane);
+        return;
+      }
+      const dir = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+      if (!dir || panes.length <= 1)
+        return;
+      event.preventDefault();
+      const start = panes.indexOf(pane);
+      let target = null;
+      for (let step = 1; step <= panes.length; step++) {
+        const candidate = panes[(start + dir * step + panes.length) % panes.length];
+        if (!candidate.disabled) {
+          target = candidate;
+          break;
+        }
+      }
+      if (target && target !== pane)
+        selectPane(target);
+    }
+    function updateIndicator() {
+      if (!showIndicator.value) {
+        indicatorStyle.value = { left: "0px", width: "0px" };
+        return;
+      }
+      void nextTick(() => {
+        const nav = navRef.value;
+        const activeEl = nav?.querySelector(".qm-tabs__tab--active");
+        indicatorStyle.value = activeEl ? { left: `${activeEl.offsetLeft}px`, width: `${activeEl.offsetWidth}px` } : { left: "0px", width: "0px" };
+      });
+    }
+    watch(effectiveActive, () => updateIndicator());
+    watch(
+      () => props.type,
+      () => updateIndicator()
+    );
+    watch(
+      () => props.position,
+      () => updateIndicator()
+    );
+    onMounted(() => updateIndicator());
+    onBeforeUnmount(() => {
+    });
+    const __returned__ = { props, emit, panes, get seq() {
+      return seq;
+    }, set seq(v) {
+      seq = v;
+    }, navRef, indicatorStyle, uid, getTabId, getPanelId, innerActiveName, effectiveActive, context, isLine, showIndicator, selectPane, handleRemove, onTabKeydown, updateIndicator, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1$1 = ["aria-orientation"];
+const _hoisted_2 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_3 = { class: "qm-tabs__tab-label" };
+const _hoisted_4 = ["aria-label", "onClick"];
+const _hoisted_5 = { class: "qm-tabs__content" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-tabs", [`qm-tabs--${_ctx.position}`, `qm-tabs--${_ctx.type}`]]),
+			"data-qm": "tabs"
+		},
+		[createElementVNode("div", {
+			ref: "navRef",
+			class: "qm-tabs__nav",
+			role: "tablist",
+			"aria-orientation": _ctx.position === "top" || _ctx.position === "bottom" ? "horizontal" : "vertical"
+		}, [(openBlock(true), createElementBlock(
+			Fragment,
+			null,
+			renderList($setup.panes, (pane) => {
+				return openBlock(), createElementBlock("div", {
+					id: $setup.getTabId(pane.name),
+					key: pane.name,
+					class: normalizeClass(["qm-tabs__tab", {
+						"qm-tabs__tab--active": pane.name === $setup.effectiveActive,
+						"qm-tabs__tab--disabled": pane.disabled
+					}]),
+					role: "tab",
+					"aria-selected": pane.name === $setup.effectiveActive,
+					"aria-controls": $setup.getPanelId(pane.name),
+					"aria-disabled": pane.disabled || undefined,
+					tabindex: pane.disabled ? -1 : pane.name === $setup.effectiveActive ? 0 : -1,
+					onClick: ($event) => $setup.selectPane(pane),
+					onKeydown: ($event) => $setup.onTabKeydown($event, pane)
+				}, [createElementVNode(
+					"span",
+					_hoisted_3,
+					toDisplayString(pane.label),
+					1
+					/* TEXT */
+				), _ctx.closable && !pane.disabled ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "qm-tabs__tab-close",
+					"aria-label": `关闭 ${pane.label}`,
+					onClick: withModifiers(($event) => $setup.handleRemove($event, pane), ["stop"])
+				}, [createVNode($setup["QmIcon"], {
+					name: "close",
+					class: "qm-tabs__tab-close-icon",
+					style: { "font-size": "10px" }
+				})], 8, _hoisted_4)) : createCommentVNode("v-if", true)], 42, _hoisted_2);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		)), $setup.showIndicator ? (openBlock(), createElementBlock(
+			"span",
+			{
+				key: 0,
+				class: "qm-tabs__indicator",
+				"aria-hidden": "true",
+				style: normalizeStyle($setup.indicatorStyle)
+			},
+			null,
+			4
+			/* STYLE */
+		)) : createCommentVNode("v-if", true)], 8, _hoisted_1$1), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])],
+		2
+		/* CLASS */
+	);
+}
+var Tabs = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tabs\\tabs.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmTabPane" },
+  __name: "tab-pane",
+  props: {
+    /** 标签文字 */
+    label: { type: String, default: "" },
+    /** 面板唯一标识（v-model 值；缺省自动编号 pane-N） */
+    name: { type: [String, Number], default: "" },
+    /** 禁用（标签不可点、内容不可见） */
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const context = inject(tabsContextKey, null);
+    const state = reactive({
+      name: props.name,
+      label: props.label,
+      disabled: props.disabled
+    });
+    const active = computed(() => context?.activeName.value === state.name);
+    const panelId = computed(() => context ? context.getPanelId(state.name) : void 0);
+    const tabId = computed(() => context ? context.getTabId(state.name) : void 0);
+    onMounted(() => {
+      if (!context)
+        return;
+      if (state.name === "" || state.name === void 0)
+        state.name = `pane-${context.nextSeq()}`;
+      context.register(state);
+    });
+    onBeforeUnmount(() => {
+      context?.unregister(state);
+    });
+    watch(
+      () => [props.label, props.name, props.disabled],
+      () => {
+        state.label = props.label;
+        if (props.name !== "" && props.name !== void 0)
+          state.name = props.name;
+        state.disabled = props.disabled;
+      }
+    );
+    const __returned__ = { props, context, state, active, panelId, tabId };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["id", "aria-labelledby"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return withDirectives((openBlock(), createElementBlock("div", {
+		id: $setup.panelId,
+		class: "qm-tab-pane",
+		"data-qm": "tab-pane",
+		role: "tabpanel",
+		"aria-labelledby": $setup.tabId
+	}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)), [[vShow, $setup.active]]);
+}
+var tabPane = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tabs\\tab-pane.vue"]]);
+
+export { Tabs as T, tabsContextKey as f, tabsProps as g, tabPane as t };
+export type { TabPaneState as a, TabsContext as b, TabsEmits as c, TabsPosition as d, TabsType as e };

package/es/shared/components.BZeq4M6i.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+const vue = require('vue');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const statisticProps = {
+  /** 标题（title 插槽可覆盖） */
+  title: { type: String, default: "" },
+  /** 数值（string | number） */
+  value: { type: [String, Number], default: 0 },
+  /** 小数精度（保留位数，四舍五入） */
+  precision: { type: Number, default: 0 },
+  /** 小数点符号 */
+  decimalSeparator: { type: String, default: "." },
+  /** 千分位分隔符 */
+  groupSeparator: { type: String, default: "," }
+};
+function formatStatisticValue(value, precision, decimalSeparator, groupSeparator) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return String(value);
+  const fixed = num.toFixed(Math.max(0, Math.floor(precision)));
+  const [intPart, decPart = ""] = fixed.split(".");
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
+  if (precision > 0 && decPart) return `${grouped}${decimalSeparator}${decPart}`;
+  return grouped;
+}
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmStatistic" },
+  __name: "statistic",
+  props: statisticProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const display = vue.computed(
+      () => formatStatisticValue(props.value, props.precision, props.decimalSeparator, props.groupSeparator)
+    );
+    const __returned__ = { props, display };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-statistic",
+	"data-qm": "statistic"
+};
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-statistic__title"
+};
+const _hoisted_3 = { class: "qm-statistic__content" };
+const _hoisted_4 = {
+	key: 0,
+	class: "qm-statistic__prefix"
+};
+const _hoisted_5 = { class: "qm-statistic__value" };
+const _hoisted_6 = {
+	key: 1,
+	class: "qm-statistic__suffix"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [_ctx.$slots.title || _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [vue.renderSlot(_ctx.$slots, "title", {}, () => [vue.createTextVNode(
+		vue.toDisplayString(_ctx.title),
+		1
+		/* TEXT */
+	)])])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_3, [
+		_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("v-if", true),
+		vue.createElementVNode(
+			"span",
+			_hoisted_5,
+			vue.toDisplayString($setup.display),
+			1
+			/* TEXT */
+		),
+		_ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [vue.renderSlot(_ctx.$slots, "suffix")])) : vue.createCommentVNode("v-if", true)
+	])]);
+}
+const Statistic = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\statistic\\statistic.vue"]]);
+
+exports.Statistic = Statistic;
+exports.formatStatisticValue = formatStatisticValue;
+exports.statisticProps = statisticProps;

package/es/shared/components.B_aXqCE8.d.cts

@@ -0,0 +1,34 @@
+/**
+ * useDialog 行为层（03-T2 §3.1 / task-02 §4）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 滚动锁定：模块级引用计数（多弹窗叠加场景，非布尔开关）；
+ * - 焦点管理：打开聚焦首个可聚焦元素（或面板）、Tab/Shift+Tab 循环陷阱、关闭还原到触发元素；
+ * - 关闭防抖：离开动画完成前忽略重复关闭请求（task-02 §4）；
+ * - Esc 关闭：事件始终 stopPropagation，避免嵌套 Dialog 级联误关（task-02 §5.2 用例 4）。
+ */
+
+/** 锁定 body 滚动（首个实例锁定时记录原始 overflow） */
+declare function lockBodyScroll(): void;
+/** 解锁 body 滚动（全部实例关闭后恢复原始值） */
+declare function unlockBodyScroll(): void;
+/** 面板内可聚焦元素（跳过 aria-hidden / disabled / display:none / visibility:hidden） */
+declare function getFocusable(container: HTMLElement): HTMLElement[];
+interface FocusTrap {
+    /** Tab / Shift+Tab 边界循环（绑定到面板容器 keydown） */
+    trap: (event: KeyboardEvent) => void;
+    /** 聚焦首个可聚焦元素；没有则聚焦面板自身 */
+    focusFirst: () => void;
+    /** 记录触发元素（打开时调用：此时焦点在触发按钮上） */
+    record: () => void;
+    /** 清理（还原焦点到打开时记录的触发元素） */
+    restore: () => void;
+}
+/**
+ * 创建焦点陷阱（Reka UI 行为参考：打开聚焦 / 循环 Tab / 还原焦点）
+ * @param container 面板元素获取函数（Teleport 渲染完成后才可用）
+ * @param getTrigger 触发元素获取函数（record 时调用，须在打开瞬间记录）
+ */
+declare function createFocusTrap(container: () => HTMLElement | null, getTrigger: () => HTMLElement | null): FocusTrap;
+
+export { createFocusTrap as c, getFocusable as g, lockBodyScroll as l, unlockBodyScroll as u };

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

@@ -0,0 +1,34 @@
+/**
+ * useDialog 行为层（03-T2 §3.1 / task-02 §4）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 滚动锁定：模块级引用计数（多弹窗叠加场景，非布尔开关）；
+ * - 焦点管理：打开聚焦首个可聚焦元素（或面板）、Tab/Shift+Tab 循环陷阱、关闭还原到触发元素；
+ * - 关闭防抖：离开动画完成前忽略重复关闭请求（task-02 §4）；
+ * - Esc 关闭：事件始终 stopPropagation，避免嵌套 Dialog 级联误关（task-02 §5.2 用例 4）。
+ */
+
+/** 锁定 body 滚动（首个实例锁定时记录原始 overflow） */
+declare function lockBodyScroll(): void;
+/** 解锁 body 滚动（全部实例关闭后恢复原始值） */
+declare function unlockBodyScroll(): void;
+/** 面板内可聚焦元素（跳过 aria-hidden / disabled / display:none / visibility:hidden） */
+declare function getFocusable(container: HTMLElement): HTMLElement[];
+interface FocusTrap {
+    /** Tab / Shift+Tab 边界循环（绑定到面板容器 keydown） */
+    trap: (event: KeyboardEvent) => void;
+    /** 聚焦首个可聚焦元素；没有则聚焦面板自身 */
+    focusFirst: () => void;
+    /** 记录触发元素（打开时调用：此时焦点在触发按钮上） */
+    record: () => void;
+    /** 清理（还原焦点到打开时记录的触发元素） */
+    restore: () => void;
+}
+/**
+ * 创建焦点陷阱（Reka UI 行为参考：打开聚焦 / 循环 Tab / 还原焦点）
+ * @param container 面板元素获取函数（Teleport 渲染完成后才可用）
+ * @param getTrigger 触发元素获取函数（record 时调用，须在打开瞬间记录）
+ */
+declare function createFocusTrap(container: () => HTMLElement | null, getTrigger: () => HTMLElement | null): FocusTrap;
+
+export { createFocusTrap as c, getFocusable as g, lockBodyScroll as l, unlockBodyScroll as u };

package/es/shared/components.B_aXqCE8.d.ts

@@ -0,0 +1,34 @@
+/**
+ * useDialog 行为层（03-T2 §3.1 / task-02 §4）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 滚动锁定：模块级引用计数（多弹窗叠加场景，非布尔开关）；
+ * - 焦点管理：打开聚焦首个可聚焦元素（或面板）、Tab/Shift+Tab 循环陷阱、关闭还原到触发元素；
+ * - 关闭防抖：离开动画完成前忽略重复关闭请求（task-02 §4）；
+ * - Esc 关闭：事件始终 stopPropagation，避免嵌套 Dialog 级联误关（task-02 §5.2 用例 4）。
+ */
+
+/** 锁定 body 滚动（首个实例锁定时记录原始 overflow） */
+declare function lockBodyScroll(): void;
+/** 解锁 body 滚动（全部实例关闭后恢复原始值） */
+declare function unlockBodyScroll(): void;
+/** 面板内可聚焦元素（跳过 aria-hidden / disabled / display:none / visibility:hidden） */
+declare function getFocusable(container: HTMLElement): HTMLElement[];
+interface FocusTrap {
+    /** Tab / Shift+Tab 边界循环（绑定到面板容器 keydown） */
+    trap: (event: KeyboardEvent) => void;
+    /** 聚焦首个可聚焦元素；没有则聚焦面板自身 */
+    focusFirst: () => void;
+    /** 记录触发元素（打开时调用：此时焦点在触发按钮上） */
+    record: () => void;
+    /** 清理（还原焦点到打开时记录的触发元素） */
+    restore: () => void;
+}
+/**
+ * 创建焦点陷阱（Reka UI 行为参考：打开聚焦 / 循环 Tab / 还原焦点）
+ * @param container 面板元素获取函数（Teleport 渲染完成后才可用）
+ * @param getTrigger 触发元素获取函数（record 时调用，须在打开瞬间记录）
+ */
+declare function createFocusTrap(container: () => HTMLElement | null, getTrigger: () => HTMLElement | null): FocusTrap;
+
+export { createFocusTrap as c, getFocusable as g, lockBodyScroll as l, unlockBodyScroll as u };