@ticatec/uniface-element 0.2.0 → 0.2.1

package/dist/dialog/Dialog.svelte

@@ -1,27 +1,31 @@
 <script lang="ts">
-
     import {fade} from "svelte/transition";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar, {type ButtonAction, type ButtonActions} from "../action-bar";
     import i18n from "@ticatec/i18n";
-    import {onMount} from "svelte";
+    import {getContext, onMount} from "svelte";
+    import {ModalResult, type OnClose} from "./ModalResult";
 
     export let title: string;
-
     export let width: string = 'unset';
     export let height: string = 'unset';
     export let actions: ButtonActions | null = null;
     export let closeConfirm: DialogCloseConfirm | null = null;
     export let content$style: string = '';
-    export let closeHandler: () => void;
+
     export let closeAction: ButtonAction | null = null;
+    export let onClose: OnClose | null = null;
 
     export let dialog$style: string = "";
 
-    export const close = async () => {
-        let confirm = closeConfirm ? await closeConfirm() : true;
+    const closeDialog = getContext<() => void>('closeDialog');
+
+    export const close = async (result: ModalResult) => {
+        let confirm = closeConfirm && result == ModalResult.Cancel ? await closeConfirm() : true;
         if (confirm) {
-            closeHandler?.();
+            console.log('关闭窗口')
+            closeDialog();
+            onClose?.(result);
         }
     }
 
@@ -52,10 +56,32 @@
             label: i18n.getText('uniface.btnClose', 'Close'),
             type: 'secondary'
         };
-        closeAction.handler = close;
+        closeAction.handler = () => close(ModalResult.Cancel);
     })
 
-    $:  dialogActions = actions ? [...actions, closeAction] : [closeAction];
+    const wrapActions = () => {
+        let wa: ButtonActions = [];
+        if (actions) {
+            actions.forEach(action => {
+                if (action == null) {
+                    wa.push(null)
+                } else {
+                    wa.push({
+                        ...action, handler: async (event: MouseEvent) => {
+                            let result = await action.handler?.(event);
+                            if (result) {
+                                await close(ModalResult.Ok)
+                            }
+                        }
+                    })
+                }
+            })
+        }
+        wa.push(closeAction);
+        return wa;
+    }
+
+    $:  dialogActions = actions ? wrapActions() : [closeAction];
 
 
 </script>
@@ -67,7 +93,7 @@
             <div class="title-bar" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp} aria-hidden="true">
                 <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
                 <div style="flex: 0 0 auto; padding-left: 12px">
-                    <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={close}></i>
+                    <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={()=>close(ModalResult.Cancel)}></i>
                 </div>
             </div>
             <div class="dialog-content" style={content$style}>

package/dist/dialog/Dialog.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { DialogCloseConfirm } from "./DialogCloseConfirm";
 import { type ButtonAction, type ButtonActions } from "../action-bar";
+import { ModalResult, type OnClose } from "./ModalResult";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -25,10 +26,10 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     actions?: ButtonActions | null;
     closeConfirm?: DialogCloseConfirm | null;
     content$style?: string;
-    closeHandler: () => void;
     closeAction?: ButtonAction | null;
+    onClose?: OnClose | null;
     dialog$style?: string;
-    close?: () => Promise<void>;
+    close?: (result: ModalResult) => Promise<void>;
 }, {
     default: {};
 }>, {
@@ -36,7 +37,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
 }, {
     default: {};
 }, {
-    close: () => Promise<void>;
+    close: (result: ModalResult) => Promise<void>;
 }, string>;
 type Dialog = InstanceType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/DialogBoard.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
 
-
     import {onDestroy, onMount} from "svelte";
     import {initialize} from "./IDialog";
 
     import {dialogs} from "./Dialogs";
+    import DialogWrapper from "./DialogWrapper.svelte";
 
     export const open = (component: any, params: any) => {
-        let dialog = {id: (new Date().getTime()).toString(36), component, params};
-        params.closeHandler = () => {
-            dialogs.removeDialog(dialog.id);
-        }
+        let dialog = {component, params, id: crypto.randomUUID()};
         dialogs.showDialog(dialog);
     }
 
@@ -28,13 +25,19 @@
         board && board.remove();
     });
 
-
 </script>
 
 <div bind:this={board} class="uniface-dialog-board" style="display: {$dialogs.length > 0 ? 'block' : 'none'}">
     <div style="width: 100%; height: 100%; position: relative">
-        {#each $dialogs as dialog}
-            <svelte:component this={dialog.component} {...dialog.params}></svelte:component>
+        <!--{#each $dialogs as dialog (dialog)}-->
+        <!--    <svelte:component bind:this={dialog.instance} this={dialog.component} {...dialog.params}></svelte:component>-->
+        <!--{/each}-->
+        {#each $dialogs as dialog (dialog.id)}
+            <DialogWrapper
+                    component={dialog.component}
+                    params={dialog.params}
+                    closeDialog={() => dialogs.removeDialog(dialog.id)}
+            />
         {/each}
     </div>
 </div>

package/dist/dialog/DialogWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { setContext } from 'svelte';
+    export let component;
+    export let params;
+    export let closeDialog;
+
+    setContext('closeDialog', closeDialog);
+</script>
+
+<svelte:component this={component} {...params} />

package/dist/dialog/DialogWrapper.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DialogWrapper: $$__sveltets_2_IsomorphicComponent<{
+    component: any;
+    params: any;
+    closeDialog: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogWrapper = InstanceType<typeof DialogWrapper>;
+export default DialogWrapper;

package/dist/dialog/Dialogs.js

@@ -11,7 +11,7 @@ function createDialogStore() {
             });
         },
         removeDialog(id) {
-            update(dialogs => dialogs.filter(dialog => dialog.id !== id));
+            update(dialogs => dialogs.filter(d => d.id !== id));
         },
         clear() {
             set([]);

package/dist/dialog/ModalResult.d.ts

@@ -0,0 +1,5 @@
+export declare enum ModalResult {
+    Cancel = 0,//放弃操作，关闭窗口
+    Ok = 1
+}
+export type OnClose = (result: ModalResult) => void;

package/dist/dialog/ModalResult.js

@@ -0,0 +1,5 @@
+export var ModalResult;
+(function (ModalResult) {
+    ModalResult[ModalResult["Cancel"] = 0] = "Cancel";
+    ModalResult[ModalResult["Ok"] = 1] = "Ok"; //操作完成，正常关闭
+})(ModalResult || (ModalResult = {}));

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 冷却时间，以防止意外的双击并确保正确的异步操作处理。