Added row layout

Author: djthorpe

src/component/badge/BadgeElement.js

@@ -1,10 +1,18 @@
 
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, customElement } from 'lit';
 
 /**
- * A badge element
+ * A badge element class that can be used to display a badge with text or icon.
+ * For example:
+ * 
+ * ```html
+ * <wc-badge backgroundColor="primary" transform="uppercase">New</wc-badge>
+ * <wc-badge backgroundColor="primary"><wc-icon name="circle"></wc-icon></wc-badge>
+ * ```
  */
 export class BadgeElement extends LitElement {
+  static localName = 'wc-badge';
+
   constructor() {
     super();
     // Default properties
@@ -99,6 +107,3 @@ export class BadgeElement extends LitElement {
   }
 }
 
-customElements.define('wc-badge', BadgeElement);
-
-

src/component/layout/RowElement.js

@@ -0,0 +1,34 @@
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * A row element which allows you to create a row with cells, either populating
+ * the row elements left to right or right to left.
+ * 
+ * @class
+ * 
+ * Example:
+ * 
+ * ```html
+ * <wc-row ltr>
+ *  <wc-row-6>
+ *      <!-- content goes here -->
+ *  </wc-row-6>
+ * </wc-row>
+ * ```
+ */
+export class RowElement extends LitElement {
+  static localName = 'wc-row';
+
+  constructor() {
+    super();
+  }
+  static get styles() {
+    return css``;
+  }
+  render() {
+    return html`
+        <div class="row"><slot></slot></div>
+    `;
+  }
+}

src/component/spacer/SpacerElement.js src/component/layout/SpacerElement.js

@@ -5,19 +5,29 @@ import { LitElement, html, css } from 'lit';
  * A vertical spacer element
  */
 export class SpacerElement extends LitElement {
+  static localName = 'wc-spacer';
+
   constructor() {
     super();
 
     // Default properties
-    this.y = 1;
+    this.v = 1;
   }
   static get properties() {
     return {
       /**
-       * Y space (0-6)
-       * @type {Number}
+       * Vertical spacer: 0, 1, 2, 3, 4, 5, 6 which defaults to 1 space element
+       * 
+       * @type Number
+       * @memberof SpacerElement
+       * 
+       * Example:
+       * 
+       * ```html
+       * <wc-spacer v="3"></wc-spacer>
+       * ```
        */
-      y: { type: Number },
+      v: { type: Number },
     };
   }
 
@@ -48,9 +58,7 @@ export class SpacerElement extends LitElement {
   }
   render() {
     return html`
-        <div class="m-${this.y}"></div>
+        <div class="m-${this.v}"></div>
     `;
   }
 }
-
-customElements.define('wc-spacer', SpacerElement);

src/core/event.js src/core/Event.js

@@ -123,6 +123,76 @@ <h1>Form</h1>
     </div>
     <hr>
 
+
+    <div class="container">
+        <h1>Row Layout</h1>
+
+        <h3>Two Columns</h3>
+        <wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
+            <wc-row-6>
+                Left Hand Side
+            </wc-row-6>
+            <wc-row-6>
+                Right Hand Side
+            </wc-row-6>
+        </wc-row>
+        <hr/>
+
+        <h3>Three Columns</h3>
+        <wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
+            <wc-row-4>
+                Left
+            </wc-row-4>
+            <wc-row-4>
+                Middle
+            </wc-row-4>
+            <wc-row-4>
+                Right
+            </wc-row-4>
+        </wc-row>
+        <hr/>
+
+        <h2>Four Columns</h2>
+        <wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
+            <wc-row-3>
+                Col 1
+            </wc-row-3>
+            <wc-row-3>
+                Col 2
+            </wc-row-3>
+            <wc-row-3>
+                Col 3
+            </wc-row-3>
+            <wc-row-3>
+                Col 4
+            </wc-row-3>
+        </wc-row>
+        <hr/>
+
+        <h2>Six Columns</h2>
+        <wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
+            <wc-row-2>
+                Col 1
+            </wc-row-2>
+            <wc-row-2>
+                Col 2
+            </wc-row-2>
+            <wc-row-2>
+                Col 3
+            </wc-row-2>
+            <wc-row-3>
+                Col 4
+            </wc-row-2>
+            <wc-row-3>
+                Col 5
+            </wc-row-2>
+            <wc-row-3>
+                Col 6
+            </wc-row-2>
+        </wc-row>
+        <hr/>
+        
+    </div>
 </body>
 
 </html>

src/index.html

@@ -14,6 +14,9 @@ import './component/button/CloseButtonElement';
 import './component/badge/BadgeElement';
 import './component/badge/BadgeGroupElement';
 
+customElements.define(BadgeElement.localName, BadgeElement); // wc-badge
+
+
 // Icons
 import './component/icon/IconElement';
 
@@ -30,13 +33,19 @@ import './component/form/FormElement';
 import './component/form/FormTextElement';
 import './component/form/FormDateElement';
 
-// Scaffold Elements
-import './component/spacer/SpacerElement';
+// Layout Elements
+import './component/layout/SpacerElement.js';
+import './component/layout/RowElement.js';
+
+customElements.define(SpacerElement.localName, SpacerElement); // wc-spacer
+customElements.define(RowElement.localName, RowElement); // wc-row
 
 // CSS
 import './css/core.css';
 import './css/document.css';
 
 // Other
 import './esbuild.js';
-import './test.js';
+import './test.js';import { BadgeElement } from './component/badge/BadgeElement';
+import { SpacerElement } from './component/layout/SpacerElement.js';
+

src/index.js

@@ -3,13 +3,6 @@
 // Core
 import Provider from './core/Provider';
 import Event from './core/Event';
-import { Model } from './core/Model';
-
-// Create a model
-
-class MyModel extends Model {
-
-}
 
 // Test
 window.addEventListener('load', () => {
@@ -76,8 +69,4 @@ window.addEventListener('load', () => {
             }
         });
     });
-
-    // Print out model
-    var model = new MyModel({ name: "John Doe", age: 21});
-    console.log("" + model);
 });