native-document 1.0.166 → 1.0.168

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

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

@@ -0,0 +1,191 @@
+:root {
+    --list-item-padding-v:              9px;
+    --list-item-padding-h:              14px;
+    --list-item-gap:                    10px;
+    --list-item-font-size:              var(--description-size);
+    --list-item-color:                  var(--text-color);
+    --list-item-bg-hover:               var(--gray-lite-5);
+    --list-item-bg-selected:            color-mix(in srgb, var(--blue) 8%, transparent);
+    --list-item-color-selected:         var(--blue);
+    --list-item-weight-selected:        500;
+    --list-item-disabled-opacity:       0.45;
+    --list-item-transition:             background 0.1s ease;
+
+    --list-item-subtitle-size:          var(--note-size);
+    --list-item-subtitle-color:         var(--gray);
+
+    --list-item-trailing-size:          var(--note-size);
+    --list-item-trailing-color:         var(--gray);
+
+    --list-item-icon-size:              16px;
+    --list-item-icon-color:             var(--gray);
+
+    --list-item-checkbox-size:          15px;
+    --list-item-checkbox-radius:        4px;
+    --list-item-checkbox-border:        var(--gray-lite-2);
+    --list-item-checkbox-bg:            var(--blue);
+
+    --list-item-indicator-size:         12px;
+
+    --list-item-swipe-transition:       transform 0.2s ease-out;
+    --list-item-swipe-leading-bg:       var(--color-success);
+    --list-item-swipe-trailing-bg:      var(--color-danger);
+    --list-item-swipe-actions-min-width: 80px;
+}
+
+/* ── Base ───────────────────────────────────────────────────── */
+
+.list-item {
+    position:   relative;
+    list-style: none;
+    font-size:  var(--list-item-font-size);
+    color:      var(--list-item-color);
+    overflow:   hidden;
+
+    &.is-disabled {
+        opacity:        var(--list-item-disabled-opacity);
+        cursor:         not-allowed;
+        pointer-events: none;
+    }
+
+    &.is-hidden {
+        display: none;
+    }
+}
+
+/* ── Content (front layer) ──────────────────────────────────── */
+
+.list-item-content {
+    position:   relative;
+    z-index:    1;
+    display:    flex;
+    align-items: center;
+    gap:        var(--list-item-gap);
+    padding:    var(--list-item-padding-v) var(--list-item-padding-h);
+    cursor:     pointer;
+    background: var(--list-bg);
+    transition: var(--list-item-transition);
+
+    .list-item:hover & {
+        background: var(--list-item-bg-hover);
+    }
+
+    .list-item.is-selected & {
+        background: var(--list-item-bg-selected);
+        color:      var(--list-item-color-selected);
+
+        .list-item-label {
+            font-weight: var(--list-item-weight-selected);
+        }
+    }
+
+    .list-item.is-swipeable & {
+        transition: transform 0.05s linear, background var(--fast);
+    }
+}
+
+/* ── Slots ──────────────────────────────────────────────────── */
+
+.list-item-icon {
+    font-size:   var(--list-item-icon-size);
+    color:       var(--list-item-icon-color);
+    flex-shrink: 0;
+    display:     flex;
+    align-items: center;
+}
+
+.list-item-body {
+    flex:           1;
+    min-width:      0;
+    display:        flex;
+    flex-direction: column;
+    gap:            2px;
+}
+
+.list-item-label {
+    white-space:   nowrap;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
+
+.list-item-subtitle {
+    font-size:     var(--list-item-subtitle-size);
+    color:         var(--list-item-subtitle-color);
+    white-space:   nowrap;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
+
+.list-item-trailing {
+    flex-shrink: 0;
+    font-size:   var(--list-item-trailing-size);
+    color:       var(--list-item-trailing-color);
+}
+
+/* ── Checkbox ───────────────────────────────────────────────── */
+
+.list-item-checkbox {
+    flex-shrink:      0;
+    width:            var(--list-item-checkbox-size);
+    height:           var(--list-item-checkbox-size);
+    border-radius:    var(--list-item-checkbox-radius);
+    border:           1.5px solid var(--list-item-checkbox-border);
+    background:       transparent;
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    font-size:        10px;
+    transition:       background 0.1s ease, border-color 0.1s ease;
+
+    &.is-checked {
+        background:   var(--list-item-checkbox-bg);
+        border-color: var(--list-item-checkbox-bg);
+        color:        white;
+    }
+}
+
+/* ── Select indicator (selectByClick) ───────────────────────── */
+
+.list-item-indicator {
+    opacity:     0;
+    flex-shrink: 0;
+    font-size:   var(--list-item-indicator-size);
+    color:       var(--list-item-color-selected);
+    transition:  opacity 0.1s ease;
+
+    &.is-visible {
+        opacity: 1;
+    }
+}
+
+/* ── Swipe ──────────────────────────────────────────────────── */
+
+.list-item-swipe-background {
+    position: absolute;
+    inset:    0;
+    display:  flex;
+    z-index:  0;
+}
+
+.swipe-actions-container {
+    display:        flex;
+    align-items:    center;
+    min-width:      var(--list-item-swipe-actions-min-width);
+
+    &.container-leading {
+        justify-content: flex-start;
+    }
+
+    &.container-trailing {
+        justify-content: flex-end;
+        margin-left:     auto;
+    }
+
+    &.container-trailing,
+    &.container-leading {
+        > * {
+            height: 100%;
+            border-radius: 0;
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+:root {
+    --list-bg:              var(--background);
+    --list-border:          var(--gray-lite-3);
+    --list-radius:          var(--radius-card);
+    --list-padding:         0;
+    --list-inset-padding:   0px;
+}
+
+.list {
+    background:    var(--list-bg);
+    border:        1px solid var(--list-border);
+    border-radius: var(--list-radius);
+    padding:       var(--list-padding);
+    overflow:      hidden;
+    list-style:    none;
+    &.with-divider {
+        li {
+            border-bottom: solid 1px var(--list-border, #e0e0e0);
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+}

package/src/ui/components/spacer/SpacerRender.js

@@ -0,0 +1,10 @@
+import { Div } from '../../../core/elements';
+
+export default function SpacerRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('spacer');
+    props.style.add('flex', '1');
+
+    return Div(instance.resolveProps());
+}

package/src/ui/index.js

@@ -34,6 +34,14 @@ export { default as AccordionRender } from './components/accordion/AccordionRend
 export { default as SimpleTableRender } from './components/table/simple-table/SimpleTableRender';
 export { default as DataTableRender } from './components/table/data-table/DataTableRender';
 export { default as SwitchRender } from './components/switch/SwitchRender';
+export { default as SpacerRender } from './components/spacer/SpacerRender';
+
+export { default as ListRender } from './components/list/ListRender';
+export { default as ListGroupRender } from './components/list/group/ListGroupRender';
+export { default as ListItemRender } from './components/list/item/ListItemRender';
+export { default as ListDividerRender } from './components/list/divider/ListDividerRender';
+
+export { default as CardRender } from './components/card/CardRender';
 
 export * from './components/stacks';
 export * from './components/form';