@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/message-box/IMessageBox.d.ts

@@ -1,23 +0,0 @@
-type ShowFun = (message: string, title?: string, escapeHTML?: boolean) => Promise<void>;
-type ShowConfirmFun = (message: string, title?: string | null, escapeHTML?: boolean, type?: 'info' | 'warning') => Promise<any>;
-export default interface IMessageBox {
-    showInfo: ShowFun;
-    showConfirm: ShowConfirmFun;
-}
-declare enum ModalResult {
-    MR_OK = 1,
-    MR_CANCEL = 2,
-    MR_CLOSE = 3
-}
-declare const InfoButtons: {
-    text: any;
-    type: string;
-    result: ModalResult;
-}[];
-declare const ConfirmButtons: {
-    text: any;
-    type: string;
-    result: ModalResult;
-}[];
-declare const initialize: (showInfo: any, showConfirm: any) => void;
-export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/IMessageBox.js

@@ -1,21 +0,0 @@
-import i18nRes from "../i18nRes";
-var ModalResult;
-(function (ModalResult) {
-    ModalResult[ModalResult["MR_OK"] = 1] = "MR_OK";
-    ModalResult[ModalResult["MR_CANCEL"] = 2] = "MR_CANCEL";
-    ModalResult[ModalResult["MR_CLOSE"] = 3] = "MR_CLOSE";
-})(ModalResult || (ModalResult = {}));
-const InfoButtons = [
-    { text: i18nRes.common.btnClose, type: 'primary', result: ModalResult.MR_OK }
-];
-const ConfirmButtons = [
-    { 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 = {
-        showInfo,
-        showConfirm
-    };
-};
-export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/MessageBoxBoard.svelte

@@ -1,150 +0,0 @@
-<script lang="ts">
-
-    import {onDestroy, onMount} from "svelte";
-    import {initialize, ConfirmButtons, ModalResult} from "./IMessageBox";
-    import Button from "../button";
-    import {fade} from "svelte/transition";
-    import utils from "../common/utils";
-
-    export let appTitle: string = null as unknown as string;
-
-    let board: any;
-    let visible: boolean = false;
-    let resolve: any = null;
-    let title: string;
-    let message: string;
-    let type: string;
-    let escapeHTML: boolean = true;
-    let buttons: Array<any> | null;
-    let iconType: string;
-
-    let show = (_message: string, _title: string, _escapeHTML: boolean = false): Promise<void> => {
-        return showMessageBox(_message, null, _title, null, _escapeHTML)
-    }
-
-    let showConfirm = (_message: string, _title: string, _escapeHTML: boolean = false, type: 'info' | 'warning' = 'info'): Promise<any> => {
-        return showMessageBox(_message, ConfirmButtons, _title, type, _escapeHTML)
-    }
-
-    let showMessageBox = (_message: string, _buttons: Array<any> | null, _title: string, _type: string | null, _escapeHTML: boolean = true): Promise<any> => {
-        if (!visible) {
-            top = 0;
-            left = 0;
-            startMove = false;
-            message = _message;
-            title = _title ?? appTitle;
-            escapeHTML = _escapeHTML != false;
-            if (_buttons) {
-                _buttons.forEach(button => {
-                    button.label = button.text
-                });
-            }
-            buttons = _buttons;
-            iconType = _type == null ? 'icon_google_warning' : _type == 'info' ? 'icon_google_info' : 'icon_google_help';
-            type = _type ?? "info";
-            visible = true;
-            return new Promise<any>(r => {
-                resolve = r
-            });
-        } else {
-            return new Promise<any>((r, reject) => {
-                reject(new Error('No message box slot.'))
-            });
-        }
-    }
-
-    onMount(() => {
-        document.body.appendChild(board);
-        initialize(show, showConfirm);
-        return () => {
-            board && board.remove();
-        };
-    });
-
-    onDestroy(() => {
-        board && board.remove();
-    });
-
-    let top: number = 0;
-    let left: number = 0;
-
-    let startMove: boolean = false;
-
-    const handleMouseDown = (e: MouseEvent) => {
-        startMove = true;
-    }
-
-    const handleMouseMove = (e: MouseEvent) => {
-        if (startMove) {
-            top = top + e.movementY;
-            left = left + e.movementX;
-        }
-    }
-
-    const handleMouseUp = (e: MouseEvent) => {
-        startMove = false;
-    }
-
-    const handleButtonClick = (mr: ModalResult) => (e: MouseEvent) => {
-        if (resolve != null) {
-            resolve(mr);
-            resolve = null;
-            visible = false;
-        }
-    }
-
-    const handleCloseClick = (e: MouseEvent) => {
-        if (resolve != null) {
-            resolve(ModalResult.MR_CANCEL);
-            resolve = null;
-            visible = false;
-        }
-    }
-
-
-</script>
-
-<div bind:this={board} class="uniface-message-board" style="display: {visible ? 'block' : 'none'}">
-    {#if visible}
-        <div style={startMove ? 'cursor: move' : ''} on:mousemove={handleMouseMove} aria-hidden="true">
-            <div class="uniface-message-box" transition:fade={{duration: 500}}>
-                <div style="top: {top}px; left: {left}px">
-                    <div class="title-bar" aria-hidden="true" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp}>
-                        <div>
-                            <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
-                        </div>
-                    </div>
-                    <div class="box-content" style="min-height: 40px">
-                        {#if iconType != null}
-                            <div class="box-icon {type}">
-                                <i style="font-size: 56px" class={iconType}></i>
-                            </div>
-                        {/if}
-                        <div style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center">
-                            {#if !utils.isEmpty(title)}
-                                <div class="message-topic">
-                                    <span>{title}</span>
-                                </div>
-                            {/if}
-                            <div>
-                                {#if escapeHTML}
-                                    <span>{@html message}</span>
-                                {:else }
-                                    <span>{message}</span>
-                                {/if}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="control-bar">
-                        {#if buttons && buttons.length > 0}
-                            {#each buttons as button}
-                                <Button style="margin: 0 4px; width: 90px" type={button.type??''} label={button.label}
-                                        onclick={handleButtonClick(button.result)}/>
-                            {/each}
-                        {/if}
-                    </div>
-                </div>
-            </div>
-        </div>
-    {/if}
-</div>

package/dist/message-box/MessageBoxBoard.svelte.d.ts

@@ -1,20 +0,0 @@
-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 MessageBoxBoard: $$__sveltets_2_IsomorphicComponent<{
-    appTitle?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MessageBoxBoard = InstanceType<typeof MessageBoxBoard>;
-export default MessageBoxBoard;

package/dist/message-box/README.md

@@ -1,398 +0,0 @@
-# MessageBox
-
-A global modal dialog system for displaying informational messages, confirmations, and user interactions with customizable buttons and styling.
-
-## Features
-
-- **Global Access**: Available throughout the application via `window.MessageBox`
-- **Multiple Types**: Support for info, warning, and custom message types
-- **Confirmation Dialogs**: Built-in confirm/cancel functionality
-- **Draggable**: Users can drag the message box around the screen
-- **Custom Buttons**: Configure custom button sets with different actions
-- **HTML Content**: Support for both plain text and HTML content
-- **Promise-based**: Returns promises for easy async handling
-- **Auto-positioning**: Automatically centers on screen with drag support
-- **Internationalization**: Built-in i18n support for button labels
-
-## Installation
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## Setup
-
-First, add the MessageBoxBoard to your root layout or app component:
-
-```svelte
-<script>
-  import MessageBoxBoard from '@ticatec/uniface-element/MessageBox';
-</script>
-
-<!-- Your app content -->
-<main>
-  <!-- Your components -->
-</main>
-
-<!-- MessageBox Board - Global instance -->
-<MessageBoxBoard appTitle="My Application" />
-```
-
-## Basic Usage
-
-Once the MessageBoxBoard is mounted, you can use the global MessageBox instance:
-
-```javascript
-// Show an information message
-await window.MessageBox.showInfo('Operation completed successfully!', 'Success');
-
-// Show a confirmation dialog
-const result = await window.MessageBox.showConfirm(
-  'Are you sure you want to delete this item?', 
-  'Confirm Delete'
-);
-
-if (result === ModalResult.MR_OK) {
-  // User confirmed
-  console.log('User confirmed the action');
-} else {
-  // User cancelled
-  console.log('User cancelled the action');
-}
-```
-
-## API Reference
-
-### MessageBoxBoard Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `appTitle` | `string` | `null` | Default title for message boxes when no title is provided |
-
-### Global Methods
-
-#### `window.MessageBox.showInfo(message, title?, escapeHTML?)`
-
-Shows an informational message with a close button.
-
-**Parameters:**
-- `message` (string): The message to display
-- `title` (string, optional): Dialog title
-- `escapeHTML` (boolean, optional): Whether to escape HTML content (default: true)
-
-**Returns:** `Promise<void>`
-
-#### `window.MessageBox.showConfirm(message, title?, escapeHTML?, type?)`
-
-Shows a confirmation dialog with OK/Cancel buttons.
-
-**Parameters:**
-- `message` (string): The message to display
-- `title` (string, optional): Dialog title
-- `escapeHTML` (boolean, optional): Whether to escape HTML content (default: true)
-- `type` ('info' | 'warning', optional): Icon type to display (default: 'info')
-
-**Returns:** `Promise<ModalResult>`
-
-### ModalResult Enum
-
-```typescript
-enum ModalResult {
-  MR_OK = 1,      // User clicked OK/Confirm
-  MR_CANCEL = 2,  // User clicked Cancel
-  MR_CLOSE = 3    // User clicked Close/X button
-}
-```
-
-## Examples
-
-### Basic Information Message
-
-```javascript
-// Simple info message
-await window.MessageBox.showInfo('Your changes have been saved successfully.');
-
-// Info message with custom title
-await window.MessageBox.showInfo(
-  'The operation completed without any errors.',
-  'Operation Complete'
-);
-```
-
-### Confirmation Dialogs
-
-```javascript
-// Basic confirmation
-const result = await window.MessageBox.showConfirm(
-  'Do you want to save your changes before closing?',
-  'Unsaved Changes'
-);
-
-if (result === ModalResult.MR_OK) {
-  // Save changes
-  saveChanges();
-}
-
-// Warning confirmation
-const result = await window.MessageBox.showConfirm(
-  'This action cannot be undone. Continue?',
-  'Permanent Action',
-  false,
-  'warning'
-);
-```
-
-### HTML Content
-
-```javascript
-// Display HTML content (escapeHTML = false)
-await window.MessageBox.showInfo(
-  '<strong>Important:</strong> Please check your <em>email</em> for verification.',
-  'Email Verification',
-  false
-);
-
-// Safe HTML escaping (default behavior)
-await window.MessageBox.showInfo(
-  'User input: <script>alert("xss")</script>', // Will be escaped
-  'User Data'
-);
-```
-
-### Error Handling
-
-```javascript
-try {
-  const result = await window.MessageBox.showConfirm(
-    'Delete all selected items?',
-    'Bulk Delete'
-  );
-  
-  if (result === ModalResult.MR_OK) {
-    await deleteItems();
-    await window.MessageBox.showInfo('Items deleted successfully.', 'Success');
-  }
-} catch (error) {
-  await window.MessageBox.showInfo(
-    'An error occurred. Please try again.',
-    'Error',
-    false,
-    'warning'
-  );
-}
-```
-
-### Form Validation Example
-
-```svelte
-<script>
-  import { ModalResult } from '@ticatec/uniface-element/MessageBox';
-  
-  async function handleSubmit() {
-    if (!formData.name) {
-      await window.MessageBox.showInfo(
-        'Please enter your name before submitting.',
-        'Required Field'
-      );
-      return;
-    }
-    
-    const result = await window.MessageBox.showConfirm(
-      'Submit the form with the provided information?',
-      'Confirm Submission'
-    );
-    
-    if (result === ModalResult.MR_OK) {
-      try {
-        await submitForm(formData);
-        await window.MessageBox.showInfo(
-          'Form submitted successfully!',
-          'Success'
-        );
-      } catch (error) {
-        await window.MessageBox.showInfo(
-          'Failed to submit form. Please try again.',
-          'Submission Error',
-          false,
-          'warning'
-        );
-      }
-    }
-  }
-</script>
-```
-
-### Async Operations
-
-```javascript
-async function performAsyncOperation() {
-  // Show loading state (could be implemented with a custom dialog)
-  const confirmed = await window.MessageBox.showConfirm(
-    'This operation may take several minutes. Continue?',
-    'Long Running Operation'
-  );
-  
-  if (confirmed === ModalResult.MR_OK) {
-    try {
-      await longRunningTask();
-      await window.MessageBox.showInfo(
-        'Operation completed successfully!',
-        'Success'
-      );
-    } catch (error) {
-      await window.MessageBox.showInfo(
-        `Operation failed: ${error.message}`,
-        'Error',
-        false,
-        'warning'
-      );
-    }
-  }
-}
-```
-
-### Dialog Chain Example
-
-```javascript
-async function handleDataLoss() {
-  const saveFirst = await window.MessageBox.showConfirm(
-    'You have unsaved changes. Would you like to save them first?',
-    'Unsaved Changes'
-  );
-  
-  if (saveFirst === ModalResult.MR_OK) {
-    try {
-      await saveData();
-      await window.MessageBox.showInfo('Data saved successfully.', 'Saved');
-    } catch (error) {
-      const retry = await window.MessageBox.showConfirm(
-        'Failed to save data. Try again?',
-        'Save Error',
-        false,
-        'warning'
-      );
-      
-      if (retry === ModalResult.MR_OK) {
-        return handleDataLoss(); // Recursive retry
-      }
-    }
-  }
-  
-  // Proceed with the original action
-  proceedWithAction();
-}
-```
-
-### Multiple MessageBox Prevention
-
-```javascript
-let messageBoxActive = false;
-
-async function safeShowMessage(message, title) {
-  if (messageBoxActive) {
-    console.warn('MessageBox already active');
-    return;
-  }
-  
-  messageBoxActive = true;
-  try {
-    await window.MessageBox.showInfo(message, title);
-  } finally {
-    messageBoxActive = false;
-  }
-}
-```
-
-## Styling
-
-The MessageBox uses CSS classes that can be customized:
-
-```css
-.uniface-message-board {
-  /* Overlay background */
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
-}
-
-.uniface-message-box {
-  /* Dialog container */
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
-.title-bar {
-  /* Draggable title area */
-  cursor: move;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-}
-
-.box-content {
-  /* Message content area */
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.control-bar {
-  /* Button area */
-  padding: 16px 20px;
-  text-align: right;
-  border-top: 1px solid #eee;
-}
-```
-
-## Best Practices
-
-1. **Use Meaningful Titles**: Provide clear, descriptive titles for better UX
-2. **Keep Messages Concise**: Short, clear messages are more effective
-3. **Handle Promises Properly**: Always await MessageBox calls or handle rejections
-4. **Consider User Context**: Use appropriate message types (info vs warning)
-5. **Avoid Message Spam**: Prevent multiple MessageBoxes from showing simultaneously
-6. **Test HTML Content**: When using HTML, ensure content is safe and properly formatted
-7. **Provide Context**: Include relevant information to help users make decisions
-
-## TypeScript Support
-
-The MessageBox includes full TypeScript definitions:
-
-```typescript
-import { ModalResult, type IMessageBox } from '@ticatec/uniface-element/MessageBox';
-
-declare global {
-  interface Window {
-    MessageBox: IMessageBox;
-  }
-}
-
-// Usage with type safety
-const result: ModalResult = await window.MessageBox.showConfirm(
-  'Delete this item?',
-  'Confirm Delete'
-);
-```
-
-## Accessibility
-
-- Proper ARIA labels and roles
-- Keyboard navigation support (ESC to close)
-- Focus management
-- Screen reader compatibility
-- High contrast mode support
-
-## Related Components
-
-- [Dialog](../dialog/README.md) - For custom modal dialogs
-- [Toast](../toast/README.md) - For non-blocking notifications
-- [Button](../button/README.md) - For dialog actions