native-document 1.0.138 → 1.0.140

package/src/ui/components/progress/progress.css

@@ -0,0 +1,197 @@
+:root {
+    --progress-height-small: 4px;
+    --progress-height-medium: 8px;
+    --progress-height-large: 14px;
+
+    --progress-color: var(--gray-lite-4);
+    --progress-color-primary: var(--color-primary);
+    --progress-color-secondary: var(--color-secondary);
+    --progress-color-success: var(--color-success);
+    --progress-color-danger: var(--color-danger);
+    --progress-color-warning: var(--color-warning);
+    --progress-color-info: var(--color-info);
+
+    --progress-circle-size: 80px;
+    --progress-circle-thickness: 6px;
+    --progress-label-size: var(--note-size);
+    --progress-label-color: var(--gray);
+
+    --progress-stripe-size: 20px;
+    --progress-animation-duration: 1s;
+    --progress-indeterminate-duration: 1.5s;
+}
+
+.progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+    width: 100%;
+}
+
+.progress-label {
+    font-size: var(--progress-label-size);
+    color: var(--progress-label-color);
+}
+
+.progress-value {
+    font-size: var(--progress-label-size);
+    color: var(--progress-label-color);
+    text-align: right;
+}
+
+.progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.progress-track {
+    width: 100%;
+    background: var(--progress-color);
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+
+    &.is-small {
+        height: var(--progress-height-small);
+    }
+
+    &.is-medium {
+        height: var(--progress-height-medium);
+    }
+
+    &.is-large {
+        height: var(--progress-height-large);
+    }
+
+    &.is-pill {
+        border-radius: var(--radius-pill);
+    }
+}
+
+.progress-fill {
+    height: 100%;
+    border-radius: inherit;
+    transition: width 0.3s ease;
+
+    &.is-primary {
+        background: var(--progress-color-primary);
+    }
+
+    &.is-secondary {
+        background: var(--progress-color-secondary);
+    }
+
+    &.is-success {
+        background: var(--progress-color-success);
+    }
+
+    &.is-danger {
+        background: var(--progress-color-danger);
+    }
+
+    &.is-warning {
+        background: var(--progress-color-warning);
+    }
+
+    &.is-info {
+        background: var(--progress-color-info);
+    }
+
+    &.is-striped {
+        background-image: linear-gradient(
+                45deg,
+                rgba(255, 255, 255, 0.15) 25%,
+                transparent 25%,
+                transparent 50%,
+                rgba(255, 255, 255, 0.15) 50%,
+                rgba(255, 255, 255, 0.15) 75%,
+                transparent 75%,
+                transparent
+        );
+        background-size: var(--progress-stripe-size) var(--progress-stripe-size);
+    }
+
+    &.is-animated {
+        animation: progress-stripes var(--progress-animation-duration) linear infinite;
+    }
+
+    &.is-indeterminate {
+        width: 40% !important;
+        animation: progress-indeterminate var(--progress-indeterminate-duration) ease-in-out infinite;
+    }
+}
+
+.progress-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--progress-circle-size);
+    height: var(--progress-circle-size);
+}
+
+.progress-circle-svg {
+    transform: rotate(-90deg);
+}
+
+.progress-circle-track {
+    fill: none;
+    stroke: var(--progress-color);
+    stroke-width: var(--progress-circle-thickness);
+}
+
+.progress-circle-fill {
+    fill: none;
+    stroke-width: var(--progress-circle-thickness);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.3s ease;
+
+    &.is-primary {
+        stroke: var(--progress-color-primary);
+    }
+
+    &.is-secondary {
+        stroke: var(--progress-color-secondary);
+    }
+
+    &.is-success {
+        stroke: var(--progress-color-success);
+    }
+
+    &.is-danger {
+        stroke: var(--progress-color-danger);
+    }
+
+    &.is-warning {
+        stroke: var(--progress-color-warning);
+    }
+
+    &.is-info {
+        stroke: var(--progress-color-info);
+    }
+}
+
+.progress-circle-label {
+    position: absolute;
+    font-size: var(--note-size);
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+@keyframes progress-stripes {
+    from {
+        background-position: var(--progress-stripe-size) 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@keyframes progress-indeterminate {
+    0% {
+        left: -40%;
+    }
+    100% {
+        left: 100%;
+    }
+}

package/src/ui/components/skeleton/SkeletonRender.js

@@ -0,0 +1,79 @@
+import {Div, Span} from '../../../core/elements';
+import './skeleton.css';
+
+export default function SkeletonRender($desc, instance) {
+    const props  = instance.getEditableProps();
+    const type    = $desc.type    || 'rect';
+    const variant = $desc.variant || 'pulse';
+    const repeat  = $desc.repeat  || 1;
+
+    if(type === 'text') {
+        if(repeat <= 1) {
+            return buildText($desc, variant);
+        }
+
+        const items = [];
+
+        for(let i = 0; i < repeat; i++) {
+            items.push(buildText($desc, variant));
+        }
+
+        return Div({ class: 'skeleton-group' }, items);
+    }
+
+    props.class.add('skeleton');
+    props.class.add('is-' + variant);
+    props.class.add('is-' + ($desc.borderRadiusType || 'rounded'));
+
+    if(type === 'circle' || type === 'avatar') {
+        props.class.add('is-circle');
+    }
+
+    const style = {};
+
+    if($desc.width) {
+        style.width = toUnit($desc.width);
+    }
+
+    if($desc.height) {
+        style.height = toUnit($desc.height);
+    }
+
+    if(Object.keys(style).length) {
+        props.style.add(style);
+    }
+
+    if(repeat <= 1) {
+        return Div(instance.resolveProps());
+    }
+
+    const resolvedProps = instance.resolveProps();
+    const items = [];
+
+    for(let i = 0; i < repeat; i++) {
+        items.push(Div(resolvedProps));
+    }
+
+    return Div({class: 'skeleton-group'}, items);
+}
+
+function buildText($desc, variant) {
+    const lines   = $desc.lines || 3;
+    const content = [];
+
+    for(let i = 0; i < lines; i++) {
+        content.push(Span({class: 'skeleton-text-line is-' + variant}));
+    }
+
+    return Div({class: 'skeleton-text'}, content);
+}
+
+const toUnit = (value) => {
+    if(typeof value === 'number') {
+        return value + 'px';
+    }
+    if(value?.__$Observable) {
+        return value.transform(v => typeof v === 'number' ? v + 'px' : v);
+    }
+    return value;
+};

package/src/ui/components/skeleton/skeleton.css

@@ -0,0 +1,154 @@
+:root {
+    --skeleton-color: var(--gray-lite-4);
+    --skeleton-highlight: var(--gray-lite-5);
+    --skeleton-radius: var(--radius-button);
+    --skeleton-wave-duration: 1.6s;
+    --skeleton-pulse-duration: 1.2s;
+}
+
+.skeleton {
+    display: block;
+    background: var(--skeleton-color);
+    position: relative;
+    overflow: hidden;
+    min-height: 1em;
+    min-width: 100%;
+
+    &.is-rounded {
+        border-radius: var(--skeleton-radius);
+    }
+
+    &.is-pill {
+        border-radius: var(--radius-pill);
+    }
+
+    &.is-smooth {
+        border-radius: var(--radius-x);
+    }
+
+    &.is-circle {
+        border-radius: 50%;
+    }
+
+    &.is-wave {
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                    90deg,
+                    transparent 0%,
+                    var(--skeleton-highlight) 50%,
+                    transparent 100%
+            );
+            animation: skeleton-wave var(--skeleton-wave-duration) ease-in-out infinite;
+        }
+    }
+
+    &.is-pulse {
+        animation: skeleton-pulse var(--skeleton-pulse-duration) ease-in-out infinite;
+    }
+}
+
+.skeleton-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.skeleton-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.skeleton-text-line {
+    display: block;
+    height: 1em;
+    background: var(--skeleton-color);
+    border-radius: var(--skeleton-radius);
+
+    &:last-child {
+        width: 75%;
+    }
+}
+
+.skeleton-text-line.is-wave {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+                90deg,
+                transparent 0%,
+                var(--skeleton-highlight) 50%,
+                transparent 100%
+        );
+        animation: skeleton-wave var(--skeleton-wave-duration) ease-in-out infinite;
+    }
+}
+
+.skeleton-text-line.is-pulse {
+    animation: skeleton-pulse var(--skeleton-pulse-duration) ease-in-out infinite;
+}
+
+.skeleton-table-row {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+.skeleton-table-col {
+    flex: 1;
+}
+.skeleton-list-item {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+.skeleton-list-item-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+.skeleton-list-item-text {
+    flex: 1;
+}
+.skeleton-card {
+    .skeleton-text {
+        width: 100%;
+    }
+    > div {
+        width: 100%;
+    }
+}
+
+@keyframes skeleton-wave {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes skeleton-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.4;
+    }
+}

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

@@ -0,0 +1,46 @@
+import {Div, ShowIf, 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 });
+
+    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,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);
+};