funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/Toast/__toast.vanilla.js

@@ -1,422 +0,0 @@
-
-/**
- * Toast
- * @since 20250417
- * @based https://github.com/xizon/funda-ui/tree/main/packages/Toast
- * @param {*} props 
- */
-
-/**
- * Configuration options for the FU_Toast function
- * @typedef {Object} ToastOptions
- * @property {(string|number|null|undefined)} [actionId='default'] - The identifier of toast, which can be used to determine whether different toast calls
- * @property {(string|boolean)} [title=false] - Specifies an alternate and title for the toast
- * @property {(string|boolean)} [note=false] - A light-colored comment next to the title, which can be information such as time
- * @property {(string)} [message=false] - Specifies the content, or HTML elements to the toast
- * @property {(string)} [hint=false] - Hint's content
- * @property {(boolean)} [hintAutoShow=false] - Whether or not to automatically display additional hints
- * @property {('primary'|'secondary'|'success'|'info'|'warning'|'danger'|'light'|'dark')} [theme='dark'] - Specifies a theme to .toast. All these colors are available as a Sass map of Bootstrap
- * @property {string} [wrapperClassName=''] - The class name of the toast wrapper
- * @property {boolean} [onlyShowOne=false] - Only ever going to show one toast at a time
- * @property {boolean} [lock=false] - You can not close pop-win when it is enabled
- * @property {boolean} [cascading=false] - Whether to use cascading styles
- * @property {string} [schemeBody] - Self-defined class name for body, such as: 'align-items-center text-white bg-primary border-0'
- * @property {string} [schemeHeader] - Self-defined class name for header, such as: 'text-white bg-dark'
- * @property {string} [closeBtnColor] - Set the color of the close button
- * @property {boolean} [closeDisabled=false] - Disable the close button
- * @property {boolean} [reverseDisplay=false] - Allow data to be reversed
- * @property {('bottom-left'|'bottom-center'|'bottom-right'|'top-left'|'top-center'|'top-right'|'vertical-center')} [direction='bottom-center'] - The direction of the toast
- * @property {(boolean|number)} [autoCloseTime=false] - Set an automatic closing time, multiple items will be accumulated in order. Amount of time measured in milliseconds. If false or without this attribute, Auto-Close will be disabled
- * @property {function(HTMLDivElement, string): void} [onClose] - Callback function when toast is closed. Parameters: (currentElement, currentToastId)
- */
-
-/**
- * Creates and displays a toast notification
- * @param {ToastOptions} options - The configuration options for the toast
- * @param {function(string): void} [callback] - Optional callback function that receives the toast ID
- * @returns {{close: function(): void}} Object containing methods to control the toast
- * 
- */
-
-/*
-@Examples:
-
-
-const showCustomToast1 = () => {
-
-    FU_Toast({
-        actionId: 'test-1',
-        title: "Custom Toast 1",
-        message: `<div>Text here (${Math.random()})</div>`,
-        autoCloseTime: 1000,
-        theme: 'warning',
-        schemeHeader: 'bg-transparent text-light',
-        onlyShowOne: true
-    });
-};
-
-
-const showCustomToast2 = () => {
-    FU_Toast({
-        actionId: 'test-2',
-        title: "Custom Toast 2",
-        message: `<div style="color:orange">Text here (${Math.random()})</div>`,
-        theme: "dark",
-        autoCloseTime: 5000,
-        direction: 'bottom-center',
-        schemeBody: 'align-items-center text-white border-0 p-2',
-        closeBtnColor: '#333',
-        hint: 'There are some warnings that need your attention',
-        hintAutoShow: false,
-        onClose: (currentElement, currentToastId) => {
-            console.log(currentElement, currentToastId);
-        }
-    
-    });
-    
-};
-
-const showCustomToast3 = () => {
-    FU_Toast({
-        actionId: 'test-3',
-        note: "11 mins ago", 
-        message: `<div style="color:orange">Text here (${Math.random()})</div>`,
-        autoCloseTime: 5000,
-        cascading: true,
-        direction: 'bottom-right',
-        closeBtnColor: '#333',
-        reverseDisplay: true
-    
-    });
-};
-
-const showCustomToast4 = () => {
-    FU_Toast({
-        actionId: 'test-4',
-        title: "Note",
-        message: `<div>Text here (${Math.random()})</div>`,
-        autoCloseTime: 5000,
-        direction: 'vertical-center',
-        theme: 'light',
-        schemeBody: '',
-        closeBtnColor: '#333'
-    
-    });
-};
-
-
-const showCustomToast5 = () => {
-    FU_Toast({
-        actionId: 'test-5',
-        closeDisabled: true,
-        message: `<div style="color:orange">Text here (${Math.random()})</div>`,
-        autoCloseTime: 5000,
-        direction: 'bottom-left',
-        schemeHeader: 'p-0',
-        schemeBody: 'align-items-center text-white bg-dark border-0'
-    
-    });
-};
-
-
-
-const showCustomToast6 = () => {
-    FU_Toast({
-        actionId: 'test-6',
-        direction: 'top-right',
-        title: "Custom Toast 1",
-        message: `<div>Text here (${Math.random()})</div>`,
-        theme: 'success',
-        schemeHeader: 'bg-transparent text-light',
-        autoCloseTime: 3000,
-    }, () => {
-        console.log('The presentation is complete');
-    });
-};
-
-
-<button onclick="showCustomToast1()">Custom Toast 1 (Only one is shown)</button>
-<button onclick="showCustomToast2()">Custom Toast 2</button>
-<button onclick="showCustomToast3()">Custom Toast 3</button>
-<button onclick="showCustomToast4()">Custom Toast 4</button>
-<button onclick="showCustomToast5()">Custom Toast 5</button>
-<button onclick="showCustomToast6()">Custom Toast 6</button>
-
-*/
-
-const FU_Toast = (function () {
-    'use strict';
-
-    const REFER_LIB = "funda-ui";
-    const REFER_COMPONENT = "toast";
-
-    // Constants
-    const DEFAULT_AUTO_CLOSE_TIME = 3000;
-    const ANIM_SPEED = 300;
-
-    const $$FU_Toast = (options, callback) => {
-        // Default configuration
-        const defaults = {
-            wrapperClassName: '',
-            actionId: 'default',
-            cascading: false,
-            autoCloseTime: DEFAULT_AUTO_CLOSE_TIME,
-            direction: "top-center",
-            schemeBody: "align-items-center text-white border-0 p-2",
-            closeBtnColor: "#fff",
-            reverseDisplay: false,
-            onlyShowOne: false,
-            onClose: (currentElement, currentToastId) => {},
-
-            // single message
-            theme: 'dark',
-            title: false,
-            note: false,
-            hint: false,
-            hintAutoShow: false,
-            message: ''
-        };
-    
-        // Merge options with defaults
-        const config = { ...defaults, ...options };
-    
-        // Generate unique ID for the toast
-        const uniqueID = Math.random().toString(36).substring(2, 9);
-        const toastId = 'toast-' + uniqueID;
-        
-        // Create or get toast wrapper
-        let rootRef = document.getElementById('toasts__wrapper-global-js__' + config.actionId);
-        if (!rootRef) {
-            rootRef = document.createElement('div');
-            rootRef.id = 'toasts__wrapper-global-js__' + config.actionId;
-            
-            // Combine all class names
-            const wrapperClasses = [
-                'toasts__wrapper',
-                `toasts__wrapper--${config.direction}`,
-                config.wrapperClassName
-            ].filter(Boolean);
-    
-            rootRef.className = wrapperClasses.join(' ');
-    
-            // 
-            if (config.cascading) rootRef.classList.add('toasts__wrapper--cascading');
-            if (config.onlyShowOne) rootRef.classList.add('toasts__wrapper--only-one');
-            
-            const toastsContainer = document.createElement('div');
-            toastsContainer.className = 'toasts';
-            rootRef.appendChild(toastsContainer);
-            document.body.appendChild(rootRef);
-        } else {
-            const wrapperClasses = [
-                'toasts__wrapper',
-                `toasts__wrapper--${config.direction}`,
-                config.wrapperClassName,
-                config.cascading ? 'toasts__wrapper--cascading' : '',
-                config.onlyShowOne ? 'toasts__wrapper--only-one' : ''
-            ].filter(Boolean);
-    
-            rootRef.className = wrapperClasses.join(' ');
-        }
-    
-        // Create toast element
-        const toast = document.createElement('div');
-        toast.id = toastId;
-        toast.dataset.toastId = uniqueID;
-        toast.className = `toast-container ${config.onlyOne ? 'only-one' : ''} animate-ready`;
-
-        // Get the number of toasts in the current container as an index
-        const currentToasts = rootRef.querySelectorAll('.toast-container');
-        const index = currentToasts.length;
-        const itemDepth = currentToasts.length + 1;
-        
-
-        // Calculate item style based on cascading option
-        const itemStyle = config.cascading ? 
-            `transform: perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px);
-            z-index: ${itemDepth};` : 
-            `z-index: ${itemDepth}`;
-
-        toast.setAttribute('style', itemStyle);
-        toast.dataset.index = index; 
-
-
-        //
-        const hideTitle = (config.title === '' || config.title === false) && (config.note === '' || config.note === false);
-        
-        // Generate hint content based on auto show option
-        const hintContent = config.hint && config.hint !== '' ? 
-            config.hintAutoShow ? 
-                `<div class="app-io-hint-detail">${config.hint}</div>` :
-                `<a href="#" class="app-io-hint-btn">Details</a><div class="app-io-hint-detail d-none">${config.hint}</div>` :
-            '';
-
-        // Generate close button if not locked or disabled
-        const closeButton = !config.lock && !config.closeDisabled ? 
-            `<button data-close="1" tabindex="-1" type="button" class="btn-close">
-                <svg width="12px" height="12px" viewBox="0 0 16 16">
-                    <path fill="${config.closeBtnColor || '#000000'}" d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fill-rule="evenodd"></path>
-                </svg>
-            </button>` : 
-            '';
-
-        // Generate toast item HTML
-        toast.innerHTML = `
-            <div class="toast fade show ${config.schemeBody || ''} ${config.theme ? `bg-${config.theme}` : ''}" role="alert">
-                ${!hideTitle ? `
-                <div class="toast-header ${config.schemeHeader || ''}">
-                    <strong class="me-auto">${config.title || ''}</strong>
-                    <small class="text-muted">${config.note || ''}</small>
-                    ${closeButton}
-                </div>
-                ` : ''}
-                
-                <div class="toast-body">
-                    ${config.message}
-                    ${hintContent}
-                    ${hideTitle ? `<div class="position-absolute top-0 end-0 me-2 mt-2">${closeButton}</div>` : ''}
-                    
-                    <div class="toast-progress active toast-progress ${config.autoCloseTime === false ? 'd-none' : ''}" role="progressbar">
-                        <div class="progress-bar"></div>
-                    </div>
-                </div>
-            </div>
-        `;
-    
-        // Handle only show one
-        if (config.onlyShowOne) {
-            const existingToasts = rootRef.querySelectorAll('.toast-container');
-            existingToasts.forEach(t => t.remove());
-        }
-    
-        // After adding a new toast, update the index and style of all existing toasts
-        function updateToastIndexes() {
-            const allToasts = rootRef.querySelectorAll('.toast-container');
-            allToasts.forEach((t, idx) => {
-                const depth = allToasts.length - idx;
-                const style = config.cascading ? 
-                    `transform: perspective(100px) translateZ(-${2 * idx}px) translateY(${35 * idx}px);
-                    z-index: ${depth};` : 
-                    `z-index: ${depth}`;
-                
-                t.setAttribute('style', style);
-                t.dataset.index = idx;
-            });
-        }
-
-
-        // Add toast to container
-        const toastsContainer = rootRef.querySelector('.toasts');
-        if (config.reverseDisplay) {
-            toastsContainer.appendChild(toast);
-        } else {
-            toastsContainer.insertBefore(toast, toastsContainer.firstChild);
-        }
-    
-
-        // Update the index of all toasts
-        updateToastIndexes();
-
-        // Animation
-        requestAnimationFrame(() => {
-            setTimeout(() => {
-                toast.classList.add('animate-in');
-            }, 50);
-        });
-    
-        // Progress bar and auto close
-        if (config.autoCloseTime !== false) {
-            const progressBar = toast.querySelector('.toast-progress');
-            let startTime = Date.now();
-            let isPaused = false;
-    
-            const updateProgress = () => {
-                if (!isPaused) {
-                    const elapsed = Date.now() - startTime;
-                    const progress = Math.max(0, 100 - (elapsed / config.autoCloseTime * 100));
-                    progressBar.style.width = `${progress}%`;
-                    progressBar.setAttribute('aria-valuenow', progress);
-    
-                    if (progress > 0) {
-                        requestAnimationFrame(updateProgress);
-                    } else {
-                        closeToast();
-                    }
-                }
-            };
-    
-            toast.addEventListener('mouseenter', () => {
-                isPaused = true;
-            });
-    
-            toast.addEventListener('mouseleave', () => {
-                isPaused = false;
-                startTime = Date.now() - (config.autoCloseTime * (1 - parseInt(progressBar.getAttribute('aria-valuenow')) / 100));
-                requestAnimationFrame(updateProgress);
-            });
-    
-            requestAnimationFrame(updateProgress);
-        }
-    
-        // Close button handler
-        const closeBtn = toast.querySelector('.btn-close');
-        if (closeBtn) {
-            closeBtn.addEventListener('click', () => closeToast());
-        }
-    
-        // Close toast function
-        function closeToast() {
-            toast.classList.add('hide-start');
-            setTimeout(() => {
-                toast.classList.add('hide-end');
-                setTimeout(() => {
-                    toast.remove();
-
-                    // Update the index of all toasts
-                    updateToastIndexes();
-
-                    if (rootRef.querySelector('.toasts').children.length === 0) {
-                        rootRef.remove();
-                    }
-
-                    // Callback
-                    if (typeof config.onClose === 'function') {
-                        config.onClose(toast, toast.dataset.toastId);
-                    }
-                }, ANIM_SPEED);
-            }, ANIM_SPEED);
-        }
-
-        // Initialize hint buttons
-        rootRef.querySelectorAll('.app-io-hint-btn').forEach(btn => {
-            if (!btn.dataset.click) {
-                btn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const detail = e.target.nextElementSibling;
-                    if (detail?.classList.contains('app-io-hint-detail')) {
-                        detail.style.setProperty('display', 'block', 'important');
-                    }
-                    e.target.style.display = 'none';
-                });
-                btn.dataset.click = '1';
-            }
-        });
-
-        // Execute callback with toast ID
-        if (typeof callback === 'function') {
-            callback(toastId);
-        }
-    
-        // Return methods for controlling the toast
-        return {
-            close: closeToast
-        };
-    }
-
-    // Add to global scope
-    if (typeof window !== 'undefined') {
-        window.FU_Toast = $$FU_Toast;
-    }
-
-    return $$FU_Toast;
-})();

package/publish/lib/esm/Toast/index.scss

@@ -1,197 +0,0 @@
-
-/* ======================================================
-   <!-- Toast -->
-/* ====================================================== */
-.toasts__wrapper {
-    --bs-toast-zindex: 1090;
-    --bs-border-radius: 0.375rem;
-
-    --toasts-offset-top: 35px;
-    --toasts-offset-bottom: 15px;
-    --toasts-offset-bothsides: 15px;
-    --toasts-container-gap: 0.5rem;
-    --toasts-container-width: 350px;
-    --toasts-progress-height: 3px;
-    --toasts-progress-bg: rgba(228, 228, 228, 0.6);
-    
-    
-
-    width: var(--toasts-container-width);
-    position: fixed;
-    left: 50%;
-    bottom: 0;
-    z-index: var(--bs-toast-zindex);
-    pointer-events: none;
-    transition: .1s ease-in-out;
-
-    &--bottom-left {
-        left: var(--toasts-offset-bothsides);
-    }
-
-    &--bottom-right {
-        left: auto;
-        right: var(--toasts-offset-bothsides);
-    }
-
-    &--bottom-center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    &--top-left {
-        left: var(--toasts-offset-bothsides);
-        bottom: auto;
-        top: var(--toasts-offset-top);
-    }
-
-    &--top-right {
-        left: auto;
-        right: var(--toasts-offset-bothsides);
-        top: var(--toasts-offset-top);
-    }
-
-    &--top-center {
-        left: 50%;
-        transform: translateX(-50%);
-        top: var(--toasts-offset-top);
-    }
-
-    &--vertical-center {
-        left: 50%;
-        transform: translate(-50%, -50%);
-        top: 50%;
-        margin-top: 5%;
-    }  
-
-    .toasts {
-        position: relative;
-        width: 100%;
-        bottom: var(--toasts-offset-bottom);
-        display: flex;
-        flex-flow: column-reverse nowrap;
-
-
-        &::before {
-            content: '';
-            top: -80px;
-            bottom: 0;
-            left: -8px;
-            right: -8px;
-            position: absolute;
-            background-color: transparent;
-            pointer-events: none;
-        }
-
-    }
-
-    .toast-container {
-        margin-bottom: var(--toasts-container-gap);
-
-        /* Use clip-path instead of opacity to achieve a fade effect, avoiding the problem of transparency overlay */
-        clip-path: inset(0 0 0 0);
-        transform: translateY(0);
-
-        /* Rendering of 3D transformations */
-        backface-visibility: hidden;
-        transform-style: preserve-3d;
-        
-        /* init animation */
-        &.animate-ready {
-            pointer-events: none;
-            clip-path: inset(0 0 100% 0);
-            transform: translateY(10px);
-        }
-
-        /* enter animation */
-        &.animate-in {
-            clip-path: inset(0 0 0 0);
-            transform: translateY(0);
-        }
-
-        /* exit animation */
-        &.hide-start {
-            clip-path: inset(0 0 100% 0);
-            transform: translateY(-10px);
-        }
-
-    }
-
-    /* cascading divs */
-    &.toasts__wrapper--cascading {
-
-        .toast-container {
-            margin-bottom: 0;
-        }
-
-        .toasts {
-            &:hover {
-                .toast-container {
-                    transform: perspective(100px) translateZ(0) !important;
-                }
-            }
-        }
-    }
-
-
-
-    /* progress */
-    .toast-progress {
-        position: absolute;
-        width: 100%;
-        bottom: 0px;
-        left: 0px;
-        height: var(--toasts-progress-height);
-        background: transparent;
-        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
-        overflow: hidden;
-
-        .progress-bar {
-            background: var(--toasts-progress-bg);
-            width: 100%;
-            height: 100%;
-            transition: all .1s;
-        }
-    }
-
-
-
-}
-  
-/* Bootstrap toast here */
-.toast-container {
-    width: 100%;
-    height: auto;
-    position: relative;
-    transition: all .25s;
-    pointer-events: auto;
-
-    [data-close] {
-        background: none;
-    }
-
-    [data-close]:focus {
-        box-shadow: none;
-    }
-
-    [data-close] svg {
-        vertical-align: top;
-
-        path {
-            transition: .3s ease-in-out;
-        }
-    }
-
-    [data-close]:hover svg path {
-        fill: #f00;
-    }
-
-    &.hide-start {
-        opacity: 0;
-    }
-    
-    &.hide-end {
-        display: none;
-    }
-
-
-}

package/publish/lib/esm/Toast/index.tsx

@@ -1,3 +0,0 @@
-export { useToast } from './useToast';
-export { ToastProvider } from './ToastContext';
-export type { ToastOptions } from './types';

package/publish/lib/esm/Toast/types.ts

@@ -1,60 +0,0 @@
-export interface ToastOptions {
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    /** IDENTIFIER */
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    actionId?: string | number | null | undefined;
-
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    /** GENERIC */
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    wrapperClassName?: string;
-    /** Automatically hide multiple items */
-    onlyShowOne?: boolean;
-    /** Allow data to be reversed */
-    reverseDisplay?: boolean; 
-    /** The direction of the toast. */
-    direction?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right' | 'vertical-center';
-    /** Set an automatic closing time, multiple items will be accumulated in order. 
-     * Amount of time measured in milliseconds. If false or without this attribute, Auto-Close will be disabled.
-     */
-    autoCloseTime?: boolean | number;
-    /** You can not close pop-win when it is enabled */
-    lock?: boolean;
-    /** Whether to use cascading styles */
-    cascading?: boolean;
-    /** Self-defined class name for body*/
-    schemeBody?: string;
-    /** Self-defined class name for header */
-    schemeHeader?: string;
-    /** Set the color of the close button */
-    closeBtnColor?: string;
-    /** Disable the close button. */
-    closeDisabled?: boolean;
-    /** -- */
-    onClose?: (e: HTMLDivElement, currentIndex: number, displayedElements: HTMLDivElement[]) => void;
-
-
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    /** ITEM */
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    title?: string;
-    note?: string;
-    theme?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | undefined;
-    message?: React.ReactNode;
-
-
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    /** AUTO */
-    /** +++++++++++++++++++++++++++++++++++++++++++++++++  */
-    id?: string;
-}
-
-
-// Configure the interface globally
-export interface ToastGlobalConfig {
-    defaultWrapperClassName?: string;
-    defaultOnlyShowOne?: boolean;
-    defaultDirection?: ToastOptions['direction'];
-    defaultCascading?: boolean;
-    defaultReverseDisplay?: boolean;
-}