native-document 1.0.14 → 1.0.16-8.1

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

@@ -0,0 +1,94 @@
+import {Div} from '../../../core/elements';
+
+export default function SplitterGutterRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('splitter-gutter');
+    props.class.add('is-' + ($desc.orientation || 'horizontal'));
+    props.class.add({'is-dragging': $desc.isDragging});
+
+    // props.style.add({
+    //     [($desc.orientation === 'vertical') ? 'height' : 'width']: ($desc.size || 8) + 'px',
+    // });
+
+    const gutter = Div(instance.resolveProps(),
+        Div({class: 'splitter-gutter-handle'}),
+    );
+
+    setupDrag(gutter, $desc, instance);
+
+    return gutter;
+}
+
+const setupDrag = (gutter, $desc, instance) => {
+    const isHorizontal = $desc.orientation !== 'vertical';
+    const cursor       = isHorizontal ? 'is-col-resize' : 'is-row-resize';
+
+    let isDragging = false;
+    let startPos   = 0;
+    let startSizeA = 0;
+    let startSizeB = 0;
+
+    const getSize = (panel) => {
+        const el = panel.$element;
+        if(!el) {
+            return 0;
+        }
+        return isHorizontal ? el.offsetWidth : el.offsetHeight;
+    };
+
+    const onMouseDown = (e) => {
+        isDragging = true;
+        startPos   = isHorizontal ? e.clientX : e.clientY;
+        startSizeA = getSize($desc.leftPanel);
+        startSizeB = getSize($desc.rightPanel);
+
+        $desc.isDragging.set(true);
+        document.body.classList.add('is-splitter-dragging', cursor);
+        instance.emit('dragStart', {sizeA: startSizeA, sizeB: startSizeB});
+    };
+
+    const onMouseMove = (e) => {
+        if(!isDragging) {
+            return;
+        }
+
+        const delta     = (isHorizontal ? e.clientX : e.clientY) - startPos;
+        const leftDesc  = $desc.leftPanel.$description;
+        const rightDesc = $desc.rightPanel.$description;
+
+        const minA = leftDesc.minSize  || 0;
+        const minB = rightDesc.minSize || 0;
+        const maxA = leftDesc.maxSize  || Infinity;
+        const maxB = rightDesc.maxSize || Infinity;
+
+        const newSizeA    = Math.min(maxA, Math.max(minA, startSizeA + delta));
+        const actualDelta = newSizeA - startSizeA;
+        const newSizeB    = Math.min(maxB, Math.max(minB, startSizeB - actualDelta));
+        const actualDeltaB = startSizeB - newSizeB;
+        const finalSizeA   = Math.min(maxA, Math.max(minA, startSizeA + actualDeltaB));
+
+        $desc.leftPanel.size(finalSizeA);
+        $desc.rightPanel.size(newSizeB);
+
+        instance.emit('drag', {sizeA: newSizeA, sizeB: newSizeB});
+    };
+
+    const onMouseUp = () => {
+        if(!isDragging) {
+            return;
+        }
+
+        isDragging = false;
+        $desc.isDragging.set(false);
+        document.body.classList.remove('is-splitter-dragging', cursor);
+        instance.emit('dragEnd', {
+            sizeA: getSize($desc.leftPanel),
+            sizeB: getSize($desc.rightPanel),
+        });
+    };
+
+    gutter.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+};

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,75 @@
+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,39 @@
+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,41 @@
+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,5 @@
+export { default as VStackRender } from './v-stack/VStackRender';
+export { default as HStackRender } from './h-stack/HStackRender';
+export { default as AbsoluteStackRender } from './absolute-stack/AbsoluteStackRender';
+export { default as RelativeStackRender } from './relative-stack/RelativeStackRender';
+export { default as FixedStackRender } from './fixed-stack/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,6 @@
+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,71 @@
+import {Div, 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));
+};