native-document 1.0.139 → 1.0.140

package/src/ui/components/pagination/pagination.css

@@ -0,0 +1,63 @@
+:root {
+    --pagination-gap: var(--space-cozy);
+    --pagination-font-size: var(--description-size);
+
+    --page-size: 36px;
+    --page-radius: var(--radius-button);
+    --page-color: var(--text-color);
+    --page-bg-hover: var(--gray-lite-5);
+    --page-bg-active: var(--color-primary);
+    --page-color-active: var(--white);
+    --page-color-disabled: var(--gray-lite-2);
+}
+
+.pagination {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--pagination-gap);
+    font-size: var(--pagination-font-size);
+}
+
+.pagination-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--page-size);
+    height: var(--page-size);
+    padding: 0 var(--space-cozy);
+    border-radius: var(--page-radius);
+    cursor: pointer;
+    color: var(--page-color);
+    user-select: none;
+    transition: background 0.1s ease, color 0.1s ease;
+    font-weight: 500;
+
+    &:hover {
+        background: var(--page-bg-hover);
+    }
+
+    &.is-active {
+        background: var(--page-bg-active);
+        color: var(--page-color-active);
+        pointer-events: none;
+    }
+
+    &.is-disabled {
+        color: var(--page-color-disabled);
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
+    &.is-ellipsis {
+        cursor: default;
+        pointer-events: none;
+
+        &:hover {
+            background: none;
+        }
+    }
+
+    &.is-nav {
+        font-size: var(--important-size);
+    }
+}

package/src/ui/components/popover/PopoverRender.js

@@ -0,0 +1,234 @@
+import {Div, ShowIf, Span} from '../../../core/elements';
+import {computePosition, flip, arrow, offset, shift, size} from '@floating-ui/dom';
+import {Observable} from '../../../../index';
+import {ElementCreator} from "../../../core/wrappers/ElementCreator";
+
+import './popover.css';
+
+let $popoverId = 0;
+
+const PLACEMENT_MAP = {
+    'top':             'top',
+    'top-leading':     'top-start',
+    'top-trailing':    'top-end',
+    'top-center':      'top',
+    'right':           'right',
+    'right-leading':   'right-start',
+    'right-trailing':  'right-end',
+    'bottom':          'bottom',
+    'bottom-leading':  'bottom-start',
+    'bottom-trailing': 'bottom-end',
+    'bottom-center':   'bottom',
+    'left':            'left',
+    'left-leading':    'left-start',
+    'left-trailing':   'left-end',
+    'leading-center':  'left',
+    'trailing-center': 'right',
+};
+
+const supportsPopover = () => {
+    return Object.hasOwn(HTMLElement.prototype, "popover");
+};
+
+export default function PopoverRender($desc, instance, classPrefix = 'popover') {
+    const trigger = ($desc.renderTrigger
+        ? $desc.renderTrigger($desc, instance)
+        : $desc.trigger).toNdElement();
+
+    const editableProps = instance.getEditableProps();
+    const toUnit = v => v + 'px';
+
+    const popoverId = classPrefix+'-nd-' + (++$popoverId);
+    const $x        = Observable(10).intercept(toUnit);
+    const $y        = Observable(0).intercept(toUnit);
+
+    let popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
+
+    editableProps.class.add(classPrefix);
+    editableProps.class.add('is-'+$desc.variant);
+    editableProps.style.add({left: $x, top: $y});
+
+    const popover = Div({
+        popover: 'manual',
+        role:    'dialog',
+        id:      popoverId,
+        ...instance.resolveProps()
+    }, [
+        buildContent($desc, instance, classPrefix),
+        popoverArrow,
+    ]);
+
+    const popOverAnchor = ShowIf($desc.isOpen, popover);
+
+
+    let position;
+    const updatePosition = (state) => {
+        if(!state) {
+            return;
+        }
+
+        let targetElement = trigger;
+        if($desc.matchTargetWidth) {
+            if($desc.matchTargetWidth.$element) {
+                targetElement = $desc.matchTargetWidth.$element;
+            }
+            else if($desc.matchTargetWidth.tagName) {
+                targetElement = $desc.matchTargetWidth;
+            }
+        }
+        requestAnimationFrame(() => {
+            if($desc.showIf && $desc.showIf.val() === false) {
+                return;
+            }
+            if(supportsPopover()) {
+                popover.showPopover();
+            }
+
+            const middleware = [
+                offset($desc.offset || 8),
+                flip(),
+                shift($desc.shift || {padding: 0}),
+                $desc.arrow ? arrow({element: popoverArrow}) : null,
+            ];
+
+            if($desc.matchTriggerWidth || $desc.matchTargetWidth) {
+                middleware.push(size({
+                    apply({rects, elements}) {
+                        elements.floating.style.width = rects.reference.width + 'px';
+                    }
+                }));
+            }
+
+            computePosition(targetElement, popover, {
+                placement:  PLACEMENT_MAP[position],
+                middleware: middleware.filter(Boolean),
+            }).then(({x, y, placement, middlewareData}) => {
+                $x.set(x);
+                $y.set(y);
+
+                if(!$desc.arrow) {
+                    return;
+                }
+
+                const arrowData  = middlewareData.arrow;
+                const staticSide = {
+                    top:    'bottom',
+                    right:  'left',
+                    bottom: 'top',
+                    left:   'right',
+                }[placement.split('-')[0]];
+
+                Object.assign(popoverArrow.style, {
+                    left:         arrowData.x != null ? arrowData.x + 'px' : '',
+                    top:          arrowData.y != null ? arrowData.y + 'px' : '',
+                    [staticSide]: '-4px',
+                });
+
+                popover.setAttribute('data-placement', placement);
+            });
+        });
+    };
+
+    if($desc.position?.__$Observable) {
+        position = $desc.position.val();
+        $desc.position.subscribe((value) => {
+            position = value;
+            updatePosition();
+        });
+    }
+    else {
+        position = $desc.position || 'bottom';
+    }
+
+    $desc.isOpen.on(true, updatePosition);
+
+    bindInteractions($desc, trigger, popover, instance);
+
+    const updatePositionHandler = () => updatePosition($desc.isOpen.val());
+
+    const observer = new ResizeObserver(updatePositionHandler);
+
+    observer.observe(trigger);
+    window.addEventListener('resize', updatePositionHandler);
+    window.addEventListener('scroll', updatePositionHandler);
+
+    if($desc.updatePositionOn) {
+        $desc.updatePositionOn.subscribe(updatePositionHandler);
+    }
+
+    if($desc.includeTriggerIntoGhost) {
+        return popOverAnchor.nd.ghostDom(trigger);
+    }
+    return popOverAnchor;
+}
+
+const bindInteractions = ($desc, trigger, popover, instance) => {
+    if($desc.closeOnClickOutside) {
+        const triggerElement = trigger.$element || trigger;
+        document.addEventListener('click', (e) => {
+            if(e.target === popover || popover.contains(e.target)) {
+                return;
+            }
+            if(e.target === triggerElement || triggerElement.contains(e.target)) {
+                return;
+            }
+            instance.close();
+        });
+    }
+
+    if($desc.interaction === 'click') {
+        trigger.nd.onClick(() => instance.toggle());
+        return;
+    }
+
+    let closeTimeout = null;
+    const close = () => {
+        closeTimeout = setTimeout(() => instance.close(), 150);
+    };
+
+    if($desc.interaction === 'hover') {
+        trigger.nd
+            .onMouseEnter(() => {
+                clearTimeout(closeTimeout);
+                instance.open();
+            })
+            .onMouseLeave(close);
+
+        popover.nd.onMouseEnter(() => clearTimeout(closeTimeout));
+        popover.nd.onMouseLeave(close);
+        return;
+    }
+    if($desc.interaction === 'focus') {
+        trigger.nd
+            .onKeyPress(() => instance.open())
+            .onFocus(() => instance.open())
+            .onBlur(close);
+    }
+};
+
+const buildContent = ($desc, instance, classPrefix = 'popover') => {
+    const content = [];
+
+    if($desc.renderHeader || $desc.header) {
+        content.push(Div({class: classPrefix+'-header'}, $desc.renderHeader
+            ? $desc.renderHeader($desc, instance)
+            : $desc.header
+        ));
+    }
+
+    if($desc.renderContent || $desc.content) {
+        content.push(Div({class: classPrefix+'-body'}, $desc.renderContent
+            ? $desc.renderContent($desc, instance)
+            : $desc.content
+        ));
+    }
+
+    if($desc.renderFooter || $desc.footer) {
+        content.push(Div({class: classPrefix+'-footer'}, $desc.renderFooter
+            ? $desc.renderFooter($desc, instance)
+            : $desc.footer
+        ));
+    }
+
+    return content;
+};

package/src/ui/components/popover/popover.css

@@ -0,0 +1,139 @@
+:root {
+    --popover-bg: var(--background);
+    --popover-border: var(--gray-lite-3);
+    --popover-radius: var(--radius-card);
+    --popover-shadow: var(--shadow-lg);
+    --popover-padding: 0;
+    --popover-min-width: 200px;
+    --popover-max-width: 320px;
+    --popover-z-index: 100001;
+    --popover-font-size: var(--description-size);
+    --popover-header-size: var(--text-size);
+    --popover-header-weight: 600;
+    --popover-arrow-size: 8px;
+    --popover-animation-duration: 0.15s;
+}
+
+.popover {
+    position: absolute;
+    z-index: var(--popover-z-index);
+    background-color: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
+    min-width: var(--popover-min-width);
+    max-width: var(--popover-max-width);
+    font-size: var(--popover-font-size);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    inset: unset;
+    overflow: initial;
+
+    &.is-primary {
+        --popover-bg: var(--color-primary);
+        --popover-border: var(--color-primary);
+        color: var(--white);
+    }
+
+    &.is-danger {
+        --popover-bg: var(--color-danger);
+        --popover-border: var(--color-danger);
+        color: var(--white);
+    }
+
+    &.is-success {
+        --popover-bg: var(--color-success);
+        --popover-border: var(--color-success);
+        color: var(--white);
+    }
+
+    &.is-warning {
+        --popover-bg: var(--color-warning);
+        --popover-border: var(--color-warning);
+        color: var(--gray-dark);
+    }
+
+    &.is-info {
+        --popover-bg: var(--color-info);
+        --popover-border: var(--color-info);
+        color: var(--white);
+    }
+
+    &:popover-open {
+        animation: popover-in var(--popover-animation-duration) ease forwards;
+    }
+}
+
+.popover-header {
+    padding: var(--space-cozy-comfortable) var(--popover-padding);
+    font-size: var(--popover-header-size);
+    font-weight: var(--popover-header-weight);
+    border-bottom: 1px solid var(--popover-border);
+}
+
+.popover-body {
+    padding: var(--popover-padding);
+}
+
+.popover-footer {
+    padding: var(--space-cozy-comfortable) var(--popover-padding);
+    border-top: 1px solid var(--popover-border);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-cozy);
+}
+
+.popover-arrow {
+    position: absolute;
+    width: var(--popover-arrow-size);
+    height: var(--popover-arrow-size);
+    background: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    transform: rotate(45deg);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.popover[data-placement^='top'] {
+    .popover-arrow {
+        border-top: none;
+        border-left: none;
+        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
+    }
+}
+
+.popover[data-placement^='bottom'] {
+    .popover-arrow {
+        border-bottom: none;
+        border-right: none;
+        box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.05);
+    }
+}
+
+.popover[data-placement^='left'] {
+    .popover-arrow {
+        border-left: none;
+        border-bottom: none;
+        box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.05);
+    }
+}
+
+.popover[data-placement^='right'] {
+    .popover-arrow {
+        border-right: none;
+        border-top: none;
+        box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.05);
+    }
+}
+
+@keyframes popover-in {
+    from {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

package/src/ui/components/progress/ProgressRender.js

@@ -0,0 +1,168 @@
+import {Div, Span} from '../../../core/elements';
+import {SvgSvg, SvgCircle} from '../../../core/elements';
+
+
+import './progress.css';
+
+export default function ProgressRender($desc, instance) {
+    const type = $desc.type || 'bar';
+
+    if(type === 'circle') {
+        return buildCircle($desc, instance);
+    }
+
+    return buildBar($desc, instance);
+}
+
+function getPercentage($desc) {
+    const value = $desc.value;
+    const max   = $desc.max || 100;
+
+    if(value?.__$Observable) {
+        return value.transform(v => Math.min(100, Math.round((v / max) * 100)));
+    }
+
+    return Math.min(100, Math.round(((value || 0) / max) * 100));
+}
+
+function getLabel($desc, percentage) {
+    if($desc.format) {
+        const value = $desc.value?.__$Observable ? $desc.value.val() : ($desc.value || 0);
+        return $desc.format(value, $desc.max);
+    }
+
+    if($desc.showValue) {
+        return $desc.value?.__$Observable ? $desc.value : ($desc.value || 0);
+    }
+
+    return null;
+}
+
+const buildBar = ($desc, instance) => {
+    const props      = instance.getEditableProps();
+    const percentage = getPercentage($desc);
+    const variant    = $desc.variant || 'primary';
+    const size       = $desc.size    || 'medium';
+
+    props.class.add('progress');
+
+    const fillClass = ['progress-fill', 'is-' + variant];
+
+    if($desc.striped) {
+        fillClass.push('is-striped');
+    }
+
+    if($desc.animated) {
+        fillClass.push('is-animated');
+    }
+
+    if($desc.indeterminate) {
+        fillClass.push('is-indeterminate');
+    }
+
+    const fillStyle = {};
+
+    if(!$desc.indeterminate && $desc.value !== null) {
+        const value = $desc.value;
+        const max   = $desc.max || 100;
+
+        if(value?.__$Observable) {
+            fillStyle.width = value.transform(v => Math.min(100, Math.round((v / max) * 100)) + '%');
+        }
+        else {
+            fillStyle.width = Math.min(100, Math.round(((value || 0) / max) * 100)) + '%';
+        }
+    }
+
+    const trackClass = ['progress-track', 'is-' + size];
+
+    if($desc.borderRadiusType) {
+        trackClass.push('is-' + $desc.borderRadiusType);
+    }
+
+    if($desc.height) {
+        props.style.add({height: toUnit($desc.height)});
+    }
+
+    const content = [];
+
+    if($desc.label || $desc.showValue) {
+        const valueLabel = getLabel($desc, percentage);
+
+        content.push(
+            Div({class: 'progress-header'}, [
+                $desc.label ? Span({class: 'progress-label'}, $desc.label) : null,
+                valueLabel  ? Span({class: 'progress-value'}, valueLabel)  : null,
+            ])
+        );
+    }
+
+    content.push(
+        Div({class: trackClass.join(' ')},
+            Div({class: fillClass.join(' '), style: fillStyle})
+        )
+    );
+
+    return Div(instance.resolveProps(), content);
+}
+
+const CIRCLE_SIZES = {
+    small: { size: 32, stroke: 2 },
+    medium: { size: 64, stroke: 6 },
+    large: { size: 128, stroke: 10 }
+};
+
+const getCircleSize = ($desc) => {
+    if(typeof $desc.size === 'number') {
+        return {
+            size: $desc.size,
+            stroke: $desc.stroke || 3
+        };
+    }
+
+    return CIRCLE_SIZES[$desc.size] || CIRCLE_SIZES.medium;
+}
+
+const buildCircle = ($desc, instance) => {
+    const circleSize = getCircleSize($desc);
+    const size = circleSize.size;
+    const stroke = circleSize.stroke;
+    const radius = ((size - stroke) / 2) - 3;
+    const circumference = 2 * Math.PI * radius;
+    const percentage = getPercentage($desc);
+
+    const offset = percentage?.__$Observable
+        ? percentage.transform(p => circumference - (p / 100) * circumference)
+        : circumference - (percentage / 100) * circumference;
+
+    return Div({ class: 'progress-circle-container' }, [
+        SvgSvg({ width: size, height: size, viewBox: `0 0 ${size} ${size}` }, [
+            // Rail (Background circle)
+            SvgCircle({
+                cx: size / 2, cy: size / 2, r: radius,
+                class: 'progress-circle-track',
+                'stroke-width': stroke
+            }),
+            SvgCircle({
+                cx: size / 2, cy: size / 2, r: radius,
+                class: 'progress-circle-fill is-' + ($desc.variant || 'primary'),
+                'stroke-width': stroke,
+                'stroke-dasharray': circumference,
+                'stroke-dashoffset': offset,
+                'stroke-linecap': 'round',
+                transform: `rotate(-90 ${size / 2} ${size / 2})`
+            })
+        ]),
+        $desc.showValue ? Span({ class: 'progress-circle-label' }, getLabel($desc)) : null
+    ]);
+}
+
+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;
+};