Updated

Author: djthorpe

npm/sqlite3/js/view/badge-group-view.js

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+import './badge-view';
+
+customElements.define('badge-group-view', class extends ComponentView {
+  // eslint-disable-next-line class-methods-use-this
+  template() {
+    return html`
+      <badge-view class="bg-danger">TEST ONE</badge-view><badge-view class="bg-warning">TEST TWO</badge-view>
+    `;
+  }
+});

npm/sqlite3/js/view/badge-view.js

@@ -0,0 +1,17 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+
+// <badge-view>TEST</badge-view>
+customElements.define('badge-view', class extends ComponentView {
+  constructor() {
+    super();
+    this.classList.add('badge');
+  }
+
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <span class="${this.classList.value}">${this.textContent}</span>
+    `;
+  }
+});

npm/sqlite3/js/view/component-view.js

@@ -0,0 +1,24 @@
+import { render, nothing } from 'lit-html';
+
+export default class ComponentView extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.update();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnectedCallback() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  template() {
+    return nothing;
+  }
+
+  update() {
+    render(this.template(), this.shadowRoot, { eventContext: this });
+  }
+}

npm/sqlite3/js/view/nav-item-view.js

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+import Events from './nav-view';
+
+customElements.define('nav-item-view', class extends ComponentView {
+  constructor() {
+    super();
+    this.classList.add('nav-link');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Fire disconnected event
+    this.dispatchEvent(new CustomEvent(Events.EVENT_DISCONNECTED));
+  }
+
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <a class="${this.classList.value}" href="#">
+        <slot></slot>
+      </a>
+    `;
+  }
+});

npm/sqlite3/js/view/nav-view.js

@@ -0,0 +1,76 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+
+const EVENT_CLICK = 'nav-view:click';
+const EVENT_ACTIVE = 'nav-view:active';
+const EVENT_DEACTIVE = 'nav-view:deactive';
+const EVENT_DISCONNECTED = 'nav-view:disconnected';
+
+customElements.define('nav-view', class extends ComponentView {
+  constructor() {
+    super();
+    this.classList.add('nav');
+  }
+
+  get active() {
+    return this.querySelector('nav-item-view#active');
+  }
+
+  set active(activeItem) {
+    this.querySelectorAll('nav-item-view').forEach((item) => {
+      if (activeItem === item) {
+        if (!item.classList.contains('active')) {
+          item.classList.add('active');
+          this.dispatchEvent(new CustomEvent(EVENT_ACTIVE, { detail: item }));
+        }
+      } else if (item.classList.contains('active')) {
+        item.classList.remove('active');
+        this.dispatchEvent(new CustomEvent(EVENT_DEACTIVE, { detail: item }));
+      }
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.querySelectorAll('nav-item-view').forEach((item) => {
+      // Add event listeners for 'click' event to nav-item-view elements
+      item.addEventListener('click', (e) => {
+        this.dispatchEvent(new CustomEvent(EVENT_CLICK, {
+          detail: e.target,
+        }));
+      });
+      // Add event listeners for when an item is removed from the nav-view
+      item.addEventListener(EVENT_DISCONNECTED, (e) => {
+        if (e.target === this.active) {
+          this.active = null;
+        }
+      });
+    });
+
+    // If no active item is set, set the first one as active
+    if (!this.active) {
+      this.active = this.querySelector('nav-item-view');
+    }
+  }
+
+  appendChild(element) {
+    super.appendChild(element);
+    this.update();
+    return element;
+  }
+
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <nav class="${this.classList.value}">
+        <slot></slot>
+      </nav>
+    `;
+  }
+});
+
+// Export event names
+export default {
+  EVENT_CLICK, EVENT_ACTIVE, EVENT_DEACTIVE, EVENT_DISCONNECTED,
+};

npm/sqlite3/js/view/table-body-view.js

@@ -0,0 +1,17 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+
+customElements.define('table-body-view', class extends ComponentView {
+  // eslint-disable-next-line class-methods-use-this
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <tbody>
+        <tr><td>Row 1</td></tr>
+        <tr><td>Row 2</td></tr>
+        <tr><td>Row 3</td></tr>
+        <tr><td>Row 4</td></tr>
+      </tbody>
+    `;
+  }
+});

npm/sqlite3/js/view/table-head-view.js

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+
+customElements.define('table-head-view', class extends ComponentView {
+  // eslint-disable-next-line class-methods-use-this
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <thead><tr><th>Col A</th></tr></thead>
+    `;
+  }
+});

npm/sqlite3/js/view/table-view.js

@@ -0,0 +1,21 @@
+import { html } from 'lit-html';
+import ComponentView from './component-view';
+import './table-head-view';
+import './table-body-view';
+
+customElements.define('table-view', class extends ComponentView {
+  constructor() {
+    super();
+    this.classList.add('table');
+  }
+
+  template() {
+    return html`
+      <link rel="stylesheet" href="./index.css">    
+      <table class="${this.classList.value}">
+        ${html`<table-head-view></table-head-view>`}
+        ${html`<table-body-view></table-body-view>`}
+      </table>
+    `;
+  }
+});