funda-ui 4.5.682 → 4.5.711

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;

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

@@ -0,0 +1,57 @@
+import React, { forwardRef, useContext } from "react";
+import { TableContext } from '../TableContext';
+
+import useTableSort from './hooks/useTableSort';
+
+export type SortSpriteProps = {
+    fieldType: 'text' | 'number' | 'date';
+    className?: string;
+    icon?: React.ReactNode;
+    onClick?: (e: any) => void;
+};
+
+
+const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
+    const {
+        fieldType,
+        className,
+        icon,
+        onClick
+    } = props;
+
+    const {
+        originData,
+        rootRef,
+        colSortable,
+        onColSort
+    } = useContext(TableContext);
+
+
+    // sortable table initialization
+    const { handleSortList } = useTableSort({
+        enabled: colSortable && rootRef.current,
+        data: originData,
+        spyElement: rootRef.current,
+        fieldType: fieldType,
+        onColSort: onColSort,
+        onClick: onClick
+    }, [rootRef]);
+
+
+    return (
+        <>
+            {colSortable ? <span className={className || 'sort-trigger'} onClick={handleSortList}>
+                {icon || <svg width="1em" height="1em" viewBox="0 0 18 18">
+                    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                        <path d="M9.5,3 L13,8 L6,8 L9.5,3 L9.5,3 Z M6,11 L13,11 L9.5,16 L6,11 L6,11 Z" id="path" fill="#000000"></path>
+                    </g>
+                </svg>}
+
+            </span> : null}
+
+        </>
+
+    );
+});
+
+export default SortSprite;

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

@@ -0,0 +1,56 @@
+import React, { forwardRef, useContext } from "react";
+import { TableContext } from '../TableContext';
+
+export type TableFilterProps = {
+    className?: string;
+    placeholder?: string;
+    label?: React.ReactNode;
+    onChange?: (e: any, fetchData: any[]) => void;
+};
+
+
+const TableFilter = forwardRef((props: TableFilterProps, externalRef: any) => {
+    const { 
+        className,
+        placeholder,
+        label,
+        onChange
+     } = props;
+
+    const { 
+        originData, 
+        filterFields, 
+        setInstance,
+        onChangeFilter
+    } = useContext(TableContext);
+
+    const filterFieldsData = filterFields || [];
+
+
+    return (
+        <div className="syntable__filter-container">
+            {label || null}
+            <input
+                type="text"
+                ref={externalRef}
+                className={className || ''}
+                onChange={(e: any) => {
+                    const filteredData = originData?.filter((item: any) => filterFieldsData.some((s: string) => item[s]?.toLowerCase().includes(e.target.value.toLowerCase())));
+                    
+                    if (e.target.value.trim() === '') {
+                        setInstance(originData);
+                        onChangeFilter?.(originData);
+                        onChange?.(e, originData);
+                    } else {
+                        setInstance(filteredData);
+                        onChangeFilter?.(filteredData);
+                        onChange?.(e, filteredData);
+                    }
+                }}
+                placeholder={placeholder || ''}
+            />
+        </div>
+    );
+});
+
+export default TableFilter;