funda-ui 4.7.624 → 4.7.701

package/publish/lib/esm/Table/TableColgroup.tsx

@@ -1,38 +0,0 @@
-import React, { forwardRef } from 'react';
-
-
-export interface TableColgroupProps extends React.HTMLAttributes<HTMLTableColElement> {
-    className?: string;
-    length?: number;
-}
-
-const TableColgroup = forwardRef<HTMLTableColElement, TableColgroupProps>((
-    { className, length, ...attributes },
-    externalRef
-) => {
-
-    return (
-        <>
-
-            <colgroup
-                {...attributes}
-                ref={externalRef}
-                className={className || ''}
-            >
-                {Array.from({
-                    length: length || 0
-                },
-                function (v, k) {
-                    return k; // Return k(ey) as value for this index
-                }
-                ).map((el: any, i: number) => {
-                    return <col key={i}></col>;
-                })}
-            </colgroup>
-
-        </>
-    )
-});
-
-export default TableColgroup;
-

package/publish/lib/esm/Table/TableContext.tsx

@@ -1,26 +0,0 @@
-import React, { createContext } from 'react';
-
-
-export type TableProviderProps = {
-    value?: any;
-    children?: React.ReactNode;
-};
-
-
-const TableContext = createContext<any>(undefined);
-
-const TableProvider = (props: TableProviderProps) => {
-    const {
-        children,
-        value
-    } = props;
-
-    return (
-        <TableContext.Provider value={value}>
-            {children}
-        </TableContext.Provider>
-    );
-
-};
-
-export { TableContext, TableProvider };

package/publish/lib/esm/Table/TableFoot.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from 'react';
-
-
-export interface TableFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-    className?: string;
-}
-
-const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>((
-    { children, className, ...attributes },
-    externalRef
-) => {
-
-    return (
-        <>
-
-            <tfoot
-                {...attributes}
-                ref={externalRef}
-                className={className || ''}
-            >
-                {children}
-            </tfoot>
-
-        </>
-    )
-});
-
-export default TableFoot;

package/publish/lib/esm/Table/TableHead.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from 'react';
-
-
-export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-    className?: string;
-}
-
-const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>((
-    { children, className, ...attributes },
-    externalRef
-) => {
-
-    return (
-        <>
-
-            <thead
-                {...attributes}
-                ref={externalRef}
-                className={className || ''}
-            >
-                {children}
-            </thead>
-
-        </>
-    )
-});
-
-export default TableHead;

package/publish/lib/esm/Table/TableRow.tsx

@@ -1,76 +0,0 @@
-import React, { useContext, forwardRef } from 'react';
-
-import { TableContext } from './TableContext';
-import { convertMapToArr } from './utils/func';
-
-export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-    active?: boolean;
-    activeClassName?: string;
-    className?: string;
-    itemData?: any;
-}
-
-const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
-    { 
-        children, 
-        active, 
-        activeClassName, 
-        className, 
-        itemData,
-        ...attributes 
-    },
-    externalRef
-) => {
-
-    const { 
-        originData,
-        filterFields,
-        selectedItems,
-        instance,
-        rowDraggable,
-        handleDragStart,
-        handleDragEnd, 
-     } = useContext(TableContext);
-     
-
-    // ================================================================
-    // filter
-    // ================================================================
-    const filteredData = instance || [];
-    const filterFieldsData = filterFields || [];
-
-
-    // ================================================================
-    // selection
-    // ================================================================
-    const _res = convertMapToArr(selectedItems);
-    const filteredSelectedItems = _res.map((v: any) => Number(v)).map((rowNum: number) => {
-        if (JSON.stringify(itemData) === JSON.stringify(originData[rowNum])) {
-            return originData[rowNum];
-        }
-    }).filter(Boolean);
-    const selectedClassName = activeClassName || 'active';
-
-
-
-    return (
-        <>
-
-            <tr
-                {...attributes}
-                ref={externalRef}
-                draggable={rowDraggable} 
-                onDragStart={rowDraggable ? handleDragStart: () => void(0)} 
-                onDragEnd={rowDraggable ? handleDragEnd : () => void(0)} 
-                data-row-data={`${itemData && typeof itemData === 'object' ? JSON.stringify(itemData) : itemData}`}
-                
-                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData ? (filteredSelectedItems.some((item: any) => JSON.stringify(itemData) === JSON.stringify(item) ) ? selectedClassName : '') : ''}`}
-            >
-                {children}
-            </tr>
-
-        </>
-    )
-});
-
-export default TableRow;

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

@@ -1,418 +0,0 @@
-/* ======================================================
-    <!-- Table (Synthetic) -->
-/* ====================================================== */
-.syntable__wrapper {
-    --syntable-alternant-bg: #f0f0f0;
-    --syntable-dark-bg: #212529;
-    --syntable-row-active-bg: #f0f8ff;
-    --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
-    --syntable-scrollbar-track: rgba(0, 0, 0, 0);
-    --syntable-scrollbar-h: 3px;
-    --syntable-scrollbar-w: 10px;
-    --syntable-padding-x: 1rem;
-    --syntable-padding-y: 0.5rem;
-    --syntable-cell-focus-shadow: inset 0px 0px 2px 0px rgba(13, 110, 253, 2.25);
-    
-    &.table-responsive {
-        overflow-x: auto;
-        overflow-y: hidden;
-
-        &::-webkit-scrollbar {
-            height: var(--syntable-scrollbar-h);
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: var(--syntable-scrollbar-color);
-        }
-
-        &::-webkit-scrollbar-track {
-            background: var(--syntable-scrollbar-track);
-        }
-    }
-
-
-    table {
-        
-        td,
-        th {
-            position: relative;
-
-            /* focus */
-            &:focus {
-                outline: none;
-            }
-            &.cell-focus {
-                box-shadow: var(--syntable-cell-focus-shadow);
-            }
-
-        }
-
-        tr {
-            transition: 0.1s ease-in-out;
-            
-            &.active {
-                background-color: var(--syntable-row-active-bg);
-            }
-        }
-
-
-
-        &.table-colgroup {
-            tbody tr td:first-child,
-            tbody tr th:first-child {
-                color: #fff;
-            }
-
-            col:nth-child(odd) {
-                background-color: var(--syntable-alternant-bg);
-            }
-
-            col:first-child {
-                background-color: var(--syntable-dark-bg);
-            }
-
-        }
-
-        &.cell-autowidth {
-            display: block;  /* Key 1 */
-            width: max-content;  /* Do not use "max-width", It affects the horizontal scroll length of sticky, and if you exceed it, it will be invalid */
-        }
-        
-    }
-
-    .syntable__caption {
-        &.syntable__caption--top {
-            caption-side: top;
-        }
-
-        &.syntable__caption--bottom {
-            caption-side: bottom;
-        }
-    }
-
-    .sort-trigger {
-        cursor: pointer;
-
-        svg {
-            transition: 0.1s ease-in-out;
-            opacity: .3;
-        }
-
-        &:hover svg {
-            transform: scale(1.2);
-            opacity: .7;
-        }
-        
-    }
-
-    /*------ allow sort  ------*/
-    &.allow-sort {
-        .sort-trigger {
-            cursor: pointer;
-    
-            svg {
-                transition: 0.1s ease-in-out;
-                opacity: .3;
-            }
-    
-            &:hover svg {
-                transform: scale(1.2);
-                opacity: .7;
-            }
-            
-        }
-
-        /* Transition animation */
-        .newsort {
-            animation: table-newsort .5s linear 1 forwards;
-            opacity: 0;
-        }
-        
-        @for $i from 1 to 100 {
-        
-            .newsort:nth-child(#{$i+1}) {
-                animation-delay: #{$i*50}ms;
-            }
-        }
-        
-        @keyframes table-newsort {
-            0%   {
-                opacity: 0;
-                transform: translateX(10px);
-            }
-        
-            100% {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        
-
-    }
-
-    
-    /*------ allow drag and drop  ------*/
-    &.allow-dragdrop {
-
-        .drag-trigger {
-            cursor: move;
-            opacity: .5;
-        }
-    
-
-        /* Specify a drag trigger point */
-        tbody {
-
-            .row-obj-clonelast {
-                height: 0 !important;
-
-             
-                td {
-                    border: none;
-                    box-shadow: none;
-                }
-            }
-
-            td,
-            th {
-                pointer-events: none;
-                user-select: auto;
-            }
-
-            &.drag-trigger-mousedown {
-
-                td,
-                th {
-                    pointer-events: auto;
-                }
-            }
-
-        }
-
-        /* placeholder */
-        .row-placeholder {
-            border: 2px dotted #b5ba91;
-            background-color: #e4e9c3;
-        }
-        
-        /* trigger */
-        .drag-trigger {
-            display: inline-block;
-            pointer-events: auto;
-
-            ~span:not(.checkbox-trigger) {
-                display: inline-block;
-                padding-left: calc(var(--syntable-padding-x)*1.5);
-            }  
-        }
-    }
-    
-    &.allow-dragdrop.has-checkbox {
-        .drag-trigger {
-            ~span:not(.checkbox-trigger) {
-                padding-left: calc(var(--syntable-padding-x)*3);
-            }  
-        }
-        
-        tbody .checkbox-trigger {
-            padding-left: calc(var(--syntable-padding-x)*1.5);
-        }
-
-    }
-
-
-
-}
-
-
-
-@media all and (max-width: 768px) {
-
-    .syntable__wrapper {
-        --syntable-border-color: #dee2e6;
-        --syntable-per-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
-
-        /*------ Enhanced Responsive ------*/
-        &.table-enhanced-responsive {
-
-            table {
-
-                thead {
-                    display: none;
-                }
-
-                tbody {
-
-                    tr {
-                        box-shadow: var(--syntable-per-shadow);
-                        margin-bottom: 1rem;
-                        display: block;
-                    }
-
-                    tr:nth-of-type(even) {
-                        //background-color: $table-alternant-bg;
-                    }
-
-                    
-                    td,
-                    th {
-                        display: block;
-
-
-                        &::before {
-                            content: attr(data-table-text);
-                            display: block;
-                            float: left;
-                            width: 40%;
-                            font-weight: bold;
-                            border-right: 1px solid var(--syntable-border-color);
-                            margin-right: 0.5rem;
-                        }
-
-                        &::after {
-                            content: '';
-                            display: block;
-                            clear: both;
-                        }
-                    }
-
-                }
-
-
-            }
-
-
-            table.cell-autowidth {
-                display: table;  /* Key 1 */
-                width: 100%;
-            }
-            
-
-        }
-
-
-
-        /*------ Enhanced Responsive with Scroll Bars ------*/
-        &.table-enhanced-responsive-scrolled {
-
-            table {
-                display: block;
-                width: 100%;
-                border-bottom: 0 !important;
-                border-left: 0 !important;
-                border-right: 0 !important;
-                overflow: auto;
-                
-
-                &::-webkit-scrollbar {
-                    height: var(--syntable-scrollbar-h);
-                    width: var(--syntable-scrollbar-w);
-                }
-        
-                &::-webkit-scrollbar-thumb {
-                    background: var(--syntable-scrollbar-color);
-                }
-        
-                &::-webkit-scrollbar-track {
-                    background: var(--syntable-scrollbar-track);
-                }
-
-                thead {
-                    display: block;
-                    float: left;
-                    width: 100px;
-                    border-bottom: 1px solid var(--syntable-border-color);
-
-                    th {
-                        display: block;
-
-                        /* required */
-                        min-width: auto !important;
-                        width: auto !important;
-
-                        &:not(:last-child) {
-                            border-bottom: 0;
-                        }
-
-                    }
-                }
-
-                tbody {
-                    width: calc(100% - 100px);
-                    display: block;
-                    float: left;
-                    overflow-x: scroll;
-                    border-bottom: 1px solid var(--syntable-border-color);
-                    border-right: 1px solid var(--syntable-border-color);
-
-
-                    &::-webkit-scrollbar {
-                        height: var(--syntable-scrollbar-h);
-                    }
-            
-                    &::-webkit-scrollbar-thumb {
-                        background: var(--syntable-scrollbar-color);
-                    }
-            
-                    &::-webkit-scrollbar-track {
-                        background: var(--syntable-scrollbar-track);
-                    }
-
-                }
-
-                thead tr,
-                tbody tr {
-                    display: block;
-                    border-color: var(--syntable-border-color);
-                }
-
-                th,
-                tbody td,
-                tbody th {
-                    box-sizing: border-box;
-                    overflow-x: hidden;
-                    overflow-y: auto;
-
-
-                    &::-webkit-scrollbar {
-                        width: var(--syntable-scrollbar-w);
-                    }
-
-                    &::-webkit-scrollbar-thumb {
-                        background: var(--syntable-scrollbar-color);
-                    }
-
-                    &::-webkit-scrollbar-track {
-                        background: var(--syntable-scrollbar-track);
-                    }
-
-                    &:first-child {
-                        border-top: 0;
-                    }
-
-                    &:not(:last-child) {
-                        border-bottom: 0;
-                        border-right: 0;
-                    }
-
-                }
-
-
-                tbody tr {
-                    display: table-cell;
-
-                }
-
-                tbody td,
-                tbody th {
-                    display: block;
-                }
-
-            }
-
-
-        }
-    }
-
-}
-

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

@@ -1,14 +0,0 @@
-export { default as Table } from './Table';
-export { default as TableBody } from './TableBody';
-export { default as TableCell } from './TableCell';
-export { default as TableHead } from './TableHead';
-export { default as TableFoot } from './TableFoot';
-export { default as TableRow } from './TableRow';
-export { default as TableColgroup } from './TableColgroup';
-export { default as TableCaption } from './TableCaption';
-
-// utils
-export { default as TableFilter } from './utils/TableFilter';
-export { default as ToggleSelection } from './utils/ToggleSelection';
-export { default as DragHandleSprite } from './utils/DragHandleSprite';
-export { default as SortSprite } from './utils/SortSprite';

package/publish/lib/esm/Table/utils/DragHandleSprite.tsx

@@ -1,46 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import { TableContext } from '../TableContext';
-
-export type DragHandleSpriteProps = {
-    className?: string;
-    icon?: React.ReactNode;
-};
-
-
-const DragHandleSprite = forwardRef((props: DragHandleSpriteProps, externalRef: any) => {
-    const {
-        className,
-        icon,
-    } = props;
-
-    const {
-        rowDraggable,
-        handleTbodyEnter
-    } = useContext(TableContext);
-
-    return (
-        <>
-            {rowDraggable ? <span
-                ref={externalRef}
-                className={className || 'drag-trigger'}
-                onMouseEnter={handleTbodyEnter}
-            >
-                {icon || <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none">
-                    <g>
-                        <path d="M18 14C17.4477 14 17 14.4477 17 15C17 15.5523 17.4477 16 18 16C18.5523 16 19 15.5523 19 15C19 14.4477 18.5523 14 18 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M12 14C11.4477 14 11 14.4477 11 15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15C13 14.4477 12.5523 14 12 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M6 14C5.44772 14 5 14.4477 5 15C5 15.5523 5.44772 16 6 16C6.55228 16 7 15.5523 7 15C7 14.4477 6.55228 14 6 14Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M18 8C17.4477 8 17 8.44772 17 9C17 9.55228 17.4477 10 18 10C18.5523 10 19 9.55228 19 9C19 8.44772 18.5523 8 18 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M12 8C11.4477 8 11 8.44772 11 9C11 9.55228 11.4477 10 12 10C12.5523 10 13 9.55228 13 9C13 8.44772 12.5523 8 12 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                    </g>
-                </svg>}
-                
-            </span > : null}
-
-        </>
-
-    );
-});
-
-export default DragHandleSprite;