funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/CascadingSelect/Group.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { combinedCls } from 'funda-utils/dist/cjs/cls';
-
-export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
-
-export type GroupProps = {
-    perColumnHeadersShow?: boolean;
-    level: number;
-    columnTitle: any[];
-    data?: any[any];
-    cleanNodeBtnClassName?: string;
-    cleanNodeBtnContent?: React.ReactNode;
-    selectEv?: React.MouseEventHandler<HTMLElement> | GroupFnType | null;
-};
-
-export default function Group(props: GroupProps) {
-
-    const {
-        perColumnHeadersShow,
-        level,
-        columnTitle,
-        data,
-        cleanNodeBtnClassName,
-        cleanNodeBtnContent,
-        selectEv
-    } = props;
-
-    return (
-        <>
-            {data.map((item: any, index: number) => {
-                if ( item.id.toString().indexOf('$EMPTY_ID_') < 0 ) {
-                    return <div 
-                        key={index} 
-                        data-opt="true"
-                        data-index={index} 
-                        data-id={item.id} 
-                        data-value={JSON.stringify(item)} 
-                        data-level={level}
-                        className={combinedCls(
-                            'casc-menu__opt',
-                            {
-                                'active': item.current
-                            }
-                        )} 
-                        dangerouslySetInnerHTML={{
-                            __html: typeof item.label !== 'undefined' ? item.label : item.name // "item.label" usually uses hierarchical style
-                        }}
-                        onClick={(e) => selectEv?.(e, item, index)} 
-                    ></div>
-                } else {
-                    return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
-                    key={index} 
-                    className="casc-menu__opt-header" 
-                    >
-                        <span dangerouslySetInnerHTML={{
-                        __html: columnTitle[level]
-                    }}></span>
-                        <div className="casc-menu__opt-header__clean">
-                            <a 
-                                tabIndex={-1} 
-                                href="#" 
-                                className={cleanNodeBtnClassName || 'btn btn-link p-0 m-0 text-decoration-none'} 
-                                data-opt="true"
-                                data-opt-header="true"
-                                data-index={index} 
-                                data-id={item.id} 
-                                data-value={JSON.stringify(item)} 
-                                data-level={level}
-                                onClick={(e) => selectEv?.(e, item, index)} 
-                            >
-                                {cleanNodeBtnContent || <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill="inherit" 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>}
-                            </a>
-                        </div>
-                    </h3>
-                }
-                
-            })}
-        </>
-    )
-}
-
-

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

@@ -1,330 +0,0 @@
-/* ======================================================
-    <!-- Cascading Select -->
-/* ====================================================== */
-
-.casc-menu__wrapper {
-
-    --casc-menu-arrow-fill: #a5a5a5;
-    --casc-menu-result-arrow-fill: #a5a5a5;
-
-    --casc-menu-result-font-size: 1rem;
-    --casc-menu-result-padding-x: 0.75rem;
-    --casc-menu-result-padding-y: 0.375rem;
-
-
-    .casc-menu__result {
-        position: absolute;
-        left: auto;
-        z-index: 1;
-        top: 0;
-        padding: var(--casc-menu-result-padding-y) var(--casc-menu-result-padding-x);
-        font-size: var(--casc-menu-result-font-size);
-        font-weight: 400;
-        line-height: 1.5;
-        color: inherit;
-
-        /* text */
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: calc(100% - 20px);
-        
-        /* required */
-        display: flex;
-
-        div {
-            /* required */
-            display: flex;
-        }
-
-        span {
-            padding: 3px;
-        }
-
-        svg {
-            margin: 0 0.3rem;
-
-            path {
-                fill: var(--casc-menu-result-arrow-fill);
-            }
-
-        }
-
-    }
-
-
-    .casc-menu__closemask {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0);
-        user-select: none;
-    }
-
-
-    .casc-menu__trigger {
-        position: relative;
-        z-index: 0;
-    }
-
-
-    .casc-menu__val {
-        position: relative;
-
-
-        &:not(.inputable) {
-            input {
-                cursor: pointer;
-                color: transparent !important;
-
-                &:focus {
-                    color: transparent !important;
-                }
-            }
-        }
-
-        .arrow {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: .5rem;
-
-            svg {
-                .arrow-fill-g {
-                    fill: var(--casc-menu-arrow-fill);
-                }
-            }
-        }
-    }
-
-
-
-}
-
-/*------ List ------*/
-.casc-menu__items-wrapper {
-
-    --casc-menu-scrollbar-color: rgba(0, 0, 0, 0.2);
-    --casc-menu-scrollbar-track: rgba(0, 0, 0, 0);
-    --casc-menu-scrollbar-h: 3px;
-    --casc-menu-scrollbar-w: 3px;
-    --casc-menu-per-col-maxheight: 300px;
-    --casc-menu-opt-font-size: 0.875rem;
-    --casc-menu-opt-padding-x: .4rem;
-    --casc-menu-opt-padding-y: .3rem;
-
-    --casc-menu-opt-header-border-color: rgba(1, 1, 1, .2);
-    --casc-menu-opt-header-text-color: #999;
-    --casc-menu-opt-hover-bg: #f7f7f7;
-    --casc-menu-opt-active-bg: #eeeeee;
-
-
-    --casc-menu-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
-    --casc-menu-items-bg: #fff;
-    --casc-menu-items-color: inherit;
-    --casc-menu-items-border-color: rgba(0, 0, 0, .1);
-    --casc-menu-items-li-border-color: #eee;
-
-    --casc-menu-loader-color: #000000;
-    --casc-menu-clean-btn-color: #b5b5b5;
-    
-    --casc-menu-searchbox-border-color: #ddd;
-    
-
-    box-shadow: var(--casc-menu-items-box-shadow);
-    position: absolute;
-    left: auto;
-    border: 1px solid var(--casc-menu-items-border-color);
-    background: var(--casc-menu-items-bg);
-    padding: 10px;
-    box-sizing: border-box;
-    top: 2.3rem;
-    border-radius: 5px;
-    width: max-content;
-    /* required -> the content will not wrap at all even if it causes overflows*/
-    color: var(--casc-menu-items-color);
-    
-
-    display: none;
-    z-index: 1055;  /* --bs-modal-zindex */
-
-    &.active {
-        display: block !important;
-    }
-
-
-
-    ul,
-    li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .casc-menu__items-loader {
-        position: absolute;
-        pointer-events: none;
-        left: 0;
-        top: 0;
-        margin-left: 5px;
-        z-index: 1;
-        width: 12px;
-        height: 12px;
-        text-align: center;
-        transform-origin: center;
-        transform: translate(2px, 5px) rotate(0);
-        animation: 1s linear infinite casc-menu__spinner;
-
-        svg {
-            vertical-align: top;
-            
-            path {
-                fill: var(--casc-menu-loader-color);
-            }
-        }
-    }
-
-    @keyframes casc-menu__spinner {
-        to {
-            transform: translate(2px, 5px) rotate(-360deg);
-        }
-    }
-
-    .casc-menu__close {
-        svg {
-            opacity: .4;
-        }
-    }
-
-    .casc-menu__close:hover {
-        svg {
-            transition: .2s ease-out;
-            opacity: .7;
-        }
-    }
-
-    /* each item */
-    ul {
-        transition: .2s ease-out;
-        min-width: 8px;
-        min-height: 9px;
-
-        >li {
-            position: relative;
-            cursor: pointer;
-            float: left;
-            padding: 0 10px;
-            margin-right: 15px;
-            border-right: 1px dotted var(--casc-menu-items-li-border-color);
-            transition: .2s ease-out;
-
-            &.hide-col {
-                display: none;
-            }
-
-        }
-
-        >li:last-child {
-            margin-right: 0;
-            border-right: none;
-        }
-    }
-
-    /* Column */
-    .casc-menu__items-col {
-        max-height: var(--casc-menu-per-col-maxheight);
-        overflow-y: auto;
-
-        &::-webkit-scrollbar {
-            width: var(--casc-menu-scrollbar-w);
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: var(--casc-menu-scrollbar-color);
-        }
-
-        &::-webkit-scrollbar-track {
-            background: var(--casc-menu-scrollbar-track);
-        }
-
-    }
-
-
-    /* Searchbox */
-    .casc-menu__items-col-searchbox {
-        input {
-            border: 1px solid var(--casc-menu-searchbox-border-color);
-            border-radius: 0.15rem;
-            width: 100%;
-            background: transparent;
-            font-size: 0.75rem;
-        }
-    }
-    
-    /* Options */
-    .casc-menu__opt {
-        padding: var(--casc-menu-opt-padding-y) var(--casc-menu-opt-padding-x);
-        font-size: var(--casc-menu-opt-font-size);
-        border-radius: 2px;
-
-        &:hover {
-            background: var(--casc-menu-opt-hover-bg);
-        }
-
-        &.active {
-            background: var(--casc-menu-opt-active-bg);
-        }
-    }
-
-    .casc-menu__opt-header {
-        padding: var(--casc-menu-opt-padding-y) var(--casc-menu-opt-padding-x);
-        font-size: var(--casc-menu-opt-font-size);        
-        border-bottom: 1px dotted var(--casc-menu-opt-header-border-color);
-        border-radius: 2px;
-        position: sticky;
-        top: 0;
-        background: var(--casc-menu-items-bg);
-        color: var(--casc-menu-opt-header-text-color);
-        display: flex;
-        align-items: center;
-
-        > span {
-            cursor: default;
-        }
-  
-
-        &:hover {
-            background: var(--casc-menu-opt-hover-bg);
-        }
-
-        &.active {
-            background: var(--casc-menu-opt-active-bg);
-        }
-
-        .casc-menu__opt-header__clean {
-            display: inline-block;
-            margin-left: .2rem;
-            padding: .1rem;
-
-            &:hover {
-                transform: scale(1.1);
-            }
-
-            svg {
-
-                border: 1px var(--casc-menu-clean-btn-color) solid;
-                border-radius: 50%;
-
-                path {
-                    fill: var(--casc-menu-clean-btn-color);
-                }
-            }
-        }
-    }
-
-
-}
-