@operato/data-grist 2.0.0-alpha.0 → 2.0.0-alpha.3

package/dist/src/editors/ox-input-tree.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyValues } from 'lit';
+import { OxFormField } from '@operato/input';
+import { GristRecord } from '../types';
+export declare class OxInputTree extends OxFormField {
+    static styles: import("lit").CSSResult;
+    record: GristRecord;
+    selectable?: boolean;
+    private checked?;
+    private expanded?;
+    input: HTMLInputElement;
+    render(): import("lit").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    focus(): void;
+    select(): void;
+    onClickCheckbox(e: MouseEvent): void;
+    onClickExpander(e: MouseEvent): void;
+}

package/dist/src/editors/ox-input-tree.js

@@ -0,0 +1,221 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { OxFormField } from '@operato/input';
+let OxInputTree = class OxInputTree extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+    }
+    render() {
+        var { __children__ } = this.record;
+        const expandable = __children__ && __children__.length > 0;
+        return html `
+      <div wrap>
+        ${expandable
+            ? html `
+              <span
+                expander
+                @click=${this.onClickExpander.bind(this)}
+                ?expanded=${this.expanded}
+                ?collapsed=${!this.expanded}
+              ></span>
+            `
+            : html `<span expander></span>`}
+        ${this.selectable
+            ? html ` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`
+            : nothing}
+
+        <span label
+          ><input
+            value=${ifDefined(this.value)}
+            @change=${(e) => {
+            e.stopPropagation();
+            this.value = e.target.value;
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        }}
+            focus
+        /></span>
+
+        <!-- <span label>${this.value}</span> -->
+      </div>
+    `;
+    }
+    updated(changes) {
+        var { __depth__, __check_in_tree__, __expanded__ } = this.record;
+        this.checked = __check_in_tree__;
+        this.expanded = __expanded__;
+        this.style.setProperty('--tree-depth', String(__depth__));
+    }
+    focus() {
+        this.input.focus();
+    }
+    select() {
+        this.input.select();
+    }
+    onClickCheckbox(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('check-in-tree', {
+            bubbles: true,
+            composed: true,
+            detail: this.record
+        }));
+        this.requestUpdate();
+    }
+    onClickExpander(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
+            bubbles: true,
+            composed: true,
+            detail: this.record
+        }));
+        this.requestUpdate();
+    }
+};
+OxInputTree.styles = css `
+    :host {
+      overflow: hidden;
+    }
+
+    div[wrap] {
+      flex: 1;
+
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      padding-left: calc(var(--tree-depth, 0) * 18px);
+    }
+
+    span[expander] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[expander][collapsed]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-25%, -50%) rotate(-90deg);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[expander][expanded]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -25%);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[checkbox] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[checkbox]::before {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      display: block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--primary-color, #1890ff);
+      border-radius: 2px;
+    }
+
+    span[checkbox][checked='checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 7px;
+      border: 2px solid #fff;
+      border-top: none;
+      border-left: none;
+      -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    span[checkbox][checked='half-checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='half-checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+    }
+
+    span[label] {
+      flex: 1;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background-color: transparent;
+      box-sizing: border-box;
+    }
+
+    input:focus {
+      outline: none;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputTree.prototype, "record", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputTree.prototype, "selectable", void 0);
+__decorate([
+    state()
+], OxInputTree.prototype, "checked", void 0);
+__decorate([
+    state()
+], OxInputTree.prototype, "expanded", void 0);
+__decorate([
+    query('input')
+], OxInputTree.prototype, "input", void 0);
+OxInputTree = __decorate([
+    customElement('ox-input-tree')
+], OxInputTree);
+export { OxInputTree };
+//# sourceMappingURL=ox-input-tree.js.map

package/dist/src/editors/ox-input-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-tree.js","sourceRoot":"","sources":["../../../src/editors/ox-input-tree.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxFormField } from '@operato/input'\nimport { GristRecord } from '../types'\n\n@customElement('ox-input-tree')\nexport class OxInputTree extends OxFormField {\n  static styles = css`\n    :host {\n      overflow: hidden;\n    }\n\n    div[wrap] {\n      flex: 1;\n\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      padding-left: calc(var(--tree-depth, 0) * 18px);\n    }\n\n    span[expander] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[expander][collapsed]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-25%, -50%) rotate(-90deg);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[expander][expanded]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -25%);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[checkbox] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[checkbox]::before {\n      cursor: pointer;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: ' ';\n      display: block;\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--primary-color, #1890ff);\n      border-radius: 2px;\n    }\n\n    span[checkbox][checked='checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      width: 3px;\n      height: 7px;\n      border: 2px solid #fff;\n      border-top: none;\n      border-left: none;\n      -webkit-transform: translate(-50%, -50%) rotate(45deg);\n      -ms-transform: translate(-50%, -50%) rotate(45deg);\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    span[checkbox][checked='half-checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='half-checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 10px;\n      height: 2px;\n      background-color: #fff;\n    }\n\n    span[label] {\n      flex: 1;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      border: 0;\n      background-color: transparent;\n      box-sizing: border-box;\n    }\n\n    input:focus {\n      outline: none;\n    }\n  `\n\n  @property({ type: Object }) record!: GristRecord\n  @property({ type: Boolean }) selectable?: boolean\n\n  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'\n  @state() private expanded?: boolean = false\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    var { __children__ } = this.record\n\n    const expandable = __children__ && __children__.length > 0\n\n    return html`\n      <div wrap>\n        ${expandable\n          ? html`\n              <span\n                expander\n                @click=${this.onClickExpander.bind(this)}\n                ?expanded=${this.expanded}\n                ?collapsed=${!this.expanded}\n              ></span>\n            `\n          : html`<span expander></span>`}\n        ${this.selectable\n          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`\n          : nothing}\n\n        <span label\n          ><input\n            value=${ifDefined(this.value)}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n              this.value = (e.target as HTMLInputElement).value\n              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n            }}\n            focus\n        /></span>\n\n        <!-- <span label>${this.value}</span> -->\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var { __depth__, __check_in_tree__, __expanded__ } = this.record\n    this.checked = __check_in_tree__\n    this.expanded = __expanded__\n\n    this.style.setProperty('--tree-depth', String(__depth__))\n  }\n\n  focus() {\n    this.input.focus()\n  }\n\n  select() {\n    this.input.select()\n  }\n\n  onClickCheckbox(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent('check-in-tree', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/src/editors/registry.js

@@ -14,6 +14,7 @@ import { OxGristEditorTel } from './ox-grist-editor-tel';
 import { OxGristEditorText } from './ox-grist-editor-text';
 import { OxGristEditorTextarea } from './ox-grist-editor-textarea';
 import { OxGristEditorTime } from './ox-grist-editor-time';
+import { OxGristEditorTree } from './ox-grist-editor-tree';
 import { OxGristEditorWeek } from './ox-grist-editor-week';
 var EDITORS = {
     string: OxGristEditorText,
@@ -38,7 +39,8 @@ var EDITORS = {
     link: OxGristEditorText,
     image: OxGristEditorImage,
     file: OxGristEditorFile,
-    'string[]': OxGristEditorMultipleSelect
+    'string[]': OxGristEditorMultipleSelect,
+    tree: OxGristEditorTree
 };
 export function registerEditor(type, editor) {
     EDITORS[type] = editor;

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

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\nimport { OxGristEditor } from './ox-grist-editor'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox'\nimport { OxGristEditorColor } from './ox-grist-editor-color'\nimport { OxGristEditorDate } from './ox-grist-editor-date'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime'\nimport { OxGristEditorEmail } from './ox-grist-editor-email'\nimport { OxGristEditorFile } from './ox-grist-editor-file'\nimport { OxGristEditorImage } from './ox-grist-editor-image'\nimport { OxGristEditorMonth } from './ox-grist-editor-month'\nimport { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select'\nimport { OxGristEditorNumber } from './ox-grist-editor-number'\nimport { OxGristEditorPassword } from './ox-grist-editor-password'\nimport { OxGristEditorSelect } from './ox-grist-editor-select'\nimport { OxGristEditorTel } from './ox-grist-editor-tel'\nimport { OxGristEditorText } from './ox-grist-editor-text'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea'\nimport { OxGristEditorTime } from './ox-grist-editor-time'\nimport { OxGristEditorWeek } from './ox-grist-editor-week'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  textarea: OxGristEditorTextarea,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile,\n  'string[]': OxGristEditorMultipleSelect\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\nimport { OxGristEditor } from './ox-grist-editor'\nimport { OxGristEditorCheckbox } from './ox-grist-editor-checkbox'\nimport { OxGristEditorColor } from './ox-grist-editor-color'\nimport { OxGristEditorDate } from './ox-grist-editor-date'\nimport { OxGristEditorDateTime } from './ox-grist-editor-datetime'\nimport { OxGristEditorEmail } from './ox-grist-editor-email'\nimport { OxGristEditorFile } from './ox-grist-editor-file'\nimport { OxGristEditorImage } from './ox-grist-editor-image'\nimport { OxGristEditorMonth } from './ox-grist-editor-month'\nimport { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select'\nimport { OxGristEditorNumber } from './ox-grist-editor-number'\nimport { OxGristEditorPassword } from './ox-grist-editor-password'\nimport { OxGristEditorSelect } from './ox-grist-editor-select'\nimport { OxGristEditorTel } from './ox-grist-editor-tel'\nimport { OxGristEditorText } from './ox-grist-editor-text'\nimport { OxGristEditorTextarea } from './ox-grist-editor-textarea'\nimport { OxGristEditorTime } from './ox-grist-editor-time'\nimport { OxGristEditorTree } from './ox-grist-editor-tree'\nimport { OxGristEditorWeek } from './ox-grist-editor-week'\n\nvar EDITORS: { [name: string]: { new (): OxGristEditor } } = {\n  string: OxGristEditorText,\n  text: OxGristEditorText,\n  textarea: OxGristEditorTextarea,\n  email: OxGristEditorEmail,\n  tel: OxGristEditorTel,\n  password: OxGristEditorPassword,\n  integer: OxGristEditorNumber,\n  float: OxGristEditorNumber,\n  number: OxGristEditorNumber,\n  select: OxGristEditorSelect,\n  boolean: OxGristEditorCheckbox,\n  checkbox: OxGristEditorCheckbox,\n  month: OxGristEditorMonth,\n  week: OxGristEditorWeek,\n  date: OxGristEditorDate,\n  time: OxGristEditorTime,\n  datetime: OxGristEditorDateTime,\n  color: OxGristEditorColor,\n  progress: OxGristEditorNumber,\n  link: OxGristEditorText,\n  image: OxGristEditorImage,\n  file: OxGristEditorFile,\n  'string[]': OxGristEditorMultipleSelect,\n  tree: OxGristEditorTree\n}\n\nexport function registerEditor(type: string, editor: { new (): OxGristEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): OxGristEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || OxGristEditorText\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}

package/dist/src/filters/filters-form.js

@@ -87,7 +87,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                 const labelText = filterLabel !== undefined
                     ? filterLabel
                     : typeof label === 'object' && label.renderer
-                        ? label.renderer()
+                        ? label.renderer(column)
                         : header.renderer(column) || name;
                 const idx = operator === 'between' ? 1 : 0;
                 const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'

package/dist/src/filters/filters-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\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      this.value = grist.filters || []\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: await this.getQueryFilters(),\n              from: 'filters-form'\n            }\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n\n      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : html`\n          <form\n            @submit=${(e: Event) => {\n              e.stopPropagation()\n              e.preventDefault()\n\n              const grist = this.closest('ox-grist') as DataGrist\n\n              grist && grist.fetch()\n            }}\n          >\n            ${this.searchColumns.length === 0 || this.withoutSearch\n              ? html``\n              : html`\n                  <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                `}\n            ${this.filterColumns.map((column: ColumnConfig) => {\n              const { name, header, label, filter } = column\n\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                  ? label.renderer()\n                  : header.renderer(column) || name\n\n              const idx = operator === 'between' ? 1 : 0\n              const renderer = getFilterRenderer(\n                operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n                  ? 'text'\n                  : type\n              )[idx]\n              const value = this.value?.find(filter => filter.name == name)?.value\n\n              if (!renderer) {\n                return html``\n              }\n\n              return type !== 'select' && labelText\n                ? html`<label filter-title ?between=${operator === 'between'}\n                    ><span>${labelText}</span> ${renderer(column, value, this)}\n                  </label> `\n                : type !== 'select' && !labelText\n                ? renderer(column, value, this)\n                : operator === 'in'\n                ? html`\n                    <ox-select\n                      name=${name}\n                      placeholder=${labelText}\n                      .value=${value}\n                      @change=${(e: CustomEvent) =>\n                        e.target?.dispatchEvent(\n                          new CustomEvent('filter-change', {\n                            detail: {\n                              name,\n                              operator,\n                              value: e.detail\n                            }\n                          })\n                        )}\n                    >\n                      <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                        ${renderer(column, value, this)}\n                      </ox-popup-list>\n                    </ox-select>\n                  `\n                : html`\n                    <ox-select\n                      name=${name}\n                      placeholder=${labelText}\n                      .value=${value}\n                      @change=${(e: CustomEvent) =>\n                        e.target?.dispatchEvent(\n                          new CustomEvent('filter-change', {\n                            detail: {\n                              name,\n                              operator,\n                              value: e.detail\n                            }\n                          })\n                        )}\n                    >\n                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                    </ox-select>\n                  `\n            })}\n          </form>\n        `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n\n  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\n  }\n}\n"]}
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":";AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,6BAA6B,CAAA;AACpC,OAAO,iCAAiC,CAAA;AACxC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAA2C,MAAM,KAAK,CAAA;AACpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAK9E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAWvC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiCsB,UAAK,GAAkB,EAAE,CAAA;QACM,kBAAa,GAAY,KAAK,CAAA;QACnC,cAAS,GAAY,IAAI,CAAA;QACd,UAAK,GAAY,IAAI,CAAA;QAG5E,kBAAa,GAAmB,EAAE,CAAA;QAClC,kBAAa,GAAmB,EAAE,CAAA;IAwO7C,CAAC;IApOC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAc,CAAA;QAEnD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,cAAc,CAAA;YAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAA;YAEhC,KAAK,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAQ,EAAE,EAAE;gBACnD,IAAI,CAAC,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACzC,CAAC,CAAC,CAAA;YAEF,KAAK,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAQ,EAAE,EAAE;gBACzD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAI,CAAiB,CAAC,MAAM,IAAI,EAAE,CAAA;gBACzD,IAAI,IAAI,KAAK,cAAc,EAAE,CAAC;oBAC5B,OAAM;gBACR,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG,OAAO,CAAA;YACtB,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAQ,EAAE,EAAE;gBAC5D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE;wBACrC,IAAI,EAAE,cAAc;qBACrB;iBACF,CAAC,CACH,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YACjF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,YAA0B,EAAE,EAAE;gBACjE,MAAM,MAAM,GAAG,YAAY,CAAC,MAA4B,CAAA;gBACxD,OAAO,MAAO,CAAC,QAAQ,KAAK,QAAQ,CAAA;YACtC,CAAC,CAAC,CAAA;YACF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACjD,MAAM,MAAM,GAAG,YAAY,CAAC,MAA4B,CAAA;gBACxD,OAAO,MAAO,CAAC,QAAQ,KAAK,QAAQ,CAAA;YACtC,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,CAAA;QACzG,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,WAAW,GACf,CAAA,MAAA,MAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,0CAAE,KAAgB,0CAAE,KAAK,CAAC,YAAY,CAAC,0CAAG,CAAC,CAAC,KAAI,EAAE,CAAA;QAE7G,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;sBAEU,CAAC,CAAQ,EAAE,EAAE;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAElB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAc,CAAA;gBAEnD,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAA;YACxB,CAAC;;cAEC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa;gBACrD,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,CAAC,CAAC,IAAI,CAAA;0DACsC,WAAW,eAAe,IAAI,CAAC,SAAS;iBACjF;cACH,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,MAAoB,EAAE,EAAE;;gBAChD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;gBAE9C,MAAM,IAAI,GAAI,MAA6B,CAAC,IAAI,CAAA;gBAChD,MAAM,QAAQ,GAAI,MAA6B,CAAC,QAAQ,CAAA;gBACxD,MAAM,WAAW,GAAI,MAA6B,CAAC,KAAK,CAAA;gBAExD,MAAM,SAAS,GACb,WAAW,KAAK,SAAS;oBACvB,CAAC,CAAC,WAAW;oBACb,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ;wBAC7C,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;wBACxB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAA;gBAErC,MAAM,GAAG,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC1C,MAAM,QAAQ,GAAG,iBAAiB,CAChC,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,OAAO;oBAC5F,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,CACT,CAAC,GAAG,CAAC,CAAA;gBACN,MAAM,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,0CAAE,KAAK,CAAA;gBAEpE,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACd,OAAO,IAAI,CAAA,EAAE,CAAA;gBACf,CAAC;gBAED,OAAO,IAAI,KAAK,QAAQ,IAAI,SAAS;oBACnC,CAAC,CAAC,IAAI,CAAA,gCAAgC,QAAQ,KAAK,SAAS;6BAC/C,SAAS,WAAW,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;4BAClD;oBACZ,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,SAAS;wBACjC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;wBAC/B,CAAC,CAAC,QAAQ,KAAK,IAAI;4BACnB,CAAC,CAAC,IAAI,CAAA;;6BAEO,IAAI;oCACG,SAAS;+BACd,KAAK;gCACJ,CAAC,CAAc,EAAE,EAAE;;gCAC3B,OAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CACrB,IAAI,WAAW,CAAC,eAAe,EAAE;oCAC/B,MAAM,EAAE;wCACN,IAAI;wCACJ,QAAQ;wCACR,KAAK,EAAE,CAAC,CAAC,MAAM;qCAChB;iCACF,CAAC,CACH,CAAA;6BAAA;;;0BAGC,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;;;mBAGpC;4BACH,CAAC,CAAC,IAAI,CAAA;;6BAEO,IAAI;oCACG,SAAS;+BACd,KAAK;gCACJ,CAAC,CAAc,EAAE,EAAE;;gCAC3B,OAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CACrB,IAAI,WAAW,CAAC,eAAe,EAAE;oCAC/B,MAAM,EAAE;wCACN,IAAI;wCACJ,QAAQ;wCACR,KAAK,EAAE,CAAC,CAAC,MAAM;qCAChB;iCACF,CAAC,CACH,CAAA;6BAAA;;oDAE2B,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC;;mBAE9D,CAAA;YACP,CAAC,CAAC;;SAEL,CAAA;IACP,CAAC;IAED,KAAK,CAAC,eAAe;;QACnB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAA;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAA;QAEpB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnC,MAAM,MAAM,GAAuB,MAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,0CAAE,QAAQ,EAAE,CAAA;QAErE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa;aAC7B,GAAG,CAAC,CAAC,MAAoB,EAAE,EAAE;YAC5B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;YACrC,MAAM,QAAQ,GAAI,MAA6B,CAAC,QAAQ,CAAA;YAExD,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACjC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACtB,OAAM;YACR,CAAC;YAED,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC;gBAC1C,OAAM;YACR,CAAC;YAED,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBAChC,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAA;gBAE1B,sDAAsD;gBACtD,QAAQ,IAAI,EAAE,CAAC;oBACb,KAAK,SAAS,CAAC;oBACf,KAAK,OAAO,CAAC;oBACb,KAAK,QAAQ,CAAC;oBACd,KAAK,UAAU,CAAC;oBAChB,KAAK,UAAU,CAAC;oBAChB,KAAK,SAAS;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;oBAC/C;wBACE,OAAO,KAAK,CAAA;gBAChB,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,OAAO;gBACL,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAE,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW;aAC/D,CAAA;QACH,CAAC,CAAC;aACD,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,SAAS,CAAkB,CAAA;QAE1D,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,GAAG,OAAO,CAAC,MAAM,CACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,MAAoB,EAAE,EAAE;gBAC9C,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;gBAEvB,OAAO;oBACL,IAAI;oBACJ,QAAQ,EAAE,QAAQ;oBAClB,KAAK,EAAE,IAAI,MAAM,GAAG;iBACrB,CAAA;YACH,CAAC,CAAC,CACH,CAAA;QACH,CAAC;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;IAEM,aAAa,CAAC,IAAY,EAAE,KAAU;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,IAAI,IAAI,CAAqB,CAAA;QACxF,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,KAAK,CAAA;YACnB,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAC7D,CAAC;IACH,CAAC;IAEM,aAAa,CAAC,IAAY;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,IAAI,IAAI,CAAqB,CAAA;QACxF,OAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA;IACrB,CAAC;;AA9QM,kBAAM,GAAG;IACd,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,AA9BY,CA8BZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAA0B;AACM;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAA+B;AACnC;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAA0B;AACd;IAA/D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAsB;AAE5E;IAAR,KAAK,EAAE;2CAAqB;AACpB;IAAR,KAAK,EAAE;kDAAmC;AAClC;IAAR,KAAK,EAAE;kDAAmC;AAEvB;IAAnB,UAAU,CAAC,MAAM,CAAC;yCAAuB;AA1C/B,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CAgRvB","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\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      this.value = grist.filters || []\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: await this.getQueryFilters(),\n              from: 'filters-form'\n            }\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n\n      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : html`\n          <form\n            @submit=${(e: Event) => {\n              e.stopPropagation()\n              e.preventDefault()\n\n              const grist = this.closest('ox-grist') as DataGrist\n\n              grist && grist.fetch()\n            }}\n          >\n            ${this.searchColumns.length === 0 || this.withoutSearch\n              ? html``\n              : html`\n                  <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n                `}\n            ${this.filterColumns.map((column: ColumnConfig) => {\n              const { name, header, label, filter } = column\n\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                  ? label.renderer(column)\n                  : header.renderer(column) || name\n\n              const idx = operator === 'between' ? 1 : 0\n              const renderer = getFilterRenderer(\n                operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n                  ? 'text'\n                  : type\n              )[idx]\n              const value = this.value?.find(filter => filter.name == name)?.value\n\n              if (!renderer) {\n                return html``\n              }\n\n              return type !== 'select' && labelText\n                ? html`<label filter-title ?between=${operator === 'between'}\n                    ><span>${labelText}</span> ${renderer(column, value, this)}\n                  </label> `\n                : type !== 'select' && !labelText\n                ? renderer(column, value, this)\n                : operator === 'in'\n                ? html`\n                    <ox-select\n                      name=${name}\n                      placeholder=${labelText}\n                      .value=${value}\n                      @change=${(e: CustomEvent) =>\n                        e.target?.dispatchEvent(\n                          new CustomEvent('filter-change', {\n                            detail: {\n                              name,\n                              operator,\n                              value: e.detail\n                            }\n                          })\n                        )}\n                    >\n                      <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                        ${renderer(column, value, this)}\n                      </ox-popup-list>\n                    </ox-select>\n                  `\n                : html`\n                    <ox-select\n                      name=${name}\n                      placeholder=${labelText}\n                      .value=${value}\n                      @change=${(e: CustomEvent) =>\n                        e.target?.dispatchEvent(\n                          new CustomEvent('filter-change', {\n                            detail: {\n                              name,\n                              operator,\n                              value: e.detail\n                            }\n                          })\n                        )}\n                    >\n                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                    </ox-select>\n                  `\n            })}\n          </form>\n        `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, type, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n\n  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\n  }\n}\n"]}

package/dist/src/handlers/contextmenu-tree-mutation.d.ts

@@ -0,0 +1,3 @@
+import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristData, GristRecord } from '../types';
+export declare const ContextMenuTreeMutation: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField, event: Event) => void;

package/dist/src/handlers/contextmenu-tree-mutation.js

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import { OxPopupMenu } from '@operato/popup';
+function dispatchEvent(field, event) {
+    field.dispatchEvent(new CustomEvent(event, {
+        bubbles: true,
+        composed: true,
+        detail: field
+    }));
+}
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+export const ContextMenuTreeMutation = function (columns, data, column, record, rowIndex, field, event) {
+    const e = event;
+    if (!('pageX' in e && 'pageY' in e)) {
+        return;
+    }
+    e.preventDefault();
+    OxPopupMenu.open({
+        template: html `
+      <ox-popup-menuitem
+        label="add sibling node"
+        @click=${() => {
+            dispatchEvent(field, 'add-sibling-node');
+        }}
+      >
+        <mwc-icon slot="icon">add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="add child node"
+        @click=${() => {
+            dispatchEvent(field, 'add-child-node');
+        }}
+      >
+        <mwc-icon slot="icon">playlist_add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move up"
+        @click=${() => {
+            dispatchEvent(field, 'move-up');
+        }}
+      >
+        <mwc-icon slot="icon">arrow_upward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move down"
+        @click=${() => {
+            dispatchEvent(field, 'move-down');
+        }}
+      >
+        <mwc-icon slot="icon">arrow_downward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <div separator></div>
+
+      <ox-popup-menuitem
+        label="collapse all"
+        @click=${() => {
+            dispatchEvent(field, 'collapse-all');
+        }}
+      >
+        <mwc-icon slot="icon">unfold_less</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="expand all"
+        @click=${() => {
+            dispatchEvent(field, 'expand-all');
+        }}
+      >
+        <mwc-icon slot="icon">unfold_more</mwc-icon>
+      </ox-popup-menuitem>
+    `,
+        top: e.pageY,
+        left: e.pageX
+    });
+};
+//# sourceMappingURL=contextmenu-tree-mutation.js.map

package/dist/src/handlers/contextmenu-tree-mutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextmenu-tree-mutation.js","sourceRoot":"","sources":["../../../src/handlers/contextmenu-tree-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C,SAAS,aAAa,CAAC,KAAoB,EAAE,KAAa;IACxD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,KAAK,EAAE;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,KAAK;KACd,CAAC,CACH,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UACrC,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACpB,KAAY;IAEZ,MAAM,CAAC,GAAG,KAAqB,CAAA;IAC/B,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC;QACpC,OAAM;IACR,CAAC;IAED,CAAC,CAAC,cAAc,EAAE,CAAA;IAElB,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;iBAGD,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAA;QAC1C,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;QACxC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;QACjC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA;QACnC,CAAC;;;;;;;;;iBASQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;QACtC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;QACpC,CAAC;;;;KAIJ;QACD,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\nimport { OxPopupMenu } from '@operato/popup'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\nfunction dispatchEvent(field: DataGridField, event: string) {\n  field.dispatchEvent(\n    new CustomEvent(event, {\n      bubbles: true,\n      composed: true,\n      detail: field\n    })\n  )\n}\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\nexport const ContextMenuTreeMutation = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField,\n  event: Event\n): void {\n  const e = event as PointerEvent\n  if (!('pageX' in e && 'pageY' in e)) {\n    return\n  }\n\n  e.preventDefault()\n\n  OxPopupMenu.open({\n    template: html`\n      <ox-popup-menuitem\n        label=\"add sibling node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-sibling-node')\n        }}\n      >\n        <mwc-icon slot=\"icon\">add</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"add child node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-child-node')\n        }}\n      >\n        <mwc-icon slot=\"icon\">playlist_add</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"move up\"\n        @click=${() => {\n          dispatchEvent(field, 'move-up')\n        }}\n      >\n        <mwc-icon slot=\"icon\">arrow_upward</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"move down\"\n        @click=${() => {\n          dispatchEvent(field, 'move-down')\n        }}\n      >\n        <mwc-icon slot=\"icon\">arrow_downward</mwc-icon>\n      </ox-popup-menuitem>\n\n      <div separator></div>\n\n      <ox-popup-menuitem\n        label=\"collapse all\"\n        @click=${() => {\n          dispatchEvent(field, 'collapse-all')\n        }}\n      >\n        <mwc-icon slot=\"icon\">unfold_less</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"expand all\"\n        @click=${() => {\n          dispatchEvent(field, 'expand-all')\n        }}\n      >\n        <mwc-icon slot=\"icon\">unfold_more</mwc-icon>\n      </ox-popup-menuitem>\n    `,\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n"]}

package/dist/src/handlers/registry.js

@@ -1,3 +1,4 @@
+import { ContextMenuTreeMutation } from './contextmenu-tree-mutation';
 import { MoveDown } from './move-down';
 import { MoveUp } from './move-up';
 import { RecordCopy } from './record-copy';
@@ -12,7 +13,8 @@ var HANDLERS = {
     'move-up': MoveUp,
     'move-down': MoveDown,
     'record-copy': RecordCopy,
-    'record-delete': RecordDelete
+    'record-delete': RecordDelete,
+    'contextmenu-tree-mutation': ContextMenuTreeMutation
 };
 export function registerGristEventHandler(type, handler) {
     HANDLERS[type] = handler;

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

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/handlers/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,IAAI,QAAQ,GAER;IACF,aAAa,EAAE,iBAAsC;IACrD,YAAY,EAAE,SAA8B;IAC5C,mBAAmB,EAAE,eAAoC;IACzD,SAAS,EAAE,MAA2B;IACtC,WAAW,EAAE,QAA6B;IAC1C,aAAa,EAAE,UAA+B;IAC9C,eAAe,EAAE,YAAiC;CACnD,CAAA;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAY,EAAE,OAA0B;IAChF,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,IAAY;IACtD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,IAAgC;IACnE,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AACvB,CAAC","sourcesContent":["import { GristEventHandler } from '../types'\nimport { MoveDown } from './move-down'\nimport { MoveUp } from './move-up'\nimport { RecordCopy } from './record-copy'\nimport { RecordDelete } from './record-delete'\nimport { RecordViewHandler } from './record-view-handler'\nimport { SelectRow } from './select-row'\nimport { SelectRowToggle } from './select-row-toggle'\n\nvar HANDLERS: {\n  [name: string]: GristEventHandler\n} = {\n  'record-view': RecordViewHandler as GristEventHandler,\n  'select-row': SelectRow as GristEventHandler,\n  'select-row-toggle': SelectRowToggle as GristEventHandler,\n  'move-up': MoveUp as GristEventHandler,\n  'move-down': MoveDown as GristEventHandler,\n  'record-copy': RecordCopy as GristEventHandler,\n  'record-delete': RecordDelete as GristEventHandler\n}\n\nexport function registerGristEventHandler(type: string, handler: GristEventHandler) {\n  HANDLERS[type] = handler\n}\n\nexport function unregisterGristEventHandler(type: string) {\n  delete HANDLERS[type]\n}\n\nexport function getGristEventHandlers() {\n  return { ...HANDLERS }\n}\n\nexport function getGristEventHandler(type: string | GristEventHandler): GristEventHandler {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return HANDLERS[type]\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/handlers/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,IAAI,QAAQ,GAER;IACF,aAAa,EAAE,iBAAsC;IACrD,YAAY,EAAE,SAA8B;IAC5C,mBAAmB,EAAE,eAAoC;IACzD,SAAS,EAAE,MAA2B;IACtC,WAAW,EAAE,QAA6B;IAC1C,aAAa,EAAE,UAA+B;IAC9C,eAAe,EAAE,YAAiC;IAClD,2BAA2B,EAAE,uBAA4C;CAC1E,CAAA;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAY,EAAE,OAA0B;IAChF,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,IAAY;IACtD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,IAAgC;IACnE,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AACvB,CAAC","sourcesContent":["import { GristEventHandler } from '../types'\nimport { ContextMenuTreeMutation } from './contextmenu-tree-mutation'\nimport { MoveDown } from './move-down'\nimport { MoveUp } from './move-up'\nimport { RecordCopy } from './record-copy'\nimport { RecordDelete } from './record-delete'\nimport { RecordViewHandler } from './record-view-handler'\nimport { SelectRow } from './select-row'\nimport { SelectRowToggle } from './select-row-toggle'\n\nvar HANDLERS: {\n  [name: string]: GristEventHandler\n} = {\n  'record-view': RecordViewHandler as GristEventHandler,\n  'select-row': SelectRow as GristEventHandler,\n  'select-row-toggle': SelectRowToggle as GristEventHandler,\n  'move-up': MoveUp as GristEventHandler,\n  'move-down': MoveDown as GristEventHandler,\n  'record-copy': RecordCopy as GristEventHandler,\n  'record-delete': RecordDelete as GristEventHandler,\n  'contextmenu-tree-mutation': ContextMenuTreeMutation as GristEventHandler\n}\n\nexport function registerGristEventHandler(type: string, handler: GristEventHandler) {\n  HANDLERS[type] = handler\n}\n\nexport function unregisterGristEventHandler(type: string) {\n  delete HANDLERS[type]\n}\n\nexport function getGristEventHandlers() {\n  return { ...HANDLERS }\n}\n\nexport function getGristEventHandler(type: string | GristEventHandler): GristEventHandler {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return HANDLERS[type]\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-tree.d.ts

@@ -8,4 +8,5 @@ export declare class OxGristRendererTree extends OxGristRenderer {
     updated(changes: PropertyValues<this>): void;
     onClickCheckbox(e: MouseEvent): void;
     onClickExpander(e: MouseEvent): void;
+    get editableOnClick(): boolean;
 }

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

@@ -49,13 +49,16 @@ let OxGristRendererTree = class OxGristRendererTree extends OxGristRenderer {
     }
     onClickExpander(e) {
         e.stopPropagation();
-        this.dispatchEvent(new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+        this.dispatchEvent(new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
             bubbles: true,
             composed: true,
             detail: this.record
         }));
         this.requestUpdate();
     }
+    get editableOnClick() {
+        return false;
+    }
 };
 OxGristRendererTree.styles = css `
     :host {
@@ -125,8 +128,8 @@ OxGristRendererTree.styles = css `
       border-radius: 2px;
     }
 
-    span[label][selected] {
-      background-color: var(--primary-color, #1890ff);
+    span[label] {
+      flex: 1;
     }
 
     span[checkbox][checked='checked']::before {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-renderer-tree.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-tree.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAG9C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;IAAjD;;QAiHY,aAAQ,GAAa,KAAK,CAAA;IAgE7C,CAAC;IA9DC,IAAI,gBAAgB;QAClB,IAAI,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAC7D,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAElC,MAAM,UAAU,GAAG,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAA;QAE1D,OAAO,IAAI,CAAA;;UAEL,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;;yBAGS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,IAAI,CAAC,QAAQ;6BACZ,CAAC,IAAI,CAAC,QAAQ;;aAE9B;YACH,CAAC,CAAC,IAAI,CAAA,wBAAwB;UAC9B,UAAU;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU;YAC5G,CAAC,CAAC,OAAO;;sBAEG,IAAI,CAAC,KAAK;;KAE3B,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAChE,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAA;QAChC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAA;QAE5B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3D,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE;YACnE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;;AA/KM,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GlB,AA7GY,CA6GZ;AAEgB;IAAhB,KAAK,EAAE;oDAA2D;AAClD;IAAhB,KAAK,EAAE;qDAAmC;AAjHhC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAiL/B","sourcesContent":["import { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxGristRenderer } from './ox-grist-renderer'\n\n@customElement('ox-grist-tree-renderer')\nexport class OxGristRendererTree extends OxGristRenderer {\n  static styles = css`\n    :host {\n      overflow: hidden;\n    }\n\n    div[wrap] {\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      width: 100%;\n      padding-left: calc(var(--tree-depth, 0) * 18px);\n    }\n\n    span[expander] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[expander][collapsed]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-25%, -50%) rotate(-90deg);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[expander][expanded]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -25%);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[checkbox] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[checkbox]::before {\n      cursor: pointer;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: ' ';\n      display: block;\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--primary-color, #1890ff);\n      border-radius: 2px;\n    }\n\n    span[label][selected] {\n      background-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      width: 3px;\n      height: 7px;\n      border: 2px solid #fff;\n      border-top: none;\n      border-left: none;\n      -webkit-transform: translate(-50%, -50%) rotate(45deg);\n      -ms-transform: translate(-50%, -50%) rotate(45deg);\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    span[checkbox][checked='half-checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='half-checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 10px;\n      height: 2px;\n      background-color: #fff;\n    }\n  `\n\n  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'\n  @state() private expanded?: boolean = false\n\n  get rendererTemplate() {\n    var { selectable = false } = this.column.record.options || {}\n    var { __children__ } = this.record\n\n    const expandable = __children__ && __children__.length > 0\n\n    return html`\n      <div wrap>\n        ${expandable\n          ? html`\n              <span\n                expander\n                @click=${this.onClickExpander.bind(this)}\n                ?expanded=${this.expanded}\n                ?collapsed=${!this.expanded}\n              ></span>\n            `\n          : html`<span expander></span>`}\n        ${selectable\n          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`\n          : nothing}\n\n        <span label>${this.value}</span>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var { __depth__, __check_in_tree__, __expanded__ } = this.record\n    this.checked = __check_in_tree__\n    this.expanded = __expanded__\n\n    this.style.setProperty('--tree-depth', String(__depth__))\n  }\n\n  onClickCheckbox(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent('check-in-tree', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-renderer-tree.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxGristRenderer } from './ox-grist-renderer'\n\n@customElement('ox-grist-tree-renderer')\nexport class OxGristRendererTree extends OxGristRenderer {\n  static styles = css`\n    :host {\n      overflow: hidden;\n    }\n\n    div[wrap] {\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      width: 100%;\n      padding-left: calc(var(--tree-depth, 0) * 18px);\n    }\n\n    span[expander] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[expander][collapsed]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-25%, -50%) rotate(-90deg);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[expander][expanded]::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -25%);\n      content: ' ';\n      border: 5px solid transparent;\n      border-top: 5px solid var(--primary-color, #1890ff);\n    }\n\n    span[checkbox] {\n      display: inline-block;\n      vertical-align: middle;\n      width: 12px;\n      height: 20px;\n      cursor: pointer;\n      position: relative;\n    }\n\n    span[checkbox]::before {\n      cursor: pointer;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: ' ';\n      display: block;\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--primary-color, #1890ff);\n      border-radius: 2px;\n    }\n\n    span[label] {\n      flex: 1;\n    }\n\n    span[checkbox][checked='checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      width: 3px;\n      height: 7px;\n      border: 2px solid #fff;\n      border-top: none;\n      border-left: none;\n      -webkit-transform: translate(-50%, -50%) rotate(45deg);\n      -ms-transform: translate(-50%, -50%) rotate(45deg);\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    span[checkbox][checked='half-checked']::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    span[checkbox][checked='half-checked']::after {\n      position: absolute;\n      content: ' ';\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 10px;\n      height: 2px;\n      background-color: #fff;\n    }\n  `\n\n  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'\n  @state() private expanded?: boolean = false\n\n  get rendererTemplate() {\n    var { selectable = false } = this.column.record.options || {}\n    var { __children__ } = this.record\n\n    const expandable = __children__ && __children__.length > 0\n\n    return html`\n      <div wrap>\n        ${expandable\n          ? html`\n              <span\n                expander\n                @click=${this.onClickExpander.bind(this)}\n                ?expanded=${this.expanded}\n                ?collapsed=${!this.expanded}\n              ></span>\n            `\n          : html`<span expander></span>`}\n        ${selectable\n          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`\n          : nothing}\n\n        <span label>${this.value}</span>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var { __depth__, __check_in_tree__, __expanded__ } = this.record\n    this.checked = __check_in_tree__\n    this.expanded = __expanded__\n\n    this.style.setProperty('--tree-depth', String(__depth__))\n  }\n\n  onClickCheckbox(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent('check-in-tree', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.dispatchEvent(\n      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {\n        bubbles: true,\n        composed: true,\n        detail: this.record\n      })\n    )\n\n    this.requestUpdate()\n  }\n\n  get editableOnClick() {\n    return false\n  }\n}\n"]}