funda-ui 4.7.620 → 4.7.624

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

@@ -0,0 +1,422 @@
+
+/**
+ * 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

@@ -0,0 +1,197 @@
+
+/* ======================================================
+   <!-- 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

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

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

@@ -0,0 +1,60 @@
+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;
+}