native-document 1.0.139 → 1.0.140

package/src/ui/components/splitter/SplitterPanelRender.js

@@ -0,0 +1,38 @@
+import {Div} from '../../../core/elements';
+
+export default function SplitterPanelRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('splitter-panel');
+
+    if($desc.collapsed) {
+        props.class.add('is-collapsed');
+    }
+
+    ($desc.orientation === 'vertical')
+        ? setupVerticalLimit(props, $desc)
+        : setupHorizontalLimit(props, $desc);
+
+    return Div(instance.resolveProps(), $desc.content);
+}
+
+const setupVerticalLimit = (props, $desc) => {
+    if($desc.minSize) {
+        props.style.add('minHeight', toUnit($desc.minSize));
+    }
+    if($desc.maxSize) {
+        props.style.add('maxHeight', toUnit($desc.maxSize));
+    }
+
+    props.style.add('height', $desc.size.transform(toUnit));
+}
+const setupHorizontalLimit = (props, $desc) => {
+    if($desc.minSize) {
+        props.style.add('minWidth', toUnit($desc.minSize));
+    }
+    if($desc.maxSize) {
+        props.style.add('maxWidth', toUnit($desc.maxSize));
+    }
+    props.style.add('width', $desc.size.transform(toUnit));
+}
+
+const toUnit = (value) => typeof value === 'number' ? value + 'px' : value;

package/src/ui/components/splitter/SplitterRender.js

@@ -0,0 +1,74 @@
+import {Div} from '../../../core/elements';
+import {ElementCreator} from '../../../core/wrappers/ElementCreator';
+import SplitterGutter from '../../../components/splitter/SplitterGutter';
+import './splitter.css';
+
+export default function SplitterRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('splitter');
+    props.class.add('is-' + ($desc.orientation || 'horizontal'));
+
+    const container = Div(instance.resolveProps());
+
+    if($desc.panels.__$isObservableArray) {
+        $desc.panels.subscribe((panels) => {
+            buildPanels(container, panels, $desc, instance);
+        });
+        buildPanels(container, $desc.panels.val(), $desc, instance);
+    }
+    else {
+        buildPanels(container, $desc.panels, $desc, instance);
+    }
+
+    return container;
+}
+
+const buildPanels = (container, panels, $desc, instance) => {
+    container.innerHTML = '';
+
+    panels.forEach((panel, index) => {
+        panel.$description.orientation = $desc.orientation || 'horizontal';
+        container.appendChild(ElementCreator.getChild(panel));
+
+        if(index < panels.length - 1) {
+            const nextPanel = panels[index + 1];
+            const canResize = panel.$description.resizable !== false
+                && nextPanel.$description.resizable !== false;
+
+            if(canResize) {
+                const gutter = SplitterGutter(panel, nextPanel);
+
+                if($desc.orientation === 'vertical') {
+                    gutter.vertical();
+                }
+
+                if($desc.gutterSize) {
+                    gutter.size($desc.gutterSize);
+                }
+
+                gutter.onDrag((sizes) => instance.emit('resize', {...sizes, index}));
+
+                container.appendChild(ElementCreator.getChild(gutter));
+            }
+        }
+    });
+
+    setDefaultSizes(panels, $desc);
+};
+
+const setDefaultSizes = (panels, $desc) => {
+    const isHorizontal = $desc.orientation !== 'vertical';
+    const gutterSize   = $desc.gutterSize || 8;
+    const gutterCount  = panels.length - 1;
+    const count        = panels.length;
+
+    panels.forEach((panel) => {
+        if(panel.$description.size.val() != null) {
+            return;
+        }
+
+        const defaultSize = `calc(${100 / count}% - ${(gutterCount * gutterSize) / count}px)`;
+        panel.size(defaultSize);
+    });
+};

package/src/ui/components/splitter/splitter.css

@@ -0,0 +1,128 @@
+:root {
+    --splitter-gutter-size: 1px;
+    --splitter-gutter-hit-area: 8px;
+    --splitter-gutter-color: var(--gray-lite-3);
+    --splitter-gutter-handle-size: 32px;
+    --splitter-gutter-handle-color: var(--gray-lite-2);
+    --splitter-gutter-handle-color-hover: var(--color-primary);
+}
+
+.splitter {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &.is-horizontal {
+        flex-direction: row;
+    }
+
+    &.is-vertical {
+        flex-direction: column;
+    }
+}
+
+.splitter-panel {
+    overflow: auto;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+
+    &.is-collapsed {
+        overflow: hidden;
+        flex: none !important;
+        width: 0 !important;
+        height: 0 !important;
+    }
+}
+
+.splitter-gutter {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+
+    &.is-horizontal {
+        width: var(--splitter-gutter-hit-area);
+        height: 100%;
+        cursor: col-resize;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: var(--splitter-gutter-size);
+            height: 100%;
+            background: var(--splitter-gutter-color);
+            transition: background 0.15s ease;
+        }
+
+        .splitter-gutter-handle {
+            width: 6px;
+            height: var(--splitter-gutter-handle-size);
+            border-radius: 4px;
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &.is-vertical {
+        width: 100%;
+        height: var(--splitter-gutter-hit-area);
+        cursor: row-resize;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            height: var(--splitter-gutter-size);
+            width: 100%;
+            background: var(--splitter-gutter-color);
+            transition: background 0.15s ease;
+        }
+
+        .splitter-gutter-handle {
+            height: 6px;
+            width: var(--splitter-gutter-handle-size);
+            border-radius: 4px;
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &:hover, &.is-dragging {
+        &::before {
+            background: var(--splitter-gutter-handle-color-hover);
+        }
+
+        .splitter-gutter-handle {
+            background: var(--splitter-gutter-handle-color-hover);
+        }
+    }
+}
+
+.splitter-gutter-handle {
+    background: var(--splitter-gutter-handle-color);
+    pointer-events: none;
+    transition: background 0.15s ease;
+}
+
+body.is-splitter-dragging {
+    user-select: none;
+
+    &.is-col-resize {
+        cursor: col-resize !important;
+    }
+
+    &.is-row-resize {
+        cursor: row-resize !important;
+    }
+}

package/src/ui/components/stacks/PositionStackRender.js

@@ -0,0 +1,38 @@
+import {Div} from "../../../core/elements";
+import './position-stack.css';
+
+export default function PositionStackRender(mainClass, $desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add(mainClass);
+
+    const style = {};
+
+    if($desc.top !== null) {
+        style.top = $desc.top;
+    }
+    if($desc.right !== null) {
+        style.right = $desc.right;
+    }
+    if($desc.bottom !== null) {
+        style.bottom = $desc.bottom;
+    }
+    if($desc.left !== null) {
+        style.left = $desc.left;
+    }
+    if($desc.width !== null) {
+        style.width = $desc.width;
+    }
+    if($desc.height !== null) {
+        style.height = $desc.height;
+    }
+    if($desc.zIndex !== null) {
+        style.zIndex = $desc.zIndex;
+    }
+    if($desc.anchor) {
+        props.class.add('is-' + $desc.anchor);
+    }
+
+    props.style.add(style);
+
+    return Div(instance.resolveProps(), $desc.content);
+};

package/src/ui/components/stacks/StackRender.js

@@ -0,0 +1,42 @@
+import {Div} from "../../../core/elements";
+
+import './stack.css';
+
+
+export default function StackRender(mainClass, $desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('stack '+mainClass);
+
+    if ($desc.spacing) {
+        if(typeof $desc.spacing === 'number') {
+            props.style.add('gap', $desc.spacing);
+        }
+        else if(typeof $desc.spacing === 'string' && /[0-9]+/.test($desc.spacing)) {
+            props.style.add('gap', $desc.spacing);
+        }
+        else if ($desc.spacing?.__$Observable) {
+            props.style.add('gap', $desc.spacing.transform(v => typeof v === 'number' ? v + 'px' : v));
+        }
+        else {
+            props.class.add('has-gap-'+$desc.spacing);
+        }
+    }
+
+    props.class.add('is-align-'+$desc.alignment);
+    props.class.add('is-justify-'+$desc.justifyContent);
+
+    if($desc.wrap) {
+        props.class.add('is-wrap');
+    }
+    if($desc.shrink) {
+        props.class.add('is-shrink');
+    }
+    if($desc.grow) {
+        props.class.add('is-grow');
+    }
+    if($desc.reverse) {
+        props.class.add('is-reverse');
+    }
+
+    return Div(instance.resolveProps(), $desc.content);
+}

package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js

@@ -0,0 +1,5 @@
+import PositionStackRender from "../PositionStackRender";
+
+const AbsoluteStackRender = PositionStackRender.bind(null, 'absolute-stack');
+
+export default AbsoluteStackRender;

package/src/ui/components/stacks/fixed-stack/FixedStackRender.js

@@ -0,0 +1,5 @@
+import PositionStackRender from "../PositionStackRender";
+
+const FixedStackRender = PositionStackRender.bind(null, 'fixed-stack');
+
+export default FixedStackRender;

package/src/ui/components/stacks/h-stack/HStackRender.js

@@ -0,0 +1,7 @@
+import StackRender from "../StackRender";
+
+import './h-stack.css';
+
+const HStackRender = StackRender.bind(null, 'h-stack');
+
+export default HStackRender;

package/src/ui/components/stacks/h-stack/h-stack.css

@@ -0,0 +1,4 @@
+.h-stack {
+    flex-direction: row;
+    align-items: center;
+}

package/src/ui/components/stacks/index.js

@@ -0,0 +1,15 @@
+import VStackRender from "./v-stack/VStackRender";
+import HStackRender from "./h-stack/HStackRender";
+import AbsoluteStackRender from "./absolute-stack/AbsoluteStackRender";
+import RelativeStackRender from "./relative-stack/RelativeStackRender";
+import FixedStackRender from "./fixed-stack/FixedStackRender";
+
+
+
+export {
+    VStackRender,
+    HStackRender,
+    AbsoluteStackRender,
+    RelativeStackRender,
+    FixedStackRender,
+}

package/src/ui/components/stacks/position-stack.css

@@ -0,0 +1,62 @@
+.fixed-stack {
+    position: fixed;
+}
+
+.relative-stack {
+    position: relative;
+}
+
+.absolute-stack {
+    position: absolute;
+}
+
+.fixed-stack,
+.absolute-stack {
+    &.is-top-leading {
+        top: 0;
+        left: 0;
+    }
+    &.is-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    &.is-top-trailing {
+        top: 0;
+        right: 0;
+    }
+    &.is-center-leading {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    &.is-center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    &.is-center-trailing {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    &.is-bottom-leading {
+        bottom: 0;
+        left: 0;
+    }
+    &.is-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    &.is-bottom-trailing {
+        bottom: 0;
+        right: 0;
+    }
+    &.is-fill {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}

package/src/ui/components/stacks/relative-stack/RelativeStackRender.js

@@ -0,0 +1,7 @@
+import PositionStackRender from "../PositionStackRender";
+
+import './relative-stack.css';
+
+const RelativeStackRender = PositionStackRender.bind(null, 'relative-stack');
+
+export default RelativeStackRender;

package/src/ui/components/stacks/relative-stack/relative-stack.css

@@ -0,0 +1,3 @@
+.relative-stack{
+    position:relative;
+}

package/src/ui/components/stacks/stack.css

@@ -0,0 +1,78 @@
+.stack {
+    display: flex;
+    flex: 1;
+    align-self: stretch;
+
+    &.is-horizontal {
+        flex-direction: row;
+    }
+    &.is-vertical {
+        flex-direction: column;
+    }
+    &.is-reverse.is-horizontal {
+        flex-direction: row-reverse;
+    }
+    &.is-reverse.is-vertical {
+        flex-direction: column-reverse;
+    }
+    &.is-wrap {
+        flex-wrap: wrap;
+    }
+    &.is-grow {
+        flex-grow: 1;
+    }
+    &.is-shrink {
+        flex-shrink: 1;
+    }
+    &.is-justify-start {
+        justify-content: flex-start;
+    }
+    &.is-justify-center {
+        justify-content: center;
+    }
+    &.is-justify-end {
+        justify-content: flex-end;
+    }
+    &.is-justify-between {
+        justify-content: space-between;
+    }
+    &.is-justify-around {
+        justify-content: space-around;
+    }
+    &.is-align-leading {
+        align-items: flex-start;
+    }
+    &.is-align-center {
+        align-items: center;
+    }
+    &.is-align-trailing {
+        align-items: flex-end;
+    }
+    &.is-align-stretch {
+        align-items: stretch;
+    }
+    &.has-gap-tiny {
+        gap: var(--space-tiny);
+    }
+    &.has-gap-tight {
+        gap: var(--space-tight);
+    }
+    &.has-gap-cozy {
+        gap: var(--space-cozy);
+    }
+    &.has-gap-cozy-comfortable {
+        gap: var(--space-cozy-comfortable);
+    }
+    &.has-gap-comfortable {
+        gap: var(--space-comfortable);
+    }
+    &.has-gap-relaxed {
+        gap: var(--space-relaxed);
+    }
+    &.has-gap-loose {
+        gap: var(--space-loose);
+    }
+    &.has-gap-spacious {
+        gap: var(--space-spacious);
+    }
+}

package/src/ui/components/stacks/v-stack/VStackRender.js

@@ -0,0 +1,5 @@
+import StackRender from "../StackRender";
+import './v-stack.css';
+
+const VStackRender = StackRender.bind(null, 'v-stack');
+export default VStackRender;

package/src/ui/components/stacks/v-stack/v-stack.css

@@ -0,0 +1,4 @@
+.v-stack {
+    flex-direction: column;
+    align-items: flex-start;
+}

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

@@ -0,0 +1,70 @@
+import {Div, Span, ForEachArray, Match} from '../../../core/elements';
+import './stepper.css';
+
+export default function StepperRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('stepper');
+    props.class.add('is-' + ($desc.orientation || 'horizontal'));
+    props.class.add('has-navigation-at-' + $desc.position);
+
+    if($desc.alternativeLabel) {
+        props.class.add('is-alternative-label');
+    }
+
+    const nav = buildNav($desc, instance);
+    const content = buildContent($desc, instance);
+
+    const order = ($desc.position === 'top' || $desc.position === 'leading')
+        ? [nav, content]
+        : [content, nav];
+
+    return Div(instance.resolveProps(), order);
+}
+
+const buildNav = ($desc, instance) => {
+    return Div({class: 'stepper-nav'},
+        ForEachArray($desc.visibleSteps, (step, index) => {
+            step.$setStepper(instance);
+            const items = [];
+
+            items.push(step);
+            if($desc.showConnector) {
+                items.push(buildConnector(index, $desc));
+            }
+
+            return Div({class: 'stepper-step-wrapper'}, items);
+        })
+    );
+};
+
+const buildConnector = (index, $desc) => {
+    if($desc.renderStepIndicatorConnector) {
+        return $desc.renderStepIndicatorConnector(index);
+    }
+
+    const isCompleted = $desc.currentStep.is(current => current > index);
+
+    return Div({
+        class: isCompleted.transform(c => 'stepper-connector' + (c ? ' is-completed' : '')),
+    });
+};
+
+const buildContent = ($desc, instance) => {
+    if($desc.renderContent) {
+        return $desc.renderContent($desc.steps, $desc, instance);
+    }
+
+    const contents = {};
+    $desc.steps.forEach((step, index) => {
+        contents[index] = () => {
+            const isActive = $desc.currentStep.is(index);
+
+            return Div({
+                class: isActive.transform(a => 'stepper-panel' + (a ? '' : ' is-hidden')),
+            }, step.$description.content);
+        };
+    })
+
+    return Div({class: 'stepper-content'}, Match($desc.currentStep, contents));
+};

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

@@ -0,0 +1,67 @@
+import {Div, Span} from '../../../core/elements';
+import { Observable } from "../../../../index";
+
+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 '';
+    });
+
+    let 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;
+}