native-document 1.0.165 → 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

@@ -1,5 +1,5 @@
-import {Div, ShowIf} from "../../../core/elements";
-import {createPortal} from "../../../core/elements/anchor/anchor";
+import {Div, ShowIf} from '../../../core/elements';
+import {createPortal} from '../../../core/elements/anchor/anchor';
 import {computePosition, flip, shift} from '@floating-ui/dom';
 
 import './contextmenu.css';
@@ -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);
     }
 
@@ -57,12 +57,12 @@ export const contextMenuHandler = (trigger, instance, data = null) => {
                 placement: 'bottom-start',
                 middleware: [
                     flip(),
-                    shift({padding: 8})
+                    shift({padding: 8}),
                 ],
             }).then(({x, y}) => {
                 $positionX.set(x);
                 $positionY.set(y);
             });
         });
-    })
-}
+    });
+};

package/src/ui/components/dropdown/DropdownRender.js

@@ -1,7 +1,7 @@
 import {Div, Input, ForEachArray} from '../../../core/elements';
 import PopoverRender from '../popover/PopoverRender';
-import {createFilter} from "../../../core/utils/filters";
-import {normalizeDropdownItem} from "../../../components/dropdown/helpers";
+import {createFilter} from '../../../core/utils/filters';
+import {normalizeDropdownItem} from '../../../components/dropdown/helpers';
 
 import './dropdown.css';
 
@@ -29,15 +29,15 @@ const buildDropdownContent = ($desc, instance) => {
                 items = items.where({
                     _: createFilter($desc.filterDependencies, (...args) => {
                         return $desc.filter(...args);
-                    })
+                    }),
                 });
             }
             else {
                 items = items.where({
                     _: createFilter($desc.searchValue, (item, key) => {
                         return $desc.filter(item, key);
-                    })
-                })
+                    }),
+                });
             }
         }
 
@@ -57,7 +57,7 @@ const buildDropdownContent = ($desc, instance) => {
                         instance.close();
                     }
                 });
-            })
+            }),
         );
         content.push(itemsContainer);
     }
@@ -78,7 +78,7 @@ const buildSearch = ($desc, instance) => {
             }
             return description.value?.toLowerCase().includes(key.toLowerCase())
                 || description.content?.toLowerCase().includes(key.toLowerCase());
-        }
+        };
     }
 
     return Div({class: 'dropdown-search'},
@@ -87,6 +87,6 @@ const buildSearch = ($desc, instance) => {
             type: 'text',
             placeholder: $desc.searchPlaceholder || 'Search...',
             value: $desc.searchValue,
-        }).nd.onInput((e) => instance.emit('search', e.target.value))
+        }).nd.onInput((e) => instance.emit('search', e.target.value)),
     );
 };

package/src/ui/components/dropdown/group/DropdownGroupRender.js

@@ -15,8 +15,8 @@ export default function DropdownGroupRender($desc, instance) {
 
     content.push(
         Div({class: 'dropdown-group-items'},
-            ForEachArray(items, (item) => item)
-        )
+            ForEachArray(items, (item) => item),
+        ),
     );
 
     return Div(instance.resolveProps(), content);

package/src/ui/components/dropdown/item/DropdownItemRender.js

@@ -1,4 +1,4 @@
-import {Div, Span} from "../../../../core/elements";
+import {Div, Span} from '../../../../core/elements';
 
 
 export default function DropdownItemRender($desc, instance) {

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

@@ -97,13 +97,13 @@ export default function FieldCollectionRender($desc, instance) {
         return Div({ class: 'field-collection-actions'},
             $desc.renderAdd()
                 .nd
-                .onClick(() => instance.add())
+                .onClick(() => instance.add()),
         );
     };
 
     return Div(instance.resolveProps(), [
         Div({class: 'field-collection-list'},
-            ForEachArray($items, buildItem)
+            ForEachArray($items, buildItem),
         ),
         buildAddButton(),
     ]);

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

@@ -1,5 +1,5 @@
 import {Div, Span, ShowIf, Form} from '../../../../elements';
-import {Button} from "../../../components/button";
+import {Button} from '../../../components/button';
 
 import './form-control.css';
 
@@ -51,7 +51,7 @@ const buildDefaultLayout = ({ fields, errors, form }) => {
         Div({ class: 'form-actions' }, [
             Button('Reset').type('reset'),
             Button('Submit').type('submit'),
-        ])
+        ]),
     ]);
 };
 
@@ -76,10 +76,10 @@ const buildErrorsSummary = ($desc, instance) => {
                 Div({class: 'form-error-group'}, [
                     Span({class: 'form-error-field'}, field),
                     Div({class: 'form-error-messages'},
-                        msgs.map(msg => Span({class: 'form-error-message'}, msg))
+                        msgs.map(msg => Span({class: 'form-error-message'}, msg)),
                     ),
-                ])
-            )
+                ]),
+            ),
         );
     });
 };

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

@@ -1,8 +1,8 @@
 import { Input, Span, ShowIf} from '../../../../../elements';
 import FieldRender from './FieldRender';
 import { $ } from '../../../../core/data/Observable';
-import {debounce} from "../../../../core/utils/helpers";
-import {Dropdown} from "../../../../components/dropdown";
+import {debounce} from '../../../../core/utils/helpers';
+import {Dropdown} from '../../../../components/dropdown';
 
 export default function AutocompleteFieldRender($desc, instance) {
     const $suggestions = $.array([]);
@@ -53,7 +53,7 @@ const buildInput = ($desc, instance, $suggestions, $loading) => {
     } else {
         input.nd.onInput((e) => {
             const query = e.target.value;
-            handleSuggestions(query)
+            handleSuggestions(query);
         });
     }
 

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

@@ -1,5 +1,5 @@
 import {Div, Label, Input, Span} from '../../../../../elements';
-import {buildErrors} from "../helpers";
+import {buildErrors} from '../helpers';
 
 export default function CheckboxFieldRender($desc, instance) {
     const props = instance.getEditableProps();

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

@@ -1,5 +1,5 @@
 import {Div, Label, Input, Span, ForEachArray} from '../../../../../elements';
-import {buildErrors} from "../helpers";
+import {buildErrors} from '../helpers';
 
 export default function CheckboxGroupFieldRender($desc, instance) {
     const props = instance.getEditableProps();

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

@@ -24,8 +24,8 @@ export default function DateFieldRender($desc, instance) {
         content.push(
             Switch($desc.range,
                 () => buildRangeWrapper($desc, instance, inputType),
-                () => buildSingleWrapper($desc, instance, inputType)
-            )
+                () => buildSingleWrapper($desc, instance, inputType),
+            ),
         );
     }
     else {
@@ -34,7 +34,7 @@ export default function DateFieldRender($desc, instance) {
 
     if($desc.help) {
         content.push(
-            Span({ class: 'field-hint', ...($desc.elementsProps.hint || {}) }, $desc.help)
+            Span({ class: 'field-hint', ...($desc.elementsProps.hint || {}) }, $desc.help),
         );
     }
 
@@ -62,7 +62,7 @@ const buildSingleWrapper = ($desc, instance, inputType) => {
             callback = () => {
                 instance.emit('clear');
                 $desc.value.set(null);
-            }
+            };
         } else {
             callback = (e) => {
                 e.target.value = '';
@@ -89,7 +89,7 @@ const buildRangeWrapper = ($desc, instance, inputType) => {
             if((new Date($desc.valueEnd.val())) < (new Date($desc.valueStart.val()))) {
                 $desc.valueEnd.set($desc.valueStart.val());
             }
-        }
+        };
     } else {
         callback = () => {
             if((new Date(endInput.value)) < (new Date(startInput.value))) {
@@ -115,12 +115,12 @@ const buildRangeWrapper = ($desc, instance, inputType) => {
     return Div({class: 'date-field-range'}, [
         Div({class: 'date-field-range-start'}, [
             Span({class: 'date-field-range-label'}, 'From'),
-            buildInputWithSlots(startInput, $desc, instance, { source: 'valueStart', onClear: null } )
+            buildInputWithSlots(startInput, $desc, instance, { source: 'valueStart', onClear: null } ),
         ]),
         Span({class: 'date-field-range-separator'}, $desc.rangeSeparator),
         Div({class: 'date-field-range-end'}, [
             Span({class: 'date-field-range-label'}, 'To'),
-            buildInputWithSlots(endInput, $desc, instance, { source: 'valueEnd', onClear: null } )
+            buildInputWithSlots(endInput, $desc, instance, { source: 'valueEnd', onClear: null } ),
         ]),
     ]);
 };

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

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

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

@@ -1,5 +1,5 @@
 import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
-import {buildInputWithSlots} from "../helpers";
+import {buildInputWithSlots} from '../helpers';
 
 import './field.css';
 
@@ -110,9 +110,9 @@ const buildErrors = ($desc) => {
         return ShowIf($desc.hasErrors,
             () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
                 ForEachArray($desc.errors, (error) =>
-                    Span({class: 'field-error'}, error)
-                )
-            )
+                    Span({class: 'field-error'}, error),
+                ),
+            ),
         );
     });
 };

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

@@ -1,6 +1,6 @@
 import {Div, Label, Span} from '../../../../../elements';
 import {buildErrors} from '../helpers';
-import FileNativeMode from "../../../../components/form/field/types/file-field-mode/FileNativeMode";
+import FileNativeMode from '../../../../components/form/field/types/file-field-mode/FileNativeMode';
 
 import './file-field.css';
 

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

@@ -9,7 +9,7 @@ export default function PasswordFieldRender($desc, instance) {
         const icons    = $desc.visibilityIcons || {show: '👁', hide: '🙈'};
 
         const toggleBtn = Button({class: 'field-visibility-toggle'},
-            $visible.transform(v => v ? icons.hide : icons.show)
+            $visible.transform(v => v ? icons.hide : icons.show),
         );
 
         toggleBtn.nd.onClick(() => {
@@ -47,7 +47,7 @@ const buildStrengthMeter = ($desc) => {
 
     return Span({class: 'field-strength-meter'}, [
         Span({class: 'field-strength-track'},
-            Span({class: $scoreClass, style: {width: $width}})
+            Span({class: $scoreClass, style: {width: $width}}),
         ),
         Span({class: 'field-strength-label'}, $label),
     ]);

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

@@ -1,6 +1,6 @@
 import {Div, Label, Input, Span, ForEachArray} from '../../../../../elements';
 import { $ } from '../../../../core/data/Observable';
-import {buildErrors} from "../helpers";
+import {buildErrors} from '../helpers';
 
 export default function RadioFieldRender($desc, instance) {
     const props = instance.getEditableProps();

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

@@ -117,6 +117,6 @@ const buildMarks = ($desc) => {
                     ? Span({class: 'range-field-mark-label'}, mark.label)
                     : null,
             ].filter(Boolean));
-        })
+        }),
     );
 };

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

@@ -2,7 +2,7 @@ import {Div, Label, Select, Option, Span, ForEachArray, ShowIf} from '../../../.
 import { $ } from '../../../../core/data/Observable';
 import {Dropdown} from '../../../../components/dropdown';
 import {buildErrors} from '../helpers';
-import DebugManager from "../../../../core/utils/debug-manager";
+import DebugManager from '../../../../core/utils/debug-manager';
 
 export default function SelectFieldRender($desc, instance) {
     const props = instance.getEditableProps();
@@ -100,7 +100,7 @@ const buildTagsDisplay = ($desc) => {
             });
 
             return tag;
-        })
+        }),
     );
 };