Added date control

Author: djthorpe

src/component/form/FormDateElement.js

@@ -0,0 +1,45 @@
+
+import { html, nothing } from 'lit';
+import { FormElement} from './FormElement';
+
+/**
+ * FormDateElement implements a date input element
+ */
+export class FormDateElement extends FormElement {
+    constructor() {
+        super();
+
+        // Default properties
+        this.pattern = '';
+        this.rows = 0;
+        this.minlength = null;
+        this.maxlength = null;
+    }
+    static get properties() {
+        return {
+            /**
+             * The minimum date allowed
+             */
+            min: { type: Date },
+
+            /**
+             * The maximum date allowed
+             */
+            max: { type: Date }
+        };
+    }
+    _renderInput() {
+        return html`<input class="control"
+            name=${this.name || nothing}
+            type="date"
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            placeholder=${this.placeholder || nothing}
+            min=${this.min || nothing}
+            max=${this.max || nothing}
+            @input=${this._updateValue}>${this.value}</textarea>
+        `;
+    }
+}
+
+customElements.define('wc-form-date', FormDateElement);

src/component/form/FormElement.js

@@ -82,7 +82,6 @@ export class FormElement extends LitElement {
             div {
                 display: flex; 
                 justify-content: start;
-                border: 1px solid red;
             }
             .labelbeside {
                 flex-direction: row;
@@ -91,14 +90,13 @@ export class FormElement extends LitElement {
                 flex-direction: column;
             }
             div.description {
+                flex: 1;
                 flex-direction: column;
                 color: var(--form-input-description-color);
                 font-size: var(--form-input-description-font-size);
                 font-weight:  var(--form-input-description-font-weight);
             }
             .control {
-                border: 1px solid red;
-                flex: 1;
                 background-color: var(--form-input-background-color); 
                 color: var(--form-input-color);
                 margin: var(--form-input-margin-y) var(--form-input-margin-x) var(--form-input-margin-y) var(--form-input-margin-x);

src/component/form/FormPasswordElement.js renamed to src/component/form/FormPasswordElement.js-OLD

@@ -0,0 +1,56 @@
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * A vertical spacer element
+ */
+export class SpacerElement extends LitElement {
+  constructor() {
+    super();
+
+    // Default properties
+    this.y = 1;
+  }
+  static get properties() {
+    return {
+      /**
+       * Y space (0-6)
+       * @type {Number}
+       */
+      y: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return css`
+        .m-0 {
+            margin: var(--spacer-0)
+        }
+        .m-1 {
+            margin: var(--spacer-1)
+        }
+        .m-2 {
+            margin: var(--spacer-2)
+        }
+        .m-3 {
+            margin: var(--spacer-3)
+        }
+        .m-4 {
+            margin: var(--spacer-4)
+        }
+        .m-5 {
+            margin: var(--spacer-5)
+        }
+        .m-6 {
+            margin: var(--spacer-6)
+        }
+    `;
+  }
+  render() {
+    return html`
+        <div class="m-${this.y}"></div>
+    `;
+  }
+}
+
+customElements.define('wc-spacer', SpacerElement);

src/component/spacer/SpacerElement.js

@@ -105,12 +105,18 @@ <h1>Modal</h1>
     <div class="container">
         <form method="POST" action="#" onSubmit="console.log('submit'); return false;">
             <h1>Form</h1>
-            <wc-form-input name="generic input"></wc-form-input>
+            <wc-form-input name="test" disabled placeholder="Generic input box without a label"></wc-form-input>
+            <wc-spacer></wc-spacer>
             <wc-form-text name="name" placeholder="Name" autocomplete required minlength="3">Name</wc-form-text>
+            <wc-spacer></wc-spacer>
             <wc-form-text name="email" placeholder="Email" pattern="^\S+@\S+$" description="Email Address (optional)" autocomplete minlength="3">Email Address</wc-form-text>
+            <wc-spacer></wc-spacer>
             <wc-form-text name="address" placeholder="Address" labelabove rows="4" description="Shipping address (optional)">Address</wc-form-text>
+            <wc-spacer></wc-spacer>
+            <wc-form-date name="date" placeholder="Date of Birth" labelabove>Date of Birth</wc-form-date>
+            <wc-spacer></wc-spacer>
             <wc-button-group style="border: 1px solid red">
-                <wc-button name="save" submit>Save</wc-button>
+                <wc-button name="save" submit default>Save</wc-button>
                 <wc-button name="save" submit>Cancel</wc-button>
             </wc-button-group>
         </form>

src/index.html

@@ -24,7 +24,10 @@ import './component/modal/SideModalElement';
 // Form Elements
 import './component/form/FormElement';
 import './component/form/FormTextElement';
-import './component/form/FormPasswordElement';
+import './component/form/FormDateElement';
+
+// Scaffold Elements
+import './component/spacer/SpacerElement';
 
 // CSS
 import './css/core.css';