native-document 1.0.139 → 1.0.141

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

@@ -0,0 +1,70 @@
+import {Div, ShowIf} from "../../../core/elements";
+import {createPortal} from "../../../core/elements/anchor/anchor";
+import { $ } from '../../../../index';
+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) {
+        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 './dropdown.css';
+import {normalizeDropdownItem} from "../../../components/dropdown/helpers";
+
+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);
+    }
+}

package/src/ui/components/dropdown/group/DropdownGroupRender.js

@@ -0,0 +1,23 @@
+
+import {Div, ForEachArray} from '../../../../core/elements';
+
+export default function DropdownGroupRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('dropdown-group');
+
+    const content = [];
+
+    if($desc.content) {
+        content.push(Div({class: 'dropdown-group-label'}, $desc.content));
+    }
+
+    const items = $desc.filter ? $desc.items.where($desc.filter) : $desc.items;
+
+    content.push(
+        Div({class: 'dropdown-group-items'},
+            ForEachArray(items, (item) => item)
+        )
+    );
+
+    return Div(instance.resolveProps(), content);
+}

package/src/ui/components/dropdown/item/DropdownItemRender.js

@@ -0,0 +1,29 @@
+import {Div, Span} from "../../../../core/elements";
+
+
+export default function DropdownItemRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('dropdown-item');
+    // props.class.add({ 'is-disabled': $desc.disabled, 'is-selected': $desc.selected });
+
+    const content = [];
+    if($desc.renderContent) {
+        content.push($desc.renderContent($desc, instance));
+    } else {
+        if($desc.icon) {
+            content.push(Span({ class: 'dropdown-item-icon' }, $desc.icon));
+        }
+        content.push(Span({ class: 'dropdown-item-label' }, $desc.content));
+        if($desc.shortcut) {
+            content.push(Span({ class: 'dropdown-item-shortcut' }, $desc.shortcut));
+        }
+    }
+
+    const el = Div(instance.resolveProps(), content);
+    el.nd.onClick(() => {
+        $desc.action && $desc.action($desc.data || $desc.value || $desc);
+    });
+
+    return el;
+}

package/src/ui/components/form/FieldCollectionRender.js

@@ -0,0 +1,110 @@
+import {Div, Button, ForEachArray} from '../../../../elements';
+import { $ } from '../../../../index';
+
+import './field-collection.css';
+
+export default function FieldCollectionRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field-collection');
+
+    const $items     = $desc.value;
+    const $itemsMap  = new WeakMap();
+
+    const buildItemFields = (item) => {
+        if(!$desc.fieldBuilder) return {};
+        const fields = $desc.fieldBuilder();
+
+        // Binder chaque field à la propriété correspondante de l'item
+        Object.entries(fields).forEach(([key, field]) => {
+            const prop = item[key];
+            if(prop?.__$isObservable) {
+                field.model(prop);
+            }
+        });
+
+        return fields;
+    };
+
+    const buildActions = (item, $index) => {
+        const $isFirst = $index.transform(i => i === 0);
+        const $isLast  = $.computed(() => ($index.val() === $items.val().length - 1), [$index, $items]);
+
+        return {
+            index:     $index,
+            isFirst:   $isFirst,
+            isLast:    $isLast,
+            item,
+            remove: () => {
+                instance.removeItem(item);
+            },
+            moveUp: () => {
+                const i   = $items.indexOf(item);
+                if(i <= 0) {
+                    return;
+                }
+                $items.swap(i-1, i);
+            },
+            moveDown: () => {
+                const i   = $items.indexOf(item);
+                if(i >= $items.length - 1) {
+                    return;
+                }
+                $items.swap(i, i+1);
+            },
+            duplicate: () => {
+                const newItem = item.clone();
+                $items.push(newItem);
+                instance.emit('add', newItem);
+            },
+        };
+    };
+
+    const buildItem = (item, $index) => {
+        if(!$itemsMap.has(item)) {
+            const fields  = buildItemFields(item);
+            const actions = buildActions(item, $index);
+            $itemsMap.set(item, { fields, actions });
+        }
+
+        const { fields, actions } = $itemsMap.get(item);
+
+        let el;
+        if($desc.renderItem) {
+            el = $desc.renderItem(fields, actions);
+        } else {
+            el = Div({class: 'field-collection-item'}, [
+                ...Object.values(fields),
+                Button('×')
+                    .small()
+                    .danger()
+                    .nd
+                    .onClick(actions.remove),
+            ]);
+        }
+
+        if($desc.transition) {
+            el.nd.transition($desc.transition);
+        }
+
+        return el;
+    };
+
+    const buildAddButton = () => {
+        if(!$desc.renderAdd) {
+            return null;
+        }
+        return Div({ class: 'field-collection-actions'},
+            $desc.renderAdd()
+                .nd
+                .onClick(() => instance.add())
+        );
+    };
+
+    return Div(instance.resolveProps(), [
+        Div({class: 'field-collection-list'},
+            ForEachArray($items, buildItem)
+        ),
+        buildAddButton(),
+    ]);
+}