native-document 1.0.15 → 1.0.16-8.2

package/src/ui/components/form/file-upload-mode/file-avatar-mode.css

@@ -0,0 +1,139 @@
+:root {
+    --file-avatar-radius-circle: 50%;
+    --file-avatar-radius-square: 12px;
+    --file-avatar-badge-size: 26px;
+}
+
+.file-avatar-wrapper {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.file-avatar {
+    overflow: hidden;
+    background: var(--gray-lite-5);
+    border: 1px solid var(--field-input-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+
+    &.is-circle { border-radius: var(--file-avatar-radius-circle); }
+    &.is-square { border-radius: var(--file-avatar-radius-square); }
+}
+
+.file-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    position: absolute;
+    inset: 0;
+}
+
+.file-avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.file-avatar-placeholder-icon {
+    font-size: 36px;
+}
+
+/* Hover overlay variant */
+.file-avatar-wrapper.is-hover-overlay {
+    .file-avatar-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+    }
+
+    &.is-circle .file-avatar-overlay { border-radius: var(--file-avatar-radius-circle); }
+    &.is-square .file-avatar-overlay { border-radius: var(--file-avatar-radius-square); }
+
+    &:hover .file-avatar-overlay {
+        opacity: 1;
+    }
+
+    .file-avatar-overlay-icon {
+        font-size: 24px;
+    }
+}
+
+/* Corner badge variant */
+.file-avatar-wrapper.is-corner-badge {
+    .file-avatar-badge {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: var(--file-avatar-badge-size);
+        height: var(--file-avatar-badge-size);
+        border-radius: 50%;
+        background: var(--background);
+        border: 1px solid var(--field-input-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        cursor: pointer;
+        transition: border-color 0.15s ease;
+
+        &:hover {
+            border-color: var(--color-primary);
+        }
+    }
+}
+
+/* Action buttons variant */
+.file-avatar-action-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+}
+
+.file-avatar-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-avatar-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-cozy) var(--space-comfortable);
+    border-radius: var(--field-input-radius);
+    font-size: var(--description-size);
+    cursor: pointer;
+    transition: background 0.15s ease;
+
+    &.is-change {
+        border: 1px solid var(--field-input-border);
+        background: var(--background);
+        color: var(--text-color);
+
+        &:hover {
+            border-color: var(--color-primary);
+            background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+        }
+    }
+
+    &.is-remove {
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--gray);
+
+        &:hover {
+            color: var(--color-danger);
+        }
+    }
+}

package/src/ui/components/form/file-upload-mode/file-dropzone-mode.css

@@ -0,0 +1,88 @@
+.file-dropzone-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-dropzone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed var(--field-input-border);
+    border-radius: var(--field-input-radius);
+    padding: var(--space-comfortable);
+    cursor: pointer;
+    min-height: 120px;
+    transition: border-color 0.15s ease, background 0.15s ease;
+
+    &:hover,
+    &.is-drag-over {
+        border-color: var(--color-primary);
+        background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    }
+}
+
+.file-dropzone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-cozy);
+    pointer-events: none;
+}
+
+.file-dropzone-icon {
+    font-size: 32px;
+}
+
+.file-dropzone-text {
+    font-size: var(--field-font-size);
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.file-dropzone-hint {
+    font-size: var(--note-size);
+    color: var(--gray);
+
+    &:empty {
+        display: none;
+    }
+}
+
+.file-dropzone-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-dropzone-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    border: 1px solid var(--field-input-border);
+    border-radius: var(--field-input-radius);
+}
+
+.file-item-thumbnail {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-button);
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gray-lite-5);
+}
+
+.file-item-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.file-item-icon-default {
+    width: 24px;
+    height: 24px;
+}

package/src/ui/components/form/file-upload-mode/file-upload-button-mode.css

@@ -0,0 +1,44 @@
+.file-button-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-upload-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    border: 1px solid var(--field-input-border);
+    border-radius: var(--field-input-radius);
+    background: var(--background);
+    color: var(--text-color);
+    font-size: var(--field-font-size);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    align-self: flex-start;
+
+    &:hover {
+        border-color: var(--color-primary);
+        background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    }
+}
+
+.file-upload-button-icon {
+    font-size: 14px;
+}
+
+.file-button-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-button-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+    padding: var(--space-cozy) var(--space-comfortable);
+    border: 1px solid var(--field-input-border);
+    border-radius: var(--field-input-radius);
+}

package/src/ui/components/form/file-upload-mode/file-wall-mode.css

@@ -0,0 +1,88 @@
+.file-wall-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.file-wall {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-cozy);
+}
+
+.file-wall-cell {
+    position: relative;
+    border-radius: var(--field-input-radius);
+    overflow: hidden;
+    border: 1px solid var(--field-input-border);
+    background: var(--gray-lite-5);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:hover .file-wall-cell-remove {
+        opacity: 1;
+    }
+}
+
+.file-wall-cell-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.file-wall-cell-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+}
+
+.file-wall-cell-remove {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.file-wall-cell-add {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-tiny);
+    border: 1px dashed var(--field-input-border);
+    border-radius: var(--field-input-radius);
+    cursor: pointer;
+    color: var(--gray);
+    flex-shrink: 0;
+    transition: border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+    }
+}
+
+.file-wall-cell-add-icon {
+    font-size: 22px;
+}
+
+.file-wall-cell-thumbnail {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+
+    .file-item-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.file-wall-cell-add-label {
+    font-size: var(--note-size);
+}

package/src/ui/components/form/form-control.css

@@ -0,0 +1,40 @@
+.form-control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-comfortable);
+}
+
+.form-control-default {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-comfortable);
+}
+
+/* Errors summary */
+.form-errors {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+    padding: var(--space-comfortable);
+    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
+    border-radius: var(--field-input-radius);
+}
+
+.form-error-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-tiny);
+}
+
+.form-error-field {
+    font-size: var(--note-size);
+    font-weight: 600;
+    color: var(--color-danger);
+    text-transform: capitalize;
+}
+
+.form-error-message {
+    font-size: var(--note-size);
+    color: var(--color-danger);
+}

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

@@ -0,0 +1,111 @@
+import {ForEachArray, ShowIf, Div, Span, Img} from '../../../../elements';
+
+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,27 @@
+export { default as FieldRender } from './fields/FieldRender';
+export { default as StringFieldRender } from './fields/StringFieldRender';
+export { default as TelFieldRender } from './fields/TelFieldRender';
+export { default as UrlFieldRender } from './fields/UrlFieldRender';
+export { default as EmailFieldRender } from './fields/EmailFieldRender';
+export { default as PasswordFieldRender } from './fields/PasswordFieldRender';
+export { default as NumberFieldRender } from './fields/NumberFieldRender';
+export { default as TextAreaFieldRender } from './fields/TextAreaFieldRender';
+export { default as CheckboxFieldRender } from './fields/CheckboxFieldRender';
+export { default as CheckboxGroupFieldRender } from './fields/CheckboxGroupFieldRender';
+export { default as RadioFieldRender } from './fields/RadioFieldRender';
+export { default as SelectFieldRender } from './fields/SelectFieldRender';
+export { default as AutocompleteFieldRender } from './fields/AutocompleteFieldRender';
+export { default as HiddenFieldRender } from './fields/HiddenFieldRender';
+export { default as ColorFieldRender } from './fields/ColorFieldRender';
+export { default as FileFieldRender } from './fields/FileFieldRender';
+export { default as FileNativeModeRender } from './file-upload-mode/FileNativeModeRender';
+export { default as FileDropzoneModeRender } from './file-upload-mode/FileDropzoneModeRender';
+export { default as FileWallModeRender } from './file-upload-mode/FileWallModeRender';
+export { default as FileUploadButtonModeRender } from './file-upload-mode/FileUploadButtonModeRender';
+export { default as FileAvatarModeRender } from './file-upload-mode/FileAvatarModeRender';
+export { default as DateFieldRender } from './fields/DateFieldRender';
+export { default as TimeFieldRender } from './fields/TimeFieldRender';
+export { default as SliderFieldRender } from './fields/SliderFieldRender';
+export { default as RangeFieldRender } from './fields/RangeFieldRender';
+export { default as FieldCollectionRender } from './FieldCollectionRender';
+export { default as FormControlRender } from './FormControlRender';

package/src/ui/components/list/ListRender.js

@@ -0,0 +1,18 @@
+import { Ul, ForEachArray } from '../../../core/elements';
+
+import './list.css';
+
+export default function ListRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add({ list: true, 'with-divider': $desc.divider });
+
+    if ($desc.inset) {
+        props.style.add(
+            '--list-inset-padding',
+            $desc.inset.transform((v) => v > 0 ? `${v}px` : null),
+        );
+    }
+
+    return Ul(instance.resolveProps(), ForEachArray($desc.items, $desc.itemBuilder));
+}

package/src/ui/components/list/divider/ListDividerRender.js

@@ -0,0 +1,10 @@
+import { Li } from '../../../../core/elements';
+
+import './list-divider.css';
+
+export default function ListDividerRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('list-divider');
+
+    return Li(instance.resolveProps());
+}

package/src/ui/components/list/divider/list-divider.css

@@ -0,0 +1,12 @@
+:root {
+    --list-divider-color:   var(--gray-lite-3);
+    --list-divider-margin:  0;
+}
+
+.list-divider {
+    height:      1px;
+    background:  var(--list-divider-color);
+    margin:      var(--list-divider-margin);
+    list-style:  none;
+    pointer-events: none;
+}

package/src/ui/components/list/group/ListGroupRender.js

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