@digital-realty/ix-grid 1.0.35 → 1.0.36
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/demo/index.html +20 -2
- package/dist/IxGrid.js +11 -10
- package/dist/IxGrid.js.map +1 -1
- package/dist/components/IxGridNav.d.ts +2 -1
- package/dist/components/IxGridNav.js +3 -2
- package/dist/components/IxGridNav.js.map +1 -1
- package/dist/test/ix-grid.test.js +5 -2
- package/dist/test/ix-grid.test.js.map +1 -1
- package/package.json +2 -2
- package/src/IxGrid.ts +17 -17
- package/src/components/IxGridNav.ts +10 -2
- package/src/test/ix-grid.test.ts +5 -2
package/demo/index.html
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
import '@digital-realty/theme';
|
|
25
25
|
import '@digital-realty/ix-button/ix-button.js';
|
|
26
26
|
import '../dist/ix-grid.js';
|
|
27
|
+
import '../dist/components/ix-grid-nav.js';
|
|
27
28
|
import { contacts } from './contacts.js';
|
|
28
29
|
import { columns } from './columns.js';
|
|
29
30
|
|
|
@@ -88,8 +89,25 @@
|
|
|
88
89
|
@download=${e => console.log(e)}
|
|
89
90
|
>
|
|
90
91
|
<div slot="header">
|
|
91
|
-
<ix-
|
|
92
|
-
|
|
92
|
+
<ix-grid-nav
|
|
93
|
+
class="reports-grid-nav"
|
|
94
|
+
.buttons=${[
|
|
95
|
+
{
|
|
96
|
+
path: '/reports/security',
|
|
97
|
+
text: 'Security Reports',
|
|
98
|
+
disabled: true,
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
path: '/reports/dcim',
|
|
102
|
+
text: 'DCIM Reports',
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
path: '/reports/maintenance',
|
|
106
|
+
text: 'Site Maintenance',
|
|
107
|
+
selected: true,
|
|
108
|
+
},
|
|
109
|
+
]}
|
|
110
|
+
></ix-grid-nav>
|
|
93
111
|
</div>
|
|
94
112
|
</ix-grid>
|
|
95
113
|
</div>
|
package/dist/IxGrid.js
CHANGED
|
@@ -206,17 +206,18 @@ export class IxGrid extends LitElement {
|
|
|
206
206
|
theme="no-border"
|
|
207
207
|
@mouseup=${this.reorderColumnsFromTable}
|
|
208
208
|
>
|
|
209
|
-
|
|
210
|
-
(_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
|
|
209
|
+
${this._columns.some(col => !col.hidden)
|
|
210
|
+
? (_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
|
|
211
211
|
? html `<vaadin-grid-column
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
: nothing)
|
|
212
|
+
${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
|
|
213
|
+
${columnBodyRenderer(column.bodyRenderer, [])}
|
|
214
|
+
resizable
|
|
215
|
+
width=${ifDefined(column.width)}
|
|
216
|
+
?hidden=${column.hidden}
|
|
217
|
+
?frozen-to-end=${column.frozenToEnd}
|
|
218
|
+
></vaadin-grid-column>`
|
|
219
|
+
: nothing)
|
|
220
|
+
: html `<vaadin-grid-column></vaadin-grid-column>`}
|
|
220
221
|
</vaadin-grid>`
|
|
221
222
|
: nothing}
|
|
222
223
|
${this.rowLimit > 0
|
package/dist/IxGrid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string | undefined = undefined;\n\n @property({ type: Boolean }) showDownload = true;\n\n @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n true;\n\n @state() private filters: Filter[] = [];\n\n @state() _columns: Column[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get columnNames() {\n return this._columns.map((column: Column) => column.name);\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n if (this.addParamsToURL) {\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (column: Column) => html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=\"header\"\n >\n ${column.header}\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n\n connectedCallback() {\n super.connectedCallback();\n this._columns = this.columns;\n }\n\n async reorderColumnsFromTable() {\n // calulate column order from table header flex order\n const headerNodes = Array.from(\n this.grid?.shadowRoot?.querySelectorAll('th') || []\n );\n if (headerNodes.length) {\n const columnOrder = headerNodes\n .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n .sort((a, b) => a.flexPosition - b.flexPosition)\n .map(el => el.id);\n headerNodes.forEach((el, id) => {\n this._columns[id].width = el.style.width;\n });\n const columnsCorrectlyOrdered = columnOrder.every(\n (x, i) => i === 0 || x > columnOrder[i - 1]\n );\n if (!columnsCorrectlyOrdered) {\n const reorderedColumns = columnOrder.map(id => this._columns[id]);\n this._columns = [...reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n }\n }\n\n async reorderColumnsFromFilter(e: CustomEvent) {\n this._columns = [...e.detail.reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <slot name=\"header\"><div class=\"empty\"></div></slot>\n ${this.hideFilters\n ? nothing\n : html`<div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this._columns}\n localStorageID=${ifDefined(this.localStorageID)}\n @columnFilter=${(e: CustomEvent) => {\n e.detail.columns.forEach((column: Column, id: number) => {\n this._columns[id].hidden = column.hidden;\n });\n this.updatePage();\n }}\n @reorderColumns=${this.reorderColumnsFromFilter}\n ></ix-grid-column-filter>\n ${this.showDownload\n ? html`<ix-grid-download-menu></ix-grid-download-menu>`\n : nothing}\n <ix-grid-row-filter\n .columns=${this._columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>`}\n </div>\n <div class=\"touch-edge\">\n <slot name=\"under-header\"></slot>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n render() {\n return html`\n <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n ${this.hideHeader ? nothing : this.renderHeader()}\n ${!this.isLoading\n ? html`<vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n column-reordering-allowed\n theme=\"no-border\"\n @mouseup=${this.reorderColumnsFromTable}\n >\n ${this._columns.some(col => !col.hidden) ?\n this._columns?.map((column: Column) =>\n column.name\n ? html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () => this.renderColumnHeader(column),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n ></vaadin-grid-column>`\n : nothing\n ) : html`<vaadin-grid-column></vaadin-grid-column>`\n }\n </vaadin-grid>`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string | undefined = undefined;\n\n @property({ type: Boolean }) showDownload = true;\n\n @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n true;\n\n @state() private filters: Filter[] = [];\n\n @state() _columns: Column[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get columnNames() {\n return this._columns.map((column: Column) => column.name);\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n if (this.addParamsToURL) {\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (column: Column) => html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=\"header\"\n >\n ${column.header}\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n\n connectedCallback() {\n super.connectedCallback();\n this._columns = this.columns;\n }\n\n async reorderColumnsFromTable() {\n // calulate column order from table header flex order\n const headerNodes = Array.from(\n this.grid?.shadowRoot?.querySelectorAll('th') || []\n );\n if (headerNodes.length) {\n const columnOrder = headerNodes\n .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n .sort((a, b) => a.flexPosition - b.flexPosition)\n .map(el => el.id);\n headerNodes.forEach((el, id) => {\n this._columns[id].width = el.style.width;\n });\n const columnsCorrectlyOrdered = columnOrder.every(\n (x, i) => i === 0 || x > columnOrder[i - 1]\n );\n if (!columnsCorrectlyOrdered) {\n const reorderedColumns = columnOrder.map(id => this._columns[id]);\n this._columns = [...reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n }\n }\n\n async reorderColumnsFromFilter(e: CustomEvent) {\n this._columns = [...e.detail.reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <slot name=\"header\"><div class=\"empty\"></div></slot>\n ${this.hideFilters\n ? nothing\n : html`<div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this._columns}\n localStorageID=${ifDefined(this.localStorageID)}\n @columnFilter=${(e: CustomEvent) => {\n e.detail.columns.forEach((column: Column, id: number) => {\n this._columns[id].hidden = column.hidden;\n });\n this.updatePage();\n }}\n @reorderColumns=${this.reorderColumnsFromFilter}\n ></ix-grid-column-filter>\n ${this.showDownload\n ? html`<ix-grid-download-menu></ix-grid-download-menu>`\n : nothing}\n <ix-grid-row-filter\n .columns=${this._columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>`}\n </div>\n <div class=\"touch-edge\">\n <slot name=\"under-header\"></slot>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n render() {\n return html`\n <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n ${this.hideHeader ? nothing : this.renderHeader()}\n ${!this.isLoading\n ? html`<vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n column-reordering-allowed\n theme=\"no-border\"\n @mouseup=${this.reorderColumnsFromTable}\n >\n ${this._columns.some(col => !col.hidden)\n ? this._columns?.map((column: Column) =>\n column.name\n ? html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () => this.renderColumnHeader(column),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n ></vaadin-grid-column>`\n : nothing\n )\n : html`<vaadin-grid-column></vaadin-grid-column>`}\n </vaadin-grid>`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import '@digital-realty/ix-button';
|
|
3
3
|
export interface IGridNavButton {
|
|
4
4
|
path?: string;
|
|
5
|
+
selected?: boolean;
|
|
5
6
|
disabled?: boolean;
|
|
6
7
|
onClick?: () => void;
|
|
7
8
|
text: string;
|
|
@@ -9,6 +10,6 @@ export interface IGridNavButton {
|
|
|
9
10
|
export declare class IxGridNavigation extends LitElement {
|
|
10
11
|
buttons: IGridNavButton[];
|
|
11
12
|
static styles: import("lit").CSSResult;
|
|
12
|
-
renderButton: ({ path, text, onClick, disabled }: IGridNavButton) => import("lit").TemplateResult<1>;
|
|
13
|
+
renderButton: ({ path, text, onClick, disabled, selected, }: IGridNavButton) => import("lit").TemplateResult<1>;
|
|
13
14
|
render(): import("lit").TemplateResult<1>;
|
|
14
15
|
}
|
|
@@ -8,10 +8,11 @@ export class IxGridNavigation extends LitElement {
|
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.buttons = [];
|
|
10
10
|
// eslint-disable-next-line class-methods-use-this
|
|
11
|
-
this.renderButton = ({ path, text, onClick, disabled }) => html `
|
|
11
|
+
this.renderButton = ({ path, text, onClick, disabled, selected, }) => html `
|
|
12
12
|
<ix-button
|
|
13
13
|
?disabled=${disabled}
|
|
14
|
-
|
|
14
|
+
appearance=${selected ? 'filled' : 'text'}
|
|
15
|
+
href=${ifDefined(selected ? undefined : path)}
|
|
15
16
|
@click=${onClick}
|
|
16
17
|
class="button"
|
|
17
18
|
><div class="button-text">${text}</div></ix-button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AAUnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QA+C5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE,CACnB,IAAI,CAAA;;oBAEY,QAAQ;qBACP,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;iBACpC,OAAO;;oCAEY,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AAtEM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,CAAC;AA7C2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n path?: string;\n selected?: boolean;\n disabled?: boolean;\n onClick?: () => void;\n text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n static styles = css`\n :host {\n --md-filled-button-container-color: var(\n --grid-nav-button-container-color,\n var(--ix-text-dark, #000)\n );\n --md-filled-button-container-height: var(\n --grid-nav-button-container-height,\n 2.5rem\n );\n --md-filled-button-leading-space: var(\n --grid-nav-button-leading-space,\n 20px\n );\n --md-filled-button-trailing-space: var(\n --grid-nav-button-trailing-space,\n 20px\n );\n }\n\n [disabled] {\n --md-filled-button-disabled-container-color: var(\n --grid-nav-button-disabled-container-color,\n transparent\n );\n --md-filled-button-disabled-label-text-color: var(\n --grid-nav-button-disabled-container-color,\n var(--ix-text-dark, #000)\n );\n }\n\n .container {\n display: var(--grid-nav-button-group-display, flex);\n gap: var(--grid-nav-button-group-gap, 0.5rem);\n }\n\n .button {\n margin: var(--grid-nav-button-margin, 0);\n }\n\n .button-text {\n text-transform: var(--grid-nav-button-text-transform, none);\n }\n `;\n\n // eslint-disable-next-line class-methods-use-this\n renderButton = ({\n path,\n text,\n onClick,\n disabled,\n selected,\n }: IGridNavButton) =>\n html`\n <ix-button\n ?disabled=${disabled}\n appearance=${selected ? 'filled' : 'text'}\n href=${ifDefined(selected ? undefined : path)}\n @click=${onClick}\n class=\"button\"\n ><div class=\"button-text\">${text}</div></ix-button\n >\n `;\n\n render() {\n return html`\n <div class=\"container\">\n ${this.buttons.map(button => this.renderButton(button))}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -16,14 +16,17 @@ const columns = [
|
|
|
16
16
|
{
|
|
17
17
|
name: 'one',
|
|
18
18
|
header: 'one',
|
|
19
|
+
bodyRenderer: row => html ` <span>${row.name}</span>`,
|
|
19
20
|
},
|
|
20
21
|
{
|
|
21
22
|
name: 'two',
|
|
22
23
|
header: 'one',
|
|
24
|
+
bodyRenderer: row => html ` <span>${row.name}</span>`,
|
|
23
25
|
},
|
|
24
26
|
{
|
|
25
27
|
name: 'three',
|
|
26
28
|
header: 'one',
|
|
29
|
+
bodyRenderer: row => html ` <span>${row.name}</span>`,
|
|
27
30
|
},
|
|
28
31
|
];
|
|
29
32
|
describe('IxGrid', () => {
|
|
@@ -33,8 +36,8 @@ describe('IxGrid', () => {
|
|
|
33
36
|
});
|
|
34
37
|
it('renders the correct number of rows', async () => {
|
|
35
38
|
const el = await fixture(html `<ix-grid
|
|
36
|
-
columns=${columns}
|
|
37
|
-
rows=${rows}
|
|
39
|
+
.columns=${columns}
|
|
40
|
+
.rows=${rows}
|
|
38
41
|
></ix-grid>`);
|
|
39
42
|
expect(rows.length).to.equal(3);
|
|
40
43
|
expect(el).to.not.be.null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,IAAI;gBACF,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../ix-grid.js';\n\nconst rows = [\n {\n name: 'one',\n },\n {\n name: 'two',\n },\n {\n name: 'three',\n },\n];\n\nconst columns = [\n {\n name: 'one',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n {\n name: 'two',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n {\n name: 'three',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n];\n\ndescribe('IxGrid', () => {\n it('renders a grid', async () => {\n const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n expect(el).to.not.be.null;\n });\n\n it('renders the correct number of rows', async () => {\n const el = await fixture<IxGrid>(html`<ix-grid\n .columns=${columns}\n .rows=${rows}\n ></ix-grid>`);\n\n expect(rows.length).to.equal(3);\n\n expect(el).to.not.be.null;\n });\n});\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-grid following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.36",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"prettier --write"
|
|
103
103
|
]
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "0b93fae7b231a1215f8c27e2b73ec82f55edfacc"
|
|
106
106
|
}
|
package/src/IxGrid.ts
CHANGED
|
@@ -263,23 +263,23 @@ export class IxGrid extends LitElement {
|
|
|
263
263
|
theme="no-border"
|
|
264
264
|
@mouseup=${this.reorderColumnsFromTable}
|
|
265
265
|
>
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
266
|
+
${this._columns.some(col => !col.hidden)
|
|
267
|
+
? this._columns?.map((column: Column) =>
|
|
268
|
+
column.name
|
|
269
|
+
? html`<vaadin-grid-column
|
|
270
|
+
${columnHeaderRenderer(
|
|
271
|
+
() => this.renderColumnHeader(column),
|
|
272
|
+
this.sortDirection
|
|
273
|
+
)}
|
|
274
|
+
${columnBodyRenderer(column.bodyRenderer, [])}
|
|
275
|
+
resizable
|
|
276
|
+
width=${ifDefined(column.width)}
|
|
277
|
+
?hidden=${column.hidden}
|
|
278
|
+
?frozen-to-end=${column.frozenToEnd}
|
|
279
|
+
></vaadin-grid-column>`
|
|
280
|
+
: nothing
|
|
281
|
+
)
|
|
282
|
+
: html`<vaadin-grid-column></vaadin-grid-column>`}
|
|
283
283
|
</vaadin-grid>`
|
|
284
284
|
: nothing}
|
|
285
285
|
${this.rowLimit > 0
|
|
@@ -5,6 +5,7 @@ import '@digital-realty/ix-button';
|
|
|
5
5
|
|
|
6
6
|
export interface IGridNavButton {
|
|
7
7
|
path?: string;
|
|
8
|
+
selected?: boolean;
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
onClick?: () => void;
|
|
10
11
|
text: string;
|
|
@@ -59,11 +60,18 @@ export class IxGridNavigation extends LitElement {
|
|
|
59
60
|
`;
|
|
60
61
|
|
|
61
62
|
// eslint-disable-next-line class-methods-use-this
|
|
62
|
-
renderButton = ({
|
|
63
|
+
renderButton = ({
|
|
64
|
+
path,
|
|
65
|
+
text,
|
|
66
|
+
onClick,
|
|
67
|
+
disabled,
|
|
68
|
+
selected,
|
|
69
|
+
}: IGridNavButton) =>
|
|
63
70
|
html`
|
|
64
71
|
<ix-button
|
|
65
72
|
?disabled=${disabled}
|
|
66
|
-
|
|
73
|
+
appearance=${selected ? 'filled' : 'text'}
|
|
74
|
+
href=${ifDefined(selected ? undefined : path)}
|
|
67
75
|
@click=${onClick}
|
|
68
76
|
class="button"
|
|
69
77
|
><div class="button-text">${text}</div></ix-button
|
package/src/test/ix-grid.test.ts
CHANGED
|
@@ -19,14 +19,17 @@ const columns = [
|
|
|
19
19
|
{
|
|
20
20
|
name: 'one',
|
|
21
21
|
header: 'one',
|
|
22
|
+
bodyRenderer: row => html` <span>${row.name}</span>`,
|
|
22
23
|
},
|
|
23
24
|
{
|
|
24
25
|
name: 'two',
|
|
25
26
|
header: 'one',
|
|
27
|
+
bodyRenderer: row => html` <span>${row.name}</span>`,
|
|
26
28
|
},
|
|
27
29
|
{
|
|
28
30
|
name: 'three',
|
|
29
31
|
header: 'one',
|
|
32
|
+
bodyRenderer: row => html` <span>${row.name}</span>`,
|
|
30
33
|
},
|
|
31
34
|
];
|
|
32
35
|
|
|
@@ -39,8 +42,8 @@ describe('IxGrid', () => {
|
|
|
39
42
|
|
|
40
43
|
it('renders the correct number of rows', async () => {
|
|
41
44
|
const el = await fixture<IxGrid>(html`<ix-grid
|
|
42
|
-
columns=${columns}
|
|
43
|
-
rows=${rows}
|
|
45
|
+
.columns=${columns}
|
|
46
|
+
.rows=${rows}
|
|
44
47
|
></ix-grid>`);
|
|
45
48
|
|
|
46
49
|
expect(rows.length).to.equal(3);
|