native-document 1.0.138 → 1.0.140

package/src/ui/components/form/file-upload-mode/FileNativeModeRender.js

@@ -0,0 +1,22 @@
+import {Input} from '../../../../../elements';
+
+export default function FileNativeModeRender($desc, modeInstance) {
+    const { fieldDesc, fieldInstance } = $desc.$context;
+    const input = Input({
+        class:    'field-input',
+        type:     'file',
+        name:     fieldDesc.name,
+        id:       fieldDesc.id || fieldDesc.name,
+        accept:   fieldDesc.accept || null,
+        multiple: fieldDesc.multiple,
+        disabled: fieldDesc.disabled,
+        ...( fieldDesc.elementsProps?.input || {}),
+    });
+
+    input.nd.onChange((e) => {
+        const files = Array.from(e.target.files || []);
+        fieldInstance.setFiles(files);
+    });
+
+    return input;
+}

package/src/ui/components/form/file-upload-mode/FileUploadButtonModeRender.js

@@ -0,0 +1,89 @@
+import {Div, Input, Span, Button, ForEachArray, ShowIf} from '../../../../../elements';
+import {buildProgress, formatSize, getFileThumbnail} from '../helpers';
+
+import './file-upload-button-mode.css';
+
+export default function FileUploadButtonModeRender($desc, modeInstance) {
+    const {$files, fieldDesc, fieldInstance} = $desc.$context;
+
+    const input = buildInput(fieldDesc, fieldInstance);
+
+    const builder = $desc.renderItem
+        ? (item) => $desc.renderItem(item, () => removeItem(item, modeInstance, fieldInstance))
+        : (item) => buildItem(item, $desc, modeInstance, fieldInstance);
+
+    return Div({class: 'file-button-wrapper'}, [
+        input,
+        buildButton($desc, input, modeInstance),
+        ShowIf($files.is(f => f.length > 0),
+            () => Div({class: 'file-button-list'},
+                $desc.renderList
+                    ? $desc.renderList($files, modeInstance)
+                    : ForEachArray($files, builder)
+            )
+        ),
+    ]);
+}
+
+const buildInput = (fieldDesc, fieldInstance) => {
+    const input = Input({
+        class:    'field-file-input',
+        type:     'file',
+        name:     fieldDesc.name,
+        id:       fieldDesc.id || fieldDesc.name,
+        accept:   fieldDesc.accept || null,
+        multiple: fieldDesc.multiple,
+        disabled: fieldDesc.disabled,
+        style:    {display: 'none'},
+    });
+
+    fieldInstance.$input = input;
+
+    input.nd.onChange((e) => {
+        const files = Array.from(e.target.files || []);
+        fieldInstance.addFiles(files);
+        input.value = '';
+    });
+
+    return input;
+};
+
+const buildButton = ($desc, input, modeInstance) => {
+    let btn = null;
+    if($desc.renderButton) {
+        btn = $desc.renderButton($desc, modeInstance);
+    }
+    else {
+        btn = Button({class: 'file-upload-button'}, [
+            $desc.buttonIcon ? Span({class: 'file-upload-button-icon'}, $desc.buttonIcon) : '+',
+            Span({class: 'file-upload-button-label'}, $desc.buttonLabel || 'Add file'),
+        ]);
+    }
+
+    btn.nd.onClick(() => input.click());
+
+    return btn;
+};
+
+const buildItem = (item, $desc, modeInstance, fieldInstance) => {
+    const file    = item.file();
+
+    const removeBtn = Span({class: 'file-item-remove'}, $desc.removeIcon || '×');
+    removeBtn.nd.onStopClick(() => removeItem(item, modeInstance, fieldInstance));
+
+    return Div({class: 'file-button-item'}, [
+        Div({class: 'file-item-thumbnail'}, getFileThumbnail(file, fieldInstance)),
+        Div({class: 'file-item-info'}, [
+            Span({class: 'file-item-name'}, file.name),
+            Span({class: 'file-item-size'}, formatSize(file.size)),
+            buildProgress(item),
+        ]),
+        removeBtn,
+    ]);
+};
+
+const removeItem = (item, modeInstance, fieldInstance) => {
+    fieldInstance.removeFile(item);
+    modeInstance.emit('remove', item);
+    item.emit('remove', item);
+};

package/src/ui/components/form/file-upload-mode/FileWallModeRender.js

@@ -0,0 +1,91 @@
+import {Div, Input, Span, Img, ForEachArray} from '../../../../../elements';
+import {getFileThumbnail} from '../helpers';
+import { $ } from '../../../../../index';
+
+import './file-wall-mode.css';
+
+export default function FileWallModeRender($desc, modeInstance) {
+    const {$files, fieldDesc, fieldInstance} = $desc.$context;
+
+    const input = buildInput(fieldDesc, fieldInstance, $files);
+
+    const addCell =   $desc.renderCell
+        ? (item) => $desc.renderCell(item, () => removeItem(item, modeInstance, fieldInstance))
+        : (item) => buildCell(item, $desc, modeInstance, fieldInstance);
+
+    return Div({class: 'file-wall-wrapper'}, [
+        input,
+        Div({class: 'file-wall'}, [
+            ForEachArray($files, addCell),
+            buildAddCell($desc, input, modeInstance),
+        ]),
+    ]);
+}
+
+const buildInput = (fieldDesc, fieldInstance) => {
+    const input = Input({
+        class:    'field-file-input',
+        type:     'file',
+        name:     fieldDesc.name,
+        id:       fieldDesc.id || fieldDesc.name,
+        accept:   fieldDesc.accept || 'image/*',
+        multiple: fieldDesc.multiple,
+        disabled: fieldDesc.disabled,
+        style:    {display: 'none'},
+    });
+
+    fieldInstance.$input = input;
+
+    input.nd.onChange((e) => {
+        const files = Array.from(e.target.files || []);
+        fieldInstance.addFiles(files);
+        input.value = '';
+    });
+
+    return input;
+};
+
+const buildCell = (item, $desc, modeInstance, fieldInstance) => {
+    const file    = item.file();
+    const size    = $desc.cellSize || 100;
+
+    const removeBtn = Span({class: 'file-item-remove file-wall-cell-remove'}, $desc.removeIcon || '×');
+    removeBtn.nd.onStopClick(() => removeItem(item, modeInstance, fieldInstance));
+
+    const cell = Div({
+        class: 'file-wall-cell',
+        style: { width: size + 'px', height: size + 'px' },
+    }, [
+        Div({class: 'file-item-thumbnail file-wall-cell-thumbnail'}, getFileThumbnail(file, fieldInstance)),
+        removeBtn,
+    ]);
+
+    cell.nd.onClick(() => item.emit('click', item));
+
+    return cell;
+};
+
+const buildAddCell = ($desc, input, modeInstance) => {
+    let cell = null;
+    const size = $desc.cellSize || 100;
+
+
+    if($desc.renderAdd) {
+        cell = $desc.renderAdd($desc, modeInstance);
+    } else {
+        cell = Div({ class: 'file-wall-cell-add', style: {width: size + 'px', height: size + 'px'}, }, [
+            Span({class: 'file-wall-cell-add-icon'}, $desc.addIcon || '+'),
+            Span({class: 'file-wall-cell-add-label'}, $desc.addLabel || 'Upload'),
+        ]);
+    }
+
+    cell.nd.onClick(() => input.click());
+
+    return cell;
+};
+
+const removeItem = (item, modeInstance, fieldInstance) => {
+    fieldInstance.removeFile(item);
+    modeInstance.emit('remove', item);
+    item.emit('remove', item);
+};

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