native-document 1.0.15 → 1.0.16-8.2

package/src/ui/components/button/button.css

@@ -0,0 +1,296 @@
+:root {
+    --btn-height-small: 28px;
+    --btn-height-medium: 36px;
+    --btn-height-large: 44px;
+
+    --btn-padding-small: 0 var(--space-cozy-comfortable);
+    --btn-padding-medium: 0 var(--space-comfortable);
+    --btn-padding-large: 0 var(--space-relaxed);
+
+    --btn-font-size-small: var(--note-size);
+    --btn-font-size-medium: var(--description-size);
+    --btn-font-size-large: var(--text-size);
+
+    --btn-icon-size-small: 14px;
+    --btn-icon-size-medium: 16px;
+    --btn-icon-size-large: 18px;
+
+    --btn-loader-size: 14px;
+    --btn-gap: var(--space-cozy);
+    --btn-font-weight: 500;
+    --btn-transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
+    --btn-disabled-opacity: 0.45;
+
+    --btn-color-primary: var(--color-primary);
+    --btn-color-primary-hover: var(--color-primary-hover);
+    --btn-color-secondary: var(--color-secondary);
+    --btn-color-secondary-hover: var(--color-secondary-hover);
+    --btn-color-secondary-text: var(--color-secondary-text);
+    --btn-color-danger: var(--color-danger);
+    --btn-color-danger-hover: var(--color-danger-hover);
+    --btn-color-success: var(--color-success);
+    --btn-color-success-hover: var(--color-success-hover);
+    --btn-color-warning: var(--color-warning);
+    --btn-color-warning-hover: var(--color-warning-hover);
+    --btn-color-info: var(--color-info);
+    --btn-color-info-hover: var(--color-info-hover);
+    --btn-color-ghost-hover: var(--color-ghost-hover);
+    --btn-color-ghost-text: var(--color-ghost-text);
+    --btn-color-link: var(--color-link);
+    --btn-color-link-hover: var(--color-link-hover);
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--btn-gap);
+    border: 1px solid transparent;
+    border-radius: var(--radius-button);
+    cursor: pointer;
+    font-family: var(--font);
+    font-weight: var(--btn-font-weight);
+    font-size: var(--btn-font-size-medium);
+    height: var(--btn-height-medium);
+    padding: var(--btn-padding-medium);
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    outline: none;
+    transition: var(--btn-transition);
+    user-select: none;
+    box-sizing: border-box;
+    vertical-align: middle;
+
+    &.is-small {
+        height: var(--btn-height-small);
+        padding: var(--btn-padding-small);
+        font-size: var(--btn-font-size-small);
+    }
+
+    &.is-large {
+        height: var(--btn-height-large);
+        padding: var(--btn-padding-large);
+        font-size: var(--btn-font-size-large);
+    }
+
+    &.is-block {
+        width: 100%;
+        display: flex;
+    }
+
+    &.is-rounded {
+        border-radius: var(--radius-x);
+    }
+
+    &.is-pill {
+        border-radius: var(--radius-pill);
+    }
+
+    &.is-circle {
+        border-radius: 50%;
+        padding: 0;
+        width: var(--btn-height-medium);
+
+        &.is-small {
+            width: var(--btn-height-small);
+        }
+
+        &.is-large {
+            width: var(--btn-height-large);
+        }
+    }
+
+    &.is-icon-top,
+    &.is-icon-bottom {
+        flex-direction: column;
+    }
+
+    &.is-loading,
+    &.is-disabled {
+        opacity: var(--btn-disabled-opacity);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &.is-primary {
+        background: var(--btn-color-primary);
+        color: var(--white);
+        border-color: var(--btn-color-primary);
+
+        &:hover {
+            background: var(--btn-color-primary-hover);
+            border-color: var(--btn-color-primary-hover);
+        }
+    }
+
+    &.is-secondary {
+        background: var(--btn-color-secondary);
+        color: var(--btn-color-secondary-text);
+        border-color: var(--btn-color-secondary);
+
+        &:hover {
+            background: var(--btn-color-secondary-hover);
+            border-color: var(--btn-color-secondary-hover);
+        }
+    }
+
+    &.is-danger {
+        background: var(--btn-color-danger);
+        color: var(--white);
+        border-color: var(--btn-color-danger);
+
+        &:hover {
+            background: var(--btn-color-danger-hover);
+            border-color: var(--btn-color-danger-hover);
+        }
+    }
+
+    &.is-success {
+        background: var(--btn-color-success);
+        color: var(--white);
+        border-color: var(--btn-color-success);
+
+        &:hover {
+            background: var(--btn-color-success-hover);
+            border-color: var(--btn-color-success-hover);
+        }
+    }
+
+    &.is-warning {
+        background: var(--btn-color-warning);
+        color: var(--white);
+        border-color: var(--btn-color-warning);
+
+        &:hover {
+            background: var(--btn-color-warning-hover);
+            border-color: var(--btn-color-warning-hover);
+        }
+    }
+
+    &.is-info {
+        background: var(--btn-color-info);
+        color: var(--white);
+        border-color: var(--btn-color-info);
+
+        &:hover {
+            background: var(--btn-color-info-hover);
+            border-color: var(--btn-color-info-hover);
+        }
+    }
+
+    &.is-ghost {
+        background: transparent;
+        color: var(--btn-color-ghost-text);
+        border-color: transparent;
+
+        &:hover {
+            background: var(--btn-color-ghost-hover);
+        }
+    }
+
+    &.is-link {
+        background: transparent;
+        color: var(--btn-color-link);
+        border-color: transparent;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+
+        &:hover {
+            color: var(--btn-color-link-hover);
+        }
+    }
+
+    &.is-outline {
+        background: transparent;
+
+        &.is-primary {
+            color: var(--btn-color-primary);
+            border-color: var(--btn-color-primary);
+
+            &:hover {
+                background: var(--btn-color-primary);
+                color: var(--white);
+            }
+        }
+
+        &.is-danger {
+            color: var(--btn-color-danger);
+            border-color: var(--btn-color-danger);
+
+            &:hover {
+                background: var(--btn-color-danger);
+                color: var(--white);
+            }
+        }
+
+        &.is-success {
+            color: var(--btn-color-success);
+            border-color: var(--btn-color-success);
+
+            &:hover {
+                background: var(--btn-color-success);
+                color: var(--white);
+            }
+        }
+
+        &.is-warning {
+            color: var(--btn-color-warning);
+            border-color: var(--btn-color-warning);
+
+            &:hover {
+                background: var(--btn-color-warning);
+                color: var(--white);
+            }
+        }
+
+        &.is-info {
+            color: var(--btn-color-info);
+            border-color: var(--btn-color-info);
+
+            &:hover {
+                background: var(--btn-color-info);
+                color: var(--white);
+            }
+        }
+
+        &.is-secondary {
+            color: var(--btn-color-secondary-text);
+            border-color: var(--gray-lite-2);
+
+            &:hover {
+                background: var(--btn-color-secondary);
+            }
+        }
+    }
+
+    &.is-icon-only {
+        padding: 0;
+        width: var(--btn-height-medium);
+
+        &.is-small { width: var(--btn-height-small); }
+        &.is-large { width: var(--btn-height-large); }
+    }
+}
+.btn.is-loading:not(.is-outline) .spinner,
+.btn.is-loading:not(.is-ghost) .spinner {
+    --spinner-color: white !important;
+}
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: var(--btn-icon-size-medium);
+    height: var(--btn-icon-size-medium);
+
+    .is-small & {
+        width: var(--btn-icon-size-small);
+        height: var(--btn-icon-size-small);
+    }
+
+    .is-large & {
+        width: var(--btn-icon-size-large);
+        height: var(--btn-icon-size-large);
+    }
+}

package/src/ui/components/card/CardRender.js

@@ -0,0 +1,133 @@
+import { Div, Img, Span } from '../../../core/elements';
+
+import './card.css';
+import {Button} from '../../../components/button';
+
+export default function CardRender($desc, instance) {
+    const imageSlot   = buildImage($desc, instance);
+    const headerSlot  = buildHeader($desc, instance);
+    const contentSlot = buildContent($desc, instance);
+    const actionsSlot = buildActions($desc, instance);
+    const footerSlot  = buildFooter($desc, instance, actionsSlot);
+
+    if ($desc.layout) {
+        return $desc.layout(
+            { image: imageSlot, header: headerSlot, content: contentSlot, actions: actionsSlot, footer: footerSlot },
+            instance,
+        );
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('card');
+
+    if ($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    props.class.add({
+        'is-horizontal': $desc.horizontal,
+        'is-hoverable':  $desc.hoverable,
+        'is-clickable':  instance.hasListeners('click'),
+    });
+
+    if ($desc.loading) {
+        props.class.add({ 'is-loading': $desc.loading });
+    }
+
+    const children = [
+        imageSlot,
+        Div({ class: 'card-content'}, [
+            Div({ class: 'card-body' }, [headerSlot, contentSlot]),
+            footerSlot,
+        ]),
+    ];
+
+    const el = Div(instance.resolveProps(), children);
+
+    el.nd.onClick((e) => instance.emit('click', e));
+    el.nd.onMouseEnter((e) => instance.emit('hover', e));
+
+    return el;
+}
+
+function buildImage($desc, instance) {
+    if ($desc.renderImage) {
+        return $desc.renderImage($desc, instance);
+    }
+
+    if (!$desc.image) {
+        return null;
+    }
+
+    return Div({ class: 'card-image-wrapper' }, [
+        Img($desc.image, {
+            class: `card-image is-${$desc.imagePosition}`,
+            alt:   '',
+        })
+    ]);
+}
+
+function buildHeader($desc, instance) {
+    if ($desc.renderHeader) {
+        return $desc.renderHeader($desc, instance);
+    }
+
+    const parts = [];
+
+    if ($desc.title) {
+        parts.push(Span({ class: 'card-title' }, $desc.title));
+    }
+
+    if ($desc.subtitle) {
+        parts.push(Span({ class: 'card-subtitle' }, $desc.subtitle));
+    }
+
+    if (!parts.length) {
+        return null;
+    }
+
+    return Div({ class: 'card-header' }, parts);
+}
+
+function buildContent($desc, instance) {
+    if ($desc.renderContent) {
+        return $desc.renderContent($desc, instance);
+    }
+
+    if (!$desc.content) {
+        return null;
+    }
+
+    return Div({ class: 'card-content' }, $desc.content);
+}
+
+function buildActions($desc, instance) {
+    if ($desc.renderActions) {
+        return $desc.renderActions($desc, instance);
+    }
+
+    if (!$desc.actions?.length) {
+        return null;
+    }
+
+    const buttons = $desc.actions.map(({ label, callback }) => {
+        const btn = (typeof label === 'string') ? Button(label, { class: 'card-action' }) : label;
+        btn.nd.onClick(() => callback?.());
+        return btn;
+    });
+
+    return Div({ class: 'card-actions' }, buttons);
+}
+
+function buildFooter($desc, instance, actionsSlot) {
+    if ($desc.renderFooter) {
+        return $desc.renderFooter($desc, instance);
+    }
+
+    if (!actionsSlot) {
+        return null;
+    }
+
+    return Div({ class: 'card-footer' }, actionsSlot);
+}

package/src/ui/components/card/card.css

@@ -0,0 +1,169 @@
+:root {
+    --card-bg:                  var(--background);
+    --card-border:              var(--gray-lite-3);
+    --card-radius:              var(--radius-card);
+    --card-shadow:              var(--shadow-card);
+    --card-shadow-elevated:     var(--shadow-lg);
+    --card-shadow-hover:        var(--shadow-md);
+    --card-font-size:           var(--description-size);
+    --card-padding:             var(--space-comfortable);
+    --card-img-height:          200px;
+    --card-title-size:          var(--text-size);
+    --card-title-weight:        600;
+    --card-title-color:         var(--text-color);
+    --card-subtitle-size:       var(--note-size);
+    --card-subtitle-color:      var(--gray);
+    --card-footer-padding:      var(--space-cozy) var(--space-comfortable);
+    --card-footer-border:       var(--gray-lite-3);
+    --card-footer-gap:          var(--space-cozy);
+    --card-transition:          box-shadow 0.2s ease;
+    --card-loading-bg:          var(--gray-lite-5);
+    --card-horizontal-img-width: 175px;
+    --card-clickable-cursor:    pointer;
+    --card-header-row-gap: .5rem;
+}
+
+
+.card {
+    background:    var(--card-bg);
+    border:        1px solid var(--card-border);
+    border-radius: var(--card-radius);
+    overflow:      hidden;
+    font-size:     var(--card-font-size);
+    transition:    var(--card-transition);
+    display:       inline-flex;
+    flex-direction: column;
+
+    &.is-elevated {
+        border:     none;
+        box-shadow: var(--card-shadow-elevated);
+    }
+
+    &.is-flat {
+        border:     none;
+        box-shadow: none;
+    }
+
+    &.is-outlined {
+        border-width: 2px;
+    }
+
+    &.is-hoverable:hover {
+        box-shadow: var(--card-shadow-hover);
+    }
+
+    &.is-clickable {
+        cursor: var(--card-clickable-cursor);
+
+        &:hover {
+            box-shadow: var(--card-shadow-hover);
+        }
+
+        &:active {
+            opacity: 0.95;
+        }
+    }
+
+    &.is-horizontal {
+        flex-direction: row;
+
+        .card-image-wrapper {
+            width: var(--card-horizontal-img-width);
+        }
+        .card-image {
+            flex-shrink: 0;
+        }
+        .card-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+        }
+    }
+
+    &.is-loading {
+        .card-title,
+        .card-subtitle,
+        .card-content {
+            background:    var(--card-loading-bg);
+            border-radius: 4px;
+            color:         transparent;
+            user-select:   none;
+
+            * {
+                visibility: hidden;
+            }
+        }
+
+        .card-title   { width: 60%; }
+        .card-subtitle { width: 40%; }
+        .card-image { background: var(--card-loading-bg); }
+    }
+}
+.card-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    row-gap: var(--card-header-row-gap);
+}
+.card-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    column-gap:  var(--space-tiny);
+    > * {
+        flex: 1;
+    }
+}
+.card-image-wrapper {
+    width: 100%;
+    height:     var(--card-img-height);
+}
+.card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+
+    &.is-top    { order: -1; }
+    &.is-bottom { order: 10; }
+
+    .card.is-horizontal &.is-left  { order: -1; }
+    .card.is-horizontal &.is-right { order: 10; }
+}
+
+.card-body {
+    padding: var(--card-padding);
+    flex:    1;
+    display: flex;
+    flex-direction: column;
+    gap:     var(--space-cozy);
+}
+
+.card-title {
+    font-size:   var(--card-title-size);
+    font-weight: var(--card-title-weight);
+    color:       var(--card-title-color);
+    margin:      0;
+}
+
+.card-subtitle {
+    font-size: var(--card-subtitle-size);
+    color:     var(--card-subtitle-color);
+    margin:    0;
+}
+
+.card-content {
+    flex: 1;
+}
+
+.card-footer {
+    width: 100%;
+    display:       flex;
+    align-items:   center;
+    justify-content: flex-end;
+    gap:           var(--card-footer-gap);
+    padding:       var(--card-footer-padding);
+    border-top:    1px solid var(--card-footer-border);
+}

package/src/ui/components/contextmenu/ContextmenuRender.js

@@ -0,0 +1,68 @@
+import {Div, ShowIf} from '../../../core/elements';
+import {createPortal} from '../../../core/elements/anchor/anchor';
+import {computePosition, flip, shift} from '@floating-ui/dom';
+
+import './contextmenu.css';
+
+export default function ContextMenuRender($desc, instance) {
+    const $positionX = instance.$description.positionX, $positionY = instance.$description.positionY;
+    const format     = (value) => value + 'px';
+
+    const contextBox = Div({
+        class: 'context-menu',
+        style: {position: 'fixed', left: $positionX.transform(format), top: $positionY.transform(format)},
+    }, $desc.menu);
+    instance.$description.contextContainer = contextBox;
+
+    const container = ShowIf($desc.isOpen, () => contextBox);
+
+    createPortal(container, {name: 'context-menu'});
+
+    if($desc.trigger && instance) {
+        contextMenuHandler($desc.trigger, instance);
+    }
+
+    document.addEventListener('click', () => instance.hide());
+    document.addEventListener('keydown', (e) => {
+        if(e.key === 'Escape') instance.hide();
+    });
+
+    return $desc.trigger || container;
+}
+
+export const contextMenuHandler = (trigger, instance, data = null) => {
+    if(!instance.$element) {
+        instance.toNdElement();
+    }
+    const $positionX = instance.$description.positionX, $positionY = instance.$description.positionY;
+    const contextBox = instance.$description.contextContainer;
+
+    trigger.nd.onContextMenu((e) => {
+        e.preventDefault();
+        instance.$description.data = data;
+
+        const virtualEl = {
+            getBoundingClientRect: () => ({
+                width: 0, height: 0,
+                x: e.clientX, y: e.clientY,
+                top: e.clientY, left: e.clientX,
+                right: e.clientX, bottom: e.clientY,
+            }),
+        };
+
+        instance.show();
+
+        requestAnimationFrame(() => {
+            computePosition(virtualEl, contextBox, {
+                placement: 'bottom-start',
+                middleware: [
+                    flip(),
+                    shift({padding: 8}),
+                ],
+            }).then(({x, y}) => {
+                $positionX.set(x);
+                $positionY.set(y);
+            });
+        });
+    });
+};

package/src/ui/components/contextmenu/contextmenu.css

@@ -0,0 +1,36 @@
+:root {
+    --context-menu-bg: var(--background);
+    --context-menu-border: var(--gray-lite-3);
+    --context-menu-radius: var(--radius-card);
+    --context-menu-shadow: var(--shadow-lg);
+    --context-menu-z-index: 99999;
+    --context-menu-min-width: 180px;
+    --context-menu-animation-duration: 0.12s;
+}
+
+.context-menu {
+    z-index: var(--context-menu-z-index);
+    background: var(--context-menu-bg);
+    border: 1px solid var(--context-menu-border);
+    border-radius: var(--context-menu-radius);
+    box-shadow: var(--context-menu-shadow);
+    min-width: var(--context-menu-min-width);
+    box-sizing: border-box;
+    animation: context-menu-in var(--context-menu-animation-duration) ease forwards;
+
+    .menu {
+        flex-direction: column;
+        padding: var(--space-cozy) 0;
+    }
+}
+
+@keyframes context-menu-in {
+    from {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}