native-document 1.0.16 → 1.0.17-1.2

package/src/ui/components/switch/SwitchRender.js

@@ -0,0 +1,86 @@
+import {Div, Span, Label, Input, Match} from '../../../../elements';
+
+import './switch.css';
+
+export default function SwitchRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('switch');
+    props.class.add({
+        'is-disabled':  $desc.disabled,
+        'is-readonly':  $desc.readonly,
+        'is-loading':   $desc.loading,
+        '_':   $desc.variant.transform((value) => `is-${value}`),
+        'is-outline':   $desc.outline,
+        'is-checked':   $desc.value,
+        '___': $desc.value.transform(value => `is-state-${value ? 'on' : 'off'}`),
+    });
+
+    if($desc.labelPosition) {
+        props.class.add('is-label-' + $desc.labelPosition);
+    }
+
+    const input = Input({
+        class:    'switch-input',
+        type:     'checkbox',
+        checked:  $desc.value,
+        disabled: $desc.disabled,
+        // [a11y] aria-checked and aria-disabled
+        'aria-checked':  $desc.value,
+        ...($desc.disabled ? { 'aria-disabled': $desc.disabled } : {}),
+    });
+
+    $desc.value.subscribe(() => {
+        const val = $desc.value.val();
+        instance.emit('change', val);
+        instance.emit(val ? 'on' : 'off', val);
+    });
+
+    const thumb      = buildThumb($desc);
+    const innerLabel = buildInnerLabel($desc);
+    const track      = Div({class: 'switch-track'}, [innerLabel, thumb].filter(Boolean));
+
+    const content = [];
+
+    const label = $desc.label
+        ? Span({class: 'switch-label'}, $desc.label)
+        : null;
+
+    if(label && ($desc.labelPosition === 'left' || $desc.labelPosition === 'top')) {
+        content.push(label);
+    }
+
+    content.push(input, track);
+
+    if(label && (!$desc.labelPosition || $desc.labelPosition === 'right' || $desc.labelPosition === 'bottom')) {
+        content.push(label);
+    }
+
+    return Label(instance.resolveProps(), content);
+}
+
+const buildThumb = ($desc) => {
+    if($desc.onIcon || $desc.offIcon) {
+        return Div({class: 'switch-thumb'},
+            Span({class: 'switch-icon'},
+                Match($desc.value, {
+                    true:  $desc.onIcon,
+                    false: $desc.offIcon,
+                }),
+            ),
+        );
+    }
+
+    return Div({class: 'switch-thumb'});
+};
+
+const buildInnerLabel = ($desc) => {
+    if(!$desc.innerOnLabel && !$desc.innerOffLabel) return null;
+
+    return Span({class: 'switch-inner-label'},
+        Match($desc.value, {
+            true:  $desc.innerOnLabel  || '',
+            false: $desc.innerOffLabel || '',
+        }),
+    );
+};

package/src/ui/components/switch/switch.css

@@ -0,0 +1,143 @@
+:root {
+    --switch-width:           44px;
+    --switch-height:          24px;
+    --switch-thumb-size:      18px;
+    --switch-thumb-offset:    3px;
+    --switch-border-width:    0px;
+    --switch-track-bg:        var(--gray-lite-3);
+    --switch-track-bg-active: var(--color-primary);
+    --switch-thumb-bg:        var(--background);
+    --switch-thumb-shadow:    0 1px 3px rgba(0, 0, 0, 0.2);
+    --switch-transition:      0.2s ease;
+    --switch-label-gap:       var(--space-cozy);
+}
+
+.switch {
+    display:     inline-flex;
+    align-items: center;
+    gap:         var(--switch-label-gap);
+    cursor:      pointer;
+    user-select: none;
+
+    &.is-label-top,
+    &.is-label-bottom {
+        flex-direction: column;
+        align-items:    flex-start;
+    }
+
+    &.is-disabled {
+        opacity:        0.5;
+        pointer-events: none;
+    }
+
+    &.is-readonly {
+        pointer-events: none;
+    }
+
+    /* Variants */
+    &.is-primary   { --switch-track-bg-active: var(--color-primary); }
+    &.is-success   { --switch-track-bg-active: var(--color-success); }
+    &.is-danger    { --switch-track-bg-active: var(--color-danger);  }
+    &.is-warning   { --switch-track-bg-active: var(--color-warning); }
+    &.is-secondary { --switch-track-bg-active: var(--gray);          }
+    &.is-ghost {
+        --switch-track-bg-active: transparent;
+        --switch-thumb-bg:        var(--color-primary);
+    }
+
+    /* Outline */
+    &.is-outline {
+        --switch-border-width: 2px;
+
+        .switch-track {
+            background: transparent;
+            border:     var(--switch-border-width) solid var(--switch-track-bg);
+        }
+
+        &.is-state-on .switch-track {
+            border-color: var(--switch-track-bg-active);
+        }
+    }
+}
+
+.switch-input {
+    position:       absolute;
+    opacity:        0;
+    width:          0;
+    height:         0;
+    pointer-events: none;
+}
+
+.switch-track {
+    position:      relative;
+    width:         var(--switch-width);
+    height:        var(--switch-height);
+    border-radius: calc(var(--switch-height) / 2);
+    background:    var(--switch-track-bg);
+    transition:    background var(--switch-transition);
+    flex-shrink:   0;
+
+    .is-state-on & {
+        background: var(--switch-track-bg-active);
+    }
+}
+
+.switch-thumb {
+    position:      absolute;
+    top:           calc(var(--switch-thumb-offset) - var(--switch-border-width));
+    left:          calc(var(--switch-thumb-offset) - var(--switch-border-width));
+    width:         var(--switch-thumb-size);
+    height:        var(--switch-thumb-size);
+    border-radius: 50%;
+    background:    var(--switch-thumb-bg);
+    box-shadow:    var(--switch-thumb-shadow);
+    transition:    transform var(--switch-transition);
+    display:       flex;
+    align-items:   center;
+    justify-content: center;
+
+    .is-state-on & {
+        transform: translateX(calc(
+                var(--switch-width) - var(--switch-thumb-size) -
+                var(--switch-thumb-offset) * 2 -
+                var(--switch-border-width) * 2
+        ));
+    }
+
+    .is-state-off & {
+        transform: translateX(0);
+    }
+}
+
+.switch-inner-label {
+    position:       absolute;
+    top:            50%;
+    transform:      translateY(-50%);
+    font-size:      10px;
+    font-weight:    600;
+    color:          var(--switch-thumb-bg);
+    white-space:    nowrap;
+    transition:     left var(--switch-transition), right var(--switch-transition);
+    pointer-events: none;
+
+    .is-state-on & {
+        left:  calc(var(--switch-thumb-offset) + 2px);
+        right: auto;
+    }
+
+    .is-state-off & {
+        right: calc(var(--switch-thumb-offset) + 2px);
+        left:  auto;
+    }
+}
+
+.switch-icon {
+    font-size:   11px;
+    line-height: 1;
+}
+
+.switch-label {
+    font-size:   var(--description-size);
+    color:       var(--color-text-primary);
+    line-height: 1.4;
+}

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

@@ -0,0 +1,54 @@
+import {Div} from '../../../../../elements';
+import './data-table.css';
+
+import {buildColumnsBtn, buildExportBtn, buildFiltersBtn, buildSearch, buildToolbar} from './toolbar';
+import {buildBulkActions, buildBulkButtons, buildBulkCount} from './bulk-actions';
+import {buildTable} from './tables';
+import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from './pagination';
+
+export default function DataTableRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('data-table');
+    // [a11y] aria-label on data table
+    if($desc.label) {
+        props['aria-label'] = $desc.label;
+    }
+
+    const visibleColumns = $desc.columns.filter(col =>
+        col.$description.visible !== false,
+    );
+
+
+    // Build Slots
+    const search  = buildSearch($desc, instance);
+    const filters    = buildFiltersBtn($desc, instance);
+    const exportBtn  = buildExportBtn($desc, instance);
+    const columnsBtn = buildColumnsBtn($desc, instance);
+    const toolbar    = buildToolbar({ search, filters, exportBtn, columnsBtn });
+
+    const bulkCount   = buildBulkCount($desc, instance);
+    const bulkButtons = buildBulkButtons($desc, instance);
+    const bulkActions = buildBulkActions({bulkCount, bulkButtons}, $desc, instance);
+
+    const table      = buildTable($desc, instance, visibleColumns);
+
+    const pageInfo   = buildPageInfo($desc, instance);
+    const pageSize   = buildPageSize($desc, instance);
+    const pageNav    = buildPageNav($desc, instance);
+    const pagination = buildPagination({pageInfo, pageSize, pageNav});
+
+    const slots = {visibleColumns, toolbar, search, filters, exportBtn, columnsBtn, bulkActions, bulkCount, bulkButtons, table, pagination, pageInfo, pageSize, pageNav};
+
+    const layoutFn = $desc.layout || buildDefaultLayout;
+
+    return layoutFn(slots, instance);
+}
+
+const buildDefaultLayout = ({toolbar, bulkActions, table, pagination}) => {
+    return Div({class: 'data-table-layout'}, [
+        toolbar,
+        bulkActions,
+        table,
+        pagination,
+    ]);
+};

package/src/ui/components/table/data-table/bulk-actions.js

@@ -0,0 +1,34 @@
+import {Div, Span, ShowIf} from '../../../../../elements';
+import {Button} from '../../../../components/button';
+
+export const buildBulkActions = ({bulkCount, bulkButtons}, $desc) => {
+    if(!$desc.bulkActions?.length) return null;
+
+    return ShowIf($desc.$selectedRows.is(items => items.length > 0), () => {
+        return Div({class: 'data-table-bulk'}, [bulkCount, bulkButtons]);
+    });
+};
+
+export const buildBulkCount = ($desc) => {
+    return Span({ class: 'data-table-bulk-count' },
+        $desc.$selectedRows.transform(rows => $desc.labels.selected(rows.length)),
+    );
+};
+
+export const buildBulkButtons = ($desc) => {
+    if(!$desc.bulkActions?.length) return null;
+
+    return Div({class: 'data-table-bulk-buttons'},
+        $desc.bulkActions.map(action => {
+            let btn = action.btn;
+            if(!btn) {
+                btn = Button(action.label).small();
+                if(action.danger) {
+                    btn.danger();
+                }
+            }
+            btn.nd.onClick(() => action.onClick($desc.$selectedRows.val()));
+            return btn;
+        }),
+    );
+};

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

@@ -0,0 +1,246 @@
+:root {
+    --data-table-font-size:          var(--description-size);
+    --data-table-cell-padding-v:     var(--space-cozy);
+    --data-table-cell-padding-h:     var(--space-comfortable);
+    --data-table-border-color:       var(--color-border-tertiary);
+    --data-table-header-color:       var(--color-text-secondary);
+    --data-table-header-bg:          var(--color-background-secondary);
+    --data-table-header-weight:      500;
+    --data-table-hover-bg:           var(--color-background-secondary);
+    --data-table-selected-bg:        var(--color-background-info);
+    --data-table-toolbar-bg:         var(--color-background-secondary);
+    --data-table-bulk-bg:            var(--color-background-info);
+    --data-table-pagination-bg:      var(--color-background-secondary);
+    --data-table-spinner-size:       24px;
+}
+
+.data-table {
+    display: flex;
+    flex-direction: column;
+    border: 0.5px solid var(--data-table-border-color);
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+    font-size: var(--data-table-font-size);
+}
+
+/* Layout */
+.data-table-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Toolbar */
+.data-table-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-toolbar-bg);
+    border-bottom: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    flex: 1;
+}
+
+.data-table-toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+
+.data-table-search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    background: var(--color-background-primary);
+    border: 0.5px solid var(--data-table-border-color);
+    border-radius: var(--border-radius-md);
+    padding: 4px var(--space-cozy);
+    min-width: 240px;
+}
+
+.data-table-search {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--data-table-font-size);
+    width: 100%;
+    color: var(--color-text-primary);
+}
+
+/* Bulk actions */
+.data-table-bulk {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-bulk-bg);
+    border-bottom: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-bulk-count {
+    font-size: var(--data-table-font-size);
+    font-weight: var(--data-table-header-weight);
+    color: var(--color-text-info);
+    flex: 1;
+}
+
+.data-table-bulk-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+
+/* Table */
+.data-table-wrapper {
+    position: relative;
+    overflow-x: auto;
+}
+
+.data-table-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th, td {
+        padding: var(--data-table-cell-padding-v) var(--data-table-cell-padding-h);
+        text-align: left;
+        border-bottom: 0.5px solid var(--data-table-border-color);
+
+        &.is-center { text-align: center; }
+        &.is-right  { text-align: right;  }
+        &.is-pinned-left  { position: sticky; left: 0; background: inherit; }
+        &.is-pinned-right { position: sticky; right: 0; background: inherit; }
+    }
+
+    th {
+        font-weight: var(--data-table-header-weight);
+        color:       var(--data-table-header-color);
+        background:  var(--data-table-header-bg);
+        white-space: nowrap;
+    }
+
+    .data-table-th-checkbox,
+    .data-table-td-checkbox { width: 40px; }
+
+    .data-table-th-expand,
+    .data-table-td-expand   { width: 32px; }
+
+    tr.has-click {
+        cursor: pointer;
+        &:hover td { background: var(--data-table-hover-bg); }
+    }
+
+    tr.is-selected td {
+        background: var(--data-table-selected-bg);
+    }
+}
+
+/* Sort */
+.data-table-sort-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.data-table-sort-icon {
+    font-size: 11px;
+    color: var(--color-text-secondary);
+}
+
+/* Expand */
+.data-table-expand-btn {
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--color-text-secondary);
+}
+
+.data-table-detail-row td {
+    background: var(--color-background-secondary);
+    padding: var(--space-comfortable);
+}
+
+/* Empty */
+.data-table-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-large);
+    color: var(--color-text-secondary);
+}
+
+/* Loading */
+.data-table-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--color-background-primary) 80%, transparent);
+}
+
+.data-table-spinner {
+    width: var(--data-table-spinner-size);
+    height: var(--data-table-spinner-size);
+    border: 2px solid var(--data-table-border-color);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: data-table-spin 0.6s linear infinite;
+}
+
+@keyframes data-table-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Pagination */
+.data-table-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-pagination-bg);
+    border-top: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-page-info {
+    font-size: var(--data-table-font-size);
+    color: var(--color-text-secondary);
+    flex: 1;
+}
+
+.data-table-pagination-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+}
+
+.data-table-page-size-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    font-size: var(--data-table-font-size);
+    color: var(--color-text-secondary);
+}
+
+.data-table-page-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.data-table-page-buttons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.data-table-page-ellipsis {
+    padding: 0 4px;
+    color: var(--color-text-secondary);
+    font-size: var(--data-table-font-size);
+}

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

@@ -0,0 +1,56 @@
+import {Div, Span} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+import {SelectField} from '../../../../components/form';
+import {Pagination} from '../../../../components/pagination';
+
+export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
+    return Div({class: 'data-table-pagination'}, [
+        pageInfo,
+        Div({class: 'data-table-pagination-right'}, [pageSize, pageNav]),
+    ]);
+};
+
+export const buildPageInfo = ($desc) => {
+    const pageInfo = $.computed((total, data, pageSize, page) => {
+        total = total || data?.length || 0;
+        const pages = Math.ceil(total / pageSize);
+        return $desc.labels.results(total || 0, page || 0, pages || 0);
+    }, [$desc.$total, $desc.data, $desc.$pageSize, $desc.$currentPage ]);
+
+    return Span({class: 'data-table-page-info'}, pageInfo);
+};
+
+export const buildPageSize = ($desc, instance) => {
+    if(!$desc.pageSizes?.length) {
+        return null;
+    }
+
+    const select = SelectField({ class: 'data-table-page-size' })
+        .model($desc.$pageSize)
+        .options($desc.pageSizes)
+        .onChange((value) => {
+            const size = Number(value);
+            $desc.$pageSize.set(size);
+            $desc.$currentPage.set(1);
+            instance.emit('page', 1, size);
+        });
+
+    return Div({class: 'data-table-page-size-wrapper'}, [
+        Span({class: 'data-table-page-size-label'}, $desc.labels.rowsPerPage),
+        select,
+    ]);
+};
+
+export const buildPageNav = ($desc, instance) => {
+    return Div({class: 'data-table-page-nav'}, [
+        Pagination()
+            .currentPage($desc.$currentPage)
+            .totalItems($desc.$total)
+            .pageSize($desc.$pageSize)
+            .showFirstLast(true)
+            .showPreviousNext(true)
+            .onPageChange((page) => {
+                instance.emit('page', page, $desc.$pageSize.val());
+            }),
+    ]);
+};