@ticatec/uniface-element 0.1.54 → 0.1.55

package/dist/card/Card.svelte

@@ -8,8 +8,8 @@
     export let title: string = null as unknown as string;
     export let actions: Array<CardAction> = [];
     export let variant: 'plain' | '3d' = 'plain';
-
     export let iconColor: string | null = null;
+    export let data: any;
 
 </script>
 
@@ -28,7 +28,7 @@
             <slot/>
         </div>
         {#if actions && actions.length > 0}
-            <CommonCardActionBar color={iconColor} {actions}/>
+            <CommonCardActionBar color={iconColor} {actions} {data}/>
         {:else }
             {#if $$slots['action-bar']}
                 <div class="card-action-bar">

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

@@ -23,6 +23,7 @@ declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     actions?: Array<CardAction>;
     variant?: "plain" | "3d";
     iconColor?: string | null;
+    data: any;
 }, {
     'header-bar': {};
     default: {};

package/dist/card/CardAction.d.ts

@@ -1,4 +1,4 @@
-export type ActionCallback = () => void;
+export type ActionCallback = (data: any) => void;
 export default interface CardAction {
     /**
      * 使用icon字体
@@ -8,6 +8,10 @@ export default interface CardAction {
      * 直接嵌入图标
      */
     img?: string;
+    /**
+     * 鼠标停留的提示
+     */
+    hint?: string;
     /**
      *
      */

package/dist/card/CommonCardActionBar.svelte

@@ -4,18 +4,25 @@
 
     export let actions: Array<CardAction>;
     export let color: string | null = null;
+    export let data: any;
 
     let clickEnable = true;
 
     const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
         if (clickEnable && !action.disabled) {
             clickEnable = false;
-            action.callback?.();
+            action.callback?.(data);
             await utils.sleep(0.5);
             clickEnable = true;
         }
     }
 
+    const showHint = (action: CardAction) => (e: MouseEvent) => {
+        if (!action.disabled && action.hint) {
+            window.Hint.show(e.target as Element, action.hint, e.x, e.y);
+        }
+    }
+
     $: fontColor = color ? `color: ${color}` : '';
 
 </script>
@@ -24,9 +31,10 @@
     {#each actions as action}
         <div class:disabled={action.disabled} class="action-item">
             {#if action.icon}
-                <i class={action.icon} aria-hidden="true" on:click={handleActionClick(action)}></i>
+                <i class={action.icon} aria-hidden="true" on:click={handleActionClick(action)} on:mouseenter={showHint(action)}></i>
             {:else if action.img}
-                <img class="card-action-img" alt="" src={action.img} aria-hidden="true" on:click={handleActionClick(action)}/>
+                <img class="card-action-img" alt="" src={action.img} aria-hidden="true" on:click={handleActionClick(action)}
+                     on:mouseenter={showHint(action)}/>
             {/if}
         </div>
     {/each}

package/dist/card/CommonCardActionBar.svelte.d.ts

@@ -15,6 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const CommonCardActionBar: $$__sveltets_2_IsomorphicComponent<{
     actions: Array<CardAction>;
     color?: string | null;
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { type IMessageBox, ModalResult } from "./message-box";
 import type { Toast } from "./toast";
 import type { Indicator } from "./indicator";
 import { DisplayMode } from "./common/DisplayMode.js";
+import type IHint from "./popup-hint/IHint";
 export { DateContext, ModalResult, DisplayMode };
 declare global {
     interface Window {
@@ -11,5 +12,6 @@ declare global {
         Toast: Toast;
         MessageBox: IMessageBox;
         Dialog: IDialog;
+        Hint: IHint;
     }
 }

package/dist/message-box/MessageBoxBoard.svelte

@@ -120,7 +120,7 @@
                     <div class="box-content" style="min-height: 40px">
                         {#if iconType != null}
                             <div class="box-icon {type}">
-                                <i style="font-size: 40px" class={iconType}></i>
+                                <i style="font-size: 56px" class={iconType}></i>
                             </div>
                         {/if}
                         <div style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center">

package/dist/popup-hint/IHint.d.ts

@@ -0,0 +1,6 @@
+export type ShowHint = (element: Element, text: string, x: number, y: number) => void;
+export default interface IHint {
+    show: ShowHint;
+}
+declare const initialize: (showHint: ShowHint) => void;
+export { initialize };

package/dist/popup-hint/IHint.js

@@ -0,0 +1,6 @@
+const initialize = (showHint) => {
+    window.Hint = {
+        show: showHint
+    };
+};
+export { initialize };

package/dist/popup-hint/PopupHint.svelte

@@ -1,32 +1,37 @@
 <script lang="ts">
     import Portal from "svelte-portal";
-    import type {ShowHint} from "../common/ShowHint";
     import utils from "../common/utils";
+    import {onMount} from "svelte";
+    import {initialize, type ShowHint} from "./IHint";
 
     let message = ''; // 提示信息ø
     let targetElement: Element | null = null;
     let hintVisible = false;
     let hintStyle = '';
 
+    onMount(async () => {
+        initialize(show);
+    })
+
     // 显示提示框函数
-    export const show: ShowHint = async (element: Element, text: string, x: number, y: number) => {
+    const show: ShowHint = async (element: Element, text: string, x: number, y: number) => {
         if (targetElement != null) {
-            targetElement.removeEventListener('mouseout', hideHint);
+            targetElement.addEventListener('mouseout', hideHint);
         }
-        targetElement = element;
         message = text;
-        await utils.sleep(1);
-        targetElement.addEventListener('mouseout', hideHint);
         calculatePosition(x, y);
-        hintVisible = true;
+        setTimeout(()=> {
+            if (targetElement == element) {
+                targetElement.addEventListener('mouseout', hideHint);
+                hintVisible = true;
+            }
+        }, 500);
+        targetElement = element;
     };
 
     // 计算提示框的位置
     const calculatePosition = (x: number, y: number) => {
-        if (targetElement) {
-            const rect = targetElement.getBoundingClientRect();
-            hintStyle = `max-width: ${rect.width + 20}px; left: ${x + 10}px; top: ${y}px`;
-        }
+        hintStyle = `max-width: 50%; left: ${x + 6}px; top: ${y + 6}px`;
     }
 
     // 隐藏提示框

package/dist/popup-hint/PopupHint.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { ShowHint } from "../common/ShowHint";
 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 & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -12,12 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PopupHint: $$__sveltets_2_IsomorphicComponent<{
-    show?: ShowHint;
-}, {
+declare const PopupHint: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {
-    show: ShowHint;
-}, string>;
+}, {}, {}, string>;
 type PopupHint = InstanceType<typeof PopupHint>;
 export default PopupHint;

package/dist/ticatec-uniface-web.css

@@ -1636,10 +1636,12 @@
 }
 .uniface-message-board .uniface-message-box .box-icon {
   flex: 0 0 auto;
-  width: 64px;
   box-sizing: border-box;
   padding: 8px 12px;
   margin-right: 24px;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
 }
 .uniface-message-board .uniface-message-box .box-icon.warning {
   color: orange;
@@ -3989,6 +3991,7 @@ root {
 .uniface-popup-hint {
   position: absolute;
   padding: 8px 16px;
+  width: auto;
   box-sizing: border-box;
   background-color: var(--uniface-popup-hint-bg, #FFFFE1);
   color: var(--uniface-popup-hint-color, #374151);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",

package/dist/common/ShowHint.d.ts

@@ -1 +0,0 @@
-export type ShowHint = (src: Element, text: any, x: number, y: number) => void;

package/dist/common/ShowHint.js

@@ -1 +0,0 @@
-export {};