funda-ui 4.5.712 → 4.5.713

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;

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

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

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