chore(examples): add issue 114 examples

sample/sample-v-ui-app/src/app.ts

@@ -45,10 +45,16 @@ export class App {
       },
       {
         route: 'issue-146',
-        moduleId: PLATFORM.moduleName('./issue-146/sub-app'),
+        moduleId: PLATFORM.moduleName('./issue-146/sub-app', 'issue-146_bundle'),
         nav: true,
         title: 'Issue 146'
       },
+      {
+        route: 'issue-114',
+        moduleId: PLATFORM.moduleName('./issue-114/contact-list'),
+        nav: true,
+        title: 'Issue 114'
+      },
       // {
       //   route: 'issue-117',
       //   moduleId: PLATFORM.moduleName('./issue-117/sub-app'),

sample/sample-v-ui-app/src/issue-114/contact-list.html

@@ -0,0 +1,74 @@
+<template>
+  <style>
+    .no-appearance::-webkit-inner-spin-button, 
+    .no-appearance::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+  </style>
+  <div class="mb-1">
+    <div class="p-1" scrollbar="x" style="height: 45px;">
+      <button class="btn btn-success btn-sm" click.trigger="addItems(1000)">Add 1000</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItems(10000)">Add 10 000</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItems(100000)">Add 100 000</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItemFirst(1)">Add 1 at top</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItemFirst(10)">Add 10 at top</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItemLast(1)">Add 1 at bottom</button>
+      <button class="btn btn-success btn-sm" click.trigger="addItemLast(10)">Add 1 at bottom</button>
+      <button class="btn btn-success btn-sm" click.trigger="removeItems(1)">Remove 1 at top</button>
+      <button class="btn btn-success btn-sm" click.trigger="removeLast()">Remove 1 at bottom</button>
+      <button class="btn btn-success btn-sm" click.trigger="toggle()">Toggle visibility</button>
+      <button class="btn btn-success btn-sm" click.trigger="swap()">Swap</button>
+    </div>
+    <div class="p-1" scrollbar="x" style="height: 45px;">
+      <button class="btn btn-success btn-sm" click.trigger="newRandomArray($newArrayLength) & self">
+        Assign random array to object array to trigger getter with length:
+        <input type="number | number" value.bind="$newArrayLength"
+          focus.trigger="$event.target.select()"
+          class="border-0 no-appearance"
+          style="width: 30px" />
+      </button>
+    </div>
+
+    <label class="d-block" style="width: 300px;">
+      Example:
+      <select value.bind="selectedMarkup" class="form-control form-control-sm">
+        <option value="div">div</option>
+        <option value="table">table</option>
+      </select>
+    </label>
+  </div>
+
+  <div if.bind="isVisible && selectedMarkup === 'div'">
+    <div virtual-repeat.for="item of contacts" class="contact-list-item ${item.name}">
+      <div class="contact-item">
+        <div class="avatar" click.trigger="click()" css="background-color: ${item.color}">${item.firstLetter}</div>
+        <div class="name text-primary">
+          <b>${$index} ${item.name}</b>
+        </div>
+        <div class="content">
+          <b class="text-success">Phone:</b> ${item.phone} <br>
+          <b class="text-success">Country:</b> ${item.country} <br>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div if.bind="isVisible && selectedMarkup === 'table'">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>Phone</th>
+          <th>Country</th>
+        </tr>
+      </thead>
+      <tr virtual-repeat.for="item of contacts" class="contact-list-item ${item.name}">
+        <td class="avatar" click.trigger="click()" css="background-color: ${item.color}">${item.firstLetter}</td>
+        <td class="name">${$index} ${item.name}</td>
+        <td><strong>Phone:</strong> ${item.phone} </td>
+        <td>Country:</strong> ${item.country} </td>
+      </tr>
+    </table>
+  </div>
+</template>

sample/sample-v-ui-app/src/issue-114/contact-list.ts

@@ -0,0 +1,106 @@
+import { computedFrom } from 'aurelia-framework';
+
+declare const faker: any;
+
+export class ContactList {
+
+  objectArray = [];
+  objectArray2 = [];
+  numberOfItems = 1000;
+  isSelected = false;
+  isVisible = true;
+  selectedMarkup = 'div';
+  viewStrategy: any;
+  $newArrayLength = 0;
+
+  setViewStrategy(strategy) {
+    this.viewStrategy = strategy;
+  }
+
+  toggle() {
+    this.isVisible = !this.isVisible;
+  }
+
+  click() {
+    console.log('click');
+  }
+
+  setIsSelected() {
+    this.isSelected = true;
+  }
+
+  createItem(index?: number) {
+    let name = faker.name.findName();
+    return {
+      firstLetter: name.charAt(0),
+      name: name,
+      color: faker.internet.color(),
+      phone: faker.phone.phoneNumber(),
+      country: faker.address.country()
+    };
+  }
+
+  activate() {
+    let name;
+    for (let i = 0; i < this.numberOfItems; ++i) {
+      name = faker.name.findName();
+      this.objectArray.push(this.createItem(i));
+    }
+
+    for (let i = 0; i < this.numberOfItems; ++i) {
+      name = faker.name.findName();
+      this.objectArray2.push(this.createItem());
+    }
+  }
+
+  @computedFrom('objectArray')
+  get contacts() {
+    return this.objectArray;
+  }
+
+  swap() {
+    this.objectArray = this.objectArray2;
+  }
+
+  addItems(count) {
+    console.log(`adding ${count} items...`);
+    for (let i = 0; i < count; ++i) {
+      this.objectArray.push(this.createItem(i));
+    }
+    console.log(`finsihed adding ${count} items`);
+    this.numberOfItems = this.objectArray.length;
+  }
+
+  addItem2() {
+    let item = this.createItem();
+    this.objectArray.splice(1, 0, item);
+  }
+
+  addItemFirst(count = 10) {
+    for (let i = 0; i < count; ++i) {
+      this.objectArray.unshift(this.createItem());
+    }
+  }
+
+  removeItems(count) {
+    this.objectArray.splice(0, count);
+  }
+
+  unshift5() {
+    this.objectArray.unshift(this.createItem(), this.createItem(), this.createItem(), this.createItem(), this.createItem());
+  }
+
+  addItemLast(count = 10) {
+    while (count-- > 0) {
+      this.objectArray.push(this.createItem());
+    }
+  }
+
+  removeLast() {
+    this.objectArray.pop();
+  }
+
+  newRandomArray(count = 1000) {
+    this.objectArray = Array.from({ length: count }, () => this.createItem());
+  }
+}