fix(#182): fire event on change in mw-autocomplete

MaibornWolff · Jul 6, 2023 · 3d5a992 · 3d5a992
1 parent c9eedef
commit 3d5a992
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 43 deletions.
diff --git a/mwui-stencil/docs.json b/mwui-stencil/docs.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-06-23T11:41:02",
+  "timestamp": "2023-07-06T07:09:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -338,9 +338,9 @@
           "required": false
         },
         {
-          "name": "selected",
+          "name": "selection",
           "type": "string[]",
-          "mutable": false,
+          "mutable": true,
           "reflectToAttr": false,
           "docs": "Currently selected options",
           "docsTags": [],
@@ -393,7 +393,7 @@
       "methods": [],
       "events": [
         {
-          "event": "mwAutocompleteValueChanged",
+          "event": "selectionChanged",
           "detail": "string",
           "bubbles": true,
           "cancelable": true,
@@ -1175,6 +1175,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "height",
+          "type": "string",
+          "mutable": false,
+          "attr": "height",
+          "reflectToAttr": false,
+          "docs": "Height of image",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "src",
           "type": "string",
@@ -1773,20 +1789,20 @@
       "methods": [],
       "events": [
         {
-          "event": "mwChipListInputChange",
+          "event": "inputChange",
           "detail": "string",
           "bubbles": true,
           "cancelable": true,
-          "composed": false,
+          "composed": true,
           "docs": "Emits an event when value of input changes",
           "docsTags": []
         },
         {
-          "event": "mwChipListValueChanged",
+          "event": "valueChanged",
           "detail": "string[]",
           "bubbles": true,
           "cancelable": true,
-          "composed": false,
+          "composed": true,
           "docs": "Emits an event when its value changes",
           "docsTags": []
         }

diff --git a/mwui-stencil/src/components.d.ts b/mwui-stencil/src/components.d.ts
@@ -101,7 +101,7 @@ export namespace Components {
     /**
      * Currently selected options
      */
-    selected: string[];
+    selection: string[];
     /**
      * HTML Input type
      */
@@ -1192,7 +1192,7 @@ declare namespace LocalJSX {
     /**
      * Emits an event when its value changes
      */
-    onMwAutocompleteValueChanged?: (event: MwAutocompleteCustomEvent<string>) => void;
+    onSelectionChanged?: (event: MwAutocompleteCustomEvent<string>) => void;
     /**
      * Shows how many options the user has selected as well as the allowed maximum. Only works, if `maximum` prop is defined.
      */
@@ -1212,7 +1212,7 @@ declare namespace LocalJSX {
     /**
      * Currently selected options
      */
-    selected?: string[];
+    selection?: string[];
     /**
      * HTML Input type
      */

diff --git a/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.docs.mdx b/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.docs.mdx
@@ -6,6 +6,16 @@ The autocomplete allows the user to pick from a predetermined list of options, o
 
 The dropdown options should be placed in the `dropdown-menu` slot. Additionally an icon can be added to the start of the input box using the `icon-start` slot.
 
+## Listen to changes
+
+Whenever the selection is updated, a `selectionChanged` event is fired. The currently selected items can be retrieved from the element, like `event.target.selection`.
+
+```javascript
+document.getElementById("my-autocomplete").addEventListener("selectionChanged", event => {
+  console.log(event.target.selection); // yields an array of strings
+});
+```
+
 <ArgsTable of="mw-autocomplete" />
 
 ## Examples

diff --git a/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.spec.tsx b/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.spec.tsx
@@ -1,4 +1,4 @@
-import { newSpecPage } from "@stencil/core/testing";
+import { SpecPage, newSpecPage } from "@stencil/core/testing";
 import { h } from "@stencil/core";
 import { MwAutocomplete } from "./mw-autocomplete";
 
@@ -7,7 +7,7 @@ describe("Given MwAutocomplete", () => {
     name: "some-name",
     label: "some-label",
     required: false,
-    selected: [],
+    selection: [],
   };
   const setup = async ({
     name,
@@ -18,8 +18,8 @@ describe("Given MwAutocomplete", () => {
     inline,
     required,
     disabled,
-    selected,
-  }: Pick<MwAutocomplete, "name" | "label" | "placeholder" | "helperText" | "hasError" | "inline" | "required" | "disabled" | "selected"> = defaultProps) => {
+    selection,
+  }: Pick<MwAutocomplete, "name" | "label" | "placeholder" | "helperText" | "hasError" | "inline" | "required" | "disabled" | "selection"> = defaultProps): Promise<SpecPage> => {
     return await newSpecPage({
       components: [MwAutocomplete],
       template: () => (
@@ -31,7 +31,7 @@ describe("Given MwAutocomplete", () => {
           has-error={hasError}
           inline={inline}
           required={required}
-          selected={selected}
+          selection={selection}
           disabled={disabled}
         ></mw-autcomplete>
       ),

diff --git a/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.tsx b/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.tsx
@@ -12,7 +12,7 @@ export class MwAutocomplete {
   /**
    * Emits an event when its value changes
    */
-  @Event({ bubbles: true, composed: false, eventName: "mwAutocompleteValueChanged" }) valueChanged: EventEmitter<string>;
+  @Event({ bubbles: true, composed: false, eventName: "selectionChanged" }) valueChanged: EventEmitter<string>;
   /**
    * HTML Input type
    */
@@ -80,16 +80,17 @@ export class MwAutocomplete {
   /**
    * Currently selected options
    */
-  @Prop({ reflect: true, mutable: true }) selected: string[] = [];
-  @Watch("selected")
-  onSelectedChange(selected: string[]): void {
+  @Prop({ reflect: true, mutable: true }) selection: string[] = [];
+  @Watch("selection")
+  onSelectedChange(selection: string[]): void {
     if (!this.canAddToValues()) {
       this.hostElement.querySelectorAll("mw-menu-item").forEach(item => {
         item.setAttribute("disabled", `true`);
       });
     } else {
-      this.setItemDisabledState(selected);
+      this.setItemDisabledState(selection);
     }
+    this.valueChanged.emit();
   }
 
   @State() focused = false;
@@ -134,19 +135,19 @@ export class MwAutocomplete {
       return;
     }
 
-    this.selected = [...this.selected, value];
+    this.selection = [...this.selection, value];
     this.removeDropdownFilter();
   };
 
-  private setItemDisabledState = (selected: string[]): void => {
+  private setItemDisabledState = (selection: string[]): void => {
     this.hostElement.querySelectorAll("mw-menu-item").forEach(item => {
-      const isDisabled = selected.includes(item.getAttribute("value"));
+      const isDisabled = selection.includes(item.getAttribute("value"));
       item.setAttribute("disabled", `${isDisabled}`);
     });
   };
 
   private handleChipListValueChange = (event: MwChipInputCustomEvent<string[]>): void => {
-    this.selected = event.detail;
+    this.selection = event.detail;
   };
 
   private filterDropdownOptions = (value: string | number): void => {
@@ -174,7 +175,7 @@ export class MwAutocomplete {
   };
 
   private canAddToValues = (): boolean => {
-    return !this.maximum || this.selected?.length < this.maximum;
+    return !this.maximum || this.selection?.length < this.maximum;
   };
 
   render() {
@@ -198,7 +199,7 @@ export class MwAutocomplete {
                   disabled={this.disabled}
                   hasError={this.hasError}
                   maximum={this.maximum}
-                  selectedChips={this.selected}
+                  selectedChips={this.selection}
                   onFocus={this.onFocus}
                   onBlur={this.onBlur}
                   onValueChanged={this.handleChipListValueChange}
@@ -226,7 +227,7 @@ export class MwAutocomplete {
                   name={this.name}
                   hasError={this.hasError}
                   placeholder={this.placeholder}
-                  onMwTextfieldValueChanged={this.onInputChange.bind(this)}
+                  onMwTextfieldValueChanged={this.onInputChange}
                   slot="anchor"
                 >
                   {this.hasIconStartSlot && (
@@ -261,7 +262,7 @@ export class MwAutocomplete {
           </div>
           <div class="helper-text-container">
             <mw-helper-text helperText={this.helperText} hasError={this.hasError} />
-            {this.maximum && this.optionCounter && <mw-helper-text helperText={`${this.selected.length}/${this.maximum}`} />}
+            {this.maximum && this.optionCounter && <mw-helper-text helperText={`${this.selection.length}/${this.maximum}`} />}
           </div>
         </div>
       </Host>

diff --git a/mwui-stencil/src/components/mw-autocomplete/readme.md b/mwui-stencil/src/components/mw-autocomplete/readme.md
@@ -20,15 +20,15 @@
 | `placeholder`       | `placeholder`         | Placeholder to be displayed                                                                                            | `string`           | `undefined`                                    |
 | `readOnly`          | `read-only`           | Whether user can't type in input field                                                                                 | `boolean`          | `false`                                        |
 | `required`          | `required`            | Mark input as required                                                                                                 | `boolean`          | `false`                                        |
-| `selected`          | --                    | Currently selected options                                                                                             | `string[]`         | `[]`                                           |
+| `selection`         | --                    | Currently selected options                                                                                             | `string[]`         | `[]`                                           |
 | `type`              | `type`                | HTML Input type                                                                                                        | `string`           | `"text"`                                       |
 | `value`             | `value`               | input field value                                                                                                      | `number \| string` | `undefined`                                    |
 
 ## Events
 
-| Event                        | Description                           | Type                  |
-| ---------------------------- | ------------------------------------- | --------------------- |
-| `mwAutocompleteValueChanged` | Emits an event when its value changes | `CustomEvent<string>` |
+| Event              | Description                           | Type                  |
+| ------------------ | ------------------------------------- | --------------------- |
+| `selectionChanged` | Emits an event when its value changes | `CustomEvent<string>` |
 
 ## Dependencies
 

diff --git a/mwui-stencil/src/components/mw-card-image/readme.md b/mwui-stencil/src/components/mw-card-image/readme.md
@@ -1,18 +1,15 @@
 # mw-card-image
 
-
-
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
 | Property | Attribute | Description            | Type     | Default     |
 | -------- | --------- | ---------------------- | -------- | ----------- |
 | `alt`    | `alt`     | Alt text for the image | `string` | `undefined` |
+| `height` | `height`  | Height of image        | `string` | `undefined` |
 | `src`    | `src`     | Image source           | `string` | `undefined` |
 
+---
 
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/mwui-stencil/src/components/mw-chip-input/readme.md b/mwui-stencil/src/components/mw-chip-input/readme.md
@@ -21,10 +21,10 @@
 
 ## Events
 
-| Event                    | Description                                | Type                    |
-| ------------------------ | ------------------------------------------ | ----------------------- |
-| `mwChipListInputChange`  | Emits an event when value of input changes | `CustomEvent<string>`   |
-| `mwChipListValueChanged` | Emits an event when its value changes      | `CustomEvent<string[]>` |
+| Event          | Description                                | Type                    |
+| -------------- | ------------------------------------------ | ----------------------- |
+| `inputChange`  | Emits an event when value of input changes | `CustomEvent<string>`   |
+| `valueChanged` | Emits an event when its value changes      | `CustomEvent<string[]>` |
 
 ## Dependencies
 

diff --git a/mwui-stencil/src/index.html b/mwui-stencil/src/index.html
@@ -528,6 +528,11 @@ <h2>Login</h2>
     const cards = document.getElementsByTagName("mw-card");
     const chips = document.getElementsByTagName("mw-chip");
     const tabs = document.getElementsByTagName("mw-tabs");
+    const autocomplete = document.getElementsByTagName("mw-autocomplete")[0];
+
+    autocomplete.addEventListener("change", event => {
+      console.log("autocomplete changed", event.target.selection);
+    });
 
     for (var i = 0; i < cards.length; i++) {
       cards[i].addEventListener("click", event => {