@operato/data-grist 9.0.0-beta.62 → 9.0.0-beta.64

package/dist/src/renderers/ox-grist-renderer.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
+const STYLE = css ``;
+let OxGristRenderer = class OxGristRenderer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.column = ZERO_COLUMN;
+        this.record = ZERO_RECORD;
+    }
+    render() {
+        return this.rendererTemplate;
+    }
+    async firstUpdated() {
+        const align = this.column.record.align;
+        if (align) {
+            this.style.textAlign = align;
+        }
+    }
+    get rendererTemplate() {
+        return html ``;
+    }
+};
+OxGristRenderer.styles = STYLE;
+__decorate([
+    property({ type: Object })
+], OxGristRenderer.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristRenderer.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristRenderer.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], OxGristRenderer.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristRenderer.prototype, "field", void 0);
+__decorate([
+    property({ type: Number })
+], OxGristRenderer.prototype, "row", void 0);
+OxGristRenderer = __decorate([
+    customElement('ox-grist-renderer')
+], OxGristRenderer);
+export { OxGristRenderer };
+//# sourceMappingURL=ox-grist-renderer.js.map

package/dist/src/renderers/ox-grist-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAGtE,MAAM,KAAK,GAAG,GAAG,CAAA,EAAE,CAAA;AAGZ,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIuB,WAAM,GAAiB,WAAW,CAAA;QAClC,WAAM,GAAgB,WAAW,CAAA;IAmB/D,CAAC;IAdC,MAAM;QACJ,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;QACtC,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;AAtBM,sBAAM,GAAG,KAAK,AAAR,CAAQ;AAEO;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAa;AAR7B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAwB3B","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColumnConfig, GristRecord } from '../types.js'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\n\nconst STYLE = css``\n\n@customElement('ox-grist-renderer')\nexport class OxGristRenderer extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  render() {\n    return this.rendererTemplate\n  }\n\n  async firstUpdated() {\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n    }\n  }\n\n  get rendererTemplate() {\n    return html``\n  }\n}\n"]}

package/dist/src/renderers/registry.d.ts

@@ -0,0 +1,12 @@
+import { FieldRenderer } from '../types.js';
+import { OxGristRenderer } from './ox-grist-renderer.js';
+interface OxGristRendererConstructor {
+    new (): OxGristRenderer;
+}
+export declare function registerRenderer(type: string, renderer: FieldRenderer): void;
+export declare function unregisterRenderer(type: string): void;
+export declare function getRenderers(): {
+    [name: string]: FieldRenderer | OxGristRendererConstructor;
+};
+export declare function getRenderer(type: string | FieldRenderer): FieldRenderer;
+export {};

package/dist/src/renderers/registry.js

@@ -0,0 +1,70 @@
+import { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js';
+import { OxGristRendererColor } from './ox-grist-renderer-color.js';
+import { OxGristRendererDate } from './ox-grist-renderer-date.js';
+import { OxGristRendererFile } from './ox-grist-renderer-file.js';
+import { OxGristRendererImage } from './ox-grist-renderer-image.js';
+import { OxGristRendererJson5 } from './ox-grist-renderer-json5.js';
+import { OxGristRendererLink } from './ox-grist-renderer-link.js';
+import { OxGristRendererPassword } from './ox-grist-renderer-password.js';
+import { OxGristRendererProgress } from './ox-grist-renderer-progress.js';
+import { OxGristRendererSelect } from './ox-grist-renderer-select.js';
+import { OxGristRendererText } from './ox-grist-renderer-text.js';
+import { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js';
+import { OxGristRendererTree } from './ox-grist-renderer-tree.js';
+function isClass(func) {
+    return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
+}
+var RENDERERS = {
+    string: OxGristRendererText,
+    text: OxGristRendererText,
+    textarea: OxGristRendererTextarea,
+    email: OxGristRendererText,
+    tel: OxGristRendererText,
+    password: OxGristRendererPassword,
+    integer: OxGristRendererText,
+    float: OxGristRendererText,
+    number: OxGristRendererText,
+    select: OxGristRendererSelect,
+    boolean: OxGristRendererBoolean,
+    checkbox: OxGristRendererBoolean,
+    month: OxGristRendererText,
+    week: OxGristRendererText,
+    date: OxGristRendererDate,
+    time: OxGristRendererDate,
+    datetime: OxGristRendererDate,
+    color: OxGristRendererColor,
+    progress: OxGristRendererProgress,
+    link: OxGristRendererLink,
+    image: OxGristRendererImage,
+    file: OxGristRendererFile,
+    json5: OxGristRendererJson5,
+    tree: OxGristRendererTree
+};
+export function registerRenderer(type, renderer) {
+    RENDERERS[type] = renderer;
+}
+export function unregisterRenderer(type) {
+    delete RENDERERS[type];
+}
+export function getRenderers() {
+    return { ...RENDERERS };
+}
+export function getRenderer(type) {
+    if (typeof type === 'function') {
+        return type;
+    }
+    var renderer = RENDERERS[type || 'text'] || OxGristRendererText;
+    if (!isClass(renderer)) {
+        return renderer;
+    }
+    return function (value, column, record, rowIndex, field) {
+        var element = new renderer();
+        element.value = value;
+        element.record = record;
+        element.column = column;
+        element.row = rowIndex;
+        element.field = field;
+        return element;
+    };
+}
+//# sourceMappingURL=registry.js.map

package/dist/src/renderers/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataCardField } from '../data-card/data-card-field.js'\nimport { DataCardGutter } from '../data-card/data-card-gutter.js'\nimport { RecordCard } from '../data-card/record-card.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { DataListField } from '../data-list/data-list-field.js'\nimport { DataListGutter } from '../data-list/data-list-gutter.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { DataReportField } from '../data-report/data-report-field.js'\nimport { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'\nimport { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'\nimport { OxGristRendererColor } from './ox-grist-renderer-color.js'\nimport { OxGristRendererDate } from './ox-grist-renderer-date.js'\nimport { OxGristRendererFile } from './ox-grist-renderer-file.js'\nimport { OxGristRendererImage } from './ox-grist-renderer-image.js'\nimport { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'\nimport { OxGristRendererLink } from './ox-grist-renderer-link.js'\nimport { OxGristRendererPassword } from './ox-grist-renderer-password.js'\nimport { OxGristRendererProgress } from './ox-grist-renderer-progress.js'\nimport { OxGristRendererSelect } from './ox-grist-renderer-select.js'\nimport { OxGristRendererText } from './ox-grist-renderer-text.js'\nimport { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'\nimport { OxGristRendererTree } from './ox-grist-renderer-tree.js'\nimport { OxGristRenderer } from './ox-grist-renderer.js'\n\ninterface OxGristRendererConstructor {\n  new (): OxGristRenderer\n}\n\nfunction isClass(func: Function) {\n  return typeof func === 'function' && /^class\\s/.test(Function.prototype.toString.call(func))\n}\n\nvar RENDERERS: {\n  [name: string]: FieldRenderer | OxGristRendererConstructor\n} = {\n  string: OxGristRendererText,\n  text: OxGristRendererText,\n  textarea: OxGristRendererTextarea,\n  email: OxGristRendererText,\n  tel: OxGristRendererText,\n  password: OxGristRendererPassword,\n  integer: OxGristRendererText,\n  float: OxGristRendererText,\n  number: OxGristRendererText,\n  select: OxGristRendererSelect,\n  boolean: OxGristRendererBoolean,\n  checkbox: OxGristRendererBoolean,\n  month: OxGristRendererText,\n  week: OxGristRendererText,\n  date: OxGristRendererDate,\n  time: OxGristRendererDate,\n  datetime: OxGristRendererDate,\n  color: OxGristRendererColor,\n  progress: OxGristRendererProgress,\n  link: OxGristRendererLink,\n  image: OxGristRendererImage,\n  file: OxGristRendererFile,\n  json5: OxGristRendererJson5,\n  tree: OxGristRendererTree\n}\n\nexport function registerRenderer(type: string, renderer: FieldRenderer) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {\n  return { ...RENDERERS }\n}\n\nexport function getRenderer(type: string | FieldRenderer): FieldRenderer {\n  if (typeof type === 'function') {\n    return type\n  }\n\n  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText\n\n  if (!isClass(renderer)) {\n    return renderer as FieldRenderer\n  }\n\n  return function (\n    value: any,\n    column: ColumnConfig,\n    record: GristRecord,\n    rowIndex: number,\n    field:\n      | DataGridField\n      | RecordCard\n      | DataCardGutter\n      | DataCardField\n      | DataListGutter\n      | DataListField\n      | RecordPartial\n      | DataReportField\n      | Element\n  ) {\n    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field as DataGridField\n\n    return element as OxGristRenderer\n  }\n}\n"]}

package/dist/src/sorters/sorters-control.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, GristConfig, SorterConfig } from '../types.js';
+export declare class SortersControl extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    columns: ColumnConfig[];
+    sorters: SorterConfig[];
+    connectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): TemplateResult;
+    onChangeSort(name: string): void;
+}

package/dist/src/sorters/sorters-control.js

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let SortersControl = class SortersControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.sorters = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const grist = this.closest('ox-grist');
+        if (grist) {
+            this.config = grist.compiledConfig;
+            grist.addEventListener('config-change', (e) => {
+                this.config = e.detail;
+            });
+            grist.addEventListener('fetch-params-change', e => {
+                const { sorters, from } = e.detail || {};
+                if (from === 'sorters-control') {
+                    return;
+                }
+                sorters && (this.sorters = sorters);
+            });
+        }
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            this.columns = this.config.columns.filter(column => column.sortable);
+            this.sorters = this.sorters || this.config.sorters || [];
+        }
+    }
+    render() {
+        const columns = this.columns;
+        const current = this.sorters || [];
+        return html `
+      ${columns.map(column => {
+            const { name } = column;
+            var rank = current.findIndex(sorter => sorter.name === name) + 1;
+            var desc = rank !== 0 ? current[rank - 1].desc : null;
+            if (current.length <= 1) {
+                rank = 0;
+            }
+            return html `
+          <div
+            option
+            @click=${(e) => {
+                this.onChangeSort(name);
+            }}
+          >
+            <span>${column.header.renderer.call(this, column)}</span>
+            ${desc === null
+                ? html ``
+                : html `
+                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>
+                  ${rank === 0 ? html `` : html `<sub>${rank}</sub>`}
+                `}
+          </div>
+        `;
+        })}
+    `;
+    }
+    onChangeSort(name) {
+        var sorters = [...this.sorters];
+        var idx = sorters.findIndex(sorter => sorter.name == name);
+        if (idx !== -1) {
+            let sorter = sorters[idx];
+            if (sorter.desc) {
+                sorters.splice(idx, 1);
+            }
+            else {
+                sorter.desc = true;
+            }
+        }
+        else {
+            var sorter = {
+                name
+            };
+            sorters.push(sorter);
+        }
+        this.sorters = sorters;
+        this.dispatchEvent(new CustomEvent('fetch-params-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                sorters: this.sorters,
+                from: 'sorters-control'
+            }
+        }));
+    }
+};
+SortersControl.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        white-space: nowrap;
+      }
+
+      [option] {
+        flex: 1;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        padding: 3px var(--spacing-small);
+      }
+
+      [option] > span {
+        margin-right: auto;
+        text-transform: capitalize;
+        user-select: none;
+      }
+      [option] md-icon {
+        margin-left: var(--spacing-medium);
+        --md-icon-size: var(--fontsize-large);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      [option] sub {
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+];
+__decorate([
+    state()
+], SortersControl.prototype, "config", void 0);
+__decorate([
+    state()
+], SortersControl.prototype, "columns", void 0);
+__decorate([
+    state()
+], SortersControl.prototype, "sorters", void 0);
+SortersControl = __decorate([
+    customElement('ox-sorters-control')
+], SortersControl);
+export { SortersControl };
+//# sourceMappingURL=sorters-control.js.map

package/dist/src/sorters/sorters-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sorters-control.js","sourceRoot":"","sources":["../../../src/sorters/sorters-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { DataGrist } from '../data-grist.js'\nimport { ColumnConfig, GristConfig, SorterConfig } from '../types.js'\n\n@customElement('ox-sorters-control')\nexport class SortersControl extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        white-space: nowrap;\n      }\n\n      [option] {\n        flex: 1;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        padding: 3px var(--spacing-small);\n      }\n\n      [option] > span {\n        margin-right: auto;\n        text-transform: capitalize;\n        user-select: none;\n      }\n      [option] md-icon {\n        margin-left: var(--spacing-medium);\n        --md-icon-size: var(--fontsize-large);\n        color: var(--md-sys-color-on-primary-container);\n      }\n      [option] sub {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n  @state() columns: ColumnConfig[] = []\n  @state() sorters: SorterConfig[] = []\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', e => {\n        const { sorters, from } = (e as CustomEvent).detail || {}\n        if (from === 'sorters-control') {\n          return\n        }\n\n        sorters && (this.sorters = sorters)\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this.columns = this.config.columns.filter(column => column.sortable)\n      this.sorters = this.sorters || this.config.sorters || []\n    }\n  }\n\n  render(): TemplateResult {\n    const columns = this.columns\n\n    const current = this.sorters || []\n\n    return html`\n      ${columns.map(column => {\n        const { name } = column\n        var rank = current.findIndex(sorter => sorter.name === name) + 1\n        var desc = rank !== 0 ? current[rank - 1].desc : null\n\n        if (current.length <= 1) {\n          rank = 0\n        }\n\n        return html`\n          <div\n            option\n            @click=${(e: MouseEvent) => {\n              this.onChangeSort(name)\n            }}\n          >\n            <span>${column.header.renderer.call(this, column)}</span>\n            ${desc === null\n              ? html``\n              : html`\n                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>\n                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}\n                `}\n          </div>\n        `\n      })}\n    `\n  }\n\n  onChangeSort(name: string) {\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'sorters-control'\n        }\n      })\n    )\n  }\n}\n"]}