@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/core/test.js

@@ -0,0 +1,126 @@
+import CustomElement from './CustomElement.js';
+
+/** @param {number} max */
+function _random(max) {
+  return Math.round(Math.random() * 1000) % max;
+}
+
+CustomElement
+  .extend()
+  .observe({
+    data: { type: 'object', reflect: false, value: [] },
+    selected: { type: 'integer', reflect: false },
+  })
+  .methods({
+    buildData(count = 1000) {
+      const adjectives = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'];
+      const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
+      const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
+      const data = [];
+      for (let i = 0; i < count; i++) { data.push({ id: this.id++, label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` }); }
+      return data;
+    },
+    updateData(mod = 10) {
+      for (let i = 0; i < this.data.length; i += 10) {
+        this.data[i].label += ' !!!';
+        // this.data[i] = Object.assign({}, this.data[i], {label: this.data[i].label +' !!!'});
+      }
+    },
+
+    onItemClick({ currentTarget }) {
+      this.selected = currentTarget.dataset.id;
+      return false;
+    },
+    onRemoveClick({ currentTarget }) {
+      const id = currentTarget.dataset.id;
+      this.data = this.data.filter((item) => item.id !== id);
+      return false;
+    },
+  })
+  .html`
+    <link href="/css/currentStyle.css" rel="stylesheet"/>
+      <div class=container>
+        <div class=jumbotron>
+          <div class=row>
+            <div class=col-md-6><h1>MDW unkeyed</h1></div>
+            <div class=col-md-6>
+              <div class=row>
+                <div class="col-sm-6 smallpad">
+                  <button id=run class="btn btn-primary btn-block">Create 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                  <button id=runlots class="btn btn-primary btn-block">Create 10,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                  <button id=add class="btn btn-primary btn-block">Append 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                  <button id=update class="btn btn-primary btn-block">Update every 10th row</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                  <button id=clear class="btn btn-primary btn-block" >Clear</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                  <button id=swaprows class="btn btn-primary btn-block">Swap Rows</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <table id=table class="table table-hover table-striped test-data">
+          <tbody>
+            <tr mdw-for="{item of data}" id={item.id} class=${({ item, _selected }) => (item?.id == _selected ? 'danger' : '')}>
+              <td class="col-md-1">{item.id}</td>
+              <td class="col-md-4"><a on-click={onLabelClick} data-id={item.id} >{item.label}</a></td>
+              <td class="col-md-1"><a on-click={onRemoveClick} data-id={item.id} ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+              <td class="col-md-6"></td>
+            </tr>
+          </tbody>
+        </table>
+        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+      </div>
+  `
+  .childEvents({
+    run: {
+      click() {
+        this.data = this.buildData();
+        this.selected = null;
+      },
+    },
+    runlots: {
+      click() {
+        this.data = this.buildData(10_000);
+        this.selected = null;
+      },
+    },
+    add: {
+      click() {
+        this.data = this.data.concat(this.buildData(1000));
+        this.selected = null;
+      },
+    },
+    update: {
+      click() {
+        this.updateData();
+        this.data = this.data.slice();
+        this.selected = null;
+      },
+    },
+    swaprows: {
+      click() {
+        if (this.data.length > 998) {
+          const newData = this.data.slice();
+          const tmp = this.newData[1];
+          this.newData[1] = this.newData[998];
+          this.newData[998] = tmp;
+          this.data = newData;
+        }
+      },
+    },
+    clear: {
+      click() {
+        this.data = [];
+        this.selected = null;
+      },
+    },
+  }).register('benchmark-app');

package/core/typings.d.ts

@@ -1,4 +1,4 @@
-type ObserverPropertyType = 'string' | 'boolean' | 'map' | 'set' | 'float' | 'integer' | 'object' | 'function';
+type ObserverPropertyType = 'string' | 'boolean' | 'map' | 'set' | 'float' | 'integer' | 'object' | 'function' | 'array';
 
 type InlineTemplate<T1, T2=T1> = (fn: (this:T1, data: T2) => any) => string;
 
@@ -10,6 +10,7 @@ type ParsedObserverPropertyType<T extends ObserverPropertyType> =
   T extends 'boolean' ? boolean
   : T extends 'string' ? string
   : T extends 'float' | 'integer' ? number
+  : T extends 'array' ? any[]
   : T extends 'object' ? any
   : T extends 'function' ? (...args:any) => any
   : unknown;
@@ -73,7 +74,11 @@ type ParsedProps<T> = {
       : never
 };
 
-type HTMLElementCancellableEventMap = Pick<HTMLElementEventMap,
+interface HTMLElementEventMapFixed extends HTMLElementEventMap {
+  input: InputEvent;
+}
+
+type HTMLElementCancellableEventMap = Pick<HTMLElementEventMapFixed,
   'auxclick' |
   'beforeinput' |
   // 'cancel' |
@@ -108,13 +113,13 @@ type HTMLElementCancellableEventMap = Pick<HTMLElementEventMap,
   'wheel'
   >
 
-type CompositionEventMap = HTMLElementEventMap & {
+type CompositionEventMap = HTMLElementEventMapFixed & {
   [P in keyof HTMLElementCancellableEventMap as `~${P}`]: Omit<HTMLElementCancellableEventMap[P], 'preventDefault'>
 };
 
 type CompositionEventListener<T, K = keyof CompositionEventMap> = {
   type?: K
-  id?: string,
+  tag?: string,
   capture?: boolean;
   once?: boolean;
   passive?: boolean;
@@ -123,7 +128,8 @@ type CompositionEventListener<T, K = keyof CompositionEventMap> = {
       this: T,
       event: (K extends keyof CompositionEventMap ? CompositionEventMap[K] : Event) & {currentTarget:HTMLElement}
     ) => any;
-  prop?: keyof T & string;
+  prop?: string;
+  deepProp?: string[],
  };
 
 type CompositionEventListenerObject<T> =

package/core/uid.js

@@ -0,0 +1,13 @@
+/** @type {Set<string>} */
+const generatedUIDs = new Set();
+
+/**
+ * @param {string} [prefix='x'] Prefix all UIDs by string to apply a name or ensure starts with [A-Z] character
+ * @param {number} [n] Maximum number of variations needed. Calculated as 32^n.
+  @return {string} */
+export function generateUID(prefix = 'mdw_', n = 4) {
+  let id;
+  while (generatedUIDs.has(id = Math.random().toString(36).slice(2, n + 2)));
+  generatedUIDs.add(id);
+  return `${prefix}${id}`;
+}