native-document 1.0.139 → 1.0.140

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

@@ -0,0 +1,112 @@
+import {ForEachArray, ShowIf, Div, Span, Img} from "../../../../elements";
+import {clear} from "@babel/traverse/lib/cache";
+
+export const buildErrors = ($desc) => {
+    return ShowIf($desc.showErrors, () =>
+        ShowIf($desc.hasErrors,
+            () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
+                ForEachArray($desc.errors, (error) =>
+                    Span({class: 'field-error'}, error)
+                )
+            )
+        )
+    );
+};
+
+
+export const formatSize = (bytes) => {
+    if(bytes < 1024)        return bytes + ' B';
+    if(bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+};
+
+
+export const getFileThumbnail = (file, fieldInstance) => {
+    const isImage = file.type?.startsWith('image/');
+    const url = URL.createObjectURL(file);
+    if(isImage) {
+        return Img(url, {
+            class: 'file-item-img',
+            alt: file.name,
+        });
+    }
+
+    const fieldDesc = fieldInstance.$description;
+    if(fieldDesc.fileIcons) {
+        for(let i = 0; i < fieldDesc.fileIcons.length; i++) {
+            const iconDesc = fieldDesc.fileIcons[i];
+            if(iconDesc.pattern && iconDesc.pattern.test(file.type)) {
+                return Span({class: 'file-item-icon'}, iconDesc.icon);
+            }
+            if(iconDesc.type && iconDesc.type === file.type) {
+                return Span({class: 'file-item-icon'}, iconDesc.icon);
+            }
+        }
+    }
+
+    return Span({ class: 'file-item-icon file-item-icon-default' });
+};
+
+export const buildProgress = (item) => {
+    const $status   = item.$description.status;
+    const $progress = item.$description.progress;
+
+    return ShowIf($status.is(s => s === 'uploading'),
+        () => Div({class: 'file-item-progress'}, [
+            Div({class: 'file-item-progress-track'},
+                Div({
+                    class: 'file-item-progress-bar',
+                    style: {width: $progress.transform(v => v + '%')},
+                })
+            ),
+            Span({class: 'file-item-progress-label'}, $progress.transform(v => v + '%')),
+        ])
+    );
+};
+
+export const buildInputWithSlots = (input, $desc, instance, options = {}) => {
+    const clearable = options.clearable || $desc.clearable;
+    const $value = $desc[options.source || 'value'];
+    const onClear = options.onClear;
+    const slots = $desc.slots || {};
+    if(clearable && $value?.__$Observable) {
+        const clearBtn = Span({class: 'field-clear'}, $desc.clearButtonIcon || '×');
+        clearBtn.nd.onStopClick((e) => {
+            $value.set(null);
+            onClear?.(e);
+        });
+        instance.trailing(ShowIf($value, clearBtn));
+    }
+
+    const content = [];
+
+    if(slots.leading) {
+        content.push(Div({class: 'field-leading'}, slots.leading));
+    }
+
+    content.push(input);
+
+    if(slots.trailing) {
+        content.push(Div({class: 'field-trailing'}, slots.trailing));
+    }
+
+    const wrapperClass = {
+        'field-input-wrapper': true,
+        'has-leading':  !!slots.leading,
+        'has-trailing': !!slots.trailing,
+        'is-touched': $desc.isTouched,
+        'is-dirty': $desc.isDirty,
+        ...(options.class || {})
+    };
+
+    input.nd.onInput((e) => {
+        const current = e.target.value;
+        $desc.isDirty.set(current !== $desc.initialValue);
+    });
+
+    input.nd.onBlur(() => {
+        $desc.isTouched.set(true);
+    });
+
+    return Div({class: wrapperClass}, content);
+};

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

@@ -0,0 +1,61 @@
+import FieldRender from "./fields/FieldRender";
+import StringFieldRender from "./fields/StringFieldRender";
+import TelFieldRender from "./fields/TelFieldRender";
+import UrlFieldRender from "./fields/UrlFieldRender";
+import EmailFieldRender from "./fields/EmailFieldRender";
+import PasswordFieldRender from "./fields/PasswordFieldRender";
+import NumberFieldRender from "./fields/NumberFieldRender";
+import TextAreaFieldRender from "./fields/TextAreaFieldRender";
+import CheckboxFieldRender from "./fields/CheckboxFieldRender";
+import CheckboxGroupFieldRender from "./fields/CheckboxGroupFieldRender";
+import RadioFieldRender from "./fields/RadioFieldRender";
+import SelectFieldRender from "./fields/SelectFieldRender";
+import AutocompleteFieldRender from "./fields/AutocompleteFieldRender";
+import HiddenFieldRender from "./fields/HiddenFieldRender";
+import ColorFieldRender from "./fields/ColorFieldRender";
+import FileFieldRender from "./fields/FileFieldRender";
+import FileNativeModeRender from "./file-upload-mode/FileNativeModeRender";
+import FileDropzoneModeRender from "./file-upload-mode/FileDropzoneModeRender";
+import FileWallModeRender from "./file-upload-mode/FileWallModeRender";
+import FileUploadButtonModeRender from "./file-upload-mode/FileUploadButtonModeRender";
+import FileAvatarModeRender from "./file-upload-mode/FileAvatarModeRender";
+import DateFieldRender from "./fields/DateFieldRender";
+import TimeFieldRender from "./fields/TimeFieldRender";
+import SliderFieldRender from "./fields/SliderFieldRender";
+import RangeFieldRender from "./fields/RangeFieldRender";
+import FieldCollectionRender from "./FieldCollectionRender";
+import FormControlRender from "./FormControlRender";
+
+
+
+export {
+    FieldRender,
+    StringFieldRender,
+    TelFieldRender,
+    UrlFieldRender,
+    EmailFieldRender,
+    PasswordFieldRender,
+    NumberFieldRender,
+    TextAreaFieldRender,
+    CheckboxFieldRender,
+    CheckboxGroupFieldRender,
+    RadioFieldRender,
+    SelectFieldRender,
+    AutocompleteFieldRender,
+    HiddenFieldRender,
+    ColorFieldRender,
+    FileFieldRender,
+
+    FileNativeModeRender,
+    FileAvatarModeRender,
+    FileDropzoneModeRender,
+    FileUploadButtonModeRender,
+    FileWallModeRender,
+
+    DateFieldRender,
+    TimeFieldRender,
+    RangeFieldRender,
+    SliderFieldRender,
+    FieldCollectionRender,
+    FormControlRender,
+}

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

@@ -0,0 +1,12 @@
+import {Div, ListItem} from '../../../core/elements';
+
+export default function MenuDividerRender($desc, instance) {
+    if($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const props = instance.getEditableProps();
+    props.class.add('menu-divider');
+
+    return ListItem(Div( { ...instance.resolveProps(), role: "separator" }));
+}

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

@@ -0,0 +1,60 @@
+import {Div, Span, ForEachArray, ShowIf, Switch} from '../../../core/elements';
+import {MenuDivider} from "../../../components/menu";
+
+export default function MenuGroupRender($desc, instance) {
+    if($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const props = instance.getEditableProps();
+    if($desc.collapsable) {
+        props.class.add('is-collapsable');
+    }
+
+    const content = [];
+
+    if($desc.label || $desc.icon) {
+        content.push(buildGroupHeader($desc, instance));
+    }
+
+    const items = Div({class: 'menu-group-items'}, ForEachArray($desc.items));
+
+    if($desc.collapsable && $desc.collapsed) {
+        content.push(ShowIf($desc.collapsed, () => items));
+    }
+    else {
+        content.push(items);
+    }
+
+    return Div(instance.resolveProps(), content);
+}
+
+const buildGroupHeader = ($desc, instance) => {
+    const content = [];
+
+    if($desc.icon) {
+        content.push(Span({class: 'menu-group-icon'}, $desc.icon));
+    }
+
+    if($desc.label) {
+        content.push(Span({class: 'menu-group-label'}, $desc.label));
+    }
+
+    if($desc.collapsable) {
+        const closedIcon = $desc.collapsableOpenedIcon || '▾';
+        const openedIcon = $desc.collapsableClosedIcon || '';
+        content.push(
+            Span({ class: $desc.collapsed?.transform(c => 'menu-group-chevron' + (c ? '' : ' is-open')), },
+                Switch($desc.collapsed, openedIcon, closedIcon)
+            )
+        );
+    }
+
+    const header = Div({class: 'menu-group-header'}, content);
+
+    if($desc.collapsable && $desc.collapsed) {
+        header.nd.onStopClick(() => $desc.collapsed.toggle());
+    }
+
+    return header;
+};

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

@@ -0,0 +1,57 @@
+import {Div, ListItem, Span } from '../../../core/elements';
+import ShortcutManager from '../../../core/utils/shortcut-manager';
+import { $ } from '../../../../index'
+import {buildSubmenu, setupInteraction} from "./helpers";
+
+export default function MenuItemRender($desc, instance) {
+    if($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('menu-item');
+    if($desc.disabled) {
+        props.class.add('is-disabled', $desc.disabled);
+    }
+    if($desc.selected) {
+        props.class.add('is-selected', $desc.selected);
+    }
+
+    const orientation  = instance.$parent?.$description?.orientation || 'horizontal';
+    const interaction  = $desc.interaction || instance.$parent?.$description?.interaction || 'hover';
+    const hasSubmenu   = $desc.items?.length;
+
+    if(hasSubmenu) {
+        props.class.add('has-submenu');
+    }
+
+    const content = [
+        Span({class: 'menu-item-icon'}, $desc.icon),
+        Span({class: 'menu-item-label'}, $desc.label),
+        Span({class: 'menu-item-shortcut'}, ShortcutManager.display($desc.shortcut)),
+        Span({class: 'menu-group-chevron'}, hasSubmenu ? '›' : ''),
+    ];
+
+    if($desc.trailing) {
+        content.push(Span({class: 'menu-item-trailing'}, $desc.trailing));
+    }
+
+    const el = Div({class: 'menu-item-wrapper'}, content);
+
+    el.nd.onClick(() => {
+        if($desc.disabled?.val()) {
+            return;
+        }
+        $desc.action?.($desc.dataResolver?.());
+        instance.emit('click', instance);
+    });
+
+    const $isOpen   = $(false);
+    const submenuEl = buildSubmenu($desc, orientation, $isOpen, instance);
+    const listItem  = ListItem(instance.resolveProps(), [el, submenuEl]);
+
+    setupInteraction(listItem, el, submenuEl, orientation, interaction, $isOpen, hasSubmenu, instance);
+
+    return listItem;
+}

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

@@ -0,0 +1,55 @@
+import {Link, ListItem, Span} from "../../../core/elements";
+import { Link as RouterLink } from '../../../../router';
+import ShortcutManager from "../../../core/utils/shortcut-manager";
+import { $ } from '../../../../index';
+import {buildSubmenu, setupInteraction} from "./helpers";
+
+export default function MenuLinkRender($desc, instance) {
+    if($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('menu-item');
+    props.class.add({ 'is-disabled': $desc.disabled, 'is-selected': $desc.selected });
+
+    const orientation  = instance.$parent?.$description?.orientation || 'horizontal';
+    const interaction  = $desc.interaction || instance.$parent?.$description?.interaction || 'hover';
+    const hasSubmenu   = $desc.items?.length;
+    const action       = $desc.action;
+    const isRoute      = action?.isRoute;
+    const targetPath   = typeof action === 'string' ? action : action?.to || '#';
+    const target       = $desc.target || null;
+
+    if(hasSubmenu) {
+        props.class.add('has-submenu');
+    }
+
+    const content = [
+        Span({class: 'menu-item-icon'}, $desc.icon || null),
+        Span({class: 'menu-item-label'}, $desc.label),
+        Span({class: 'menu-item-shortcut'}, ShortcutManager.display($desc.shortcut)),
+        Span({class: 'menu-group-chevron'}, hasSubmenu ? '›' : ''),
+    ];
+
+    if($desc.trailing) {
+        content.push(Span({class: 'menu-item-trailing'}, $desc.trailing));
+    }
+
+    const el = isRoute
+        ? RouterLink({class: 'menu-item-wrapper', to: targetPath, target}, content)
+        : Link({class: 'menu-item-wrapper', href: targetPath, target}, content);
+
+    if(!hasSubmenu) {
+        return ListItem(instance.resolveProps(), el);
+    }
+
+    const $isOpen   = $(false);
+    const submenuEl = buildSubmenu($desc, orientation, $isOpen, instance);
+    const listItem  = ListItem(instance.resolveProps(), [el, submenuEl]);
+
+    setupInteraction(listItem, el, submenuEl, orientation, interaction, $isOpen, hasSubmenu, instance);
+
+    return listItem;
+}

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

@@ -0,0 +1,21 @@
+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);
+    });
+};