npm - @operato/data-grist - Versions diffs - 1.8.0 → 1.9.0 - Mend

@operato/data-grist 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.md +9 -0
package/dist/src/data-grid/data-grid-body.d.ts +1 -1
package/dist/src/data-grid/data-grid-body.js +4 -3
package/dist/src/data-grid/data-grid-body.js.map +1 -1
package/dist/src/data-grid/data-grid-field.d.ts +1 -1
package/dist/src/data-grid/data-grid-field.js +2 -3
package/dist/src/data-grid/data-grid-field.js.map +1 -1
package/dist/src/data-grid/data-grid-header.js +17 -10
package/dist/src/data-grid/data-grid-header.js.map +1 -1
package/dist/src/data-grid/data-grid.d.ts +1 -1
package/dist/src/data-grid/data-grid.js +13 -3
package/dist/src/data-grid/data-grid.js.map +1 -1
package/dist/stories/fixed-column.stories.js +6 -3
package/dist/stories/fixed-column.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2
package/src/data-grid/data-grid-body.ts +3 -2
package/src/data-grid/data-grid-field.ts +2 -2
package/src/data-grid/data-grid-header.ts +22 -11
package/src/data-grid/data-grid.ts +10 -3
package/stories/fixed-column.stories.ts +6 -3

package/dist/src/data-grid/data-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import '../empty-note'\nimport './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/*\n DataGrid\n /\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n\n border-width: var(--grid-container-border-width);\n }\n\n ox-grid-body {\n flex: 1;\n position: relative;\n }\n\n ox-empty-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n @media print {\n :host {\n zoom: 80%;\n }\n }\n `\n ]\n\n @property({ type: Object }) focused?: { row: number; column: number }\n @property({ type: Boolean }) empty?: boolean\n\n @query('ox-grid-body', true) body!: LitElement\n @query('ox-grid-header', true) header!: DataGridHeader\n @query('ox-grid-footer', true) footer!: LitElement\n\n private widths: string[] = []\n\n firstUpdated() {\n / header and body scroll synchronization /\n this.header.addEventListener('scroll', e => {\n if (this.body.scrollLeft !== this.header.scrollLeft) {\n this.body.scrollLeft = this.header.scrollLeft\n }\n })\n\n this.body.addEventListener('scroll', e => {\n if (this.body.scrollLeft !== this.header.scrollLeft) {\n this.header.scrollLeft = this.body.scrollLeft\n }\n })\n\n this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n / record selection processing /\n this.addEventListener('select-all-change', e => {\n if (this.data.records.length == 0) {\n return\n }\n\n var { selected } = (e as CustomEvent).detail\n var { records } = this.data\n\n records.forEach(record => (record['__selected__'] = selected))\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n })\n\n this.addEventListener('focus-change', e => {\n const { row, column } = (e as CustomEvent).detail \|\| {}\n if (!this.focused \|\| this.focused.row != row \|\| this.focused.column != column) {\n this.focused = { row, column }\n this.focus()\n this.requestUpdate()\n }\n })\n }\n\n onWheelEvent(e: WheelEvent) {\n if (this.body.scrollWidth > this.body.clientWidth) {\n var delta = Math.max(-1, Math.min(1, e.deltaY \|\| 0))\n this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta 30)\n\n var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n var atStart = this.body.scrollLeft === 0\n var atEnd = this.body.scrollLeft === maxScrollLeft\n\n // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n if ((atStart && delta > 0) \|\| (atEnd && delta < 0)) {\n return true\n }\n\n e.preventDefault()\n }\n }\n\n onSelectRecordChanged({\n selectedRecords,\n added,\n removed\n }: {\n selectedRecords: GristRecord[]\n added: GristRecord[]\n removed: GristRecord[]\n }): void {\n super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n }\n\n onRecordChanged(\n recordData: GristRecord,\n row: number,\n column: ColumnConfig \| null /* TODO column should be removed /\n ) {\n / record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. /\n super.onRecordChanged(recordData, row, column)\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('data')) {\n /\n * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n * data의 변동에 대해서도 다시 계산되어야 한다.\n /\n this.calculateWidths(this.config.columns)\n\n if (this.focused && 'row' in this.focused) {\n var { row = 0, column = 0 } = this.focused\n var { records: oldrecords = [] } = changes.get('data')\n var { records: newrecords } = this.data\n\n var oldrecord = oldrecords[row]\n\n if (oldrecord && oldrecord !== newrecords[row]) {\n var newrecord = newrecords.find(\n record =>\n / TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. /\n oldrecord === record \|\|\n ('id' in oldrecord\n ? record.id == oldrecord.id\n : 'name' in oldrecord\n ? record.name == oldrecord.name\n : false)\n )\n\n this.focused = {\n row: newrecord ? newrecords.indexOf(newrecord) : row,\n column\n }\n }\n }\n } else if (changes.has('config')) {\n this.calculateWidths(this.config.columns)\n }\n\n / grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. /\n // this.focus()\n }\n\n calculateWidths(columns: ColumnConfig[]) {\n /\n * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n */\n const widths = columns\n .filter(column => !column.hidden)\n .map(column => {\n switch (typeof column.width) {\n case 'number':\n return column.width + 'px'\n case 'string':\n return column.width\n case 'function':\n return column.width.call(this, column)\n default:\n return 'auto'\n }\n })\n .concat(['auto'])\n .join(' ')\n\n this.style.setProperty('--grid-template-columns', widths)\n this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n }\n\n render() {\n var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n var paginatable = !pagination.infinite\n var data = this.data\n\n return html`\n <ox-grid-header\n .columns=${columns}\n .sorters=${this.sorters}\n .filters=${this.filters}\n .data=${data}\n ?filtering-feature=${filters?.header}\n @column-width-change=${(e: CustomEvent) => {\n let { idx, width } = e.detail\n columns[idx].width = width\n this.calculateWidths(columns)\n }}\n ></ox-grid-header>\n\n <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused!}>\n ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n </ox-grid-body>\n ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n `\n }\n\n focus() {\n super.focus()\n\n this.body.focus()\n }\n\n get pullToRefreshTarget() {\n return this.body\n }\n}\n"]}
1	+ {"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import '../empty-note'\nimport './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/*\n DataGrid\n /\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n\n border-width: var(--grid-container-border-width);\n }\n\n ox-grid-body {\n flex: 1;\n position: relative;\n }\n\n ox-empty-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n @media print {\n :host {\n zoom: 80%;\n }\n }\n `\n ]\n\n @property({ type: Object }) focused?: { row: number; column: number }\n @property({ type: Boolean }) empty?: boolean\n\n @query('ox-grid-body', true) body!: LitElement\n @query('ox-grid-header', true) header!: DataGridHeader\n @query('ox-grid-footer', true) footer!: LitElement\n\n @state() fixedLefts: number[] = []\n\n firstUpdated() {\n / header and body scroll synchronization /\n this.header.addEventListener('scroll', e => {\n if (this.body.scrollLeft !== this.header.scrollLeft) {\n this.body.scrollLeft = this.header.scrollLeft\n }\n })\n\n this.body.addEventListener('scroll', e => {\n if (this.body.scrollLeft !== this.header.scrollLeft) {\n this.header.scrollLeft = this.body.scrollLeft\n }\n })\n\n this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n / record selection processing /\n this.addEventListener('select-all-change', e => {\n if (this.data.records.length == 0) {\n return\n }\n\n var { selected } = (e as CustomEvent).detail\n var { records } = this.data\n\n records.forEach(record => (record['__selected__'] = selected))\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n })\n\n this.addEventListener('focus-change', e => {\n const { row, column } = (e as CustomEvent).detail \|\| {}\n if (!this.focused \|\| this.focused.row != row \|\| this.focused.column != column) {\n this.focused = { row, column }\n this.focus()\n this.requestUpdate()\n }\n })\n }\n\n onWheelEvent(e: WheelEvent) {\n if (this.body.scrollWidth > this.body.clientWidth) {\n var delta = Math.max(-1, Math.min(1, e.deltaY \|\| 0))\n this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta 30)\n\n var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n var atStart = this.body.scrollLeft === 0\n var atEnd = this.body.scrollLeft === maxScrollLeft\n\n // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n if ((atStart && delta > 0) \|\| (atEnd && delta < 0)) {\n return true\n }\n\n e.preventDefault()\n }\n }\n\n onSelectRecordChanged({\n selectedRecords,\n added,\n removed\n }: {\n selectedRecords: GristRecord[]\n added: GristRecord[]\n removed: GristRecord[]\n }): void {\n super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n }\n\n onRecordChanged(\n recordData: GristRecord,\n row: number,\n column: ColumnConfig \| null /* TODO column should be removed /\n ) {\n / record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. /\n super.onRecordChanged(recordData, row, column)\n\n this.header.requestUpdate()\n this.body.requestUpdate()\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('data')) {\n /\n * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n * data의 변동에 대해서도 다시 계산되어야 한다.\n /\n this.calculateWidths(this.config.columns)\n\n if (this.focused && 'row' in this.focused) {\n var { row = 0, column = 0 } = this.focused\n var { records: oldrecords = [] } = changes.get('data')\n var { records: newrecords } = this.data\n\n var oldrecord = oldrecords[row]\n\n if (oldrecord && oldrecord !== newrecords[row]) {\n var newrecord = newrecords.find(\n record =>\n / TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. /\n oldrecord === record \|\|\n ('id' in oldrecord\n ? record.id == oldrecord.id\n : 'name' in oldrecord\n ? record.name == oldrecord.name\n : false)\n )\n\n this.focused = {\n row: newrecord ? newrecords.indexOf(newrecord) : row,\n column\n }\n }\n }\n } else if (changes.has('config')) {\n this.calculateWidths(this.config.columns)\n }\n\n / grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. /\n // this.focus()\n }\n\n calculateWidths(columns: ColumnConfig[]) {\n /\n * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n */\n const widths = columns\n .filter(column => !column.hidden)\n .map(column => {\n switch (typeof column.width) {\n case 'number':\n return column.width + 'px'\n case 'string':\n return column.width\n case 'function':\n return column.width.call(this, column)\n default:\n return 'auto'\n }\n })\n .concat(['auto'])\n .join(' ')\n\n this.style.setProperty('--grid-template-columns', widths)\n this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n }\n\n render() {\n var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n var paginatable = !pagination.infinite\n var data = this.data\n\n return html`\n <ox-grid-header\n .columns=${columns}\n .sorters=${this.sorters}\n .filters=${this.filters}\n .data=${data}\n ?filtering-feature=${filters?.header}\n @column-width-change=${(e: CustomEvent) => {\n let { idx, width } = e.detail\n columns[idx].width = width\n this.calculateWidths(columns)\n }}\n @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}\n ></ox-grid-header>\n\n <ox-grid-body\n .config=${this.config}\n .columns=${columns}\n .data=${data}\n .focused=${this.focused!}\n .fixedLefts=${this.fixedLefts}\n >\n ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n </ox-grid-body>\n ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n `\n }\n\n focus() {\n super.focus()\n\n this.body.focus()\n }\n\n get pullToRefreshTarget() {\n return this.body\n }\n}\n"]}

package/dist/stories/fixed-column.stories.js CHANGED Viewed

@@ -97,7 +97,8 @@ const config = {
             title: 'add',
             handlers: {
                 click: 'record-copy'
-            }
+            },
+            fixed: true
         },
         {
             type: 'gutter',
@@ -106,7 +107,8 @@ const config = {
             title: 'download',
             handlers: {
                 click: 'move-down'
-            }
+            },
+            fixed: true
         },
         {
             type: 'string',
@@ -130,7 +132,8 @@ const config = {
             },
             filter: 'search',
             sortable: true,
-            width: 120
+            width: 120,
+            fixed: true
         },
         {
             type: 'string',

package/dist/stories/fixed-column.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fixed-column.stories.js","sourceRoot":"","sources":["../../stories/fixed-column.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,iCAAiC,CAAA;AACxC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAW1C,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,IAAI,KAAK,GAAG,MAAM,CAAA;IAClB,IAAI,KAAK,GAAG,CAAC,IAAK,GAAG,CAAC,CAAC,GAAG,KAAM,CAAA;IAEhC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,KAAM,GAAG,IAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAM,CAAC,CAAC,CAAC,KAAK,CAAC;aAC5D,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACjB,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;gBACf,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC1E,WAAW,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC5G,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY;gBAC/F,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACxD,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAClF,OAAO,EACL,GAAG,GAAG,CAAC;oBACL,CAAC,CAAC;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,UAAU;wBAChB,WAAW,EAAE,WAAW,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;qBAC1C;oBACH,CAAC,CAAC;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,UAAU;wBAChB,WAAW,EAAE,eAAe,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;qBAC9C;gBACP,SAAS,EACP,GAAG,GAAG,CAAC,KAAK,CAAC;oBACX,CAAC,CAAC,EAAE,CAAC,eAAe;oBACpB,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC;wBACf,CAAC,CAAC,qDAAqD;wBACvD,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC;4BACf,CAAC,CAAC,uDAAuD;4BACzD,CAAC,CAAC,uCAAuC,CAAC,kBAAkB;gBAChE,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBAC5C,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACtC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;gBACrC,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBACnF,YAAY,EAAE,CAAC,cAAc,EAAE,uBAAuB,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBACtG,QAAQ,EACN,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,uBAAuB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,gCAAgC,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBACxG,KAAK,EAAE;oBACL,GAAG,EAAE,KAAK;oBACV,KAAK,EAAE,GAAG;iBACX;gBACD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG;IACb,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;QAC/B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;KAC3B;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,UAAU;YACtB,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,cAAc;YAC1B,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE;gBACR,KAAK,EAAE;oBACL,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;gBACxB,CAAC;aACF;YACD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE;gBACR,KAAK,EAAE,aAAa;aACrB;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,gBAAgB;YACtB,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE;gBACR,KAAK,EAAE,WAAW;aACnB;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,IAAI;SACb;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE;oBACP,+BAA+B;oBAC/B,IAAI,EAAE,UAAU,MAAoB,EAAE,MAAmB,EAAE,QAAgB;wBACzE,OAAO,MAAM,CAAC,UAAU,CAAC,CAAA;oBAC3B,CAAC;oBACD,MAAM,EAAE,QAAQ;iBACjB;aACF;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,MAAM,EAAE,aAAa;YACrB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE;gBACR,KAAK,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBACzD,KAAK,CAAC,GAAG,MAAO,CAAC,IAAI,IAAI,MAAO,CAAC,MAAO,CAAC,IAAI,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAA;gBACtE,CAAC;aACsB;SAC1B;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;YACV,UAAU,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;gBACjD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;oBAC7B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,MAAM,EAAE;4BACN,IAAI,EAAE,OAAO;4BACb,OAAO,EAAE,mBAAmB,KAAK,EAAE;yBACpC;qBACF,CAAC,CACH,CAAA;oBACD,OAAO,KAAK,CAAA;gBACd,CAAC;gBACD,OAAO,IAAI,CAAA;YACb,CAAuB;SACxB;QACD;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE;gBACR,QAAQ,EAAE,GAAG,EAAE;oBACb,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAQ,CAAA;oBACvD,OAAO,CAAC,GAAG,CAAC,KAAM,CAAC,YAAY,CAAC,CAAA;gBAClC,CAAC;aACF;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;gBAC1C,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,OAAO;aACtB;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,WAAW;YACnB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,IAAI,EAAE,KAAK;iBACZ;aACF;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;aAChB;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,QAAQ,EAAE,IAAI;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,mBAAmB;SAC3B;QACD,UAAU,EAAE,UAAU,MAAM,EAAE,QAAQ;YACpC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;YAC3B,MAAM,UAAU,GACd,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC3G,OAAO;gBACL,UAAU;aACX,CAAA;QACH,CAAoB;KACrB;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,IAAI;SACX;QACD;YACE,IAAI,EAAE,OAAO;SACd;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;KAC9B;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC9B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,MAAM,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2GlD,MAAM;oBACA,YAAY;sBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;;;;mBAUlE,CAAC,CAAQ,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAC5C;IAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAE,CAAC,aAAa,CAAC,iBAAiB,CAAS,CAAC,IAAI,CAAC;QAC1E,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY;KAC5C,CAAC,CAAA;AACJ,CAAC;;;;;;;;;;;;cAYG,CAAA;AAEd,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM;CACP,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source /\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` / wrong source /,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty',\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'sequence',\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true,\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n },\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n }\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'fixed column',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link\n href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --mdc-icon-size: 24px;\n }\n #sorters mwc-icon,\n #modes mwc-icon {\n --mdc-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > mwc-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > mwc-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button mwc-icon {\n font-size: 2em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <mwc-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</mwc-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><mwc-icon>add</mwc-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}
1	+ {"version":3,"file":"fixed-column.stories.js","sourceRoot":"","sources":["../../stories/fixed-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source /\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` / wrong source /,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty',\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'sequence',\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true,\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n },\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n },\n fixed: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n },\n fixed: true\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120,\n fixed: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n }\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'fixed column',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link\n href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --mdc-icon-size: 24px;\n }\n #sorters mwc-icon,\n #modes mwc-icon {\n --mdc-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > mwc-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > mwc-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button mwc-icon {\n font-size: 2em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <mwc-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</mwc-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><mwc-icon>add</mwc-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}