Merge pull request #135 from umbraco/feature/uui-form-item

UUI-Form-item

Author: iOvergaard

.gitignore

@@ -34,6 +34,7 @@ out-css
 *.log
 .eslintcache
 *.tgz
+.turbo
 
 # old source
 /src

package-lock.json

@@ -0,0 +1,17 @@
+import { FormControlMixinInterface } from '../mixins';
+import { UUIEvent } from './UUIEvent';
+
+export class UUIFormControlEvent extends UUIEvent<
+  {},
+  FormControlMixinInterface
+> {
+  constructor(evName: string, eventInit: any | null = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
+
+  public static readonly VALID = 'valid';
+  public static readonly INVALID = 'invalid';
+}

packages/uui-base/lib/events/UUIFormControlEvent.ts

@@ -1,2 +1,3 @@
 export * from './UUIEvent';
+export * from './UUIFormControlEvent';
 export * from './UUISelectableEvent';

packages/uui-base/lib/events/index.ts

@@ -1,16 +1,18 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { UUIFormControlEvent } from '../events';
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
-// TODO: make t possible to define FormDataEntryValue type.
-export declare abstract class FormControlMixinInterface {
+// TODO: make it possible to define FormDataEntryValue type.
+export declare abstract class FormControlMixinInterface extends LitElement {
   formAssociated: boolean;
   get value(): FormDataEntryValue;
   set value(newValue: FormDataEntryValue);
   name: string;
   formResetCallback(): void;
-  checkValidity: Function;
+  checkValidity: () => boolean;
+  get validationMessage(): string;
   protected _value: FormDataEntryValue;
   protected _internals: any;
   protected abstract getFormElement(): HTMLElement | undefined;
@@ -204,14 +206,26 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
 
       const hasError = Object.values(this._validityState).includes(true);
 
-      if (hasError === false) {
+      if (hasError) {
+        this.dispatchEvent(
+          new UUIFormControlEvent(UUIFormControlEvent.INVALID)
+        );
+      } else {
         this._internals.setValidity({});
+        this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));
       }
     }
 
     updated(changedProperties: Map<string | number | symbol, unknown>) {
       super.updated(changedProperties);
       this._runValidators();
+      /*
+      if(changedProperties.has('pristine')) {
+        if(changedProperties.get('pristine') === false) {
+          this._internals.reportValidity();
+        }
+      }
+      */
     }
 
     private _onFormSubmit = () => {
@@ -237,6 +251,10 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
     public checkValidity() {
       return this._internals?.checkValidity();
     }
+
+    get validationMessage() {
+      return this._internals?.validationMessage;
+    }
   }
   return FormControlMixinClass as unknown as Constructor<FormControlMixinInterface> &
     T;

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -148,7 +148,11 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
     this.checked = this.hasAttribute('checked');
   }
 
-  protected firstUpdated(): void {
+  protected firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+
     const labelEl = this.shadowRoot?.querySelector('label') as HTMLLabelElement;
 
     // hide outline if mouse-interaction:

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -166,6 +166,7 @@
   --uui-color-grey-dark: color($grey blackness(+ 10%));
   --uui-color-grey-dimmed: color($grey saturation(- 100%) blackness(+ 4%));
 
+  /** not begin used currently. */
   $dusty-grey: #9b9b9b;
   --uui-color-dusty-grey: $dusty-grey;
   --uui-color-dusty-grey-light: color($dusty-grey lightness(+ 8%));

packages/uui-css/lib/custom-properties/colors.css

@@ -0,0 +1,31 @@
+# uui-form-layout-item
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-form-layout-item?logoColor=%231B264F)
+
+Umbraco style uui-form-layout-item component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-form-layout-item
+```
+
+Import the registration of `<uui-form-layout-item>` via:
+
+```javascript
+import '@umbraco-ui/uui-form-layout-item/';
+```
+
+When looking to leverage the `UUIFormLayoutItemElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIFormLayoutItemElement } from '@umbraco-ui/uui-form-layout-item';
+```
+
+## Usage
+
+```html
+<uui-form-layout-item></uui-form-layout-item>
+```

packages/uui-form-layout-item/README.md

@@ -0,0 +1 @@
+export * from './uui-form-layout-item.element';

packages/uui-form-layout-item/lib/index.ts

@@ -0,0 +1,89 @@
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+// TODO: Make sure validation messages can be seen for the whole Form Item. Make them follow the screen if form controls are taller than available screen height.
+
+/**
+ * @element uui-form-layout-item
+ * @description - Form item composes label, input and validation-messages in a proper layout.
+ * @slot - for button contents
+ * @slot message - for extras in the messages container
+ */
+
+@defineElement('uui-form-layout-item')
+export class UUIFormLayoutItemElement extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: block;
+        margin-top: var(--uui-size-space-5);
+        margin-bottom: var(--uui-size-space-5);
+      }
+      #label {
+        margin-top: -5px;
+        margin-bottom: 5px;
+      }
+      #description {
+        color: var(--uui-interface-contrast-disabled);
+        font-size: var(--uui-type-small-size);
+      }
+      #label + #description {
+        margin-top: -8px;
+        min-height: 8px;
+      }
+    `,
+  ];
+  /*
+  @property({type: String})
+  label: string | null = null;
+  */
+
+  @property({ type: String })
+  description: string | null = null;
+
+  @state()
+  private _labelSlotHasContent = false;
+
+  private _labelSlotChanged = (e: Event) => {
+    this._labelSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
+
+  @state()
+  private _descriptionSlotHasContent = false;
+
+  private _descriptionSlotChanged = (e: Event) => {
+    this._descriptionSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
+
+  render() {
+    return html`
+      <div id="label" style=${this._labelSlotHasContent ? '' : 'display: none'}>
+        <slot name="label" @slotchange=${this._labelSlotChanged}></slot>
+      </div>
+      <div
+        id="description"
+        style=${this._descriptionSlotHasContent || this.description !== null
+          ? ''
+          : 'display: none'}>
+        ${this.description}
+        <slot
+          name="description"
+          @slotchange=${this._descriptionSlotChanged}></slot>
+      </div>
+      <uui-form-validation-message>
+        <slot></slot>
+        <slot name="message" slot="message"></slot>
+      </uui-form-validation-message>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-form-layout-item': UUIFormLayoutItemElement;
+  }
+}