npm - @operato/data-grist - Versions diffs - 7.1.27 → 7.1.30 - Mend

@operato/data-grist 7.1.27 → 7.1.30

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 (22) hide show

package/CHANGELOG.md +18 -0
package/dist/src/data-grid/data-grid-body-style.js +14 -0
package/dist/src/data-grid/data-grid-body-style.js.map +1 -1
package/dist/src/data-grid/data-grid-field.js +9 -0
package/dist/src/data-grid/data-grid-field.js.map +1 -1
package/dist/src/record-view/ox-record-creator.js +7 -20
package/dist/src/record-view/ox-record-creator.js.map +1 -1
package/dist/src/record-view/record-creator.d.ts +17 -0
package/dist/src/record-view/record-creator.js +148 -0
package/dist/src/record-view/record-creator.js.map +1 -0
package/dist/src/types.d.ts +1 -0
package/dist/src/types.js.map +1 -1
package/dist/stories/click-event-custom.stories.js +2 -1
package/dist/stories/click-event-custom.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +5 -5
package/src/data-grid/data-grid-body-style.ts +14 -0
package/src/data-grid/data-grid-field.ts +9 -0
package/src/record-view/ox-record-creator.ts +15 -27
package/src/types.ts +1 -1
package/stories/click-event-custom.stories.ts +2 -1
package/yarn-error.log +16971 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [7.1.30](https://github.com/hatiolab/operato/compare/v7.1.29...v7.1.30) (2025-01-10)
+### :bug: Bug Fix
+* grist disabled 필드 색상 조절 기능 추가 ([415fe22](https://github.com/hatiolab/operato/commit/415fe2250438c5b14945391ebca59ba13b56b6d3))
+### [7.1.28](https://github.com/hatiolab/operato/compare/v7.1.27...v7.1.28) (2024-12-09)
+### :bug: Bug Fix
+* enhancement of ox-record-creator validation ([6466cf1](https://github.com/hatiolab/operato/commit/6466cf1df0bed4a131715c58f87a2b2aacd0c2b4))
 ### [7.1.27](https://github.com/hatiolab/operato/compare/v7.1.26...v7.1.27) (2024-12-09)

package/dist/src/data-grid/data-grid-body-style.js CHANGED Viewed

@@ -16,6 +16,20 @@ export const dataGridBodyStyle = css `
     background-color: var(--grid-record-odd-background-color);
   }
+  ox-grid-field[disabled] {
+    background-color: var(--grid-record-disabled-background-color, #eee);
+    color: var(--grid-record-disabled-color, var(--grid-record-color));
+    opacity: var(--grid-record-disabled-opacity, 1);
+  }
+  ox-grid-field[odd][disabled] {
+    background-color: var(
+      --grid-odd-record-disabled-background-color,
+      var(--grid-record-disabled-background-color, #eee)
+    );
+    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));
+    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));
+  }
   ox-grid-field[selected-row] {
     background-color: var(--grid-record-selected-background-color);
     color: var(--grid-record-selected-color);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFnC~~,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-auto-rows: var(--grid-record-height, min-content);\n\n overflow: auto;\n outline: none;\n color: var(--grid-record-color);\n position: relative;\n border-bottom: var(--grid-body-bottom-border);\n }\n\n ox-grid-field[odd] {\n background-color: var(--grid-record-odd-background-color);\n }\n\n ox-grid-field[selected-row] {\n background-color: var(--grid-record-selected-background-color);\n color: var(--grid-record-selected-color);\n }\n\n ox-grid-field[focused-row] {\n box-shadow: var(--grid-record-focused-box-shadow);\n font-weight: bold;\n color: var(--grid-record-focused-color);\n background-image: var(--focused-background-image);\n background-blend-mode: darken;\n }\n\n ox-grid-field[focused] {\n border: var(--grid-record-focused-cell-border);\n }\n\n ox-grid-field[emphasized-row],\n ox-grid-field[emphasized-row][focused] {\n background-color: var(--grid-record-emphasized-background-color);\n color: var(--grid-record-emphasized-color);\n }\n\n [editing] {\n background-color: var(--grid-record-editing-background-color);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n ox-grid-field[focused] {\n border: none;\n }\n\n ox-grid-field[selected-row] {\n background-color: transparent;\n }\n\n ox-grid-field[emphasized-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[focused-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[editing] {\n background-color: transparent;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n ox-grid-field[focused-row] {\n background-blend-mode: lighten;\n }\n }\n\n @media (prefers-color-scheme: light) {\n ox-grid-field[focused-row] {\n background-blend-mode: darken;\n }\n }\n`\n"]}
1	+ {"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-auto-rows: var(--grid-record-height, min-content);\n\n overflow: auto;\n outline: none;\n color: var(--grid-record-color);\n position: relative;\n border-bottom: var(--grid-body-bottom-border);\n }\n\n ox-grid-field[odd] {\n background-color: var(--grid-record-odd-background-color);\n }\n\n ox-grid-field[disabled] {\n background-color: var(--grid-record-disabled-background-color, #eee);\n color: var(--grid-record-disabled-color, var(--grid-record-color));\n opacity: var(--grid-record-disabled-opacity, 1);\n }\n ox-grid-field[odd][disabled] {\n background-color: var(\n --grid-odd-record-disabled-background-color,\n var(--grid-record-disabled-background-color, #eee)\n );\n color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n }\n\n ox-grid-field[selected-row] {\n background-color: var(--grid-record-selected-background-color);\n color: var(--grid-record-selected-color);\n }\n\n ox-grid-field[focused-row] {\n box-shadow: var(--grid-record-focused-box-shadow);\n font-weight: bold;\n color: var(--grid-record-focused-color);\n background-image: var(--focused-background-image);\n background-blend-mode: darken;\n }\n\n ox-grid-field[focused] {\n border: var(--grid-record-focused-cell-border);\n }\n\n ox-grid-field[emphasized-row],\n ox-grid-field[emphasized-row][focused] {\n background-color: var(--grid-record-emphasized-background-color);\n color: var(--grid-record-emphasized-color);\n }\n\n [editing] {\n background-color: var(--grid-record-editing-background-color);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n ox-grid-field[focused] {\n border: none;\n }\n\n ox-grid-field[selected-row] {\n background-color: transparent;\n }\n\n ox-grid-field[emphasized-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[focused-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[editing] {\n background-color: transparent;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n ox-grid-field[focused-row] {\n background-blend-mode: lighten;\n }\n }\n\n @media (prefers-color-scheme: light) {\n ox-grid-field[focused-row] {\n background-blend-mode: darken;\n }\n }\n`\n"]}

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

@@ -84,6 +84,15 @@ let DataGridField = class DataGridField extends LitElement {
                 this.style.left = 'unset';
             }
         }
+        const disabled = this.column.record.disabled || false;
+        if (!!disabled) {
+            // 비황성화 여부 표시
+            this.setAttribute('disabled', '');
+        }
+        else {
+            // 비황성화 여부 제거
+            this.removeAttribute('disabled');
+        }
         const emphasized = ((_a = this.column.record.classifier.call(this, this.record, this.rowIndex)) === null || _a === void 0 ? void 0 : _a.emphasized) || this.emphasized;
         if (!!emphasized) {
             this.setAttribute('emphasized-row', '');

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-record-background-color);\n padding: var(--grid-record-padding);\n border: 1px solid transparent;\n border-width: 1px 0;\n border-bottom: var(--grid-record-border-bottom);\n\n font-size: var(--grid-record-wide-fontsize);\n min-height: 30px;\n box-sizing: border-box;\n }\n\n :host([gutter]) {\n padding: var(--grid-gutter-padding);\n text-align: center;\n }\n\n :host([gutter]) * {\n cursor: default;\n }\n\n :host([editing]) {\n border-top: var(--grid-record-editing-border);\n border-bottom: var(--grid-record-editing-border);\n }\n\n :host([focused]) {\n --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n }\n\n :host([dirty])::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n\n width: 0px;\n height: 0px;\n border-top: 9px solid red;\n border-left: 9px solid transparent;\n }\n\n span,\n pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host > button {\n display: flex;\n gap: var(--spacing-small);\n border: 0;\n align-items: center;\n padding: var(--spacing-small);\n\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n font-size: 0.8rem;\n line-height: 0.8rem;\n\n md-icon {\n border: 0;\n padding: 0;\n background-color: unset;\n }\n }\n\n :host([danger]) > button {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-error);\n border-color: var(--md-sys-color-error);\n }\n\n :host([danger]) > button:hover {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n border-color: var(--md-sys-color-secondary);\n }\n `\n ]\n\n @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n @property({ type: Object }) record: GristRecord = {}\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex = 0\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean }) editing = false\n @property({ type: Object }) value = {}\n @property({ type: String }) valueWith: string \| null = null\n @property({ attribute: false }) emphasized: any = false\n @property({ type: String, attribute: true }) fixed?: string\n @property({ type: String }) type?: string\n @property({ type: Boolean }) isWorking: boolean = false\n\n / check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. /\n @property({ type: String }) checked?: string\n\n private _editCancelled?: boolean\n private _onFieldChange: (e: Event) => void = e => {}\n private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n render(): TemplateResult {\n if (!this.column) {\n return html``\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer, editor } = column.record\n\n return html`\n ${this.editing\n ? editor?.call(this, value, column, record, rowIndex, this)\n : renderer?.call(this, value, column, record, rowIndex, this)}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('editing')) {\n if (this.editing) {\n this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n if (e.key === 'Esc' \|\| e.key === 'Escape') {\n / 편집 취소 */\n this._editCancelled = true\n }\n }).bind(this)\n\n this._onFieldChange = ((e: Event) => {\n this._editCancelled && e.stopPropagation()\n }).bind(this)\n\n delete this._editCancelled\n this.addEventListener('field-change', this._onFieldChange)\n this.addEventListener('keydown', this._onKeydownInEditingMode)\n } else {\n this.removeEventListener('field-change', this._onFieldChange)\n this.removeEventListener('keydown', this._onKeydownInEditingMode)\n }\n }\n\n if (changes.has('column')) {\n var align = this.column.record.align \|\| DEFAULT_TEXT_ALIGN\n if (align != DEFAULT_TEXT_ALIGN) {\n let justify = 'center'\n switch (align) {\n case 'right':\n justify = 'flex-end'\n break\n }\n this.style.setProperty('--data-grid-field-justify-content', justify)\n this.style.setProperty('--data-grid-field-text-align', align)\n }\n\n const { danger } = this.column\n if (danger) {\n this.setAttribute('danger', '')\n } else {\n this.removeAttribute('danger')\n }\n }\n\n if (changes.has('fixed')) {\n if (this.fixed) {\n this.style.left = this.fixed + 'px'\n } else {\n this.style.left = 'unset'\n }\n }\n\n const emphasized =\n this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized \|\| this.emphasized\n\n if (!!emphasized) {\n this.setAttribute('emphasized-row', '')\n\n if (Symbol.iterator in Object(emphasized)) {\n const [backgroundColor, foregroundColor] = emphasized as string[]\n backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n }\n } else {\n this.removeAttribute('emphasized-row')\n }\n }\n\n get editableOnClick() {\n const renderer = this.renderRoot.firstElementChild as HTMLElement\n //@ts-ignore\n return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n }\n}\n"]}
1	+ {"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-record-background-color);\n padding: var(--grid-record-padding);\n border: 1px solid transparent;\n border-width: 1px 0;\n border-bottom: var(--grid-record-border-bottom);\n\n font-size: var(--grid-record-wide-fontsize);\n min-height: 30px;\n box-sizing: border-box;\n }\n\n :host([gutter]) {\n padding: var(--grid-gutter-padding);\n text-align: center;\n }\n\n :host([gutter]) * {\n cursor: default;\n }\n\n :host([editing]) {\n border-top: var(--grid-record-editing-border);\n border-bottom: var(--grid-record-editing-border);\n }\n\n :host([focused]) {\n --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n }\n\n :host([dirty])::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n\n width: 0px;\n height: 0px;\n border-top: 9px solid red;\n border-left: 9px solid transparent;\n }\n\n span,\n pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n [center] {\n flex: none;\n margin: 0 auto;\n }\n\n :host > button {\n display: flex;\n gap: var(--spacing-small);\n border: 0;\n align-items: center;\n padding: var(--spacing-small);\n\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n font-size: 0.8rem;\n line-height: 0.8rem;\n\n md-icon {\n border: 0;\n padding: 0;\n background-color: unset;\n }\n }\n\n :host([danger]) > button {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-error);\n border-color: var(--md-sys-color-error);\n }\n\n :host([danger]) > button:hover {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n border-color: var(--md-sys-color-secondary);\n }\n `\n ]\n\n @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n @property({ type: Object }) record: GristRecord = {}\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex = 0\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean }) editing = false\n @property({ type: Object }) value = {}\n @property({ type: String }) valueWith: string \| null = null\n @property({ attribute: false }) emphasized: any = false\n @property({ type: String, attribute: true }) fixed?: string\n @property({ type: String }) type?: string\n @property({ type: Boolean }) isWorking: boolean = false\n\n / check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. /\n @property({ type: String }) checked?: string\n\n private _editCancelled?: boolean\n private _onFieldChange: (e: Event) => void = e => {}\n private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n render(): TemplateResult {\n if (!this.column) {\n return html``\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer, editor } = column.record\n\n return html`\n ${this.editing\n ? editor?.call(this, value, column, record, rowIndex, this)\n : renderer?.call(this, value, column, record, rowIndex, this)}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('editing')) {\n if (this.editing) {\n this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n if (e.key === 'Esc' \|\| e.key === 'Escape') {\n / 편집 취소 */\n this._editCancelled = true\n }\n }).bind(this)\n\n this._onFieldChange = ((e: Event) => {\n this._editCancelled && e.stopPropagation()\n }).bind(this)\n\n delete this._editCancelled\n this.addEventListener('field-change', this._onFieldChange)\n this.addEventListener('keydown', this._onKeydownInEditingMode)\n } else {\n this.removeEventListener('field-change', this._onFieldChange)\n this.removeEventListener('keydown', this._onKeydownInEditingMode)\n }\n }\n\n if (changes.has('column')) {\n var align = this.column.record.align \|\| DEFAULT_TEXT_ALIGN\n if (align != DEFAULT_TEXT_ALIGN) {\n let justify = 'center'\n switch (align) {\n case 'right':\n justify = 'flex-end'\n break\n }\n this.style.setProperty('--data-grid-field-justify-content', justify)\n this.style.setProperty('--data-grid-field-text-align', align)\n }\n\n const { danger } = this.column\n if (danger) {\n this.setAttribute('danger', '')\n } else {\n this.removeAttribute('danger')\n }\n }\n\n if (changes.has('fixed')) {\n if (this.fixed) {\n this.style.left = this.fixed + 'px'\n } else {\n this.style.left = 'unset'\n }\n }\n\n const disabled = this.column.record.disabled \|\| false\n if (!!disabled) {\n // 비황성화 여부 표시\n this.setAttribute('disabled', '')\n } else {\n // 비황성화 여부 제거\n this.removeAttribute('disabled')\n }\n\n const emphasized =\n this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized \|\| this.emphasized\n\n if (!!emphasized) {\n this.setAttribute('emphasized-row', '')\n\n if (Symbol.iterator in Object(emphasized)) {\n const [backgroundColor, foregroundColor] = emphasized as string[]\n backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n }\n } else {\n this.removeAttribute('emphasized-row')\n }\n }\n\n get editableOnClick() {\n const renderer = this.renderRoot.firstElementChild as HTMLElement\n //@ts-ignore\n return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n }\n}\n"]}

package/dist/src/record-view/ox-record-creator.js CHANGED Viewed

@@ -34,7 +34,9 @@ let OxRecordCreator = class OxRecordCreator extends LitElement {
     validateRecord(record) {
         const columns = this.grist.compiledConfig.columns;
         const invalidFields = [];
-        columns.forEach(column => {
+        columns
+            .filter(column => !column.hidden)
+            .forEach(column => {
             var _a;
             if (((_a = column.record) === null || _a === void 0 ? void 0 : _a.mandatory) &&
                 (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
@@ -106,13 +108,8 @@ let OxRecordCreator = class OxRecordCreator extends LitElement {
             }}
           @ok=${async (e) => {
                 const view = e.currentTarget;
-                // 레코드 밸리데이션 체크
                 const invalidFields = await this.validateRecord(view.record);
                 if (invalidFields.length > 0) {
-                    // const firstInvalidField = invalidFields[0];
-                    // if (firstInvalidField) {
-                    //   view.setFocus(firstInvalidField.field)
-                    // }
                     view.setFocusOnInvalid(invalidFields);
                     return false;
                 }
@@ -156,28 +153,18 @@ let OxRecordCreator = class OxRecordCreator extends LitElement {
                         popup.close();
                     });
                     recordView.addEventListener('ok', async (e) => {
-                        var _a, _b;
+                        var _a;
                         const view = e.currentTarget;
-                        // 레코드 밸리데이션 체크
                         const invalidFields = await this.validateRecord(view.record);
                         if (invalidFields.length > 0) {
-                            const firstInvalidField = invalidFields[0];
-                            if (firstInvalidField) {
-                                const fieldElement = (_a = view.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${firstInvalidField}"]`);
-                                if (fieldElement) {
-                                    ;
-                                    fieldElement.focus();
-                                }
-                            }
+                            view.setFocusOnInvalid(invalidFields);
                             return false;
                         }
-                        if (await ((_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, view.record))) {
+                        if (await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, view.record))) {
                             popup.close();
                         }
                         else {
-                            // 밸리데이션 실패 시 처리
-                            console.error('레코드 밸리데이션 실패');
-                            // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
+                            console.error('validation failed');
                         }
                     });
                     recordView.addEventListener('field-change', async (e) => {

package/dist/src/record-view/ox-record-creator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-record-creator.js","sourceRoot":"","sources":["../../../src/record-view/ox-record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class OxRecordCreator extends LitElement {\n static styles = [\n css`\n ::slotted([slot='popup']) {\n display: none;\n }\n `\n ]\n\n @state() grist?: DataGrist\n\n @property({ type: Object }) callback?: (record: GristRecord) => boolean\n @property({ type: Object }) customPopupCallback?: (popup: any) => boolean\n @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n constructor() {\n super()\n\n this.addEventListener('click', (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (this.lightPopup) {\n this.openLightPopup()\n } else {\n this.openPopup()\n }\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.grist = this.closest('ox-grist') as DataGrist\n }\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"popup\"></slot>\n `\n }\n\n validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n const columns = this.grist!.compiledConfig.columns\n const invalidFields: { field: string; reason: ValidationReason }[] = []\n\n columns.forEach(column => {\n if (\n column.record?.mandatory &&\n (record[column.name] === undefined \|\| record[column.name] === null \|\| record[column.name] === '')\n ) {\n invalidFields.push({\n field: column.name,\n reason: ValidationReason.MANDATORY\n })\n }\n })\n\n return invalidFields\n }\n\n openLightPopup() {\n const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n const slottedElements = slot?.assignedElements({ flatten: true })\n const originalContent = slottedElements?.[0] as HTMLElement\n\n if (originalContent) {\n this.lightPopupCustomCreator(originalContent)\n } else {\n this.lightPopupRecordView()\n }\n }\n\n openPopup() {\n const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n const slottedElements = slot?.assignedElements({ flatten: true })\n const originalContent = slottedElements?.[0] as HTMLElement\n\n if (originalContent) {\n this.popupCustomCreator(originalContent)\n } else {\n this.popupRecordView()\n }\n }\n\n lightPopupRecordView() {\n const config = this.grist!.compiledConfig\n var title = 'create'\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var popup = OxPopup.open({\n template: html`\n <div title>${title}</div>\n <ox-record-view\n @field-change=${(e: CustomEvent) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!validation.call(this, after, before, record, column)) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n }}\n .columns=${columns}\n .record=${record}\n .rowIndex=${rowIndex}\n @reset=${(e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n }}\n @cancel=${(e: Event) => {\n popup.close()\n }}\n @ok=${async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n // 레코드 밸리데이션 체크\n const invalidFields = await this.validateRecord(view.record)\n if (invalidFields.length > 0) {\n // const firstInvalidField = invalidFields[0];\n // if (firstInvalidField) {\n // view.setFocus(firstInvalidField.field)\n // }\n view.setFocusOnInvalid(invalidFields)\n return false\n }\n\n popup.close()\n\n this.dispatchEvent(\n new CustomEvent('ok', {\n bubbles: true,\n composed: true,\n detail: view.record\n })\n )\n }}\n ></ox-record-view>\n `,\n parent: document.body,\n preventCloseOnBlur: this.preventCloseOnBlur\n })\n }\n\n popupRecordView() {\n const config = this.grist!.compiledConfig\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var title = 'create'\n\n var recordView = document.createElement('ox-record-view') as RecordView\n\n recordView.columns = columns\n recordView.record = record\n recordView.rowIndex = rowIndex\n\n document.dispatchEvent(\n new CustomEvent('open-popup', {\n detail: {\n template: recordView,\n options: {\n backdrop: true,\n size: 'large',\n title\n },\n callback: (popup: any) => {\n recordView.addEventListener('reset', (e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n })\n\n recordView.addEventListener('cancel', (e: Event) => {\n popup.close()\n })\n\n recordView.addEventListener('ok', async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n // 레코드 밸리데이션 체크\n const invalidFields = await this.validateRecord(view.record)\n if (invalidFields.length > 0) {\n const firstInvalidField = invalidFields[0]\n if (firstInvalidField) {\n const fieldElement = view.renderRoot?.querySelector(`[name=\"${firstInvalidField}\"]`)\n if (fieldElement) {\n ;(fieldElement as HTMLElement).focus()\n }\n }\n return false\n }\n\n if (await this.callback?.(view.record)) {\n popup.close()\n } else {\n // 밸리데이션 실패 시 처리\n console.error('레코드 밸리데이션 실패')\n // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.\n }\n })\n\n recordView.addEventListener('field-change', async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!(await validation.call(this, after, before, record, column))) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n })\n\n popup.onclosed = () => {}\n }\n }\n })\n )\n }\n\n lightPopupCustomCreator(originalContent: HTMLElement) {\n const title = 'create'\n const popupContent = originalContent.cloneNode(true) as HTMLElement\n popupContent.removeAttribute('slot')\n\n OxPopup.open({\n template: html`\n <div title>${title}</div>\n ${popupContent}\n `,\n parent: document.body,\n preventCloseOnBlur: this.preventCloseOnBlur\n })\n\n this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행\n }\n\n popupCustomCreator(originalContent: HTMLElement) {\n const title = 'create'\n const popupContent = originalContent.cloneNode(true) as HTMLElement\n popupContent.removeAttribute('slot')\n\n document.dispatchEvent(\n new CustomEvent('open-popup', {\n detail: {\n template: popupContent,\n options: {\n backdrop: true,\n size: 'large',\n title\n },\n callback: this.customPopupCallback\n }\n })\n )\n }\n}\n"]}
1	+ {"version":3,"file":"ox-record-creator.js","sourceRoot":"","sources":["../../../src/record-view/ox-record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class OxRecordCreator extends LitElement {\n static styles = [\n css`\n ::slotted([slot='popup']) {\n display: none;\n }\n `\n ]\n\n @state() grist?: DataGrist\n\n @property({ type: Object }) callback?: (record: GristRecord) => boolean\n @property({ type: Object }) customPopupCallback?: (popup: any) => boolean\n @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n constructor() {\n super()\n\n this.addEventListener('click', (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (this.lightPopup) {\n this.openLightPopup()\n } else {\n this.openPopup()\n }\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.grist = this.closest('ox-grist') as DataGrist\n }\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"popup\"></slot>\n `\n }\n\n validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n const columns = this.grist!.compiledConfig.columns\n const invalidFields: { field: string; reason: ValidationReason }[] = []\n\n columns\n .filter(column => !column.hidden)\n .forEach(column => {\n if (\n column.record?.mandatory &&\n (record[column.name] === undefined \|\| record[column.name] === null \|\| record[column.name] === '')\n ) {\n invalidFields.push({\n field: column.name,\n reason: ValidationReason.MANDATORY\n })\n }\n })\n\n return invalidFields\n }\n\n openLightPopup() {\n const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n const slottedElements = slot?.assignedElements({ flatten: true })\n const originalContent = slottedElements?.[0] as HTMLElement\n\n if (originalContent) {\n this.lightPopupCustomCreator(originalContent)\n } else {\n this.lightPopupRecordView()\n }\n }\n\n openPopup() {\n const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n const slottedElements = slot?.assignedElements({ flatten: true })\n const originalContent = slottedElements?.[0] as HTMLElement\n\n if (originalContent) {\n this.popupCustomCreator(originalContent)\n } else {\n this.popupRecordView()\n }\n }\n\n lightPopupRecordView() {\n const config = this.grist!.compiledConfig\n var title = 'create'\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var popup = OxPopup.open({\n template: html`\n <div title>${title}</div>\n <ox-record-view\n @field-change=${(e: CustomEvent) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!validation.call(this, after, before, record, column)) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n }}\n .columns=${columns}\n .record=${record}\n .rowIndex=${rowIndex}\n @reset=${(e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n }}\n @cancel=${(e: Event) => {\n popup.close()\n }}\n @ok=${async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n const invalidFields = await this.validateRecord(view.record)\n if (invalidFields.length > 0) {\n view.setFocusOnInvalid(invalidFields)\n return false\n }\n\n popup.close()\n\n this.dispatchEvent(\n new CustomEvent('ok', {\n bubbles: true,\n composed: true,\n detail: view.record\n })\n )\n }}\n ></ox-record-view>\n `,\n parent: document.body,\n preventCloseOnBlur: this.preventCloseOnBlur\n })\n }\n\n popupRecordView() {\n const config = this.grist!.compiledConfig\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var title = 'create'\n\n var recordView = document.createElement('ox-record-view') as RecordView\n\n recordView.columns = columns\n recordView.record = record\n recordView.rowIndex = rowIndex\n\n document.dispatchEvent(\n new CustomEvent('open-popup', {\n detail: {\n template: recordView,\n options: {\n backdrop: true,\n size: 'large',\n title\n },\n callback: (popup: any) => {\n recordView.addEventListener('reset', (e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n })\n\n recordView.addEventListener('cancel', (e: Event) => {\n popup.close()\n })\n\n recordView.addEventListener('ok', async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n const invalidFields = await this.validateRecord(view.record)\n if (invalidFields.length > 0) {\n view.setFocusOnInvalid(invalidFields)\n return false\n }\n\n if (await this.callback?.(view.record)) {\n popup.close()\n } else {\n console.error('validation failed')\n }\n })\n\n recordView.addEventListener('field-change', async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!(await validation.call(this, after, before, record, column))) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n })\n\n popup.onclosed = () => {}\n }\n }\n })\n )\n }\n\n lightPopupCustomCreator(originalContent: HTMLElement) {\n const title = 'create'\n const popupContent = originalContent.cloneNode(true) as HTMLElement\n popupContent.removeAttribute('slot')\n\n OxPopup.open({\n template: html`\n <div title>${title}</div>\n ${popupContent}\n `,\n parent: document.body,\n preventCloseOnBlur: this.preventCloseOnBlur\n })\n\n this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행\n }\n\n popupCustomCreator(originalContent: HTMLElement) {\n const title = 'create'\n const popupContent = originalContent.cloneNode(true) as HTMLElement\n popupContent.removeAttribute('slot')\n\n document.dispatchEvent(\n new CustomEvent('open-popup', {\n detail: {\n template: popupContent,\n options: {\n backdrop: true,\n size: 'large',\n title\n },\n callback: this.customPopupCallback\n }\n })\n )\n }\n}\n"]}

package/dist/src/record-view/record-creator.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import '@material/web/icon/icon.js';
+import './record-view';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist';
+export declare class RecordCreator extends LitElement {
+    grist?: DataGrist;
+    callback?: (operation: {
+        [key: string]: any;
+    }) => boolean;
+    lightPopup: boolean;
+    preventCloseOnBlur: boolean;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    lightPopupRecordView(): void;
+    popupRecordView(): void;
+}

package/dist/src/record-view/record-creator.js ADDED Viewed

@@ -0,0 +1,148 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './record-view';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let RecordCreator = class RecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.lightPopup = false;
+        this.preventCloseOnBlur = false;
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.lightPopup) {
+                this.lightPopupRecordView();
+            }
+            else {
+                this.popupRecordView();
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    lightPopupRecordView() {
+        const config = this.grist.compiledConfig;
+        var title = 'create';
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var popup = OxPopup.open({
+            template: html `
+        <div title>${title}</div>
+        <ox-record-view
+          @field-change=${(e) => {
+                const view = e.currentTarget;
+                var { after, before, column, record, row } = e.detail;
+                var validation = column.validation;
+                if (validation && typeof validation == 'function') {
+                    if (!validation.call(this, after, before, record, column)) {
+                        return;
+                    }
+                }
+                view.record = {
+                    ...record,
+                    [column.name]: after
+                };
+            }}
+          .columns=${columns}
+          .record=${record}
+          .rowIndex=${rowIndex}
+          @reset=${(e) => {
+                const view = e.currentTarget;
+                view.record = {};
+            }}
+          @cancel=${(e) => {
+                popup.close();
+            }}
+          @ok=${(e) => {
+                popup.close();
+                const view = e.currentTarget;
+                this.dispatchEvent(new CustomEvent('ok', {
+                    bubbles: true,
+                    composed: true,
+                    detail: view.record
+                }));
+            }}
+        ></ox-record-view>
+      `,
+            parent: document.body,
+            preventCloseOnBlur: this.preventCloseOnBlur
+        });
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var title = 'create';
+        var recordView = document.createElement('ox-record-view');
+        recordView.columns = columns;
+        recordView.record = record;
+        recordView.rowIndex = rowIndex;
+        document.dispatchEvent(new CustomEvent('open-popup', {
+            detail: {
+                template: recordView,
+                options: {
+                    backdrop: true,
+                    size: 'large',
+                    title
+                },
+                callback: (popup) => {
+                    recordView.addEventListener('reset', (e) => {
+                        const view = e.currentTarget;
+                        view.record = {};
+                    });
+                    recordView.addEventListener('cancel', (e) => {
+                        popup.close();
+                    });
+                    recordView.addEventListener('ok', async (e) => {
+                        var _a;
+                        const view = e.currentTarget;
+                        if (await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, view.record))) {
+                            popup.close();
+                        }
+                    });
+                    recordView.addEventListener('field-change', async (e) => {
+                        const view = e.currentTarget;
+                        var { after, before, column, record, row } = e.detail;
+                        var validation = column.validation;
+                        if (validation && typeof validation == 'function') {
+                            if (!(await validation.call(this, after, before, record, column))) {
+                                return;
+                            }
+                        }
+                        view.record = {
+                            ...record,
+                            [column.name]: after
+                        };
+                    });
+                    popup.onclosed = () => { };
+                }
+            }
+        }));
+    }
+};
+__decorate([
+    state()
+], RecordCreator.prototype, "grist", void 0);
+__decorate([
+    property({ type: Object })
+], RecordCreator.prototype, "callback", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'light-popup' })
+], RecordCreator.prototype, "lightPopup", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-close-on-blur' })
+], RecordCreator.prototype, "preventCloseOnBlur", void 0);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator.js.map

package/dist/src/record-view/record-creator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n @state() grist?: DataGrist\n\n @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean\n @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n constructor() {\n super()\n\n this.addEventListener('click', (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (this.lightPopup) {\n this.lightPopupRecordView()\n } else {\n this.popupRecordView()\n }\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.grist = this.closest('ox-grist') as DataGrist\n }\n\n render() {\n return html`<slot></slot>`\n }\n\n lightPopupRecordView() {\n const config = this.grist!.compiledConfig\n var title = 'create'\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var popup = OxPopup.open({\n template: html`\n <div title>${title}</div>\n <ox-record-view\n @field-change=${(e: CustomEvent) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!validation.call(this, after, before, record, column)) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n }}\n .columns=${columns}\n .record=${record}\n .rowIndex=${rowIndex}\n @reset=${(e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n }}\n @cancel=${(e: Event) => {\n popup.close()\n }}\n @ok=${(e: Event) => {\n popup.close()\n\n const view = e.currentTarget as RecordView\n\n this.dispatchEvent(\n new CustomEvent('ok', {\n bubbles: true,\n composed: true,\n detail: view.record\n })\n )\n }}\n ></ox-record-view>\n `,\n parent: document.body,\n preventCloseOnBlur: this.preventCloseOnBlur\n })\n }\n\n popupRecordView() {\n const config = this.grist!.compiledConfig\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n var title = 'create'\n\n var recordView = document.createElement('ox-record-view') as RecordView\n\n recordView.columns = columns\n recordView.record = record\n recordView.rowIndex = rowIndex\n\n document.dispatchEvent(\n new CustomEvent('open-popup', {\n detail: {\n template: recordView,\n options: {\n backdrop: true,\n size: 'large',\n title\n },\n callback: (popup: any) => {\n recordView.addEventListener('reset', (e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n })\n\n recordView.addEventListener('cancel', (e: Event) => {\n popup.close()\n })\n\n recordView.addEventListener('ok', async (e: Event) => {\n const view = e.currentTarget as RecordView\n if (await this.callback?.(view.record)) {\n popup.close()\n }\n })\n\n recordView.addEventListener('field-change', async (e: Event) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!(await validation.call(this, after, before, record, column))) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n })\n\n popup.onclosed = () => {}\n }\n }\n })\n )\n }\n}\n"]}

package/dist/src/types.d.ts CHANGED Viewed

@@ -432,6 +432,7 @@ export type RecordConfig = {
     editor?: FieldEditor;
     editable?: boolean | Function;
     mandatory?: boolean;
+    disabled?: boolean;
     classifier: GristClassifier;
     align?: 'left' | 'right' | 'center';
     options: any;