native-document 1.0.15 → 1.0.16-8.2

package/src/ui/components/menu/MenuRender.js

@@ -0,0 +1,22 @@
+import {Nav, ForEachArray} from '../../../core/elements';
+
+import './menu.css';
+
+export default function MenuRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('menu');
+    props.class.add('is-' + ($desc.orientation || 'horizontal'));
+
+    const nav = Nav(instance.resolveProps(), ForEachArray($desc.items));
+
+    if($desc.compactThreshold) {
+        const observer = new ResizeObserver(([entry]) => {
+            $desc.compact.set(entry.contentRect.width < $desc.compactThreshold);
+        });
+        observer.observe(nav);
+    }
+
+    return nav;
+
+}

package/src/ui/components/menu/helpers.js

@@ -0,0 +1,121 @@
+import {Div, ForEachArray, UnorderedList} from '../../../core/elements';
+import {computePosition, flip, offset, shift} from '@floating-ui/dom';
+
+export const buildSubmenu = ($desc, orientation, $isOpen, instance) => {
+    const root     = instance.getRoot();
+    const $compact = root.$description?.compact;
+    if(orientation === 'inline') {
+        const submenuEl = Div({ class: 'sub-menu', 'is-open': $isOpen, 'is-inline': $compact.is(false), 'is-vertical': $compact},
+            UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items)),
+        );
+
+        $compact?.subscribe((isCompact) => {
+            if(isCompact) {
+                submenuEl.style.position = 'fixed';
+                submenuEl.style.left     = '0px';
+                submenuEl.style.top      = '0px';
+            } else {
+                submenuEl.style.position = '';
+                submenuEl.style.left     = '';
+                submenuEl.style.top      = '';
+            }
+        });
+
+        return submenuEl;
+    }
+
+    return Div({class: 'sub-menu is-' + orientation, 'is-open': $isOpen, style: {position: 'fixed', left: '0px', top: '0px'}},
+        UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items)),
+    );
+};
+
+export const setupInteraction = (listItem, el, submenuEl, orientation, interaction, $isOpen, hasSubmenu, instance) => {
+    const root              = instance.getRoot();
+    const $compact          = root.$description?.compact;
+    const $menuActive       = root.$description?.menuActive;
+    const $isMenuActivated  = root.$description?.isMenuActivated;
+    const $activeItem       = root.$description?.activeItem;
+    const rootOrientation   = root.$description?.orientation || 'horizontal';
+    const clickFirst        = root.$description.clickFirst || rootOrientation === 'inline';
+
+    const isPopup = () => {
+        if(orientation === 'horizontal') return true;
+        if(orientation === 'vertical')   return true;
+        return $compact?.val() || false;
+    };
+
+    const updatePosition = () => {
+        const placement = (orientation === 'horizontal' && (!root || instance.$parent === root))
+            ? 'bottom-start'
+            : 'right-start';
+        requestAnimationFrame(() => {
+            computePosition(el, submenuEl, {
+                placement,
+                middleware: [offset(2), flip(), shift({padding: 4})],
+            }).then(({x, y}) => {
+                submenuEl.style.left = x + 'px';
+                submenuEl.style.top  = y + 'px';
+            });
+        });
+    };
+
+    let closeTimer = null;
+
+    const open = () => {
+
+        $activeItem?.set(instance);
+
+        if (hasSubmenu) {
+            $isOpen.set(true);
+            if (isPopup()) {
+                updatePosition();
+            }
+        }
+    };
+
+    const close = () => {
+        closeTimer = setTimeout(() => {
+            if($activeItem?.val() === instance) {
+                $activeItem?.set(null);
+            }
+            $isOpen.set(false);
+        }, 20);
+    };
+
+    $activeItem?.subscribe((activeInstance) => {
+        if(activeInstance !== instance
+            && activeInstance?.$parent === instance.$parent) {
+            $isOpen.set(false);
+        }
+    });
+
+    listItem.nd
+        .onMouseEnter((e) => {
+            e.stopPropagation();
+            clearTimeout(closeTimer);
+            if(clickFirst && !$isMenuActivated?.val()) {
+                return;
+            }
+            open();
+        })
+        .onMouseLeave((e) => {
+            e.stopPropagation();
+            if(clickFirst && $isMenuActivated?.val()) {
+                return;
+            }
+            close();
+        });
+
+    if(clickFirst) {
+        el.nd.onStopClick(() => {
+            $isMenuActivated?.set(true);
+            open();
+        });
+    }
+
+    document.addEventListener('click', (e) => {
+        $isMenuActivated?.set(false);
+        $isOpen.set(false);
+        $activeItem?.set(null);
+    });
+};

package/src/ui/components/menu/menu.css

@@ -0,0 +1,308 @@
+:root {
+    --menu-bg: var(--background);
+    --menu-border: var(--gray-lite-3);
+    --menu-radius: var(--radius-card);
+    --menu-shadow: var(--shadow-md);
+    --menu-font-size: var(--description-size);
+    --menu-gap: var(--space-tiny);
+    --menu-padding: var(--space-cozy) 0;
+
+    --menu-item-padding: var(--space-cozy) var(--space-comfortable);
+    --menu-item-radius: var(--radius-button);
+    --menu-item-gap: var(--space-cozy);
+    --menu-item-color: var(--text-color);
+    --menu-item-color-hover: var(--text-color);
+    --menu-item-color-active: var(--color-primary);
+    --menu-item-color-disabled: var(--gray-lite-2);
+    --menu-item-bg-hover: var(--gray-lite-5);
+    --menu-item-bg-selected: color-mix(in srgb, var(--color-primary) 8%, transparent);
+
+    --menu-group-label-size: var(--hint-size);
+    --menu-group-label-color: var(--gray);
+    --menu-group-label-padding: var(--space-cozy) var(--space-cozy);
+
+    --menu-shortcut-size: var(--note-size);
+    --menu-shortcut-color: var(--gray);
+    --menu-divider-color: var(--gray-lite-3);
+
+    --sub-menu-offset: 2px;
+    --sub-menu-shadow: var(--shadow-lg);
+}
+
+.menu {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: var(--menu-font-size);
+    gap: var(--menu-gap);
+
+    &.is-vertical {
+        flex-direction: column;
+        padding: var(--menu-padding);
+    }
+
+    &.is-horizontal {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &.is-inline {
+        flex-direction: column;
+        padding: 0;
+    }
+}
+
+.menu-item {
+    list-style: none;
+    position: relative;
+}
+
+.menu-item-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-gap);
+    padding: var(--menu-item-padding);
+    border-radius: var(--menu-item-radius);
+    color: var(--menu-item-color);
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.1s ease, color 0.1s ease;
+    white-space: nowrap;
+    text-decoration: none;
+
+    &:hover {
+        background: var(--menu-item-bg-hover);
+        color: var(--menu-item-color-hover);
+    }
+
+    &.is-hovered {
+        background: var(--menu-item-bg-hover);
+        color: var(--menu-item-color-hover);
+    }
+
+    .is-selected > & {
+        background: var(--menu-item-bg-selected);
+        color: var(--menu-item-color-active);
+    }
+
+    .is-disabled > & {
+        color: var(--menu-item-color-disabled);
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+}
+
+.menu-item-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.menu-item-label {
+    flex: 1;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.menu-item-shortcut {
+    font-size: var(--menu-shortcut-size);
+    color: var(--menu-shortcut-color);
+    margin-left: auto;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.menu-group-chevron {
+    font-size: var(--menu-shortcut-size);
+    color: var(--menu-shortcut-color);
+    transition: transform 0.2s ease;
+    margin-left: auto;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.menu-item-trailing {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+}
+
+.menu-group-label {
+    padding: var(--menu-group-label-padding);
+    font-size: var(--menu-group-label-size);
+    color: var(--menu-group-label-color);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.menu-group {
+    margin: var(--space-cozy) var(--space-cozy);
+    padding: var(--space-cozy) 0 0 0;
+}
+
+.menu-group-header {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-cozy);
+    gap: var(--menu-item-gap);
+    font-size: var(--note-size);
+    color: var(--menu-group-label-color);
+    font-weight: 400;
+    user-select: none;
+    text-align: left;
+
+    .is-collapsable & {
+        cursor: pointer;
+        border-radius: var(--menu-item-radius);
+
+        &:hover {
+            background: var(--menu-item-bg-hover);
+            color: var(--text-color);
+        }
+    }
+}
+
+.menu-group-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.menu-group-chevron {
+    margin-left: auto;
+    transition: transform 0.2s ease;
+
+    &.is-open {
+        transform: rotate(180deg);
+    }
+}
+
+.menu-group-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menu-divider {
+    height: 1px;
+    background: var(--menu-divider-color);
+    margin: var(--space-cozy) 0;
+}
+
+/* Sub-menu */
+.sub-menu {
+    display: none;
+
+    &[is-open="true"] {
+        display: block;
+    }
+
+    &.is-inline {
+        position: static;
+        display: block;
+        box-shadow: none;
+        border: none;
+        border-left: 2px solid var(--menu-border);
+        margin-left: var(--space-comfortable);
+        padding: var(--space-cozy) 0;
+        overflow: hidden;
+        max-height: 0;
+        transition: max-height 0.25s ease;
+
+        &[is-open="true"] {
+            max-height: 1000px;
+        }
+    }
+
+    &.is-vertical,
+    &.is-horizontal {
+        position: fixed;
+        z-index: 1001;
+        background: var(--menu-bg);
+        border: 1px solid var(--menu-border);
+        border-radius: var(--menu-radius);
+        box-shadow: var(--sub-menu-shadow);
+        min-width: 180px;
+        padding: var(--menu-padding);
+    }
+}
+
+.sub-menu-container {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.has-submenu {
+    > .menu-item-wrapper .menu-group-chevron {
+        .is-horizontal & {
+            transform: rotate(0deg);
+        }
+        .is-vertical &,
+        .is-inline & {
+            transform: rotate(-90deg);
+        }
+    }
+}
+
+/* Compact mode */
+.menu.is-compact {
+    .menu-item-label,
+    .menu-item-shortcut,
+    .menu-group-chevron {
+        display: none;
+    }
+
+    .menu-item-icon {
+        width: 20px;
+        height: 20px;
+        margin: 0 auto;
+
+        &:empty {
+            display: flex;
+        }
+    }
+
+    .menu-item-wrapper {
+        justify-content: center;
+        padding: var(--space-cozy);
+    }
+
+    .menu-group-label {
+        display: none;
+    }
+
+    .menu-group-header {
+        justify-content: center;
+        padding: var(--space-cozy);
+    }
+}
+
+.menu.is-horizontal > .menu-item > .menu-item-wrapper .menu-group-chevron {
+    display: none;
+}
+
+.menu-item:first-child:has(> .menu-divider),
+.menu-item:last-child:has(> .menu-divider) {
+    display: none;
+}

package/src/ui/components/modal/ModalRender.js

@@ -0,0 +1,118 @@
+import {Dialog, Div, Span} from '../../../core/elements';
+import Button from '../../../components/button/Button';
+import {ElementCreator} from '../../../core/wrappers/ElementCreator';
+import {createPortal} from '../../../core/elements/anchor/anchor';
+
+import './modal.css';
+
+export default function ModalRender($desc, instance) {
+    const editableProps = instance.getEditableProps();
+
+    editableProps.class.add('modal');
+    if($desc.size) {
+        editableProps.class.add('is-' + $desc.size);
+    }
+
+    if($desc.scrollable) {
+        editableProps.props.add('is-scrollable');
+    }
+
+    const propsValue = instance.resolveProps();
+    const dialog = Dialog({ ...propsValue });
+    const content = [];
+
+    const header = $desc.renderHeader ? $desc.renderHeader($desc, instance) : buildHeader($desc, instance, dialog);
+
+    content.push(header);
+
+    if($desc.renderContent) {
+        content.push(Div({class: 'modal-body'}, $desc.renderContent($desc, instance)));
+    }
+    else if($desc.content) {
+        content.push(Div({class: 'modal-body'}, $desc.content));
+    }
+
+    if($desc.renderFooter) {
+        content.push($desc.renderFooter($desc, instance));
+    }
+    else if($desc.footer) {
+        content.push(Div({class: 'modal-footer'}, $desc.footer));
+    }
+
+    dialog.appendChild(ElementCreator.getChild(content));
+
+
+    $desc.isOpen.subscribe((value) => {
+        const isNativeOpen = dialog.open;
+
+        if (value && !isNativeOpen) {
+            dialog.showModal();
+            return;
+        }
+        if (!value && isNativeOpen) {
+            dialog.close();
+        }
+    });
+
+    setupBehaviours(dialog, $desc, instance);
+
+    if($desc.draggable) {
+        instance.makeDraggable(dialog, $desc.dragByHeader ? header : null);
+    }
+    if($desc.resizable) {
+        instance.makeResizable(dialog, $desc.resizableOptions);
+    }
+
+    return createPortal(dialog);
+}
+
+const buildHeader = ($desc, instance) => {
+    const content = [];
+
+    content.push(Div({class: 'modal-title'}, $desc.title));
+
+    if($desc.closable) {
+        content.push(
+            Button('×', {class: 'modal-close'})
+                .ghost()
+                .nd.onClick(() => instance.close()),
+        );
+    }
+
+    return Div({class: 'modal-header'}, content);
+};
+
+const setupBehaviours = (dialog, $desc, instance) => {
+
+    dialog.addEventListener('close', () => instance.close());
+
+    if($desc.closeOnBackdrop) {
+        let clickStartedOnBackdrop = false;
+        dialog.addEventListener('mousedown', (e) => {
+            clickStartedOnBackdrop = (e.target === dialog);
+        });
+
+        dialog.addEventListener('click', (e) => {
+            const rect = dialog.getBoundingClientRect();
+
+            const isInDialog = (
+                rect.top <= e.clientY && e.clientY <= rect.top + rect.height &&
+                rect.left <= e.clientX && e.clientX <= rect.left + rect.width
+            );
+
+            if (clickStartedOnBackdrop && !isInDialog) {
+                instance.close();
+            }
+            clickStartedOnBackdrop = false;
+        });
+    }
+
+    if(!$desc.closeOnEscape) {
+        dialog.nd.onKeyDown((e) => {
+            if(e.key === 'Escape') {
+                e.preventDefault();
+            }
+        });
+    }
+
+};

package/src/ui/components/modal/modal.css

@@ -0,0 +1,156 @@
+:root {
+    --modal-bg: var(--white);
+    --modal-border: var(--gray-lite-5);
+    --modal-radius: var(--radius-card);
+    --modal-shadow: var(--shadow-lg);
+    --modal-z-index: 10001;
+    --modal-font-size: var(--description-size);
+    --modal-header-size: var(--text-size);
+    --modal-header-weight: 600;
+    --modal-padding: var(--space-comfortable);
+    --modal-header-padding: var(--space-tiny);
+    --modal-animation-duration: 0.2s;
+
+    --modal-width-small: 400px;
+    --modal-width-medium: 560px;
+    --modal-width-large: 720px;
+    --modal-width-extra-large: 960px;
+
+    --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
+
+    --modal-close-width: 25px;
+    --modal-close-height: 25px;
+    --modal-close-hover-bg-color: var(--contrasted-red);
+    --modal-close-hover-color: var(--white);
+}
+
+.modal {
+    position: fixed;
+    z-index: var(--modal-z-index);
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: var(--modal-radius);
+    box-shadow: var(--modal-shadow);
+    font-size: var(--modal-font-size);
+    box-sizing: border-box;
+    padding: 0;
+    margin: auto;
+    width: var(--modal-width-medium);
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 32px);
+    inset: 0;
+    overflow: hidden;
+    color: var(--text-color);
+
+    &.is-small {
+        width: var(--modal-width-small);
+    }
+
+    &.is-large {
+        width: var(--modal-width-large);
+    }
+
+    &.is-extra-large {
+        width: var(--modal-width-extra-large);
+    }
+
+    &.is-fullscreen {
+        width: 100vw;
+        height: 100vh;
+        max-width: 100vw;
+        max-height: 100vh;
+        border-radius: 0;
+        margin: 0;
+        inset: 0;
+    }
+
+    &.is-scrollable {
+        .modal-body {
+            overflow-y: auto;
+        }
+    }
+
+    &::backdrop {
+        background: var(--modal-backdrop-bg);
+        backdrop-filter: blur(4px);
+        animation: modal-backdrop-in var(--modal-animation-duration) ease forwards;
+    }
+
+    &[open] {
+        animation: modal-in var(--modal-animation-duration) ease forwards;
+    }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--modal-header-padding);
+    border-bottom: 1px solid var(--modal-border);
+    gap: var(--space-cozy);
+}
+
+.modal-title {
+    font-size: var(--modal-header-size);
+    font-weight: var(--modal-header-weight);
+    line-height: 1.3;
+    flex: 1;
+}
+
+.modal-close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.5;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: var(--important-size);
+    color: var(--text-color);
+    line-height: 1;
+    width: var(--modal-close-width, 25px);
+    height: var(--modal-close-height, 25px);
+    border-radius: 50%;
+
+    &:hover {
+        --btn-color-ghost-hover: var(--modal-close-hover-bg-color, var(--contrasted-red));
+        --btn-color-ghost-text: var(--modal-close-hover-color, var(--white));
+        opacity: 1;
+    }
+}
+
+.modal-body {
+    overflow-y: auto;
+    max-height: calc(100vh - 200px);
+}
+
+.modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-cozy);
+    padding: var(--modal-padding);
+    border-top: 1px solid var(--modal-border);
+}
+
+@keyframes modal-in {
+    from {
+        opacity: 0;
+        transform: scale(0.97) translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes modal-backdrop-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}