native-document 1.0.166 → 1.0.168

package/src/ui/components/card/CardRender.js

@@ -0,0 +1,133 @@
+import { Div, Img, Span } from '../../../core/elements';
+
+import './card.css';
+import {Button} from '../../../components/button';
+
+export default function CardRender($desc, instance) {
+    const imageSlot   = buildImage($desc, instance);
+    const headerSlot  = buildHeader($desc, instance);
+    const contentSlot = buildContent($desc, instance);
+    const actionsSlot = buildActions($desc, instance);
+    const footerSlot  = buildFooter($desc, instance, actionsSlot);
+
+    if ($desc.layout) {
+        return $desc.layout(
+            { image: imageSlot, header: headerSlot, content: contentSlot, actions: actionsSlot, footer: footerSlot },
+            instance,
+        );
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('card');
+
+    if ($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    props.class.add({
+        'is-horizontal': $desc.horizontal,
+        'is-hoverable':  $desc.hoverable,
+        'is-clickable':  instance.hasListeners('click'),
+    });
+
+    if ($desc.loading) {
+        props.class.add({ 'is-loading': $desc.loading });
+    }
+
+    const children = [
+        imageSlot,
+        Div({ class: 'card-content'}, [
+            Div({ class: 'card-body' }, [headerSlot, contentSlot]),
+            footerSlot,
+        ]),
+    ];
+
+    const el = Div(instance.resolveProps(), children);
+
+    el.nd.onClick((e) => instance.emit('click', e));
+    el.nd.onMouseEnter((e) => instance.emit('hover', e));
+
+    return el;
+}
+
+function buildImage($desc, instance) {
+    if ($desc.renderImage) {
+        return $desc.renderImage($desc, instance);
+    }
+
+    if (!$desc.image) {
+        return null;
+    }
+
+    return Div({ class: 'card-image-wrapper' }, [
+        Img($desc.image, {
+            class: `card-image is-${$desc.imagePosition}`,
+            alt:   '',
+        })
+    ]);
+}
+
+function buildHeader($desc, instance) {
+    if ($desc.renderHeader) {
+        return $desc.renderHeader($desc, instance);
+    }
+
+    const parts = [];
+
+    if ($desc.title) {
+        parts.push(Span({ class: 'card-title' }, $desc.title));
+    }
+
+    if ($desc.subtitle) {
+        parts.push(Span({ class: 'card-subtitle' }, $desc.subtitle));
+    }
+
+    if (!parts.length) {
+        return null;
+    }
+
+    return Div({ class: 'card-header' }, parts);
+}
+
+function buildContent($desc, instance) {
+    if ($desc.renderContent) {
+        return $desc.renderContent($desc, instance);
+    }
+
+    if (!$desc.content) {
+        return null;
+    }
+
+    return Div({ class: 'card-content' }, $desc.content);
+}
+
+function buildActions($desc, instance) {
+    if ($desc.renderActions) {
+        return $desc.renderActions($desc, instance);
+    }
+
+    if (!$desc.actions?.length) {
+        return null;
+    }
+
+    const buttons = $desc.actions.map(({ label, callback }) => {
+        const btn = (typeof label === 'string') ? Button(label, { class: 'card-action' }) : label;
+        btn.nd.onClick(() => callback?.());
+        return btn;
+    });
+
+    return Div({ class: 'card-actions' }, buttons);
+}
+
+function buildFooter($desc, instance, actionsSlot) {
+    if ($desc.renderFooter) {
+        return $desc.renderFooter($desc, instance);
+    }
+
+    if (!actionsSlot) {
+        return null;
+    }
+
+    return Div({ class: 'card-footer' }, actionsSlot);
+}

package/src/ui/components/card/card.css

@@ -0,0 +1,169 @@
+:root {
+    --card-bg:                  var(--background);
+    --card-border:              var(--gray-lite-3);
+    --card-radius:              var(--radius-card);
+    --card-shadow:              var(--shadow-card);
+    --card-shadow-elevated:     var(--shadow-lg);
+    --card-shadow-hover:        var(--shadow-md);
+    --card-font-size:           var(--description-size);
+    --card-padding:             var(--space-comfortable);
+    --card-img-height:          200px;
+    --card-title-size:          var(--text-size);
+    --card-title-weight:        600;
+    --card-title-color:         var(--text-color);
+    --card-subtitle-size:       var(--note-size);
+    --card-subtitle-color:      var(--gray);
+    --card-footer-padding:      var(--space-cozy) var(--space-comfortable);
+    --card-footer-border:       var(--gray-lite-3);
+    --card-footer-gap:          var(--space-cozy);
+    --card-transition:          box-shadow 0.2s ease;
+    --card-loading-bg:          var(--gray-lite-5);
+    --card-horizontal-img-width: 175px;
+    --card-clickable-cursor:    pointer;
+    --card-header-row-gap: .5rem;
+}
+
+
+.card {
+    background:    var(--card-bg);
+    border:        1px solid var(--card-border);
+    border-radius: var(--card-radius);
+    overflow:      hidden;
+    font-size:     var(--card-font-size);
+    transition:    var(--card-transition);
+    display:       inline-flex;
+    flex-direction: column;
+
+    &.is-elevated {
+        border:     none;
+        box-shadow: var(--card-shadow-elevated);
+    }
+
+    &.is-flat {
+        border:     none;
+        box-shadow: none;
+    }
+
+    &.is-outlined {
+        border-width: 2px;
+    }
+
+    &.is-hoverable:hover {
+        box-shadow: var(--card-shadow-hover);
+    }
+
+    &.is-clickable {
+        cursor: var(--card-clickable-cursor);
+
+        &:hover {
+            box-shadow: var(--card-shadow-hover);
+        }
+
+        &:active {
+            opacity: 0.95;
+        }
+    }
+
+    &.is-horizontal {
+        flex-direction: row;
+
+        .card-image-wrapper {
+            width: var(--card-horizontal-img-width);
+        }
+        .card-image {
+            flex-shrink: 0;
+        }
+        .card-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+        }
+    }
+
+    &.is-loading {
+        .card-title,
+        .card-subtitle,
+        .card-content {
+            background:    var(--card-loading-bg);
+            border-radius: 4px;
+            color:         transparent;
+            user-select:   none;
+
+            * {
+                visibility: hidden;
+            }
+        }
+
+        .card-title   { width: 60%; }
+        .card-subtitle { width: 40%; }
+        .card-image { background: var(--card-loading-bg); }
+    }
+}
+.card-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    row-gap: var(--card-header-row-gap);
+}
+.card-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    column-gap:  var(--space-tiny);
+    > * {
+        flex: 1;
+    }
+}
+.card-image-wrapper {
+    width: 100%;
+    height:     var(--card-img-height);
+}
+.card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+
+    &.is-top    { order: -1; }
+    &.is-bottom { order: 10; }
+
+    .card.is-horizontal &.is-left  { order: -1; }
+    .card.is-horizontal &.is-right { order: 10; }
+}
+
+.card-body {
+    padding: var(--card-padding);
+    flex:    1;
+    display: flex;
+    flex-direction: column;
+    gap:     var(--space-cozy);
+}
+
+.card-title {
+    font-size:   var(--card-title-size);
+    font-weight: var(--card-title-weight);
+    color:       var(--card-title-color);
+    margin:      0;
+}
+
+.card-subtitle {
+    font-size: var(--card-subtitle-size);
+    color:     var(--card-subtitle-color);
+    margin:    0;
+}
+
+.card-content {
+    flex: 1;
+}
+
+.card-footer {
+    width: 100%;
+    display:       flex;
+    align-items:   center;
+    justify-content: flex-end;
+    gap:           var(--card-footer-gap);
+    padding:       var(--card-footer-padding);
+    border-top:    1px solid var(--card-footer-border);
+}

package/src/ui/components/contextmenu/ContextmenuRender.js

@@ -18,7 +18,7 @@ export default function ContextMenuRender($desc, instance) {
 
     createPortal(container, {name: 'context-menu'});
 
-    if($desc.trigger) {
+    if($desc.trigger && instance) {
         contextMenuHandler($desc.trigger, instance);
     }
 

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