@operato/data-grist 1.11.13 → 1.11.16
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.
- package/CHANGELOG.md +18 -0
- package/dist/src/configure/tree-option-builder.d.ts +2 -0
- package/dist/src/configure/tree-option-builder.js +7 -0
- package/dist/src/configure/tree-option-builder.js.map +1 -0
- package/dist/src/data-card/data-card.js +2 -1
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/filters/filters-form.js +1 -1
- package/dist/src/filters/filters-form.js.map +1 -1
- package/dist/src/renderers/ox-grist-renderer-tree.d.ts +11 -0
- package/dist/src/renderers/ox-grist-renderer-tree.js +177 -0
- package/dist/src/renderers/ox-grist-renderer-tree.js.map +1 -0
- package/dist/stories/tree-column.stories.d.ts +26 -0
- package/dist/stories/tree-column.stories.js +309 -0
- package/dist/stories/tree-column.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/data-card/data-card.ts +2 -1
- package/src/filters/filters-form.ts +1 -1
- package/themes/grist-theme.css +0 -23
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [1.11.16](https://github.com/hatiolab/operato/compare/v1.11.15...v1.11.16) (2023-12-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* remove --data-card-template variable ([4213dbb](https://github.com/hatiolab/operato/commit/4213dbb54de7727b67768bdf029978da1e665567))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.11.15](https://github.com/hatiolab/operato/compare/v1.11.14...v1.11.15) (2023-12-24)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* data-card grid-template-columns style ([75edcb9](https://github.com/hatiolab/operato/commit/75edcb9444f2b06b4da05e942bcffadd2d654e1d))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [1.11.13](https://github.com/hatiolab/operato/compare/v1.11.12...v1.11.13) (2023-12-20)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree-option-builder.js","sourceRoot":"","sources":["../../../src/configure/tree-option-builder.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAA4B,EAAc,EAAE;IAC3E,OAAO;QACL,gBAAgB,EAAE,UAAU;QAC5B,GAAG,IAAI;KACR,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { TreeConfig } from '../types'\n\nexport const buildTreeOptions = (tree: TreeConfig | undefined): TreeConfig => {\n return {\n childrenProperty: 'children',\n ...tree\n }\n}\n"]}
|
|
@@ -81,7 +81,8 @@ DataCard.styles = [
|
|
|
81
81
|
padding: var(--padding-wide);
|
|
82
82
|
|
|
83
83
|
display: grid;
|
|
84
|
-
grid-template-columns:
|
|
84
|
+
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
85
|
+
|
|
85
86
|
grid-template-rows: min-content;
|
|
86
87
|
|
|
87
88
|
grid-gap: var(--margin-wide);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,eAAe,CAAA;AACtB,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAI9C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;IAAtC;;
|
|
1
|
+
{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n static styles = [\n css`\n :host {\n background-color: var(--data-card-background-color);\n overflow-y: auto;\n padding: var(--padding-wide);\n\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n\n grid-template-rows: min-content;\n\n grid-gap: var(--margin-wide);\n }\n\n ox-record-card {\n height: min-content;\n align-items: stretch;\n background-color: var(--data-card-record-card-background-color);\n border: var(--data-card-record-card-border);\n border-radius: var(--data-card-record-card-border-radius);\n }\n ox-record-card:hover {\n border: var(--data-card-record-card-border-hover);\n box-shadow: var(--data-card-record-card-boxshadow-hover);\n }\n\n [selected-row] {\n background-color: var(--data-card-record-card-selected-border);\n }\n\n #upward {\n --mdc-icon-size: 26px;\n position: absolute;\n top: var(--data-card-fab-position-vertical);\n right: var(--data-card-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 20px;\n color: var(--data-card-fab-color);\n box-shadow: var(--data-card-fab-shadow);\n padding: 7px;\n }\n\n slot {\n width: 100%;\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 screen and (max-width: 460px) {\n #setting {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n }\n `\n ]\n\n @property({ type: Boolean }) empty?: boolean\n\n @state() private _records: GristRecord[] = []\n @state() private isTop: boolean = false\n\n private _total: number = 0\n private _limit: number = 20\n private _page: number = 1\n\n firstUpdated(changes: PropertyValues<this>) {\n this.isTop = true\n\n /* infinite scrolling */\n this.addEventListener('scroll', e => {\n const totalScrollHeight = this.scrollHeight\n const screenHeight = this.offsetHeight\n const currentScrollTop = this.scrollTop\n\n if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n var lastPage = Math.ceil(this._total / this._limit)\n\n if (this._page < lastPage) {\n this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n }\n }\n\n this.isTop = this.scrollTop == 0\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._records = []\n this._page = 1\n }\n\n if (changes.has('data')) {\n this._records = this.data.records\n this._total = this.data.total || 0\n this._limit = this.data.limit || 20\n this._page = this.data.page || 0\n }\n }\n\n render() {\n var records = this._records || []\n\n if (this.config && this.config.rows.appendable) {\n records = [...records, { __dirty__: '+' }]\n }\n\n return html`\n ${records.map(\n (record, rowIndex) => html`\n <ox-record-card\n .config=${this.config}\n .data=${this.data}\n .record=${record}\n .rowIndex=${rowIndex}\n ?selected-row=${record['__selected__']}\n ?dirty=${record['__dirty__']}\n ></ox-record-card>\n `\n )}\n ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n ${this.isTop\n ? html``\n : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n `\n }\n\n gotoTop(e: Event) {\n this.scrollTop = 0\n\n e.stopPropagation()\n }\n\n get pullToRefreshTarget() {\n return this\n }\n}\n"]}
|
|
@@ -1 +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 } 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: Object }) value: FilterValue[] = []\n @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: 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 }\n\n render(): TemplateResult {\n // const { name: firstSearchFilterName } = this.searchColumns[0] || {}\n // const searchValue =\n // (firstSearchFilterName &&\n // (this.value?.find(filter => filter.name === firstSearchFilterName)?.value as string)?.match(\n // /^\\%(.*)\\%$/\n // )?.[1]) ||\n // ''\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n return 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 formData = new FormData(await this.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"]}
|
|
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 } 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\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 }\n\n render(): TemplateResult {\n // const { name: firstSearchFilterName } = this.searchColumns[0] || {}\n // const searchValue =\n // (firstSearchFilterName &&\n // (this.value?.find(filter => filter.name === firstSearchFilterName)?.value as string)?.match(\n // /^\\%(.*)\\%$/\n // )?.[1]) ||\n // ''\n const searchValue =\n (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n return 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 formData = new FormData(await this.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"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
2
|
+
import { OxGristRenderer } from './ox-grist-renderer';
|
|
3
|
+
export declare class OxGristRendererTree extends OxGristRenderer {
|
|
4
|
+
static styles: import("lit").CSSResult;
|
|
5
|
+
private checked?;
|
|
6
|
+
private expanded?;
|
|
7
|
+
get rendererTemplate(): import("lit").TemplateResult<1>;
|
|
8
|
+
updated(changes: PropertyValues<this>): void;
|
|
9
|
+
onClickCheckbox(e: MouseEvent): void;
|
|
10
|
+
onClickExpander(e: MouseEvent): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { customElement, state } from 'lit/decorators.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
import { OxGristRenderer } from './ox-grist-renderer';
|
|
6
|
+
let OxGristRendererTree = class OxGristRendererTree extends OxGristRenderer {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.expanded = false;
|
|
10
|
+
}
|
|
11
|
+
get rendererTemplate() {
|
|
12
|
+
var { childrenProperty = 'children' } = this.column.record.options || {};
|
|
13
|
+
var { [childrenProperty]: children } = this.record;
|
|
14
|
+
const expandable = children && children.length > 0;
|
|
15
|
+
return html `
|
|
16
|
+
<div wrap>
|
|
17
|
+
${expandable
|
|
18
|
+
? html `
|
|
19
|
+
<span
|
|
20
|
+
expander
|
|
21
|
+
@click=${this.onClickExpander.bind(this)}
|
|
22
|
+
?expanded=${this.expanded}
|
|
23
|
+
?collapsed=${!this.expanded}
|
|
24
|
+
></span>
|
|
25
|
+
`
|
|
26
|
+
: html `<span expander></span>`}
|
|
27
|
+
<span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>
|
|
28
|
+
<span label>${this.value}</span>
|
|
29
|
+
</div>
|
|
30
|
+
`;
|
|
31
|
+
}
|
|
32
|
+
updated(changes) {
|
|
33
|
+
var { __depth__, __check_in_tree__, __expanded__ } = this.record;
|
|
34
|
+
this.checked = __check_in_tree__;
|
|
35
|
+
this.expanded = __expanded__;
|
|
36
|
+
this.style.setProperty('--tree-depth', String(__depth__));
|
|
37
|
+
}
|
|
38
|
+
onClickCheckbox(e) {
|
|
39
|
+
e.stopPropagation();
|
|
40
|
+
this.dispatchEvent(new CustomEvent('check-in-tree', {
|
|
41
|
+
bubbles: true,
|
|
42
|
+
composed: true,
|
|
43
|
+
detail: this.record
|
|
44
|
+
}));
|
|
45
|
+
this.requestUpdate();
|
|
46
|
+
}
|
|
47
|
+
onClickExpander(e) {
|
|
48
|
+
e.stopPropagation();
|
|
49
|
+
this.dispatchEvent(new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
|
|
50
|
+
bubbles: true,
|
|
51
|
+
composed: true,
|
|
52
|
+
detail: this.record
|
|
53
|
+
}));
|
|
54
|
+
this.requestUpdate();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
OxGristRendererTree.styles = css `
|
|
58
|
+
:host {
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
div[wrap] {
|
|
63
|
+
position: relative;
|
|
64
|
+
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 6px;
|
|
68
|
+
|
|
69
|
+
width: 100%;
|
|
70
|
+
padding-left: calc(var(--tree-depth, 0) * 18px);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
span[expander] {
|
|
74
|
+
display: inline-block;
|
|
75
|
+
vertical-align: middle;
|
|
76
|
+
width: 12px;
|
|
77
|
+
height: 20px;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
position: relative;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
span[expander][collapsed]::before {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 50%;
|
|
85
|
+
left: 50%;
|
|
86
|
+
transform: translate(-25%, -50%) rotate(-90deg);
|
|
87
|
+
content: ' ';
|
|
88
|
+
border: 5px solid transparent;
|
|
89
|
+
border-top: 5px solid var(--primary-color, #1890ff);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
span[expander][expanded]::before {
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 50%;
|
|
95
|
+
left: 50%;
|
|
96
|
+
transform: translate(-50%, -25%);
|
|
97
|
+
content: ' ';
|
|
98
|
+
border: 5px solid transparent;
|
|
99
|
+
border-top: 5px solid var(--primary-color, #1890ff);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
span[checkbox] {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
vertical-align: middle;
|
|
105
|
+
width: 12px;
|
|
106
|
+
height: 20px;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
position: relative;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
span[checkbox]::before {
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
position: absolute;
|
|
114
|
+
top: 50%;
|
|
115
|
+
left: 50%;
|
|
116
|
+
transform: translate(-50%, -50%);
|
|
117
|
+
content: ' ';
|
|
118
|
+
display: block;
|
|
119
|
+
width: 10px;
|
|
120
|
+
height: 10px;
|
|
121
|
+
border: 1px solid var(--primary-color, #1890ff);
|
|
122
|
+
border-radius: 2px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
span[label][selected] {
|
|
126
|
+
background-color: var(--primary-color, #1890ff);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
span[checkbox][checked='checked']::before {
|
|
130
|
+
background-color: var(--primary-color, #1890ff);
|
|
131
|
+
border-color: var(--primary-color, #1890ff);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
span[checkbox][checked='checked']::after {
|
|
135
|
+
position: absolute;
|
|
136
|
+
content: ' ';
|
|
137
|
+
display: block;
|
|
138
|
+
top: 50%;
|
|
139
|
+
left: 50%;
|
|
140
|
+
width: 3px;
|
|
141
|
+
height: 7px;
|
|
142
|
+
border: 2px solid #fff;
|
|
143
|
+
border-top: none;
|
|
144
|
+
border-left: none;
|
|
145
|
+
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
|
146
|
+
-ms-transform: translate(-50%, -50%) rotate(45deg);
|
|
147
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
span[checkbox][checked='half-checked']::before {
|
|
151
|
+
background-color: var(--primary-color, #1890ff);
|
|
152
|
+
border-color: var(--primary-color, #1890ff);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
span[checkbox][checked='half-checked']::after {
|
|
156
|
+
position: absolute;
|
|
157
|
+
content: ' ';
|
|
158
|
+
display: block;
|
|
159
|
+
top: 50%;
|
|
160
|
+
left: 50%;
|
|
161
|
+
transform: translate(-50%, -50%);
|
|
162
|
+
width: 10px;
|
|
163
|
+
height: 2px;
|
|
164
|
+
background-color: #fff;
|
|
165
|
+
}
|
|
166
|
+
`;
|
|
167
|
+
__decorate([
|
|
168
|
+
state()
|
|
169
|
+
], OxGristRendererTree.prototype, "checked", void 0);
|
|
170
|
+
__decorate([
|
|
171
|
+
state()
|
|
172
|
+
], OxGristRendererTree.prototype, "expanded", void 0);
|
|
173
|
+
OxGristRendererTree = __decorate([
|
|
174
|
+
customElement('ox-grist-tree-renderer')
|
|
175
|
+
], OxGristRendererTree);
|
|
176
|
+
export { OxGristRendererTree };
|
|
177
|
+
//# sourceMappingURL=ox-grist-renderer-tree.js.map
|
|
@@ -0,0 +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,MAAM,KAAK,CAAA;AAC/C,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;IA6D7C,CAAC;IA3DC,IAAI,gBAAgB;QAClB,IAAI,EAAE,gBAAgB,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QACxE,IAAI,EAAE,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAElD,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;QAElD,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;gCACR,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBAC5E,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;;AA5KM,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,CA8K/B","sourcesContent":["import { PropertyValues, css, html } 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 { childrenProperty = 'children' } = this.column.record.options || {}\n var { [childrenProperty]: 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 <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>\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"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import '../src/index.js';
|
|
2
|
+
import '../src/filters/filters-form.js';
|
|
3
|
+
import '../src/sorters/sorters-control.js';
|
|
4
|
+
import '../src/record-view/record-creator.js';
|
|
5
|
+
import '@operato/popup/ox-popup-list.js';
|
|
6
|
+
import '@material/mwc-icon';
|
|
7
|
+
import { TemplateResult } from 'lit';
|
|
8
|
+
declare const _default: {
|
|
9
|
+
title: string;
|
|
10
|
+
component: string;
|
|
11
|
+
argTypes: {
|
|
12
|
+
config: {
|
|
13
|
+
control: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export default _default;
|
|
18
|
+
interface Story<T> {
|
|
19
|
+
(args: T): TemplateResult;
|
|
20
|
+
args?: Partial<T>;
|
|
21
|
+
argTypes?: Record<string, unknown>;
|
|
22
|
+
}
|
|
23
|
+
interface ArgTypes {
|
|
24
|
+
config: object;
|
|
25
|
+
}
|
|
26
|
+
export declare const Regular: Story<ArgTypes>;
|