kempo-ui 0.4.19 → 0.4.21

package/src/components/controls/Menu.js

@@ -0,0 +1,98 @@
+import Control from './Control.js';
+import { css, html } from '../../lit-all.min.js';
+import '../Dropdown.js';
+import '../Icon.js';
+
+/*
+  Base class for dropdown-style controls. The trigger button is provided
+  by this base; subclasses just provide children via the default slot
+  (and optionally <slot name="icon"> / <slot name="label">).
+
+  Items slotted into the menu have their individual borders/radii
+  overridden so the menu reads as a single unified surface.
+*/
+export default class ControlMenu extends Control {
+  static properties = {
+    ...Control.properties,
+    opened: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.opened = false;
+  }
+
+  /*
+    Event Handlers
+  */
+  handleToggle = () => { this.opened = !this.opened; };
+  handleOpened = () => { this.opened = true; };
+  handleClosed = () => { this.opened = false; };
+
+  /*
+    Rendering
+  */
+  render() {
+    return html`
+      <k-dropdown
+        ?opened=${this.opened}
+        @opened=${this.handleOpened}
+        @closed=${this.handleClosed}
+      >
+        <button slot="trigger" class="no-btn icon-btn">
+          <slot name="icon"><k-icon name="arrow_drop_down"></k-icon></slot>
+          <slot name="label"></slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `;
+  }
+
+  /*
+    Styles
+  */
+  static styles = [
+    Control.styles,
+    css`
+      :host {
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        margin: var(--spacer_q);
+      }
+
+      k-dropdown {
+        display: inline-flex;
+      }
+
+      button[slot="trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-width: 2.5rem;
+        min-height: 2.5rem;
+        padding: 0 0.75rem;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        font-size: inherit;
+      }
+
+      /* Slotted menu items: remove individual borders/radii so the menu
+         reads as a single unified surface. */
+      ::slotted(:not([slot="icon"]):not([slot="label"])) {
+        display: block !important;
+        margin: 0 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        border-bottom: 1px solid var(--c_border) !important;
+      }
+      ::slotted(:not([slot="icon"]):not([slot="label"]):last-child) {
+        border-bottom: none !important;
+      }
+    `
+  ];
+}
+
+customElements.define('kc-menu', ControlMenu);

package/src/components/controls/Minimap.js

@@ -0,0 +1,36 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Minimap extends ButtonControl {
+  static requires = ['toggleMinimap'];
+  static hostMode = 'code';
+  static hostEvents = ['minimap-changed'];
+
+  static properties = {
+    ...ButtonControl.properties,
+    active: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.active = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Toggle Minimap';
+    if(this.host) this.active = !!this.host.minimapEnabled;
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if(this.host) this.active = !!this.host.minimapEnabled;
+  }
+
+  handleAction() { this.host?.toggleMinimap?.(); }
+
+  render() { return html`<slot><k-icon name="map"></k-icon></slot>`; }
+}
+
+customElements.define('kc-minimap', Minimap);

package/src/components/controls/Mode.js

@@ -0,0 +1,30 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Mode toggle (visual <-> code) — visible in all modes where the host
+  exposes toggleMode.
+*/
+export default class Mode extends ButtonControl {
+  static requires = ['toggleMode'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Toggle Code View';
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    const host = this.host;
+    if(host) this.toggleAttribute('active', host.mode === 'code');
+  }
+
+  get mode() { return this.host?.mode; }
+
+  handleAction() { this.host?.toggleMode?.(); }
+
+  render() { return html`<slot><k-icon name="code"></k-icon></slot>`; }
+}
+
+customElements.define('kc-mode', Mode);

package/src/components/controls/NumberList.js

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

package/src/components/controls/PgCount.js

@@ -0,0 +1,12 @@
+import Control from './Control.js';
+import { html } from '../../lit-all.min.js';
+
+export default class PgPageCount extends Control {
+  static hostEvents = ['page-change'];
+
+  render() {
+    return html`<span>${this.host?.totalPages ?? 1}</span>`;
+  }
+}
+
+customElements.define('kc-pg-count', PgPageCount);

package/src/components/controls/PgFirst.js

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

package/src/components/controls/PgGotoPage.js

@@ -0,0 +1,48 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Combobox.js';
+
+export default class PgGotoPage extends Control {
+  static hostEvents = ['page-change'];
+
+  handleInput = (e) => {
+    const host = this.host;
+    if(host && e.target.value){
+      const page = parseInt(e.target.value, 10);
+      if(!isNaN(page) && page > 0) host.page = page;
+    }
+  };
+
+  handleBlur = (e) => {
+    const host = this.host;
+    if(host) e.target.value = String(host.page);
+  };
+
+  render() {
+    const host = this.host;
+    const current = host?.page ?? 1;
+    const total = host?.totalPages ?? 1;
+    return html`
+      <k-combobox
+        .value=${String(current)}
+        @input=${this.handleInput}
+        @blur=${this.handleBlur}
+        placeholder="page"
+        no-results-message="Invalid Page"
+      >
+        ${Array.from({ length: total }, (_, i) => html`
+          <k-option value=${i + 1}>${i + 1}</k-option>
+        `)}
+      </k-combobox>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      k-combobox { width: 5rem; }
+    `
+  ];
+}
+
+customElements.define('kc-pg-goto-page', PgGotoPage);

package/src/components/controls/PgItemsPerPage.js

@@ -0,0 +1,36 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class PgItemsPerPage extends Control {
+  static hostEvents = ['page-change'];
+
+  handleChange = (e) => {
+    const host = this.host;
+    if(host) host.itemsPerPage = parseInt(e.target.value, 10);
+  };
+
+  render() {
+    const host = this.host;
+    const current = host?.itemsPerPage ?? 10;
+    const options = host?.pageSizes ?? [5, 10, 25, 50, 100];
+    return html`
+      <label>
+        <slot>Items per page:</slot>
+        <select @change=${this.handleChange}>
+          ${options.map(n => html`<option value=${n} ?selected=${n === current}>${n}</option>`)}
+        </select>
+      </label>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { align-items: center; }
+      label { display: inline-flex; align-items: center; gap: var(--spacer_q, 0.25rem); padding: 0; white-space: nowrap; }
+      select { min-height: 2.5rem; box-sizing: border-box; }
+    `
+  ];
+}
+
+customElements.define('kc-pg-items-per-page', PgItemsPerPage);

package/src/components/controls/PgLast.js

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

package/src/components/controls/PgNext.js

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

package/src/components/controls/PgPageInfo.js

@@ -0,0 +1,22 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class PgPageInfo extends Control {
+  static hostEvents = ['page-change'];
+
+  render() {
+    const host = this.host;
+    const current = host?.page ?? 1;
+    const total = host?.totalPages ?? 1;
+    return html`<span class="info">Page ${current} of ${total}</span>`;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      .info { padding: 0 var(--spacer_q, 0.25rem); white-space: nowrap; }
+    `
+  ];
+}
+
+customElements.define('kc-pg-page-info', PgPageInfo);

package/src/components/controls/PgPrev.js

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

package/src/components/controls/Quote.js

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

package/src/components/controls/Redo.js

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

package/src/components/controls/Spacer.js

@@ -0,0 +1,15 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class ControlSpacer extends ShadowComponent {
+  static styles = css`
+    :host {
+      display: inline-flex;
+      flex: 1;
+    }
+  `;
+
+  render() { return html``; }
+}
+
+customElements.define('kc-spacer', ControlSpacer);

package/src/components/controls/Strikethrough.js

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

package/src/components/controls/TcDeleteRecord.js

@@ -0,0 +1,30 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcDeleteRecord extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Delete 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;
+  }
+
+  delete() { this.handleAction(); }
+
+  handleAction() {
+    const rec = this.record;
+    if(rec) this.host?.deleteRecord(rec);
+  }
+
+  render() { return html`<slot><k-icon name="delete"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-delete-record', TcDeleteRecord);

package/src/components/controls/TcDeleteSelected.js

@@ -0,0 +1,16 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcDeleteSelected extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Delete Selected';
+  }
+
+  handleAction() { this.host?.deleteSelected(); }
+
+  render() { return html`<slot><k-icon name="delete_sweep"></k-icon></slot>`; }
+}
+
+customElements.define('kc-tc-delete-selected', TcDeleteSelected);

package/src/components/controls/TcEdit.js

@@ -0,0 +1,73 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcEdit extends Control {
+  static hostEvents = ['editingChange'];
+
+  static properties = {
+    ...Control.properties,
+    isEditing: { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.isEditing = false;
+  }
+
+  get record() {
+    const $rec = this.closest('.record');
+    if($rec){
+      const idx = $rec.dataset.index;
+      if(idx !== undefined) return this.host?.records?.[idx];
+    }
+    return null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const host = this.host;
+    if(host){
+      host.addEventListener('editingChange', (e) => {
+        if(e.detail.record === this.record) this.isEditing = e.detail.editing;
+      });
+    }
+  }
+
+  handleEdit = () => {
+    const rec = this.record;
+    if(rec) this.host?.editRecord(rec);
+  };
+
+  handleSave = () => {
+    const rec = this.record;
+    if(rec) this.host?.saveEditedRecord(rec);
+  };
+
+  handleCancel = () => {
+    const rec = this.record;
+    if(rec) this.host?.cancelEditedRecord(rec);
+  };
+
+  render() {
+    return this.isEditing ? html`
+      <button class="edit-btn save" @click=${this.handleSave}><k-icon name="check"></k-icon></button>
+      <button class="edit-btn cancel" @click=${this.handleCancel}><k-icon name="close"></k-icon></button>
+    ` : html`
+      <button class="edit-btn" @click=${this.handleEdit}><k-icon name="edit"></k-icon></button>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { align-items: baseline; gap: 0.25rem; }
+      .edit-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); }
+      .edit-btn:hover { background: oklch(from var(--c_bg__inv) l c h / 0.1); }
+      .save { color: var(--c_success, green); }
+      .cancel { color: var(--c_danger, red); }
+    `
+  ];
+}
+
+customElements.define('kc-tc-edit', TcEdit);

package/src/components/controls/TcExportCsv.js

@@ -0,0 +1,60 @@
+import ButtonControl from './ButtonControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class TcExportCsv extends ButtonControl {
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Export CSV';
+  }
+
+  get record() {
+    const $rec = this.closest('.record');
+    if($rec){
+      const idx = $rec.dataset.index;
+      if(idx !== undefined) return this.host?.records?.[idx];
+    }
+    return null;
+  }
+
+  getCSV() {
+    const host = this.host;
+    if(!host) return '';
+    const fields = [];
+    host.fields.forEach(({ name, calculator }) => { if(!calculator) fields.push(name); });
+    let csv = fields.join(',') + '\n';
+    const rec = this.record;
+    if(rec){
+      csv += fields.map(f => rec[f] || '').join(',') + '\n';
+    } else {
+      host.records.forEach(r => { csv += fields.map(f => r[f] || '').join(',') + '\n'; });
+    }
+    return csv;
+  }
+
+  export() { this.handleAction(); }
+
+  handleAction() {
+    const data = this.getCSV();
+    const blob = new Blob([data], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'data.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  render() {
+    return html`<slot><k-icon name="export-file"></k-icon> Export CSV</slot>`;
+  }
+
+  static styles = [
+    ButtonControl.styles,
+    css`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `
+  ];
+}
+
+customElements.define('kc-tc-export-csv', TcExportCsv);