native-document 1.0.16 → 1.0.17-1.2

package/src/ui/components/spinner/SpinnerRender.js

@@ -0,0 +1,50 @@
+import {Div, Span} from '../../../core/elements';
+
+import './spinner.css';
+
+export default function SpinnerRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('spinner');
+
+    props.class.add('is-' + ($desc.type || 'circle'));
+    props.class.add('is-' + ($desc.size || 'small'));
+    props.class.add('is-' + ($desc.speed || 'normal'));
+
+    if($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    if($desc.overlay) {
+        props.class.add('has-overlay');
+    }
+    if($desc.fullScreenOverlay) {
+        props.class.add('has-full-screen-overlay');
+    }
+    if($desc.backdrop) {
+        props.class.add('has-backdrop');
+    }
+
+    if($desc.labelPosition) {
+        props.class.add('is-label-' + $desc.labelPosition);
+    }
+
+    const iconStyle = {};
+
+    if($desc.color) {
+        iconStyle['--spinner-color'] = $desc.color;
+    }
+
+    const icon = Div({ class: 'spinner-icon', style: iconStyle });
+
+    // [a11y] aria-label: use label if provided, fallback to 'Loading'
+    props['aria-label'] = $desc.label || 'Loading';
+
+    const content = [icon];
+
+    if($desc.label) {
+        content.push(Span({class: 'spinner-label'}, $desc.label));
+    }
+
+    return Div(instance.resolveProps(), content);
+}

package/src/ui/components/spinner/spinner.css

@@ -0,0 +1,152 @@
+:root {
+    --spinner-size-extra-small: 16px;
+    --spinner-size-small: 24px;
+    --spinner-size-medium: 36px;
+    --spinner-size-large: 48px;
+    --spinner-size-extra-large: 64px;
+
+    --spinner-speed-slow: 1.2s;
+    --spinner-speed-normal: 0.8s;
+    --spinner-speed-fast: 0.4s;
+
+    --spinner-thickness: 3px;
+
+    --spinner-color: var(--color-primary);
+    --spinner-color-primary: var(--color-primary);
+    --spinner-color-secondary: var(--color-secondary-text);
+    --spinner-color-success: var(--color-success);
+    --spinner-color-danger: var(--color-danger);
+    --spinner-color-warning: var(--color-warning);
+    --color-on-backdrop: #f8f9fa;
+}
+
+.spinner {
+    --spinner-speed: var(--spinner-speed-normal);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-cozy);
+
+    &.has-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-cozy);
+        background-color: rgba(255, 255, 255, 0.7);
+        z-index: 1000;
+        &.has-full-screen-overlay {
+            position: fixed;
+        }
+    }
+    &.has-backdrop {
+        background-color: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(2px);
+
+        --spinner-color: var(--color-on-backdrop);
+
+        .spinner-label {
+            color: var(--color-on-backdrop);
+        }
+    }
+
+    &.is-extra-small .spinner-icon {
+        width: var(--spinner-size-extra-small);
+        height: var(--spinner-size-extra-small);
+    }
+
+    &.is-small .spinner-icon {
+        width: var(--spinner-size-small);
+        height: var(--spinner-size-small);
+    }
+
+    &.is-medium .spinner-icon {
+        width: var(--spinner-size-medium);
+        height: var(--spinner-size-medium);
+    }
+
+    &.is-large .spinner-icon {
+        width: var(--spinner-size-large);
+        height: var(--spinner-size-large);
+    }
+
+    &.is-extra-large .spinner-icon {
+        width: var(--spinner-size-extra-large);
+        height: var(--spinner-size-extra-large);
+    }
+
+    &.is-primary {
+        --spinner-color: var(--spinner-color-primary);
+    }
+
+    &.is-secondary {
+        --spinner-color: var(--spinner-color-secondary);
+    }
+
+    &.is-success {
+        --spinner-color: var(--spinner-color-success);
+    }
+
+    &.is-danger {
+        --spinner-color: var(--spinner-color-danger);
+    }
+
+    &.is-warning {
+        --spinner-color: var(--spinner-color-warning);
+    }
+
+    &.is-slow {
+        --spinner-speed: var(--spinner-speed-slow);
+    }
+
+    &.is-normal {
+        --spinner-speed: var(--spinner-speed-normal);
+    }
+
+    &.is-fast {
+        --spinner-speed: var(--spinner-speed-fast);
+    }
+
+    &.is-label-left {
+        flex-direction: row;
+    }
+
+    &.is-label-right {
+        flex-direction: row-reverse;
+    }
+
+    &.is-label-top {
+        flex-direction: column-reverse;
+    }
+
+    &.is-label-bottom {
+        flex-direction: column;
+    }
+}
+
+.spinner-icon {
+    flex-shrink: 0;
+}
+
+.spinner.is-circle .spinner-icon {
+    border: var(--spinner-thickness) solid transparent;
+    border-top-color: var(--spinner-color);
+    border-radius: 50%;
+    animation: spinner-rotate var(--spinner-speed) linear infinite;
+}
+
+.spinner-label {
+    font-size: var(--description-size);
+    color: var(--text-color);
+}
+
+@keyframes spinner-rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}

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

@@ -0,0 +1,98 @@
+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});
+
+    // [a11y] aria-orientation and aria-valuenow for resizable separator
+    props['aria-orientation'] = $desc.orientation === 'vertical' ? 'horizontal' : 'vertical';
+    props['tabindex'] = props['tabindex'] ?? '0';
+
+    // 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,42 @@
+import {Div} from '../../../core/elements';
+
+export default function SplitterPanelRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('splitter-panel');
+    // [a11y] aria-label if provided
+    if($desc.label) {
+        props['aria-label'] = $desc.label;
+    }
+
+    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,77 @@
+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'));
+    // [a11y] aria-orientation
+    props['aria-orientation'] = $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';