native-document 1.0.15 → 1.0.16-8.1

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

@@ -0,0 +1,155 @@
+import {Div, Input, Label, Span, 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;

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

@@ -0,0 +1,118 @@
+import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
+import {buildInputWithSlots} from '../helpers';
+
+import './field.css';
+
+export default function FieldRender($desc, instance, input = null) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-' + $desc.type + '-' + $desc.suffix);
+    props.class.add({'has-error': $desc.hasErrors, 'is-disabled': $desc.disabled});
+
+    const slots = $desc.slots || {};
+
+    const content = [];
+
+    if($desc.label) {
+        content.push(buildLabel($desc));
+    }
+
+    const resolvedInput = input || buildInput($desc, instance);
+    content.push(buildInputWithSlots(resolvedInput, $desc, instance, {
+        class: ($desc.elementsProps.wrapper || {}),
+    }));
+
+    if(slots.bottom) {
+        content.push(slots.bottom);
+    }
+
+    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: resolvedInput });
+}
+
+const buildLabel = ($desc) => {
+    const labelContent = [$desc.label];
+
+    if($desc.rules?.some(rule => rule.fn?.name === 'required')) {
+        labelContent.push(Span({class: 'field-required'}, '*'));
+    }
+
+    return Label({
+        class: 'field-label',
+        for:   $desc.id || $desc.key || $desc.name,
+        ...($desc.elementsProps.label || {}),
+    }, labelContent);
+};
+
+const buildInput = ($desc, instance) => {
+    const inputProps = {
+        class:       'field-input',
+        type:        $desc.type,
+        name:        $desc.name,
+        id:          $desc.id || $desc.name,
+        placeholder: $desc.placeholder,
+        disabled:    $desc.disabled,
+        readonly:    $desc.readonly,
+        value:       $desc.value,
+        ...($desc.elementsProps.input || {}),
+    };
+
+    const input = Input(inputProps);
+
+    instance.$input = input;
+
+    setupEvents(input, $desc, instance);
+
+    return input;
+};
+
+const setupEvents = (input, $desc, instance) => {
+    if($desc.clearErrorOn === 'input') {
+        input.nd.onInput((e) => {
+            $desc.errors?.set(null);
+        });
+    }
+
+    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();
+    });
+};
+
+const buildErrors = ($desc) => {
+    return ShowIf($desc.showErrors, () => {
+        return ShowIf($desc.hasErrors,
+            () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
+                ForEachArray($desc.errors, (error) =>
+                    Span({class: 'field-error'}, error),
+                ),
+            ),
+        );
+    });
+};

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

@@ -0,0 +1,41 @@
+import {Div, Label, Span} from '../../../../../elements';
+import {buildErrors} from '../helpers';
+import FileNativeMode from '../../../../components/form/field/types/file-field-mode/FileNativeMode';
+
+import './file-field.css';
+
+export default function FileFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-file-field');
+    props.class.add({'is-disabled': $desc.disabled, 'has-error': $desc.hasErrors});
+
+    const $files = $desc.files;
+    const mode   = $desc.mode || new FileNativeMode();
+
+    const content = [];
+
+    if($desc.label) {
+        content.push(buildLabel($desc));
+    }
+
+    mode.context({ fieldDesc: $desc, fieldInstance: instance, $files });
+    content.push(mode);
+
+    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);
+};

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

@@ -0,0 +1,13 @@
+import {Input} from '../../../../../elements';
+
+export default function HiddenFieldRender($desc, instance) {
+    const input = Input({
+        type:  'hidden',
+        name:  $desc.name,
+        id:    $desc.id || $desc.name,
+        value: $desc.value,
+    });
+
+    instance.$input = input;
+    return input;
+}

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

@@ -0,0 +1,52 @@
+import {Span} from '../../../../../elements';
+import FieldRender from './FieldRender';
+
+export default function NumberFieldRender($desc, instance) {
+    if($desc.prefix) {
+        instance.leading(Span({class: 'field-number-prefix'}, $desc.prefix));
+    }
+
+    if($desc.suffix) {
+        instance.trailing(Span({class: 'field-number-suffix'}, $desc.suffix));
+    }
+
+    if($desc.step) {
+        $desc.elementsProps.input = {
+            ...$desc.elementsProps.input,
+            step: $desc.step,
+        };
+    }
+
+    if($desc.decimals != null) {
+        $desc.elementsProps.input = {
+            ...$desc.elementsProps.input,
+            step: $desc.step || Math.pow(10, -$desc.decimals),
+        };
+    }
+
+    const el = FieldRender($desc, instance);
+
+    if($desc.decimals != null) {
+        setupDecimalsHandling(instance, $desc);
+    }
+
+    return el;
+}
+
+const setupDecimalsHandling = (instance, $desc) => {
+    const input = instance.$input;
+    if(!input) {
+        return;
+    }
+
+    input.nd.onBlur(() => {
+        const raw = parseFloat(input.value);
+        if(!isNaN(raw)) {
+            const formatted = raw.toFixed($desc.decimals);
+            input.value = formatted;
+            if($desc.value?.__$isObservable) {
+                $desc.value.set(parseFloat(formatted));
+            }
+        }
+    });
+};

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

@@ -0,0 +1,65 @@
+import {Span, Button} from '../../../../../elements';
+import FieldRender from './FieldRender';
+import { $ } from '../../../../core/data/Observable';
+import './password-field.css';
+
+export default function PasswordFieldRender($desc, instance) {
+    if($desc.visibilityToggle) {
+        const $visible = $(false);
+        const icons    = $desc.visibilityIcons || {show: '👁', hide: '🙈'};
+
+        const toggleBtn = Button({class: 'field-visibility-toggle'},
+            $visible.transform(v => v ? icons.hide : icons.show),
+        );
+
+        toggleBtn.nd.onClick(() => {
+            $visible.toggle();
+            instance.$input?.setAttribute('type', $visible.val() ? 'text' : 'password');
+        });
+
+        $desc.slots.trailing = toggleBtn;
+    }
+
+    if($desc.showStrengthMeter) {
+        $desc.slots.bottom = buildStrengthMeter($desc);
+    }
+
+    return FieldRender($desc, instance);
+}
+
+const DEFAULT_STRENGTH_LABELS = {
+    0: '',
+    1: 'Very weak',
+    2: 'Weak',
+    3: 'Fair',
+    4: 'Strong',
+    5: 'Very strong',
+};
+
+const buildStrengthMeter = ($desc) => {
+    const $strength     = $desc.value?.transform(computeStrength) || $(0);
+    const strengthLabels = $desc.strengthLabels || DEFAULT_STRENGTH_LABELS;
+
+    const $label = $strength.transform((score) => strengthLabels[score] || '');
+
+    const $scoreClass = $strength.transform((score) => 'field-strength-bar is-score-' + score);
+    const $width      = $strength.transform((score) => (score / 5 * 100) + '%');
+
+    return Span({class: 'field-strength-meter'}, [
+        Span({class: 'field-strength-track'},
+            Span({class: $scoreClass, style: {width: $width}}),
+        ),
+        Span({class: 'field-strength-label'}, $label),
+    ]);
+};
+
+const computeStrength = (password) => {
+    if(!password) return 0;
+    let score = 0;
+    if(password.length >= 8)          score++;
+    if(/[A-Z]/.test(password))        score++;
+    if(/[a-z]/.test(password))        score++;
+    if(/\d/.test(password))           score++;
+    if(/[^A-Za-z0-9]/.test(password)) score++;
+    return score;
+};

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

@@ -0,0 +1,77 @@
+import {Div, Label, Input, Span, ForEachArray} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+import {buildErrors} from '../helpers';
+
+export default function RadioFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-radio-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  = Array.isArray($desc.options) ? $.array($desc.options) : $desc.options;
+    const $selected = $desc.checked;
+
+    const isSelected = (optValue) => {
+        if(!$selected?.__$isObservable) {
+            return false;
+        }
+        return $selected.transform(v => v === optValue);
+    };
+
+    const onSelect = (optValue) => {
+        if($selected?.__$isObservable) {
+            $selected.set(optValue);
+        }
+        instance.validate();
+    };
+
+    const buildOption = (option) => {
+        const optValue = option.value ?? option;
+        const optLabel = option.label ?? option;
+        const optId    = ($desc.id || $desc.name) + '-' + optValue;
+
+        const input = Input({
+            class:    'field-radio',
+            type:     'radio',
+            id:       optId,
+            name:     $desc.name,
+            value:    optValue,
+            checked:  isSelected(optValue),
+            disabled: $desc.disabled,
+        });
+
+        input.nd.onChange(() => onSelect(optValue));
+
+        return Div({class: 'field-radio-wrapper'}, [
+            input,
+            Label({class: 'field-radio-label', for: optId}, optLabel),
+        ]);
+    };
+
+    return Div({
+        class: 'field-radio-group is-' + ($desc.layout || 'vertical'),
+        ...($desc.elementsProps.wrapper || {}),
+    }, ForEachArray($options, buildOption));
+};

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

@@ -0,0 +1,122 @@
+import {Div, ForEachArray, Input, Label, Span} from '../../../../../elements';
+import {buildErrors} from '../helpers';
+
+import './range-field.css';
+
+export default function RangeFieldRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('field');
+    props.class.add('is-range-field');
+    props.class.add({
+        'is-disabled': $desc.disabled,
+        'has-error':   $desc.hasErrors,
+        'is-vertical': $desc.vertical,
+    });
+
+    const content = [];
+
+    if($desc.label) {
+        content.push(buildLabel($desc));
+    }
+
+    content.push(buildRangeWrapper($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 buildLabel = ($desc) => {
+    return Label({
+        class: 'field-label',
+        for:   $desc.id || $desc.name,
+        ...($desc.elementsProps.label || {}),
+    }, $desc.label);
+};
+
+const buildRangeWrapper = ($desc, instance) => {
+    const input = buildInput($desc, instance);
+
+    const content = [input];
+
+    if($desc.showValue) {
+        content.push(buildValueDisplay($desc));
+    }
+
+    if($desc.showMarks && $desc.marks?.length) {
+        content.push(buildMarks($desc));
+    }
+
+    return Div({class: 'range-field-wrapper'}, content);
+};
+
+const buildInput = ($desc, instance) => {
+    const input = Input({
+        class: 'range-field-input',
+        type: 'range',
+        name: $desc.name,
+        id: $desc.id || $desc.name,
+        min: $desc.min ?? 0,
+        max: $desc.max ?? 100,
+        step: $desc.step ?? 1,
+        disabled: $desc.disabled,
+        value: $desc.value,
+        ...($desc.elementsProps.input || {}),
+    });
+
+    instance.$input = input;
+
+    input.nd.onInput((e) => {
+        const val = Number(e.target.value);
+        if($desc.value?.__$isObservable) {
+            $desc.value.set(val);
+        }
+        instance.emit('change', val);
+        instance.validate();
+    });
+
+    input.nd.onChange((e) => {
+        instance.emit('complete', Number(e.target.value));
+    });
+
+    return input;
+};
+
+const buildValueDisplay = ($desc) => {
+    const formatted = $desc.value?.__$isObservable
+        ? $desc.value.transform(v => {
+            if($desc.decimals) return Number(v).toFixed($desc.decimals);
+            if($desc.suffix)   return v + ' ' + $desc.suffix;
+            if($desc.prefix)   return $desc.prefix + ' ' + v;
+            return String(Math.round(v));
+        })
+        : String($desc.value ?? 0);
+
+    return Span({class: 'range-field-value'}, formatted);
+};
+
+const buildMarks = ($desc) => {
+    const min   = $desc.min ?? 0;
+    const max   = $desc.max ?? 100;
+    const marks = $desc.marks || [];
+
+    return Div({class: 'range-field-marks'},
+        ForEachArray(marks, mark => {
+            const pct = ((mark.value - min) / (max - min)) * 100;
+            return Div({
+                class: 'range-field-mark',
+                style: $desc.vertical ? {bottom: pct + '%'} : {left: pct + '%'},
+            }, [
+                Div({class: 'range-field-mark-dot'}),
+                mark.label
+                    ? Span({class: 'range-field-mark-label'}, mark.label)
+                    : null,
+            ].filter(Boolean));
+        }),
+    );
+};