native-document 1.0.15 → 1.0.16-8.2

package/src/ui/components/accordion/accordion.css

@@ -0,0 +1,121 @@
+:root {
+    --accordion-border: var(--gray-lite-3);
+    --accordion-radius: var(--radius-card);
+    --accordion-font-size: var(--description-size);
+    --accordion-header-padding: var(--space-comfortable);
+    --accordion-content-padding: var(--space-comfortable);
+    --accordion-header-color: var(--text-color);
+    --accordion-header-color-hover: var(--text-color);
+    --accordion-header-bg-hover: var(--gray-lite-5);
+    --accordion-indicator-color: var(--gray);
+    --accordion-transition: 0.2s ease;
+}
+
+.accordion {
+    width: 100%;
+    font-size: var(--accordion-font-size);
+
+    &.is-bordered {
+        border: 1px solid var(--accordion-border);
+        border-radius: var(--accordion-radius);
+        overflow: hidden;
+
+        .accordion-item {
+            border-bottom: 1px solid var(--accordion-border);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
+    &.is-separated {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-cozy);
+
+        .accordion-item {
+            border: 1px solid var(--accordion-border);
+            border-radius: var(--accordion-radius);
+            overflow: hidden;
+        }
+    }
+
+    &.is-flush {
+        .accordion-item {
+            border-bottom: 1px solid var(--accordion-border);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .accordion-header {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .accordion-content {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+
+.accordion-item {
+    &.is-disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--accordion-header-padding);
+    cursor: pointer;
+    color: var(--accordion-header-color);
+    user-select: none;
+    transition: background var(--accordion-transition);
+
+    &:hover {
+        background: var(--accordion-header-bg-hover);
+        color: var(--accordion-header-color-hover);
+    }
+}
+
+.accordion-header-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.accordion-header-title {
+    flex: 1;
+    font-weight: 500;
+}
+
+.accordion-indicator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--accordion-indicator-color);
+    transition: transform var(--accordion-transition);
+    flex-shrink: 0;
+
+    &.is-expanded {
+        transform: rotate(180deg);
+    }
+}
+
+.accordion-content {
+    padding: var(--accordion-content-padding);
+    border-top: 1px solid var(--accordion-border);
+    overflow: hidden;
+}

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

@@ -0,0 +1,81 @@
+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,50 @@
+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);
+}