native-document 1.0.138 → 1.0.140

package/src/ui/components/form/fields/file-field.css

@@ -0,0 +1,79 @@
+/* Shared file field styles */
+.field-file-input {
+    display: none;
+}
+
+.file-item-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-danger);
+    color: white;
+    font-size: 10px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.file-item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.file-item-name {
+    font-size: var(--description-size);
+    color: var(--text-color);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-item-size {
+    font-size: var(--note-size);
+    color: var(--gray);
+}
+
+.file-item-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.file-item-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    flex: 1;
+    max-width: 120px;
+}
+
+.file-item-progress-track {
+    flex: 1;
+    height: 4px;
+    background: var(--gray-lite-4);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.file-item-progress-bar {
+    height: 100%;
+    background: var(--color-primary);
+    border-radius: 2px;
+    transition: width 0.2s ease;
+}
+
+.file-item-progress-label {
+    font-size: var(--note-size);
+    color: var(--gray);
+    flex-shrink: 0;
+}

package/src/ui/components/form/fields/password-field.css

@@ -0,0 +1,50 @@
+.field-visibility-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 var(--space-cozy);
+    color: var(--gray);
+    display: inline-flex;
+    align-items: center;
+    transition: color 0.15s ease;
+
+    &:hover {
+        color: var(--text-color);
+    }
+}
+
+.field-strength-meter {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    margin-top: var(--space-tiny);
+}
+
+.field-strength-track {
+    flex: 1;
+    height: 4px;
+    background: var(--gray-lite-4);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.field-strength-bar {
+    display: block;
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s ease, background 0.3s ease;
+
+    &.is-score-0 { background: transparent; }
+    &.is-score-1 { background: var(--color-danger); }
+    &.is-score-2 { background: var(--color-warning); }
+    &.is-score-3 { background: var(--color-info); }
+    &.is-score-4 { background: var(--color-success); }
+    &.is-score-5 { background: var(--color-success); }
+}
+
+.field-strength-label {
+    font-size: var(--note-size);
+    color: var(--gray);
+    min-width: 60px;
+    text-align: right;
+}

package/src/ui/components/form/fields/range-field.css

@@ -0,0 +1,120 @@
+.is-range-field {
+    &.is-vertical {
+        .range-field-wrapper {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .range-field-input {
+            writing-mode: vertical-lr;
+            direction: rtl;
+            width: auto;
+            height: 160px;
+        }
+    }
+}
+
+.range-field-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+}
+
+.range-field-input {
+    flex: 1;
+    height: 4px;
+    cursor: pointer;
+    accent-color: var(--color-primary);
+
+    &::-webkit-slider-runnable-track {
+        height: 4px;
+        border-radius: 2px;
+        background: var(--gray-lite-4);
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--background);
+        border: 2px solid var(--color-primary);
+        margin-top: -7px;
+        cursor: grab;
+        transition: box-shadow 0.15s ease;
+
+        &:hover {
+            box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
+        }
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    &::-moz-range-track {
+        height: 4px;
+        border-radius: 2px;
+        background: var(--gray-lite-4);
+    }
+
+    &::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--background);
+        border: 2px solid var(--color-primary);
+        cursor: grab;
+    }
+
+    &:focus-visible {
+        outline: none;
+
+        &::-webkit-slider-thumb {
+            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+        }
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+.range-field-value {
+    font-size: var(--description-size);
+    color: var(--gray);
+    min-width: 32px;
+    text-align: right;
+    flex-shrink: 0;
+}
+
+/* Marks */
+.range-field-marks {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    margin-top: var(--space-tiny);
+}
+
+.range-field-mark {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transform: translateX(-50%);
+}
+
+.range-field-mark-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--gray-lite-3);
+}
+
+.range-field-mark-label {
+    font-size: var(--note-size);
+    color: var(--gray);
+    margin-top: 2px;
+    white-space: nowrap;
+}

package/src/ui/components/form/fields/slider.css

@@ -0,0 +1,195 @@
+:root {
+    --slider-track-height:      4px;
+    --slider-thumb-size:        18px;
+    --slider-thumb-offset:      calc(var(--slider-thumb-size) / 2);
+    --slider-fill-color:        var(--color-primary);
+    --slider-track-color:       var(--gray-lite-4);
+    --slider-thumb-color:       var(--background);
+    --slider-thumb-border:      var(--slider-fill-color);
+    --slider-thumb-shadow:      color-mix(in srgb, var(--slider-thumb-border) 15%, transparent);
+    --slider-vertical-height:   200px;
+    --slider-horizontal-width:  100%;
+}
+
+.slider {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+    user-select: none;
+    width: var(--slider-horizontal-width);
+
+    &.is-vertical {
+        flex-direction: row;
+        align-items: stretch;
+        width: fit-content;
+        height: var(--slider-vertical-height);
+    }
+
+    &.is-disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    &.is-readonly {
+        pointer-events: none;
+    }
+
+    /* Variants */
+    &.is-success  { --slider-fill-color: var(--color-success); --slider-thumb-border: var(--color-success); --slider-thumb-shadow: color-mix(in srgb, var(--color-success) 15%, transparent); }
+    &.is-warning  { --slider-fill-color: var(--color-warning); --slider-thumb-border: var(--color-warning); --slider-thumb-shadow: color-mix(in srgb, var(--color-warning) 15%, transparent); }
+    &.is-danger   { --slider-fill-color: var(--color-danger);  --slider-thumb-border: var(--color-danger);  --slider-thumb-shadow: color-mix(in srgb, var(--color-danger)  15%, transparent); }
+    &.is-info     { --slider-fill-color: var(--color-info);    --slider-thumb-border: var(--color-info);    --slider-thumb-shadow: color-mix(in srgb, var(--color-info)    15%, transparent); }
+    &.is-secondary{ --slider-fill-color: var(--gray);          --slider-thumb-border: var(--gray);          --slider-thumb-shadow: color-mix(in srgb, var(--gray)          15%, transparent); }
+}
+
+.slider-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+
+    .is-vertical & {
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+    }
+}
+
+.slider-inner {
+    position: relative;
+    flex: 1;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .is-vertical & {
+        width: 20px;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+/* Track */
+.slider-track {
+    position: absolute;
+    width: 100%;
+    height: var(--slider-track-height);
+    background: var(--slider-track-color);
+    border-radius: calc(var(--slider-track-height) / 2);
+
+    .is-vertical & {
+        width: var(--slider-track-height);
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+    }
+}
+
+.slider-fill {
+    position: absolute;
+    height: 100%;
+    background: var(--slider-fill-color);
+    border-radius: calc(var(--slider-track-height) / 2);
+    left: 0;
+    top: 0;
+    bottom: auto;
+
+    .is-vertical & {
+        width: 100%;
+        height: auto;
+        left: 0;
+        top: auto;
+        bottom: 0;
+    }
+}
+
+/* Thumb */
+.slider-thumb {
+    position: absolute;
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    cursor: grab;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+        cursor: grabbing;
+        z-index: 3;
+    }
+
+    &.is-start { z-index: 2; }
+    &.is-end   { z-index: 2; }
+
+    &:active { z-index: 4; }
+}
+
+.slider-thumb-inner {
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    border-radius: 50%;
+    background: var(--slider-thumb-color);
+    border: 2px solid var(--slider-thumb-border);
+    transition: box-shadow 0.15s ease;
+
+    .slider-thumb:hover & {
+        box-shadow: 0 0 0 4px var(--slider-thumb-shadow);
+    }
+}
+
+/* Value */
+.slider-value {
+    font-size: var(--description-size);
+    color: var(--gray);
+    min-width: 32px;
+    text-align: right;
+    flex-shrink: 0;
+}
+
+/* Marks */
+.slider-marks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.slider-mark {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transform: translateX(-50%);
+
+    .is-vertical & {
+        flex-direction: row;
+        transform: translateY(50%);
+    }
+}
+
+.slider-mark-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--gray-lite-3);
+    margin-top: 7px;
+
+    .is-vertical & {
+        margin-top: 0;
+        margin-left: 7px;
+    }
+}
+
+.slider-mark-label {
+    font-size: var(--note-size);
+    color: var(--gray);
+    margin-top: var(--space-tiny);
+    white-space: nowrap;
+
+    .is-vertical & {
+        margin-top: 0;
+        margin-left: var(--space-tiny);
+    }
+}

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

@@ -0,0 +1,143 @@
+import {Div, Input, Span, Img, Button, ShowIf, Switch} from '../../../../../elements';
+import { $ } from '../../../../../index';
+
+import './file-avatar-mode.css';
+
+export default function FileAvatarModeRender($desc, modeInstance) {
+    const {$files, fieldDesc, fieldInstance} = $desc.$context;
+    const $preview = $(null);
+
+    const input = buildInput(fieldDesc, fieldInstance, $files, $preview);
+
+    const variant = $desc.variant || 'hover-overlay';
+
+    const avatar = buildAvatar($desc, $preview);
+
+    fieldInstance.onReset(() => $preview.set(null));
+
+    if(variant === 'hover-overlay') {
+        return buildHoverOverlay($desc, avatar, input, $files, modeInstance);
+    }
+    if(variant === 'corner-badge') {
+        return buildCornerBadge($desc, avatar, input, $files, modeInstance);
+    }
+    if(variant === 'action-buttons') {
+        return buildActionButtons($desc, avatar, input, $files, modeInstance, fieldInstance);
+    }
+
+    return avatar;
+}
+
+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 = (defaultClass, $desc) => ({
+    [defaultClass]: true,
+    'is-circle': ($desc.shape || 'circle') === 'circle',
+    'is-square': ($desc.shape || 'circle') === 'square',
+});
+
+const buildAvatar = ($desc, $preview) => {
+    const size   = $desc.size || 100;
+    const shape  = $desc.shape || 'circle';
+    const radius = shape === 'circle' ? '50%' : '12px';
+
+
+    const previewImg = () => Img($preview, {
+        class: 'file-avatar-img',
+        alt:   'Avatar',
+    });
+    const placeholder = () => Div({class: 'file-avatar-placeholder'}, [
+        Span({class: 'file-avatar-placeholder-icon'}, $desc.placeholderIcon),
+    ])
+
+    return Div({
+        class: buildShapeClass('file-avatar', $desc),
+        style: { width: size + 'px', height: size + 'px' },
+    }, Switch($preview, previewImg, placeholder));
+};
+
+const buildHoverOverlay = ($desc, avatar, input, $files, modeInstance) => {
+    let overlay = null;
+    if($desc.renderOverlay) {
+        overlay = $desc.renderOverlay(avatar, $desc, modeInstance);
+    } else {
+        overlay = Div({class: 'file-avatar-overlay'}, [
+            Span({class: 'file-avatar-overlay-icon'}, $desc.overlayIcon || $desc.editImageIcon),
+        ]);
+    }
+
+    const wrapper = Div({
+        class: buildShapeClass('file-avatar-wrapper is-hover-overlay', $desc),
+    }, [avatar, overlay]);
+
+    wrapper.nd.onClick(() => input.click());
+
+    return Div({}, [input, wrapper]);
+};
+
+const buildCornerBadge = ($desc, avatar, input) => {
+    const badge = Div({class: 'file-avatar-badge'}, $desc.editImageIcon);
+    badge.nd.onClick(() => input.click());
+
+    return Div({}, [
+        input,
+        Div({
+            class: buildShapeClass('file-avatar-wrapper is-corner-badge', $desc),
+        }, [avatar, badge]),
+    ]);
+};
+
+const buildActionButtons = ($desc, avatar, input, $files, modeInstance, fieldInstance) => {
+    if($desc.renderActions) {
+        return $desc.renderActions($desc, avatar, () => input.click(), () => removeAvatar($files, modeInstance, fieldInstance), modeInstance);
+    }
+
+    const changeBtn = Button({class: 'file-avatar-btn is-change'}, $desc.changeLabel);
+    changeBtn.nd.onClick(() => input.click());
+
+    const removeBtn = Button({class: 'file-avatar-btn is-remove'}, $desc.removeLabel);
+    removeBtn.nd.onClick(() => removeAvatar($files, modeInstance, fieldInstance));
+
+    return Div({class: 'file-avatar-action-wrapper'}, [
+        input,
+        avatar,
+        Div({class: 'file-avatar-actions'}, [changeBtn, removeBtn]),
+    ]);
+};
+
+const removeAvatar = ($files, modeInstance, fieldInstance) => {
+    const item = $files.val()?.[0];
+    fieldInstance.reset();
+    if(item) {
+        modeInstance.emit('remove', item);
+        item.emit('remove', item);
+    }
+};

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

@@ -0,0 +1,108 @@
+import {Div, Input, Img, Span, ForEachArray, ShowIf} from '../../../../../elements';
+import { $ } from '../../../../../index';
+import {buildProgress, formatSize, getFileThumbnail} from '../helpers';
+
+import './file-dropzone-mode.css';
+
+export default function FileDropzoneModeRender($desc, modeInstance) {
+    const { $files, fieldDesc, fieldInstance } = $desc.$context;
+
+    const input = buildInput(fieldDesc, fieldInstance, $files);
+    const zone  = buildZone($desc, input, $files, fieldDesc, modeInstance, fieldInstance);
+
+    return Div({class: 'file-dropzone-wrapper'}, [zone, buildList($desc, $files, modeInstance, fieldInstance)]);
+}
+
+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 buildZone = ($desc, input, $files, fieldDesc, modeInstance, fieldInstance) => {
+    if($desc.renderZone) {
+        return $desc.renderZone($desc, modeInstance);
+    }
+    const $isDragOver = $(false);
+    const zone = Div({
+        class: { 'file-dropzone': true, 'is-drag-over': $isDragOver, 'is-disabled': fieldDesc.disabled },
+        style: $desc.height ? { minHeight: $desc.height + 'px' } : {},
+    }, [
+        input,
+        Div({class: 'file-dropzone-content'}, [
+            Span({class: 'file-dropzone-icon'}, $desc.icon),
+            Span({class: 'file-dropzone-text'}, $desc.text),
+            ShowIf($desc.hint, () => Span({class: 'file-dropzone-hint'}, $desc.hint)),
+        ]),
+    ]);
+
+    zone.nd.onClick(() => input.click());
+
+    zone.nd
+        .onDragOver((e) => {
+            e.preventDefault();
+            $isDragOver.set(true);
+        })
+        .onDragLeave(() => $isDragOver.set(false))
+        .onDrop((e) => {
+            e.preventDefault();
+            $isDragOver.set(false);
+
+            const files = Array.from(e.dataTransfer.files || []);
+            fieldInstance.addFiles(files);
+        });
+
+    return zone;
+};
+
+const buildList = ($desc, $files, modeInstance, fieldInstance) => {
+    const builder = $desc.renderItem
+        ? (item) => $desc.renderItem(item, () => removeItem(item, $files, modeInstance, fieldInstance))
+        : (item) => buildItem(item, $files, $desc, modeInstance, fieldInstance);
+
+    return ShowIf($files.is(f => f.length > 0),
+        () => Div({class: 'file-dropzone-list'},
+            ForEachArray($files, builder)
+        )
+    );
+};
+
+const buildItem = (item, $files, $desc, modeInstance, fieldInstance) => {
+    const file    = item.file();
+
+    const removeBtn = Span({class: 'file-item-remove'}, $desc.removeIcon || '×');
+    removeBtn.nd.onStopClick(() => removeItem(item, $files, modeInstance, fieldInstance));
+
+    return Div({class: 'file-dropzone-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, $files, modeInstance, fieldInstance) => {
+    fieldInstance.removeFile(item);
+    modeInstance.emit('remove', item);
+    item.emit('remove', item);
+};