@umbraco-ui/uui-tabs 0.0.19 → 0.1.0

package/README.md

@@ -2,6 +2,10 @@
 
 [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-tabs?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-tabs)
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-tabs)
+
 ## Installation
 
 ### ES imports

package/custom-elements.json

@@ -10,6 +10,12 @@
           "type": "CSSResult[]",
           "default": "[null]"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default slot for the tab group"
+        }
       ]
     },
     {
@@ -25,6 +31,7 @@
         },
         {
           "name": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
@@ -50,6 +57,7 @@
         {
           "name": "active",
           "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
@@ -63,7 +71,7 @@
       "slots": [
         {
           "name": "",
-          "description": "for tab content."
+          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -102,6 +110,7 @@
         },
         {
           "name": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
@@ -127,6 +136,7 @@
         {
           "name": "active",
           "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
@@ -140,7 +150,7 @@
       "slots": [
         {
           "name": "",
-          "description": "for tab content."
+          "description": "Override the default label"
         }
       ],
       "cssProperties": [

package/lib/index.js

@@ -1,7 +1,7 @@
 import { ActiveMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
-import { property, queryAssignedNodes } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 var __defProp$1 = Object.defineProperty;
@@ -142,10 +142,14 @@ let UUITabGroupElement = class extends LitElement {
     this.tabElements = [];
     this.onTabActive = (e) => {
       const selectedElement = e.target;
-      selectedElement.active = true;
+      if (this.elementIsTabLike(selectedElement)) {
+        selectedElement.active = true;
+      }
       const filtered = this.tabElements.filter((el) => el !== selectedElement);
       filtered.forEach((el) => {
-        el.active = false;
+        if (this.elementIsTabLike(el)) {
+          el.active = false;
+        }
       });
     };
   }
@@ -153,16 +157,17 @@ let UUITabGroupElement = class extends LitElement {
     this.tabElements = this.slotNodes ? this.slotNodes : [];
   }
   onSlotChange() {
+    this.tabElements.forEach((el) => {
+      el.removeEventListener("click", this.onTabActive);
+    });
     this.setTabArray();
-    if (this.tabElements) {
-      this.tabElements.forEach((el) => {
-        el.removeEventListener("click", this.onTabActive);
-      });
-    }
     this.tabElements.forEach((el) => {
       el.addEventListener("click", this.onTabActive);
     });
   }
+  elementIsTabLike(el) {
+    return el instanceof UUITabElement || "active" in el;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute("role"))
@@ -189,7 +194,10 @@ UUITabGroupElement.styles = [
     `
 ];
 __decorateClass([
-  queryAssignedNodes(void 0, true, "uui-tab")
+  queryAssignedElements({
+    flatten: true,
+    selector: "uui-tab, [uui-tab], [role=tab]"
+  })
 ], UUITabGroupElement.prototype, "slotNodes", 2);
 UUITabGroupElement = __decorateClass([
   defineElement("uui-tab-group")

package/lib/uui-tab-group.element.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 /**
  *  @element uui-tab-group
+ *  @slot - Default slot for the tab group
  */
 export declare class UUITabGroupElement extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -9,6 +10,7 @@ export declare class UUITabGroupElement extends LitElement {
     private setTabArray;
     private onSlotChange;
     private onTabActive;
+    private elementIsTabLike;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/lib/uui-tab.element.d.ts

@@ -8,7 +8,6 @@ declare const UUITabElement_base: (new (...args: any[]) => import("@umbraco-ui/u
  * @cssprop --uui-tab-text-active - Define the tab text active color
  * @cssprop --uui-tab-background - Define the tab group background color
  * @cssprop --uui-tab-divider - Define the tab dividers color
- * @slot for tab content.
  */
 export declare class UUITabElement extends UUITabElement_base {
     static styles: import("lit").CSSResult[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "0.0.19",
+  "version": "0.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.1.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }