@programmerg/bs-elements 0.1.0

package/src/extra/BsForm.js

@@ -0,0 +1,152 @@
+import BsElement from "../core/BsElement.js";
+
+let csrfToken = '';
+export const setCsrfToken = (token) => {
+  csrfToken = token;
+}
+
+export async function httpRequest (opts) {
+  let url = opts.url, 
+      method = opts.method ?? 'get', 
+      contentType = '', 
+      data = opts.data;
+
+  switch (opts.contentType) {
+    case 'text': contentType = 'text/plain'; break;
+    case 'multipart': contentType = 'multipart/form-data'; break;
+    case 'urlencoded': contentType = 'application/x-www-form-urlencoded'; break; 
+    case 'json': default: contentType = 'application/json'; break;
+  }
+
+  // Populate opts from FORM attributes
+  if (opts.form && opts.form instanceof HTMLFormElement) {
+    url = opts.form.action;
+    method = opts.form.method ?? 'get';
+    if (opts.form.attributes.enctype) contentType = opts.form.attributes.enctype;
+    data = new FormData(opts.form);
+  }
+  
+  // Append CSRF Token
+  if (!csrfToken) {
+    const resp = await fetch(url, {method: 'head'});
+    const newToken = resp.headers.get('x-csrf-token'); 
+    if (newToken) setCsrfToken(newToken);
+  }
+  if (data instanceof FormData) {
+    data.append('_token', csrfToken);
+  } else {
+    data._token = csrfToken;
+  }
+
+  // Convert data
+  if (contentType == 'application/json' || contentType == 'text/plain') {
+    if (data instanceof FormData) {
+      const output = {};
+      data.forEach((value, key) => output[key] = value);
+      data = output;
+    }
+    data = JSON.stringify(data);
+
+  } else { // multipart, urlencoded
+    if (!(data instanceof FormData)) {
+      const output = new FormData();
+      for (let key in item) {
+        output.append(key, item[key]);
+      }
+      data = output;
+    }
+  }
+
+  // Assemble the request
+  const request = new Request(url, {
+    method: method,
+    headers: { 
+      "Accept": "application/json",
+      "Content-Type": contentType
+    },
+    body: data
+  });
+
+  // Append JWT Token
+  const jwtToken = localStorage.getItem('token');
+  if (jwtToken) request.headers.append("Authorization", "Bearer " + jwtToken);
+
+  // Get the response
+  const response = await fetch(request);
+  
+  // Save new CSRF Token for later
+  const newToken = response.headers.get('x-csrf-token');
+  if (newToken) setCsrfToken(newToken);
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  
+  // const contentType = response.headers.get('content-type');
+  // if (contentType && contentType.includes('application/json')) {
+  //   return response.json();
+  // } else {
+  //   return response.text();
+  // }
+  return response.json();
+}
+
+export default class BsForm extends BsElement {
+  
+  static get properties() {
+    return {
+      method: {type: String},
+      action: {type: String},
+      submit: {},
+      controls: {},
+      _wasChanged: {type: Boolean, state: false}
+    }
+  }
+  
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('change', this.changeListener);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('change', this.changeListener);
+    super.disconnectedCallback();
+  }
+
+  changeListener(e) {
+    this._wasChanged = true;
+  }
+
+  handleSubmit(e) {
+    const form = e.target;
+    form.classList.add('was-validated');
+    if (form.checkValidity() === false) {
+      e.preventDefault();
+      return false;
+    }
+
+    if (this.submit) {
+      return this.submit(e);
+
+    } else {
+      httpRequest({form: form});
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  firstUpdated() {
+    return html`
+      <form 
+        method=${this.method} 
+        action=${this.action} 
+        @submit=${this.handleSubmit} 
+        class="needs-validation"
+      >
+        ${this.controls}
+      </form>
+    `;
+  }
+}
+
+customElements.define("bs-form", BsForm);

package/src/extra/BsInput.js

@@ -0,0 +1,209 @@
+import BsElement from '../core/BsElement';
+
+export class BsInput extends BsElement {
+
+  static get properties() {
+    return {
+      name: {type: String},
+      value: {},
+      label: {type: String},
+      type: {type: String},
+      title: {type: String},
+      options: {type: Array},
+      placeholder: {type: String},
+      checked: {type: Boolean},
+      readonly: {type: Boolean},
+      required: {type: Boolean},
+      disabled: {type: Boolean},
+      autofocus: {type: Boolean},
+      multiple: {type: Boolean},
+      variant: {type: String},
+      sizing: {type: String},
+      size: {type: Number},
+      maxlength: {type: Number},
+      minlength: {type: Number},
+      min: {type: Number},
+      max: {type: Number},
+      step: {type: Number},
+      pattern: {type: String},
+      accept: {type: String},
+      autocomplete: {type: Boolean},
+      content: {},
+    }
+  }
+  
+  firstUpdated() {
+    if (this.variant == 'floating') {
+      this.classList.add('form-floating');
+      this.classList.add('d-block');
+    }
+    if (this.variant == 'horizontal') {
+      this.classList.add('row');
+    }
+    const id = "input_" + Math.random().toString(36).substr(2);
+
+    this.name = this.name ?? "";
+    this.value = this.value ?? "";
+    this.label = this.label ?? this.name;
+    this.options = this.options ?? [];
+  
+    if (!this.type) this.type = typeof this.value;
+    if (this.type == 'boolean') this.type = 'checkbox';
+    if (this.type == 'number') this.type = 'number';
+    if (this.type == 'string') this.type = 'text';
+    if (this.type == 'object' && this.value instanceof Date) this.type = 'datetime-local';
+
+    const label = html`
+      <label for=${id} class=${
+        (this.variant == '' ? "form-label" : "") +
+        (this.variant == 'horizontal' ? "col-sm-3 col-form-label" : "") +
+        (this.sizing ? ' col-form-label-' + this.sizing : '')
+      }>
+        ${(this.type == 'checkbox') ? nothing : this.label}
+      </label>
+    `;
+
+    let control;
+    switch (this.type) {
+      case 'custom':
+        control = html`${this.content}`
+        break;
+
+      case 'group':
+        control = html`<div class=${"input-group" + (this.sizing ? " input-group-"+this.sizing : "")}>${this.content}</div>`
+        break;
+
+      case 'radio':
+        control = this.options.map(option => html`
+        <div class="form-check">
+          <input id="${id}_${option.value}" 
+            class="form-check-input" 
+            type="radio"
+            name=${this.name}
+            value=${option.value}
+            ?checked=${(option.checked || this.value === option.value) ?? false}
+          >
+          <label for=${id + "_" + option.value} class="form-check-label">${option.text ?? option.value}</label>
+        </div>`);
+        break;
+
+      case 'checkbox':
+        control = html`
+        <div class="form-check">
+          <input id=${id} 
+            class="form-check-input" 
+            type="checkbox"
+            name=${this.name}
+            value=${this.value}
+            ?checked=${this.checked ?? false}
+          >
+          <label for=${id} class="form-check-label">${this.label}</label>
+        </div>`;
+        break;
+
+      case 'textarea': 
+        control = html`
+        <textarea id=${id} 
+          class=${"form-control" + (this.sizing ? ' form-control-' + this.sizing : '')}
+          name=${this.name} 
+          .value=${this.value}
+          placeholder=${this.placeholder ?? nothing}
+          ?readonly=${this.readonly ?? false}
+          ?required=${this.required ?? false}
+          ?disabled=${this.disabled ?? false}
+          ?autofocus=${this.autofocus ?? false}
+          cols=${this.size ?? nothing}
+          maxlength=${this.maxlength ?? nothing}
+        ></textarea>`;
+        break;
+
+      case 'select':
+        control = html`
+        <select id=${id} 
+          class=${'form-select' + (this.sizing ? ' form-select-' + this.sizing : '')} 
+          name=${this.name} 
+          placeholder=${this.placeholder ?? nothing}
+          ?required=${this.required ?? false}
+          ?disabled=${this.disabled ?? false}
+          ?autofocus=${this.autofocus ?? false}
+          ?multiple=${this.multiple ?? false}
+          size=${this.size ?? nothing}
+        >
+        ${this.options.map(option => html`
+          <option value=${option.value ?? ""} ?checked=${option.checked || this.value === option.value}>
+            ${option.text ?? option.value}
+          </option>`
+        )}
+        </select>`;
+        break;
+
+      case 'text':
+      case 'url':
+      case 'email':
+      case 'password':
+      case 'file':
+      case 'hidden':
+      case 'number':
+      case 'range':
+      case 'color':
+      case 'tel':
+      case 'date':
+      case' datetime-local':
+      case 'week':
+      case 'month':
+      case 'time':
+      default:
+        control = html`
+        <input id=${id} 
+          class=${(this.type == 'range' ? 'form-range' : "form-control") +
+           (this.type == 'color' ? ' form-control-color' : "") + 
+           (this.sizing ? ' form-control-' + this.sizing : '')
+          }
+          type=${this.type} 
+          name=${this.name} 
+          .value=${this.value} 
+          list=${this.options.length > 0 ? id + "_list" : nothing} 
+          placeholder=${this.placeholder ?? nothing}
+          pattern=${this.pattern ?? nothing}
+          accept=${this.accept ?? nothing}
+          ?readonly=${this.readonly ?? false}
+          ?required=${this.required ?? false}
+          ?disabled=${this.disabled ?? false}
+          ?autofocus=${this.autofocus ?? false}
+          ?multiple=${this.multiple ?? false}
+          autocomplete=${!!this.autocomplete ? 'off' : nothing}
+          size=${this.size ?? nothing}
+          min=${this.min ?? nothing}
+          max=${this.max ?? nothing}
+          step=${this.step ?? nothing}
+          maxlength=${this.maxlength ?? nothing}
+          minlength=${this.minlength ?? nothing}
+          title=${this.title ?? nothing}
+        >
+        ${this.options.length > 0 ? html`
+        <datalist id=${id + "_list"}>
+          ${this.options.map(option => html`
+          <option value=${option.value ?? ""}></option>
+          `)}
+        </datalist>` : ''}`;
+        break;
+    }
+
+    return (this.variant == 'floating') 
+      ? html`
+          ${control}
+          ${label}
+          ${this.title ? html`<div class="invalid-feedback">${this.title}</div>` : nothing}
+        `
+      : html`
+          ${label}
+          <div class=${this.variant == 'horizontal' ? "col-sm-9" : ""}>
+            ${control}
+            ${this.title ? html`<div class="invalid-feedback">${this.title}</div>` : nothing}
+          </div>
+        `
+    ;
+  }
+}
+
+customElements.define('bs-input', BsInput);

package/src/extra/BsTable.js

@@ -0,0 +1,210 @@
+import BsElement from "../core/BsElement.js";
+
+export default class BsTable extends BsElement {
+  
+  static get properties() {
+    return {
+      tableClass: {type: String},
+      editable: {type: Boolean},
+      filterable: {type: Boolean},
+      src: {type: String},
+      data: {type: Array},
+
+      columns: { type: Array },
+      index: { type: Number, state: true },
+      unique: { type: Array, state: true },
+      filter: { type: Array, state: true },
+      hidden: { type: Array, state: true }
+    }
+  }
+
+  constructor() {
+    super();
+    this.tableClass = '';
+    this.editable = false;
+    this.filterable = false;
+    this.src = '';
+    this.data = [];
+
+    this.columns = [];
+    this.index = null;
+    this.unique = [];
+    this.filter = [];
+    this.hidden = [];
+  }
+
+  async firstUpdated() {
+    if (!this.data) await this.fetchData();
+  }
+
+  // Download the latest json and update it locally
+  async fetchData() {
+    let _data;
+    if (this.src.length > 0) {
+      // If a src attribute is set prefer it over any slots
+      _data = await fetch(this.src).then((res) => res.json());
+    } else {
+      // If no src attribute is set then grab the inline json in the slot
+      const elem = this.parentElement?.querySelector(
+        'script[type="application/json"]'
+      );
+      if (elem) _data = JSON.parse(elem.innerHTML);
+    }
+    this.data = this.transform(_data ?? []);
+    this.requestUpdate();
+  }
+
+  transform(data) {
+    if (!this.columns) {
+      this.columns = Object.keys(this.data[0]).map(key => {
+        return {key: key, label: key}
+      });
+    }
+    return data;
+  }
+  
+  renderFilter() {
+    return html`
+      <input type="search">
+      <ul>
+        <li class=${(this.filter[this.index] === undefined) ? 'disable' : ''} @click=${this.onApply}></li>
+        ${this.unique.map(cell => {
+          const hidden = this.filter[this.index] !== undefined && this.filter[this.index] !== cell;
+          return html`
+            <li class=${hidden ? 'disable' : ''} @click=${this.onApply}>${cell}</li>
+          `;
+        })}
+      </ul>
+    `;
+  }
+
+  onInput (e) {
+    const value = e.target.value;
+    const key = row[0];
+    const current = this.data[index];
+    current[key] = value;
+    this.data[index] = current;
+    const args = {
+      detail: {
+        index: index,
+        data: current,
+      },
+    };
+    this.requestUpdate();
+
+    if (this.handleInputCell) 
+      this.handleInputCell(args);
+    else 
+      this.dispatchEvent(
+        new CustomEvent("input-cell", args)
+      );
+  }
+
+  renderColumns () {
+    return html`
+      <tr>
+      ${this.columns.map((cell, index) => {
+        return html`
+          <th data-key=${cell.key} class=${(this.filter[index] !== undefined) ? 'active' : ''}>
+            ${cell.label}
+            <i class=${this.index === index ? 'arrow_drop_up' : 'arrow_drop_down'} @click=${this.onSelect}></i>
+            <div>
+              ${this.filterable && this.index === index ? this.renderFilter() : ''}
+            </div>
+          </th>
+        `
+      })}
+      </tr>
+    `;
+  }
+
+  renderRow(entry, index) {
+    const matches = entry.every((cell, index) => {
+      return this.filter[index] === undefined || this.filter[index] == cell;
+    });
+    if(matches) {
+      this.hidden[index] = true;
+      return html`
+        <tr>
+          ${entry.map(cell => {
+            return html`
+              <td>
+              ${this.editable
+                ? html`<input value="${cell}" type="text" @input=${this.onInput} />`
+                : html`${cell}`
+              }
+              </td>
+            `;
+          })}
+        </tr>
+      `;
+    }
+    delete this.hidden[index];
+    return '';
+  }
+
+  onSelect(event) {
+    if(this.head.includes(event.target)) {
+      const index = this.head.indexOf(event.target);
+      if(this.index === null || this.index !== index) {
+        this.index = this.head.indexOf(event.target);
+        let column = this.data.map(row => row[index]);
+        // column = column.filter((row, index) => this.hidden[index]);
+        this.unique = [...new Set(column)];
+      }
+      else {
+        this.index = null;
+      }
+    }
+  }
+
+  onApply(event) {
+    if(!event.target.classList.contains('disable')) {
+      const column = event.target.parentNode.parentNode;
+      const index = this.head.indexOf(column);
+      const value = event.target.textContent;
+      value === '' ? delete this.filter[index] : this.filter[index] = value;
+      this.index = null;
+    }
+  }
+  
+  get table() {
+    return this.renderRoot.querySelector('table');
+  }
+  
+  get head() {
+    return Array.from(this.table.querySelectorAll('thead th'));
+  }
+
+  get body() {
+    return Array.from(this.table.querySelectorAll('tbody tr'));
+  }
+
+  firstUpdated() {
+    return html`
+      <div class="table-responsive">
+        <slot name="a"></slot>
+        <table class=${"table " + this.tableClass}>
+          <thead>
+            ${this.renderColumns()}
+          </thead>
+          <tbody>
+            ${!this.data 
+              ? html`<tr><td colspan=${this.columns.length}>Loading...</td></tr>`
+              : nothing
+            }
+            ${this.data.length === 0
+              ? html`<tr><td colspan=${this.columns.length}>No Items Found!</td></tr>`
+              : nothing
+            }
+            ${this.data.map(
+              this.renderRow
+            )}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bs-table", BsTable);

package/src/extra/BsTree.js

@@ -0,0 +1,14 @@
+import BsElement from "../core/BsElement.js";
+
+export default class BsTree extends BsElement {
+  
+  static get properties() {
+    return {}
+  }
+
+  firstUpdated() {
+
+  }
+}
+
+customElements.define("bs-tree", BsTree);