@operato/data-grist 1.11.6 → 1.11.7

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

@@ -0,0 +1,134 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxGristRenderer } from './ox-grist-renderer';
+let OxGristRendererTree = class OxGristRendererTree extends OxGristRenderer {
+    get rendererTemplate() {
+        var { childrenProperty = 'children' } = this.column.record.options || {};
+        var { __parent__: parent, __children__: children, __collapsed__: collapsed = true } = this.record;
+        const expandable = childrenProperty in this.record;
+        return html `
+      ${expandable
+            ? html ` <span expander @click=${this.onClickExpander.bind(this)} ?collapsed=${collapsed}></span> `
+            : html ``}
+      <span checkbox></span>
+      <span label>${this.value}</span>
+    `;
+    }
+    updated(changes) {
+        var { __depth__ } = this.record;
+        this.style.setProperty('--tree-depth', String(__depth__));
+    }
+    onClickExpander(e) {
+        e.stopPropagation();
+        this.record.__collapsed__ = !this.record.__collapsed__;
+        this.requestUpdate();
+    }
+};
+OxGristRendererTree.styles = css `
+    :host {
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      width: 100%;
+      padding-left: calc(var(--tree-depth, 0) * 18px);
+
+      cursor: pointer;
+    }
+
+    span[expander] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[expander]::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[expander][collapsed]::before {
+      transform: translate(-25%, -50%) rotate(-90deg);
+    }
+
+    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[label][selected] {
+      background-color: var(--primary-color, #1890ff);
+    }
+
+    li[checked='checked'] > div[self] > span[checkbox]::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    li[checked='checked'] > div[self] > span[checkbox]::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);
+    }
+
+    li[checked='half-checked'] > div[self] > span[checkbox]::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    li[checked='half-checked'] > div[self] > span[checkbox]::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+    }
+  `;
+OxGristRendererTree = __decorate([
+    customElement('ox-grist-tree-renderer')
+], OxGristRendererTree);
+export { OxGristRendererTree };
+//# sourceMappingURL=ox-grist-renderer-tree.js.map

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

@@ -0,0 +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,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAG9C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;IAwGtD,IAAI,gBAAgB;QAClB,IAAI,EAAE,gBAAgB,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QACxE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEjG,MAAM,UAAU,GAAG,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAA;QAElD,OAAO,IAAI,CAAA;QACP,UAAU;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,SAAS,WAAW;YAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;oBAEI,IAAI,CAAC,KAAK;KACzB,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE/B,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,MAAM,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAA;QAEtD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;;AAlIM,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGlB,AArGY,CAqGZ;AAtGU,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA4L/B","sourcesContent":["import { PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.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      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      cursor: pointer;\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]::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[expander][collapsed]::before {\n      transform: translate(-25%, -50%) rotate(-90deg);\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    li[checked='checked'] > div[self] > span[checkbox]::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    li[checked='checked'] > div[self] > span[checkbox]::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    li[checked='half-checked'] > div[self] > span[checkbox]::before {\n      background-color: var(--primary-color, #1890ff);\n      border-color: var(--primary-color, #1890ff);\n    }\n\n    li[checked='half-checked'] > div[self] > span[checkbox]::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  get rendererTemplate() {\n    var { childrenProperty = 'children' } = this.column.record.options || {}\n    var { __parent__: parent, __children__: children, __collapsed__: collapsed = true } = this.record\n\n    const expandable = childrenProperty in this.record\n\n    return html`\n      ${expandable\n        ? html` <span expander @click=${this.onClickExpander.bind(this)} ?collapsed=${collapsed}></span> `\n        : html``}\n      <span checkbox></span>\n      <span label>${this.value}</span>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    var { __depth__ } = this.record\n\n    this.style.setProperty('--tree-depth', String(__depth__))\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    this.record.__collapsed__ = !this.record.__collapsed__\n\n    this.requestUpdate()\n  }\n\n  // onClickItem(e: MouseEvent) {\n  //   e.stopPropagation()\n\n  //   const target = e.target as HTMLSpanElement\n  //   const itemElement = target!.closest('li') as HTMLLIElement\n\n  //   var item = (itemElement as any).item\n  //   var checked = itemElement.getAttribute('checked') || ''\n\n  //   this.walkTreeCheckedUpdate(item, checked == '' || checked == 'unchecked' ? 'checked' : 'unchecked')\n  //   this.updateCheckedAll(this.data!)\n\n  //   this.requestUpdate()\n  // }\n\n  // walkTreeCheckedUpdate(item: TreeItem, checked: string = '') {\n  //   const { __status__ } = item\n  //   const children = item[this.childrenProperty] as TreeItem[]\n\n  //   children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))\n  //   item.__status__ = {\n  //     ...__status__,\n  //     checked\n  //   }\n  // }\n\n  // updateCheckedAll(item: TreeItem) {\n  //   const { __status__ } = item\n  //   const children = item[this.childrenProperty] as TreeItem[]\n\n  //   if (!children || children.length == 0) {\n  //     return\n  //   }\n\n  //   children.forEach(child => this.updateCheckedAll(child))\n\n  //   var checked: string = ''\n\n  //   children.forEach(child => {\n  //     const { __status__ = {} } = child\n\n  //     if (__status__.checked == 'half-checked') {\n  //       checked = 'half-checked'\n  //     } else if (__status__.checked == 'checked') {\n  //       checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked'\n  //     } else {\n  //       checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked'\n  //     }\n  //   })\n\n  //   item.__status__ = {\n  //     ...__status__,\n  //     checked\n  //   }\n  // }\n}\n"]}

package/dist/src/types.d.ts

@@ -107,6 +107,8 @@ export type ColumnWidthCallback = (column: ColumnConfig) => string;
 export type HeaderConfig = {
     renderer: HeaderRenderer;
     style?: string;
+    group?: string;
+    groupStyle?: string;
 };
 export type HeaderRenderer = (column: ColumnConfig) => any;
 export type ValueGeneratorFn = (...args: any[]) => any;

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAmFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n}\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n */\nexport type FiltersConfig = {\n  /**\n   * Specifies whether to provide filtering functionality in the header.\n   */\n  header?: boolean\n}\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  fixed?: boolean\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorFunc\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  style?: string\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  [extended: string]: any\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAmFA,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,mCAAa,CAAA;AACf,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nimport { DataCardField } from './data-card/data-card-field'\nimport { DataCardGutter } from './data-card/data-card-gutter'\nimport { RecordCard } from './data-card/record-card'\nimport { DataGridField } from './data-grid/data-grid-field'\nimport { DataListField } from './data-list/data-list-field'\nimport { DataListGutter } from './data-list/data-list-gutter'\nimport { RecordPartial } from './data-list/record-partial'\nimport { DataReportField } from './data-report/data-report-field'\nimport { OxGristEditor } from './editors'\nimport { QueryFilter } from './filters'\nimport { OxGristRenderer } from './renderers/ox-grist-renderer'\n\nexport type GristConfig = {\n  columns: ColumnConfig[]\n  rows: RowsConfig\n  list: ListConfig\n  pagination?: PaginationConfig\n  sorters?: SortersConfig\n  filters?: FiltersConfig\n}\n\nexport type SorterConfig = { name: string; desc?: boolean }\nexport type SortersConfig = SorterConfig[]\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfigObject = {\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n  value?: string | number | boolean | string[] | number[] | undefined\n  label?: string\n}\nexport type FilterConfig = FilterConfigObject | FilterOperator | boolean\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\n/**\n * Configuration options for filters.\n */\nexport type FiltersConfig = {\n  /**\n   * Specifies whether to provide filtering functionality in the header.\n   */\n  header?: boolean\n}\n\nexport type PaginationConfig = {\n  page?: number\n  limit?: number\n  pages?: number[]\n  infinite?: boolean\n}\n\nexport enum InheritedValueType {\n  None = 'None',\n  Include = 'Include',\n  Only = 'Only'\n}\n\nexport type FetchOption = {\n  page?: number\n  limit?: number\n  sorters?: SortersConfig\n  sortings?: SortersConfig\n  filters?: QueryFilter[]\n  inherited?: InheritedValueType\n  options?: object\n}\nexport type FetchResult = {\n  page?: number\n  limit?: number\n  total: number\n  records: GristRecord[]\n} | void\nexport type FetchHandler = (param: FetchOption) => Promise<FetchResult>\n\nexport type GristEventHandler = (\n  columns: ColumnConfig[],\n  data?: GristData,\n  column?: ColumnConfig,\n  record?: GristRecord,\n  rowIndex?: number,\n  target?: any\n) => void\n\nexport type AccumulatorFunc =\n  | 'sum'\n  | 'avg'\n  | 'count'\n  | 'min'\n  | 'max'\n  | ((data: GristData, column: ColumnConfig) => string | number)\n\nexport type ColumnConfig = {\n  type: string\n  name: string\n  gutterName?: string\n  fixed?: boolean\n  header: HeaderConfig\n  record: RecordConfig\n  handlers: GristEventHandlerSet\n  label: LabelConfig\n  hidden?: boolean\n  sortable?: boolean\n  resizable?: boolean\n  width?: number | string | ColumnWidthCallback\n  forList?: boolean\n  validation?: ValidationCallback\n  accumulator?: AccumulatorFunc\n  filter?: FilterConfig\n  imex?: ImexConfig | boolean\n  multiple?: boolean\n  rowCount?: boolean\n}\n\nexport type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean\n\nexport type LabelConfig =\n  | string\n  | boolean\n  | {\n      renderer: LabelRenderer\n    }\n\nexport type LabelRenderer = () => void\n\nexport type ColumnWidthCallback = (column: ColumnConfig) => string\n\nexport type HeaderConfig = {\n  renderer: HeaderRenderer\n  style?: string\n  group?: string\n  groupStyle?: string\n}\nexport type HeaderRenderer = (column: ColumnConfig) => any\n\nexport type ValueGeneratorFn = (...args: any[]) => any\nexport type DefaultValueFnConfig =\n  | {\n      /**\n       * The name of the default value function to be used for the column.\n       */\n      name: string\n\n      /**\n       * The parameters to be passed to the default value function.\n       */\n      params?: any[]\n    }\n  | Function\n\nexport type RecordConfig = {\n  renderer: FieldRenderer\n  editor?: FieldEditor\n  editable?: boolean | Function\n  mandatory?: boolean\n  classifier: GristClassifier\n  align?: 'left' | 'right' | 'center'\n  options: any\n  rowOptionField?: string\n  defaultValue?: DefaultValueFnConfig\n  [extended: string]: any\n}\n\nexport type FieldRenderer = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  owner:\n    | DataGridField\n    | RecordCard\n    | DataCardGutter\n    | DataCardField\n    | DataListGutter\n    | DataListField\n    | RecordPartial\n    | DataReportField\n    | Element\n) => OxGristRenderer | TemplateResult | string | void\nexport type FieldEditor = (\n  value: any,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n) => OxGristEditor\n\nexport type FilterSelectRenderer = (\n  column: ColumnConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\nexport type GristEventHandlerSet = {\n  click?: GristEventHandler\n  dblclick?: GristEventHandler\n  focus?: GristEventHandler\n}\n\nexport type ListConfig = {\n  thumbnail?: string\n  fields: string[]\n  details: string[]\n}\n\nexport type ImexConfig = {\n  header: string\n  key: string\n  width: number\n  type: string\n}\n\nexport type RowsConfig = {\n  accumulator?: boolean\n  appendable: boolean\n  insertable: boolean\n  selectable?: RowSelectableConfig\n  groups: GroupConfig[]\n  totals: string[]\n  classifier: GristClassifier\n  handlers: GristEventHandlerSet\n}\n\nexport type GristClassifier = (\n  record: GristRecord,\n  rowIndex: number\n) => { emphasized?: boolean | string | string[]; [key: string]: any } | void\n\nexport type GroupConfig = {\n  align: string\n  titleColumn?: ColumnConfig\n  title: string\n  value?: string\n  groupName?: string\n  row?: number\n  column: string | number\n  rowspan: number\n  colspan?: number\n}\n\nexport type RowSelectableConfig = {\n  multiple?: boolean\n}\n\nexport type GristRecord = {\n  id?: string\n  name?: string\n  __seq__?: number\n  __dirty__?: string\n  __selected__?: boolean\n  __changes__?: object[]\n  __dirtyfields__?: { [key: string]: any }\n  __origin__?: any\n  [key: string]: any\n}\n\nexport type GristData = {\n  page?: number\n  total?: number\n  limit?: number\n  records: GristRecord[]\n}\n\nexport type GristSelectFunction = (record: GristRecord) => boolean\n"]}

package/dist/stories/fixed-column.stories copy.d.ts

@@ -0,0 +1,26 @@
+import '../src/index.js';
+import '../src/filters/filters-form.js';
+import '../src/sorters/sorters-control.js';
+import '../src/record-view/record-creator.js';
+import '@operato/popup/ox-popup-list.js';
+import '@material/mwc-icon';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        config: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    config: object;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/fixed-column.stories copy.js

@@ -0,0 +1,448 @@
+import '../src/index.js';
+import '../src/filters/filters-form.js';
+import '../src/sorters/sorters-control.js';
+import '../src/record-view/record-creator.js';
+import '@operato/popup/ox-popup-list.js';
+import '@material/mwc-icon';
+import { html } from 'lit';
+const fetchHandler = async ({ page, limit }) => {
+    var total = 120993;
+    var start = (page - 1) * limit;
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return {
+        total,
+        records: Array(limit * page > total ? total % limit : limit)
+            .fill('')
+            .map((item, idx) => {
+            return {
+                id: String(idx),
+                name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+                description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+                email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+                active: Math.round(Math.random() * 2) % 2 ? true : false,
+                barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
+                company: idx % 2
+                    ? {
+                        id: '2',
+                        name: 'HatioLAB',
+                        description: `경기도 성남시-${start + idx + 1}`
+                    }
+                    : {
+                        id: '3',
+                        name: 'HatioSEA',
+                        description: `말레이시아 세티아알람-${start + idx + 1}`
+                    },
+                thumbnail: idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
+                        ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                        : idx % 4 === 2
+                            ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                            : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+                role: ['admin', 'worker', 'tester'][idx % 3],
+                color: idx % 2 ? `#87f018` : `#180f87`,
+                rate: Math.round(Math.random() * 100),
+                dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+                dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+                homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+                json5: {
+                    abc: 'abc',
+                    value: 123
+                },
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+const config = {
+    list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['role', 'email']
+    },
+    columns: [
+        {
+            type: 'gutter',
+            gutterName: 'dirty',
+            fixed: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'sequence',
+            fixed: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'row-selector',
+            multiple: true,
+            fixed: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'edit',
+            title: 'edit',
+            handlers: {
+                click: function () {
+                    console.log('clicked');
+                }
+            },
+            fixed: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            title: 'add',
+            handlers: {
+                click: 'record-copy'
+            },
+            fixed: true
+        },
+        {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            title: 'download',
+            handlers: {
+                click: 'move-down'
+            },
+            fixed: true
+        },
+        {
+            type: 'string',
+            name: 'id',
+            hidden: true
+        },
+        {
+            type: 'link',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+                editable: true,
+                options: {
+                    // href: 'http://hatiolab.com',
+                    href: function (column, record, rowIndex) {
+                        return record['homepage'];
+                    },
+                    target: '_blank'
+                }
+            },
+            filter: 'search',
+            sortable: true,
+            width: 120,
+            fixed: true
+        },
+        {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+                editable: true,
+                align: 'left'
+            },
+            width: 200,
+            handlers: {
+                click: (columns, data, column, record, rowIndex, target) => {
+                    alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`);
+                }
+            }
+        },
+        {
+            type: 'email',
+            name: 'email',
+            label: true,
+            header: 'email',
+            record: {
+                editable: true
+            },
+            filter: 'search',
+            sortable: true,
+            width: 130,
+            validation: function (after, before, record, column) {
+                if (after.indexOf('@') == -1) {
+                    document.dispatchEvent(new CustomEvent('notify', {
+                        detail: {
+                            type: 'error',
+                            message: `invalid value - ${after}`
+                        }
+                    }));
+                    return false;
+                }
+                return true;
+            }
+        },
+        {
+            type: 'boolean',
+            name: 'active',
+            header: 'active',
+            record: {
+                editable: true
+            },
+            filter: true,
+            handlers: {
+                dblclick: () => {
+                    const grist = document.querySelector('ox-grist');
+                    console.log(grist.dirtyRecords);
+                }
+            },
+            sortable: true,
+            width: 60
+        },
+        {
+            type: 'string[]',
+            name: 'role',
+            label: true,
+            header: 'role',
+            record: {
+                options: ['', 'admin', 'worker', 'tester'],
+                editable: true
+            },
+            filter: true,
+            sortable: true,
+            width: 120
+        },
+        {
+            type: 'color',
+            name: 'color',
+            header: 'color',
+            record: {
+                editable: true
+            },
+            sortable: true,
+            width: 50
+        },
+        {
+            type: 'float',
+            name: 'rate',
+            header: 'rate',
+            record: {
+                align: 'right',
+                editable: true,
+                defaultValue: 10000.1
+            },
+            filter: 'between',
+            sortable: true,
+            width: 50
+        },
+        {
+            type: 'json5',
+            name: 'json5',
+            header: 'JSON5',
+            width: 200
+        },
+        {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+                editable: true
+            },
+            width: 120
+        },
+        {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+                editable: true,
+                defaultValue: {
+                    name: 'now'
+                }
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+        },
+        {
+            type: 'datetime',
+            name: 'createdAt',
+            header: 'created at',
+            record: {
+                editable: false
+            },
+            sortable: true,
+            width: 180
+        }
+    ],
+    rows: {
+        selectable: {
+            multiple: true
+        },
+        handlers: {
+            focus: 'select-row-toggle'
+        },
+        classifier: function (record, rowIndex) {
+            const rate = record['rate'];
+            const emphasized = rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined;
+            return {
+                emphasized
+            };
+        }
+    },
+    sorters: [
+        {
+            name: 'name',
+            desc: true
+        },
+        {
+            name: 'email'
+        }
+    ],
+    pagination: {
+        pages: [20, 30, 50, 100, 200]
+    }
+};
+export default {
+    title: 'fixed column',
+    component: 'ox-grist',
+    argTypes: {
+        config: { control: 'object' }
+    }
+};
+const Template = ({ config }) => html ` <link
+    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+    rel="stylesheet"
+  />
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+
+      --mdc-icon-size: 24px;
+    }
+    #sorters mwc-icon,
+    #modes mwc-icon {
+      --mdc-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
+
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
+      }
+    }
+  </style>
+
+  <ox-grist
+    mode="GRID"
+    .config=${config}
+    .fetchHandler=${fetchHandler}
+    @filters-change=${(e) => console.log('filters', e.target.filters)}
+  >
+    <div slot="headroom">
+      <div id="filters">
+        <ox-filters-form autofocus></ox-filters-form>
+      </div>
+
+      <div id="sorters">
+        Sort
+        <mwc-icon
+          @click=${(e) => {
+    const target = e.currentTarget;
+    target.closest('#sorters').querySelector('#sorter-control').open({
+        right: 0,
+        top: target.offsetTop + target.offsetHeight
+    });
+}}
+          >expand_more</mwc-icon
+        >
+        <ox-popup id="sorter-control">
+          <ox-sorters-control> </ox-sorters-control>
+        </ox-popup>
+      </div>
+
+      <ox-record-creator id="add" light-popup>
+        <button><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {
+    config
+};
+//# sourceMappingURL=fixed-column.stories%20copy.js.map