@stubber/form-fields 1.3.0 → 1.4.1

package/dist/fields/components/Code.svelte

@@ -0,0 +1,117 @@
+<script>import { acceptCompletion, CompletionContext } from "@codemirror/autocomplete";
+import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { Label } from "@stubber/ui/label";
+import { basicSetup } from "codemirror";
+export let field;
+let value = $field.data.base || "";
+let params = $field.spec?.params || {};
+let globals = params?.globals || {};
+let editor_view;
+$: state_key = $field.state?.state_key;
+$: label = $field.spec?.title;
+$: hide_label = $field.spec?.hide_label;
+$: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+$: validationMessage = $field.state?.validation?.message;
+const tab_accept_completion = keymap.of([
+  {
+    key: "Tab",
+    run: acceptCompletion
+  }
+]);
+function keysFor(obj) {
+  return Object.keys(obj ?? {});
+}
+function globalCompletions(ctx) {
+  const m = ctx.matchBefore(/[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*\.?/);
+  if (!m && !ctx.explicit) return null;
+  const text = m?.text ?? "";
+  const trailingDot = text.endsWith(".");
+  const parts = (trailingDot ? text.slice(0, -1) : text).split(".").filter(Boolean);
+  let container = globals;
+  for (let i = 0; i < Math.max(0, parts.length - (trailingDot ? 0 : 1)); i++) {
+    container = container?.[parts[i]];
+    if (!container) break;
+  }
+  const last = trailingDot ? "" : parts[parts.length - 1] ?? "";
+  const from = ctx.pos - last.length;
+  return {
+    from,
+    options: keysFor(container).map((key) => ({
+      label: key,
+      type: "property"
+      // 👈 simplified
+    })),
+    validFor: /^\w*$/
+    // keep suggestions stable while typing
+  };
+}
+const stubber_completions = javascriptLanguage.data.of({
+  autocomplete: globalCompletions
+});
+function bind_codemirror(el) {
+  const min_height_editor = EditorView.theme({
+    ".cm-content, .cm-gutter": { minHeight: "200px" },
+    "&": { maxHeight: "300px" },
+    ".cm-scroller": { overflow: "auto" }
+  });
+  editor_view = new EditorView({
+    state: EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        javascript(),
+        stubber_completions,
+        tab_accept_completion,
+        min_height_editor,
+        update_listener
+      ]
+    }),
+    parent: el
+  });
+}
+const update_listener = EditorView.updateListener.of((update) => {
+  if (update.docChanged) {
+    const new_value = update.state.doc.toString();
+    if (new_value !== value) {
+      value = new_value;
+    }
+  }
+});
+$: sync_field_to_editor(value);
+const sync_field_to_editor = (new_value) => {
+  if (editor_view && editor_view.state.doc.toString() !== new_value) {
+    editor_view.dispatch({
+      changes: {
+        from: 0,
+        to: editor_view.state.doc.length,
+        insert: new_value
+      }
+    });
+  }
+  if ($field.data.base !== new_value) {
+    $field.data.base = new_value;
+  }
+};
+$: sync_field_to_value($field.data.base);
+const sync_field_to_value = (new_value) => {
+  if (new_value !== value) {
+    value = new_value;
+  }
+};
+</script>
+
+<div class="flex flex-col w-full my-2">
+  <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
+    {label}
+  </Label>
+  <div class="relative rounded-md">
+    <div use:bind_codemirror />
+  </div>
+  {#if validationMessage}
+    <Label class="mt-1.5 {!isValid ? `text-danger-500` : `text-success-500`}"
+      >{validationMessage}</Label
+    >
+  {/if}
+</div>

package/dist/fields/components/Code.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/dist/fields/components/index.d.ts

@@ -2,6 +2,7 @@ export namespace components {
     export { Arraybuilder as arraybuilder };
     export { Checkbox as checkbox };
     export { CheckboxAutocomplete as checkbox_autocomplete };
+    export { Code as code };
     export { Contactselector as contactselector };
     export { Currency as currency };
     export { Dataindication as dataindication };
@@ -44,6 +45,7 @@ export namespace components {
 import Arraybuilder from "./Arraybuilder.svelte";
 import Checkbox from "./Checkbox.svelte";
 import CheckboxAutocomplete from "./CheckboxAutocomplete.svelte";
+import Code from "./Code.svelte";
 import Contactselector from "./Contactselector.svelte";
 import Currency from "./Currency.svelte";
 import Dataindication from "./Dataindication.svelte";

package/dist/fields/components/index.js

@@ -37,11 +37,13 @@ import Text from "./Text.svelte";
 import Voicenote from "./Voicenote.svelte";
 import SmartText from "./SmartText.svelte";
 import CheckboxAutocomplete from "./CheckboxAutocomplete.svelte";
+import Code from "./Code.svelte";
 
 export const components = {
   arraybuilder: Arraybuilder,
   checkbox: Checkbox,
   checkbox_autocomplete: CheckboxAutocomplete,
+  code: Code,
   contactselector: Contactselector,
   currency: Currency,
   dataindication: Dataindication,

package/dist/fields/definitions/code.json

@@ -0,0 +1,15 @@
+{
+  "fieldtype": "code",
+  "description": "Code Editing Field",
+  "settings_form": {
+    "fields": {
+      "text_description": {
+        "fieldtype": "heading",
+        "params": {
+          "subheading_text": "Write code with syntax highlighting"
+        },
+        "__order": 0
+      }
+    }
+  }
+}

package/dist/fields/definitions/index.d.ts

@@ -1,8 +1,10 @@
 export namespace definitions {
-    export { _all };
-    export { _valid_fieldtype };
+    export { all as _all };
+    export { validfieldtype as _valid_fieldtype };
+    export { placeholder as _placeholder };
     export { arraybuilder };
     export { checkbox };
+    export { code };
     export { contactselector };
     export { currency };
     export { dataindication };
@@ -35,20 +37,21 @@ export namespace definitions {
     export { selectresource };
     export { signature };
     export { slider };
-    export { smart_text };
+    export { smarttext as smart_text };
     export { telephone };
     export { text };
     export { voicenote };
-    export { _placeholder };
 }
 export const selectableFieldtypes: ({
     label: string;
     value: string;
 } | null)[];
-import _all from "./_all.json";
-import _valid_fieldtype from "./_valid_fieldtype.json";
+import all from "./all.json";
+import validfieldtype from "./validfieldtype.json";
+import placeholder from "./placeholder.json";
 import arraybuilder from "./arraybuilder.json";
 import checkbox from "./checkbox.json";
+import code from "./code.json";
 import contactselector from "./contactselector.json";
 import currency from "./currency.json";
 import dataindication from "./dataindication.json";
@@ -81,8 +84,7 @@ import select from "./select.json";
 import selectresource from "./selectresource.json";
 import signature from "./signature.json";
 import slider from "./slider.json";
-import smart_text from "./smart_text.json";
+import smarttext from "./smarttext.json";
 import telephone from "./telephone.json";
 import text from "./text.json";
 import voicenote from "./voicenote.json";
-import _placeholder from "./_placeholder.json";

package/dist/fields/definitions/index.js

@@ -1,8 +1,11 @@
-// import _ from "lodash-es";
-import _all from "./_all.json";
-import _valid_fieldtype from "./_valid_fieldtype.json";
+// special non-field definitions
+import all from "./all.json";
+import validfieldtype from "./validfieldtype.json";
+import placeholder from "./placeholder.json";
+
 import arraybuilder from "./arraybuilder.json";
 import checkbox from "./checkbox.json";
+import code from "./code.json";
 import contactselector from "./contactselector.json";
 import currency from "./currency.json";
 import dataindication from "./dataindication.json";
@@ -27,7 +30,6 @@ import objectbuilder from "./objectbuilder.json";
 import qrcodescanner from "./qrcodescanner.json";
 import radio from "./radio.json";
 import renderfield from "./renderfield.json";
-// import richtext from "./richtext.json";
 import screenrecorder from "./screenrecorder.json";
 import screenshot from "./screenshot.json";
 import scrollandreaddisplay from "./scrollandreaddisplay.json";
@@ -36,17 +38,18 @@ import select from "./select.json";
 import selectresource from "./selectresource.json";
 import signature from "./signature.json";
 import slider from "./slider.json";
-import smart_text from "./smart_text.json";
+import smarttext from "./smarttext.json";
 import telephone from "./telephone.json";
 import text from "./text.json";
 import voicenote from "./voicenote.json";
-import _placeholder from "./_placeholder.json";
 
 export const definitions = {
-  _all,
-  _valid_fieldtype,
+  _all: all,
+  _valid_fieldtype: validfieldtype,
+  _placeholder: placeholder,
   arraybuilder,
   checkbox,
+  code,
   contactselector,
   currency,
   dataindication,
@@ -71,7 +74,6 @@ export const definitions = {
   qrcodescanner,
   radio,
   renderfield,
-  // richtext,
   screenrecorder,
   screenshot,
   scrollandreaddisplay,
@@ -80,11 +82,10 @@ export const definitions = {
   selectresource,
   signature,
   slider,
-  smart_text,
+  smart_text: smarttext,
   telephone,
   text,
   voicenote,
-  _placeholder,
 };
 
 export const selectableFieldtypes = Object.entries(definitions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -36,6 +36,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.2.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/codemirror": "^5.60.16",
     "autoprefixer": "^10.4.15",
     "chalk": "^5.3.0",
     "eslint": "^8.28.0",
@@ -55,13 +56,15 @@
   "type": "module",
   "dependencies": {
     "@beyonk/svelte-mapbox": "^11.0.0",
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/commands": "^6.7.1",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.4",
     "@stubber/ui": "^1.12.3",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
+    "codemirror": "^6.0.2",
     "currency-symbol-map": "^5.1.0",
     "currency.js": "^2.0.4",
     "dotenv": "^16.3.1",