@umbraco-ui/uui-box - npm Package Compare versions

Comparing version 1.6.0-rc.1 to 1.6.0-rc.2

custom-elements.json

@@ -7,7 +7,7 @@ {
       "path": "./lib/uui-box.element.ts",
-      "description": "A box for grouping elements",
+      "description": "A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.",
       "attributes": [
         {
           "name": "headline",
-          "description": "Headline for this box, can also be set via the 'box' slot.",
+          "description": "Headline for this box, can also be set via the `headline` slot.",
           "type": "string | null",
@@ -18,3 +18,3 @@ "default": "\"null\""
           "name": "headline-variant",
-          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)",
+          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)",
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
@@ -28,3 +28,3 @@ "default": "\"\\\"h5\\\"\""
           "attribute": "headline",
-          "description": "Headline for this box, can also be set via the 'box' slot.",
+          "description": "Headline for this box, can also be set via the `headline` slot.",
           "type": "string | null",
@@ -36,3 +36,3 @@ "default": "\"null\""
           "attribute": "headline-variant",
-          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)",
+          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)",
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
@@ -54,5 +54,9 @@ "default": "\"\\\"h5\\\"\""
           "name": "header",
-          "description": "header area, use this for things that is not the headline but located in the header."
+          "description": "header area, use this for things that are not the headline but are located in the header."
         },
         {
+          "name": "header-actions",
+          "description": "right-side of the box header, use this to append some actions that are general for the topic of this box."
+        },
+        {
           "name": "",
@@ -59,0 +63,0 @@ "description": "area for the content of the box"

lib/index.js

@@ -18,2 +18,5 @@ import { css, LitElement } from 'lit';
 };
+function slotHasContent(target) {
+  return target ? target.assignedNodes({ flatten: true }).length > 0 : false;
+}
 let UUIBoxElement = class extends LitElement {
@@ -26,8 +29,12 @@ constructor() {
     this._headlineSlotChanged = (e) => {
-      this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+      this._headlineSlotHasContent = slotHasContent(e.target);
     };
     this._headerSlotHasContent = false;
     this._headerSlotChanged = (e) => {
-      this._headerSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+      this._headerSlotHasContent = slotHasContent(e.target);
     };
+    this._headerActionsSlotHasContent = false;
+    this._headerActionsSlotChanged = (e) => {
+      this._headerActionsSlotHasContent = slotHasContent(e.target);
+    };
   }
@@ -42,3 +49,3 @@ set headlineVariant(value) {
   /**
-   * Renders a header with the header-slot, headline and headline-slot within
+   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
    * @returns {TemplateResult}
@@ -52,3 +59,3 @@ * @protected
       class="uui-text"
-      style=${this._headerSlotHasContent || this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}>
+      style=${this._headerSlotHasContent || this._headlineSlotHasContent || this._headerActionsSlotHasContent || this.headline !== null ? "" : "display: none"}>
       <${this._headlineVariantTag}
@@ -62,2 +69,3 @@ id="headline"
       <slot name="header" @slotchange=${this._headerSlotChanged}></slot>
+      <slot name="header-actions" @slotchange=${this._headerActionsSlotChanged}></slot>
     </div>`;
@@ -83,3 +91,4 @@ }
       #header {
-        display: block;
+        display: flex;
+        column-gap: var(--uui-size-space-5,18px);
         border-bottom: 1px solid var(--uui-color-divider-standalone,#e9e9eb);
@@ -93,2 +102,7 @@ padding: var(--uui-size-space-4,12px) var(--uui-size-space-5,18px);
       }
+
+      slot[name='header-actions'] {
+        display: block;
+        margin-left: auto;
+      }
     `
@@ -111,2 +125,5 @@ ];
 ], UUIBoxElement.prototype, "_headerSlotHasContent", 2);
+__decorateClass([
+  state()
+], UUIBoxElement.prototype, "_headerActionsSlotHasContent", 2);
 UUIBoxElement = __decorateClass([
@@ -113,0 +130,0 @@ defineElement("uui-box")

lib/uui-box.element.d.ts

 import { LitElement } from 'lit';
 import type { InterfaceHeading } from '@umbraco-ui/uui-base/lib';
 /**
- *  A box for grouping elements
+ *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.
  *  @element uui-box
  *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.
- *  @slot header - header area, use this for things that is not the headline but located in the header.
+ *  @slot header - header area, use this for things that are not the headline but are located in the header.
+ *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.
  *  @slot - area for the content of the box
@@ -14,3 +15,3 @@ *  @cssprop --uui-box-default-padding - overwrite the box padding
     /**
-     * Headline for this box, can also be set via the 'box' slot.
+     * Headline for this box, can also be set via the `headline` slot.
      * @type string
@@ -23,3 +24,3 @@ * @attr
      * Changes the headline variant for accessibility for this box.
-     * Notice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)
+     * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)
      * @type {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"}
@@ -35,4 +36,6 @@ * @attr
     private _headerSlotChanged;
+    private _headerActionsSlotHasContent;
+    private _headerActionsSlotChanged;
     /**
-     * Renders a header with the header-slot, headline and headline-slot within
+     * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
      * @returns {TemplateResult}
@@ -39,0 +42,0 @@ * @protected

package.json

 {
   "name": "@umbraco-ui/uui-box",
-  "version": "1.6.0-rc.1",
+  "version": "1.6.0-rc.2",
   "license": "MIT",
@@ -32,3 +32,3 @@ "description": "A box web component for grouping elements",
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.1",
+    "@umbraco-ui/uui-base": "1.6.0-rc.2",
     "@umbraco-ui/uui-css": "1.4.0"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "9708ccbac569560b716431080c782c5531c66ea5"
+  "gitHead": "5d4eefce4744802ab5bc40055b1a3136f0afc520"
 }

No alert changes

Improved metrics

Total package byte prevSize

11995

increased by11.44%

Lines of code

239

increased by10.65%

Worsened metrics

Number of downloads

920

decreased by-7.44%

Dependency changes

• + Added@umbraco-ui/uui-base@1.6.0-rc.2(transitive)

• - Removed@umbraco-ui/uui-base@1.6.0-rc.1(transitive)

• Updated@umbraco-ui/uui-base@1.6.0-rc.2