@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
     import Pagination from "../../navigation/pagination";
     import OptionsSelect from "../../form/options_select";
-    import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange} from "../../types";
+    import i18nRes from "../../i18nRes";
+    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;
@@ -21,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 = 'Rows/Page',
+        rowCountText = i18nRes.dataTable.rowsPerPage(),
         align = '',
         onPageSizeChange,
         onchange,
@@ -40,10 +44,12 @@
     );
     // Rendered via {@html} below: generateInfo is a trusted, caller-supplied
     // renderer (not user input) — same opt-in-HTML boundary as DataColumn#renderHTML.
+    // The default text comes from the i18n resources (dataTable.totalInfo), so it
+    // follows the active language instead of being hardcoded English.
     let totalText = $derived(
         generateInfo
             ? generateInfo(total, pageCount, pageNo, rowCount)
-            : `Total: <b>${total}</b> entities.`
+            : i18nRes.dataTable.totalInfo({total})
     );
 
     const handleRowCountChange = () => {
@@ -54,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 |

package/dist/composite/transfer/Transfer.svelte

@@ -2,10 +2,9 @@
     import ListBox from "../../data_display/list_box";
     import IconButton from "../../general/button/IconButton.svelte";
 
-    import type {FunFilter} from "../../data_display/list_box";
-    import type {TransferData} from "../../types";
+    import type {FilterFn} from "../../data_display/list_box";
+    import type {BeforeTransfer, OnTransfer} from "../../types";
     import i18n, {i18nUtils} from "@ticatec/i18n";
-    import i18nRes from "../../i18nRes";
 
 
     interface Props {
@@ -15,8 +14,15 @@
         targetList?: Array<any>;
         targetTitle?: string;
         itemRender?: any;
-        filter?: FunFilter | null;
-        onchange?: TransferData;
+        filter?: FilterFn | null;
+        /**
+         * 移动前的否决钩子：返回 false 阻止移动。
+         */
+        beforeTransfer?: BeforeTransfer;
+        /**
+         * 移动完成后的通知。
+         */
+        onchange?: OnTransfer;
         onfocus?: (event: FocusEvent) => void;
         onblur?: (event: FocusEvent) => void;
         footer$style?: string;
@@ -30,6 +36,7 @@
         targetTitle,
         itemRender = null,
         filter = null,
+        beforeTransfer,
         onchange,
         onfocus,
         onblur,
@@ -48,26 +55,33 @@
         if (!transferContainer?.contains(event.relatedTarget as Node | null)) onblur?.(event);
     };
 
+    const allowMove = async (list: Array<any>, direction: "left" | "right"): Promise<boolean> =>
+        beforeTransfer == null || (await beforeTransfer(list, direction)) !== false;
+
     const moveToTarget = async () => {
-        if (sourceSelectedList.length > 0 && await onchange?.(sourceSelectedList, "right")) {
-            targetList = [...targetList, ...sourceSelectedList];
-            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
+        if (sourceSelectedList.length > 0 && await allowMove(sourceSelectedList, "right")) {
+            const moved = sourceSelectedList;
+            targetList = [...targetList, ...moved];
+            sourceList = sourceList.filter(item => moved.indexOf(item) === -1);
             sourceSelectedList = [];
+            onchange?.(moved, "right");
         }
     }
 
     const moveToSource = async () => {
-        if (targetSelectedList.length > 0 && await onchange?.(targetSelectedList, "left")) {
-            sourceList = [...sourceList, ...targetSelectedList];
-            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
+        if (targetSelectedList.length > 0 && await allowMove(targetSelectedList, "left")) {
+            const moved = targetSelectedList;
+            sourceList = [...sourceList, ...moved];
+            targetList = targetList.filter(item => moved.indexOf(item) === -1);
             targetSelectedList = [];
+            onchange?.(moved, "left");
         }
     }
 </script>
 
-<div bind:this={transferContainer} class="uniface-transfer-container" onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
-    <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
-             bind:selectedList={sourceSelectedList} {itemRender}>
+<div bind:this={transferContainer} class="uniface-transfer-container" {style} onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
+    <ListBox class="list-container" title={sourceTitle} {filter} style="grid-column: 1/2" list={sourceList} selectMode="multiple"
+             bind:selectedItems={sourceSelectedList} {itemRender}>
         {#snippet footer()}
             <div style={footer$style}>
                 <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
@@ -85,8 +99,8 @@
             <i class="icon_google_navigate_next"></i>
         </IconButton>
     </div>
-    <ListBox class="list-container" title={targetTitle} style="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
-             bind:selectedList={targetSelectedList} {itemRender}>
+    <ListBox class="list-container" title={targetTitle} style="grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
+             bind:selectedItems={targetSelectedList} {itemRender}>
         {#snippet footer()}
             <div style={footer$style}>
                 <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {

package/dist/composite/transfer/Transfer.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { FunFilter } from "../../data_display/list_box";
-import type { TransferData } from "../../types";
+import type { FilterFn } from "../../data_display/list_box";
+import type { BeforeTransfer, OnTransfer } from "../../types";
 interface Props {
     style?: string;
     sourceList?: Array<any>;
@@ -7,8 +7,15 @@ interface Props {
     targetList?: Array<any>;
     targetTitle?: string;
     itemRender?: any;
-    filter?: FunFilter | null;
-    onchange?: TransferData;
+    filter?: FilterFn | null;
+    /**
+     * 移动前的否决钩子：返回 false 阻止移动。
+     */
+    beforeTransfer?: BeforeTransfer;
+    /**
+     * 移动完成后的通知。
+     */
+    onchange?: OnTransfer;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     footer$style?: string;

package/dist/composite/transfer/index.d.ts

@@ -1,4 +1,4 @@
 import Transfer from "./Transfer.svelte";
-import type { TransferData } from "../../types";
+import type { BeforeTransfer, OnTransfer } from "../../types";
 export default Transfer;
-export type { TransferData };
+export type { BeforeTransfer, OnTransfer };

package/dist/data_display/accordion/Accordion.svelte

@@ -6,7 +6,8 @@
     interface Props {
         style?: string;
         compact?: boolean;
-        accordions?: AccordionItem[];
+        /** 折叠项列表 */
+        items?: AccordionItem[];
         exclusive?: boolean;
         theme?: string;
     }
@@ -14,18 +15,18 @@
     let {
         style = '',
         compact = false,
-        accordions = [],
+        items = [],
         exclusive = false,
-        theme = 'theme-light'
+        theme
     }: Props = $props();
 
     let openSet = $state(new Set<AccordionItem>());
     let activeItem = $state<AccordionItem | null>(null);
 
     onMount(() => {
-        if (exclusive && activeItem == null && accordions.length > 0) {
-            activeItem = accordions[0];
-            openSet.add(accordions[0]);
+        if (exclusive && activeItem == null && items.length > 0) {
+            activeItem = items[0];
+            openSet.add(items[0]);
         }
     });
 
@@ -47,11 +48,11 @@
     };
 </script>
 
-<div class="uniface-accordion-panel {theme}" class:compact {style}>
-    {#each accordions as accordion}
+<div class="uniface-accordion-panel" class:compact {style} data-theme={theme}>
+    {#each items as accordion}
         <AccordionItemView
             title={accordion.title}
-            isOpen={openSet.has(accordion)}
+            expanded={openSet.has(accordion)}
             {exclusive}
             {compact}
             onclick={handleAccordionClick(accordion)}

package/dist/data_display/accordion/Accordion.svelte.d.ts

@@ -2,7 +2,8 @@ import type AccordionItem from './AccordionItem';
 interface Props {
     style?: string;
     compact?: boolean;
-    accordions?: AccordionItem[];
+    /** 折叠项列表 */
+    items?: AccordionItem[];
     exclusive?: boolean;
     theme?: string;
 }

package/dist/data_display/accordion/AccordionItemView.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         title: string;
-        isOpen?: boolean;
+        expanded?: boolean;
         onclick?: (event: MouseEvent) => void;
         header?: Snippet;
         exclusive?: boolean;
@@ -13,7 +13,7 @@
 
     let {
         title = '',
-        isOpen = false,
+        expanded = false,
         onclick = undefined,
         header = undefined,
         exclusive = false,
@@ -43,7 +43,7 @@
         class:compact
         role="button"
         tabindex="0"
-        aria-expanded={isOpen}
+        aria-expanded={expanded}
         onclick={handleClick}
         onkeydown={handleKeyDown}
     >
@@ -55,16 +55,16 @@
             </div>
             <div class="icon">
                 {#if exclusive}
-                    {#if isOpen}
+                    {#if expanded}
                         <i class="icon_google_folder_open"></i>
                     {/if}
                 {:else}
-                    <i class={isOpen ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
+                    <i class={expanded ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
                 {/if}
             </div>
         {/if}
     </div>
-    {#if isOpen && children}
+    {#if expanded && children}
         <div class="content" class:compact>
             {@render children()}
         </div>

package/dist/data_display/accordion/AccordionItemView.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     title: string;
-    isOpen?: boolean;
+    expanded?: boolean;
     onclick?: (event: MouseEvent) => void;
     header?: Snippet;
     exclusive?: boolean;

package/dist/data_display/accordion/README.md

@@ -1,5 +1,7 @@
 # Accordion
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `accordions` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A vertically stacked set of expandable panels. Each panel has a clickable header and a collapsible content area.
 
 > Svelte 5 component. Content is passed as **Snippets** (not JSX, not Svelte 4 slots).
@@ -23,7 +25,7 @@ npm install @ticatec/uniface-element
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `accordions` | `AccordionItem[]` | `[]` | Items to render |
+| `items` | `AccordionItem[]` | `[]` | Items to render |
 | `exclusive` | `boolean` | `false` | When `true`, only one panel open at a time. The first item auto-opens on mount. Icon switches to folder/folder-open style |
 | `compact` | `boolean` | `false` | Reduces header and content padding |
 | `style` | `string` | `''` | Inline CSS on the root container |
@@ -61,7 +63,7 @@ interface AccordionItem {
   <div>Content for section 2</div>
 {/snippet}
 
-<Accordion accordions={items} />
+<Accordion items={items} />
 ```
 
 > The snippet must be defined at the **top level of the module script** (or passed via a variable) — not inlined inside the array literal. Inline arrow functions returning JSX like `() => <div>...</div>` are not valid Svelte.
@@ -69,7 +71,7 @@ interface AccordionItem {
 ### Exclusive mode — single open panel
 
 ```svelte
-<Accordion accordions={items} exclusive />
+<Accordion items={items} exclusive />
 ```
 
 In `exclusive` mode:
@@ -80,7 +82,7 @@ In `exclusive` mode:
 ### Compact
 
 ```svelte
-<Accordion accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
 ```
 
 ## Styling

package/dist/data_display/accordion/README_CN.md

@@ -1,5 +1,7 @@
 # Accordion 手风琴
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `accordions` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 一组垂直堆叠、可展开/折叠的面板。每个面板有可点击的标题和可折叠的内容区。
 
 > Svelte 5 组件。内容通过 **Snippet** 传入（不是 JSX，也不是 Svelte 4 slot）。
@@ -23,7 +25,7 @@ npm install @ticatec/uniface-element
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `accordions` | `AccordionItem[]` | `[]` | 要渲染的项 |
+| `items` | `AccordionItem[]` | `[]` | 要渲染的项 |
 | `exclusive` | `boolean` | `false` | 为 `true` 时同一时刻只能展开一个面板，第一项在挂载时自动展开，图标改为 文件夹/打开文件夹 样式 |
 | `compact` | `boolean` | `false` | 缩小标题和内容的内边距 |
 | `style` | `string` | `''` | 根容器的内联 CSS |
@@ -61,7 +63,7 @@ interface AccordionItem {
   <div>第二部分的内容</div>
 {/snippet}
 
-<Accordion accordions={items} />
+<Accordion items={items} />
 ```
 
 > snippet 必须定义在 **模块顶层**（或通过变量传入），不能在数组字面量里直接写 `() => <div>...</div>` —— 那不是合法的 Svelte 语法。
@@ -69,7 +71,7 @@ interface AccordionItem {
 ### exclusive 模式 —— 只展开一个
 
 ```svelte
-<Accordion accordions={items} exclusive />
+<Accordion items={items} exclusive />
 ```
 
 `exclusive` 模式下：
@@ -80,7 +82,7 @@ interface AccordionItem {
 ### 紧凑
 
 ```svelte
-<Accordion accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
 ```
 
 ## 样式定制

package/dist/data_display/card/Card.svelte

@@ -11,14 +11,16 @@
         actions?: Array<CardAction>;
         variant?: 'plain' | '3d';
         data?: any;
-        headerBar?: Snippet;
+        header?: Snippet;
         children?: Snippet;
         theme?: string;
         /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
-        actionsAlign?: CardActionsAlign;
+        /** 动作栏对齐方式 */
+        actions$align?: CardActionsAlign;
         /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
         actionsGap?: string;
-        contentStyle?: string;
+        /** 内容区内联样式 */
+        content$style?: string;
     }
 
     let {
@@ -27,12 +29,12 @@
         actions = [],
         variant = 'plain',
         data = null,
-        headerBar,
+        header,
         children,
-        theme = "",
-        actionsAlign = 'distribute',
+        theme,
+        actions$align = 'distribute',
         actionsGap,
-        contentStyle = ''
+        content$style = '',
     }: Props = $props();
 </script>
 
@@ -42,18 +44,18 @@
             <div class="card-header">
                 <CardHeader {title}/>
             </div>
-        {:else if headerBar}
+        {:else if header}
             <div class="card-header">
-                {@render headerBar()}
+                {@render header()}
             </div>
         {/if}
-        <div class="card-content" style={contentStyle}>
+        <div class="card-content" style={content$style}>
             {#if children}
                 {@render children()}
             {/if}
         </div>
         {#if actions && actions.length > 0}
-            <CommonCardActionBar {actions} {data} align={actionsAlign} gap={actionsGap}/>
+            <CommonCardActionBar {actions} {data} align={actions$align} gap={actionsGap}/>
         {/if}
     </div>
 </div>

package/dist/data_display/card/Card.svelte.d.ts

@@ -7,14 +7,16 @@ interface Props {
     actions?: Array<CardAction>;
     variant?: 'plain' | '3d';
     data?: any;
-    headerBar?: Snippet;
+    header?: Snippet;
     children?: Snippet;
     theme?: string;
     /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
-    actionsAlign?: CardActionsAlign;
+    /** 动作栏对齐方式 */
+    actions$align?: CardActionsAlign;
     /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
     actionsGap?: string;
-    contentStyle?: string;
+    /** 内容区内联样式 */
+    content$style?: string;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/data_display/card/CardAction.d.ts

@@ -1,5 +1,10 @@
-export type ActionCallback = (data: any) => void;
+import type { ActionHandler } from "../../types";
+export type { ActionHandler };
 export default interface CardAction {
+    /**
+     * 显示文字（图标动作可省略，用 tooltip 说明）
+     */
+    label?: string;
     /**
      * 使用icon字体
      */
@@ -19,7 +24,7 @@ export default interface CardAction {
     /**
      *
      */
-    callback: ActionCallback;
+    handler: ActionHandler;
 }
 /**
  * 操作栏图标的排布方式：

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -18,7 +18,7 @@
         actions,
         color = null,
         data,
-        theme = "",
+        theme,
         align = 'distribute',
         gap
     }: Props = $props();
@@ -30,7 +30,7 @@
     const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
         if (clickEnable && !action.disabled) {
             clickEnable = false;
-            action.callback?.(data);
+            action.handler?.(data);
             await utils.sleep(0.5);
             clickEnable = true;
         }