@ticatec/uniface-element 0.2.0 → 0.2.2

package/dist/message-box/IMessageBox.js

@@ -1,6 +1,4 @@
-import i18n from "@ticatec/i18n";
-import langRes from "../i18n_resources/uniface_en_resource";
-;
+import i18nRes from "../i18nRes";
 var ModalResult;
 (function (ModalResult) {
     ModalResult[ModalResult["MR_OK"] = 1] = "MR_OK";
@@ -8,11 +6,11 @@ var ModalResult;
     ModalResult[ModalResult["MR_CLOSE"] = 3] = "MR_CLOSE";
 })(ModalResult || (ModalResult = {}));
 const InfoButtons = [
-    { text: langRes.uniface.btnClose, key: 'uniface.btnClose', type: 'primary', result: ModalResult.MR_OK }
+    { text: i18nRes.common.btnClose, type: 'primary', result: ModalResult.MR_OK }
 ];
 const ConfirmButtons = [
-    { text: langRes.uniface.btnConfirm, key: 'uniface.btnConfirm', type: 'primary', result: ModalResult.MR_OK },
-    { text: langRes.uniface.btnCancel, key: 'uniface.btnCancel', type: 'secondary', result: ModalResult.MR_CANCEL }
+    { text: i18nRes.common.btnConfirm, type: 'primary', result: ModalResult.MR_OK },
+    { text: i18nRes.common.btnCancel, type: 'secondary', result: ModalResult.MR_CANCEL }
 ];
 const initialize = (showInfo, showConfirm) => {
     window.MessageBox = {

package/dist/message-box/MessageBoxBoard.svelte

@@ -5,7 +5,6 @@
     import Button from "../button";
     import {fade} from "svelte/transition";
     import utils from "../common/utils";
-    import i18n from "@ticatec/i18n";
 
     export let appTitle: string = null as unknown as string;
 
@@ -38,8 +37,7 @@
             escapeHTML = _escapeHTML != false;
             if (_buttons) {
                 _buttons.forEach(button => {
-                    console.log(button.key, i18n.getText(button.key, button.text));
-                    button.label = i18n.getText(button.key, button.text)
+                    button.label = button.text
                 });
             }
             buttons = _buttons;

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -79,7 +79,7 @@
         return s.length == 0 ? '' : s.join(delimiter);
     }
 
-    const removeOption = (code: string) => (e: MouseEvent) => {
+    const removeOption = (code: string) => async (e: MouseEvent) => {
         removeSelectCode(code);
         e.stopPropagation();
         e.preventDefault();

package/dist/prompts-text-editor/PromptsTextEditor.svelte

@@ -18,7 +18,7 @@
     export let suffix: string = '';
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let removable: boolean = true;
-    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+    export let onChange: OnChangeHandler<string | null> = null as unknown as OnChangeHandler<string | null>;
     export let words: Array<string>;
     export let menu$height: number = 0;
     export let placeholder: string = '';
@@ -80,7 +80,7 @@
     </CommonEditor>
 
     {#if showPopup}
-        <Popover target={divPanel} autoFit align="right" on:close={()=>{showPopup=false}}>
+        <Popover target={divPanel} autoFit align="right" onClose={()=>{showPopup=false}}>
             <div class="options-popover" style={mh}>
                 {#each words as word}
                     <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleHintClick(word)}

package/dist/prompts-text-editor/PromptsTextEditor.svelte.d.ts

@@ -26,7 +26,7 @@ declare const PromptsTextEditor: $$__sveltets_2_IsomorphicComponent<{
     suffix?: string | undefined;
     displayMode?: DisplayMode | undefined;
     removable?: boolean | undefined;
-    onChange?: OnChangeHandler<number | null> | undefined;
+    onChange?: OnChangeHandler<string | null> | undefined;
     words: Array<string>;
     menu$height?: number | undefined;
     placeholder?: string | undefined;

package/dist/property-editor/PropertyEditor.svelte

@@ -7,7 +7,7 @@
     import PropertyDatePickup from "./component/PropertyDatePickup.svelte";
     import PropertyNumberEditor from "./component/PropertyNumberEditor.svelte";
     import PropertyOptionsSelector from "./component/PropertyOptionsSelector.svelte";
-    import i18n from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
     import PropertyTextWordsEditor from "./component/PropertyPromptsTextEditor.svelte";
 
     export let fields: Array<PropertyField>;
@@ -21,8 +21,8 @@
 
     export let data: any;
 
-    let nameLabel: string = i18n.getText('uniface.propertyEditor.colName', 'Name');
-    let valueLabel: string = i18n.getText('uniface.propertyEditor.colValue', 'Value');
+    let nameLabel: string = i18nRes.propertyEditor.colName;
+    let valueLabel: string = i18nRes.propertyEditor.colValue;
 
     const getEditor = (property: PropertyField) => {
         switch (property.type) {

package/dist/text-editor/PasswordEditor.svelte

@@ -38,7 +38,7 @@
     {/if}
     <div slot="trailing-icon" class="editor-embed-icon">
         {#if (!readonly && !disabled)}
-            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} on:click={toggleType}></i>
+            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} aria-hidden="true" on:click={toggleType}></i>
         {/if}
     </div>
 </CommonEditor>

package/dist/transfer/Transfer.svelte

@@ -4,25 +4,24 @@
 
     import type {FunFilter} from "../list-box";
     import type {TransferData} from "./types";
-    import i18n from "@ticatec/i18n";
-
+    import i18n, {i18nUtils} from "@ticatec/i18n";
+    import i18nRes from "../i18nRes";
 
 
     export let style: string = '';
-    export let sourceList:Array<any>;
+    export let sourceList: Array<any>;
     export let sourceTitle: string;
-    export let targetList:Array<any>;
+    export let targetList: Array<any>;
     export let targetTitle: string;
 
     export let itemRender: any = null;
-    export let filter: FunFilter = null;
-    export let transferData: TransferData = null;
-    export let header$style: string = '';
+    export let filter: FunFilter = null as unknown as FunFilter;
+    export let transferData: TransferData = null as unknown as TransferData;
     export let footer$style: string = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box';
 
 
-    let sourceSelectedList = [];
-    let targetSelectedList = [];
+    let sourceSelectedList: Array<any> = [];
+    let targetSelectedList: Array<any> = [];
 
     const moveToTarget = async () => {
         if (sourceSelectedList.length > 0 && await transferData?.(sourceSelectedList, "right")) {
@@ -45,7 +44,10 @@
     <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
              bind:selectedList={sourceSelectedList} {itemRender}>
         <div slot="footer" style={footer$style}>
-            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: sourceSelectedList.length, total: sourceList.length})}</span>
+            <span>{i18nUtils.formatText(i18nRes.transfer.selectIndicator, {
+                selected: sourceSelectedList.length,
+                total: sourceList.length
+            })}</span>
         </div>
     </ListBox>
     <div class="icon-button-container" style="grid-column: 2/3;">
@@ -57,9 +59,12 @@
         </IconButton>
     </div>
     <ListBox class="list-container" title={targetTitle} style="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
-             bind:selectedList={targetSelectedList} {itemRender} }>
+             bind:selectedList={targetSelectedList} {itemRender}>
         <div slot="footer" style={footer$style}>
-            <span>{i18n.getText('uniface.transfer.selectIndicator', {selected: targetSelectedList.length, total: targetList.length})}</span>
+            <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
+                selected: targetSelectedList.length,
+                total: targetList.length
+            })}</span>
         </div>
     </ListBox>
 </div>

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

@@ -22,7 +22,6 @@ declare const Transfer: $$__sveltets_2_IsomorphicComponent<{
     itemRender?: any;
     filter?: FunFilter;
     transferData?: TransferData;
-    header$style?: string;
     footer$style?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/unit-number-editor/UnitNumberEditor.svelte

@@ -52,7 +52,7 @@
         } else {
             value = uv;
         }
-        onChange?.()
+        onChange?.(value)
     }
 
     const handleUnitClick = (item: any) => (e: MouseEvent) => {
@@ -119,7 +119,7 @@
     </CommonEditor>
 
     {#if showPopup}
-        <Popover target={divPanel} autoFit={false} align="right" on:close={()=>{showPopup=false}}>
+        <Popover target={divPanel} autoFit={false} align="right" onClose={()=>{showPopup=false}}>
             <div class="options-popover" style="min-width: 90px; box-sizing: border-box; text-align: center; {mh}" >
                 {#each units as op}
                     <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">

package/docs/buttons/cn/ActionBar.md

@@ -0,0 +1,459 @@
+# ActionBar 组件
+
+`ActionBar` 组件提供了一个容器，用于组织多个按钮操作，确保一致的间距和布局。
+
+## 基础用法
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  const actions: ButtonActions = [
+    {
+      label: "保存",
+      type: "primary",
+      icon: "icon_google_save",
+      handler: async () => {
+        await saveChanges();
+      }
+    },
+    {
+      label: "取消",
+      type: "secondary",
+      handler: async () => {
+        closeDialog();
+      }
+    }
+  ];
+</script>
+
+<ActionBar buttons={actions} />
+```
+
+## 高级用法
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  let isProcessing = false;
+  
+  const formActions: ButtonActions = [
+    {
+      label: "重置",
+      type: "default",
+      icon: "icon_google_undo",
+      handler: async () => {
+        resetForm();
+      }
+    },
+    null, // 分隔符
+    {
+      label: "预览",
+      type: "secondary",
+      icon: "icon_google_visibility",
+      handler: async () => {
+        showPreview();
+      }
+    },
+    {
+      label: isProcessing ? "处理中..." : "提交",
+      type: "primary",
+      icon: "icon_google_send",
+      disabled: isProcessing,
+      handler: async () => {
+        isProcessing = true;
+        try {
+          await submitForm();
+        } finally {
+          isProcessing = false;
+        }
+      }
+    }
+  ];
+</script>
+
+<ActionBar 
+  buttons={formActions} 
+  gap={12}
+  style="padding: 16px; justify-content: flex-end;"
+/>
+```
+
+## 带自定义内容的 ActionBar
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import Button from '@ticatec/uniface-element/Button';
+</script>
+
+<!-- 当没有提供 buttons 属性时，使用插槽内容 -->
+<ActionBar gap={16} style="padding: 20px;">
+  <Button label="自定义操作 1" type="primary" onClick={action1} />
+  <Button label="自定义操作 2" type="secondary" onClick={action2} />
+  <Button label="自定义操作 3" type="default" onClick={action3} />
+</ActionBar>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `buttons` | `ButtonActions` | `[]` | 按钮配置数组 |
+| `style` | `string` | `''` | 自定义 CSS 样式 |
+| `gap` | `number` | `8` | 按钮间距，单位像素 |
+
+## API 参考
+
+### ButtonAction 接口
+
+```typescript
+interface ButtonAction {
+  /** 按钮标签文本 */
+  label: string;
+  
+  /** 按钮是否禁用 */
+  disabled?: boolean;
+  
+  /** 图标类（如 Google Material Icons） */
+  icon?: string;
+  
+  /** 按钮类型用于样式设置 */
+  type?: ButtonType;
+  
+  /** 点击事件处理器 */
+  handler?: MouseClickHandler;
+}
+
+type ButtonActions = Array<ButtonAction | null>;
+```
+
+### MouseClickHandler 类型
+
+```typescript
+type MouseClickHandler = (event: MouseEvent) => Promise<void>;
+```
+
+## 使用示例
+
+### 对话框操作
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  export let onSave: () => Promise<void>;
+  export let onCancel: () => void;
+  
+  const dialogActions: ButtonActions = [
+    {
+      label: "取消",
+      type: "secondary",
+      handler: async () => {
+        onCancel();
+      }
+    },
+    {
+      label: "保存更改",
+      type: "primary",
+      icon: "icon_google_save",
+      handler: async () => {
+        await onSave();
+      }
+    }
+  ];
+</script>
+
+<div class="dialog-footer">
+  <ActionBar buttons={dialogActions} style="justify-content: flex-end;" />
+</div>
+```
+
+### 表单操作栏
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  let formData = {};
+  let isSubmitting = false;
+  let isDraft = false;
+  
+  const formActions: ButtonActions = [
+    {
+      label: "重置",
+      type: "default",
+      handler: async () => {
+        formData = {};
+      }
+    },
+    null, // 分隔符
+    {
+      label: isDraft ? "保存中..." : "保存草稿",
+      type: "secondary",
+      icon: "icon_google_save",
+      disabled: isDraft,
+      handler: async () => {
+        isDraft = true;
+        try {
+          await saveDraft(formData);
+        } finally {
+          isDraft = false;
+        }
+      }
+    },
+    {
+      label: isSubmitting ? "提交中..." : "提交",
+      type: "primary",
+      icon: "icon_google_send",
+      disabled: isSubmitting,
+      handler: async () => {
+        isSubmitting = true;
+        try {
+          await submitForm(formData);
+        } finally {
+          isSubmitting = false;
+        }
+      }
+    }
+  ];
+</script>
+
+<form>
+  <!-- 表单字段在此 -->
+  
+  <div class="form-footer">
+    <ActionBar 
+      buttons={formActions} 
+      gap={12}
+      style="justify-content: flex-end; margin-top: 24px;"
+    />
+  </div>
+</form>
+```
+
+### 工具栏实现
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  let selectedItems = [];
+  
+  const toolbarActions: ButtonActions = [
+    {
+      label: "全选",
+      icon: "icon_google_check_box",
+      type: "default",
+      handler: async () => {
+        selectAll();
+      }
+    },
+    null, // 分隔符
+    {
+      label: "导出",
+      icon: "icon_google_download",
+      type: "secondary",
+      disabled: selectedItems.length === 0,
+      handler: async () => {
+        await exportItems(selectedItems);
+      }
+    },
+    {
+      label: "删除选中",
+      icon: "icon_google_delete",
+      type: "third",
+      disabled: selectedItems.length === 0,
+      handler: async () => {
+        if (confirm(`删除 ${selectedItems.length} 个项目?`)) {
+          await deleteItems(selectedItems);
+        }
+      }
+    }
+  ];
+</script>
+
+<div class="toolbar">
+  <div class="toolbar-info">
+    已选择 {selectedItems.length} 个项目
+  </div>
+  <ActionBar buttons={toolbarActions} />
+</div>
+
+<style>
+  .toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .toolbar-info {
+    color: #666;
+    font-size: 14px;
+  }
+</style>
+```
+
+### 卡片操作栏
+
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+  import type { ButtonActions } from '@ticatec/uniface-element';
+  
+  export let item: any;
+  export let onEdit: (item: any) => Promise<void>;
+  export let onShare: (item: any) => Promise<void>;
+  export let onDelete: (item: any) => Promise<void>;
+  
+  const cardActions: ButtonActions = [
+    {
+      label: "编辑",
+      icon: "icon_google_edit",
+      type: "primary",
+      handler: async () => {
+        await onEdit(item);
+      }
+    },
+    {
+      label: "分享",
+      icon: "icon_google_share",
+      type: "secondary",
+      handler: async () => {
+        await onShare(item);
+      }
+    },
+    {
+      label: "删除",
+      icon: "icon_google_delete",
+      type: "third",
+      handler: async () => {
+        if (confirm("确定要删除此项目吗？")) {
+          await onDelete(item);
+        }
+      }
+    }
+  ];
+</script>
+
+<div class="card">
+  <div class="card-content">
+    <!-- 卡片内容 -->
+  </div>
+  
+  <div class="card-actions">
+    <ActionBar buttons={cardActions} gap={8} />
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  .card-content {
+    padding: 16px;
+  }
+  
+  .card-actions {
+    padding: 12px 16px;
+    background: #f8f9fa;
+    border-top: 1px solid #e0e0e0;
+  }
+</style>
+```
+
+## 最佳实践
+
+### 使用分隔符组织操作
+
+使用 `null` 值作为分隔符来组织相关操作：
+
+```svelte
+<script lang="ts">
+  const editorActions: ButtonActions = [
+    // 文件操作组
+    { label: "新建", icon: "icon_google_add", handler: newFile },
+    { label: "打开", icon: "icon_google_folder_open", handler: openFile },
+    { label: "保存", icon: "icon_google_save", handler: saveFile },
+    
+    null, // 分隔符
+    
+    // 编辑操作组
+    { label: "撤销", icon: "icon_google_undo", handler: undo },
+    { label: "重做", icon: "icon_google_redo", handler: redo },
+    
+    null, // 分隔符
+    
+    // 主要操作
+    { label: "发布", type: "primary", icon: "icon_google_publish", handler: publish }
+  ];
+</script>
+```
+
+### 使用合适的间距
+
+根据界面密度调整按钮间距：
+
+```svelte
+<!-- 紧凑界面 -->
+<ActionBar buttons={actions} gap={4} />
+
+<!-- 标准界面 -->
+<ActionBar buttons={actions} gap={8} />
+
+<!-- 宽松界面 -->
+<ActionBar buttons={actions} gap={16} />
+```
+
+### 响应式设计
+
+考虑在小屏幕上隐藏或简化操作：
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  let isMobile = false;
+  
+  onMount(() => {
+    const checkMobile = () => {
+      isMobile = window.innerWidth < 768;
+    };
+    
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    
+    return () => window.removeEventListener('resize', checkMobile);
+  });
+  
+  $: responsiveActions = isMobile 
+    ? [
+        { label: "保存", type: "primary", handler: save },
+        { label: "取消", type: "secondary", handler: cancel }
+      ]
+    : [
+        { label: "重置", type: "default", handler: reset },
+        null,
+        { label: "预览", type: "secondary", handler: preview },
+        { label: "保存", type: "primary", handler: save },
+        { label: "取消", type: "secondary", handler: cancel }
+      ];
+</script>
+
+<ActionBar buttons={responsiveActions} />
+```
+
+## 点击节流
+
+ActionBar 中的所有按钮都实现了自动点击节流，具有 500ms 冷却时间，以防止意外的双击并确保正确的异步操作处理。