native-document 1.0.165 → 1.0.168

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

@@ -114,18 +114,18 @@ const buildTrack = ($desc, $pct) => {
     } else {
         if(isVertical) {
             style = {
-                height: $pct.transform((v) => v+'%')
+                height: $pct.transform((v) => v+'%'),
             };
         } else {
             style = {
-                width: $pct.transform((v) => v+'%')
+                width: $pct.transform((v) => v+'%'),
             };
         }
     }
 
     const fill = Div({
         class: 'slider-fill',
-        style
+        style,
     });
 
     return Div({class: 'slider-track'}, fill);
@@ -193,7 +193,7 @@ const buildThumb = ($desc, instance, $pct, $value, role) => {
         if(isVertical) {
             position = 'right';
             style = {
-                bottom: $pct.transform(p => `calc(${p}% - 9px)`)
+                bottom: $pct.transform(p => `calc(${p}% - 9px)`),
             };
         } else {
             position = 'top';
@@ -262,7 +262,7 @@ const buildMarks = ($desc) => {
                 Div({class: 'slider-mark-dot'}),
                 mark.label ? Span({class: 'slider-mark-label'}, mark.label) : null,
             ].filter(Boolean));
-        })
+        }),
     );
 };
 
@@ -341,7 +341,7 @@ const setValue = ($desc, instance, $value, val, role) => {
 
     if($desc.snapToMarks && $desc.marks?.length) {
         const closest = $desc.marks.reduce((prev, curr) =>
-            Math.abs(curr.value - clamped) < Math.abs(prev.value - clamped) ? curr : prev
+            Math.abs(curr.value - clamped) < Math.abs(prev.value - clamped) ? curr : prev,
         );
         $value.set(closest.value);
         instance.emit('change', closest.value);

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

@@ -1,4 +1,4 @@
-import FieldRender from "./FieldRender";
+import FieldRender from './FieldRender';
 
 
 const StringFieldRender = FieldRender;

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

@@ -1,4 +1,4 @@
-import FieldRender from "./FieldRender";
+import FieldRender from './FieldRender';
 
 
 const TelFieldRender = FieldRender;

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

@@ -71,7 +71,7 @@ const buildWordCounter = ($desc) => {
         if(!cleanedValue) {
             return 0;
         }
-        return cleanedValue.split(/\s+/).length
+        return cleanedValue.split(/\s+/).length;
     };
     const $count = $desc.value?.__$Observable
         ? $desc.value.transform(countWords)

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

@@ -20,8 +20,8 @@ export default function TimeFieldRender($desc, instance) {
         content.push(
             Switch($desc.range,
                 () => buildRangeWrapper($desc, instance),
-                () => buildSingleWrapper($desc, instance)
-            )
+                () => buildSingleWrapper($desc, instance),
+            ),
         );
     } else {
         content.push(buildSingleWrapper($desc, instance));
@@ -76,7 +76,7 @@ const buildRangeWrapper = ($desc, instance) => {
             const start = $desc.valueStart.val();
             const end = $desc.valueEnd.val();
             if(start && end && getSeconds(end) < getSeconds(start)) {
-                $desc.valueEnd.set(start)
+                $desc.valueEnd.set(start);
             }
             instance.emit('change', {start, end});
         };

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

@@ -1,4 +1,4 @@
-import FieldRender from "./FieldRender";
+import FieldRender from './FieldRender';
 
 
 const UrlFieldRender = FieldRender;

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

@@ -76,7 +76,7 @@ const buildAvatar = ($desc, $preview) => {
     });
     const placeholder = () => Div({class: 'file-avatar-placeholder'}, [
         Span({class: 'file-avatar-placeholder-icon'}, $desc.placeholderIcon),
-    ])
+    ]);
 
     return Div({
         class: buildShapeClass('file-avatar', $desc),

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

@@ -79,8 +79,8 @@ const buildList = ($desc, $files, modeInstance, fieldInstance) => {
 
     return ShowIf($files.is(f => f.length > 0),
         () => Div({class: 'file-dropzone-list'},
-            ForEachArray($files, builder)
-        )
+            ForEachArray($files, builder),
+        ),
     );
 };
 

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

@@ -19,8 +19,8 @@ export default function FileUploadButtonModeRender($desc, modeInstance) {
             () => Div({class: 'file-button-list'},
                 $desc.renderList
                     ? $desc.renderList($files, modeInstance)
-                    : ForEachArray($files, builder)
-            )
+                    : ForEachArray($files, builder),
+            ),
         ),
     ]);
 }

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

@@ -72,7 +72,7 @@ const buildAddCell = ($desc, input, modeInstance) => {
     if($desc.renderAdd) {
         cell = $desc.renderAdd($desc, modeInstance);
     } else {
-        cell = Div({ class: 'file-wall-cell-add', style: {width: size + 'px', height: size + 'px'}, }, [
+        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'),
         ]);

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

@@ -1,14 +1,14 @@
-import {ForEachArray, ShowIf, Div, Span, Img} from "../../../../elements";
+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)
-                )
-            )
-        )
+                    Span({class: 'field-error'}, error),
+                ),
+            ),
+        ),
     );
 };
 
@@ -56,10 +56,10 @@ export const buildProgress = (item) => {
                 Div({
                     class: 'file-item-progress-bar',
                     style: {width: $progress.transform(v => v + '%')},
-                })
+                }),
             ),
             Span({class: 'file-item-progress-label'}, $progress.transform(v => v + '%')),
-        ])
+        ]),
     );
 };
 
@@ -95,7 +95,7 @@ export const buildInputWithSlots = (input, $desc, instance, options = {}) => {
         'has-trailing': !!slots.trailing,
         'is-touched': $desc.isTouched,
         'is-dirty': $desc.isDirty,
-        ...(options.class || {})
+        ...(options.class || {}),
     };
 
     input.nd.onInput((e) => {

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

@@ -1,27 +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";
+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;
+}

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

@@ -0,0 +1,62 @@
+:root {
+    --list-group-header-padding:     6px 14px 4px;
+    --list-group-header-font-size:   var(--note-size);
+    --list-group-header-weight:      500;
+    --list-group-header-color:       var(--gray);
+    --list-group-header-color-hover: var(--text-color);
+    --list-group-header-letter-spacing: 0.05em;
+    --list-group-icon-size:          14px;
+    --list-group-icon-color:         var(--gray);
+    --list-group-chevron-size:       11px;
+    --list-group-items-indent:       14px;
+}
+
+.list-group {
+    list-style: none;
+}
+
+.list-group-header {
+    display:         flex;
+    align-items:     center;
+    gap:             8px;
+    padding:         var(--list-group-header-padding);
+    font-size:       var(--list-group-header-font-size);
+    font-weight:     var(--list-group-header-weight);
+    color:           var(--list-group-header-color);
+    letter-spacing:  var(--list-group-header-letter-spacing);
+    user-select:     none;
+
+    .is-collapsable & {
+        cursor: pointer;
+
+        &:hover {
+            color: var(--list-group-header-color-hover);
+        }
+    }
+}
+
+.list-group-icon {
+    font-size: var(--list-group-icon-size);
+    color:     var(--list-group-icon-color);
+    flex-shrink: 0;
+}
+
+.list-group-label {
+    flex: 1;
+}
+
+.list-group-chevron {
+    font-size:  var(--list-group-chevron-size);
+    transition: transform 0.15s ease;
+    flex-shrink: 0;
+
+    &.is-open {
+        transform: rotate(90deg);
+    }
+}
+
+.list-group-items {
+    .list-item {
+        padding-left: calc(var(--list-group-items-indent) + 14px);
+    }
+}

package/src/ui/components/list/item/ListItemRender.js

@@ -0,0 +1,238 @@
+import { Li, Div, Span, ShowIf } from '../../../../core/elements';
+
+import './list-item.css';
+
+export default function ListItemRender($desc, instance) {
+    if ($desc.render) {
+        return $desc.render($desc, instance);
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('list-item');
+
+    if ($desc.disabled) {
+        props.class.add('is-disabled', $desc.disabled);
+    }
+    if ($desc.selected) {
+        props.class.add('is-selected', $desc.selected);
+    }
+    if ($desc.visibility) {
+        props.class.add('is-hidden', $desc.visibility.isFalsy());
+    }
+
+    const backContent  = [];
+    const frontContent = [];
+
+    const $list = instance.$parent;
+
+    // Checkbox — réactif via ShowIf
+    if ($list?.$description?.selectByCheckbox) {
+        const selectedValues = $list.$description.selectedValues;
+        const value          = $desc.value ?? instance;
+        const isChecked      = selectedValues ? selectedValues.isIncludes(value) : null;
+
+        const cls = isChecked
+            ? isChecked.transform((c) => 'list-item-checkbox' + (c ? ' is-checked' : ''))
+            : 'list-item-checkbox';
+
+        frontContent.push(
+            ShowIf($list.$description.selectByCheckbox, () =>
+                Span({ class: cls, 'aria-hidden': 'true' })
+            )
+        );
+    }
+
+    if ($desc.icon) {
+        frontContent.push(Span({ class: 'list-item-icon' }, $desc.icon));
+    }
+
+    frontContent.push(buildBody($desc));
+
+    // Select indicator — réactif via isIncludes
+    if ($list?.$description?.selectByClick) {
+        const selectedValues = $list.$description.selectedValues;
+        const value          = $desc.value ?? instance;
+        const isSelected     = selectedValues ? selectedValues.isIncludes(value) : null;
+
+        if (isSelected) {
+            frontContent.push(
+                Span({
+                    class: isSelected.transform((s) => 'list-item-indicator' + (s ? ' is-visible' : '')),
+                    'aria-hidden': 'true',
+                }, $desc.isSelectedIcon)
+            );
+        }
+    }
+
+    if ($desc.trailing) {
+        frontContent.push(Div({ class: 'list-item-trailing' }, $desc.trailing));
+    }
+
+    // Swipe actions
+    const hasLeadingSwipe  = Array.isArray($desc.swipeLeading)  && $desc.swipeLeading.length  > 0;
+    const hasTrailingSwipe = Array.isArray($desc.swipeTrailing) && $desc.swipeTrailing.length > 0;
+
+    if (hasLeadingSwipe || hasTrailingSwipe) {
+        props.class.add('is-swipeable');
+
+        if (hasLeadingSwipe) {
+            backContent.push(Div({ class: 'swipe-actions-container container-leading' }, $desc.swipeLeading));
+        }
+        if (hasTrailingSwipe) {
+            backContent.push(Div({ class: 'swipe-actions-container container-trailing' }, $desc.swipeTrailing));
+        }
+    }
+
+    const elFront = Div({ class: 'list-item-content' }, frontContent);
+    const elBack  = backContent.length > 0
+        ? Div({ class: 'list-item-swipe-background' }, backContent)
+        : null;
+
+    const el = Li(instance.resolveProps(), elBack ? [elBack, elFront] : [elFront]);
+
+    if (elBack) {
+        setupSwipeEvents(elFront, elBack, hasLeadingSwipe, hasTrailingSwipe);
+    }
+
+    el.nd.onClick((e) => {
+        if ($desc.disabled) return;
+
+        const $list = instance.$parent;
+        if (!$list) {
+            instance.emit('click', instance, e);
+            return;
+        }
+
+        const desc = $list.$description;
+        if (desc.selectable || desc.selectByClick || desc.selectByCheckbox) {
+            handleSelect($list, $desc, instance);
+            instance.emit('itemSelect', instance);
+            $list.emit('itemSelect', instance);
+        }
+
+        instance.emit('click', instance, e);
+        $list.emit('itemClick', instance, e);
+    });
+
+    return el;
+}
+
+function buildBody($desc) {
+    const parts = [];
+
+    if ($desc.label) {
+        parts.push(Span({ class: 'list-item-label' }, $desc.label));
+    }
+
+    if ($desc.subtitle) {
+        parts.push(Span({ class: 'list-item-subtitle' }, $desc.subtitle));
+    }
+
+    return Div({ class: 'list-item-body' }, parts);
+}
+
+function handleSelect($list, $desc, instance) {
+    const $values = $list.$description.selectedValues;
+    if (!$values) return;
+
+    const value = $desc.value ?? instance;
+
+    if ($values.includes(value)) {
+        $values.removeItem(value);
+    } else {
+        if (!$list.$description.multiSelect.val()) {
+            $values.clear();
+        }
+        $values.push(value);
+    }
+}
+
+function setupSwipeEvents(elFront, elBack, hasLeading, hasTrailing) {
+    let startX    = 0;
+    let currentX  = 0;
+    let isSwiping = false;
+    let isOpen    = false;
+
+    const leadingContainer  = elBack.querySelector('.container-leading');
+    const trailingContainer = elBack.querySelector('.container-trailing');
+
+    // Stop propagation on all swipe action clicks — must not bubble to list-item onClick
+    elBack.addEventListener('click', (e) => e.stopPropagation());
+
+    elFront.addEventListener('pointerdown', (e) => {
+        startX    = e.clientX;
+        isSwiping = true;
+        elFront.style.transition = 'none';
+    });
+
+    elFront.addEventListener('pointermove', (e) => {
+        if (!isSwiping) return;
+
+        let diffX = e.clientX - startX;
+
+        if (diffX > 0 && !hasLeading)  diffX = 0;
+        if (diffX < 0 && !hasTrailing) diffX = 0;
+
+        const threshold = diffX > 0
+            ? (leadingContainer  ? leadingContainer.offsetWidth  : 100)
+            : (trailingContainer ? trailingContainer.offsetWidth : 100);
+
+        if (Math.abs(diffX) > threshold) {
+            diffX = diffX > 0
+                ? threshold  + (diffX - threshold)  * 0.2
+                : -threshold + (diffX + threshold) * 0.2;
+        }
+
+        currentX = diffX;
+        elFront.style.transform = `translate3d(${currentX}px, 0, 0)`;
+    });
+
+    const resetSwipe = () => {
+        elFront.style.transition = 'transform 0.2s ease-out';
+        elFront.style.transform  = 'translate3d(0, 0, 0)';
+        currentX = 0;
+        isOpen   = false;
+    };
+
+    const closeSwipe = () => {
+        isSwiping = false;
+        elFront.style.transition = 'transform 0.2s ease-out';
+
+        const leadingThreshold  = leadingContainer  ? leadingContainer.offsetWidth  : 100;
+        const trailingThreshold = trailingContainer ? trailingContainer.offsetWidth : 100;
+
+        if (currentX > leadingThreshold / 2 && hasLeading) {
+            elFront.style.transform = `translate3d(${leadingThreshold}px, 0, 0)`;
+            isOpen = true;
+        } else if (currentX < -trailingThreshold / 2 && hasTrailing) {
+            elFront.style.transform = `translate3d(-${trailingThreshold}px, 0, 0)`;
+            isOpen = true;
+        } else {
+            resetSwipe();
+        }
+    };
+
+    elFront.addEventListener('pointerup',    closeSwipe);
+    elFront.addEventListener('pointerleave', closeSwipe);
+
+    // Close swipe when clicking outside the item
+    const onDocumentClick = (e) => {
+        if (!isOpen) return;
+        if (!elFront.closest('.list-item')?.contains(e.target)) {
+            resetSwipe();
+        }
+    };
+
+    document.addEventListener('click', onDocumentClick);
+
+    // Close swipe when clicking on a swipe action (after the action fires)
+    elBack.addEventListener('click', () => {
+        if (isOpen) resetSwipe();
+    });
+
+    // Cleanup on unmount
+    elFront.nd?.unmounted(() => {
+        document.removeEventListener('click', onDocumentClick);
+    });
+}