fix(#89): add custom event to mw-tabs and improve docs on how to hand…

…le tab changes

mwui-angular/projects/mwui-component-library/src/lib/stencil-generated/components.ts

@@ -709,7 +709,12 @@ export class MwTab {
     }
 }
 
-export declare interface MwTabs extends Components.MwTabs {}
+export declare interface MwTabs extends Components.MwTabs {
+    /**
+     * Emits an event when tab is changed
+     */
+    emitter: EventEmitter<CustomEvent<{ selected: number }>>;
+}
 
 @ProxyCmp({
     defineCustomElementFn: undefined,
@@ -726,6 +731,7 @@ export class MwTabs {
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ["emitter"]);
     }
 }
 

mwui-stencil/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-02T11:03:55",
+  "timestamp": "2023-03-08T09:54:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.2",
@@ -3029,7 +3029,17 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "emitter",
+          "detail": "{ selected: number; }",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": false,
+          "docs": "Emits an event when tab is changed",
+          "docsTags": []
+        }
+      ],
       "listeners": [],
       "styles": [],
       "slots": [],

mwui-stencil/src/components.d.ts

@@ -654,6 +654,10 @@ export interface MwSwitchCustomEvent<T> extends CustomEvent<T> {
   detail: T;
   target: HTMLMwSwitchElement;
 }
+export interface MwTabsCustomEvent<T> extends CustomEvent<T> {
+  detail: T;
+  target: HTMLMwTabsElement;
+}
 export interface MwTextfieldCustomEvent<T> extends CustomEvent<T> {
   detail: T;
   target: HTMLMwTextfieldElement;
@@ -1441,6 +1445,10 @@ declare namespace LocalJSX {
     selected?: boolean;
   }
   interface MwTabs {
+    /**
+     * Emits an event when tab is changed
+     */
+    onEmitter?: (event: MwTabsCustomEvent<{ selected: number }>) => void;
     /**
      * Dictates which tab is pre-selected. Omit if no tab should be pre-selected.
      */

mwui-stencil/src/components/mw-tabs/mw-tabs.docs.mdx

@@ -1,17 +1,33 @@
-import { Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs";
 
 # Tabs
 
 `mw-tabs` is a wrapper for a group of `mw-tab` components and allows the user to switch the active tab by pressing on it.
-
 The amount of tabs and their appearance is determined by how many `mw-tab` components were placed in the `mw-tabs` slot.
 
 The `selected` prop determines which tab is enabled by default.
-
-<ArgsTable of="mw-tabs" />
-
-### Default
+A `mw-tab` does not represent tab content but only the selectable tab in the navigation. Implementing behaviour to switch between contents by using `mw-tabs` is up to the application using it.
 
 <Canvas>
   <Story id="components-tabs--default" />
 </Canvas>
+
+### Listen to Tab changes
+
+Selecting one of the tabs fires a `click` Event containing the current `selected` property.
+
+```javascript
+import type { MwCheckboxCustomEvent } from "@maibornwolff/mwui-stencil/dist/types/components";
+
+const onClick = (event: MwTabsCustomEvent<number>) => {
+  console.log("tabs changed/clicked", event.target.selected);
+};
+```
+
+```javascript
+document.getElementsByTagName("mw-tabs")[0].addEventListener("click", event => {
+  console.log(event.target.selected);
+});
+```
+
+<ArgsTable of="mw-tabs" />

mwui-stencil/src/components/mw-tabs/mw-tabs.tsx

@@ -1,4 +1,5 @@
 import { Component, h, Element, Prop, State } from "@stencil/core";
+import { Event, EventEmitter } from "@stencil/core/internal";
 
 @Component({
   tag: "mw-tabs",
@@ -17,6 +18,21 @@ export class MwTabs {
   @Prop({ mutable: true, reflect: true }) selected: number | null = null;
   @State() tabs = [];
 
+  /**
+   * Emits an event when tab is changed
+   */
+  @Event({
+    bubbles: true,
+    cancelable: false,
+    composed: false,
+  })
+  emitter: EventEmitter<{ selected: number }>;
+
+  private handleClick(key: number): void {
+    this.selected = key;
+    this.emitter.emit({ selected: key });
+  }
+
   componentWillRender(): void {
     this.tabs = [];
     for (let i = 0; i < this.host.children.length; i++) {
@@ -35,7 +51,7 @@ export class MwTabs {
     return (
       <div test-id={this.testId} class="mw-tabs">
         {this.tabs.map((item, key) => (
-          <mw-tab key={key} icon={item.icon} label={item.label} selected={item.selected} disabled={item.disabled} onClick={() => (this.selected = key)}></mw-tab>
+          <mw-tab key={key} icon={item.icon} label={item.label} selected={item.selected} disabled={item.disabled} onClick={() => this.handleClick(key)}></mw-tab>
         ))}
       </div>
     );

mwui-stencil/src/components/mw-tabs/readme.md

@@ -9,6 +9,12 @@
 | `selected` | `selected` | Dictates which tab is pre-selected. Omit if no tab should be pre-selected. | `number` | `null`      |
 | `testId`   | `test-id`  | Test Id                                                                    | `string` | `undefined` |
 
+## Events
+
+| Event     | Description                        | Type                                 |
+| --------- | ---------------------------------- | ------------------------------------ |
+| `emitter` | Emits an event when tab is changed | `CustomEvent<{ selected: number; }>` |
+
 ## Dependencies
 
 ### Depends on

mwui-stencil/src/index.html

@@ -434,6 +434,7 @@ <h2>App Bar</h2>
   <script>
     const cards = document.getElementsByTagName("mw-card");
     const chips = document.getElementsByTagName("mw-chip");
+    const tabs = document.getElementsByTagName("mw-tabs");
 
     for (var i = 0; i < cards.length; i++) {
       cards[i].addEventListener("click", event => {
@@ -454,5 +455,11 @@ <h2>App Bar</h2>
         console.log("chip: toggled", event);
       });
     }
+
+    for (var i = 0; i < tabs.length; i++) {
+      tabs[i].addEventListener("click", event => {
+        console.log("tabs clicked", event, event.detail);
+      });
+    }
   </script>
 </html>

mwui-vue/src/components.ts

@@ -100,7 +100,7 @@ export const MwSwitch = /*@__PURE__*/ defineContainer<JSX.MwSwitch>("mw-switch",
 
 export const MwTab = /*@__PURE__*/ defineContainer<JSX.MwTab>("mw-tab", undefined, ["selected", "icon", "label", "disabled"]);
 
-export const MwTabs = /*@__PURE__*/ defineContainer<JSX.MwTabs>("mw-tabs", undefined, ["testId", "selected"]);
+export const MwTabs = /*@__PURE__*/ defineContainer<JSX.MwTabs>("mw-tabs", undefined, ["testId", "selected", "emitter"]);
 
 export const MwTextfield = /*@__PURE__*/ defineContainer<JSX.MwTextfield>("mw-textfield", undefined, [
     "type",