native-document 1.0.138 → 1.0.140

package/src/ui/components/alert/AlertRender.js

@@ -0,0 +1,80 @@
+import {Div, Span} from '../../../core/elements';
+import Button from '../../../components/button/Button'
+import './alert.css';
+
+export default function AlertRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('alert');
+    props.class.add('is-' + ($desc.variant || 'info'));
+    props.class.add('is-' + ($desc.appearance || 'bordered'));
+
+    const content = [];
+
+    if($desc.showIcon && $desc.icon) {
+        content.push(Span({class: 'alert-icon'}, $desc.icon));
+    }
+
+    content.push(buildBody($desc, instance));
+
+    return Div(instance.resolveProps(), content);
+}
+
+const buildBody = ($desc, instance) => {
+    const body = [];
+
+    if($desc.renderTitle) {
+        body.push(Div({class: 'alert-title'}, [
+            $desc.renderTitle($desc, instance),
+            $desc.closable ? buildClose($desc, instance) : null
+        ]));
+    }
+    else if($desc.title) {
+        body.push(Div({class: 'alert-title'}, [
+            $desc.title,
+            $desc.closable ? buildClose($desc, instance) : null
+        ]));
+    }
+
+    if($desc.renderContent) {
+        body.push(Div({class: 'alert-content'}, $desc.renderContent($desc, instance)));
+    }
+    else if($desc.content) {
+        body.push(Div({class: 'alert-content'}, $desc.content));
+    }
+
+    if($desc.renderFooter) {
+        body.push(Div({class: 'alert-footer'}, $desc.renderFooter($desc, instance)));
+    }
+    else if($desc.actions?.length) {
+        body.push(buildFooter($desc, instance));
+    }
+
+    return Div({class: 'alert-body'}, body);
+}
+
+const buildFooter = ($desc, instance) => {
+    const actions = $desc.actions.map((action) => {
+        let classes = '';
+
+        if ($desc.appearance === 'filled') {
+            classes  += ' is-light';
+        }
+
+
+        return Button(action.label, { class: 'alert-action'+classes })
+            .variant(action.variant || $desc.variant || 'info').nd.onClick(function() {
+                action.handler.call(this, ...arguments, instance);
+            });
+    });
+
+    return Div({class: 'alert-footer'}, actions);
+}
+
+const buildClose = ($desc, instance) => {
+   return Button('×', { class: 'alert-close' })
+       .nd.onClick(() => {
+           instance.emit('close');
+           instance.hide();
+       });
+}

package/src/ui/components/alert/alert.css

@@ -0,0 +1,163 @@
+:root {
+    --alert-padding: var(--space-comfortable);
+    --alert-radius: var(--radius-card);
+    --alert-gap: var(--space-cozy);
+    --alert-font-size: var(--description-size);
+    --alert-title-size: var(--text-size);
+    --alert-title-weight: 600;
+    --alert-border-width: 1px;
+
+    --alert-color-info: var(--color-info);
+    --alert-color-success: var(--color-success);
+    --alert-color-warning: var(--color-warning);
+    --alert-color-danger: var(--color-danger);
+    --alert-color-error: var(--color-danger);
+
+    --close-alert-btn-width: 25px;
+    --close-alert-btn-height: 25px;
+    --close-alert-btn-background: none;
+}
+
+.alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--alert-gap);
+    padding: var(--alert-padding);
+    border-radius: var(--alert-radius);
+    font-size: var(--alert-font-size);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.alert-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+}
+
+.alert-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-cozy);
+}
+
+.alert-title {
+    font-size: var(--alert-title-size);
+    font-weight: var(--alert-title-weight);
+    line-height: 1.3;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+}
+
+.alert-content {
+    line-height: 1.6;
+}
+
+.alert-footer {
+    display: flex;
+    gap: var(--space-cozy);
+    margin-top: var(--space-cozy);
+}
+
+.alert-close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.6;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: var(--text-size);
+    color: inherit;
+    width: var(--close-alert-btn-width);
+    height: var(--close-alert-btn-height);
+    background: var(--close-alert-btn-background) !important;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.alert.is-filled {
+    &.is-info {
+        background: var(--alert-color-info);
+        color: var(--white);
+    }
+
+    &.is-success {
+        background: var(--alert-color-success);
+        color: var(--white);
+    }
+
+    &.is-warning {
+        background: var(--alert-color-warning);
+        color: var(--white);
+    }
+
+    &.is-danger,
+    &.is-error {
+        background: var(--alert-color-danger);
+        color: var(--white);
+    }
+}
+
+.alert.is-bordered {
+    border: var(--alert-border-width) solid currentColor;
+
+    &.is-info {
+        background: color-mix(in srgb, var(--alert-color-info) 10%, transparent);
+        color: var(--alert-color-info);
+    }
+
+    &.is-success {
+        background: color-mix(in srgb, var(--alert-color-success) 10%, transparent);
+        color: var(--alert-color-success);
+    }
+
+    &.is-warning {
+        background: color-mix(in srgb, var(--alert-color-warning) 10%, transparent);
+        color: var(--alert-color-warning);
+    }
+
+    &.is-danger,
+    &.is-error {
+        background: color-mix(in srgb, var(--alert-color-danger) 10%, transparent);
+        color: var(--alert-color-danger);
+    }
+}
+
+.alert.is-outline {
+    background: transparent;
+    border: var(--alert-border-width) solid currentColor;
+
+    &.is-info {
+        color: var(--alert-color-info);
+    }
+
+    &.is-success {
+        color: var(--alert-color-success);
+    }
+
+    &.is-warning {
+        color: var(--alert-color-warning);
+    }
+
+    &.is-danger,
+    &.is-error {
+        color: var(--alert-color-danger);
+    }
+}
+
+.alert.is-filled .alert-action {
+    --btn-color: currentColor;
+    --btn-border-color: rgba(255, 255, 255, 0.5);
+    color: currentColor;
+    border-color: var(--btn-border-color);
+}

package/src/ui/components/avatar/avata-group/AvatarGroupRender.js

@@ -0,0 +1,49 @@
+import {Div, Span} from '../../../../core/elements';
+import Avatar from '../../../../components/avatar/Avatar';
+import './avatar-group.css';
+
+const normalize = (item) => {
+    if(typeof item === 'string') {
+        return Avatar(item);
+    }
+    return item;
+};
+
+export default function AvatarGroupRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('avatar-group');
+
+    if($desc.overlap) {
+        props.style.add({'--avatar-group-overlap': '-' + $desc.overlap + 'px'});
+    }
+
+    const items = $desc.items || [];
+    const max   = $desc.max > 0 ? $desc.max : items.length;
+
+    const shown = items.slice(0, max).map(normalize);
+    const rest  = items.length - shown.length;
+
+    if(rest > 0) {
+        return Div(instance.resolveProps(), [...shown, buildMore(rest, $desc)]);
+    }
+
+    return Div(instance.resolveProps(), shown);
+}
+
+function buildMore(count, $desc) {
+    const firstItem = $desc.items[0];
+    const size  = firstItem?.$description?.size  || 'medium';
+    const shape = firstItem?.$description?.shape || 'circle';
+    const isClickable = $desc.onMoreClick ? ' is-clickable' : '';
+
+    const span = Span({
+        class: 'avatar-group-more is-' + size + ' is-' + shape + isClickable
+    }, '+' + count);
+
+    if($desc.onMoreClick) {
+        span.nd.onClick($desc.onMoreClick);
+    }
+
+    return span;
+}

package/src/ui/components/avatar/avata-group/avatar-group.css

@@ -0,0 +1,38 @@
+:root {
+    --avatar-group-overlap: -15px;
+    --avatar-group-more-text-color: var(--white);
+    --avatar-group-more-background-color: var(--gray-lite-4);
+}
+
+.avatar-group {
+    display: inline-flex;
+    align-items: center;
+}
+
+.avatar-group .avatar-wrapper,
+.avatar-group .avatar {
+    margin-left: var(--avatar-group-overlap, 0px);
+
+    &:first-child {
+        margin-left: 0;
+    }
+}
+.avatar-group .avatar {
+    border: 2px solid var(--background);
+}
+
+.avatar-group-more {
+    background: var(--avatar-group-more-background-color);
+    border: 2px solid var(--background);
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: var(--avatar-group-overlap, 0px);
+    color: var(--avatar-group-more-text-color);
+
+    &.is-clickable {
+        cursor: pointer;
+    }
+}

package/src/ui/components/avatar/avatar/AvatarRender.js

@@ -0,0 +1,87 @@
+import {Div, Img, Span} from '../../../../core/elements';
+import {classPropertyAccumulator} from "../../../../core/utils/property-accumulator";
+
+
+import './avatar.css';
+
+export default function AvatarRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('avatar');
+    props.class.add('is-' + ($desc.size || 'medium'));
+    props.class.add('is-' + ($desc.shape || 'circle'));
+
+    if($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    const style = {};
+
+    if($desc.color) {
+        style.background = $desc.color;
+    }
+
+    if($desc.textColor) {
+        style.color = $desc.textColor;
+    }
+
+    if(Object.keys(style).length) {
+        props.style.add(style);
+    }
+
+    const avatar = Div(instance.resolveProps(), buildContent($desc));
+
+    if(!$desc.status && !$desc.badge) {
+        return avatar;
+    }
+
+    const overlays = [];
+
+    if($desc.status) {
+        overlays.push(buildStatus($desc));
+    }
+
+    if($desc.badge) {
+        overlays.push(buildBadge($desc));
+    }
+
+    return Div({ class: 'avatar-wrapper' }, [avatar, ...overlays]);
+}
+
+function buildContent($desc) {
+    if($desc.src) {
+        return Img($desc.src, {
+            class: 'avatar-image',
+            alt: $desc.alt || $desc.name || '',
+        });
+    }
+
+    if($desc.initials || $desc.name) {
+        return Span({class: 'avatar-initials'}, $desc.initials || $desc.name.split(' ').map(n => n[0]).join(''));
+    }
+
+    if($desc.icon) {
+        return Span({class: 'avatar-icon'}, $desc.icon);
+    }
+
+    return null;
+}
+
+function buildStatus($desc) {
+    const statusClass = classPropertyAccumulator('avatar-status');
+
+    if($desc.status) {
+        statusClass.add($desc.status.transform((status) => 'is-' + status));
+    }
+    statusClass.add('is-' + ($desc.statusPosition || 'bottom-trailing'));
+
+    return Span({ class: statusClass.value() });
+}
+
+function buildBadge($desc) {
+    const badgeClass = ['avatar-badge'];
+
+    badgeClass.push('is-' + ($desc.badgePosition || 'top-trailing'));
+
+    return Span({class: badgeClass.join(' ')}, $desc.badge);
+}

package/src/ui/components/avatar/avatar/avatar.css

@@ -0,0 +1,189 @@
+:root {
+    --avatar-size-extra-small: 24px;
+    --avatar-size-small: 32px;
+    --avatar-size-medium: 40px;
+    --avatar-size-large: 56px;
+    --avatar-size-extra-large: 72px;
+
+    --avatar-font-size-extra-small: var(--hint-size);
+    --avatar-font-size-small: var(--note-size);
+    --avatar-font-size-medium: var(--description-size);
+    --avatar-font-size-large: var(--important-size);
+    --avatar-font-size-extra-large: var(--h3-font-size);
+
+    --avatar-status-size: 10px;
+    --avatar-status-offset: 1px;
+
+    --avatar-color-primary: var(--color-primary);
+    --avatar-color-secondary: var(--color-secondary);
+    --avatar-color-success: var(--color-success);
+    --avatar-color-danger: var(--color-danger);
+    --avatar-color-warning: var(--color-warning);
+    --avatar-color-info: var(--color-info);
+}
+
+.avatar, .avatar-group-more {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    font-weight: 500;
+    user-select: none;
+
+    &.is-extra-small {
+        width: var(--avatar-size-extra-small);
+        height: var(--avatar-size-extra-small);
+        font-size: var(--avatar-font-size-extra-small);
+    }
+
+    &.is-small {
+        width: var(--avatar-size-small);
+        height: var(--avatar-size-small);
+        font-size: var(--avatar-font-size-small);
+    }
+
+    &.is-medium {
+        width: var(--avatar-size-medium);
+        height: var(--avatar-size-medium);
+        font-size: var(--avatar-font-size-medium);
+    }
+
+    &.is-large {
+        width: var(--avatar-size-large);
+        height: var(--avatar-size-large);
+        font-size: var(--avatar-font-size-large);
+    }
+
+    &.is-extra-large {
+        width: var(--avatar-size-extra-large);
+        height: var(--avatar-size-extra-large);
+        font-size: var(--avatar-font-size-extra-large);
+    }
+
+    &.is-circle {
+        border-radius: 50%;
+    }
+
+    &.is-square {
+        border-radius: 0;
+    }
+
+    &.is-rounded {
+        border-radius: var(--radius-x);
+    }
+
+    &.is-primary {
+        background: var(--avatar-color-primary);
+        color: var(--white);
+    }
+
+    &.is-secondary {
+        background: var(--avatar-color-secondary);
+        color: var(--text-color);
+    }
+
+    &.is-success {
+        background: var(--avatar-color-success);
+        color: var(--white);
+    }
+
+    &.is-danger {
+        background: var(--avatar-color-danger);
+        color: var(--white);
+    }
+
+    &.is-warning {
+        background: var(--avatar-color-warning);
+        color: var(--white);
+    }
+
+    &.is-info {
+        background: var(--avatar-color-info);
+        color: var(--white);
+    }
+}
+
+.avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.avatar-status {
+    position: absolute;
+    width: var(--avatar-status-size);
+    height: var(--avatar-status-size);
+    border-radius: 50%;
+    border: 2px solid var(--background);
+
+    &.is-top-leading {
+        top: var(--avatar-status-offset);
+        left: var(--avatar-status-offset);
+    }
+
+    &.is-top-trailing {
+        top: var(--avatar-status-offset);
+        right: var(--avatar-status-offset);
+    }
+
+    &.is-bottom-leading {
+        bottom: var(--avatar-status-offset);
+        left: var(--avatar-status-offset);
+    }
+
+    &.is-bottom-trailing {
+        bottom: var(--avatar-status-offset);
+        right: var(--avatar-status-offset);
+    }
+
+    &.is-online {
+        background: var(--green);
+    }
+
+    &.is-offline {
+        background: var(--gray);
+    }
+
+    &.is-busy {
+        background: var(--red);
+    }
+
+    &.is-away {
+        background: var(--yellow);
+    }
+}
+
+.avatar-badge {
+    position: absolute;
+
+    &.is-top-leading {
+        top: 0;
+        left: 0;
+        transform: translate(-25%, -25%);
+    }
+
+    &.is-top-trailing {
+        top: 0;
+        right: 0;
+        transform: translate(25%, -25%);
+    }
+
+    &.is-bottom-leading {
+        bottom: 0;
+        left: 0;
+        transform: translate(-25%, 25%);
+    }
+
+    &.is-bottom-trailing {
+        bottom: 0;
+        right: 0;
+        transform: translate(25%, 25%);
+    }
+}

package/src/ui/components/badge/BadgeRender.js

@@ -0,0 +1,24 @@
+import {Span} from '../../../core/elements';
+import './badge.css';
+
+export default function BadgeRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('badge');
+    props.class.add('is-' + ($desc.appearance || 'filled'));
+    props.class.add('is-' + ($desc.variant || 'primary'));
+    props.class.add('is-' + ($desc.size || 'medium'));
+    props.class.add('is-' + ($desc.borderRadiusType || 'pill'));
+
+    if($desc.onClick) {
+        props.class.add('is-clickable');
+    }
+
+    const element = Span(instance.resolveProps(), $desc.content);
+
+    if($desc.onClick) {
+        element.nd.onClick($desc.onClick);
+    }
+
+    return element;
+}