native-document 1.0.15 → 1.0.16-8.2

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,136 @@
+import {Div, Span} from '../../../core/elements';
+
+import './skeleton.css';
+import Skeleton from '../../../components/skeleton/Skeleton';
+import {HStack, VStack} from '../../../components/stacks';
+
+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;
+};
+
+
+/**
+ * @param {string} [type]
+ * @returns {*}
+ */
+Skeleton.card = function(type) {
+    return VStack([
+        Skeleton().type('image').height(200),
+        VStack([
+            Skeleton().text(1),
+            Skeleton().text(2),
+        ]).spacing('cozy'),
+    ], { class: 'skeleton-card '+type }).spacing('cozy');
+};
+
+/**
+ * @param {number} [items=3]
+ * @returns {*}
+ */
+Skeleton.list = function(items = 3) {
+    return VStack(
+        Array.from({length: items}, () =>
+            HStack([
+                Div({ class: 'skeleton-list-item-avatar' }, Skeleton().circle().size(40, 40)),
+                Div({ class: 'skeleton-list-item-text' }, Skeleton().text(2)),
+            ], { class: 'skeleton-list-item' }).spacing('comfortable').alignCenter(),
+        ),
+    ).spacing('comfortable');
+};
+
+/**
+ * @param {number} [rows=5]
+ * @param {number} [cols=4]
+ * @returns {*}
+ */
+Skeleton.table = function(rows = 5, cols = 4) {
+    const buildRow = () =>
+        HStack(
+            Array.from({length: cols}, () =>
+                Div({ class: 'skeleton-table-col' }, Skeleton().rect().height(16)),
+            ),
+            { class: 'skeleton-table-row' },
+        ).spacing('comfortable').alignCenter();
+
+    return VStack([
+        buildRow(),
+        ...Array.from({length: rows}, () => buildRow()),
+    ]).spacing('cozy');
+};
+
+Skeleton.paragraph = function(lines = 3) {
+    return Skeleton().text(lines);
+};

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/spacer/SpacerRender.js

@@ -0,0 +1,10 @@
+import { Div } from '../../../core/elements';
+
+export default function SpacerRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('spacer');
+    props.style.add('flex', '1');
+
+    return Div(instance.resolveProps());
+}

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

@@ -0,0 +1,47 @@
+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 });
+
+    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);
+    }
+}