native-document 1.0.14 → 1.0.16-8.1

package/src/ui/components/table/data-table/toolbar.js

@@ -0,0 +1,67 @@
+import {Div, Input, Span} from '../../../../../elements';
+import {Button} from '../../../../components/button';
+import {SelectField} from '../../../../components/form';
+
+export const buildToolbar = ({ search, filters, exportBtn, columnsBtn }) => {
+    return Div({class: 'data-table-toolbar'}, [
+        Div({class: 'data-table-toolbar-left'}, [search, filters]),
+        Div({class: 'data-table-toolbar-right'}, [exportBtn, columnsBtn]),
+    ]);
+};
+
+export const buildSearch = ($desc, instance) => {
+    if(!$desc.searchable) {
+        return null;
+    }
+
+    return Div({class: 'data-table-search-wrapper'}, [
+        Span({class: 'data-table-search-icon'}, $desc.searchIcon),
+        Input({
+            class:       'data-table-search',
+            type:        'text',
+            placeholder: $desc.labels.searchPlaceholder,
+            value:       $desc.$search,
+        }).nd.onInput((e) => instance.emit('search', e.target.value)),
+    ]);
+};
+
+export const buildFiltersBtn = ($desc, instance) => {
+    if(!$desc.filterable) {
+        return null;
+    }
+
+    const btn = Button($desc.labels.filters)
+        .secondary()
+        .small();
+
+    btn.nd.onClick(() => instance.emit('openFilters'));
+
+    return btn;
+};
+
+export const buildExportBtn = ($desc, instance) => {
+    if(!$desc.exports?.length) return null;
+
+    if($desc.exports.length === 1) {
+        const btn = Button($desc.labels.export)
+            .secondary()
+            .small();
+
+        return btn.nd.onClick(() => instance.emit('export', $desc.exports[0].format));
+    }
+
+    return SelectField()
+        .placeholder($desc.labels.export)
+        .options($desc.exports.map((item) => ({ label: item.label, value: item.format })))
+        .onChange((value) => instance.emit('export', value));
+};
+
+export const buildColumnsBtn = ($desc, instance) => {
+    const btn = Button($desc.labels.columns)
+        .secondary()
+        .small();
+
+    btn.nd.onClick(() => instance.emit('openColumns'));
+
+    return btn;
+};

package/src/ui/components/table/simple-table/SimpleTableRender.js

@@ -0,0 +1,203 @@
+import {Table, THead, TBody, TRow, THeadCell, TBodyCell, Span, ShowIf} from '../../../../core/elements';
+import {classPropertyAccumulator} from '../../../../core/utils/property-accumulator';
+
+import './simple-table.css';
+
+export default function SimpleTableRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('simple-table');
+
+    const visibleColumns = $desc.columns.filter(col =>
+        col.$description.visible !== false,
+    );
+
+    return Table(instance.resolveProps(), [
+        $desc.noHeader ? null : buildHead($desc, visibleColumns),
+        buildBody($desc, instance, visibleColumns),
+    ]);
+}
+
+const buildGroupRow = ($desc) => {
+    return TRow({},
+        $desc.header.map(item => {
+            if(item.isGroup) {
+                const extraProps = $desc.headerProps?.(item) || {};
+                return THeadCell({
+                    colspan: item.$description.columns.length,
+                    class:   item.$description.align ? `is-${item.$description.align}` : null,
+                    ...extraProps,
+                }, item.$description.header);
+            }
+            const extraProps = $desc.headerProps?.(item) || {};
+            return THeadCell({
+                rowspan: 2,
+                class:   item.$description.align ? `is-${item.$description.align}` : null,
+                ...extraProps,
+            }, item.$description.header);
+        }),
+    );
+};
+
+const buildHeaderRow = ($desc, visibleColumns) => {
+    return TRow({},
+        visibleColumns.map(col => {
+            const extraProps = $desc.headerProps?.(col) || {};
+            return THeadCell({
+                class:   col.$description.align ? `is-${col.$description.align}` : null,
+                colspan: col.$description.colspan || null,
+                rowspan: col.$description.rowspan || null,
+                ...extraProps,
+            }, col.$description.header);
+        }),
+    );
+};
+
+const buildHead = ($desc, visibleColumns) => {
+    if($desc.hasGroups) {
+        return THead({}, [
+            buildGroupRow($desc),
+            buildHeaderRow($desc, visibleColumns),
+        ]);
+    }
+    return THead({}, buildHeaderRow($desc, visibleColumns));
+};
+
+const buildBody = ($desc, instance, visibleColumns) => {
+    const tbody = TBody({}, buildEmpty($desc, visibleColumns));
+
+    const createRow = (row) => buildRow($desc, visibleColumns, row);
+
+    const mutations = {
+        toFragment: (args) => {
+            const fragment = document.createDocumentFragment();
+
+            for(let i = 0, length = args.length; i < length; i++) {
+                fragment.append(createRow(args[i]));
+            }
+
+            return fragment;
+        },
+        set: () => {
+            mutations.clear();
+            mutations.push($desc.data.val());
+        },
+        push: (args) => {
+            tbody.append(mutations.toFragment(args));
+        },
+        unshift: (args) => {
+            const first = tbody.firstChild;
+            tbody.insertBefore(mutations.toFragment(args), first);
+        },
+        splice: (args) => {
+            const [start, deleteCount, ...newRows] = args;
+            const rows = [...tbody.children];
+            for(let i = 0; i < deleteCount; i++) {
+                rows[start + i]?.remove();
+            }
+            if(newRows.length === 0) {
+                return;
+            }
+            const ref = tbody.children[start] || null;
+            tbody.insertBefore(mutations.toFragment(newRows), ref);
+        },
+        remove: (args) => {
+            tbody.children[args[0]]?.remove();
+        },
+        swap: (args) => {
+            const [a, b]  = args;
+            const children = tbody.children;
+            const elA     = children[a];
+            const elB     = children[b];
+            if(!elA || !elB) {
+                return;
+            }
+            const refB    = elB.nextSibling;
+            tbody.insertBefore(elB, elA);
+            tbody.insertBefore(elA, refB);
+        },
+        clear: () => {
+            tbody.textContent = '';
+        },
+        merge: (args) => {
+            return mutations.push(args);
+        },
+    };
+
+    if(!$desc.data?.__$isObservableArray) {
+        const data = $desc.data || [];
+        for(let i = 0, length = data.length; i < length; i++) {
+            tbody.append(createRow(data[i]));
+        }
+        return tbody;
+    }
+
+    for(let i = 0, length = $desc.data.length; i < length; i++) {
+        tbody.append(createRow($desc.data.at(i)));
+    }
+
+    $desc.data.subscribe((data, _, operations) => {
+        const handler = mutations[operations.action];
+        if(handler) {
+            handler(operations.args);
+        }
+    });
+
+    return tbody;
+};
+
+
+const buildRow = ($desc, visibleColumns, row) => {
+    const cells = [];
+    for(let i = 0, length = visibleColumns.length; i < length; i++) {
+        const column = visibleColumns[i];
+
+        const key     = column.$description.key;
+        const value   = row[key];
+        const content = column.$description.render
+            ? column.$description.render(value, row)
+            : value ?? '';
+
+        const extraProps = column.$description.props || $desc.cellProps?.(value, row, column) || {};
+        const classProperty = classPropertyAccumulator(extraProps.class || {});
+        if(column.$description.align) {
+            classProperty.add(`is-${column.$description.align}`);
+        }
+        const cell = TBodyCell({ ...extraProps, class: classProperty.value() },
+            content,
+        );
+        if(column.$description.onClick) {
+            cell.nd.onClick((event) => column.$description.onClick(row, event));
+        }
+        cells.push(cell);
+    }
+
+    const rowExtraProps = $desc.rowProps?.(row) || {};
+    const classProperty = classPropertyAccumulator(rowExtraProps.class || {});
+    classProperty.add({'has-click': !!$desc.onRowClick});
+
+    const tr = TRow({ ...rowExtraProps, class: classProperty.value()}, cells);
+
+    if($desc.onRowClick) {
+        tr.nd.onClick(() => $desc.onRowClick(row));
+    }
+
+    return tr;
+};
+
+const buildEmpty = ($desc, visibleColumns) => {
+    if(!$desc.empty) {
+        return null;
+    }
+
+    const content = typeof $desc.empty === 'function'
+        ? $desc.empty()
+        : Span({class: 'simple-table-empty-text'}, $desc.empty);
+
+    const row = TRow({class: 'simple-table-empty'}, [
+        TBodyCell({colspan: visibleColumns.length, class: 'simple-table-empty-cell'}, content),
+    ]);
+    if($desc.data?.__$isObservableArray) {
+        return ShowIf($desc.data.is((items) => items.length === 0), row);
+    }
+    return row;
+};

package/src/ui/components/table/simple-table/simple-table.css

@@ -0,0 +1,50 @@
+:root {
+    --simple-table-font-size:        var(--description-size);
+    --simple-table-cell-padding-v:   var(--space-cozy);
+    --simple-table-cell-padding-h:   var(--space-comfortable);
+    --simple-table-border-color:     var(--color-border-tertiary);
+    --simple-table-header-color:     var(--color-text-secondary);
+    --simple-table-header-bg:        var(--color-background-secondary);
+    --simple-table-header-weight:    600;
+    --simple-table-hover-bg:         var(--color-background-secondary);
+    --simple-table-empty-padding:    var(--space-large);
+    --simple-table-empty-color:      var(--color-text-secondary);
+}
+
+.simple-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--simple-table-font-size);
+
+    th, td {
+        padding: var(--simple-table-cell-padding-v) var(--simple-table-cell-padding-h);
+        text-align: left;
+        border-bottom: 1px solid var(--simple-table-border-color);
+
+        &.is-center { text-align: center; }
+        &.is-right  { text-align: right;  }
+    }
+
+    th {
+        font-weight: var(--simple-table-header-weight);
+        color:       var(--simple-table-header-color);
+        background:  var(--simple-table-header-bg);
+        white-space: nowrap;
+    }
+
+    tr.has-click {
+        cursor: pointer;
+
+        &:hover td {
+            background: var(--simple-table-hover-bg);
+        }
+    }
+}
+
+.simple-table-empty {
+    .simple-table-empty-cell {
+        text-align: center;
+        padding:    var(--simple-table-empty-padding);
+        color:      var(--simple-table-empty-color);
+    }
+}

package/src/ui/components/tabs/TabsRender.js

@@ -0,0 +1,226 @@
+import {Div, ForEachArray, Match, Nav, ShowIf, Span} from '../../../core/elements';
+import { $ } from '../../../core/data/Observable';
+import {Button} from '../../../components/button';
+import {Dropdown} from '../../../components/dropdown';
+import {nextTick} from '../../../core/utils/helpers';
+
+import './tabs.css';
+
+export default function TabsRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('tabs');
+    props.class.add('is-appearance-' + $desc.tabAppearance);
+    props.class.add('is-align-' + $desc.tabsAlignment);
+    props.class.add('is-overflow-' + $desc.overflow);
+
+    if($desc.stickyHeader) {
+        props.class.add('has-sticky-header');
+    }
+    if($desc.navigationBarPosition) {
+        props.class.add('is-navigation-at-' + $desc.navigationBarPosition);
+    }
+
+    if($desc.closable) {
+        props.class.add('is-closable');
+    }
+
+    const tabKeys = Object.keys($desc.tabs);
+
+    if(tabKeys.length && !$desc.active.val()) {
+        $desc.active.set(tabKeys[0]);
+    }
+
+    const $keys  = $.array(tabKeys);
+    const panels = Match($desc.active, buildContentPanels($desc, instance, tabKeys));
+
+    instance.onCloseTab((key) => {
+        panels.remove(key);
+        $keys.removeItem(key);
+    });
+
+    instance.onAddTab((tab) => {
+        $keys.push(tab.key);
+        panels.add(tab.key, Div({ role: 'tabpanel', class: 'tabs-panel' }, tab.content));
+        if($desc.focusOnNewTab) {
+            $desc.active.set(tab.key);
+        }
+    });
+
+    return Div(instance.resolveProps(), [
+        Div({class: 'tabs-nav'}, buildNavContent($keys, $desc, instance)),
+        Div({class: 'tabs-content'}, panels),
+    ]);
+}
+
+const buildNavContent = ($keys, $desc, instance) => {
+    const tabItemWrapper = Nav({class: 'tabs-nav-wrap', role: 'tablist' },
+        ForEachArray($keys, (key) => buildTab(key, $keys, $desc, instance)),
+    );
+
+    const navOptionsContent = [];
+
+    if($desc.addPlusButton) {
+        const btnPlusButton = $desc.renderPlusButton
+            ? $desc.renderPlusButton($desc, instance)
+            : Button('+').ghost();
+
+        navOptionsContent.push(
+            btnPlusButton
+                .nd.onClick(() => {
+                    $desc.addPLusCallback && $desc.addPLusCallback($desc, instance);
+                }),
+        );
+    }
+
+    if($desc.overflow) {
+        navOptionsContent.push(
+            Div({class: 'tab-nav-overflow'}, buildOverflowMenu(tabItemWrapper, $keys, $desc, instance)),
+        );
+    }
+
+    return [
+        tabItemWrapper,
+        Div({ class: 'tab-nav-options'}, navOptionsContent),
+    ];
+};
+
+const buildContentPanels = ($desc, instance, keys) => {
+    const panels = {};
+
+    for(const key of keys) {
+        const tab    = $desc.tabs[key];
+        panels[key] = Div({ role: 'tabpanel', class: 'tabs-panel' }, tab.content);
+    }
+
+    return panels;
+};
+
+const buildOverflowMenu = (tabItemWrapper, $keys, $desc, instance) => {
+    const $overflowKeys = $.array([]);
+
+    const isVerticalNavigationBar = $desc.navigationBarPosition === 'left' || $desc.navigationBarPosition === 'right';
+    const checkOverflowHandler = nextTick(() => {
+        const wrapperRect = tabItemWrapper.getBoundingClientRect();
+        const tabs        = [...tabItemWrapper.children];
+        const overflow    = [];
+
+        if(isVerticalNavigationBar) {
+            for(const tab of tabs) {
+                const rect = tab.getBoundingClientRect();
+                if(rect.top < wrapperRect.top || rect.bottom > wrapperRect.bottom) {
+                    overflow.push(tab.dataset.key);
+                }
+            }
+        } else {
+            for(const tab of tabs) {
+                const rect = tab.getBoundingClientRect();
+                if(rect.left < wrapperRect.left || rect.right > wrapperRect.right) {
+                    overflow.push(tab.dataset.key);
+                }
+            }
+        }
+
+        $overflowKeys.set(overflow);
+    });
+    const observer = new ResizeObserver(checkOverflowHandler);
+
+    instance.onChange(checkOverflowHandler);
+    tabItemWrapper.addEventListener('scroll', checkOverflowHandler);
+
+    observer.observe(tabItemWrapper);
+    const $hasOverflowItem = $overflowKeys.is(values => values.length > 0);
+
+    return ShowIf($hasOverflowItem, () => {
+        return Dropdown()
+            .bind($overflowKeys, (key) => {
+                const tab = $desc.tabs[key];
+                return { content: tab.label, icon: tab.icon || null, value: key};
+            })
+            .atBottomTrailing()
+            .trigger(Button('▾').ghost().small())
+            .onChange((key) => $desc.active.set(key));
+    });
+};
+
+const buildTab = (key, $keys, $desc, instance) => {
+    const tab = $desc.tabs[key];
+
+    if($desc.renderTab) {
+        return $desc.renderTab(tab, key, instance);
+    }
+
+    const isActive = $desc.active.is(key);
+
+    const tabEl = Div({
+        class: { 'tabs-tab': true, 'is-active': isActive },
+        'aria-selected': isActive,
+        'data-key': key,
+        draggable: true,
+        role: 'tab',
+    }, buildTabContent(tab, $desc, instance));
+
+
+    tabEl
+        .nd
+        .onClick(() => {
+            instance.emit('tabClick', key, tab);
+            instance.emit('beforeChange', key);
+            $desc.active.set(key);
+            instance.emit('change', key, tab);
+        });
+
+    if($desc.sortable) {
+        tabEl
+            .nd
+            .onDragStart((e) => {
+                e.dataTransfer.setData('text/plain', key);
+                setTimeout(() => tabEl.classList.add('is-dragging'), 0);
+            })
+            .onDragEnd(() => {
+                tabEl.classList.remove('is-dragging');
+                tabEl.classList.remove('is-drag-over');
+            })
+            .onDragOver((e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                tabEl.classList.add('is-drag-over');
+            })
+            .onDragLeave(() => {
+                tabEl.classList.remove('is-drag-over');
+            })
+            .onDrop((e) => {
+                const draggedKey = e.dataTransfer.getData('text/plain');
+                tabEl.classList.remove('is-drag-over');
+                $keys.swapItems(draggedKey, key);
+            });
+    }
+
+    return tabEl;
+};
+
+const buildTabContent = (tab, $desc, instance) => {
+    const content = [];
+
+    if(tab.icon) {
+        content.push(Span({class: 'tabs-tab-icon'}, tab.icon));
+    }
+
+    content.push(Span({class: 'tabs-tab-label'}, tab.label));
+
+    if($desc.closable) {
+        const closeButton = $desc.renderCloseButton
+            ? $desc.renderCloseButton(tab)
+            : Span({ class: 'tabs-tab-closer' }, '×');
+
+        content.push(
+            closeButton
+                .nd.onClick((e) => {
+                    e.stopPropagation();
+                    instance.closeTab(tab.key);
+                }),
+        );
+    }
+
+    return content;
+};