@operato/data-grist 7.1.27 → 7.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "7.1.27",
+  "version": "7.1.30",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -63,9 +63,9 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^7.1.1",
-    "@operato/input": "^7.1.27",
-    "@operato/p13n": "^7.1.27",
-    "@operato/popup": "^7.1.27",
+    "@operato/input": "^7.1.30",
+    "@operato/p13n": "^7.1.30",
+    "@operato/popup": "^7.1.30",
     "@operato/pull-to-refresh": "^7.1.1",
     "@operato/styles": "^7.1.27",
     "@operato/time-calculator": "^7.1.1",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c1c3d738aa1f8462b2483cd1ebdfdfbe95d7e22a"
+  "gitHead": "863eb4937334eb66a3cd0e5dbea5c77bc1afc472"
 }

package/src/data-grid/data-grid-body-style.ts

@@ -17,6 +17,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/src/data-grid/data-grid-field.ts

@@ -203,6 +203,15 @@ export class DataGridField extends LitElement {
       }
     }
 
+    const disabled = this.column.record.disabled || false
+    if (!!disabled) {
+      // 비황성화 여부 표시
+      this.setAttribute('disabled', '')
+    } else {
+      // 비황성화 여부 제거
+      this.removeAttribute('disabled')
+    }
+
     const emphasized =
       this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized
 

package/src/record-view/ox-record-creator.ts

@@ -59,17 +59,19 @@ export class OxRecordCreator extends LitElement {
     const columns = this.grist!.compiledConfig.columns
     const invalidFields: { field: string; reason: ValidationReason }[] = []
 
-    columns.forEach(column => {
-      if (
-        column.record?.mandatory &&
-        (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')
-      ) {
-        invalidFields.push({
-          field: column.name,
-          reason: ValidationReason.MANDATORY
-        })
-      }
-    })
+    columns
+      .filter(column => !column.hidden)
+      .forEach(column => {
+        if (
+          column.record?.mandatory &&
+          (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')
+        ) {
+          invalidFields.push({
+            field: column.name,
+            reason: ValidationReason.MANDATORY
+          })
+        }
+      })
 
     return invalidFields
   }
@@ -145,13 +147,8 @@ export class OxRecordCreator extends LitElement {
           @ok=${async (e: Event) => {
             const view = e.currentTarget as RecordView
 
-            // 레코드 밸리데이션 체크
             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
             }
@@ -209,25 +206,16 @@ export class OxRecordCreator extends LitElement {
             recordView.addEventListener('ok', async (e: Event) => {
               const view = e.currentTarget as RecordView
 
-              // 레코드 밸리데이션 체크
               const invalidFields = await this.validateRecord(view.record)
               if (invalidFields.length > 0) {
-                const firstInvalidField = invalidFields[0]
-                if (firstInvalidField) {
-                  const fieldElement = view.renderRoot?.querySelector(`[name="${firstInvalidField}"]`)
-                  if (fieldElement) {
-                    ;(fieldElement as HTMLElement).focus()
-                  }
-                }
+                view.setFocusOnInvalid(invalidFields)
                 return false
               }
 
               if (await this.callback?.(view.record)) {
                 popup.close()
               } else {
-                // 밸리데이션 실패 시 처리
-                console.error('레코드 밸리데이션 실패')
-                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
+                console.error('validation failed')
               }
             })
 

package/src/types.ts

@@ -509,6 +509,7 @@ export type RecordConfig = {
   editor?: FieldEditor
   editable?: boolean | Function
   mandatory?: boolean
+  disabled?: boolean
   classifier: GristClassifier
   align?: 'left' | 'right' | 'center'
   options: any
@@ -810,4 +811,3 @@ export enum ValidationReason {
   RANGE = 'RANGE',
   UNIQUE = 'UNIQUE'
 }
-

package/stories/click-event-custom.stories.ts

@@ -141,7 +141,8 @@ const config = {
         editable: true,
         defaultValue: {
           name: 'now'
-        }
+        },
+        disabled: true
       },
       filter: 'between',
       sortable: true,