native-document 1.0.138 → 1.0.140

package/src/ui/components/badge/badge.css

@@ -0,0 +1,168 @@
+:root {
+    --badge-height-small: 18px;
+    --badge-height-medium: 22px;
+    --badge-height-large: 28px;
+
+    --badge-padding-small: 0 var(--space-cozy);
+    --badge-padding-medium: 0 var(--space-cozy-comfortable);
+    --badge-padding-large: 0 var(--space-comfortable);
+
+    --badge-font-size-small: var(--diablo-size);
+    --badge-font-size-medium: var(--note-size);
+    --badge-font-size-large: var(--description-size);
+
+    --badge-color-primary: var(--color-primary);
+    --badge-color-secondary: var(--color-secondary);
+    --badge-color-success: var(--color-success);
+    --badge-color-danger: var(--color-danger);
+    --badge-color-warning: var(--color-warning);
+    --badge-color-info: var(--color-info);
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    white-space: nowrap;
+    line-height: 1;
+
+    &.is-small {
+        height: var(--badge-height-small);
+        padding: var(--badge-padding-small);
+        font-size: var(--badge-font-size-small);
+    }
+
+    &.is-medium {
+        height: var(--badge-height-medium);
+        padding: var(--badge-padding-medium);
+        font-size: var(--badge-font-size-medium);
+    }
+
+    &.is-large {
+        height: var(--badge-height-large);
+        padding: var(--badge-padding-large);
+        font-size: var(--badge-font-size-large);
+    }
+
+    &.is-pill {
+        border-radius: var(--radius-pill);
+    }
+
+    &.is-rounded {
+        border-radius: var(--radius-button);
+    }
+
+    &.is-circle {
+        border-radius: 50%;
+        padding: 0;
+        width: var(--badge-height-medium);
+
+        &.is-small {
+            width: var(--badge-height-small);
+        }
+
+        &.is-large {
+            width: var(--badge-height-large);
+        }
+    }
+
+    &.is-clickable {
+        cursor: pointer;
+    }
+}
+
+.badge.is-filled {
+    &.is-primary {
+        background: var(--badge-color-primary);
+        color: var(--white);
+    }
+
+    &.is-secondary {
+        background: var(--badge-color-secondary);
+        color: var(--text-color);
+    }
+
+    &.is-success {
+        background: var(--badge-color-success);
+        color: var(--white);
+    }
+
+    &.is-danger {
+        background: var(--badge-color-danger);
+        color: var(--white);
+    }
+
+    &.is-warning {
+        background: var(--badge-color-warning);
+        color: var(--white);
+    }
+
+    &.is-info {
+        background: var(--badge-color-info);
+        color: var(--white);
+    }
+}
+
+.badge.is-outline {
+    background: transparent;
+    border: 1px solid currentColor;
+
+    &.is-primary {
+        color: var(--badge-color-primary);
+    }
+
+    &.is-secondary {
+        color: var(--badge-color-secondary);
+    }
+
+    &.is-success {
+        color: var(--badge-color-success);
+    }
+
+    &.is-danger {
+        color: var(--badge-color-danger);
+    }
+
+    &.is-warning {
+        color: var(--badge-color-warning);
+    }
+
+    &.is-info {
+        color: var(--badge-color-info);
+    }
+}
+
+.badge.is-bordered {
+    border: 1px solid currentColor;
+
+    &.is-primary {
+        background: color-mix(in srgb, var(--badge-color-primary) 10%, transparent);
+        color: var(--badge-color-primary);
+    }
+
+    &.is-secondary {
+        background: color-mix(in srgb, var(--badge-color-secondary) 10%, transparent);
+        color: var(--badge-color-secondary);
+    }
+
+    &.is-success {
+        background: color-mix(in srgb, var(--badge-color-success) 10%, transparent);
+        color: var(--badge-color-success);
+    }
+
+    &.is-danger {
+        background: color-mix(in srgb, var(--badge-color-danger) 10%, transparent);
+        color: var(--badge-color-danger);
+    }
+
+    &.is-warning {
+        background: color-mix(in srgb, var(--badge-color-warning) 10%, transparent);
+        color: var(--badge-color-warning);
+    }
+
+    &.is-info {
+        background: color-mix(in srgb, var(--badge-color-info) 10%, transparent);
+        color: var(--badge-color-info);
+    }
+}

package/src/ui/components/breadcrumb/BreadcrumbRender.js

@@ -0,0 +1,43 @@
+import {Nav, OrderedList, ListItem, Span, Link, ForEachArray} from '../../../core/elements';
+import './breadcrumb.css';
+
+export default function BreadcrumbRender($desc, instance) {
+    const props = instance.getEditableProps();
+    props.class.add('breadcrumb');
+
+    return Nav(instance.resolveProps(),
+        OrderedList({ class: 'breadcrumb-list' },
+            ForEachArray($desc.items, (item) => buildItem(item, $desc, instance))
+        )
+    );
+}
+
+const buildSeparator = ($desc) => {
+    if($desc.renderSeparator) {
+        return $desc.renderSeparator();
+    }
+
+    return Span({class: 'breadcrumb-separator'}, $desc.separator || '/');
+};
+
+const buildItem = (item, $desc, instance) => {
+    if($desc.renderItem) {
+        return $desc.renderItem(item, instance);
+    }
+
+    const content = [];
+
+    if(item.href) {
+        const link = Link({ class: 'breadcrumb-link', href: item.href }, item.label);
+        link.nd.onClick((e) => {
+            instance.emit('clickItem', item);
+        });
+        content.push(link);
+    } else {
+        content.push(Span({class: 'breadcrumb-label'}, item.label));
+    }
+
+    content.push(buildSeparator($desc));
+
+    return ListItem({class: 'breadcrumb-item'}, content);
+};

package/src/ui/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,55 @@
+:root {
+    --breadcrumb-font-size: var(--description-size);
+    --breadcrumb-color: var(--gray);
+    --breadcrumb-color-active: var(--text-color);
+    --breadcrumb-color-hover: var(--color-primary);
+    --breadcrumb-separator-color: var(--gray-lite-2);
+    --breadcrumb-separator: '/';
+    --breadcrumb-gap: var(--space-cozy);
+}
+
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--breadcrumb-gap);
+    font-size: var(--breadcrumb-font-size);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--breadcrumb-gap);
+    color: var(--breadcrumb-color);
+
+    &:last-child {
+        color: var(--breadcrumb-color-active);
+        font-weight: 500;
+        pointer-events: none;
+    }
+
+    &:last-child .breadcrumb-separator {
+        display: none;
+    }
+}
+
+.breadcrumb-link {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--breadcrumb-color-hover);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+}
+
+.breadcrumb-separator {
+    color: var(--breadcrumb-separator-color);
+    margin-right: var(--breadcrumb-gap);
+    user-select: none;
+}

package/src/ui/components/button/ButtonRender.js

@@ -0,0 +1,65 @@
+import {Button as NativeButton, ShowIf, Span} from '../../../core/elements';
+import {Spinner} from "../../../components/spinner";
+
+import './button.css';
+
+export default function ButtonRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('btn');
+    props.class.add('is-' + ($desc.variant || 'secondary'));
+    props.class.add('is-' + ($desc.size || 'medium'));
+
+    if($desc.outline) {
+        props.class.add('is-outline');
+    }
+    if($desc.block) {
+        props.class.add('is-block');
+    }
+    if($desc.borderRadiusType) {
+        props.class.add('is-' + $desc.borderRadiusType);
+    }
+    if($desc.iconOnly) {
+        props.class.add('is-icon-only');
+    }
+
+    if($desc.loading) {
+        props.class.add('is-loading',  $desc.loading);
+    }
+    if($desc.disabled) {
+        props.class.add('is-disabled', $desc.disabled);
+    }
+
+    const content = buildContent($desc);
+
+    return NativeButton({
+        ...instance.resolveProps(),
+        type:     $desc.type || 'button',
+        disabled: $desc.disabled,
+    }, content);
+}
+
+function buildContent($desc) {
+    const content = [];
+
+    if($desc.loading) {
+        content.push(ShowIf($desc.loading, Spinner({ class: 'btn-spinner' })));
+    }
+
+    if($desc.icon && isIconBefore($desc.iconPosition)) {
+        content.push(Span({class: 'btn-icon'}, $desc.icon));
+    }
+
+    if($desc.label != null) {
+        content.push(Span({class: 'btn-label'}, $desc.label));
+    }
+
+    if($desc.icon && isIconAfter($desc.iconPosition)) {
+        content.push(Span({class: 'btn-icon'}, $desc.icon));
+    }
+
+    return content;
+}
+
+const isIconBefore = (position) => !position || position === 'leading' || position === 'top';
+const isIconAfter  = (position) => position === 'trailing' || position === 'bottom';