@ticatec/uniface-element 5.0.5 → 5.1.0

package/README.md

@@ -26,6 +26,7 @@ npm install @ticatec/uniface-element
 ## 📚 Documentation
 
 - **[Generated Component Reference](./docs/components/README.md)** - Source-derived API tables and a standalone Svelte example for every public component
+- **[API Naming Guide](./docs/NAMING.md)** - Naming conventions for props, callbacks, methods and types, with the 5.0.x → 5.1.0 rename table
 - **[AI Coding Prompts Index](./assets/ai-coding/README.md)** - Category guides and a full component API matrix, meant to be handed to an AI coding assistant
 - **[中文文档](./README_CN.md)** - Chinese documentation
 
@@ -92,7 +93,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 
 ### Advanced Components
 - **Editors**: `InlineCellEditor`, `PropertyEditor`, `PromptsTextEditor`
-- **File Upload**: `AttachmentFiles`, `ImageFiles`
+- **File Upload**: `AttachmentEditor`, `ImageEditor`
 - **Data Transfer**: `Transfer`
 - **Search**: `SearchBox`, `CriteriaField`
 
@@ -252,8 +253,8 @@ i18nUtils.loadResources('/assets/uniface.json'); // the language code will inser
 import Button from '@ticatec/uniface-element/Button';
 import DataTable from '@ticatec/uniface-element/DataTable';
 import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
-import AttachmentFiles from '@ticatec/uniface-element/AttachmentFiles';
-import ImageFiles from '@ticatec/uniface-element/ImageFiles';
+import AttachmentEditor from '@ticatec/uniface-element/AttachmentEditor';
+import ImageEditor from '@ticatec/uniface-element/ImageEditor';
 import MemoEditor from '@ticatec/uniface-element/MemoEditor';
 
 // Utility imports

package/README_CN.md

@@ -26,6 +26,7 @@ npm install @ticatec/uniface-element
 ## 组件文档
 
 - **[自动生成的组件参考](./docs/components/README.md)**：覆盖全部公开组件的源码派生属性表和独立 Svelte 示例
+- **[API 命名规范](./docs/NAMING_CN.md)**：属性、回调、方法、类型的命名约定，以及 5.0.x → 5.1.0 的新旧对照表
 
 ## 快速开始
 
@@ -89,7 +90,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 
 ### 高级组件
 - **编辑器**: `InlineCellEditor`、`PropertyEditor`、`PromptsTextEditor`
-- **文件上传**: `AttachmentFiles`、`ImageFiles`
+- **文件上传**: `AttachmentEditor`、`ImageEditor`
 - **数据传输**: `Transfer`
 - **搜索组件**: `SearchBox`、`CriteriaField`
 
@@ -330,8 +331,8 @@ i18nUtils.loadResources('/assets/uniface.json'); // 语言代码会插入到 .js
 import Button from '@ticatec/uniface-element/Button';
 import DataTable from '@ticatec/uniface-element/DataTable';
 import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
-import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFiles';
-import ImageFilesField from '@ticatec/uniface-element/ImageFiles';
+import AttachmentEditor from '@ticatec/uniface-element/AttachmentEditor';
+import ImageEditor from '@ticatec/uniface-element/ImageEditor';
 import MemoEditor from '@ticatec/uniface-element/MemoEditor';
 
 // 工具导入

package/dist/app_layout/ColumnsLayout.svelte

@@ -7,10 +7,14 @@
         height?: string;
         leftWidth?: string | null;
         rightWidth?: string | null;
-        leftMin?: string | null;
-        leftMax?: string | null;
-        rightMin?: string | null;
-        rightMax?: string | null;
+        /** 左栏最小宽度（CSS 长度） */
+        leftMinWidth?: string | null;
+        /** 左栏最大宽度（CSS 长度） */
+        leftMaxWidth?: string | null;
+        /** 右栏最小宽度（CSS 长度） */
+        rightMinWidth?: string | null;
+        /** 右栏最大宽度（CSS 长度） */
+        rightMaxWidth?: string | null;
         leftResize?: boolean;
         rightResize?: boolean;
         left?: Snippet;
@@ -23,10 +27,10 @@
         height = '100%',
         leftWidth = null,
         rightWidth = null,
-        leftMin = null,
-        leftMax = null,
-        rightMin = null,
-        rightMax = null,
+        leftMinWidth = null,
+        leftMaxWidth = null,
+        rightMinWidth = null,
+        rightMaxWidth = null,
         leftResize = false,
         rightResize = false,
         left,
@@ -43,8 +47,8 @@
         return v ? `${attr}: ${v};` : ''
     }
 
-    let leftStyle = $derived(`${generateStyle('min-width', leftMin)} ${generateStyle('max-width', leftMax)} ${generateStyle('width', leftWidth ?? colWidth)}`);
-    let rightStyle = $derived(`${generateStyle('min-width', rightMin)} ${generateStyle('max-width', rightMax)} ${generateStyle('width', rightWidth ?? colWidth)}`);
+    let leftStyle = $derived(`${generateStyle('min-width', leftMinWidth)} ${generateStyle('max-width', leftMaxWidth)} ${generateStyle('width', leftWidth ?? colWidth)}`);
+    let rightStyle = $derived(`${generateStyle('min-width', rightMinWidth)} ${generateStyle('max-width', rightMaxWidth)} ${generateStyle('width', rightWidth ?? colWidth)}`);
 </script>
 
 <div class="uniface-columns-layout" style="width: {width}; height: {height}">

package/dist/app_layout/ColumnsLayout.svelte.d.ts

@@ -4,10 +4,14 @@ interface Props {
     height?: string;
     leftWidth?: string | null;
     rightWidth?: string | null;
-    leftMin?: string | null;
-    leftMax?: string | null;
-    rightMin?: string | null;
-    rightMax?: string | null;
+    /** 左栏最小宽度（CSS 长度） */
+    leftMinWidth?: string | null;
+    /** 左栏最大宽度（CSS 长度） */
+    leftMaxWidth?: string | null;
+    /** 右栏最小宽度（CSS 长度） */
+    rightMinWidth?: string | null;
+    /** 右栏最大宽度（CSS 长度） */
+    rightMaxWidth?: string | null;
     leftResize?: boolean;
     rightResize?: boolean;
     left?: Snippet;

package/dist/app_layout/README.md

@@ -1,5 +1,7 @@
 # App Layout Components
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../docs/NAMING.md); the old names `bottomMax`, `bottomMin`, `leftMax`, `leftMin`, `rightMax`, `rightMin`, `topMax`, `topMin` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A collection of flexible layout components for building application interfaces with headers, sidebars, and resizable panels.
 
 All components target **Svelte 5** and use the snippet API (`{#snippet ...}` / `{@render ...}`). Default content is passed as `children` (the implicit body of the component).
@@ -199,10 +201,10 @@ Three-column horizontal layout: left + center + right. Center fills remaining sp
 | `height` | `string` | `'100%'` | Total layout height |
 | `leftWidth` | `string \| null` | `null` | Left column width (falls back to `25%` / `50%`) |
 | `rightWidth` | `string \| null` | `null` | Right column width (falls back to `25%` / `50%`) |
-| `leftMin` | `string \| null` | `null` | Left column min-width |
-| `leftMax` | `string \| null` | `null` | Left column max-width |
-| `rightMin` | `string \| null` | `null` | Right column min-width |
-| `rightMax` | `string \| null` | `null` | Right column max-width |
+| `leftMinWidth` | `string \| null` | `null` | Left column min-width |
+| `leftMaxWidth` | `string \| null` | `null` | Left column max-width |
+| `rightMinWidth` | `string \| null` | `null` | Right column min-width |
+| `rightMaxWidth` | `string \| null` | `null` | Right column max-width |
 | `leftResize` | `boolean` | `false` | Enable left column resizing |
 | `rightResize` | `boolean` | `false` | Enable right column resizing |
 
@@ -222,8 +224,8 @@ Three-column horizontal layout: left + center + right. Center fills remaining sp
   rightResize={true}
   leftWidth="200px"
   rightWidth="300px"
-  leftMin="150px"
-  rightMin="250px"
+  leftMinWidth="150px"
+  rightMinWidth="250px"
 >
   {#snippet left()}
     <!-- Left panel -->
@@ -252,10 +254,10 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
 | `height` | `string` | `'100%'` | Total layout height |
 | `topHeight` | `string \| null` | `null` | Top row height (falls back to `25%` / `50%`) |
 | `bottomHeight` | `string \| null` | `null` | Bottom row height (falls back to `25%` / `50%`) |
-| `topMin` | `string \| null` | `null` | Top row min-height |
-| `topMax` | `string \| null` | `null` | Top row max-height |
-| `bottomMin` | `string \| null` | `null` | Bottom row min-height |
-| `bottomMax` | `string \| null` | `null` | Bottom row max-height |
+| `topMinHeight` | `string \| null` | `null` | Top row min-height |
+| `topMaxHeight` | `string \| null` | `null` | Top row max-height |
+| `bottomMinHeight` | `string \| null` | `null` | Bottom row min-height |
+| `bottomMaxHeight` | `string \| null` | `null` | Bottom row max-height |
 | `topResize` | `boolean` | `false` | Enable top row resizing |
 | `bottomResize` | `boolean` | `false` | Enable bottom row resizing |
 
@@ -275,8 +277,8 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
   bottomResize={true}
   topHeight="150px"
   bottomHeight="100px"
-  topMin="100px"
-  bottomMin="80px"
+  topMinHeight="100px"
+  bottomMinHeight="80px"
 >
   {#snippet top()}
     <!-- Top panel -->

package/dist/app_layout/README_CN.md

@@ -1,5 +1,7 @@
 # 应用布局组件
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../docs/NAMING_CN.md) 中的名字；旧名 `bottomMax`, `bottomMin`, `leftMax`, `leftMin`, `rightMax`, `rightMin`, `topMax`, `topMin` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 一套灵活的布局组件，用于构建带有标题栏、侧边栏和可调整面板的应用程序界面。
 
 所有组件基于 **Svelte 5**，使用 snippet API（`{#snippet ...}` / `{@render ...}`）。默认内容通过 `children` snippet 传入（即组件标签内直接写的内容）。
@@ -199,10 +201,10 @@ npm install @ticatec/uniface-element
 | `height` | `string` | `"100%"` | 布局总高度 |
 | `leftWidth` | `string \| null` | `null` | 左列宽度（缺省回退到 `25%` / `50%`） |
 | `rightWidth` | `string \| null` | `null` | 右列宽度（缺省回退到 `25%` / `50%`） |
-| `leftMin` | `string \| null` | `null` | 左列最小宽度 |
-| `leftMax` | `string \| null` | `null` | 左列最大宽度 |
-| `rightMin` | `string \| null` | `null` | 右列最小宽度 |
-| `rightMax` | `string \| null` | `null` | 右列最大宽度 |
+| `leftMinWidth` | `string \| null` | `null` | 左列最小宽度 |
+| `leftMaxWidth` | `string \| null` | `null` | 左列最大宽度 |
+| `rightMinWidth` | `string \| null` | `null` | 右列最小宽度 |
+| `rightMaxWidth` | `string \| null` | `null` | 右列最大宽度 |
 | `leftResize` | `boolean` | `false` | 启用左列调整大小 |
 | `rightResize` | `boolean` | `false` | 启用右列调整大小 |
 
@@ -222,8 +224,8 @@ npm install @ticatec/uniface-element
   rightResize={true}
   leftWidth="200px"
   rightWidth="300px"
-  leftMin="150px"
-  rightMin="250px"
+  leftMinWidth="150px"
+  rightMinWidth="250px"
 >
   {#snippet left()}
     <!-- 左面板 -->
@@ -252,10 +254,10 @@ npm install @ticatec/uniface-element
 | `height` | `string` | `"100%"` | 布局总高度 |
 | `topHeight` | `string \| null` | `null` | 顶部行高度（缺省回退到 `25%` / `50%`） |
 | `bottomHeight` | `string \| null` | `null` | 底部行高度（缺省回退到 `25%` / `50%`） |
-| `topMin` | `string \| null` | `null` | 顶部行最小高度 |
-| `topMax` | `string \| null` | `null` | 顶部行最大高度 |
-| `bottomMin` | `string \| null` | `null` | 底部行最小高度 |
-| `bottomMax` | `string \| null` | `null` | 底部行最大高度 |
+| `topMinHeight` | `string \| null` | `null` | 顶部行最小高度 |
+| `topMaxHeight` | `string \| null` | `null` | 顶部行最大高度 |
+| `bottomMinHeight` | `string \| null` | `null` | 底部行最小高度 |
+| `bottomMaxHeight` | `string \| null` | `null` | 底部行最大高度 |
 | `topResize` | `boolean` | `false` | 启用顶部行调整大小 |
 | `bottomResize` | `boolean` | `false` | 启用底部行调整大小 |
 
@@ -275,8 +277,8 @@ npm install @ticatec/uniface-element
   bottomResize={true}
   topHeight="150px"
   bottomHeight="100px"
-  topMin="100px"
-  bottomMin="80px"
+  topMinHeight="100px"
+  bottomMinHeight="80px"
 >
   {#snippet top()}
     <!-- 顶部面板 -->

package/dist/app_layout/RowsLayout.svelte

@@ -7,10 +7,14 @@
         height?: string;
         topHeight?: string | null;
         bottomHeight?: string | null;
-        topMin?: string | null;
-        topMax?: string | null;
-        bottomMin?: string | null;
-        bottomMax?: string | null;
+        /** 上栏最小高度（CSS 长度） */
+        topMinHeight?: string | null;
+        /** 上栏最大高度（CSS 长度） */
+        topMaxHeight?: string | null;
+        /** 下栏最小高度（CSS 长度） */
+        bottomMinHeight?: string | null;
+        /** 下栏最大高度（CSS 长度） */
+        bottomMaxHeight?: string | null;
         topResize?: boolean;
         bottomResize?: boolean;
         top?: Snippet;
@@ -23,10 +27,10 @@
         height = '100%',
         topHeight = null,
         bottomHeight = null,
-        topMin = null,
-        topMax = null,
-        bottomMin = null,
-        bottomMax = null,
+        topMinHeight = null,
+        topMaxHeight = null,
+        bottomMinHeight = null,
+        bottomMaxHeight = null,
         topResize = false,
         bottomResize = false,
         top,
@@ -43,8 +47,8 @@
         return v ? `${attr}: ${v};` : ''
     }
 
-    let topStyle = $derived(`${generateStyle('min-height', topMin)} ${generateStyle('max-height', topMax)} ${generateStyle('height', topHeight ?? rowHeight)}`);
-    let bottomStyle = $derived(`${generateStyle('min-height', bottomMin)} ${generateStyle('max-height', bottomMax)} ${generateStyle('height', bottomHeight ?? rowHeight)}`);
+    let topStyle = $derived(`${generateStyle('min-height', topMinHeight)} ${generateStyle('max-height', topMaxHeight)} ${generateStyle('height', topHeight ?? rowHeight)}`);
+    let bottomStyle = $derived(`${generateStyle('min-height', bottomMinHeight)} ${generateStyle('max-height', bottomMaxHeight)} ${generateStyle('height', bottomHeight ?? rowHeight)}`);
 </script>
 
 <div class="uniface-rows-layout" style="width: {width}; height: {height}">

package/dist/app_layout/RowsLayout.svelte.d.ts

@@ -4,10 +4,14 @@ interface Props {
     height?: string;
     topHeight?: string | null;
     bottomHeight?: string | null;
-    topMin?: string | null;
-    topMax?: string | null;
-    bottomMin?: string | null;
-    bottomMax?: string | null;
+    /** 上栏最小高度（CSS 长度） */
+    topMinHeight?: string | null;
+    /** 上栏最大高度（CSS 长度） */
+    topMaxHeight?: string | null;
+    /** 下栏最小高度（CSS 长度） */
+    bottomMinHeight?: string | null;
+    /** 下栏最大高度（CSS 长度） */
+    bottomMaxHeight?: string | null;
     topResize?: boolean;
     bottomResize?: boolean;
     top?: Snippet;

package/dist/base-calendar/CalendarBase.svelte

@@ -15,10 +15,6 @@
         cellHeight?: number;
         border?: boolean;
         onchange?: (value: dayjs.Dayjs) => void;
-        /**
-         * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
-         */
-        onselect?: (value: dayjs.Dayjs) => void;
     }
 
     let {
@@ -29,8 +25,7 @@
         cellWidth = 32,
         cellHeight = 32,
         border = false,
-        onchange,
-        onselect
+        onchange
     }: Props = $props();
 
     const dateCtx = DateContext.getInstance();
@@ -60,7 +55,6 @@
 
     const onSelectDate = (d: dayjs.Dayjs) => {
         onchange?.(d);
-        onselect?.(d);
     };
 
     const pickupMonth = () => {
@@ -113,15 +107,15 @@
                 weekTitle={dateCtx.weekTitleAbbr}
                 {cellWidth} {cellHeight} {border}
                 min={minDate} max={maxDate}
-                value={dv} {year} {month} {date}
+                value={dv} {year} {month}
                 onselect={onSelectDate}/>
             {#if showMonths}
                 <MonthPickupPanel bind:value={month} months={dateCtx.months}
                                   onclick={() => { showMonths = false; }}/>
             {:else if showYears}
                 <YearPickupPanel bind:year
-                                 maxYear={maxDate == null ? null : maxDate.year()}
-                                 minYear={minDate == null ? null : minDate.year()}
+                                 max={maxDate == null ? null : maxDate.year()}
+                                 min={minDate == null ? null : minDate.year()}
                                  onclick={() => { showYears = false; }}/>
             {/if}
         </div>

package/dist/base-calendar/CalendarBase.svelte.d.ts

@@ -9,10 +9,6 @@ interface Props {
     cellHeight?: number;
     border?: boolean;
     onchange?: (value: dayjs.Dayjs) => void;
-    /**
-     * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
-     */
-    onselect?: (value: dayjs.Dayjs) => void;
 }
 declare const CalendarBase: import("svelte").Component<Props, {}, "">;
 type CalendarBase = ReturnType<typeof CalendarBase>;

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -2,7 +2,7 @@
     import dateUtils, {type UniDate} from "./dateUtils";
     import DateContext from "./DateContext";
     import dayjs from "dayjs";
-    import type {Snippet} from "svelte";
+    import {onDestroy, type Snippet} from "svelte";
     import type {CalendarDay} from "./CalendarDay";
 
     interface Props {
@@ -12,7 +12,6 @@
         weekBegin?: number;
         year: number;
         month: number;
-        date: number;
         value?: UniDate;
         cellWidth: number;
         cellHeight: number;
@@ -83,11 +82,13 @@
     });
 
     let respondClick = true;
+    let respondTimer: any;
 
     const handleDayClick = (ad: CalendarDay) => () => {
         if (!ad.disabled && respondClick) {
             respondClick = false;
-            setTimeout(() => {
+            clearTimeout(respondTimer);
+            respondTimer = setTimeout(() => {
                 respondClick = true;
             }, 200);
             selected = {year, month, date: ad.d};
@@ -95,6 +96,13 @@
         }
     };
 
+    onDestroy(() => {
+        if (respondTimer != null) {
+            clearTimeout(respondTimer);
+            respondTimer = null;
+        }
+    });
+
     const handleDayKeyDown = (ad: CalendarDay) => (e: KeyboardEvent) => {
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();

package/dist/base-calendar/MonthlyCalendar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type UniDate } from "./dateUtils";
 import dayjs from "dayjs";
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 import type { CalendarDay } from "./CalendarDay";
 interface Props {
     min?: UniDate;
@@ -9,7 +9,6 @@ interface Props {
     weekBegin?: number;
     year: number;
     month: number;
-    date: number;
     value?: UniDate;
     cellWidth: number;
     cellHeight: number;

package/dist/base-calendar/YearPickupPanel.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     interface Props {
         year: number;
-        maxYear?: number | null;
-        minYear?: number | null;
+        max?: number | null;
+        min?: number | null;
         onclick?: (event: MouseEvent) => void;
     }
 
     let {
         year = $bindable<number>(),
-        maxYear = null,
-        minYear = null,
+        max = null,
+        min = null,
         onclick
     }: Props = $props();
 
@@ -17,7 +17,7 @@
     const years = 12;
 
     const isDisabled = (y: number) =>
-        (maxYear != null && y > maxYear) || (minYear != null && y < minYear);
+        (max != null && y > max) || (min != null && y < min);
 
     const handleYearClick = (idx: number) => (e: MouseEvent) => {
         const y = year - offset + idx;

package/dist/base-calendar/YearPickupPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     year: number;
-    maxYear?: number | null;
-    minYear?: number | null;
+    max?: number | null;
+    min?: number | null;
     onclick?: (event: MouseEvent) => void;
 }
 declare const YearPickupPanel: import("svelte").Component<Props, {}, "year">;

package/dist/base-calendar/dateUtils.js

@@ -11,24 +11,28 @@ const today = () => {
  * @param fmt
  */
 const formatDate = (d, fmt = 'YYYY-MM-DD') => {
-    if (d == null) {
+    if (d == null || d === '') {
         return '';
     }
     d = dayjs.isDayjs(d) ? d : dayjs(d);
-    return d.format(fmt);
+    return d.isValid() ? d.format(fmt) : '';
 };
 const formatISODate = (d) => {
-    if (d == null) {
+    if (d == null || d === '') {
         return '';
     }
     d = dayjs.isDayjs(d) ? d : dayjs(d);
-    return d.toISOString();
+    return d.isValid() ? d.toISOString() : '';
 };
 /**
  * 把日期，字符串转换成dayjs格式
  * @param d
  */
 const toDayjs = (d) => {
-    return d == null ? null : dayjs.isDayjs(d) ? d : dayjs(d);
+    if (d == null || d === '') {
+        return null;
+    }
+    const res = dayjs.isDayjs(d) ? d : dayjs(d);
+    return res.isValid() ? res : null;
 };
 export default { today, formatDate, formatISODate, toDayjs };

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -2,19 +2,22 @@
     import Pagination from "../../navigation/pagination";
     import OptionsSelect from "../../form/options_select";
     import i18nRes from "../../i18nRes";
-    import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange} from "../../types";
+    import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange, Size} from "../../types";
 
     interface Props {
         pageCount?: number;
         pageNo?: number;
-        type?: 'plain' | 'round' | 'circle';
+        /** 形状：plain / round / circle */
+        variant?: 'plain' | 'round' | 'circle';
         page$style?: string;
-        big?: boolean;
+        /** 尺寸档位；'large' 对应旧的 big */
+        size?: Size;
         rowsSet?: Array<number>;
         total?: number;
         generateInfo?: GenerateTotalInfo;
         rowCount?: number;
-        rowCountLabel?: string;
+        /** 每页行数选择框旁的文字 */
+        rowCountText?: string;
         align?: 'left' | 'right' | '';
         onPageSizeChange?: OnPageSizeChange;
         onchange?: OnPageChange;
@@ -22,15 +25,15 @@
 
     let {
         pageCount = 0,
-        pageNo = 1,
-        type = 'round',
+        pageNo = $bindable(1),
+        variant = 'round',
         page$style = '',
-        big = false,
+        size = 'medium',
         rowsSet = [25, 50, 100],
         total = 0,
         generateInfo,
         rowCount = $bindable(25),
-        rowCountLabel = i18nRes.dataTable.rowsPerPage(),
+        rowCountText = i18nRes.dataTable.rowsPerPage(),
         align = '',
         onPageSizeChange,
         onchange,
@@ -57,18 +60,18 @@
 <div class="uniface-pagination-panel" class:left={align === 'left'} class:right={align === 'right'}>
     <div class="page-options">
         <OptionsSelect
-            compact={!big || type === 'plain'}
+            compact={size !== 'large' || variant === 'plain'}
             style="width: 80px"
             variant="outlined"
-            mandatory
+            clearable={false}
             options={pagesOptions}
             bind:value={rowCount}
             onchange={handleRowCountChange}/>
     </div>
     <div>
-        <span style="margin-left: 8px">{rowCountLabel}</span></div>
+        <span style="margin-left: 8px">{rowCountText}</span></div>
     <div class="pagination">
-        <Pagination {pageCount} {pageNo} {type} style={page$style} {big} {onchange}/>
+        <Pagination {pageCount} bind:pageNo {variant} style={page$style} {size} {onchange}/>
     </div>
     <div class="pagination-info">
         {@html totalText}

package/dist/composite/pagination_panel/PaginationPanel.svelte.d.ts

@@ -1,19 +1,22 @@
-import type { GenerateTotalInfo, OnPageChange, OnPageSizeChange } from "../../types";
+import type { GenerateTotalInfo, OnPageChange, OnPageSizeChange, Size } from "../../types";
 interface Props {
     pageCount?: number;
     pageNo?: number;
-    type?: 'plain' | 'round' | 'circle';
+    /** 形状：plain / round / circle */
+    variant?: 'plain' | 'round' | 'circle';
     page$style?: string;
-    big?: boolean;
+    /** 尺寸档位；'large' 对应旧的 big */
+    size?: Size;
     rowsSet?: Array<number>;
     total?: number;
     generateInfo?: GenerateTotalInfo;
     rowCount?: number;
-    rowCountLabel?: string;
+    /** 每页行数选择框旁的文字 */
+    rowCountText?: string;
     align?: 'left' | 'right' | '';
     onPageSizeChange?: OnPageSizeChange;
     onchange?: OnPageChange;
 }
-declare const PaginationPanel: import("svelte").Component<Props, {}, "rowCount">;
+declare const PaginationPanel: import("svelte").Component<Props, {}, "pageNo" | "rowCount">;
 type PaginationPanel = ReturnType<typeof PaginationPanel>;
 export default PaginationPanel;

package/dist/composite/pagination_panel/README.md

@@ -1,5 +1,7 @@
 # PaginationPanel
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `rowCountLabel` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A composite pagination bar that combines three controls into one row: a rows-per-page selector, a page navigator, and a total-records info area.
 
 > Svelte 5 component. Callbacks are passed as plain props (`onchange`, `onPageSizeChange`), not as `on:` directives.
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `total` | `number` | `0` | Total record count, shown in the info area |
 | `rowCount` | `number` | `25` | Rows-per-page value. **Bindable** — use `bind:rowCount` to read it back, or pass `onPageSizeChange` to react to changes |
 | `rowsSet` | `Array<number>` | `[25, 50, 100]` | Available options in the rows-per-page selector |
-| `rowCountLabel` | `string` | `'Rows/Page'` | Label shown next to the rows-per-page selector |
+| `rowCountText` | `string` | `'Rows/Page'` | Label shown next to the rows-per-page selector |
 | `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | Visual style of the inner Pagination buttons |
 | `big` | `boolean` | `false` | Larger button size for the inner Pagination |
 | `page$style` | `string` | `''` | Inline CSS applied to the inner Pagination root |

package/dist/composite/pagination_panel/README_CN.md

@@ -1,5 +1,7 @@
 # PaginationPanel 分页面板
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `rowCountLabel` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 一个组合分页条，把"每页行数选择器 + 页码导航 + 总记录数信息"放在同一行。
 
 > Svelte 5 组件。回调以普通 prop 形式传入（`onchange`、`onPageSizeChange`），不再用 `on:` 指令。
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `total` | `number` | `0` | 总记录数，显示在信息区 |
 | `rowCount` | `number` | `25` | 每页行数。**可绑定** —— 用 `bind:rowCount` 读回，或通过 `onPageSizeChange` 监听变化 |
 | `rowsSet` | `Array<number>` | `[25, 50, 100]` | 每页行数选择器的可选项 |
-| `rowCountLabel` | `string` | `'Rows/Page'` | 每页行数选择器旁的标签文字 |
+| `rowCountText` | `string` | `'Rows/Page'` | 每页行数选择器旁的标签文字 |
 | `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | 内部 Pagination 按钮的视觉样式 |
 | `big` | `boolean` | `false` | 内部 Pagination 使用大号按钮 |
 | `page$style` | `string` | `''` | 应用到内部 Pagination 根节点的内联 CSS |