kempo-ui 0.4.20 → 0.4.21

package/src/components/controls/TcExportJson.js

@@ -0,0 +1,46 @@
+import ButtonControl from './ButtonControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcExportJson extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Export JSON';
+  }
+
+  get record() {
+    const $rec = this.closest('.record');
+    if($rec){
+      const idx = $rec.dataset.index;
+      if(idx !== undefined) return this.host?.records?.[idx];
+    }
+    return null;
+  }
+
+  export() { this.handleAction(); }
+
+  handleAction() {
+    const rec = this.record;
+    const data = rec ? JSON.stringify(rec) : JSON.stringify(this.host?.records || []);
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'data.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  render() {
+    return html`<slot><k-icon name="export-file"></k-icon> Export JSON</slot>`;
+  }
+
+  static styles = [
+    ButtonControl.styles,
+    css`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `
+  ];
+}
+
+customElements.define('kc-tc-export-json', TcExportJson);

package/src/components/controls/TcFieldSortHide.js

@@ -0,0 +1,56 @@
+import ButtonControl from './ButtonControl.js';
+import { html, render } from '../../lit-all.min.js';
+import '../Icon.js';
+import Dialog from '../Dialog.js';
+
+export default class TcFieldSortHide extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Show / Hide / Order Fields';
+  }
+
+  openDialog() { this.handleAction(); }
+
+  handleAction() {
+    import('../Sortable.js');
+    const host = this.host;
+    if(!host) return;
+
+    const dialogContent = document.createElement('div');
+    render(html`
+      <div class="m">
+        <k-sortable id="sorting" @sort=${(e) => {
+          const newOrder = Array.from(e.target.querySelectorAll('k-sortable-item'))
+            .map(item => item.getAttribute('data-field'));
+          host.reorderFields(newOrder);
+        }}>
+          ${host.fields.map(field => html`
+            <k-sortable-item data-field="${field.name}">
+              <label class="field pb0">
+                <input
+                  class="field-visibility"
+                  data-field="${field.name}"
+                  type="checkbox"
+                  .checked="${!field.hidden}"
+                  @change="${(e) => host.setFieldHiddenState(field.name, !e.target.checked)}"
+                  style="height: 1.25rem; width: 1.25rem"
+                />
+                ${field.label}
+              </label>
+            </k-sortable-item>
+          `)}
+        </k-sortable>
+      </div>
+    `, dialogContent);
+
+    Dialog.create(dialogContent, {
+      title: 'Show / Hide / Order Fields',
+      width: '400px',
+      cancelText: 'Close'
+    });
+  }
+
+  render() { return html`<slot><k-icon name="table-visibility"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-field-sort-hide', TcFieldSortHide);

package/src/components/controls/TcFilters.js

@@ -0,0 +1,86 @@
+import ButtonControl from './ButtonControl.js';
+import { html, render } from '../../lit-all.min.js';
+import '../Icon.js';
+import Dialog from '../Dialog.js';
+
+const conditionOptions = {
+  'equals': 'equals',
+  'not-equals': 'does not equal',
+  'contains': 'contains',
+  'not-contains': 'does not contain',
+  'greater-than': 'is greater than',
+  'greater-than-or-equal': 'is greater than or equal to',
+  'less-than': 'is less than',
+  'less-than-or-equal': 'is less than or equal to'
+};
+
+export default class TcFilters extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Filters';
+  }
+
+  handleFilter() { this.handleAction(); }
+
+  handleAction() { this.openDialog(); }
+
+  openDialog = () => {
+    const host = this.host;
+    if(!host) return;
+
+    const dialogContent = document.createElement('div');
+    render(html`
+      <div class="p">
+        ${host.filters.length === 0 ? html`<p>No Current Filters.</p>` : html`
+          <h5>Current Filters</h5>
+          <ul id="currentFilters">
+            ${host.filters.map(({field, condition, value}) => html`
+              <li data-field="${field}" data-condition="${condition}" data-value="${value}">
+                ${host.getFieldLabel(field)} ${conditionOptions[condition]} "${value}"
+                <button class="remove-filter no-btn pq" @click=${() => {
+                  host.removeFilter(field, condition, value);
+                  dialog.close();
+                  this.openDialog();
+                }}>
+                  <k-icon name="close"></k-icon>
+                </button>
+              </li>
+            `)}
+          </ul>
+        `}
+        <hr />
+        <h5>Add A Filter</h5>
+        <form id="addFilter" @submit=${(e) => {
+          e.preventDefault();
+          const form = e.target;
+          host.addFilter(form.filterField.value, form.filterCondition.value, form.filterValue.value);
+          dialog.close();
+          this.openDialog();
+        }}>
+          <select id="filterField" class="mb">
+            ${host.fields.map(({name, label}) => html`<option value="${name}">${label}</option>`)}
+          </select>
+          <select id="filterCondition" class="mb">
+            ${Object.entries(conditionOptions).map(([key, val]) => html`
+              <option value="${key}" ?selected="${key === 'contains'}">${val}</option>
+            `)}
+          </select>
+          <input id="filterValue" type="text" class="mb" />
+          <button type="submit" class="btn primary mb mr">Add Filter</button>
+          ${host.filters.length === 0 ? '' : html`
+            <button type="button" class="btn danger mb mr" @click=${() => {
+              host.removeAllFilters();
+              dialog.close();
+            }}>Clear All Filters</button>
+          `}
+        </form>
+      </div>
+    `, dialogContent);
+
+    const dialog = Dialog.create(dialogContent, { width: '600px', title: 'Filters' });
+  };
+
+  render() { return html`<slot><k-icon name="filter"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-filters', TcFilters);

package/src/components/controls/TcFirstPage.js

@@ -0,0 +1,24 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcFirstPage extends ButtonControl {
+  static hostEvents = ['pageChange'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'First Page';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const host = this.host;
+    this.disabled = !host || host.getCurrentPage() === 1;
+  }
+
+  handleAction() { this.host?.firstPage(); }
+
+  render() { return html`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-first-page', TcFirstPage);

package/src/components/controls/TcHiddenCount.js

@@ -0,0 +1,39 @@
+import Control from './Control.js';
+import { html } from '../../lit-all.min.js';
+
+export default class TcHiddenCount extends Control {
+  static hostEvents = ['recordHidden', 'recordShown'];
+
+  static properties = {
+    ...Control.properties,
+    hiddenCount: { type: Number, state: true }
+  };
+
+  constructor() {
+    super();
+    this.hiddenCount = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateCount();
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    this.updateCount();
+  }
+
+  updateHiddenCount() { this.updateCount(); }
+  handleHiddenChange() { this.updateCount(); }
+
+  updateCount() {
+    this.hiddenCount = this.host?.getHiddenRecords?.()?.length || 0;
+  }
+
+  render() {
+    return html`<div><span>${this.hiddenCount}</span> Hidden Records</div>`;
+  }
+}
+
+customElements.define('kc-tc-hidden-count', TcHiddenCount);

package/src/components/controls/TcHide.js

@@ -0,0 +1,30 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcHide extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Hide Record';
+  }
+
+  get record() {
+    const $rec = this.closest('.record');
+    if($rec){
+      const idx = $rec.dataset.index;
+      if(idx !== undefined) return this.host?.records?.[idx];
+    }
+    return null;
+  }
+
+  handleHide() { this.handleAction(); }
+
+  handleAction() {
+    const rec = this.record;
+    if(rec) this.host?.hideRecord(rec);
+  }
+
+  render() { return html`<slot><k-icon name="hide"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-hide', TcHide);

package/src/components/controls/TcLastPage.js

@@ -0,0 +1,24 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcLastPage extends ButtonControl {
+  static hostEvents = ['pageChange'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Last Page';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const host = this.host;
+    this.disabled = !host || host.getCurrentPage() === host.getTotalPages();
+  }
+
+  handleAction() { this.host?.lastPage(); }
+
+  render() { return html`<slot><k-icon name="chevron-line"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-last-page', TcLastPage);

package/src/components/controls/TcNextPage.js

@@ -0,0 +1,24 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcNextPage extends ButtonControl {
+  static hostEvents = ['pageChange'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Next Page';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const host = this.host;
+    this.disabled = !host || host.getCurrentPage() === host.getTotalPages();
+  }
+
+  handleAction() { this.host?.nextPage(); }
+
+  render() { return html`<slot><k-icon name="chevron"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-next-page', TcNextPage);

package/src/components/controls/TcPageSelect.js

@@ -0,0 +1,36 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class TcPageSelect extends Control {
+  static hostEvents = ['pageChange', 'pageSizeChange', 'pageCountChanged', 'recordsSet'];
+
+  handleSelectChange = (e) => {
+    this.host?.setPage(parseInt(e.target.value));
+  };
+
+  render() {
+    const host = this.host;
+    const current = host?.getCurrentPage?.() ?? 1;
+    const total = host?.getTotalPages?.() ?? 1;
+    const options = [];
+    for(let i = 1; i <= total; i++){
+      options.push(html`<option value="${i}" ?selected="${i === current}">Page ${i}</option>`);
+    }
+    return html`
+      <div class="page-select">
+        <select @change=${this.handleSelectChange} ?disabled=${total <= 1}>${options}</select>
+        <label> out of ${total}</label>
+      </div>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      .page-select { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
+      label { padding: 0; margin: 0; }
+    `
+  ];
+}
+
+customElements.define('kc-tc-page-select', TcPageSelect);

package/src/components/controls/TcPageSize.js

@@ -0,0 +1,23 @@
+import Control from './Control.js';
+import { html } from '../../lit-all.min.js';
+
+export default class TcPageSize extends Control {
+  static hostEvents = ['pageChange', 'pageSizeChange'];
+
+  handleChange = (e) => {
+    this.host?.setPageSize(parseInt(e.target.value));
+  };
+
+  render() {
+    const host = this.host;
+    const current = host?.getPageSize?.() ?? 10;
+    const options = host?.pageSizeOptions ?? [10, 25, 50, 100, 500];
+    return html`
+      <select @change=${this.handleChange}>
+        ${options.map(size => html`<option value="${size}" ?selected="${size === current}">${size} per page</option>`)}
+      </select>
+    `;
+  }
+}
+
+customElements.define('kc-tc-page-size', TcPageSize);

package/src/components/controls/TcPrevPage.js

@@ -0,0 +1,24 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcPrevPage extends ButtonControl {
+  static hostEvents = ['pageChange'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Previous Page';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const host = this.host;
+    this.disabled = !host || host.getCurrentPage() === 1;
+  }
+
+  handleAction() { this.host?.prevPage(); }
+
+  render() { return html`<slot><k-icon name="chevron" direction="left"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-prev-page', TcPrevPage);

package/src/components/controls/TcSearch.js

@@ -0,0 +1,34 @@
+import Control from './Control.js';
+import { html } from '../../lit-all.min.js';
+import debounce from '../../utils/debounce.js';
+
+export default class TcSearch extends Control {
+  static properties = {
+    ...Control.properties,
+    searchTerm: { type: String, state: true }
+  };
+
+  constructor() {
+    super();
+    this.searchTerm = '';
+    this.debouncedSearch = debounce(() => this.performSearch(), 200);
+  }
+
+  handleInput = (e) => {
+    this.searchTerm = e.target.value;
+    this.debouncedSearch();
+  };
+
+  performSearch() {
+    const host = this.host;
+    if(!host) return;
+    if(!this.searchTerm || this.searchTerm.length < 3) host.showAllRecords();
+    else host.search(this.searchTerm);
+  }
+
+  render() {
+    return html`<input type="search" placeholder="Search" .value=${this.searchTerm || ''} @input=${this.handleInput} />`;
+  }
+}
+
+customElements.define('kc-tc-search', TcSearch);

package/src/components/controls/TcShowAll.js

@@ -0,0 +1,18 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcShowAll extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Show All Records';
+  }
+
+  handleShowAll() { this.handleAction(); }
+
+  handleAction() { this.host?.showAllRecords(); }
+
+  render() { return html`<slot><k-icon name="show"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-show-all', TcShowAll);

package/src/components/controls/TextBackgroundColor.js

@@ -0,0 +1,84 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Dropdown.js';
+import '../Icon.js';
+
+const DEFAULT_BG_COLORS = '#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc';
+
+export default class TextBackgroundColor extends Control {
+  static requires = ['setTextBackgroundColor'];
+  static hostMode = 'visual';
+
+  static properties = {
+    ...Control.properties,
+    colors: { type: String },
+    disableRemove: { type: Boolean, attribute: 'disable-remove' },
+    disablePicker: { type: Boolean, attribute: 'disable-picker' }
+  };
+
+  constructor() {
+    super();
+    this.colors = DEFAULT_BG_COLORS;
+    this.disableRemove = false;
+    this.disablePicker = false;
+  }
+
+  get opened() { return this.shadowRoot?.querySelector('k-dropdown')?.opened ?? false; }
+  set opened(v) { const dd = this.shadowRoot?.querySelector('k-dropdown'); if(dd) dd.opened = v; }
+
+  handleRemove = () => {
+    this.host?.removeTextBackgroundColor?.();
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  handleSwatch = (e) => {
+    const bg = e.target.style.backgroundColor;
+    if(!bg) return;
+    const rgb = bg.match(/\d+/g);
+    const hex = rgb ? '#' + rgb.map(x => parseInt(x).toString(16).padStart(2, '0')).join('') : bg;
+    this.host?.setTextBackgroundColor?.(hex);
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  handlePicker = (e) => {
+    this.host?.setTextBackgroundColor?.(e.target.value);
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  render() {
+    const arr = this.colors.split(',').map(c => c.trim()).filter(Boolean);
+    return html`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Highlight Color">
+          <k-icon name="format_color_fill"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove ? '' : html`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${arr.map(c => html`<button class="swatch" style="background-color:${c}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker ? '' : html`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `
+  ];
+}
+
+customElements.define('kc-text-background-color', TextBackgroundColor);

package/src/components/controls/TextColor.js

@@ -0,0 +1,84 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Dropdown.js';
+import '../Icon.js';
+
+const DEFAULT_TEXT_COLORS = '#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff';
+
+export default class TextColor extends Control {
+  static requires = ['setTextColor'];
+  static hostMode = 'visual';
+
+  static properties = {
+    ...Control.properties,
+    colors: { type: String },
+    disableRemove: { type: Boolean, attribute: 'disable-remove' },
+    disablePicker: { type: Boolean, attribute: 'disable-picker' }
+  };
+
+  constructor() {
+    super();
+    this.colors = DEFAULT_TEXT_COLORS;
+    this.disableRemove = false;
+    this.disablePicker = false;
+  }
+
+  get opened() { return this.shadowRoot?.querySelector('k-dropdown')?.opened ?? false; }
+  set opened(v) { const dd = this.shadowRoot?.querySelector('k-dropdown'); if(dd) dd.opened = v; }
+
+  handleRemove = () => {
+    this.host?.removeTextColor?.();
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  handleSwatch = (e) => {
+    const bg = e.target.style.backgroundColor;
+    if(!bg) return;
+    const rgb = bg.match(/\d+/g);
+    const hex = rgb ? '#' + rgb.map(x => parseInt(x).toString(16).padStart(2, '0')).join('') : bg;
+    this.host?.setTextColor?.(hex);
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  handlePicker = (e) => {
+    this.host?.setTextColor?.(e.target.value);
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  render() {
+    const arr = this.colors.split(',').map(c => c.trim()).filter(Boolean);
+    return html`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Text Color">
+          <k-icon name="format_color_text"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove ? '' : html`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${arr.map(c => html`<button class="swatch" style="background-color:${c}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker ? '' : html`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `
+  ];
+}
+
+customElements.define('kc-text-color', TextColor);

package/src/components/controls/Underline.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Underline extends ButtonControl {
+  static requires = ['underline'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Underline';
+  }
+
+  handleAction() { this.host?.underline?.(); }
+
+  render() { return html`<slot><k-icon name="format_underlined"></k-icon></slot>`; }
+}
+
+customElements.define('kc-underline', Underline);