@3t-transform/threeteeui 0.0.9 → 0.0.11

package/dist/collection/components/molecules/tttx-form/tttx-form.css

@@ -0,0 +1,230 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.material-symbols-rounded {
+  font-family: "Material Symbols Rounded", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: #9e9e9e;
+}
+
+.icon-left,
+.icon-right {
+  flex-basis: 24px;
+}
+
+.icon-left span,
+.icon-right span {
+  font-size: 24px;
+  line-height: 24px;
+  text-align: center;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin-top: 4px;
+}
+
+.icon-left span {
+  margin-left: 4px;
+}
+
+.icon-right span {
+  margin-right: 4px;
+}
+
+.icon-right {
+  margin-top: 5px;
+  margin-right: 4px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
+}
+
+.iconleft .input {
+  padding-left: 4px;
+}
+
+.iconright .input {
+  padding-right: 4px;
+}
+
+.focused {
+  border-color: #1479c6;
+}
+
+.errormsg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  background-color: transparent;
+  height: 26px;
+  font-size: 14px;
+  border-radius: none;
+  z-index: 2;
+  color: #dc0000;
+}
+
+.errormsg .validationicon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  margin-right: 4px;
+  vertical-align: middle;
+  color: #dc0000;
+}
+
+.danger {
+  color: #dc0000;
+}
+
+.optional {
+  color: #757575;
+  font-weight: normal;
+}
+
+label.inputBlock {
+  display: block;
+  position: relative;
+  line-height: 21px;
+}
+
+label {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+input:not([type=submit]) {
+  font-family: "Roboto", serif;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 16px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+
+/* iPhone OS fix */
+input[type=date] {
+  background: white;
+  display: block;
+  min-width: calc(100% - 18px);
+  line-height: 37px;
+}
+
+input.invalid:invalid, input.standalone.invalid {
+  border: 1px solid #dc0000;
+}
+
+input ~ .errorBubble {
+  min-height: 27px;
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+input ~ .errorBubble:not(.visible) {
+  visibility: hidden;
+}
+
+input ~ .errorBubble span {
+  color: #dc0000;
+  font-size: 16px;
+  margin-right: 4px;
+  height: 16px;
+}
+
+input.invalid:invalid ~ .errorBubble {
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  visibility: visible;
+}
+
+input:focus {
+  border-color: #1479c6;
+}
+
+.button {
+  height: 36px;
+  padding: 8px 16px;
+  margin: 0;
+  background: transparent;
+  color: #212121;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.button:hover {
+  background: #f0f0f0;
+}
+
+.button:active {
+  background: #e3e3e3;
+}
+
+.primary-blue {
+  background: #1479c6;
+  border: 1px solid #1479c6;
+  color: white;
+}
+
+.primary-blue:hover {
+  background: #1169ba;
+}
+
+.primary-blue:active {
+  background: #0951a8;
+}
+
+.secondary-white {
+  background: white;
+  border: 1px solid #212121;
+}
+
+:host {
+  display: block;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+input[type=submit] {
+  margin-left: auto;
+}

package/dist/collection/components/molecules/tttx-form/tttx-form.js

@@ -1,60 +1,193 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class TttxForm {
   constructor() {
-    this.fetchFormData = () => {
-      let validForm = true;
-      const formData = {};
-      const elements = this.el.querySelectorAll(`[${this.dataAttribute}]`);
-      elements.forEach((element) => {
-        const inputElement = element;
-        validForm = validForm ? this.validateFormField(inputElement) : false;
-        formData[inputElement.getAttribute(this.dataAttribute)] = inputElement.value;
-      });
-      return validForm ? formData : null;
-    };
-    this.dataAttribute = 'form-data';
-    this.functionAttribute = 'function-data';
+    this.template = document.createElement('template');
+    this.formschema = undefined;
+    this.submitValue = undefined;
+  }
+  onFormSchemaChange(newValue) {
+    if (typeof newValue === 'string') {
+      this._formSchema = JSON.parse(newValue);
+    }
+    else {
+      this._formSchema = newValue;
+    }
   }
-  validateFormField(element) {
-    let isValid = true;
-    const isRequired = element.hasAttribute("required");
-    if (isRequired && !element.value) {
-      // required and not set, show error
-      element.setAttribute("showerrormsg", "true");
-      isValid = false;
+  validityCheck(event) {
+    var _a, _b, _c, _d;
+    event.preventDefault();
+    const target = event.target;
+    let hasError = true;
+    let errorMessage = '';
+    // validity object on HTML5 inputs has the following options
+    // badInput
+    // customError
+    // patternMismatch
+    // rangeOverflow
+    // rangeUnderflow
+    // stepMismatch
+    // tooLong
+    // tooShort
+    // typeMismatch
+    // valid
+    // valueMissing
+    // customErrors can be set with
+    // target.setCustomValidity('custom error!');
+    // and cleared with
+    // target.setCustomValidity('');
+    if (target.validity.valueMissing) {
+      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+    }
+    else if (target.validity.patternMismatch) {
+      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+    }
+    else if (target.validity.badInput) {
+      // IE string in a number field
+      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+    }
+    else if (target.validity.rangeOverflow || target.validity.rangeUnderflow) {
+      // IE date or number is above or below value set in min or max tags
+      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
+    }
+    else {
+      // no error
+      hasError = false;
+    }
+    if (hasError) {
+      target.className = 'invalid';
+      const errorIcon = document.createElement('span');
+      errorIcon.className = 'material-symbols-rounded';
+      errorIcon.textContent = 'warning';
+      target.parentElement.querySelector('.errorBubble').replaceChildren();
+      target.parentElement.querySelector('.errorBubble').append(errorIcon);
+      target.parentElement.querySelector('.errorBubble').append(errorMessage);
     }
     else {
-      // required and set, ensure error does not show
-      element.removeAttribute("showerrormsg");
+      target.className = '';
+      target.parentElement.querySelector('.errorBubble').replaceChildren();
     }
-    return isValid;
   }
-  componentDidLoad() {
-    const elements = this.el.querySelectorAll(`[${this.functionAttribute}]`);
-    elements.forEach((element) => {
-      element.addEventListener('click', event => {
-        event.preventDefault();
-        const formData = this.fetchFormData();
-        if (formData) {
-          // only emit event if form data is valid
-          this.formSubmit.emit(this.fetchFormData());
+  doSubmit(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    // Key value pair matching the key names given by the JSON schema will be output line by line
+    // TODO: Emit an event so external components can handle the resulting form data
+    // let output = "";
+    // for (var [key, value] of formData.entries()) {
+    //     output += `${key} -> ${value}\n`;
+    // }
+    // console.log(output);
+    this.submitEvent.emit(formData);
+  }
+  fieldsetChange(event) {
+    console.log(event.target.name + ' has changed');
+    // The correct input box will always be the target of the incoming event
+    // TODO: Emit an event so external components can change based on form values input
+  }
+  componentWillLoad() {
+    // set proper on initial render
+    this.onFormSchemaChange(this.formschema);
+  }
+  componentWillRender() {
+    this.template.content.replaceChildren(); // clear the template to account for a potential re-render scenario
+    this.populateFormFromSchema();
+  }
+  populateFormFromSchema() {
+    if (!this._formSchema)
+      return;
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach(formKey => {
+      var _a, _b, _c;
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      const input = document.createElement('input');
+      input.name = formKey;
+      input.type = formProperties.type;
+      input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+      input.autocomplete = 'off';
+      input.autocapitalize = 'off';
+      if (formProperties.validation) {
+        const validation = formProperties.validation;
+        if (validation.required) {
+          input.setAttribute('required', '');
+          input.setAttribute('data-required', (_b = validation.required.message) !== null && _b !== void 0 ? _b : '');
         }
-      });
+        if (validation.pattern) {
+          input.setAttribute('pattern', validation.pattern.pattern);
+          input.setAttribute('data-pattern', (_c = validation.pattern.message) !== null && _c !== void 0 ? _c : '');
+        }
+        if (validation.badInput) {
+          input.setAttribute('data-badinput', validation.badInput.message);
+        }
+        if (validation.minmax) {
+          input.setAttribute('min', validation.minmax.min);
+          input.setAttribute('max', validation.minmax.max);
+          input.setAttribute('data-range', validation.minmax.message);
+        }
+        if (validation.maxlength) {
+          input.setAttribute('maxlength', validation.maxlength);
+        }
+      }
+      const errorBubble = document.createElement('div');
+      errorBubble.className = 'errorBubble';
+      const label = document.createElement('label');
+      label.className = 'inputBlock';
+      label.innerText = formProperties.label;
+      if (!formProperties.validation) {
+        const optionalSpan = document.createElement('span');
+        optionalSpan.className = 'optional';
+        optionalSpan.innerHTML = ' (optional)';
+        label.appendChild(optionalSpan);
+      }
+      label.appendChild(input);
+      label.appendChild(errorBubble);
+      this.template.content.append(label);
+    });
+    const submitButton = document.createElement('input');
+    submitButton.type = 'submit';
+    submitButton.className = 'button primary-blue';
+    console.log(this.submitValue);
+    submitButton.value = 'Save';
+    this.template.content.append(submitButton);
+  }
+  componentDidRender() {
+    if (!this._formSchema)
+      return;
+    const formItems = this.template.content.cloneNode(true);
+    // bind to events here as you can't do it in a template in stencil
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach(formKey => {
+      formItems.querySelector(`[name=${formKey}]`).oninvalid = this.validityCheck.bind(this);
+      formItems.querySelector(`[name=${formKey}]`).onblur = this.validityCheck.bind(this);
     });
+    // append to the fieldset
+    this.fieldset.appendChild(formItems);
   }
   render() {
-    return (h("div", null, h("slot", null)));
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { onChange: this.fieldsetChange, ref: el => (this.fieldset = el) }))));
   }
   static get is() { return "tttx-form"; }
   static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-form.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-form.css"]
+    };
+  }
   static get properties() {
     return {
-      "dataAttribute": {
-        "type": "string",
+      "formschema": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -63,16 +196,15 @@ export class TttxForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "data-attribute",
-        "reflect": false,
-        "defaultValue": "'form-data'"
+        "attribute": "formschema",
+        "reflect": false
       },
-      "functionAttribute": {
-        "type": "string",
+      "submitValue": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -81,16 +213,15 @@ export class TttxForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "function-attribute",
-        "reflect": false,
-        "defaultValue": "'function-data'"
+        "attribute": "submit-value",
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "formSubmit",
-        "name": "formSubmit",
+        "method": "submitEvent",
+        "name": "submitEvent",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -99,11 +230,20 @@ export class TttxForm {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "FormData",
+          "resolved": "FormData",
+          "references": {
+            "FormData": {
+              "location": "global"
+            }
+          }
         }
       }];
   }
-  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "formschema",
+        "methodName": "onFormSchemaChange"
+      }];
+  }
 }

package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js

@@ -1,33 +1,102 @@
 export default {
-  title: 'molecules/TTTX Form',
+  title: 'molecules/tttx Form',
   component: 'tttx-form',
-  parameters: {
-    actions: {
-      handles: ['formSubmit'],
+};
+const formSchema = {
+  properties: {
+    Title: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Mr, Mrs, Dr, Hon Rev',
+        label: 'Title',
+      },
+    },
+    forename: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'John',
+        label: 'Forename',
+        validation: {
+          required: {
+            message: 'Please enter your forename',
+          },
+        },
+      },
+    },
+    surname: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Doe',
+        label: 'Surname',
+        validation: {
+          required: {
+            message: 'Please enter your surname',
+          },
+        },
+      },
+    },
+    postcode: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'AB10',
+        label: 'Start of postcode',
+        validation: {
+          required: {
+            message: 'Please enter the beginning of your postcode',
+          },
+          pattern: {
+            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
+            message: 'Please enter the first half of your postcode. EG: ZZ99',
+          },
+          maxlength: 4,
+        },
+      },
+    },
+    age: {
+      type: 'number',
+      format: 'number',
+      form: {
+        type: 'number',
+        placeholder: '',
+        label: 'Age',
+        validation: {
+          required: {
+            message: 'Please enter your age',
+          },
+          badInput: {
+            message: 'Please enter a number',
+          },
+        },
+      },
+    },
+    dob: {
+      type: 'string',
+      format: 'date-time',
+      form: {
+        type: 'date',
+        placeholder: '',
+        label: 'Date of birth',
+        validation: {
+          required: {
+            message: 'Please enter your date of birth',
+          },
+          minmax: {
+            min: '1900-01-01',
+            max: '2100-12-31',
+            message: 'Please enter a date between 1900 and 2100',
+          },
+        },
+      },
     },
   },
 };
-export const CreateUserTemplate = () => `
-<tttx-form>
-  <tttx-input label="Email Address" form-data="email" errormsg="Email is required" required showerrormsg></tttx-input>
-  <tttx-input label="Password" form-data="password" type="password" errormsg="Enter a password" required showerrormsg></tttx-input>
-  <tttx-input label="Repeat Password" form-data="repeatpassword" type="password" errormsg="Repeat your password" required showerrormsg></tttx-input>
-  <tttx-checkbox label="Has Signed GDPR" form-data="gdpr" required></tttx-checkbox>
-  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Create User</tttx-button>
-</tttx-form>
-`;
-export const LoginTemplate = () => `
-<tttx-form>
-  <tttx-input label="Email" form-data="email" errormsg="email is required" required></tttx-input>
-  <tttx-input label="Password" form-data="password" type="password" errormsg="password is required" required></tttx-input>
-  <tttx-checkbox label="Remember my Password" form-data="rememberpassword" required></tttx-checkbox>
-  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Log In</tttx-button>
-</tttx-form>
-`;
-export const TextBoxExample = () => `
-<tttx-form>
-  <tttx-text-box form-data="firstname" label="First Name" errormsg="Field is required" required></tttx-text-box>
-  <tttx-text-box form-data="lastname" label="Last Name"></tttx-text-box>
-  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Submit</tttx-button>
-</tttx-form>
-`;
+const jsonFormSchema = JSON.stringify(formSchema);
+export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;