funda-ui 4.5.712 → 4.5.766

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

@@ -1,124 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-
-export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
-    onlyOne?: boolean;
-    index: number;
-    title?: string | React.ReactNode | boolean;
-    note?: string | React.ReactNode | boolean;
-    theme?: string | undefined;
-    message?: string | React.ReactNode;
-    depth: number;
-    schemeBody?: string;
-    schemeHeader?: string;
-    closeBtnColor?: string;
-    closeDisabled?: boolean;
-    autoCloseTime?: boolean | number;
-    lock?: boolean;
-    cascading?: boolean;
-    evStart?: (e: any) => void;
-    evPause?: (e: any) => void;
-    evClose?: (e: any, index: number, currentItem: HTMLDivElement) => void;
-    
-};
-
-const Item = forwardRef((props: ItemProps, externalRef: any) => {
-
-    const {
-        onlyOne,
-        index,
-        title,
-        note,
-        theme,
-        message,
-        depth,
-        lock,
-        cascading,
-        schemeBody,
-        schemeHeader,
-        closeBtnColor,
-        closeDisabled,
-        autoCloseTime,
-        evStart,
-        evPause,
-        evClose
-    } = props;
-
-
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    return (
-        <>
-
-            <div
-                ref={containerRef}
-                className={`toast-container ${onlyOne ? 'only-one' : ''}`}
-                data-index={index}
-                style={cascading ? {
-                    transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
-                    zIndex: depth
-                } : {
-                    zIndex: depth
-                }}
-                onMouseEnter={evPause}
-                onMouseLeave={evStart}
-            >
-
-                {/* Bootstrap toast */}
-                <div className={`toast fade show ${schemeBody ? schemeBody : ''} ${theme ? `bg-${theme}` : ''}`} role="alert">
-                    {(title === '' || title === false) && (note === '' || note === false) ? null : <>
-                        <div className={`toast-header ${schemeHeader ? schemeHeader : ''}`}>
-                            <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
-                            <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
-                            {!lock ? <>{!closeDisabled ? <button 
-                                data-close="1" 
-                                data-index={index} 
-                                tabIndex={-1} 
-                                type="button" 
-                                className="btn-close"
-                                onClick={(e: React.MouseEvent) => {
-                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
-                                }}
-                            >
-                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? 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" fillRule="evenodd"></path></svg>
-                            </button> : null}</> : null}
-
-                        </div>
-                    </>}
-
-                    <div className="toast-body">
-                        {message}
-
-                        {(title === '' || title === false) && (note === '' || note === false) ? <>
-                            {!closeDisabled ? <button 
-                                data-close="1" 
-                                data-index={index} 
-                                tabIndex={-1} 
-                                type="button" 
-                                className="btn-close position-absolute top-0 end-0 me-2 mt-2"
-                                onClick={(e: React.MouseEvent) => {
-                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
-                                }}
-                            >
-                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? 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" fillRule="evenodd"></path></svg>
-                            </button> : null}
-                        </> : null}
-
-
-                        {/* PROGRESS */}
-                        <div ref={externalRef} data-progress-index={index} className={`progress active toast-progress ${autoCloseTime === false ? 'd-none' : ''}`} role="progressbar">
-                            <div className="progress-bar"></div>
-                        </div>
-                        {/* /PROGRESS */}
-
-
-                    </div>
-                </div>
-
-            </div>
-
-        </>
-    )
-});
-
-
-export default Item;

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

@@ -1,269 +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: 5px;
-    --toasts-progress-bg: rgba(255,255,255,.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);
-
-
-        &.auto-anim-switch--initfirst {
-            transform: translateY(-20px);
-            opacity: 0;
-        }
-        
-        &.auto-anim-switch--first {
-            animation-name: toast-anim-show-first;
-            animation-duration: .3s;
-            animation-timing-function: linear;
-            animation-delay: 0;
-            animation-iteration-count: 1;
-            animation-fill-mode: forwards;
-        }
-        
-
-        &.auto-anim-switch:not(.only-one) {
-            animation-name: toast-anim-hide;
-            animation-duration: .3s;
-            animation-timing-function: linear;
-            animation-delay: 0;
-            animation-iteration-count: 1;
-            animation-fill-mode: forwards;
-        }
-
-
-        &.only-one.auto-anim-switch {
-            animation-name: toast-anim-hide--onlyone;
-            animation-duration: .3s;
-            animation-timing-function: linear;
-            animation-delay: 0;
-            animation-iteration-count: 1;
-            animation-fill-mode: forwards;
-        }  
-
-        
-    }
-
-    /* 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%;
-            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;
-    }
-
-
-}
-
-@keyframes toast-anim-initfirst {
-    0% {
-        transform: translateY(-20px);
-        opacity: 1;
-    }
-
-    100% {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-}
-
-@keyframes toast-anim-show-first {
-    0% {
-        transform: translateY(-20px);
-        opacity: 0;
-    }
-
-    100% {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes toast-anim-hide {
-    0% {
-        transform: translateY(-100%);
-        opacity: 1;
-    }
-
-    100% {
-        transform: translateY(10px);
-        opacity: 0;
-
-        /* prevent auto-close's item */
-        display: block;
-       
-    }
-}
-
-
-@keyframes toast-anim-hide--onlyone {
-    0% {
-        transform: translateY(-100%);
-        opacity: 1;
-
-
-        /* prevent auto-close's item */
-        display: block;
-    }
-
-    100% {
-        transform: translateY(10px);
-        opacity: 0;
-
-        /* prevent auto-close's item */
-        display: block;
-       
-    }
-}