kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/dropdown/dropdownSpec.js

@@ -0,0 +1,108 @@
+describe('Dropdown Plugin:', () => {
+  const fixture = `<div class="row">
+    <div class="input-field col s12">
+      <a id="dropdownActivator" class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
+
+      <ul id='dropdown1' class='dropdown-content'>
+        <li><a href="#!">one</a></li>
+        <li><a href="#!">two</a></li>
+        <li class="divider"></li>
+        <li><a href="#!">three</a></li>
+      </ul>
+
+      <a id="dropdownBubble" class='dropdown-trigger btn' href='#' data-target='dropdown2'>
+        <i class="material-icons left">arrow_drop_down</i>
+        <span>Event Bubble!</span>
+      </a>
+
+      <ul id='dropdown2' class='dropdown-content'>
+        <li><a href="#!">one</a></li>
+        <li><a href="#!">two</a></li>
+        <li class="divider"></li>
+        <li><a href="#!">three</a></li>
+      </ul>
+
+      <a id="dropdownDestroyTrigger" class='dropdown-trigger btn' href='#' data-target='dropdownDestroy'>
+        <i class="material-icons left">arrow_drop_down</i>
+        <span>Drop Me!</span>
+      </a>
+
+      <ul id='dropdownDestroy' class='dropdown-content'>
+        <li><a href="#!">one</a></li>
+        <li><a href="#!">two</a></li>
+        <li class="divider"></li>
+        <li><a href="#!">three</a></li>
+      </ul>
+    </div>
+  </div>`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {
+      inDuration: 0,
+      outDuration: 0
+    });
+  });
+  afterEach(() => XunloadFixtures());
+
+  describe('Dropdown', () => {
+    let normalDropdown;
+
+    it('should open and close programmatically', (done) => {
+      const dropdown1 = document.querySelector('#dropdown1');
+      normalDropdown = document.querySelector('#dropdownActivator');
+      expect(dropdown1).toBeHidden('Should be hidden before dropdown is opened.');
+      M.Dropdown.getInstance(normalDropdown).open();
+      //setTimeout(() => {
+      expect(dropdown1).toBeVisible('Should be shown after dropdown is opened.');
+      M.Dropdown.getInstance(normalDropdown).close();
+      setTimeout(() => {
+        expect(dropdown1).toBeHidden('Should be hidden after dropdown is closed.');
+        done();
+      }, 5); // 400
+      //}, 400);
+    });
+
+    it('should close dropdown on document click if programmatically opened', (done) => {
+      const dropdown1 = document.querySelector('#dropdown1');
+      normalDropdown = document.querySelector('#dropdownActivator');
+      expect(dropdown1).toBeHidden('Should be hidden before dropdown is opened.');
+      M.Dropdown.getInstance(normalDropdown).open();
+      setTimeout(() => {
+        expect(dropdown1).toBeVisible('Should be shown after dropdown is opened.');
+        click(document.body);
+        setTimeout(() => {
+          expect(dropdown1).toBeHidden('Should be hidden after dropdown is closed.');
+          done();
+        }, 5); // 400
+      }, 5); // 400
+    });
+
+    it('should bubble events correctly', (done) => {
+      const dropdown2 = document.querySelector('#dropdown2');
+      normalDropdown = document.querySelector('#dropdownBubble');
+      expect(dropdown2).toBeHidden('Should be hidden before dropdown is opened.');
+      click(normalDropdown.querySelector('i'));
+      setTimeout(() => {
+        expect(dropdown2).toBeVisible('Should be shown after dropdown is opened.');
+        click(document.body);
+        setTimeout(() => {
+          expect(dropdown2).toBeHidden('Should be hidden after dropdown is closed.');
+          done();
+        }, 5); // 400
+      }, 5); // 400
+    });
+
+    it('hovered should destroy itself', (done) => {
+      const dropdownTrigger = document.querySelector('#dropdownDestroyTrigger');
+      M.Dropdown.getInstance(dropdownTrigger).destroy();
+      M.Dropdown.init(dropdownTrigger, { hover: true });
+      expect(() => {
+        M.Dropdown.getInstance(dropdownTrigger).destroy();
+      }).not.toThrow();
+      //setTimeout(() => {
+      done();
+      //}, 400);
+    });
+  });
+});

package/components/list/_collection.scss

@@ -0,0 +1,114 @@
+@use '../../sass/variables' as *;
+
+.collection {
+  padding-left: 0;
+  list-style-type: none;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  .collection-item {
+    background-color: transparent;
+    line-height: 1.5rem;
+    padding: 10px 20px;
+    margin: 0;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+
+    // Avatar Collection
+    &.avatar {
+      min-height: 84px;
+      padding-left: 72px;
+      position: relative;
+
+      // Don't style circles inside preloader classes.
+      &:not(.circle-clipper) > .circle,
+      :not(.circle-clipper) > .circle {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        overflow: hidden;
+        left: 15px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      i.circle {
+        font-size: 18px;
+        line-height: 42px;
+        color: #fff;
+        background-color: var(--md-sys-color-shadow-light);
+        text-align: center;
+      }
+
+
+      .title {
+        font-size: 16px;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      .secondary-content {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.active {
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
+
+      .secondary-content {
+        color:  var(--md-sys-color-on-primary);
+      }
+    }
+  }
+
+  a.collection-item {
+    display: block;
+    transition: .25s;
+    color: var(--md-sys-color-primary);
+
+    &:not(.active) {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+
+  &.with-header {
+    .collection-header {
+      background-color: transparent;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      padding: 10px 20px;
+    }
+
+    .collection-item {
+      padding-left: 30px;
+    }
+
+    .collection-item.avatar {
+      padding-left: 72px;
+    }
+  }
+
+}
+
+// Made less specific to allow easier overriding
+.secondary-content {
+  float: right;
+  color: var(--md-sys-color-primary);
+}
+
+.collapsible .collection {
+  margin: 0;
+  border: none;
+}

package/components/list/_list.scss

@@ -0,0 +1,6 @@
+.list {
+}
+
+.list-item {
+  display: flex;
+}

package/components/list/list.mjs

@@ -0,0 +1,58 @@
+import { Component } from '../atomic/component.mjs';
+
+class ListItem extends Component {
+  #id;
+  #text;
+  #image;
+
+  constructor(options) {
+    super(options);
+    this.addClassname('list-item');
+  }
+
+  setId(id) {
+    this.#id = id;
+    return this;
+  }
+
+  setText(text) {
+    this.#text = text;
+    return this;
+  }
+
+  setImage(image) {
+    this.#image = image;
+    return this;
+  }
+
+  toHTML() {
+    let html = '';
+    if (this.#image) html += `<img src="${this.#image}" alt=""/>`;
+    html += this.#text;
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+class List extends Component {
+  #items = [];
+
+  constructor(options) {
+    super(options);
+    this.addClassname('list');
+  }
+
+  addItem(item) {
+    if (!(item instanceof ListItem)) throw new Error('item has to be of type ListItem');
+    this.#items.push(item);
+    return this;
+  }
+
+  toHTML() {
+    const html = this.#items.map((item) => item.toHTML()).join('');
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+export { ListItem, List };

package/components/list/list.test.mjs

@@ -0,0 +1,16 @@
+import { describe, expect, test } from 'vitest';
+import { List, ListItem } from './list.mjs';
+
+describe('list', () => {
+  const testData = ['HP Pavilion dv6-6013cl', 'Dell XPS 15 (Sandy Bridge)', 'Lenovo ThinkPad X220'];
+
+  test('create html', () => {
+    const list = new List();
+    testData.map((raw) => {
+      const item = new ListItem().setText(raw);
+      list.addItem(item);
+    });
+    //console.log(list.toHTML());
+    expect(list.toHTML()).toContain('Pavilion');
+  });
+});

package/components/loading/loading.mjs

@@ -0,0 +1,26 @@
+import { Component } from '../atomic/component.mjs';
+
+class LoadingIndicator extends Component {
+  constructor(options) {
+    super(options);
+    this.addClassname('preloader-wrapper active');
+  }
+
+  toHTML() {
+    const html = `<div class="spinner-layer spinner-blue-only">
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="gap-patch">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
+      </div>`;
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+export { LoadingIndicator };

package/components/loading/loading.test.mjs

@@ -0,0 +1,10 @@
+import { describe, expect, test } from 'vitest';
+import { LoadingIndicator } from './loading.mjs';
+
+describe('loading', () => {
+  test('create html', () => {
+    const loading = new LoadingIndicator();
+    //console.log(list.toHTML());
+    expect(loading.toHTML()).toContain('circle');
+  });
+});