@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.D3on6_fI.mjs

@@ -0,0 +1,83 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
+import { iconMap, multicolorIconNames } from '@qingmingmu/icons';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const iconProps = {
+  /** 图标名（来自 @qingmingmu/icons 的 iconNames）；为空时渲染插槽或空 */
+  name: { type: String, default: "" },
+  /** 尺寸：small | medium | large 走分档 Token；string/number 自定义（number 按 px） */
+  size: {
+    type: [String, Number],
+    default: "medium"
+  },
+  /** 颜色（默认继承 --qm-icon-color） */
+  color: { type: String, default: "" },
+  /** 单色模式：多色图标强制降级为单色（通道色覆盖为 currentColor，随 --qm-icon-color） */
+  mono: { type: Boolean, default: false }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmIcon" },
+  __name: "icon",
+  props: iconProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const enumSize = computed(
+      () => props.size === "small" || props.size === "medium" || props.size === "large" ? props.size : null
+    );
+    const customFontSize = computed(() => {
+      if (enumSize.value)
+        return void 0;
+      if (typeof props.size === "number")
+        return `${props.size}px`;
+      return props.size || void 0;
+    });
+    const iconComp = computed(() => {
+      if (!props.name)
+        return null;
+      return iconMap[props.name] ?? null;
+    });
+    const isMulticolor = computed(
+      () => !!props.name && multicolorIconNames.includes(props.name)
+    );
+    const rootStyle = computed(() => ({
+      fontSize: customFontSize.value,
+      color: props.color || void 0
+    }));
+    const modifierClass = computed(() => {
+      const classes = [];
+      if (enumSize.value)
+        classes.push(`qm-icon--${enumSize.value}`);
+      if (props.mono)
+        classes.push("qm-icon--mono");
+      else if (isMulticolor.value)
+        classes.push("qm-icon--multicolor");
+      return classes;
+    });
+    const __returned__ = { props, enumSize, customFontSize, iconComp, isMulticolor, rootStyle, modifierClass };
+    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-icon", $setup.modifierClass]),
+			style: normalizeStyle($setup.rootStyle),
+			"data-qm": "icon",
+			"aria-hidden": "true"
+		},
+		[_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {}, undefined, undefined, 0) : $setup.iconComp ? (openBlock(), createBlock(resolveDynamicComponent($setup.iconComp), {
+			key: 1,
+			size: "1em"
+		})) : createCommentVNode("v-if", true)],
+		6
+		/* CLASS, STYLE */
+	);
+}
+const Icon = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\icon\\icon.vue"]]);
+
+export { Icon as I, iconProps as i };

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

@@ -0,0 +1,208 @@
+import { PropType, Ref, defineComponent, useSlots, ref, onMounted, onBeforeUpdate, computed, onUnmounted, Comment, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, normalizeStyle, createVNode, mergeProps, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmSplitter 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 布局-04：可拖拽分栏；sizes 控制各面板百分比，拖拽分隔条调整并 emit resize；
+ * 支持键盘方向键微调（可访问性）；方向 horizontal | vertical。
+ */
+
+/** 分栏方向 */
+type SplitterDirection = 'horizontal' | 'vertical';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const splitterProps: {
+    /** 分栏方向：horizontal 左右 / vertical 上下 */
+    readonly direction: {
+        readonly type: PropType<SplitterDirection>;
+        readonly default: "horizontal";
+    };
+    /** 各面板百分比（合计 100）；缺省/不匹配时均分；受控：外部变更会同步内部 */
+    readonly sizes: {
+        readonly type: PropType<number[]>;
+        readonly default: () => never[];
+    };
+    /** 面板最小百分比：number 全局；number[] 逐面板 */
+    readonly minSize: {
+        readonly type: PropType<number | number[]>;
+        readonly default: 10;
+    };
+};
+/** emits 声明 */
+interface SplitterEmits {
+    /** 拖拽/键盘调整结束（或受控同步）后，返回各面板百分比数组 */
+    resize: [sizes: number[]];
+}
+
+/**
+ * useSplitter —— QmSplitter 拖拽分栏逻辑（可独立测试的 composable）
+ * 职责：
+ * - sizes 归一化（均分/受控同步/合计 100）；
+ * - 拖拽状态机：mousedown → window mousemove → window mouseup；
+ *   按方向取 clientX/clientY，换算容器百分比增量并夹取到相邻面板最小尺寸；
+ * - 键盘方向键微调（水平：←/→；垂直：↑/↓）；
+ * - SSR 安全：window 仅在事件回调内访问，模块顶层不触碰。
+ */
+
+/** 组合式入参 */
+interface UseSplitterOptions {
+    direction: Ref<SplitterDirection>;
+    /** 外部受控 sizes */
+    sizes: Ref<number[]>;
+    /** 面板最小尺寸：number 全局 / number[] 逐面板 */
+    minSize: Ref<number | number[]>;
+    /** 面板数量（由组件根据插槽节点计算） */
+    panelCount: Ref<number>;
+    /** 调整完成后回调（emit resize） */
+    onResize: (sizes: number[]) => void;
+}
+interface UseSplitterReturn {
+    /** 内部面板百分比（合计 100） */
+    sizes: Ref<number[]>;
+    /** 是否正在拖拽（供根节点加修饰类） */
+    dragging: Ref<boolean>;
+    /** 当前拖拽的分隔条下标 */
+    activeBar: Ref<number>;
+    /** 开始拖拽（分隔条 mousedown） */
+    beginDrag: (index: number, event: MouseEvent) => void;
+    /** 键盘调整（分隔条 keydown） */
+    handleBarKeydown: (index: number, event: KeyboardEvent) => void;
+    /** 卸载清理：移除 window 监听 */
+    dispose: () => void;
+}
+/** 归一化：数量不匹配/非法/合计非正时均分，否则按比例缩放到合计 100 */
+declare function normalizeSizes(list: number[], count: number): number[];
+declare function useSplitter(options: UseSplitterOptions): UseSplitterReturn;
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSplitter" },
+  __name: "splitter",
+  props: splitterProps,
+  emits: ["resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    function getPanels() {
+      return (slots.default?.() ?? []).flat().filter((v) => v && typeof v === "object" && "type" in v && v.type !== Comment);
+    }
+    let panelsCache = null;
+    const panelCount = ref(0);
+    function renderPanels() {
+      if (panelsCache === null)
+        panelsCache = getPanels();
+      return panelsCache;
+    }
+    function syncPanels() {
+      panelsCache = null;
+      panelCount.value = renderPanels().length;
+    }
+    onMounted(syncPanels);
+    onBeforeUpdate(syncPanels);
+    const splitter = useSplitter({
+      direction: computed(() => props.direction),
+      sizes: computed(() => props.sizes),
+      minSize: computed(() => props.minSize),
+      panelCount,
+      onResize: (sizes) => emit("resize", sizes)
+    });
+    onUnmounted(() => {
+      splitter.dispose();
+    });
+    function panelStyle(index) {
+      const size = splitter.sizes.value[index];
+      return { flexBasis: size != null ? `${size}%` : void 0 };
+    }
+    function barAria(index) {
+      const min = Array.isArray(props.minSize) ? props.minSize[index] ?? 10 : props.minSize;
+      const minR = Array.isArray(props.minSize) ? props.minSize[index + 1] ?? 10 : props.minSize;
+      return {
+        "aria-valuemin": Math.round(min),
+        "aria-valuemax": Math.round(100 - minR)
+      };
+    }
+    const PanelRenderer = defineComponent({
+      name: "QmSplitterPanelRenderer",
+      props: { node: { type: Object, required: true } },
+      setup(renderProps) {
+        return () => renderProps.node;
+      }
+    });
+    const rootClass = computed(() => [
+      `qm-splitter--${props.direction}`,
+      { "qm-splitter--dragging": splitter.dragging.value }
+    ]);
+    const __returned__ = { props, emit, slots, getPanels, get panelsCache() {
+      return panelsCache;
+    }, set panelsCache(v) {
+      panelsCache = v;
+    }, panelCount, renderPanels, syncPanels, splitter, panelStyle, barAria, PanelRenderer, rootClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-orientation",
+	"aria-valuenow",
+	"onMousedown",
+	"onKeydown"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-splitter", $setup.rootClass]),
+			"data-qm": "splitter"
+		},
+		[(openBlock(true), createElementBlock(
+			Fragment,
+			null,
+			renderList($setup.renderPanels(), (panel, index) => {
+				return openBlock(), createElementBlock(
+					Fragment,
+					{ key: index },
+					[createElementVNode(
+						"div",
+						{
+							class: "qm-splitter__panel",
+							style: normalizeStyle($setup.panelStyle(index))
+						},
+						[createVNode($setup["PanelRenderer"], { node: panel }, null, 8, ["node"])],
+						4
+						/* STYLE */
+					), index < $setup.renderPanels().length - 1 ? (openBlock(), createElementBlock("div", mergeProps({
+						key: 0,
+						class: "qm-splitter__bar",
+						role: "separator",
+						"aria-orientation": _ctx.direction,
+						"aria-valuenow": Math.round($setup.splitter.sizes.value[index] ?? 0)
+					}, { ref_for: true }, $setup.barAria(index), {
+						tabindex: 0,
+						onMousedown: ($event) => $setup.splitter.beginDrag(index, $event),
+						onKeydown: ($event) => $setup.splitter.handleBarKeydown(index, $event)
+					}), [..._cache[0] || (_cache[0] = [createElementVNode(
+						"span",
+						{
+							class: "qm-splitter__bar-handle",
+							"aria-hidden": "true"
+						},
+						null,
+						-1
+						/* CACHED */
+					)])], 16, _hoisted_1)) : createCommentVNode("v-if", true)],
+					64
+					/* STABLE_FRAGMENT */
+				);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))],
+		2
+		/* CLASS */
+	);
+}
+var Splitter = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\splitter\\splitter.vue"]]);
+
+export { Splitter as S, normalizeSizes as n, splitterProps as s, useSplitter as u };
+export type { UseSplitterOptions as U, SplitterDirection as a, SplitterEmits as b, UseSplitterReturn as c };

package/es/shared/components.D4C1x9UP.cjs

@@ -0,0 +1,318 @@
+'use strict';
+
+const vue = require('vue');
+const usePositioning = require('./components.CUxPJ0rN.cjs');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const tooltipProps = {
+  /** 提示文案（也可用 content 插槽 / 触发器默认插槽旁的 #content） */
+  content: { type: String, default: "" },
+  /** 弹出位置（空间不足自动翻转） */
+  placement: {
+    type: String,
+    default: "top"
+  },
+  /** 触发方式 */
+  trigger: {
+    type: String,
+    default: "hover"
+  },
+  /** 受控显隐（v-model:visible）；未传即非受控（组件内自维护） */
+  visible: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 禁用（不显示浮层，触发器不可聚焦） */
+  disabled: { type: Boolean, default: false },
+  /** 是否显示箭头 */
+  showArrow: { type: Boolean, default: true },
+  /** hover 进入延迟（ms，防闪烁） */
+  enterDelay: { type: Number, default: 100 },
+  /** hover 离开延迟（ms，防闪烁） */
+  leaveDelay: { type: Number, default: 100 },
+  /** Teleport 挂载目标（CSS 选择器，默认 body） */
+  appendTo: { type: String, default: "body" }
+};
+
+function useTooltip(options) {
+  const {
+    visible: controlledVisible,
+    trigger,
+    disabled,
+    enterDelay,
+    leaveDelay,
+    emitUpdate,
+    emitShow,
+    emitHide
+  } = options;
+  const innerVisible = vue.ref(false);
+  const isVisible = vue.computed(
+    () => controlledVisible.value !== void 0 ? controlledVisible.value : innerVisible.value
+  );
+  let showTimer = null;
+  let hideTimer = null;
+  function clearShowTimer() {
+    if (showTimer !== null) {
+      clearTimeout(showTimer);
+      showTimer = null;
+    }
+  }
+  function clearHideTimer() {
+    if (hideTimer !== null) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  }
+  function applyShow() {
+    if (disabled.value || isVisible.value)
+      return;
+    innerVisible.value = true;
+    emitUpdate(true);
+    emitShow();
+  }
+  function applyHide() {
+    if (!isVisible.value)
+      return;
+    innerVisible.value = false;
+    emitUpdate(false);
+    emitHide();
+  }
+  function show() {
+    if (disabled.value)
+      return;
+    clearHideTimer();
+    applyShow();
+  }
+  function hide() {
+    clearShowTimer();
+    applyHide();
+  }
+  function toggle() {
+    if (isVisible.value)
+      hide();
+    else show();
+  }
+  function onMouseenter() {
+    if (disabled.value || trigger.value !== "hover")
+      return;
+    clearHideTimer();
+    if (isVisible.value) {
+      clearShowTimer();
+      return;
+    }
+    const delay = enterDelay.value;
+    if (delay <= 0) {
+      show();
+      return;
+    }
+    clearShowTimer();
+    showTimer = setTimeout(() => {
+      showTimer = null;
+      show();
+    }, delay);
+  }
+  function onMouseleave() {
+    if (trigger.value !== "hover")
+      return;
+    clearShowTimer();
+    if (!isVisible.value) {
+      clearHideTimer();
+      return;
+    }
+    const delay = leaveDelay.value;
+    if (delay <= 0) {
+      hide();
+      return;
+    }
+    clearHideTimer();
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      hide();
+    }, delay);
+  }
+  function onFocus() {
+    if (disabled.value || trigger.value !== "focus")
+      return;
+    show();
+  }
+  function onBlur() {
+    if (trigger.value !== "focus")
+      return;
+    hide();
+  }
+  function onClick() {
+    if (disabled.value || trigger.value !== "click")
+      return;
+    toggle();
+  }
+  function onDocumentKeydown(event) {
+    if (event.key !== "Escape" || !isVisible.value)
+      return;
+    event.preventDefault();
+    hide();
+  }
+  function dispose() {
+    clearShowTimer();
+    clearHideTimer();
+  }
+  return {
+    isVisible,
+    show,
+    hide,
+    toggle,
+    onMouseenter,
+    onMouseleave,
+    onFocus,
+    onBlur,
+    onClick,
+    onDocumentKeydown,
+    dispose
+  };
+}
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmTooltip" },
+  __name: "tooltip",
+  props: tooltipProps,
+  emits: ["update:visible", "show", "hide"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = vue.useId();
+    const tooltipId = `qm-tooltip-${uid}`;
+    const triggerRef = vue.ref(null);
+    const panelRef = vue.ref(null);
+    const visibleProp = vue.computed(() => props.visible);
+    const triggerProp = vue.computed(() => props.trigger);
+    const disabledProp = vue.computed(() => props.disabled);
+    const enterDelayProp = vue.computed(() => props.enterDelay);
+    const leaveDelayProp = vue.computed(() => props.leaveDelay);
+    const {
+      isVisible,
+      hide,
+      onMouseenter,
+      onMouseleave,
+      onFocus,
+      onBlur,
+      onClick,
+      onDocumentKeydown,
+      dispose: disposeBehavior
+    } = useTooltip({
+      visible: visibleProp,
+      trigger: triggerProp,
+      disabled: disabledProp,
+      enterDelay: enterDelayProp,
+      leaveDelay: leaveDelayProp,
+      emitUpdate: (value) => emit("update:visible", value),
+      emitShow: () => emit("show"),
+      emitHide: () => emit("hide")
+    });
+    const placementProp = vue.computed(() => props.placement);
+    const {
+      positionStyle,
+      actualPlacement,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning.usePositioning({
+      triggerRef,
+      panelRef,
+      placement: placementProp,
+      offset: 8,
+      flip: true
+    });
+    function onDocumentMousedown(event) {
+      if (props.trigger !== "click")
+        return;
+      const target = event.target;
+      if (triggerRef.value?.contains(target) || panelRef.value?.contains(target))
+        return;
+      hide();
+    }
+    vue.watch(
+      isVisible,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+          document.addEventListener("mousedown", onDocumentMousedown, true);
+          document.addEventListener("keydown", onDocumentKeydown, true);
+        } else {
+          stopAutoReposition();
+          document.removeEventListener("mousedown", onDocumentMousedown, true);
+          document.removeEventListener("keydown", onDocumentKeydown, true);
+        }
+      },
+      { flush: "post" }
+    );
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onDocumentMousedown, true);
+      document.removeEventListener("keydown", onDocumentKeydown, true);
+      stopAutoReposition();
+      disposePositioning();
+      disposeBehavior();
+    });
+    const ariaDescribedby = vue.computed(() => isVisible.value ? tooltipId : void 0);
+    const __returned__ = { props, emit, uid, tooltipId, triggerRef, panelRef, visibleProp, triggerProp, disabledProp, enterDelayProp, leaveDelayProp, isVisible, hide, onMouseenter, onMouseleave, onFocus, onBlur, onClick, onDocumentKeydown, disposeBehavior, placementProp, positionStyle, actualPlacement, updatePosition, startAutoReposition, stopAutoReposition, disposePositioning, onDocumentMousedown, ariaDescribedby };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["tabindex", "aria-describedby"];
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-tooltip__arrow",
+	"aria-hidden": "true"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		vue.Fragment,
+		null,
+		[
+			vue.createCommentVNode(" 触发器（default 插槽；可聚焦以支持 focus 触发与键盘操作） "),
+			vue.createElementVNode("span", {
+				ref: "triggerRef",
+				class: "qm-tooltip__trigger",
+				tabindex: _ctx.disabled ? -1 : 0,
+				"aria-describedby": $setup.ariaDescribedby,
+				onMouseenter: _cache[0] || (_cache[0] = (...args) => $setup.onMouseenter && $setup.onMouseenter(...args)),
+				onMouseleave: _cache[1] || (_cache[1] = (...args) => $setup.onMouseleave && $setup.onMouseleave(...args)),
+				onFocusin: _cache[2] || (_cache[2] = (...args) => $setup.onFocus && $setup.onFocus(...args)),
+				onFocusout: _cache[3] || (_cache[3] = (...args) => $setup.onBlur && $setup.onBlur(...args)),
+				onClick: _cache[4] || (_cache[4] = (...args) => $setup.onClick && $setup.onClick(...args))
+			}, [vue.renderSlot(_ctx.$slots, "default")], 40, _hoisted_1),
+			vue.createCommentVNode(" 浮层（Teleport + Transition；fixed 定位由 use-positioning 计算） "),
+			(vue.openBlock(), vue.createBlock(vue.Teleport, { to: _ctx.appendTo }, [vue.createVNode(vue.Transition, { name: "qm-tooltip" }, {
+				default: vue.withCtx(() => [$setup.isVisible ? (vue.openBlock(), vue.createElementBlock(
+					"div",
+					{
+						key: 0,
+						id: $setup.tooltipId,
+						ref: "panelRef",
+						class: vue.normalizeClass(["qm-tooltip", `qm-tooltip--${$setup.actualPlacement}`]),
+						style: vue.normalizeStyle($setup.positionStyle),
+						role: "tooltip"
+					},
+					[vue.renderSlot(_ctx.$slots, "content", {}, () => [vue.createTextVNode(
+						vue.toDisplayString(_ctx.content),
+						1
+						/* TEXT */
+					)]), _ctx.showArrow ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2)) : vue.createCommentVNode("v-if", true)],
+					6
+					/* CLASS, STYLE */
+				)) : vue.createCommentVNode("v-if", true)]),
+				_: 3
+			})], 8, ["to"]))
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
+}
+const Tooltip = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tooltip\\tooltip.vue"]]);
+
+exports.Tooltip = Tooltip;
+exports.tooltipProps = tooltipProps;
+exports.useTooltip = useTooltip;