native-document 1.0.139 → 1.0.141

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

@@ -0,0 +1,84 @@
+import {Div, Span, ShowIf, Form} from '../../../../elements';
+import './form-control.css';
+import {Button} from "../../../components/button";
+
+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))
+                    ),
+                ])
+            )
+        );
+    });
+};

package/src/ui/components/form/field-collection.css

@@ -0,0 +1,55 @@
+.field-collection {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-comfortable);
+}
+
+.field-collection-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.field-collection-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-cozy);
+    padding: var(--space-comfortable);
+    border: 1px solid var(--field-input-border);
+    border-radius: var(--field-input-radius);
+}
+
+/* Transitions */
+.fade-enter-from {
+    opacity: 0;
+    transform: translateY(-8px);
+}
+
+.fade-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-exit {
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.slide-enter-from {
+    opacity: 0;
+    transform: translateX(-16px);
+}
+
+.slide-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.slide-exit {
+    opacity: 0;
+    transform: translateX(16px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}

package/src/ui/components/form/fields/AutocompleteFieldRender.js

@@ -0,0 +1,143 @@
+import {Div, Input, Span, ShowIf} from '../../../../../elements';
+import {Dropdown} from '../../../../../components';
+import FieldRender from './FieldRender';
+import { $ } from '../../../../../index';
+import {debounce} from "../../../../core/utils/helpers";
+
+export default function AutocompleteFieldRender($desc, instance) {
+    const $suggestions = $.array([]);
+    const $loading     = $(false);
+
+    instance.trailing(ShowIf($loading, Span({class: 'field-loading-spinner'}) ));
+
+    const input = buildInput($desc, instance, $suggestions, $loading);
+    const field = FieldRender($desc, instance, input);
+    const dropdown = buildDropdown($desc, instance, field, input, $suggestions);
+
+    return field.nd.ghostDom(dropdown);
+}
+
+const buildInput = ($desc, instance, $suggestions, $loading) => {
+    const inputProps = {
+        class: 'field-input',
+        type: 'text',
+        name: $desc.name,
+        id: $desc.id || $desc.name,
+        placeholder: $desc.placeholder,
+        disabled: $desc.disabled,
+        readonly: $desc.readonly,
+        value: $desc.value,
+        autocomplete: 'off',
+        ...($desc.elementsProps.input || {}),
+    };
+
+    const input = Input(inputProps);
+
+    instance.$input = input;
+
+    const handleSuggestions = debounce(async (query) => {
+        if(query.length < ($desc.minChars || 2)) {
+            $suggestions.set([]);
+            return;
+        }
+
+        $loading.set(true);
+        const results = await fetchSuggestions($desc, query);
+        $suggestions.set(results.slice(0, $desc.maxResults || 10));
+        $loading.set(false);
+    }, $desc.debounce || 300);
+
+
+    if($desc.value?.__$Observable) {
+        $desc.value.subscribe((val) => handleSuggestions(val));
+    } else {
+        input.nd.onInput((e) => {
+            const query = e.target.value;
+            handleSuggestions(query)
+        });
+    }
+
+    input.nd.onFocus(() => {
+        $desc.focus.set(true);
+        if($desc.clearErrorOn === 'focus') {
+            $desc.showErrors.set(false);
+        }
+    });
+
+    input.nd.onBlur(() => {
+        $desc.focus.set(false);
+        $desc.showErrors.set(true);
+
+        if($desc.validateOn === 'blur') {
+            instance.validate();
+        }
+    });
+
+    $desc.focus.subscribe((focused) => {
+        if(focused) {
+            input.focus();
+            return;
+        }
+        input.blur();
+    });
+
+    return input;
+};
+
+const fetchSuggestions = async ($desc, query) => {
+    let source = $desc.source;
+    if(!source) {
+        return [];
+    }
+
+    if(typeof source === 'function') {
+        const results = await source(query);
+        return Array.isArray(results) ? results : [];
+    }
+
+    if(source.__$Observable) {
+        source = source.val();
+    }
+
+    if(Array.isArray(source)) {
+        const labelKey = $desc.labelKey || 'label';
+        const q = query.toLowerCase();
+        return source.filter(item => {
+            const label = typeof item === 'string' ? item : item[labelKey] ?? '';
+            return label.toLowerCase().includes(q);
+        });
+    }
+
+    return [];
+};
+
+const buildDropdown = ($desc, instance, field, trigger, $suggestions) => {
+    return Dropdown()
+        .trigger(trigger, false)
+        .matchTargetWidth(field)
+        .atBottomLeading()
+        .onFocused()
+        .showIf($suggestions.is((value) => value.length > 0))
+        .closeOnSelect(false)
+        .renderItem($desc.renderItem)
+        .bind($suggestions, (item) => {
+            const valueKey = $desc.valueKey || 'value';
+            const labelKey = $desc.labelKey || 'label';
+
+            const optValue = typeof item === 'string' ? item : (item[valueKey] ?? item);
+            const optLabel = typeof item === 'string' ? item : (item[labelKey] ?? item);
+
+            return {
+                value: optValue,
+                label: optLabel,
+                data: item,
+                action: () => {
+                    if($desc.value?.__$isObservable) {
+                        $desc.value.set(optLabel);
+                    }
+                    instance.emit('select', item);
+                    instance.validate();
+                },
+            };
+        });
+};

package/src/ui/components/form/fields/CheckboxFieldRender.js

@@ -0,0 +1,59 @@
+import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
+import {buildErrors} from "../helpers";
+
+export default function CheckboxFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-checkbox-field');
+    props.class.add({'is-disabled': $desc.disabled});
+
+    const input = buildCheckbox($desc, instance);
+    const label = buildLabel(input, $desc);
+
+    const content = [
+        Div({class: 'field-checkbox-wrapper'}, [input, label]),
+    ];
+
+    if($desc.help) {
+        content.push(Span({class: 'field-hint', ...($desc.elementsProps.hint || {})}, $desc.help));
+    }
+
+    content.push(buildErrors($desc));
+
+    return Div(instance.resolveProps(), content).nd.with({input});
+}
+
+const buildCheckbox = ($desc, instance) => {
+    const input = Input({
+        class:    'field-checkbox',
+        type:     'checkbox',
+        name:     $desc.name,
+        id:       $desc.id || $desc.name,
+        disabled: $desc.disabled,
+        checked:  $desc.checked,
+        ...($desc.elementsProps.input || {}),
+    });
+
+    instance.$input = input;
+
+    input.nd.onChange((e) => {
+        if($desc.validateOn === 'change') {
+            instance.validate();
+        }
+    });
+
+    return input;
+};
+
+const buildLabel = (input, $desc) => {
+    if(!$desc.label) {
+        return null;
+    }
+
+    return Label({
+        class: 'field-checkbox-label',
+        for:   $desc.id || $desc.name,
+        ...($desc.elementsProps.label || {}),
+    }, $desc.label);
+};

package/src/ui/components/form/fields/CheckboxGroupFieldRender.js

@@ -0,0 +1,92 @@
+import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
+import {buildErrors} from "../helpers";
+
+export default function CheckboxGroupFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-checkbox-group-field');
+    props.class.add({'is-disabled': $desc.disabled});
+
+    const content = [];
+
+    if($desc.label) {
+        content.push(Span({
+            class: 'field-label',
+            ...($desc.elementsProps.label || {}),
+        }, $desc.label));
+    }
+
+    content.push(buildOptions($desc, instance));
+
+    if($desc.help) {
+        content.push(Span({class: 'field-hint', ...($desc.elementsProps.hint || {})}, $desc.help));
+    }
+
+    content.push(buildErrors($desc));
+
+    return Div(instance.resolveProps(), content);
+}
+
+const buildOptions = ($desc, instance) => {
+    const options   = $desc.options || [];
+    const $selected = $desc.value;
+
+    const isSelected = (optValue) => {
+        if(!$selected?.__$Observable) {
+            return false;
+        }
+        return $selected.check(v => Array.isArray(v) && v.includes(optValue));
+    };
+
+    let onToggle = () => {};
+
+    if($selected?.__$Observable) {
+        onToggle = (optValue) => {
+            const current = $selected.val() || [];
+
+            if(current.includes(optValue)) {
+                $selected.set(current.filter(v => v !== optValue));
+            }
+            else {
+                $selected.set([...current, optValue]);
+            }
+
+            if($desc.validateOn === 'change') {
+                instance.validate();
+            }
+        };
+    }
+
+    const buildItem = (option) => {
+        const optValue  = option.value ?? option;
+        const optLabel  = option.label ?? option;
+        const optId     = ($desc.id || $desc.name) + '-' + optValue;
+        const $checked  = isSelected(optValue);
+
+        const input = Input({
+            class:   'field-checkbox',
+            type:    'checkbox',
+            id:      optId,
+            name:    $desc.name,
+            value:   optValue,
+            checked: $checked,
+            disabled: $desc.disabled,
+        });
+
+        input.nd.onChange(() => onToggle(optValue));
+
+        return Div({class: 'field-checkbox-wrapper'}, [
+            input,
+            Label({
+                class: 'field-checkbox-label',
+                for:   optId,
+            }, optLabel),
+        ]);
+    };
+
+    return Div({
+        class: 'field-checkbox-group is-' + ($desc.layout || 'vertical'),
+        ...($desc.elementsProps.wrapper || {}),
+    }, ForEachArray($desc.options, buildItem));
+};

package/src/ui/components/form/fields/ColorFieldRender.js

@@ -0,0 +1,30 @@
+import FieldRender from './FieldRender';
+import {Input, Span} from '../../../../../elements';
+
+export default function ColorFieldRender($desc, instance) {
+    const $colorPreview = Span({
+        class: 'field-color-preview',
+        style: {
+            background: $desc.value?.__$isObservable
+                ? $desc.value
+                : $desc.value || 'transparent',
+        },
+    });
+
+    instance.leading($colorPreview);
+
+    const input = Input({
+        class:    'field-input field-color-input',
+        type:     'color',
+        name:     $desc.name,
+        id:       $desc.id || $desc.name,
+        disabled: $desc.disabled,
+        value:    $desc.value,
+        ...($desc.elementsProps.input || {}),
+    });
+
+    instance.$input = input;
+    $colorPreview.nd.onClick(() => input.click());
+
+    return FieldRender($desc, instance, input);
+}

package/src/ui/components/form/fields/DateFieldRender.js

@@ -0,0 +1,154 @@
+import {Div, Input, Label, Span, ShowIf, Switch} from '../../../../../elements';
+import {buildErrors, buildInputWithSlots} from '../helpers';
+import './date-field.css';
+
+export default function DateFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-date-field');
+    props.class.add({ 'is-disabled': $desc.disabled, 'has-error': $desc.hasErrors });
+
+    const content = [];
+
+    if($desc.label) {
+        content.push(buildLabel($desc));
+    }
+
+    const inputType  = ($desc.withTime?.__$isObservable
+        ? $desc.withTime.transform((hasTime) => (hasTime ? 'datetime-local' : 'date'))
+        : ($desc.withTime ? 'datetime-local' : 'date'));
+
+    if($desc.range?.__$Observable) {
+        content.push(
+            Switch($desc.range,
+                () => buildRangeWrapper($desc, instance, inputType),
+                () => buildSingleWrapper($desc, instance, inputType)
+            )
+        );
+    }
+    else {
+        content.push(buildSingleWrapper($desc, instance, inputType));
+    }
+
+    if($desc.help) {
+        content.push(
+            Span({ class: 'field-hint', ...($desc.elementsProps.hint || {}) }, $desc.help)
+        );
+    }
+
+    content.push(buildErrors($desc));
+
+    return Div(instance.resolveProps(), content);
+}
+
+const buildLabel = ($desc) => {
+    return Label({
+        class: 'field-label',
+        for:   $desc.id || $desc.name,
+        ...($desc.elementsProps.label || {}),
+    }, $desc.label);
+};
+
+const buildSingleWrapper = ($desc, instance, inputType) => {
+    const input = buildInput($desc, instance, inputType, $desc.value, $desc.name);
+
+    const controls = [];
+
+    let callback = null;
+    if($desc.clearable) {
+        if($desc.value?.__$isObservable) {
+            callback = () => {
+                instance.emit('clear');
+                $desc.value.set(null);
+            }
+        } else {
+            callback = (e) => {
+                e.target.value = '';
+                instance.emit('clear');
+            };
+        }
+    }
+
+    return Div({class: 'date-field-single'}, [
+        buildInputWithSlots(input, $desc, instance, { onClear: callback } ),
+        controls.length ? Div({class: 'date-field-controls'}, controls) : null,
+    ]);
+};
+
+const buildRangeWrapper = ($desc, instance, inputType) => {
+    const startInput = buildInput($desc, instance, inputType, $desc.valueStart, $desc.name + '_start');
+    const endInput   = buildInput($desc, instance, inputType, $desc.valueEnd,   $desc.name + '_end');
+
+    let callback;
+    if($desc.valueStart?.__$Observable && $desc.valueEnd?.__$Observable) {
+        callback = () => {
+            instance.emit('change', { start: $desc.valueStart.val(), end: $desc.valueEnd?.val() });
+
+            if((new Date($desc.valueEnd.val())) < (new Date($desc.valueStart.val()))) {
+                $desc.valueEnd.set($desc.valueStart.val());
+            }
+        }
+    } else {
+        callback = () => {
+            if((new Date(endInput.value)) < (new Date(startInput.value))) {
+                endInput.value = startInput.value;
+            }
+        };
+    }
+
+    startInput.nd.onChange(callback);
+    endInput.nd.onChange(callback);
+
+    if($desc.valueEnd?.__$Observable) {
+        endInput.nd.onChange((e) => {
+            instance.emit('change', { start: $desc.valueStart?.val(), end: $desc.valueEnd.val() });
+        });
+    }
+    else {
+        endInput.nd.onChange((e) => {
+            instance.emit('change', { start: startInput.value, end: endInput.value });
+        });
+    }
+
+    return Div({class: 'date-field-range'}, [
+        Div({class: 'date-field-range-start'}, [
+            Span({class: 'date-field-range-label'}, 'From'),
+            buildInputWithSlots(startInput, $desc, instance, { source: 'valueStart', onClear: null } )
+        ]),
+        Span({class: 'date-field-range-separator'}, $desc.rangeSeparator),
+        Div({class: 'date-field-range-end'}, [
+            Span({class: 'date-field-range-label'}, 'To'),
+            buildInputWithSlots(endInput, $desc, instance, { source: 'valueEnd', onClear: null } )
+        ]),
+    ]);
+};
+
+const buildInput = ($desc, instance, inputType, $value, name) => {
+
+    const input = Input({
+        class: 'field-input',
+        type: inputType,
+        name: name,
+        id: $desc.id || $desc.name,
+        disabled: $desc.disabled,
+        readonly: $desc.readonly,
+        min: $desc.minDate || null,
+        max: $desc.maxDate || null,
+        step: $desc.timeStep || null,
+        value: $value,
+        ...($desc.elementsProps.input || {}),
+    });
+
+    instance.$input = input;
+
+    input.nd.onChange($value?.__$Observable ? (e) => {
+        instance.emit('change', $value.val());
+        instance.validate();
+    }: (e) => {
+        instance.emit('change', e.target.value);
+        instance.validate();
+    });
+
+    return input;
+};

package/src/ui/components/form/fields/EmailFieldRender.js

@@ -0,0 +1,5 @@
+import FieldRender from "./FieldRender";
+
+const EmailFieldRender = FieldRender;
+
+export default EmailFieldRender;