@operato/data-grist 7.1.6 → 7.1.13

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 CHANGED
@@ -3,6 +3,23 @@
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
+ ### [7.1.13](https://github.com/hatiolab/operato/compare/v7.1.12...v7.1.13) (2024-09-23)
7
+
8
+ **Note:** Version bump only for package @operato/data-grist
9
+
10
+
11
+
12
+
13
+
14
+ ### [7.1.10](https://github.com/hatiolab/operato/compare/v7.1.9...v7.1.10) (2024-09-15)
15
+
16
+
17
+ ### :bug: Bug Fix
18
+
19
+ * remove unused ([d83e3fa](https://github.com/hatiolab/operato/commit/d83e3fa7316bb0dcb35757ec35031b9e6560b7a0))
20
+
21
+
22
+
6
23
  ### [7.1.6](https://github.com/hatiolab/operato/compare/v7.1.5...v7.1.6) (2024-09-07)
7
24
 
8
25
 
@@ -124,7 +124,6 @@ RecordViewBody.styles = [
124
124
  }
125
125
 
126
126
  ox-grid-field {
127
- justify-content: var();
128
127
  background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));
129
128
  border: var(--record-view-grid-field-border);
130
129
  border-radius: var(--md-sys-shape-corner-small);
@@ -1 +1 @@
1
- {"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n justify-content: center;\n }\n\n div[content] {\n display: grid;\n grid-template-columns: 2fr 3fr 2fr 3fr;\n grid-auto-rows: min-content;\n grid-gap: var(--spacing-large) 0;\n\n padding: var(--spacing-large) var(--spacing-huge);\n font-size: 16px; /* for ios safari */\n flex: 1;\n max-width: 1300px;\n box-sizing: border-box;\n }\n\n label {\n display: flex;\n align-items: center;\n position: relative;\n text-transform: capitalize;\n padding: var(--record-view-item-padding);\n font: var(--record-view-label-font);\n color: var(--record-view-label-color);\n text-align: right;\n padding-right: var(--spacing-large);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n label md-icon {\n display: none;\n }\n\n label > span {\n margin-left: auto;\n }\n\n label[editable] md-icon {\n display: inline-block;\n font-size: var(--record-view-label-icon-size);\n opacity: 0.5;\n }\n\n ox-grid-field {\n justify-content: var();\n background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--record-view-grid-field-border);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n\n font: var(--record-view-font);\n color: var(--record-view-color);\n\n max-width: 360px;\n }\n\n ox-grid-field[editing='true'] {\n border: var(--record-view-edit-border);\n }\n\n ox-grid-field[wide] {\n grid-column: 2 / 5;\n width: 100%;\n max-width: 986px;\n }\n\n :first-child + ox-grid-field {\n color: var(--record-view-focus-color);\n font-weight: bold;\n }\n\n @media only screen and (max-width: 1000px) {\n div[content] {\n grid-template-columns: 2fr 3fr;\n padding: var(--spacing-medium);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n ox-grid-field[wide] {\n grid-column: 2 / 3;\n width: 100%;\n max-width: 360px;\n }\n }\n\n @media only screen and (max-width: 600px) {\n div[content] {\n grid-template-columns: 2fr 3fr;\n padding: var(--spacing-medium);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n ox-grid-field[wide] {\n grid-column: 1 / 3;\n width: 100%;\n max-width: unset;\n }\n }\n `\n ]\n\n @property({ type: Array }) columns: ColumnConfig[] = []\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n\n public currentTarget: any\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('keydown', this._onKeyDown)\n this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('keydown', this._onKeyDown)\n }\n\n _onKeyDown(event: KeyboardEvent) {\n if (event.key === 'Tab') {\n const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))\n const focused = this.renderRoot.querySelector('ox-grid-field[editing]')\n const focusedIndex = fields.findIndex(field => field === focused)\n\n let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)\n\n if (nextIndex >= fields.length || nextIndex < 0) {\n return // Let the default behavior happen if it's the last or first element\n }\n\n event.preventDefault()\n fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))\n }\n }\n\n render() {\n var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')\n var record = this.record\n var rowIndex = this.rowIndex\n\n return html`\n <div content>\n ${columns.map((column, index) => {\n let { editable, mandatory, wide } = column.record\n if (typeof editable === 'function') {\n editable = editable.call(this, record[column.name], column, record, rowIndex, this)\n }\n\n let dirtyFields = record['__dirtyfields__'] || {}\n\n return html`\n <label ?editable=${editable} ?wide=${wide}>\n <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>\n <md-icon>edit</md-icon>\n </label>\n <ox-grid-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column.name]}\n ?dirty=${!!dirtyFields[column.name]}\n ?tabstop=${!!editable}\n ?wide=${wide}\n ></ox-grid-field>\n `\n })}\n </div>\n `\n }\n\n _renderLabel(column: ColumnConfig) {\n var { renderer } = column.header\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n}\n"]}
1
+ {"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAA;AAGrF,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAkHsB,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IA4EnD,CAAC;IAxEC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAElC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACtD,CAAC;IAED,UAAU,CAAC,KAAoB;;QAC7B,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAA;YACrF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;YACvE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAA;YAEjE,IAAI,SAAS,GAAG,YAAY,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAExD,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBAChD,OAAM,CAAC,oEAAoE;YAC7E,CAAC;YAED,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAA,MAAM,CAAC,SAAS,CAAC,0CAAE,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAC/F,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAA;QACvF,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACxB,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;YACjD,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;YACrF,CAAC;YAED,IAAI,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;YAEjD,OAAO,IAAI,CAAA;+BACU,QAAQ,UAAU,IAAI;sBAC/B,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;0BAI5C,QAAQ;wBACV,MAAM;wBACN,MAAM;uBACP,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;uBACnB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC;yBACxB,CAAC,CAAC,QAAQ;sBACb,IAAI;;WAEf,CAAA;QACH,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,YAAY,CAAC,MAAoB;QAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAChC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;;AA9LM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;CACF,AA/GY,CA+GZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AApHtC,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC;GACxB,cAAc,CAgM1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n justify-content: center;\n }\n\n div[content] {\n display: grid;\n grid-template-columns: 2fr 3fr 2fr 3fr;\n grid-auto-rows: min-content;\n grid-gap: var(--spacing-large) 0;\n\n padding: var(--spacing-large) var(--spacing-huge);\n font-size: 16px; /* for ios safari */\n flex: 1;\n max-width: 1300px;\n box-sizing: border-box;\n }\n\n label {\n display: flex;\n align-items: center;\n position: relative;\n text-transform: capitalize;\n padding: var(--record-view-item-padding);\n font: var(--record-view-label-font);\n color: var(--record-view-label-color);\n text-align: right;\n padding-right: var(--spacing-large);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n label md-icon {\n display: none;\n }\n\n label > span {\n margin-left: auto;\n }\n\n label[editable] md-icon {\n display: inline-block;\n font-size: var(--record-view-label-icon-size);\n opacity: 0.5;\n }\n\n ox-grid-field {\n background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--record-view-grid-field-border);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n\n font: var(--record-view-font);\n color: var(--record-view-color);\n\n max-width: 360px;\n }\n\n ox-grid-field[editing='true'] {\n border: var(--record-view-edit-border);\n }\n\n ox-grid-field[wide] {\n grid-column: 2 / 5;\n width: 100%;\n max-width: 986px;\n }\n\n :first-child + ox-grid-field {\n color: var(--record-view-focus-color);\n font-weight: bold;\n }\n\n @media only screen and (max-width: 1000px) {\n div[content] {\n grid-template-columns: 2fr 3fr;\n padding: var(--spacing-medium);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n ox-grid-field[wide] {\n grid-column: 2 / 3;\n width: 100%;\n max-width: 360px;\n }\n }\n\n @media only screen and (max-width: 600px) {\n div[content] {\n grid-template-columns: 2fr 3fr;\n padding: var(--spacing-medium);\n }\n\n label[wide] {\n grid-column: 1 / 2;\n }\n\n ox-grid-field[wide] {\n grid-column: 1 / 3;\n width: 100%;\n max-width: unset;\n }\n }\n `\n ]\n\n @property({ type: Array }) columns: ColumnConfig[] = []\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n\n public currentTarget: any\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('keydown', this._onKeyDown)\n this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('keydown', this._onKeyDown)\n }\n\n _onKeyDown(event: KeyboardEvent) {\n if (event.key === 'Tab') {\n const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))\n const focused = this.renderRoot.querySelector('ox-grid-field[editing]')\n const focusedIndex = fields.findIndex(field => field === focused)\n\n let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)\n\n if (nextIndex >= fields.length || nextIndex < 0) {\n return // Let the default behavior happen if it's the last or first element\n }\n\n event.preventDefault()\n fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))\n }\n }\n\n render() {\n var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')\n var record = this.record\n var rowIndex = this.rowIndex\n\n return html`\n <div content>\n ${columns.map((column, index) => {\n let { editable, mandatory, wide } = column.record\n if (typeof editable === 'function') {\n editable = editable.call(this, record[column.name], column, record, rowIndex, this)\n }\n\n let dirtyFields = record['__dirtyfields__'] || {}\n\n return html`\n <label ?editable=${editable} ?wide=${wide}>\n <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>\n <md-icon>edit</md-icon>\n </label>\n <ox-grid-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column.name]}\n ?dirty=${!!dirtyFields[column.name]}\n ?tabstop=${!!editable}\n ?wide=${wide}\n ></ox-grid-field>\n `\n })}\n </div>\n `\n }\n\n _renderLabel(column: ColumnConfig) {\n var { renderer } = column.header\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n}\n"]}