native-document 1.0.15 → 1.0.16-8.2

package/src/ui/components/stepper/StepperStepRender.js

@@ -0,0 +1,67 @@
+import {Div, Span} from '../../../core/elements';
+import { Observable } from '../../../core/data/Observable';
+
+export default function StepperStepRender($desc, instance) {
+    if($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const index = $desc.index;
+    const stepper = $desc.stepper;
+
+    const props = instance.getEditableProps();
+    props.class.add('stepper-step');
+
+    const isActive = Observable.computed(() => {
+        return stepper.$description.currentStep.val() === index.val();
+    }, [stepper.$description.currentStep, index]) ;
+
+    const indicatorClass = {
+        'step-indicator' : true,
+        '_': $desc.status.transform((status) => 'is-' + status),
+        'is-active': isActive,
+    };
+
+    const stateIndicator = $desc.status.transform((status) => {
+        if(status === 'completed') {
+            return '✓';
+        }
+        if(status === 'error') {
+            return '✕';
+        }
+        return '';
+    });
+
+    const indicatorContent = $desc.icon || (stepper.$description.showNumbers ? index.transform((value) => value + 1) : null);
+
+    const labelClass = isActive.transform(a => 'step-label' + (a ? ' is-active' : ''));
+
+    const labelContent = [
+        Span({ class: labelClass }, $desc.label),
+    ];
+
+    if($desc.description) {
+        labelContent.push(Span({class: 'step-description'}, $desc.description));
+    }
+
+    if($desc.optional.val()) {
+        labelContent.push(Span({class: 'step-optional'}, 'Optional'));
+    }
+
+    const stepEl = Div(instance.resolveProps(), [
+        Div({class: indicatorClass}, [
+            indicatorContent,
+            Span({class: 'step-state-indicator'}, stateIndicator),
+        ]),
+        Div({class: 'step-label-wrapper'}, labelContent),
+    ]);
+
+    stepEl.nd.onClick(() => {
+        if($desc.disabled.val()) {
+            return;
+        }
+        stepper.goToStep(index.val());
+    });
+
+    return stepEl;
+}

package/src/ui/components/stepper/stepper.css

@@ -0,0 +1,359 @@
+:root {
+    --stepper-connector-color: var(--gray-lite-3);
+    --stepper-connector-color-active: var(--color-primary);
+    --stepper-connector-color-completed: var(--color-success);
+    --stepper-connector-thickness: 2px;
+
+    --step-indicator-size: 32px;
+    --step-indicator-bg: var(--gray-lite-4);
+    --step-indicator-bg-active: var(--color-primary);
+    --step-indicator-bg-completed: var(--color-success);
+    --step-indicator-bg-error: var(--color-danger);
+    --step-indicator-color: var(--gray);
+    --step-indicator-color-active: var(--white);
+    --step-indicator-font-size: var(--hint-size);
+    --step-indicator-font-weight: 600;
+    --step-state-indicator-width: 20px;
+    --step-state-indicator-height: 20px;
+
+    --step-label-size: var(--hint-size);
+    --step-label-color: var(--gray);
+    --step-label-color-active: var(--text-color);
+    --step-label-weight: 500;
+
+    --step-description-size: var(--note-size);
+    --step-description-color: var(--gray);
+
+    --stepper-content-padding: var(--space-comfortable) 0;
+}
+
+.stepper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &.is-horizontal {
+        .stepper-nav {
+            flex-direction: row;
+            align-items: flex-start;
+        }
+
+        .stepper-step-wrapper {
+            flex: 1;
+            flex-direction: row;
+            align-items: flex-start;
+            &:last-child {
+                flex: none;
+                .stepper-connector {
+                    display:  none;
+                }
+            }
+        }
+
+        .stepper-step {
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .stepper-connector {
+            flex: 1;
+            height: var(--stepper-connector-thickness);
+            margin-top: calc(var(--step-indicator-size) / 2);
+            margin-left: 0;
+        }
+    }
+
+    &.is-vertical {
+        .stepper-nav {
+            flex-direction: column;
+        }
+
+        .stepper-step-wrapper {
+            flex-direction: column;
+        }
+
+        .stepper-step {
+            flex-direction: row;
+            align-items: center;
+            gap: var(--space-comfortable);
+        }
+
+        .stepper-connector {
+            width: var(--stepper-connector-thickness);
+            height: 32px;
+            margin-left: calc(var(--step-indicator-size) / 2 - var(--stepper-connector-thickness) / 2);
+        }
+    }
+
+    &.is-alternative-label {
+        .stepper-step {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .step-label-wrapper {
+            align-items: center;
+            text-align: center;
+            margin-top: var(--space-cozy);
+        }
+    }
+}
+
+.stepper-nav {
+    display: flex;
+    width: 100%;
+}
+
+.stepper-step-wrapper {
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+}
+
+.stepper-step {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.stepper-connector {
+    background: var(--stepper-connector-color);
+    border-radius: 2px;
+    transition: background 0.3s ease;
+
+    &.is-completed {
+        background: var(--step-indicator-bg-completed);
+    }
+}
+
+.step-indicator {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--step-indicator-size);
+    height: var(--step-indicator-size);
+    border-radius: 50%;
+    background: var(--step-indicator-bg);
+    color: var(--step-indicator-color);
+    font-size: var(--step-indicator-font-size);
+    font-weight: var(--step-indicator-font-weight);
+    flex-shrink: 0;
+    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
+
+    &.is-active {
+        background: var(--step-indicator-bg-active);
+        color: var(--step-indicator-color-active);
+        transform: scale(1.1);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
+    }
+
+    &.is-completed {
+        background: var(--step-indicator-bg-completed);
+        color: var(--step-indicator-color-active);
+    }
+
+    &.is-error {
+        background: var(--step-indicator-bg-error);
+        color: var(--step-indicator-color-active);
+    }
+}
+
+.step-state-indicator {
+    position: absolute;
+    font-size: var(--step-indicator-font-size);
+    font-weight: 600;
+    top: -2px;
+    right: -6px;
+    width: var(--step-state-indicator-width);
+    height: var(--step-state-indicator-height);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    border: 2px solid var(--white);
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    padding: 2px;
+
+    .is-pending & {
+        display: none;
+    }
+
+    .is-completed & {
+        background: var(--step-indicator-bg-completed);
+        content: '✓';
+    }
+
+    .is-error & {
+        background: var(--step-indicator-bg-error);
+        content: '✕';
+    }
+}
+
+.step-label-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.step-label {
+    font-size: var(--step-label-size);
+    font-weight: var(--step-label-weight);
+    color: var(--step-label-color);
+    transition: color 0.2s ease;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    &.is-active {
+        color: var(--step-label-color-active);
+    }
+}
+
+.step-description {
+    font-size: var(--step-description-size);
+    color: var(--step-description-color);
+}
+
+.step-optional {
+    font-size: var(--step-description-size);
+    color: var(--step-description-color);
+    font-style: italic;
+}
+
+.stepper-content {
+    padding: var(--stepper-content-padding);
+}
+
+.stepper-panel {
+    &.is-hidden {
+        display: none;
+    }
+}
+
+.stepper.is-horizontal {
+    @media (max-width: 768px) {
+        flex-direction: column;
+
+        .stepper-nav {
+            flex-direction: column;
+        }
+
+        .stepper-step-wrapper {
+            flex-direction: column;
+            width: 100%;
+        }
+
+        .stepper-step {
+            flex-direction: row;
+            align-items: center;
+            width: 100%;
+        }
+
+        .stepper-connector {
+            width: var(--stepper-connector-thickness);
+            height: 24px;
+            margin-left: calc(var(--step-indicator-size) / 2 - var(--stepper-connector-thickness) / 2);
+            margin-top: 0;
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    .step-label-wrapper {
+        display: none;
+    }
+
+    .stepper-step.is-active .step-label-wrapper {
+        display: flex;
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 120px;
+    }
+}
+
+
+.stepper.has-navigation-at-top,
+.stepper.has-navigation-at-bottom {
+    flex-direction: column;
+}
+
+.stepper.has-navigation-at-bottom .stepper-nav {
+    margin-top: auto;
+    order: 2;
+}
+
+.stepper.has-navigation-at-trailing,
+.stepper.has-navigation-at-leading {
+    .stepper-step-wrapper:last-child {
+        .stepper-connector {
+            display: none;
+        }
+    }
+}
+.stepper.has-navigation-at-leading {
+    flex-direction: row;
+
+    .stepper-nav {
+        flex-direction: column;
+        align-items: flex-start;
+        width: auto;
+    }
+
+    .stepper-step {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .stepper-connector {
+        margin-left: 15px;
+        width: 2px;
+        min-height: 20px;
+    }
+
+    .stepper-content {
+        flex: 1;
+        padding-left: var(--space-comfortable);
+    }
+}
+
+.stepper.has-navigation-at-trailing {
+    flex-direction: row;
+    .stepper-nav {
+        flex-direction: column;
+        align-items: flex-end;
+        width: auto;
+    }
+    .stepper-step-wrapper {
+        align-items: flex-end;
+    }
+
+    .stepper-step {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .stepper-connector {
+        margin-right: 15px;
+        width: 2px;
+        min-height: 20px;
+    }
+
+    .stepper-content {
+        flex: 1;
+        padding-right: var(--space-comfortable);
+    }
+}

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

@@ -0,0 +1,83 @@
+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,
+    });
+
+    $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,50 @@
+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');
+
+    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,
+    ]);
+};