@operato/data-grist 7.1.13 → 7.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "7.1.13",
+  "version": "7.1.25",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -63,11 +63,11 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^7.1.1",
-    "@operato/input": "^7.1.13",
-    "@operato/p13n": "^7.1.13",
-    "@operato/popup": "^7.1.13",
+    "@operato/input": "^7.1.25",
+    "@operato/p13n": "^7.1.25",
+    "@operato/popup": "^7.1.25",
     "@operato/pull-to-refresh": "^7.1.1",
-    "@operato/styles": "^7.1.6",
+    "@operato/styles": "^7.1.25",
     "@operato/time-calculator": "^7.1.1",
     "@operato/utils": "^7.1.1",
     "i18next": "^23.11.5",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "990bbb79d075a47522b891716b5f20de1196a220"
+  "gitHead": "daa7b0f5953931135eec4fceee6c28e3ed150f7a"
 }

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

@@ -650,7 +650,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/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/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 }) {