funda-ui 4.7.620 → 4.7.624

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,418 @@
+/* ======================================================
+    <!-- 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,46 @@
+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;