@operato/data-grist 8.0.0-alpha.8 → 8.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.8",
+  "version": "8.0.0-beta.0",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-record-creator.js": "./dist/src/record-view/ox-record-creator.js",
     "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
@@ -41,7 +41,7 @@
         "dist/src/sorters/sorters-control.d.ts"
       ],
       "ox-record-creator.js": [
-        "dist/src/record-view/record-creator.d.ts"
+        "dist/src/record-view/ox-record-creator.d.ts"
       ],
       "ox-grist-personalizer.js": [
         "dist/src/personalizer/ox-grist-personalizer.d.ts"
@@ -62,32 +62,32 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/headroom": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/p13n": "^8.0.0-alpha.4",
-    "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/pull-to-refresh": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/time-calculator": "^8.0.0-alpha.6",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/headroom": "^8.0.0-beta.0",
+    "@operato/input": "^8.0.0-beta.0",
+    "@operato/p13n": "^8.0.0-beta.0",
+    "@operato/popup": "^8.0.0-beta.0",
+    "@operato/pull-to-refresh": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/time-calculator": "^8.0.0-beta.0",
+    "@operato/utils": "^8.0.0-beta.0",
     "i18next": "^23.11.5",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f495fb42a98844182ac2db30d7c2aea815488d62"
+  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
 }

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

@@ -61,6 +61,9 @@ export class DataGridBody extends LitElement {
     css`
       :host {
         font-variation-settings: 'FILL' 1;
+
+        overscroll-behavior: none;
+        user-select: none;
       }
 
       [select-block] {
@@ -72,6 +75,7 @@ export class DataGridBody extends LitElement {
         border: var(--grid-record-focused-cell-border);
         background-image: var(--focused-background-image);
         pointer-events: none;
+
         z-index: 5;
       }
 
@@ -289,14 +293,16 @@ export class DataGridBody extends LitElement {
       )
     })
 
-    this.renderRoot.addEventListener('mousedown', (event: Event) => {
-      const e = event as MouseEvent
+    this.renderRoot.addEventListener('pointerdown', (e: Event) => {
       this.setSelectBlock()
 
-      if (e.buttons !== 1) {
+      if ('buttons' in e && e.buttons !== 1) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       this._draggable = true
 
       var target = (e.target as Element).closest('ox-grid-field') as DataGridField
@@ -318,12 +324,15 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mousemove', (event: Event) => {
+    this.renderRoot.addEventListener('pointermove', (event: Event) => {
       const e = event as MouseEvent
-      if (e.buttons !== 1 || !this._draggable) {
+      if (('buttons' in e && e.buttons !== 1) || !this._draggable) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       const field = e.target as DataGridField
       if (!this._selectBlock) {
         this.setSelectBlock(this.focusedField || field, this.focusedField || field)
@@ -340,7 +349,10 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mouseup', (event: Event) => {
+    this.renderRoot.addEventListener('pointerup', (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
       this._draggable = false
     })
 
@@ -650,7 +662,11 @@ export class DataGridBody extends LitElement {
                 value = parseToNumberOrNull(value)
                 break
               default:
-                value = value
+                try {
+                  value = JSON.parse(value)
+                } catch (err) {
+                  value = value
+                }
             }
 
             if (targetColumn && !targetColumn.gutterName && editable) {

package/src/data-grid/data-grid-footer.ts

@@ -21,6 +21,8 @@ export class DataGridFooter extends LitElement {
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
         align-items: center;
+
+        user-select: none;
       }
 
       :host * {

package/src/data-grid/data-grid-header.ts

@@ -28,6 +28,8 @@ export class DataGridHeader extends LitElement {
         overflow: hidden;
 
         font-variation-settings: 'FILL' 1;
+
+        user-select: none;
       }
 
       :host([raised]) [fixed] {
@@ -266,7 +268,9 @@ export class DataGridHeader extends LitElement {
           : nothing}
         ${column.resizable !== false
           ? html`
-              <span splitter draggable="false" @mousedown=${(e: MouseEvent) => this._mousedown(e, index)}>&nbsp;</span>
+              <span splitter draggable="false" @pointerdown=${(e: PointerEvent) => this._pointerdown(e, index)}
+                >&nbsp;</span
+              >
             `
           : nothing}
       </div>
@@ -543,11 +547,11 @@ export class DataGridHeader extends LitElement {
     this._throttledNotifier(idx, width)
   }
 
-  _mousedown(e: MouseEvent, idx: number) {
+  _pointerdown(e: MouseEvent, idx: number) {
     e.stopPropagation()
     e.preventDefault()
 
-    var mousemoveHandler = ((e: MouseEvent) => {
+    var pointermoveHandler = ((e: MouseEvent) => {
       e.stopPropagation()
       e.preventDefault()
       let column = this.columns[idx]
@@ -561,14 +565,14 @@ export class DataGridHeader extends LitElement {
       this._notifyWidthChange(idx, width)
     }).bind(this)
 
-    var mouseupHandler = ((e: MouseEvent) => {
-      document.removeEventListener('mousemove', mousemoveHandler)
-      document.removeEventListener('mouseup', mouseupHandler)
+    var pointerupHandler = ((e: MouseEvent) => {
+      document.removeEventListener('pointermove', pointermoveHandler)
+      document.removeEventListener('pointerup', pointerupHandler)
 
-      mousemoveHandler(e)
+      pointermoveHandler(e)
     }).bind(this)
 
-    document.addEventListener('mousemove', mousemoveHandler)
-    document.addEventListener('mouseup', mouseupHandler)
+    document.addEventListener('pointermove', pointermoveHandler)
+    document.addEventListener('pointerup', pointerupHandler)
   }
 }

package/src/editors/ox-grist-editor-varname.ts

@@ -0,0 +1,36 @@
+import { OxGristEditor } from './ox-grist-editor.js'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-grist-editor-varname')
+export class OxGristEditorVarname extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
+  get editorTemplate() {
+    return html`
+      <input
+        type="text"
+        .value=${this.value}
+        @input=${this.handleInput}
+        pattern="^[A-Za-z_][A-Za-z0-9_]*$"
+        title="Variable names must start with a letter or underscore and contain only letters, numbers, or underscores."
+      />
+    `
+  }
+
+  handleInput(event: KeyboardEvent) {
+    const input = event.target as HTMLInputElement
+    const regex = /^[A-Za-z_][A-Za-z0-9_]*$/
+
+    // Only allow valid characters as the user types
+    if (!regex.test(input.value)) {
+      // Keep only valid characters and start with a letter or underscore
+      input.value = input.value.replace(/[^A-Za-z0-9_]/g, '').replace(/^[^A-Za-z_]+/, '')
+    }
+
+    // Update the component's internal value state
+    this.value = input.value
+  }
+}

package/src/editors/ox-grist-editor.ts

@@ -107,9 +107,9 @@ export class OxGristEditor extends LitElement {
     this.addEventListener('keydown', this._onkeydown.bind(this))
 
     /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */
-    this.addEventListener('mousedown', (e: Event) => e.stopPropagation())
-    this.addEventListener('mousemove', (e: Event) => e.stopPropagation())
-    this.addEventListener('mouseup', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())
 
     const { name = '' } = this.column
     const { align, defaultValue } = this.column.record

package/src/editors/registry.ts

@@ -19,6 +19,7 @@ import { OxGristEditorTextarea } from './ox-grist-editor-textarea'
 import { OxGristEditorTime } from './ox-grist-editor-time'
 import { OxGristEditorTree } from './ox-grist-editor-tree'
 import { OxGristEditorWeek } from './ox-grist-editor-week'
+import { OxGristEditorVarname } from './ox-grist-editor-varname'
 
 var EDITORS: { [name: string]: { new (): OxGristEditor } } = {
   string: OxGristEditorText,
@@ -44,7 +45,8 @@ var EDITORS: { [name: string]: { new (): OxGristEditor } } = {
   image: OxGristEditorImage,
   file: OxGristEditorFile,
   'string[]': OxGristEditorMultipleSelect,
-  tree: OxGristEditorTree
+  tree: OxGristEditorTree,
+  varname: OxGristEditorVarname
 }
 
 export function registerEditor(type: string, editor: { new (): OxGristEditor }) {

package/src/record-view/index.ts

@@ -1,2 +1,2 @@
 export * from './record-view'
-export * from './record-creator'
+export * from './ox-record-creator'

package/src/record-view/{record-creator.ts → ox-record-creator.ts}

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js'
 import './record-view'
 
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopup } from '@operato/popup'
@@ -11,10 +11,19 @@ import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { RecordView } from './record-view'
 
 @customElement('ox-record-creator')
-export class RecordCreator extends LitElement {
+export class OxRecordCreator extends LitElement {
+  static styles = [
+    css`
+      ::slotted([slot='popup']) {
+        display: none;
+      }
+    `
+  ]
+
   @state() grist?: DataGrist
 
-  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
+  @property({ type: Object }) callback?: (record: GristRecord) => boolean
+  @property({ type: Object }) customPopupCallback?: (popup: any) => boolean
   @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
   @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false
 
@@ -26,9 +35,9 @@ export class RecordCreator extends LitElement {
       e.stopPropagation()
 
       if (this.lightPopup) {
-        this.lightPopupRecordView()
+        this.openLightPopup()
       } else {
-        this.popupRecordView()
+        this.openPopup()
       }
     })
   }
@@ -40,26 +49,57 @@ export class RecordCreator extends LitElement {
   }
 
   render() {
-    return html`<slot></slot>`
+    return html`
+      <slot></slot>
+      <slot name="popup"></slot>
+    `
   }
 
   validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {
-    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
-        });
-      }
-      // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.
-    });
+    const columns = this.grist!.compiledConfig.columns
+    const invalidFields: { field: string; reason: ValidationReason }[] = []
+
+    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
   }
 
+  openLightPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.lightPopupCustomCreator(originalContent)
+    } else {
+      this.lightPopupRecordView()
+    }
+  }
+
+  openPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.popupCustomCreator(originalContent)
+    } else {
+      this.popupRecordView()
+    }
+  }
+
   lightPopupRecordView() {
     const config = this.grist!.compiledConfig
     var title = 'create'
@@ -105,17 +145,12 @@ export class RecordCreator extends LitElement {
             popup.close()
           }}
           @ok=${async (e: Event) => {
-              const view = e.currentTarget as RecordView
+            const view = e.currentTarget as RecordView
 
-            // 레코드 밸리데이션 체크
-            const invalidFields = await this.validateRecord(view.record);
+            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;
+              view.setFocusOnInvalid(invalidFields)
+              return false
             }
 
             popup.close()
@@ -171,25 +206,16 @@ export class RecordCreator extends LitElement {
             recordView.addEventListener('ok', async (e: Event) => {
               const view = e.currentTarget as RecordView
 
-              // 레코드 밸리데이션 체크
-              const invalidFields = await this.validateRecord(view.record);
+              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();
-                  }
-                }
-                return false;
+                view.setFocusOnInvalid(invalidFields)
+                return false
               }
-              
+
               if (await this.callback?.(view.record)) {
                 popup.close()
               } else {
-                // 밸리데이션 실패 시 처리
-                console.error('레코드 밸리데이션 실패');
-                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
+                console.error('validation failed')
               }
             })
 
@@ -223,4 +249,41 @@ export class RecordCreator extends LitElement {
       })
     )
   }
+
+  lightPopupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    OxPopup.open({
+      template: html`
+        <div title>${title}</div>
+        ${popupContent}
+      `,
+      parent: document.body,
+      preventCloseOnBlur: this.preventCloseOnBlur
+    })
+
+    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행
+  }
+
+  popupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    document.dispatchEvent(
+      new CustomEvent('open-popup', {
+        detail: {
+          template: popupContent,
+          options: {
+            backdrop: true,
+            size: 'large',
+            title
+          },
+          callback: this.customPopupCallback
+        }
+      })
+    )
+  }
 }

package/src/renderers/ox-grist-renderer-boolean.ts

@@ -12,7 +12,7 @@ export const OxGristRendererBoolean: FieldRenderer = (value, column, record, row
       type="checkbox"
       .checked=${!!value && !!String(value).match(/true/i)}
       ?disabled=${!editable}
-      @mousedown=${(e: Event) => {
+      @pointerdown=${(e: Event) => {
         /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */
         e.stopPropagation()
       }}

package/stories/accumulator-format.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'