@zl-ui-kit/components 0.22.1 → 0.23.0

package/README.md

@@ -804,11 +804,13 @@ presetIconifyIcon(icons)
 > 或按主题传不同地址。两个 prop 以内联 CSS 变量（`--zl-card-bg-image` / `--zl-card-bg-color`）落地，所以也可以不用 prop、
 > 直接在外部覆盖这两个变量。
 
-| CSS 变量                  | 默认值           | 说明                                                |
-| ------------------------- | ---------------- | --------------------------------------------------- |
-| `--zl-card-bg-image`      | 内置渐变底图     | 右上角装饰图；设为 `none` 即关闭                    |
-| `--zl-card-bg-color`      | `var(--zl-bg-1)` | 卡片底色                                            |
-| `--zl-pagination-justify` | `flex-end`       | 分页器水平对齐（`flex-start` 靠左 / `center` 居中） |
+| CSS 变量                          | 默认值                    | 说明                                                |
+| --------------------------------- | ------------------------- | --------------------------------------------------- |
+| `--zl-card-bg-image`              | 内置渐变底图              | 右上角装饰图；设为 `none` 即关闭                    |
+| `--zl-card-bg-color`              | `var(--zl-bg-1)`          | 卡片底色                                            |
+| `--zl-pagination-justify`         | `flex-end`                | 分页器水平对齐（`flex-start` 靠左 / `center` 居中） |
+| `--zl-pagination-active-color`    | `var(--el-color-primary)` | 完整模式当前页的描边颜色                            |
+| `--zl-pagination-total-num-color` | `var(--el-color-primary)` | 总数文案里数字的高亮色                              |
 
 头部左侧的图标列**只有传了 `#icon` 插槽才占位**（44px）：不传图标时该列整列去掉，标题/副标题直接顶到左侧内边距，
 不会留出空白方框。
@@ -816,14 +818,32 @@ presetIconifyIcon(icons)
 其余颜色、圆角、阴影统一走 token（`--zl-bg-1` / `--zl-shadow` / `--zl-radius-large` / `--zl-text-1` / `--zl-border-2`），  
 随主题切换。深色主题下装饰底图会自动关闭——浅色渐变压在深底上会发白。
 
-`ZlPagination` **默认靠右对齐**（EP 的 `.el-pagination` 是 flex 容器但没设 `justify-content`，默认会挤在左侧）。  
-单处分页需要居中/靠左时用 `align`，整站统一时覆盖 `--zl-pagination-justify` 即可：
+`ZlPagination` 默认是**完整模式**：左侧是「共 N 条资源，当前筛选命中 X 条，每页」+ 页容量选择器，
+右侧是翻页与「前往 X 页」输入框，当前页为描边样式。`X` 取当前页实际行数（按 `total / pageSize` 推导，最后一页自动变少）：
+
+- 业务对象不是「资源」时传 `total-unit`（如 `total-unit="用户"`）；不想要单位就传空字符串；
+- 需要完全自定义总数文案时用 `#total` 插槽，作用域 `{ total, pageRows, pageNum, pageSize }`；
+- 需要旧的小尺寸简易分页时显式传 `simple`（小尺寸 + 去掉跳页输入框），简易模式文案回到 EP 默认「共 N 条」。
 
 ```vue
-<ZlPagination :total="total" align="center" />
-<ZlPagination :total="total" :page-num="1" :page-size="30" />
+<ZlPagination :total="total" />
+<ZlPagination :total="total" total-unit="用户" />
+<ZlPagination :total="total" simple />
+<ZlPagination :total="total" align="center">
+  <template #total="{ total, pageRows }">共 {{ total }} 条，本页 {{ pageRows }} 条</template>
+</ZlPagination>
 ```
 
+对齐默认靠右（EP 的 `.el-pagination` 是 flex 容器但没设 `justify-content`）；完整模式下 `->` 已把翻页组推到右侧，
+需要整体居中/靠左时用 `align`，整站统一时覆盖 `--zl-pagination-justify`。
+
+**透传与自定义**：`ZlPagination` 不声明 props，除 `align` / `simple` / `totalUnit` 与分页归一化消费的键外，
+其余入参与事件原样透传给内部 `el-pagination`（`background` / `pager-count` / `hide-on-single-page` /
+`popper-class` / `prev-text` / `prev-icon` 等直接按 EP 写法传即可）；组件自用键
+（`page-num` / `page-size` / `total-visible` / `page-size-options` / `total-unit` …）同时接受 kebab-case 与 camelCase。
+样式可用上面的 CSS 变量覆盖，也可直接覆盖 `.zl-pagination--full` 下的 `.el-pager li.is-active` /
+`.el-pagination__rightwrapper`（scoped 样式带属性选择器，宿主覆盖时建议带上 `.zl-pagination` 前缀或 `!important`）。
+
 ### 其余
 
 `ZlText`（文本省略）、`ZlAutoTooltip`（超长省略 + tooltip）、`ZlDescription`（描述列表）、`ZlSection`（分区容器）、`ZlAvatar`(+Group)、`ZlAppSlogan`（品牌标语，字体走 `--zl-slogan-font-family`）、`ZlIconLabel`/`ZlIconHover`（图标 + 文字组合）。
@@ -4126,7 +4146,7 @@ const { i18n } = useLocale({ messages })
 | [`ZlCornerTag`](#zlcornertag)               | 主入口              | 5     | 0    | 1    | 0    |
 | [`ZlLayoutSwitch`](#zllayoutswitch)         | 主入口              | 6     | 1    | 0    | 0    |
 | [`ZlPageContainer`](#zlpagecontainer)       | 主入口              | 3     | 0    | 4    | 0    |
-| [`ZlPagination`](#zlpagination)             | 主入口              | 4     | 3    | 0    | 0    |
+| [`ZlPagination`](#zlpagination)             | 主入口              | 0     | 3    | 1    | 0    |
 | [`ZlPermission`](#zlpermission)             | 主入口              | 1     | 0    | 1    | 0    |
 | [`ZlPopconfirm`](#zlpopconfirm)             | 主入口              | 4     | 2    | 3    | 0    |
 | [`ZlRadioTag`](#zlradiotag)                 | 主入口              | 3     | 1    | 1    | 0    |
@@ -6003,9 +6023,9 @@ import { ZlPageContainer } from '@zl-ui-kit/components'
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPagination/index.vue`</sub>
 
-**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/totalVisible…） 经 `$attrs` 透传，`align` 控制水平对齐（left/center/right）
+**简介**：分页器（el-pagination 封装）：默认完整模式（总数/每页条数在左，翻页与跳页在右）， 分页入参（pageNum/pageSize/totalVisible…）经 `$attrs` 透传，`align` 控制水平对齐（left/center/right）。 `simple` 显式传 true 时回到小尺寸…
 
-**接口概览**：4 props · 3 事件
+**接口概览**：3 事件 · 1 插槽
 
 **用法示例**
 
@@ -6019,16 +6039,15 @@ import { ZlPagination } from '@zl-ui-kit/components'
 </template>
 ```
 
-**props**
-
-| 属性          | 类型         | 默认值 | 必填 | 示例                          | 说明                               |
-| ------------- | ------------ | ------ | ---- | ----------------------------- | ---------------------------------- |
-| `align`       | `（未声明）` | —      | 否   | `:align="align"`              | 运行时从 `$attrs` 读取，无类型约束 |
-| `pageNum`     | `（未声明）` | —      | 否   | `:page-num="pageNum"`         | 运行时从 `$attrs` 读取，无类型约束 |
-| `pageSize`    | `（未声明）` | —      | 否   | `:page-size="pageSize"`       | 运行时从 `$attrs` 读取，无类型约束 |
-| `currentPage` | `（未声明）` | —      | 否   | `:current-page="currentPage"` | 运行时从 `$attrs` 读取，无类型约束 |
+**插槽用法**
 
-> 本组件不声明 props，入参由 `$attrs` 动态读取
+```vue
+<template>
+  <ZlPagination>
+    <template #total>…</template>
+  </ZlPagination>
+</template>
+```
 
 **事件（emits）**
 
@@ -6038,6 +6057,12 @@ import { ZlPagination } from '@zl-ui-kit/components'
 | `page-change`      | `number`                                | 仅页码变化（区别于 pageSize 变化）                       |
 | `page-size-change` | `number`                                | 仅每页条数变化                                           |
 
+**插槽（slots）**
+
+| 插槽    | 作用域参数                                       | 示例                            | 说明                                                           |
+| ------- | ------------------------------------------------ | ------------------------------- | -------------------------------------------------------------- |
+| `total` | `total` / `page-rows` / `page-num` / `page-size` | `<template #total>…</template>` | 替换左侧总数文案；作用域 total / pageRows / pageNum / pageSize |
+
 #### `ZlPermission`
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPermission/index.vue`</sub>

package/dist/components/ZlPagination/index.css

@@ -1 +1 @@
-@charset "UTF-8";.zl-pagination[data-v-78457fcd]{padding:6px 16px;background-color:var(--zl-fill-1, #f9fbfd);justify-content:var(--zl-pagination-justify, flex-end)}.zl-pagination--left[data-v-78457fcd]{--zl-pagination-justify: flex-start}.zl-pagination--center[data-v-78457fcd]{--zl-pagination-justify: center}.zl-pagination--right[data-v-78457fcd]{--zl-pagination-justify: flex-end}
+@charset "UTF-8";.zl-pagination[data-v-0e872ff0]{padding:6px 16px;background-color:var(--zl-fill-1, #f9fbfd);justify-content:var(--zl-pagination-justify, flex-end)}.zl-pagination--left[data-v-0e872ff0]{--zl-pagination-justify: flex-start}.zl-pagination--center[data-v-0e872ff0]{--zl-pagination-justify: center}.zl-pagination--right[data-v-0e872ff0]{--zl-pagination-justify: flex-end}.zl-pagination--full[data-v-0e872ff0] .el-pagination__rightwrapper{flex:1;justify-content:flex-end}.zl-pagination--full[data-v-0e872ff0] .el-pager li.is-active{border:1px solid var(--zl-pagination-active-color, var(--el-color-primary));border-radius:var(--el-border-radius-base, 4px)}.zl-pagination__total-num[data-v-0e872ff0]{color:var(--zl-pagination-total-num-color, var(--el-color-primary))}

package/dist/components/ZlPagination/index.vue.d.ts

@@ -1,4 +1,18 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        total?(_: {
+            total: number;
+            pageRows: number;
+            pageNum: number;
+            pageSize: number;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (payload: {
         pageNum: number;
         pageSize: number;
@@ -13,5 +27,11 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
     "onPage-change"?: ((pageNum: number) => any) | undefined;
     "onPage-size-change"?: ((pageSize: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlPagination/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index2.vue.mjs";
 import './index.css';/* empty css            */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-78457fcd"]]);
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0e872ff0"]]);
 export {
   i as default
 };

package/dist/components/ZlPagination/index2.vue.mjs

@@ -1,53 +1,79 @@
-import { defineComponent as v, useAttrs as h, computed as r, ref as l, watch as p, resolveComponent as _, openBlock as d, createBlock as S, mergeProps as C, createCommentVNode as N } from "vue";
-import { usePagination as P } from "./usePagination.mjs";
-const B = /* @__PURE__ */ v({
+import { defineComponent as A, useAttrs as U, computed as t, ref as S, watch as N, resolveComponent as B, openBlock as T, createBlock as V, mergeProps as b, createSlots as j, withCtx as M, createElementVNode as r, renderSlot as R, createTextVNode as c, toDisplayString as v, createCommentVNode as $ } from "vue";
+import { normalizePaginationAttrs as D, usePagination as E } from "./usePagination.mjs";
+const Z = { class: "el-pagination__total zl-pagination__total" }, q = { class: "zl-pagination__total-num" }, F = { class: "zl-pagination__total-num" }, J = /* @__PURE__ */ A({
   name: "ZlPagination",
   inheritAttrs: !1,
   __name: "index",
   emits: ["change", "page-change", "page-size-change"],
-  setup(k, { emit: s }) {
-    const t = s, a = h(), n = P(() => a), c = r(() => a.align ?? "right"), i = l(
-      a.pageNum ?? (n.value === !1 ? void 0 : n.value.currentPage) ?? 1
-    ), g = l(
-      a.pageSize ?? (n.value === !1 ? void 0 : n.value.pageSize) ?? 30
+  setup(G, { emit: y }) {
+    const s = y, C = U(), n = t(() => D(C)), a = E(() => n.value), P = t(() => n.value.align ?? "right"), m = t(
+      () => a.value === !1 ? [] : String(a.value.layout ?? "").split(",").map((e) => e.trim()).filter(Boolean)
+    ), f = t(() => !m.value.includes("jumper")), z = t(() => m.value.includes("total") && !f.value), k = t(() => n.value.totalUnit ?? "资源"), g = t(() => a.value === !1 ? 0 : Number(a.value.total ?? 0)), l = S(
+      n.value.pageNum ?? (a.value === !1 ? void 0 : a.value.currentPage) ?? 1
+    ), o = S(
+      n.value.pageSize ?? (a.value === !1 ? void 0 : a.value.pageSize) ?? 30
     );
-    p(
-      () => a.pageNum ?? a.currentPage,
+    N(
+      () => n.value.pageNum ?? n.value.currentPage,
       (e) => {
-        e != null && (i.value = e);
+        e != null && (l.value = e);
       }
-    ), p(
-      () => a.pageSize,
+    ), N(
+      () => n.value.pageSize,
       (e) => {
-        e != null && (g.value = e);
+        e != null && (o.value = e);
       }
     );
-    function m(e) {
-      i.value = e, t("change", { pageNum: e, pageSize: g.value }), t("page-change", e);
+    function w(e) {
+      l.value = e, s("change", { pageNum: e, pageSize: o.value }), s("page-change", e);
     }
-    function f(e) {
-      g.value = e, i.value = 1, t("change", { pageNum: 1, pageSize: e }), t("page-size-change", e);
+    function x(e) {
+      o.value = e, l.value = 1, s("change", { pageNum: 1, pageSize: e }), s("page-size-change", e);
     }
-    const u = r(() => {
-      if (n.value === !1) return !1;
-      const { currentPage: e, pageSize: z, ...o } = n.value;
-      return delete o.align, o;
+    const _ = t(() => {
+      const e = o.value || 1;
+      return Math.min(e, Math.max(g.value - (l.value - 1) * e, 0));
+    }), d = t(() => {
+      if (a.value === !1) return !1;
+      const { currentPage: e, pageSize: i, totalUnit: h, ...u } = a.value;
+      return delete u.align, z.value && typeof u.layout == "string" && (u.layout = u.layout.split(",").map((p) => p.trim()).map((p) => p === "total" ? "slot" : p).join(", ")), u;
     });
-    return (e, z) => {
-      const o = _("el-pagination");
-      return u.value !== !1 ? (d(), S(o, C({
+    return (e, i) => {
+      const h = B("el-pagination");
+      return d.value !== !1 ? (T(), V(h, b({
         key: 0,
-        class: ["zl-pagination", `zl-pagination--${c.value}`]
-      }, u.value, {
-        "current-page": i.value,
-        "page-size": g.value,
-        onCurrentChange: m,
-        onSizeChange: f
-      }), null, 16, ["class", "current-page", "page-size"])) : N("", !0);
+        class: ["zl-pagination", [`zl-pagination--${P.value}`, f.value ? "zl-pagination--simple" : "zl-pagination--full"]]
+      }, d.value, {
+        "current-page": l.value,
+        "page-size": o.value,
+        onCurrentChange: w,
+        onSizeChange: x
+      }), j({ _: 2 }, [
+        z.value ? {
+          name: "default",
+          fn: M(() => [
+            r("span", Z, [
+              R(e.$slots, "total", {
+                total: g.value,
+                pageRows: _.value,
+                pageNum: l.value,
+                pageSize: o.value
+              }, () => [
+                i[0] || (i[0] = c(" 共 ", -1)),
+                r("span", q, v(g.value), 1),
+                c(" 条" + v(k.value) + "，当前筛选命中 ", 1),
+                r("span", F, v(_.value), 1),
+                i[1] || (i[1] = c(" 条，每页 ", -1))
+              ], !0)
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["class", "current-page", "page-size"])) : $("", !0);
     };
   }
 });
 export {
-  B as default
+  J as default
 };
 //# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlPagination/usePagination.d.ts

@@ -23,6 +23,7 @@ export interface PaginationProps {
     simple?: boolean;
     [key: string]: any;
 }
+export declare function normalizePaginationAttrs(attrs: Record<string, any>): Record<string, any>;
 export declare function usePagination(props: Ref<PaginationProps | false> | (() => PaginationProps | false)): import('vue').ComputedRef<false | {
     layout: string;
     currentPage: number;

package/dist/components/ZlPagination/usePagination.mjs

@@ -1,47 +1,64 @@
-import { computed as w, toValue as y } from "vue";
-function b(i) {
-  return w(() => {
-    const o = y(i);
+import { computed as V, toValue as k } from "vue";
+const _ = [
+  "pageNum",
+  "pageSize",
+  "pageSizeOptions",
+  "totalVisible",
+  "pageSizeVisible",
+  "showTotal",
+  "showPageSize",
+  "currentPage",
+  "pageSizes",
+  "totalUnit"
+], v = (e) => e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+function K(e) {
+  const t = { ...e };
+  for (const o of _) {
+    const i = v(o);
+    i !== o && (t[o] === void 0 && e[i] !== void 0 && (t[o] = e[i]), delete t[i]);
+  }
+  return t;
+}
+function j(e) {
+  return V(() => {
+    const o = k(e);
     if (o === !1)
       return !1;
     const {
       // 对外名优先，EP 名回落：上层已归一化时只会有 EP 名
-      pageSizeOptions: s,
-      pageSizes: n,
-      pageSize: t = 30,
-      pageNum: r,
-      currentPage: l,
-      layout: p,
-      size: u,
-      simple: a = !0,
-      totalVisible: g,
-      pageSizeVisible: c,
+      pageSizeOptions: i,
+      pageSizes: r,
+      pageSize: s = 30,
+      pageNum: p,
+      currentPage: g,
+      layout: u,
+      size: c,
+      simple: l = !1,
+      totalVisible: f,
+      pageSizeVisible: z,
       // 旧名回落：新名优先，两者都没给才用默认值
-      showTotal: z,
-      showPageSize: f,
-      ...m
-    } = o || {}, S = g ?? z ?? !0, e = (s ?? n ?? [10, 30, 50]).slice();
-    e.includes(t) || e.push(t);
-    const h = p ?? [
-      S ? "total" : "",
-      c ?? f ?? e.length > 0 ? "sizes" : "",
-      "prev",
-      "pager",
-      "next",
-      a ? "" : "jumper"
-    ].filter(Boolean).join(", ");
+      showTotal: S,
+      showPageSize: m,
+      ...b
+    } = o || {}, h = f ?? S ?? !0, n = l === !0 || l === "", a = (i ?? r ?? [10, 30, 50]).slice();
+    a.includes(s) || a.push(s);
+    const d = [
+      h ? "total" : "",
+      z ?? m ?? a.length > 0 ? "sizes" : ""
+    ].filter(Boolean), P = ["prev", "pager", "next", n ? "" : "jumper"].filter(Boolean), w = u ?? [...d, ...n ? [] : ["->"], ...P].join(", ");
     return {
       // EP 2.7+ 官方推荐 size（原 arco simple/mini 语义映射为小尺寸）
-      size: u ?? (a ? "small" : "default"),
-      ...m,
-      layout: h,
-      currentPage: r ?? l ?? 1,
-      pageSize: t,
-      pageSizes: e.sort((d, P) => d - P)
+      size: c ?? (n ? "small" : "default"),
+      ...b,
+      layout: w,
+      currentPage: p ?? g ?? 1,
+      pageSize: s,
+      pageSizes: a.sort((y, T) => y - T)
     };
   });
 }
 export {
-  b as usePagination
+  K as normalizePaginationAttrs,
+  j as usePagination
 };
 //# sourceMappingURL=usePagination.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.22.1",
-    "@zl-ui-kit/icons": "0.22.1",
-    "@zl-ui-kit/utils": "0.22.1"
+    "@zl-ui-kit/icons": "0.23.0",
+    "@zl-ui-kit/composables": "0.23.0",
+    "@zl-ui-kit/utils": "0.23.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -99,10 +99,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
+    "@jichuang/eslint-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
     "@jichuang/vite-config": "1.0.0",
-    "@jichuang/eslint-config": "1.0.0",
-    "@zl-ui-kit/theme": "0.22.1"
+    "@zl-ui-kit/theme": "0.23.0"
   },
   "repository": {
     "type": "git",