funda-ui 1.0.272

package/lib/esm/Table/utils/dom.js

@@ -0,0 +1,81 @@
+/**
+ * Dom Utilities
+ * @param {HTMLElement} el      - Element
+ * @param  {?String} filter      - A filter string
+ * @returns HtmlElementCollection
+ */
+function matches(el, filter) {
+    if (el && el.nodeType === 1) {
+        if (filter) {
+            return el.matches(filter);
+        }
+        return true;
+    }
+    return false;
+}
+
+// the next siblings
+function getNextSiblings(el, filter = false || '') {
+    const sibs = [];
+    while (el = el.nextSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// previous siblings
+function getPreviousSiblings(el, filter = false || '') {
+    const sibs = [];
+    while (el = el.previousSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// parent and get all the siblings
+function getAllSiblings(el, filter = false || '') {
+    const sibs = [];
+    el = el.parentNode.firstChild;
+    while (el = el.nextSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// all parent nodes
+function getParents(el, filter = false || '') {
+    const parents = [];
+    while (el = el.parentNode) {
+        if (matches(el, filter)) {
+            parents.push(el);
+        }
+    }
+    return parents;
+}
+
+// all child nodes
+function getChildren(el, filter = false || '', all = []) {
+    all.push(...el.childNodes);
+    for (const child of el.childNodes) {
+        getChildren(child, filter, all);
+    }
+
+    const res = all.filter( item => matches(item, filter) );
+    return res;
+}
+
+
+module.exports = {
+    getNextSiblings,
+    getPreviousSiblings,
+    getAllSiblings,
+    getParents,
+    getChildren
+}
+

package/lib/esm/Table/utils/performance.js

@@ -0,0 +1,52 @@
+
+/*
+* Debounce
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function debounce( fn, limit = 300 ) {
+    let timer;
+    return function() {
+    
+        //Every time this returned function is called, the timer is cleared to ensure that fn is not executed
+        clearTimeout(timer);
+
+        // When the returned function is called for the last time (that is the user stops a continuous operation)
+        // Execute fn after another delay milliseconds
+        timer = setTimeout(function() {
+            fn.apply(this, arguments);
+        }, limit);
+    }
+}
+
+
+
+
+
+/*
+* Throttle
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function throttle( fn, limit = 300 ) {
+	let waiting = false;                     
+	return function () {                     
+		if (!waiting) {                 
+			fn.apply(this, arguments);  
+			waiting = true;                  
+			setTimeout(function () {          
+				waiting = false;           
+			}, limit);
+		}
+	}
+}
+
+
+module.exports = {
+    debounce,
+    throttle
+}

package/lib/esm/Tabs/TabList.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+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 className={`nav-item ${activedClassName}`} role="presentation" onClick={switchEv} data-tab={targetId}>
+                {children}
+            </li>
+
+        </>
+    )
+}
+
+
+export default TabList;

package/lib/esm/Tabs/TabPanel.tsx

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

package/lib/esm/Tabs/Tabs.tsx

@@ -0,0 +1,232 @@
+import React, { useId, useEffect, useRef } from 'react';
+
+
+//
+import TabList from './TabList';
+import TabPanel from './TabPanel';
+
+
+type TabsProps = {
+    wrapperClassName?: string;
+    navClassName?: string;
+    panelClassName?: string;
+    expandedActiveClassNameForNav?: string;
+    expandedActiveClassNameForPanel?: string;
+    animTransitionDuration?: number;
+    /** -- */
+    style?: React.CSSProperties;
+    onChange?: (nav: any, targetId: any, index: number) => void;
+	children: React.ReactNode | React.ReactNode[];
+};
+
+const Tabs = (props: TabsProps) => {
+    
+    const {
+        wrapperClassName,
+        navClassName,
+        panelClassName,
+        expandedActiveClassNameForNav,
+        expandedActiveClassNameForPanel,
+        animTransitionDuration,
+        style,
+        onChange,
+        children // the contents of the TabList and TabPanel in a loop
+    } = props;
+
+    const uniqueID = useId().replace(/\:/g, "-");
+    const rootRef = useRef<any>(null);
+    const speed = animTransitionDuration ? animTransitionDuration : 150;
+
+
+    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);
+
+        }
+    }
+
+
+    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) => {
+            node.classList.remove('active');
+            node.firstChild.classList.remove('active');
+
+            runExClassName(node, _classNameNav, 'remove');
+            runExClassName(node.firstChild, _classNameNav, 'remove');
+        });
+
+        
+
+        $allContent.forEach( (node) => {
+            node.classList.remove('show');
+            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 ) {
+                    _panel.classList.add('active', 'show');
+                    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);
+            }
+        });
+
+    }, []);
+
+
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef} style={style}>
+                <ul className={navClassName ? 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={panelClassName ? 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}
+                                        expandedActiveClassNameForPanel={expandedActiveClassNameForPanel}
+                                        targetId={`tabs-show-${uniqueID}-${tabPanelIndex}`}
+                                        {...childProps} />;
+                                }
+
+
+
+                            });
+                        }
+                    })()}
+                </div>
+
+
+            </div>
+
+
+        </>
+    )
+
+}
+
+
+
+
+export default Tabs;

package/lib/esm/Tabs/index.tsx

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

package/lib/esm/TagInput/index.scss

@@ -0,0 +1,125 @@
+/* ======================================================
+    <!-- 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: 0;
+
+                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);
+            } 
+        }
+    }
+
+}