native-document 1.0.15 → 1.0.16-8.2

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

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 '../../../core/data/Observable';
+
+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(),
+    ]);
+}

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

@@ -0,0 +1,85 @@
+import {Div, Span, ShowIf, Form} from '../../../../elements';
+import {Button} from '../../../components/button';
+
+import './form-control.css';
+
+export default function FormControlRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('form-control');
+
+    const fieldsObject = $desc.fieldBuilder
+        ? $desc.fieldBuilder()
+        : instance.$fields;
+
+    if($desc.errorsMode === 'summary') {
+        for(const [_, field] of Object.entries(instance.$fields)) {
+            field.forceShowErrors(false);
+        }
+    }
+
+    const errorsSummary = buildErrorsSummary($desc, instance);
+
+    const layoutFn = $desc.layout || buildDefaultLayout;
+
+    if(!layoutFn) {
+        throw new Error('FormControl: layout() must be defined');
+    }
+
+    const form = layoutFn({
+        fields: fieldsObject,
+        errors: errorsSummary,
+        form:   instance,
+    }, instance);
+
+    if(!((form instanceof HTMLFormElement) || form?.$element instanceof HTMLFormElement)) {
+        throw new Error('FormControl: layout must return an HtmlFormElement');
+    }
+
+    instance.$element = form;
+
+    form.nd.onSubmit(async (event) => {
+        return await instance.submit(event);
+    });
+
+    return form;
+}
+
+const buildDefaultLayout = ({ fields, errors, form }) => {
+    return Form({ class: 'form-control-default', ...form.resolveProps() }, [
+        ...Object.values(fields),
+        errors,
+        Div({ class: 'form-actions' }, [
+            Button('Reset').type('reset'),
+            Button('Submit').type('submit'),
+        ]),
+    ]);
+};
+
+
+const buildErrorsSummary = ($desc, instance) => {
+    if($desc.errorsMode === 'dispatch') {
+        return null;
+    }
+
+    return ShowIf($desc.errors, () => {
+        const errors = $desc.errors.val();
+        if(!errors) {
+            return null;
+        }
+
+        if($desc.renderErrors) {
+            return $desc.renderErrors(errors);
+        }
+
+        return Div({class: 'form-errors'},
+            Object.entries(errors).map(([field, msgs]) =>
+                Div({class: 'form-error-group'}, [
+                    Span({class: 'form-error-field'}, field),
+                    Div({class: 'form-error-messages'},
+                        msgs.map(msg => Span({class: 'form-error-message'}, msg)),
+                    ),
+                ]),
+            ),
+        );
+    });
+};