@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.CZspoBJZ.mjs

@@ -0,0 +1,314 @@
+import { ref, computed, defineComponent, useId, watch, onBeforeUnmount, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, normalizeStyle, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { u as usePositioning } from './components.DqdBSuxX.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+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 = ref(false);
+  const isVisible = 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__ */ 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 = useId();
+    const tooltipId = `qm-tooltip-${uid}`;
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const visibleProp = computed(() => props.visible);
+    const triggerProp = computed(() => props.trigger);
+    const disabledProp = computed(() => props.disabled);
+    const enterDelayProp = computed(() => props.enterDelay);
+    const leaveDelayProp = 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 = computed(() => props.placement);
+    const {
+      positionStyle,
+      actualPlacement,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = 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();
+    }
+    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" }
+    );
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onDocumentMousedown, true);
+      document.removeEventListener("keydown", onDocumentKeydown, true);
+      stopAutoReposition();
+      disposePositioning();
+      disposeBehavior();
+    });
+    const ariaDescribedby = 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 openBlock(), createElementBlock(
+		Fragment,
+		null,
+		[
+			createCommentVNode(" 触发器（default 插槽；可聚焦以支持 focus 触发与键盘操作） "),
+			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))
+			}, [renderSlot(_ctx.$slots, "default")], 40, _hoisted_1),
+			createCommentVNode(" 浮层（Teleport + Transition；fixed 定位由 use-positioning 计算） "),
+			(openBlock(), createBlock(Teleport, { to: _ctx.appendTo }, [createVNode(Transition, { name: "qm-tooltip" }, {
+				default: withCtx(() => [$setup.isVisible ? (openBlock(), createElementBlock(
+					"div",
+					{
+						key: 0,
+						id: $setup.tooltipId,
+						ref: "panelRef",
+						class: normalizeClass(["qm-tooltip", `qm-tooltip--${$setup.actualPlacement}`]),
+						style: normalizeStyle($setup.positionStyle),
+						role: "tooltip"
+					},
+					[renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(
+						toDisplayString(_ctx.content),
+						1
+						/* TEXT */
+					)]), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("v-if", true)],
+					6
+					/* CLASS, STYLE */
+				)) : createCommentVNode("v-if", true)]),
+				_: 3
+			})], 8, ["to"]))
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
+}
+const Tooltip = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tooltip\\tooltip.vue"]]);
+
+export { Tooltip as T, tooltipProps as t, useTooltip as u };

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

@@ -0,0 +1,288 @@
+import { PropType, ComputedRef, defineComponent, computed, ref, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createVNode, Fragment, renderList, createTextVNode, withDirectives, vModelText } from 'vue';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmPagination 组件类型定义（导航 + 桌面端 task）
+ * 类型先行：页码为数字，分页器为受控组件（v-model:modelValue）。
+ */
+/** props 声明 */
+declare const paginationProps: {
+    /** 当前页（v-model，从 1 开始） */
+    readonly modelValue: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    /** 总条数 */
+    readonly total: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    /** 每页条数 */
+    readonly pageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    /** 每页条数选项（showSizer 时渲染） */
+    readonly pageSizes: {
+        readonly type: PropType<number[]>;
+        readonly default: () => number[];
+    };
+    /** 显示总条数文案 */
+    readonly showTotal: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 显示每页条数选择器 */
+    readonly showSizer: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 显示快速跳转输入框 */
+    readonly showJumper: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 禁用全部交互 */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** emits 声明 */
+interface PaginationEmits {
+    'update:modelValue': [page: number];
+    /** 页码变化（翻页 / 跳转 / 页尺寸变化重置到第 1 页时触发） */
+    'change': [page: number];
+    /** 每页条数变化 */
+    'sizeChange': [size: number];
+}
+/** 页码渲染项：数字页码或省略号 */
+type PageItem = number | 'more';
+
+/**
+ * usePagination 行为层（导航 + 桌面端 task）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 派生：总页数、页码渲染序列（首/末页 + 当前页邻域 + 省略号）；
+ * - 边界：go() 钳制到 [1, pageCount]；第一页禁用上一页、末页禁用下一页；
+ * - 收敛：页码变化统一 emit update:modelValue + change；页尺寸变化 emit size-change
+ *         并重置到第 1 页；
+ * - 受控钳制：total/pageSize 变化导致当前页越界时自动回写首页/末页。
+ */
+
+interface UsePaginationOptions {
+    /** 当前页 */
+    current: ComputedRef<number>;
+    /** 总条数 */
+    total: ComputedRef<number>;
+    /** 每页条数 */
+    pageSize: ComputedRef<number>;
+    /** 是否禁用 */
+    disabled: ComputedRef<boolean>;
+    emitUpdate: (page: number) => void;
+    emitChange: (page: number) => void;
+    emitSizeChange: (size: number) => void;
+}
+interface UsePaginationReturn {
+    /** 当前页（受控/非受控双模式：内部态由 modelValue 回写，交互更新后 emit） */
+    current: ComputedRef<number>;
+    /** 总页数（至少 1） */
+    pageCount: ComputedRef<number>;
+    /** 页码渲染序列（number | 'more'） */
+    pages: ComputedRef<PageItem[]>;
+    /** 是否第一页 */
+    isFirst: ComputedRef<boolean>;
+    /** 是否末页 */
+    isLast: ComputedRef<boolean>;
+    /** 跳到指定页（钳制后 emit） */
+    go: (page: number) => void;
+    /** 上一页 */
+    prev: () => void;
+    /** 下一页 */
+    next: () => void;
+    /** 每页条数变化（emit size-change + 重置到第 1 页） */
+    changeSize: (size: number) => void;
+}
+declare function usePagination(options: UsePaginationOptions): UsePaginationReturn;
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmPagination" },
+  __name: "pagination",
+  props: paginationProps,
+  emits: ["update:modelValue", "change", "sizeChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const currentProp = computed(() => props.modelValue);
+    const total = computed(() => props.total);
+    const pageSize = computed(() => props.pageSize);
+    const disabled = computed(() => props.disabled);
+    const pagination = usePagination({
+      current: currentProp,
+      total,
+      pageSize,
+      disabled,
+      emitUpdate: (page) => emit("update:modelValue", page),
+      emitChange: (page) => emit("change", page),
+      emitSizeChange: (size) => emit("sizeChange", size)
+    });
+    const { current, pages, isFirst, isLast, go, prev, next, changeSize } = pagination;
+    const jumperValue = ref("");
+    function onJumperKeydown(event) {
+      if (event.key !== "Enter")
+        return;
+      const page = Number.parseInt(jumperValue.value, 10);
+      if (Number.isNaN(page))
+        return;
+      go(page);
+      jumperValue.value = "";
+    }
+    function onSizeChange(event) {
+      const size = Number(event.target.value);
+      if (!Number.isNaN(size) && size > 0)
+        changeSize(size);
+    }
+    const __returned__ = { props, emit, currentProp, total, pageSize, disabled, pagination, current, pages, isFirst, isLast, go, prev, next, changeSize, jumperValue, onJumperKeydown, onSizeChange, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	key: 0,
+	class: "qm-pagination__total"
+};
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = [
+	"aria-current",
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+const _hoisted_4 = {
+	key: 1,
+	class: "qm-pagination__ellipsis",
+	"aria-hidden": "true"
+};
+const _hoisted_5 = ["disabled"];
+const _hoisted_6 = {
+	key: 1,
+	class: "qm-pagination__sizer"
+};
+const _hoisted_7 = ["value", "disabled"];
+const _hoisted_8 = ["value"];
+const _hoisted_9 = {
+	key: 2,
+	class: "qm-pagination__jumper"
+};
+const _hoisted_10 = ["disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-pagination", { "qm-pagination--disabled": $setup.disabled }]),
+			"data-qm": "pagination"
+		},
+		[
+			_ctx.showTotal ? (openBlock(), createElementBlock(
+				"span",
+				_hoisted_1,
+				"共 " + toDisplayString($setup.total) + " 条",
+				1
+				/* TEXT */
+			)) : createCommentVNode("v-if", true),
+			createElementVNode("button", {
+				type: "button",
+				class: "qm-pagination__btn",
+				disabled: $setup.disabled || $setup.isFirst,
+				"aria-label": "上一页",
+				onClick: _cache[0] || (_cache[0] = (...args) => $setup.prev && $setup.prev(...args))
+			}, [createVNode($setup["QmIcon"], {
+				name: "chevron-left",
+				class: "qm-pagination__btn-icon"
+			})], 8, _hoisted_2),
+			(openBlock(true), createElementBlock(
+				Fragment,
+				null,
+				renderList($setup.pages, (page) => {
+					return openBlock(), createElementBlock(
+						Fragment,
+						{ key: page },
+						[page !== "more" ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: normalizeClass(["qm-pagination__item", { "qm-pagination__item--active": page === $setup.current }]),
+							"aria-current": page === $setup.current ? "page" : undefined,
+							"aria-label": `第 ${page} 页`,
+							disabled: $setup.disabled,
+							onClick: ($event) => $setup.go(page)
+						}, toDisplayString(page), 11, _hoisted_3)) : (openBlock(), createElementBlock("span", _hoisted_4, "…"))],
+						64
+						/* STABLE_FRAGMENT */
+					);
+				}),
+				128
+				/* KEYED_FRAGMENT */
+			)),
+			createElementVNode("button", {
+				type: "button",
+				class: "qm-pagination__btn",
+				disabled: $setup.disabled || $setup.isLast,
+				"aria-label": "下一页",
+				onClick: _cache[1] || (_cache[1] = (...args) => $setup.next && $setup.next(...args))
+			}, [createVNode($setup["QmIcon"], {
+				name: "chevron-right",
+				class: "qm-pagination__btn-icon"
+			})], 8, _hoisted_5),
+			_ctx.showSizer ? (openBlock(), createElementBlock("span", _hoisted_6, [createElementVNode("select", {
+				class: "qm-pagination__select",
+				value: $setup.pageSize,
+				disabled: $setup.disabled,
+				"aria-label": "每页条数",
+				onChange: $setup.onSizeChange
+			}, [(openBlock(true), createElementBlock(
+				Fragment,
+				null,
+				renderList(_ctx.pageSizes, (size) => {
+					return openBlock(), createElementBlock("option", {
+						key: size,
+						value: size
+					}, toDisplayString(size) + " 条/页", 9, _hoisted_8);
+				}),
+				128
+				/* KEYED_FRAGMENT */
+			))], 40, _hoisted_7)])) : createCommentVNode("v-if", true),
+			_ctx.showJumper ? (openBlock(), createElementBlock("span", _hoisted_9, [
+				_cache[3] || (_cache[3] = createTextVNode(
+					" 前往 ",
+					-1
+					/* CACHED */
+				)),
+				withDirectives(createElementVNode("input", {
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.jumperValue = $event),
+					class: "qm-pagination__jumper-input",
+					type: "text",
+					inputmode: "numeric",
+					disabled: $setup.disabled,
+					"aria-label": "跳转到指定页",
+					onKeydown: $setup.onJumperKeydown
+				}, null, 40, _hoisted_10), [[vModelText, $setup.jumperValue]]),
+				_cache[4] || (_cache[4] = createTextVNode(
+					" 页 ",
+					-1
+					/* CACHED */
+				))
+			])) : createCommentVNode("v-if", true)
+		],
+		2
+		/* CLASS */
+	);
+}
+var Pagination = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\pagination\\pagination.vue"]]);
+
+export { Pagination as b, paginationProps as p, usePagination as u };
+export type { PageItem as P, UsePaginationOptions as U, PaginationEmits as a, UsePaginationReturn as c };