@manohub/ui 0.6.0

package/dist/components/page/split-resize.js

@@ -0,0 +1,36 @@
+const SPLIT_MIN_WIDTH = 160;
+const SPLIT_MAX_WIDTH = 480;
+const SPLIT_FALLBACK_WIDTH = 208;
+function splitWidthBounds(min, max) {
+  const lo = Number.isFinite(min) ? min : SPLIT_MIN_WIDTH;
+  const hi = Number.isFinite(max) ? max : SPLIT_MAX_WIDTH;
+  return { min: Math.min(lo, hi), max: Math.max(lo, hi) };
+}
+function clampSplitWidth(value, min, max) {
+  const { min: lo, max: hi } = splitWidthBounds(min, max);
+  if (Number.isNaN(value)) return Math.round(lo);
+  return Math.round(Math.min(hi, Math.max(lo, value)));
+}
+function projectSplitWidth(base, deltaX, side) {
+  return side === "right" ? base - deltaX : base + deltaX;
+}
+function measureSidebarWidth(el, side, fallback) {
+  if (el) {
+    const padding = Number.parseFloat(
+      getComputedStyle(el)[side === "right" ? "paddingLeft" : "paddingRight"]
+    );
+    const content = el.clientWidth - (Number.isFinite(padding) ? padding : 0);
+    if (Number.isFinite(content) && content > 0) return content;
+  }
+  if (Number.isFinite(fallback) && fallback > 0) return fallback;
+  return SPLIT_FALLBACK_WIDTH;
+}
+export {
+  SPLIT_FALLBACK_WIDTH,
+  SPLIT_MAX_WIDTH,
+  SPLIT_MIN_WIDTH,
+  clampSplitWidth,
+  measureSidebarWidth,
+  projectSplitWidth,
+  splitWidthBounds
+};

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,171 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+/** 页码窗口里的一项：页码，或省略号 */
+export type PaginationPageItem = number | 'ellipsis';
+/**
+ * 分页条（**自绘**；总数文案 + 每页条数 + 页码窗口 + 翻页箭头 + 跳页）。
+ *
+ * ## 四个形态的判据
+ *
+ * - `total === 0` → 只出「暂无数据」；
+ * - `hideOnSinglePage` 且只有一页 → **整件不渲染**（列表页常见：数据少时不要一条孤零零的分页条）；
+ * - `simple` → 只出「1 / 5」（位置窄、不需要跳页时用）；
+ * - 缺省 → 完整档（可加 `boxed` 出外框、`showQuickJumper` 出跳页框）。
+ *
+ * ## 页码窗口怎么算
+ *
+ * 总页数 ≤ 7 全铺；> 7 取**首末 + 当前页±1**、其余折成省略号（规范取向）。这个计算是 JS 该干的事
+ * （零 JS 表达不了"当前页"，规范样张也是静态铺的）。
+ *
+ * ## 与 `QueryState` 的分工
+ *
+ * 本件只管"翻到第几页"；**列表为空/加载中/出错**由 `QueryState` 承载（本件只在 `total === 0` 时给出一行
+ * 兜底文案，因为分页条自己也得说清"没数据"而不是显示 `共 0 条`）。
+ *
+ * @example 基本
+ * <Pagination :total="243" v-model="page" v-model:page-size="size" />
+ *
+ * @example 跳页 + 单页隐藏
+ * <Pagination :total="243" show-quick-jumper hide-on-single-page v-model="page" />
+ */
+export declare const Pagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 总条数 */
+    total: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 当前页（**1 起**） */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 每页条数可选项（只在需要时出选择器） */
+    pageSizeOptions: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    /** 是否显示「每页 n 条」选择器 */
+    showSizeChanger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否显示「跳至 n 页」输入框 */
+    showQuickJumper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 只有一页时整件不渲染（列表页常见） */
+    hideOnSinglePage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 简单档：只出「1 / 5」 */
+    simple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 外框档 */
+    boxed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档：页码方块跟随全库控件三档（24 / 32 / 40） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (page: number) => true;
+    'update:pageSize': (size: number) => true;
+    change: (payload: {
+        page: number;
+        pageSize: number;
+    }) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 总条数 */
+    total: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 当前页（**1 起**） */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 每页条数 */
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 每页条数可选项（只在需要时出选择器） */
+    pageSizeOptions: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    /** 是否显示「每页 n 条」选择器 */
+    showSizeChanger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否显示「跳至 n 页」输入框 */
+    showQuickJumper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 只有一页时整件不渲染（列表页常见） */
+    hideOnSinglePage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 简单档：只出「1 / 5」 */
+    simple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 外框档 */
+    boxed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档：页码方块跟随全库控件三档（24 / 32 / 40） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((payload: {
+        page: number;
+        pageSize: number;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((page: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((size: number) => any) | undefined;
+}>, {
+    size: ControlSize;
+    disabled: boolean;
+    modelValue: number;
+    total: number;
+    pageSize: number;
+    pageSizeOptions: number[];
+    showSizeChanger: boolean;
+    showQuickJumper: boolean;
+    hideOnSinglePage: boolean;
+    simple: boolean;
+    boxed: boolean;
+}, SlotsType<{
+    total?: (context: {
+        total: number;
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/pagination/index.js

@@ -0,0 +1,226 @@
+import { defineComponent, ref, computed, createVNode, createTextVNode, mergeProps } from "vue";
+import { Icon } from "@manohub/icon";
+const Pagination = /* @__PURE__ */ defineComponent({
+  name: "Pagination",
+  inheritAttrs: false,
+  props: {
+    /** 总条数 */
+    total: {
+      type: Number,
+      default: 0
+    },
+    /** 当前页（**1 起**） */
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    /** 每页条数 */
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    /** 每页条数可选项（只在需要时出选择器） */
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50]
+    },
+    /** 是否显示「每页 n 条」选择器 */
+    showSizeChanger: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示「跳至 n 页」输入框 */
+    showQuickJumper: {
+      type: Boolean,
+      default: false
+    },
+    /** 只有一页时整件不渲染（列表页常见） */
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    },
+    /** 简单档：只出「1 / 5」 */
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    /** 外框档 */
+    boxed: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档：页码方块跟随全库控件三档（24 / 32 / 40） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    "update:modelValue": (page) => true,
+    "update:pageSize": (size) => true,
+    change: (payload) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    attrs,
+    slots
+  }) {
+    const menuId = `mh-pagination-${Math.random().toString(36).slice(2, 10)}`;
+    const jumpValue = ref("");
+    const pageCount = computed(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
+    const current = computed(() => Math.min(pageCount.value, Math.max(1, props.modelValue)));
+    const pages = computed(() => {
+      const count = pageCount.value;
+      if (count <= 7) return Array.from({
+        length: count
+      }, (_, index) => index + 1);
+      const window = [.../* @__PURE__ */ new Set([1, count, current.value - 1, current.value, current.value + 1])].filter((page) => page >= 1 && page <= count).sort((a, b) => a - b);
+      const items = [];
+      window.forEach((page, index) => {
+        if (index > 0 && page - window[index - 1] > 1) items.push("ellipsis");
+        items.push(page);
+      });
+      return items;
+    });
+    const commitPage = (page) => {
+      if (props.disabled) return;
+      const next = Math.min(pageCount.value, Math.max(1, page));
+      if (next === current.value) return;
+      emit("update:modelValue", next);
+      emit("change", {
+        page: next,
+        pageSize: props.pageSize
+      });
+    };
+    const commitSize = (size) => {
+      if (props.disabled) return;
+      emit("update:pageSize", size);
+      emit("change", {
+        page: current.value,
+        pageSize: size
+      });
+      closeMenu();
+    };
+    const applyJump = () => {
+      const parsed = Number.parseInt(jumpValue.value, 10);
+      jumpValue.value = "";
+      if (Number.isNaN(parsed)) return;
+      commitPage(parsed);
+    };
+    const closeMenu = () => {
+      const panel = document.getElementById(menuId);
+      panel?.hidePopover?.();
+    };
+    return () => {
+      const rootClass = [
+        "mh-pagination",
+        /* `mh-popup-host` 是操作层展开转向的**宿主标记**（popup.css 靠它 :has 反推面板是否打开）：
+           少了它，条数选择器的 caret 永远不会翻向 —— 与 Select / Tooltip 同一分工。 */
+        "mh-popup-host",
+        props.boxed ? "mh-pagination--boxed" : "",
+        props.size === "md" ? "" : `mh-pagination--${props.size}`,
+        attrs.class
+      ].filter(Boolean).join(" ");
+      const style = attrs.style;
+      const totalText = slots.total ? slots.total({
+        total: props.total
+      }) : `共 ${props.total} 条，`;
+      if (props.simple) {
+        return createVNode("span", {
+          "class": ["mh-pagination__plain", attrs.class].filter(Boolean).join(" "),
+          "style": style
+        }, [current.value, createTextVNode(" / "), pageCount.value]);
+      }
+      if (props.hideOnSinglePage && pageCount.value <= 1) return null;
+      if (props.total === 0) {
+        return createVNode("span", {
+          "class": ["mh-pagination__empty", attrs.class].filter(Boolean).join(" "),
+          "style": style
+        }, [createTextVNode("暂无数据")]);
+      }
+      return createVNode("footer", {
+        "class": rootClass,
+        "style": style
+      }, [createVNode("span", {
+        "class": "mh-pagination__total"
+      }, [totalText]), props.showSizeChanger ? createVNode("button", mergeProps({
+        "type": "button",
+        "class": "mh-pagination__size",
+        "disabled": props.disabled
+      }, {
+        popovertarget: menuId
+      }), [createTextVNode("每页 "), props.pageSize, createTextVNode(" 条"), createVNode(Icon, {
+        "name": "chevron-down",
+        "class": "mh-popup-caret"
+      }, null)]) : null, createVNode("div", mergeProps({
+        "id": menuId,
+        "class": "mh-popup mh-pagination__panel",
+        "data-side": "bottom",
+        "data-align": "start"
+      }, {
+        popover: "auto"
+      }), [props.pageSizeOptions.map((size) => createVNode("label", {
+        "key": size,
+        "class": "mh-pagination__size-option"
+      }, [createVNode("input", {
+        "type": "radio",
+        "name": menuId,
+        "checked": size === props.pageSize,
+        "disabled": props.disabled,
+        "onChange": () => commitSize(size)
+      }, null), createVNode("span", null, [size, createTextVNode(" 条/页")])]))]), createVNode("span", {
+        "class": "mh-pagination__pages"
+      }, [createVNode("button", {
+        "type": "button",
+        "class": "mh-pagination__btn mh-pagination__btn--arrow mh-pagination__btn--prev",
+        "disabled": props.disabled || current.value <= 1,
+        "aria-label": "上一页",
+        "onClick": () => commitPage(current.value - 1)
+      }, [createVNode(Icon, {
+        "name": "chevron-left"
+      }, null)]), pages.value.map((item, index) => item === "ellipsis" ? createVNode("span", {
+        "key": `e-${index}`,
+        "class": "mh-pagination__btn mh-pagination__btn--ellipsis"
+      }, [createTextVNode("···")]) : createVNode("button", {
+        "key": item,
+        "type": "button",
+        "class": "mh-pagination__btn",
+        "data-state": item === current.value ? "selected" : "idle",
+        "aria-current": item === current.value ? "page" : void 0,
+        "disabled": props.disabled,
+        "onClick": () => commitPage(item)
+      }, [item])), createVNode("button", {
+        "type": "button",
+        "class": "mh-pagination__btn mh-pagination__btn--arrow mh-pagination__btn--next",
+        "disabled": props.disabled || current.value >= pageCount.value,
+        "aria-label": "下一页",
+        "onClick": () => commitPage(current.value + 1)
+      }, [createVNode(Icon, {
+        "name": "chevron-right"
+      }, null)])]), props.showQuickJumper ? createVNode("span", {
+        "class": "mh-pagination__jump"
+      }, [createTextVNode("跳至"), createVNode("input", {
+        "class": "mh-pagination__jump-input",
+        "type": "number",
+        "min": "1",
+        "max": pageCount.value,
+        "value": jumpValue.value,
+        "disabled": props.disabled,
+        "aria-label": "跳至页码",
+        "onInput": (event) => jumpValue.value = event.target.value,
+        "onKeydown": (event) => {
+          if (event.key === "Enter") applyJump();
+        },
+        "onBlur": applyJump
+      }, null), createTextVNode("页")]) : null]);
+    };
+  }
+});
+export {
+  Pagination
+};