funda-ui 4.5.712 → 4.5.713

package/publish/lib/esm/Table/utils/hooks/useTableSort.tsx

@@ -1,143 +0,0 @@
-/**
- * Handles the event of sortable table
- * 
- * @usage:
-
-const App = () => {
-
-    const sortableTable = true;
-    const rootRef = useRef<any>(null);
-
-    useTableSort({
-        enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
-    }, [rootRef]);
-
-    return (
-        <div 
-            ref={rootRef} 
-        >Test</div>
-    );
-};
-
- */
-import { useEffect, useState } from 'react';
-
-import { getTbody, allRows, sortDataByIndex, initOrderProps, initRowColProps } from '../func';
-
-export interface UseTableSortProps {
-    enabled: boolean;
-    data?: any[];
-    spyElement?: any;
-    fieldType: 'text' | 'number' | 'date';
-    onColSort?: (fetchData: any) => void;
-    onClick?: (e: any) => void;
-}
-
-function useTableSort({
-    enabled,
-    data,
-    spyElement,
-    fieldType,
-    onColSort,
-    onClick
-}: UseTableSortProps, deps: any[]) {
-
-   
-    const [inverse, setInverse] = useState<boolean>(false);
-
-    function handleSortList(e: any) {
-        if (typeof enabled === 'undefined' || enabled === false) return;
-
-        const tbodyRef: any = getTbody(spyElement);
-        if (tbodyRef === null) return;
-
-        const el = e.currentTarget.closest('[data-table-col]');
-        if (el === null) return;
-
-
-        const filterType = fieldType || 'text';
-        const curIndex = el.dataset.tableCol;
-        const targetComparator = [].slice.call(tbodyRef.querySelectorAll(`[data-table-col="${curIndex}"]`));
-
-
-        //sort of HTML elements
-        const sortBy = function (a: any, b: any) {
-
-            let txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
-                txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
-
-            //type of number
-            if (filterType == 'number') {
-                txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-                txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
-            }
-
-            //type of date
-            if (filterType == 'date') {
-                txt1 = new Date(txt1);
-                txt2 = new Date(txt2);
-            }
-
-            //add filter class
-            allRows(spyElement).forEach((node: any) => {
-                node.classList.add('newsort');
-            });
-
-            setInverse(!inverse);
-
-            return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
-        }
-
-        targetComparator.sort(sortBy);
-
-        //console.log( 'targetComparator:', targetComparator );
-        //console.log( 'inverse:', inverse );
-
-        if (inverse) targetComparator.reverse();
-
-        allRows(spyElement).forEach((node: any) => {
-            node.remove();
-        });
-
-        for (let i = 0; i < targetComparator.length; i++) {
-            const curRow = (targetComparator[i] as any).parentNode;
-            tbodyRef.appendChild(curRow);
-        }
-
-        // get latest order
-        const sortData: number[] = [];
-        allRows(spyElement).forEach((node: any) => {
-            sortData.push(Number(node.dataset.order));
-        });
-        
-        // callback
-        onColSort?.(sortDataByIndex(sortData as never, data as never));
-        onClick?.(e);
-
-    }
-
-    useEffect(() => {
-        if (enabled) {
-            if (Array.isArray(data)) {
-                data.forEach((item: any, i: number) => {
-                    item.order = i;
-                });
-
-
-                // Initialize custom props of table elements
-                initOrderProps(spyElement);
-                initRowColProps(spyElement);
-   
-            }
-        }
-    }, [data, enabled, spyElement, ...deps]);
-
-    return {
-        handleSortList
-    }
-}
-
-
-export default useTableSort;
-

package/publish/lib/esm/Tabs/TabList.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-
-export interface TabListProps extends React.ComponentPropsWithoutRef<any> {
-	defaultActive?: string | boolean | undefined;
-    expandedActiveClassNameForNav?: string;
-	targetId?: string;
-	index?: number;
-	/** Handling events for collapsing item */
-	switchEv?: React.MouseEventHandler<HTMLElement>;
-	/** -- */
-	children: React.ReactNode;
-};
-
-
-const TabList = (props: TabListProps) => {
-
-    const { 
-        defaultActive,
-        expandedActiveClassNameForNav,
-        targetId,
-        index,
-        switchEv,
-        children
-    } = props;
-    
-
-    const _expandClassName =  typeof(expandedActiveClassNameForNav) !== 'undefined' ? expandedActiveClassNameForNav : '';
-    const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ` active ${_expandClassName}` : ` ${_expandClassName}`;
-
-    return (
-        <>
-
-            <li 
-                data-index={index} 
-                data-tablist-index={index} 
-                className={`position-relative nav-item ${activedClassName}`} 
-                role="presentation" 
-                onClick={switchEv} 
-                data-tab={targetId}
-            >
-                {children}
-            </li>
-
-        </>
-    )
-}
-
-
-export default TabList;

package/publish/lib/esm/Tabs/TabPanel.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-
-export interface TabPanelProps extends React.ComponentPropsWithoutRef<"div"> {
-	defaultActive?: string | boolean | undefined;
-    expandedActiveClassNameForPanel?: string;
-	tabpanelClass?: string;
-	targetId?: string;
-    index?: number;
-};
-
-const TabPanel = (props: TabPanelProps) => {
-
-    const { 
-        defaultActive,
-        expandedActiveClassNameForPanel,
-        tabpanelClass,
-        targetId,
-        index,
-        ...attributes
-    } = props;
-    
-
-    const _expandClassName =  typeof(expandedActiveClassNameForPanel) !== 'undefined' ? expandedActiveClassNameForPanel : '';
-    const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ` active ${_expandClassName}` : ` ${_expandClassName}`;
-    const activedStyles = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? {} : {height: '0', overflow: 'hidden'};
-
-    return (
-        <>
-
-            <div 
-                data-index={index} 
-                data-tabpanel-index={index} 
-                role="tabpanel" id={targetId} 
-                className={ tabpanelClass ? `tab-pane d-block ${tabpanelClass} ${activedClassName}` : `tab-pane d-block ${activedClassName}`}
-                style={activedStyles}
-                {...attributes}
-            ></div>
-
-        </>
-    )
-}
-
-export default TabPanel;

package/publish/lib/esm/Tabs/Tabs.tsx

@@ -1,282 +0,0 @@
-import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-//
-import TabList from './TabList';
-import TabPanel from './TabPanel';
-
-
-export type TabsProps = {
-    wrapperClassName?: string;
-    navClassName?: string;
-    panelClassName?: string;
-    expandedActiveClassNameForNav?: string;
-    expandedActiveClassNameForPanel?: string;
-    animTransitionDuration?: number;
-    /** -- */
-    style?: React.CSSProperties;
-    onChange?: (nav: HTMLElement, targetId: string, index: number, persistentIndex: number) => void;
-    onLoad?: (func: Function) => void;
-	children: React.ReactNode | React.ReactNode[];
-    
-};
-
-const Tabs = forwardRef((props: TabsProps, externalRef: any) => {
-
-    const {
-        wrapperClassName,
-        navClassName,
-        panelClassName,
-        expandedActiveClassNameForNav,
-        expandedActiveClassNameForPanel,
-        animTransitionDuration,
-        style,
-        onChange,
-        onLoad,
-        children // the contents of the TabList and TabPanel in a loop
-    } = props;
-
-    const uniqueID = useComId();
-    const rootRef = useRef<any>(null);
-    const speed = animTransitionDuration ? animTransitionDuration : 150;
-
-
-    // exposes the following methods
-    useImperativeHandle(
-        externalRef,
-        () => ({
-            go: (index: number) => {
-                const reactDomWrapperEl: any = rootRef.current;
-                const $li = [].slice.call(reactDomWrapperEl.querySelectorAll('ul > li'));
-                itemInit($li[index], false);
-            }
-        }),
-        [externalRef],
-    );
-
-
-    
-    const elDisplay = (type: string, node: HTMLElement) => {
-        if (node === null) return;
-
-        // !!!Special note:
-        // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
-        // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
-        if (type === 'hide') {
-            node.style.setProperty('height', '0', 'important');
-            node.style.setProperty('overflow', 'hidden', 'important');
-        } else {
-            node.style.removeProperty('height');
-            node.style.removeProperty('overflow');
-        }
-
-    };
-
-
-    function handleClickItem(e: any) {
-        e.preventDefault();
-        
-        const el = e.currentTarget;
-        const currentIndex = Array.prototype.slice.call(el.parentElement.children).indexOf(el);
-
-        itemInit(el, false);
-
-        //
-        if (typeof (onChange) === 'function') {
-            onChange(el, el.dataset.tab, currentIndex, Number(el.dataset.index));
-
-        }
-    }
-
-
-    function itemInit(targetEl: any, itemsInit: boolean) {
-
-        const reactDomWrapperEl: any = rootRef.current;
-        const $li = targetEl.parentElement.children;
-        let $allContent: HTMLElement[] = [];
-        const tabID = targetEl.dataset.tab;
-        const _classNameNav = expandedActiveClassNameForNav ? expandedActiveClassNameForNav : '';
-        const _classNamePanel = expandedActiveClassNameForPanel ? expandedActiveClassNameForPanel : '';
-
-
-        const runExClassName = (node: HTMLElement, str: string, type: string) => {
-            if (str && node !== null) {
-                const _c = str.replace(/\s+(\W)/g, ' ').split(' ');
-                _c.forEach( (classname: any) => {
-                    if ( type === 'remove' ) node.classList.remove(classname);
-                    if ( type === 'add' ) node.classList.add(classname);
-                    
-                });
-            }
-        };
-
-        //get all panels of this wrapper
-        Array.prototype.forEach.call($li, (node) => {
-            const panelId = node.dataset.tab;
-            $allContent.push(reactDomWrapperEl.querySelector('#' + panelId) as never);
-        });
-
-    
-        //
-        Array.prototype.forEach.call($li, (node) => {
-            if (node !== null) {
-                node.classList.remove('active');
-                node.firstChild.classList.remove('active');
-
-                runExClassName(node, _classNameNav, 'remove');
-                runExClassName(node.firstChild, _classNameNav, 'remove');
-            }
-        });
-
-        
-
-        $allContent.forEach((node) => {
-            if (node !== null) {
-                // 
-                elDisplay('hide', node);
-
-                setTimeout(() => {
-                    node.classList.remove('active');
-                    runExClassName(node, _classNamePanel, 'remove');
-                }, speed);
-            }
-        });
-
-        // currently active
-        targetEl.classList.add('active');
-        targetEl.firstChild.classList.add('active');
-
-        runExClassName(targetEl, _classNameNav, 'add');
-        runExClassName(targetEl.firstChild, _classNameNav, 'add');
-
-        if (tabID !== undefined) {
-            setTimeout(() => {
-                const _panel = document.getElementById(tabID) as HTMLElement;
-                if ( _panel !== null ) {
-
-                    elDisplay('show', _panel);
-
-                    _panel.classList.add('active');
-                    runExClassName(_panel, _classNamePanel, 'add');
-                }
-            }, speed);  
-        }
-
-    }
-
-
-    useEffect(() => {
-
-        // Initialize tabs
-        //--------------
-        const reactDomWrapperEl: any = rootRef.current;
-        const $li = [].slice.call(reactDomWrapperEl.querySelectorAll('ul > li'));
-        $li.forEach((el: any, i: number) => {
-            if (el.classList.contains('active')) {
-                itemInit($li[i], true);
-            }
-        });
-
-        onLoad?.(() => itemInit);
-
-    }, []);
-
-
-
-
-    return (
-        <>
-
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef} style={style}>
-                <ul className={clsWrite(navClassName, 'nav nav-tabs mb-3')} role="tablist">
-
-                    {(() => {
-                        if (children != null) {
-                            let tabListIndex = 0;
-
-                            // If <TabList /> uses map to return, it will be wrapped into an array
-                            /*
-                            Such as:
-
-                                {[1,2,3].map((item: any, i: number) =>{
-                                    return <TabList key={`tab-list-${i}`} defaultActive={i === 0 ? true : false}>{item}</TabList>
-                                })}
-                            */
-
-                            const elements: React.ReactNode | React.ReactNode[] = Array.isArray((children as any[])[0]) ? (children as any[])[0] : children;
-                         
-                            return (elements as any[]).map((item, i) => {
-                                const childProps = { ...item.props };
-                                delete childProps.key;
-
-                                if (item.key.indexOf('tab-list') >= 0) {
-                                    tabListIndex++;
-                                    return <TabList
-                                        key={item.key}
-                                        index={tabListIndex}
-                                        expandedActiveClassNameForNav={expandedActiveClassNameForNav}
-                                        switchEv={handleClickItem}
-                                        targetId={`tabs-show-${uniqueID}-${tabListIndex}`}
-                                        {...childProps} />;
-                                }
-
-
-                            });
-                        }
-                    })()}
-
-
-                </ul>
-
-                <div className={clsWrite(panelClassName, 'tab-content')}>
-                    {(() => {
-                        if (children != null) {
-                            let tabPanelIndex = 0;
-
-                            // If <TabPanel /> uses map to return, it will be wrapped into an array
-                            /*
-                            Such as:
-
-                                {[1,2,3].map((item: any, i: number) =>{
-                                    return <TabPanel key={`tab-panel-${i}`}  tabpanelClass="fs-6" defaultActive={i === 0 ? true : false}>{item}</TabPanel>
-                                })}    
-                            */
-                            const elements: React.ReactNode | React.ReactNode[] = Array.isArray((children as any[])[1]) ? (children as any[])[1] : children;
-
-                            return (elements as any[]).map((item, i) => {
-                                const childProps = { ...item.props };
-                                delete childProps.key;
-
-                                if (item.key.indexOf('tab-panel') >= 0) {
-                                    tabPanelIndex++;
-                                    return <TabPanel
-                                        key={item.key}
-                                        index={tabPanelIndex}
-                                        expandedActiveClassNameForPanel={expandedActiveClassNameForPanel}
-                                        targetId={`tabs-show-${uniqueID}-${tabPanelIndex}`}
-                                        {...childProps} />;
-                                }
-
-
-
-                            });
-                        }
-                    })()}
-                </div>
-
-
-            </div>
-
-
-        </>
-    )
-
-});
-
-
-
-
-export default Tabs;

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

@@ -1,3 +0,0 @@
-export { default as Tabs } from './Tabs';
-export { default as TabList } from './TabList';
-export { default as TabPanel } from './TabPanel';

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

@@ -1,126 +0,0 @@
-/* ======================================================
-    <!-- Tag Input -->
-/* ====================================================== */
-
-.tag-input__wrapper {
-
-    --tag-input-control-border-radius: 0.375rem;
-    --tag-input-control-wrapper-bg: #fff;
-    --tag-input-control-wrapper-border-color: #dee2e6;
-    --tag-input-control-color: #adb5bd;
-    --tag-input-list-bg: #efefef;
-    --tag-input-removebtn-fill: #000;
-    --tag-input-removebtn-hover-fill: #f00;
-    --tag-input-focus-border-color:#86b7fe;
-    --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
-
-
-    display: flex;
-
-
-    ul,
-    li {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-    }
-
-    
-    .tag-input__control-wrapper {
-        display: flex;
-
-        > div {
-            position: relative;
-            align-items: center;
-            display: flex;
-            flex-wrap: wrap;
-
-            /* bootstrap style that match ".form-control" */
-            padding: 0.375rem;
-            background-color: var(--tag-input-control-wrapper-bg);
-            background-clip: padding-box;
-            border: 1px solid var(--tag-input-control-wrapper-border-color);
-            appearance: none;
-            border-radius: var(--tag-input-control-border-radius);
-            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-            padding-bottom: 1px;
-
-
-            .tag-input__control {
-                margin-bottom: 0.375rem;
-                
-                input {
-                    background: transparent;
-                    border: none;
-                    outline: none;
-                    padding: 0;
-                    margin: 0;
-                    margin-left: .5rem;
-
-                    /* bootstrap style that match ".form-control" */
-                    font-size: 0.875rem;
-                    font-weight: 400;
-                    line-height: 1.5;
-                    color: var(--tag-input-control-color);
-
-                    &:focus {
-                        outline: none;
-                        box-shadow: none;
-                    }
-                }
-
-            }
-
-        }
-
-    }
-
-
-    ul.tag-input__list {
-        li {
-            display: inline-block;
-            margin: 5px;
-            margin-bottom: 0;
-            padding: .1rem 1.5rem .1rem 1rem;
-            font-size: 0.875rem;
-            background: var(--tag-input-list-bg);
-            border-radius: 30px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            position: relative;
-
-            > a {
-                font-weight: 400;
-                opacity: .6;
-                font-size: 18px;
-                line-height: 20px;
-                position: absolute;
-                right: 8px;
-                top: 50%;
-                transform: translateY(-50%);
-
-                path {
-                    fill: var(--tag-input-removebtn-fill);
-                }
-
-                &:hover {
-                    path {
-                        fill: var(--tag-input-removebtn-hover-fill);
-                    }
-                }
-            }
-
-        }
-
-    }
-
-    &.focus {
-        .tag-input__control-wrapper {
-            > div {
-                box-shadow: var(--tag-input-focus-box-shadow);
-                border-color: var(--tag-input-focus-border-color);
-            } 
-        }
-    }
-
-}