native-document 1.0.14 → 1.0.16-8.1

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);
+    }
+}

package/src/ui/components/divider/DividerRender.js

@@ -0,0 +1,70 @@
+import {Div, Span} from '../../../core/elements';
+import './divider.css';
+
+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;
+};
+
+export default function DividerRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    const orientation = $desc.orientation || 'horizontal';
+
+    props.class.add('divider');
+    props.class.add('is-' + orientation);
+
+    const style = {};
+
+    if($desc.thickness) {
+        style['--divider-thickness'] = toUnit($desc.thickness);
+    }
+
+    if($desc.color) {
+        style['--divider-color'] = $desc.color;
+    }
+
+    if($desc.spacing) {
+        const val = toUnit($desc.spacing);
+        style.margin = orientation === 'horizontal' ? val + ' 0' : '0 ' + val;
+    }
+
+    if(Object.keys(style).length) {
+        props.style.add(style);
+    }
+
+    const lineClass = 'divider-line is-' + ($desc.variant || 'solid');
+    const lineStyle = {};
+
+    if($desc.leading) {
+        lineStyle['margin-left'] = toUnit($desc.leading);
+    }
+
+    if($desc.trailing) {
+        lineStyle['margin-right'] = toUnit($desc.trailing);
+    }
+
+    if(!$desc.label) {
+        return Div(instance.resolveProps(), Span({class: lineClass, style: lineStyle}));
+    }
+
+    const position = $desc.labelPosition || 'center';
+    const content  = [];
+
+    if(position === 'center' || position === 'trailing') {
+        content.push(Span({class: lineClass, style: lineStyle}));
+    }
+
+    content.push(Span({class: 'divider-label'}, $desc.label));
+
+    if(position === 'center' || position === 'leading') {
+        content.push(Span({class: lineClass}));
+    }
+
+    return Div(instance.resolveProps(), content);
+}

package/src/ui/components/divider/divider.css

@@ -0,0 +1,70 @@
+:root {
+    --divider-color: var(--gray-lite-3);
+    --divider-label-color: var(--gray);
+    --divider-label-size: var(--note-size);
+    --divider-label-gap: var(--space-comfortable);
+    --divider-thickness: 1px;
+    --divider-spacing: 16px;
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &.is-vertical {
+        flex-direction: column;
+        width: auto;
+        height: auto;
+        align-self: stretch;
+    }
+}
+
+.divider-line {
+    flex: 1;
+    border: none;
+    background: var(--divider-color);
+
+    &.is-solid {
+        background: var(--divider-color);
+    }
+
+    &.is-dashed {
+        background: none;
+        border-top: var(--divider-thickness, 1px) dashed var(--divider-color);
+    }
+
+    &.is-dotted {
+        background: none;
+        border-top: var(--divider-thickness, 1px) dotted var(--divider-color);
+    }
+}
+
+.divider.is-horizontal .divider-line {
+    height: var(--divider-thickness, 1px);
+}
+
+.divider.is-vertical .divider-line {
+    width: var(--divider-thickness, 1px);
+    height: auto;
+    border-top: none;
+
+    &.is-dashed {
+        background: none;
+        border-top: none;
+        border-left: var(--divider-thickness, 1px) dashed var(--divider-color);
+    }
+
+    &.is-dotted {
+        background: none;
+        border-top: none;
+        border-left: var(--divider-thickness, 1px) dotted var(--divider-color);
+    }
+}
+
+.divider-label {
+    flex-shrink: 0;
+    font-size: var(--divider-label-size);
+    color: var(--divider-label-color);
+    padding: 0 var(--divider-label-gap);
+}

package/src/ui/components/dropdown/DropdownRender.js

@@ -0,0 +1,92 @@
+import {Div, Input, ForEachArray} from '../../../core/elements';
+import PopoverRender from '../popover/PopoverRender';
+import {createFilter} from '../../../core/utils/filters';
+import {normalizeDropdownItem} from '../../../components/dropdown/helpers';
+
+import './dropdown.css';
+
+export default function DropdownRender($desc, instance) {
+    $desc.content = buildDropdownContent($desc, instance);
+
+    return PopoverRender($desc, instance, 'dropdown');
+}
+
+const buildDropdownContent = ($desc, instance) => {
+    const content = [];
+
+    if($desc.searchable) {
+        content.push(buildSearch($desc, instance));
+    }
+
+    if($desc.renderContent) {
+        content.push(Div({class: 'dropdown-content'}, $desc.renderContent($desc, instance)));
+    }
+    else {
+        let items = $desc.items;
+
+        if($desc.filter) {
+            if($desc.filterDependencies) {
+                items = items.where({
+                    _: createFilter($desc.filterDependencies, (...args) => {
+                        return $desc.filter(...args);
+                    }),
+                });
+            }
+            else {
+                items = items.where({
+                    _: createFilter($desc.searchValue, (item, key) => {
+                        return $desc.filter(item, key);
+                    }),
+                });
+            }
+        }
+
+        const itemsContainer = Div({class: 'dropdown-items'},
+            ForEachArray(items, (item) => {
+                item = normalizeDropdownItem($desc.mapper ? $desc.mapper(item) : item);
+                $desc.renderItem ? item.renderContent($desc.renderItem) : null;
+
+                return item.nd.onClick(() => {
+                    const desc = item.$description;
+                    const emittedValue = desc.data ?? desc.value ?? desc;
+
+                    instance.emit('itemClick', item, emittedValue);
+                    instance.emit('change', emittedValue);
+
+                    if($desc.closeOnSelect) {
+                        instance.close();
+                    }
+                });
+            }),
+        );
+        content.push(itemsContainer);
+    }
+
+    return content;
+};
+
+const buildSearch = ($desc, instance) => {
+    if(!$desc.filter) {
+        $desc.filter = (item, key) => {
+            const description = item.$description;
+            if(!description) {
+                const content = item.content ?? item.label ?? item.label;
+                const value = item.value;
+
+                return content?.toLowerCase().includes(key.toLowerCase())
+                    || value?.toLowerCase().includes(key.toLowerCase());
+            }
+            return description.value?.toLowerCase().includes(key.toLowerCase())
+                || description.content?.toLowerCase().includes(key.toLowerCase());
+        };
+    }
+
+    return Div({class: 'dropdown-search'},
+        Input({
+            class: 'dropdown-search-input',
+            type: 'text',
+            placeholder: $desc.searchPlaceholder || 'Search...',
+            value: $desc.searchValue,
+        }).nd.onInput((e) => instance.emit('search', e.target.value)),
+    );
+};

package/src/ui/components/dropdown/divider/DropdownDividerRender.js

@@ -0,0 +1,9 @@
+
+import {Div} from '../../../../core/elements';
+
+export default function DropdownDividerRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('dropdown-divider');
+
+    return Div(instance.resolveProps());
+}

package/src/ui/components/dropdown/dropdown.css

@@ -0,0 +1,179 @@
+:root {
+    --dropdown-bg: var(--background);
+    --dropdown-border: var(--gray-lite-3);
+    --dropdown-radius: var(--radius-card);
+    --dropdown-shadow: var(--shadow-lg);
+    --dropdown-min-width: 180px;
+    --dropdown-max-width: 320px;
+    --dropdown-z-index: 100001;
+    --dropdown-font-size: var(--description-size);
+    --dropdown-animation-duration: 0.15s;
+    --dropdown-arrow-size: 8px;
+
+    --dropdown-item-padding: var(--space-cozy) var(--space-comfortable);
+    --dropdown-item-radius: var(--radius-button);
+    --dropdown-item-gap: var(--space-cozy);
+    --dropdown-item-color: var(--text-color);
+    --dropdown-item-color-hover: var(--text-color);
+    --dropdown-item-bg-hover: var(--gray-lite-5);
+    --dropdown-item-bg-active: var(--gray-lite-4);
+    --dropdown-item-color-disabled: var(--gray-lite-2);
+
+    --dropdown-group-label-size: var(--note-size);
+    --dropdown-group-label-color: var(--gray);
+    --dropdown-group-label-padding: var(--space-cozy) var(--space-comfortable);
+
+    --dropdown-search-padding: var(--space-cozy) var(--space-comfortable);
+    --dropdown-search-border: var(--gray-lite-3);
+}
+
+.dropdown {
+    position: absolute;
+    z-index: var(--dropdown-z-index);
+    background: var(--dropdown-bg);
+    border: 1px solid var(--dropdown-border);
+    border-radius: var(--dropdown-radius);
+    box-shadow: var(--dropdown-shadow);
+    min-width: var(--dropdown-min-width);
+    max-width: var(--dropdown-max-width);
+    font-size: var(--dropdown-font-size);
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--space-cozy) 0;
+    inset: unset;
+    overflow: hidden;
+
+    &:popover-open {
+        animation: dropdown-in var(--dropdown-animation-duration) ease forwards;
+    }
+
+    &.has-max-height {
+        overflow-y: auto;
+    }
+}
+
+.dropdown-search {
+    padding: var(--dropdown-search-padding);
+    border-bottom: 1px solid var(--dropdown-search-border);
+
+    input {
+        width: 100%;
+        border: none;
+        outline: none;
+        background: none;
+        font-size: var(--dropdown-font-size);
+        color: var(--text-color);
+        font-family: var(--font);
+    }
+}
+
+.dropdown-header {
+    padding: var(--dropdown-group-label-padding);
+    border-bottom: 1px solid var(--dropdown-border);
+}
+
+.dropdown-footer {
+    padding: var(--dropdown-group-label-padding);
+    border-top: 1px solid var(--dropdown-border);
+}
+
+.dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--dropdown-item-gap);
+    padding: var(--dropdown-item-padding);
+    color: var(--dropdown-item-color);
+    cursor: pointer;
+    border-radius: var(--dropdown-item-radius);
+    margin: 0 var(--space-cozy);
+    box-sizing: border-box;
+    user-select: none;
+    transition: background 0.1s ease;
+
+    &:hover {
+        background: var(--dropdown-item-bg-hover);
+        color: var(--dropdown-item-color-hover);
+    }
+
+    &:active {
+        background: var(--dropdown-item-bg-active);
+    }
+
+    &.is-disabled {
+        color: var(--dropdown-item-color-disabled);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &.is-selected {
+        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+        color: var(--color-primary);
+        font-weight: 500;
+    }
+
+    &.is-active {
+        background: var(--dropdown-item-bg-hover);
+        font-weight: 500;
+    }
+}
+
+.dropdown-item-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.dropdown-item-label {
+    flex: 1;
+}
+
+.dropdown-item-shortcut {
+    font-size: var(--note-size);
+    color: var(--gray);
+    margin-left: auto;
+}
+
+.dropdown-group-label {
+    padding: var(--dropdown-group-label-padding);
+    font-size: var(--dropdown-group-label-size);
+    color: var(--dropdown-group-label-color);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.dropdown-divider {
+    height: 1px;
+    background: var(--dropdown-border);
+    margin: var(--space-cozy) 0;
+}
+
+.dropdown-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    cursor: pointer;
+}
+
+.dropdown-trigger-chevron {
+    display: inline-flex;
+    align-items: center;
+    transition: transform 0.2s ease;
+
+    &.is-open {
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes dropdown-in {
+    from {
+        opacity: 0;
+        transform: scale(0.97) translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}