feat(ui/field): refactor with new prop and change event

Alwatr · Mar 6, 2023 · e78821d · e78821d
1 parent e57ae5a
commit e78821d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 38 deletions.
diff --git a/ui/ui-kit/src/radio-group/radio-group.ts b/ui/ui-kit/src/radio-group/radio-group.ts
@@ -1,12 +1,12 @@
-import {customElement, css, html, map, AlwatrBaseElement, property, nothing} from '@alwatr/element';
+import {customElement, css, html, map, AlwatrBaseElement, property, nothing, live} from '@alwatr/element';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'alwatr-radio-group': AlwatrFieldSet;
+    'alwatr-radio-group': AlwatrRadioGroup;
   }
 }
 
-export type RadioOption = {label: string; value?: string}
+export type RadioOption = {label: string; value: string};
 
 export type RadioGroupOptions = {
   title: string;
@@ -19,7 +19,7 @@ export type RadioGroupOptions = {
  * @attr {String} name
  */
 @customElement('alwatr-radio-group')
-export class AlwatrFieldSet extends AlwatrBaseElement {
+export class AlwatrRadioGroup extends AlwatrBaseElement {
   static override styles = css`
     :host {
       display: block;
@@ -70,27 +70,14 @@ export class AlwatrFieldSet extends AlwatrBaseElement {
     }
   `;
 
+  @property({type: Object})
+    name = 'unknown';
+
   @property({type: Object})
     options?: RadioGroupOptions;
 
-  name = this.getAttribute('name') ?? 'unknown';
-
-  get value(): string {
-    for (const inputElement of this.renderRoot.querySelectorAll('input')) {
-      if (inputElement.checked) return inputElement.value;
-    }
-    return '';
-  }
-  set value(name: string) {
-    for (const inputElement of this.renderRoot.querySelectorAll('input')) {
-      if (inputElement.name === name) {
-        inputElement.checked = true;
-      }
-      else {
-        inputElement.checked = false;
-      }
-    }
-  }
+  @property({type: String})
+    value?: string;
 
   override render(): unknown {
     this._logger.logMethod('render');
@@ -106,11 +93,25 @@ export class AlwatrFieldSet extends AlwatrBaseElement {
     const options = this.options;
     if (options == null) return nothing;
     return map(options.radioGroup, (radioItem, index) => {
-      const id: string = 'radioInput' + index;
+      const id: string = 'radioInput_' + index;
       return html`<div>
-        <input type="radio" id=${id} name=${this.name} value="${radioItem.value ?? radioItem.label}" />
+        <input
+          type="radio"
+          id=${id}
+          .name=${this.name}
+          .value=${radioItem.value}
+          .checked=${live(radioItem.value === this.value)}
+          @change=${this._inputChanged}
+        />
         <label for=${id}>${radioItem.label}</label>
       </div>`;
     });
   }
+
+  private _inputChanged(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    if (target == null) return;
+    this.value = target.value;
+    this.dispatchEvent(new CustomEvent('input-change'));
+  }
 }
diff --git a/ui/ui-kit/src/text-field/text-field.ts b/ui/ui-kit/src/text-field/text-field.ts
@@ -14,6 +14,7 @@ declare global {
 
 export type InputType =
   | 'text'
+  | 'textarea'
   | 'search'
   | 'tel'
   | 'url'
@@ -55,7 +56,8 @@ export class AlwatrTextField extends AlwatrSurface {
         --_surface-elevation: var(--sys-surface-elevation-0);
       }
 
-      input {
+      input,
+      textarea {
         display: block;
         padding: 0;
         font: inherit;
@@ -64,12 +66,23 @@ export class AlwatrTextField extends AlwatrSurface {
         border-radius: inherit;
         border: none;
         outline: transparent;
+        resize: none;
         text-align: inherit;
         background-color: transparent;
         color: var(--sys-color-on-surface);
         caret-color: var(--sys-color-primary);
       }
 
+      input[type='number'] {
+        -moz-appearance: textfield;
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
       /* So not group these selectors! */
       input::placeholder {
         font: inherit;
@@ -83,31 +96,34 @@ export class AlwatrTextField extends AlwatrSurface {
         font: inherit;
         color: var(--sys-color-on-surface-variant);
       }
-
-      input[type='number'] {
-        -moz-appearance: textfield;
+      textarea::placeholder {
+        font: inherit;
+        color: var(--sys-color-on-surface-variant);
       }
-
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
+      textarea::-webkit-input-placeholder {
+        font: inherit;
+        color: var(--sys-color-on-surface-variant);
+      }
+      textarea::-moz-placeholder {
+        font: inherit;
+        color: var(--sys-color-on-surface-variant);
       }
     `,
   ];
 
-  name = this.getAttribute('name') ?? 'unknown';
+  @property({type: Object})
+    name = 'unknown';
 
   @property({type: String})
     type: InputType = 'text';
 
   @property({type: String})
-    value = '';
+    value?: string;
 
   @property({type: String})
     placeholder = '';
 
-  inputElement: HTMLInputElement | null = null;
+  inputElement: HTMLInputElement | HTMLTextAreaElement | null = null;
 
   constructor() {
     super();
@@ -116,7 +132,19 @@ export class AlwatrTextField extends AlwatrSurface {
 
   override render(): unknown {
     this._logger.logMethod('render');
+    this.value ??= '';
+    if (this.type === 'textarea') {
+      return html`<textarea
+        .name=${this.name}
+        .placeholder=${this.placeholder}
+        .value=${live(this.value)}
+        .rows=${3}
+        @change=${this._inputChanged}
+      ></textarea>`;
+    }
+    // else
     return html`<input
+      .name=${this.name}
       .type=${this.type}
       .placeholder=${this.placeholder}
       .value=${live(this.value)}
@@ -126,12 +154,13 @@ export class AlwatrTextField extends AlwatrSurface {
 
   protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
-    this.inputElement = this.renderRoot.querySelector('input');
+    this.inputElement = this.renderRoot.querySelector('input, textarea');
     this.addEventListener('click', () => this.inputElement?.focus());
   }
 
   private _inputChanged(event: Event): void {
-    const target = event.target as HTMLInputElement;
+    this._logger.logMethod('_inputChanged');
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
     if (target == null) return;
     let inputValue = unicodeDigits.translate(target.value ?? '');
     if (this.type === 'number' || this.type === 'tel') {