native-document 1.0.138 → 1.0.140

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,119 @@
+import {Dialog, Div, Span} from '../../../core/elements';
+import Button from '../../../components/button/Button';
+import {ElementCreator} from "../../../core/wrappers/ElementCreator";
+
+import './modal.css';
+import {createPortal} from "../../../../elements";
+import widget from "../../../../devtools/widget";
+
+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;
+    }
+}

package/src/ui/components/pagination/PaginationRender.js

@@ -0,0 +1,112 @@
+import {Div, ForEachArray, Span} from '../../../core/elements';
+import './pagination.css';
+
+
+export default function PaginationRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('pagination');
+
+    instance.$updatePages();
+
+    const content = [];
+
+    const $isFirstPage = $desc.currentPage.is(p => p <= 1);
+    const $isLastPage = $desc.currentPage.is(p => p >= $desc.totalPages.val());
+
+    if($desc.showFirstLast) {
+        content.push(
+            buildNavItem(
+                '«',
+                () => instance.first(),
+                $desc,
+                'renderFirst',
+                $isFirstPage
+            )
+        );
+    }
+
+    if($desc.showPreviousNext) {
+        content.push(
+            buildNavItem(
+                '‹',
+                () => instance.previous(),
+                $desc,
+                'renderPrevious',
+                $isFirstPage
+            )
+        );
+    }
+
+    content.push(buildPages($desc, instance));
+
+    if($desc.showPreviousNext) {
+        content.push(
+            buildNavItem(
+                '›',
+                () => instance.next(),
+                $desc,
+                'renderNext',
+                $isLastPage
+            )
+        );
+    }
+
+    if($desc.showFirstLast) {
+        content.push(
+            buildNavItem(
+                '»',
+                () => instance.last(),
+                $desc,
+                'renderLast',
+                $isLastPage
+            )
+        );
+    }
+
+    return Div({ ...instance.resolveProps(), role: 'navigation', 'aria-label': 'Pagination' }, content);
+}
+
+const buildNavItem = (label, handler, $desc, renderKey, $isDisabled) => {
+    const clickHandler = () => {
+        if (!$isDisabled.val()) handler();
+    };
+
+    if($desc[renderKey]) {
+        return $desc[renderKey](handler).nd.onClick(clickHandler);
+    }
+
+    return Div({ class: { 'pagination-item': true, 'is-nav': true, 'is-disabled': $isDisabled } }, label).nd.onClick(clickHandler);
+};
+
+const buildPages = ($desc, instance) => {
+    return Div({class: 'pagination-pages'},
+        ForEachArray($desc.pages, (page) => {
+            if(page === '...') {
+                return buildEllipsis($desc);
+            }
+            return buildPage(page, $desc, instance);
+        })
+    );
+};
+
+const buildPage = (page, $desc, instance) => {
+    if($desc.renderPage) {
+        return $desc.renderPage(page, instance);
+    }
+
+    const isActive = $desc.currentPage.is(page);
+
+    const el = Div({class: isActive.transform(a => 'pagination-item' + (a ? ' is-active' : ''))}, page);
+
+    el.nd.onClick(() => instance.goToPage(page));
+
+    return el;
+};
+
+const buildEllipsis = ($desc) => {
+    if($desc.renderEllipsis) {
+        return $desc.renderEllipsis();
+    }
+
+    return Div({class: 'pagination-item is-ellipsis'}, '...');
+};