@operato/data-grist 7.1.13 → 7.1.21

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 }) {