@qingmingmu/components 0.1.0-beta.0

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

@@ -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.C6sLxXPo.js';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * 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 };

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

@@ -0,0 +1,96 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
+import { IconName, iconMap, multicolorIconNames } from '@qingmingmu/icons';
+import { _ as _export_sfc } from './components.OJRSZE6i.cjs';
+
+/** 图标尺寸枚举（§6.3：尺寸枚举统一 small | medium | large） */
+type IconSize = 'small' | 'medium' | 'large';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const iconProps: {
+    /** 图标名（来自 @qingmingmu/icons 的 iconNames）；为空时渲染插槽或空 */
+    readonly name: {
+        readonly type: PropType<IconName>;
+        readonly default: "";
+    };
+    /** 尺寸：small | medium | large 走分档 Token；string/number 自定义（number 按 px） */
+    readonly size: {
+        readonly type: PropType<IconSize | string | number>;
+        readonly default: "medium";
+    };
+    /** 颜色（默认继承 --qm-icon-color） */
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 单色模式：多色图标强制降级为单色（通道色覆盖为 currentColor，随 --qm-icon-color） */
+    readonly mono: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+
+var _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 */
+	);
+}
+var Icon = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\icon\\icon.vue"]]);
+
+export { Icon as a, iconProps as i };
+export type { IconSize as I };