native-document 1.0.190 → 1.0.192

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

@@ -0,0 +1,162 @@
+import {Div, Input, Span, Img, Button, Switch} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+
+import './file-image-preview-mode.css';
+
+export default function FileImagePreviewModeRender($desc, nodeInstance) {
+    const {$files, fieldDesc, fieldInstance} = $desc.$context;
+    const $preview = $(null);
+
+    const input = buildInput(fieldDesc, fieldInstance, $files, $preview);
+
+    const variant = $desc.variant || 'hover-overlay';
+
+    const imagePreview = buildImagePreview($desc, $preview, nodeInstance);
+
+    fieldInstance.onReset(() => $preview.set(null));
+
+    if(variant === 'hover-overlay') {
+        return buildHoverOverlay($desc, imagePreview, input, $files, nodeInstance);
+    }
+    if(variant === 'corner-badge') {
+        return buildCornerBadge($desc, imagePreview, input, $files, nodeInstance);
+    }
+    if(variant === 'action-buttons') {
+        return buildActionButtons($desc, imagePreview, input, $files, nodeInstance, fieldInstance);
+    }
+
+    return imagePreview;
+}
+
+const buildInput = (fieldDesc, fieldInstance, $files, $preview) => {
+    const input = Input({
+        class:    'field-file-input',
+        type:     'file',
+        name:     fieldDesc.name,
+        id:       fieldDesc.id || fieldDesc.name,
+        accept:   fieldDesc.accept || 'image/*',
+        disabled: fieldDesc.disabled,
+        style:    {display: 'none'},
+    });
+
+    fieldInstance.$input = input;
+
+    input.nd.onChange((e) => {
+        const file = e.target.files?.[0];
+        if(!file) {
+            return;
+        }
+
+        fieldInstance.reset();
+        fieldInstance.addFile(file);
+        $preview.set(URL.createObjectURL(file));
+
+        input.value = '';
+    });
+
+    return input;
+};
+
+
+const buildShapeClass = (instance, defaultClass, $desc) => {
+    const props = instance.getEditableProps();
+
+    props.class.add({
+        [defaultClass]: true,
+        'is-circle': ($desc.shape || 'circle') === 'circle',
+        'is-square': ($desc.shape || 'circle') === 'square',
+        ['is-'+$desc.mode+'-mode']: true
+    });
+
+    return props.class.value();
+};
+
+const buildImagePreview = ($desc, $preview, instance) => {
+    const shape  = $desc.shape || 'circle';
+    const radius = shape === 'circle' ? '50%' : '12px';
+
+    const props = instance.getEditableProps();
+
+    if($desc.size) {
+        props.style.add('--file-image-preview-size', $desc.size + 'px');
+    }
+
+
+    const previewImg = () => Img($preview, {
+        class: 'file-image-preview-img',
+        alt:   $desc.alt || 'Image Preview',
+    });
+    const placeholder = () => Div({class: 'file-image-preview-placeholder'}, [
+        Span({class: 'file-image-preview-placeholder-icon'}, $desc.placeholderIcon),
+    ]);
+
+    return Div({
+        class: buildShapeClass(instance,'file-image-preview', $desc),
+        style: props.style.value(),
+    }, Switch($preview, previewImg, placeholder));
+};
+
+const buildHoverOverlay = ($desc, imagePreview, input, $files, nodeInstance) => {
+    let overlay = null;
+    const props = nodeInstance.getEditableProps();
+
+    if($desc.ratio) {
+        props.style.add('--cover-aspect-ratio', $desc.ratio);
+    }
+
+    if($desc.renderOverlay) {
+        overlay = $desc.renderOverlay(imagePreview, $desc, nodeInstance);
+    } else {
+        overlay = Div({class: 'file-image-preview-overlay'}, [
+            Span({class: 'file-image-preview-overlay-icon'}, $desc.overlayIcon || $desc.editImageIcon),
+        ]);
+    }
+
+    const wrapper = Div({
+        class: buildShapeClass(nodeInstance, 'file-image-preview-wrapper is-hover-overlay', $desc),
+        style: props.style.value()
+}, [imagePreview, overlay]);
+
+    wrapper.nd.onClick(() => input.click());
+
+    return Div({}, [input, wrapper]);
+};
+
+const buildCornerBadge = ($desc, imagePreview, input, instance) => {
+    const badge = Div({class: 'file-image-preview-badge'}, $desc.editImageIcon);
+    badge.nd.onClick(() => input.click());
+
+    return Div({}, [
+        input,
+        Div({
+            class: buildShapeClass(instance, 'file-image-preview-wrapper is-corner-badge', $desc),
+        }, [imagePreview, badge]),
+    ]);
+};
+
+const buildActionButtons = ($desc, imagePreview, input, $files, nodeInstance, fieldInstance) => {
+    if($desc.renderActions) {
+        return $desc.renderActions($desc, imagePreview, () => input.click(), () => removeImagePreview($files, nodeInstance, fieldInstance), nodeInstance);
+    }
+
+    const changeBtn = Button({class: 'file-image-preview-btn is-change'}, $desc.changeLabel);
+    changeBtn.nd.onClick(() => input.click());
+
+    const removeBtn = Button({class: 'file-image-preview-btn is-remove'}, $desc.removeLabel);
+    removeBtn.nd.onClick(() => removeImagePreview($files, nodeInstance, fieldInstance));
+
+    return Div({class: 'file-image-preview-action-wrapper'}, [
+        input,
+        imagePreview,
+        Div({class: 'file-image-preview-actions'}, [changeBtn, removeBtn]),
+    ]);
+};
+
+const removeImagePreview = ($files, nodeInstance, fieldInstance) => {
+    const item = $files.val()?.[0];
+    fieldInstance.reset();
+    if(item) {
+        nodeInstance.emit('remove', item);
+        item.emit('remove', item);
+    }
+};

package/src/ui/components/form/file-upload-mode/{file-avatar-mode.css → file-image-preview-mode.css}

@@ -1,16 +1,21 @@
 :root {
-    --file-avatar-radius-circle: 50%;
-    --file-avatar-radius-square: 12px;
-    --file-avatar-badge-size: 26px;
+    --file-image-preview-radius-circle: 50%;
+    --file-image-preview-radius-square: 12px;
+    --file-image-preview-badge-size: 26px;
+    --cover-aspect-ratio: 16 / 9;
+    --cover-border-radius: 12px;
+    --cover-overlay-bg: rgba(0, 0, 0, 0.5);
+    --cover-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --file-image-preview-size: 100%;
 }
 
-.file-avatar-wrapper {
+.file-image-preview-wrapper {
     position: relative;
     display: inline-block;
     cursor: pointer;
 }
 
-.file-avatar {
+.file-image-preview {
     overflow: hidden;
     background: var(--gray-lite-5);
     border: 1px solid var(--field-input-border);
@@ -20,11 +25,37 @@
     flex-shrink: 0;
     position: relative;
 
-    &.is-circle { border-radius: var(--file-avatar-radius-circle); }
-    &.is-square { border-radius: var(--file-avatar-radius-square); }
+    &.is-circle,
+    &.is-square {
+    }
+    &.is-circle {
+        border-radius: var(--file-image-preview-radius-circle);
+    }
+    &.is-square {
+        border-radius: var(--file-image-preview-radius-square);
+    }
+
+    &.is-avatar-mode {
+        width: var(--file-image-preview-size);
+        height: var(--file-image-preview-size);
+    }
+    &.is-cover-mode {
+        position: relative;
+        width: var(--file-image-preview-size);
+        aspect-ratio: var(--cover-aspect-ratio);
+        border-radius: var(--cover-border-radius);
+        overflow: hidden;
+        background-color: #f3f4f6;
+        border: 1px dashed #d1d5db;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--cover-transition);
+    }
 }
 
-.file-avatar-img {
+.file-image-preview-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -33,7 +64,7 @@
     inset: 0;
 }
 
-.file-avatar-placeholder {
+.file-image-preview-placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -41,13 +72,13 @@
     height: 100%;
 }
 
-.file-avatar-placeholder-icon {
+.file-image-preview-placeholder-icon {
     font-size: 36px;
 }
 
 /* Hover overlay variant */
-.file-avatar-wrapper.is-hover-overlay {
-    .file-avatar-overlay {
+.file-image-preview-wrapper.is-hover-overlay {
+    .file-image-preview-overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.4);
@@ -58,26 +89,26 @@
         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); }
+    &.is-circle .file-image-preview-overlay { border-radius: var(--file-image-preview-radius-circle); }
+    &.is-square .file-image-preview-overlay { border-radius: var(--file-image-preview-radius-square); }
 
-    &:hover .file-avatar-overlay {
+    &:hover .file-image-preview-overlay {
         opacity: 1;
     }
 
-    .file-avatar-overlay-icon {
+    .file-image-preview-overlay-icon {
         font-size: 24px;
     }
 }
 
 /* Corner badge variant */
-.file-avatar-wrapper.is-corner-badge {
-    .file-avatar-badge {
+.file-image-preview-wrapper.is-corner-badge {
+    .file-image-preview-badge {
         position: absolute;
         bottom: 0;
         right: 0;
-        width: var(--file-avatar-badge-size);
-        height: var(--file-avatar-badge-size);
+        width: var(--file-image-preview-badge-size);
+        height: var(--file-image-preview-badge-size);
         border-radius: 50%;
         background: var(--background);
         border: 1px solid var(--field-input-border);
@@ -95,19 +126,19 @@
 }
 
 /* Action buttons variant */
-.file-avatar-action-wrapper {
+.file-image-preview-action-wrapper {
     display: flex;
     align-items: center;
     gap: var(--space-comfortable);
 }
 
-.file-avatar-actions {
+.file-image-preview-actions {
     display: flex;
     flex-direction: column;
     gap: var(--space-cozy);
 }
 
-.file-avatar-btn {
+.file-image-preview-btn {
     display: inline-flex;
     align-items: center;
     padding: var(--space-cozy) var(--space-comfortable);

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

@@ -18,7 +18,7 @@ export { default as FileNativeModeRender } from './file-upload-mode/FileNativeMo
 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 FileImagePreviewModeRender } from './file-upload-mode/FileImagePreviewModeRender';
 export { default as DateFieldRender } from './fields/DateFieldRender';
 export { default as TimeFieldRender } from './fields/TimeFieldRender';
 export { default as SliderFieldRender } from './fields/SliderFieldRender';

package/types/observable.d.ts

@@ -232,7 +232,7 @@ export type ObservableObject<T extends Record<string, any>> = ObservableItem<T>
     $val(): T;
     val(): T;
     get(key: string): any;
-    only<K extends keyof T>(...properties: K[]): Pick<T, K>;
+    only<K extends keyof T>(properties: K[]): Pick<T, K>;
     $get(key: string): any;
     set(values: Partial<T>): void;
     $set(values: Partial<T>): void;

package/src/components/form/field/types/file-field-mode/FileAvatarMode.js

@@ -1,183 +0,0 @@
-import BaseComponent from '../../../../BaseComponent';
-import HasEventEmitter from '../../../../../core/utils/HasEventEmitter';
-
-/**
- * Avatar-style single file upload mode for FileField.
- * Displays a circular or square avatar with hover/badge/button interaction variants.
- * Ideal for profile picture uploads.
- * @example
- * new FileField('avatar')
- *     .mode('avatar');
- *
- * FileAvatarMode.use((description, instance) => {
- *     // description.variant — 'hover-overlay' | 'corner-badge' | 'action-buttons'
- *     // description.shape   — 'circle' | 'square'
- *     // description.size, description.placeholderIcon, description.overlayIcon,
- *     // description.editImageIcon, description.changeLabel, description.removeLabel,
- *     // description.renderAvatar, description.renderOverlay, description.renderActions
- *     return Div({ class: \`avatar-upload avatar-upload--\${description.variant}\`,
- *                  style: { width: description.size, height: description.size } });
- * });
- *
- * @constructor
- * @param {GlobalAttributes} [props={}]
- */
-export default function FileAvatarMode(props = {}) {
-    if(!(this instanceof FileAvatarMode)) {
-        return new FileAvatarMode(props);
-    }
-
-    BaseComponent.call(this, props);
-
-    this.$description = {
-        variant: 'hover-overlay',
-        shape: 'circle',
-        size: 100,
-        placeholderIcon: null,
-        overlayIcon: null,
-        editImageIcon: null,
-        changeLabel: 'Change photo',
-        removeLabel: 'Remove',
-        renderAvatar: null,
-        renderOverlay: null,
-        renderActions: null,
-        props,
-    };
-}
-
-BaseComponent.extends(FileAvatarMode);
-BaseComponent.use(FileAvatarMode, HasEventEmitter);
-
-FileAvatarMode.defaultTemplate = null;
-
-/**
- * Registers the render template for FileAvatarMode.
- * @param {(description: {
- *     variant: 'hover-overlay'|'corner-badge'|'action-buttons',
- *     shape: 'circle'|'square',
- *     size: number|string,
- *     placeholderIcon: NdChild|null,
- *     overlayIcon: NdChild|null,
- *     editImageIcon: NdChild|null,
- *     changeLabel: NdChild,
- *     removeLabel: NdChild,
- *     renderAvatar: ((desc: *, instance: FileAvatarMode) => NdChild)|null,
- *     renderOverlay: ((desc: *, instance: FileAvatarMode) => NdChild)|null,
- *     renderActions: ((desc: *, instance: FileAvatarMode) => NdChild)|null,
- *     props: GlobalAttributes
- * }, instance: FileAvatarMode) => NdChild} template
- */
-FileAvatarMode.use = function(template) {
-    FileAvatarMode.defaultTemplate = template;
-};
-
-/** @returns {this} */
-FileAvatarMode.prototype.hoverOverlay = function() {
-    this.$description.variant = 'hover-overlay';
-    return this;
-};
-
-/** @returns {this} */
-FileAvatarMode.prototype.cornerBadge = function() {
-    this.$description.variant = 'corner-badge';
-    return this;
-};
-
-/** @returns {this} */
-FileAvatarMode.prototype.actionButtons = function() {
-    this.$description.variant = 'action-buttons';
-    return this;
-};
-
-/** @returns {this} */
-FileAvatarMode.prototype.circle = function() {
-    this.$description.shape = 'circle';
-    return this;
-};
-
-/** @returns {this} */
-FileAvatarMode.prototype.square = function() {
-    this.$description.shape = 'square';
-    return this;
-};
-
-/**
- * @param {number|string} size - Size in pixels or CSS value
- * @returns {this}
- */
-FileAvatarMode.prototype.size = function(size) {
-    this.$description.size = size;
-    return this;
-};
-
-/**
- * @param {NdChild} icon
- * @returns {this}
- */
-FileAvatarMode.prototype.placeholderIcon = function(icon) {
-    this.$description.placeholderIcon = icon;
-    return this;
-};
-
-/**
- * @param {NdChild} icon
- * @returns {this}
- */
-FileAvatarMode.prototype.overlayIcon = function(icon) {
-    this.$description.overlayIcon = icon;
-    return this;
-};
-
-/**
- * @param {NdChild} icon
- * @returns {this}
- */
-FileAvatarMode.prototype.editImageIcon = function(icon) {
-    this.$description.editImageIcon = icon;
-    return this;
-};
-
-/**
- * @param {NdChild} label
- * @returns {this}
- */
-FileAvatarMode.prototype.changeLabel = function(label) {
-    this.$description.changeLabel = label;
-    return this;
-};
-
-/**
- * @param {NdChild} label
- * @returns {this}
- */
-FileAvatarMode.prototype.removeLabel = function(label) {
-    this.$description.removeLabel = label;
-    return this;
-};
-
-/**
- * @param {(desc: *, instance: FileAvatarMode) => NdChild} fn
- * @returns {this}
- */
-FileAvatarMode.prototype.renderAvatar = function(fn) {
-    this.$description.renderAvatar = fn;
-    return this;
-};
-
-/**
- * @param {(desc: *, instance: FileAvatarMode) => NdChild} fn
- * @returns {this}
- */
-FileAvatarMode.prototype.renderOverlay = function(fn) {
-    this.$description.renderOverlay = fn;
-    return this;
-};
-
-/**
- * @param {(desc: *, instance: FileAvatarMode) => NdChild} fn
- * @returns {this}
- */
-FileAvatarMode.prototype.renderActions = function(fn) {
-    this.$description.renderActions = fn;
-    return this;
-};

package/src/components/form/types/fields/FileAvatarMode.d.ts

@@ -1,46 +0,0 @@
-import type { ValidChild } from '../../../../../types/elements';
-import type { GlobalAttributes } from '../../../../../types/globals';
-import type { BaseComponent } from '../../../BaseComponent';
-
-export type FileAvatarModeDescription = {
-    variant: 'hover-overlay' | 'corner-badge' | 'action-buttons';
-    shape: 'circle' | 'square';
-    size: number | string;
-    placeholderIcon: ValidChild | null;
-    overlayIcon: ValidChild | null;
-    editImageIcon: ValidChild | null;
-    changeLabel: ValidChild;
-    removeLabel: ValidChild;
-    renderAvatar: ((desc: unknown, instance: FileAvatarModeInterface) => ValidChild) | null;
-    renderOverlay: ((desc: unknown, instance: FileAvatarModeInterface) => ValidChild) | null;
-    renderActions: ((desc: unknown, instance: FileAvatarModeInterface) => ValidChild) | null;
-    props: GlobalAttributes;
-};
-
-export interface FileAvatarModeInterface extends BaseComponent {
-    render(renderFn: (description: FileAvatarModeDescription, instance: FileAvatarModeInterface) => ValidChild): this;
-    hoverOverlay(): this;
-    cornerBadge(): this;
-    actionButtons(): this;
-    circle(): this;
-    square(): this;
-    size(size: number | string): this;
-    placeholderIcon(icon: ValidChild): this;
-    overlayIcon(icon: ValidChild): this;
-    editImageIcon(icon: ValidChild): this;
-    changeLabel(label: ValidChild): this;
-    removeLabel(label: ValidChild): this;
-    renderAvatar(fn: (desc: unknown, instance: FileAvatarModeInterface) => ValidChild): this;
-    renderOverlay(fn: (desc: unknown, instance: FileAvatarModeInterface) => ValidChild): this;
-    renderActions(fn: (desc: unknown, instance: FileAvatarModeInterface) => ValidChild): this;
-}
-
-
-export declare function FileAvatarMode(props?: GlobalAttributes): FileAvatarModeInterface;
-export declare namespace FileAvatarMode {
-
-
-    function use(template: (description: FileAvatarModeDescription, instance: FileAvatarModeInterface) => ValidChild): void;
-
-
-}