@stubber/form-fields 1.2.3 → 1.4.0

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/Multicheckbox.svelte

@@ -1,113 +1,77 @@
 <script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
+  import { merge, startCase } from "lodash-es";
   import { onMount } from "svelte";
-  import { writable } from "svelte/store";
 
   import { Checkbox } from "@stubber/ui/checkbox";
   import { Label } from "@stubber/ui/label";
 
   export let field;
 
-  const internal = writable({
-    checks: [],
-  });
-
   $: 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;
-  $: items = _.isArray($field.spec?.params?.options)
-    ? $field.spec?.params?.options?.map((o, index) => {
-        let { label, value } = o || {};
-        let _value = value !== undefined ? value : label;
-        let _label = label ?? value;
-        let _key = `${state_key}${label}${index}`;
-        return { _key, _label, _value };
-      })
-    : [];
+  $: options = $field.spec?.params?.options; // options is an object with a label property, value property (optional) and checked property
 
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = f?.data?.base || [];
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      checks: items.map((i) =>
-        Boolean(
-          initial_value.find((iv) => deepEqual(iv.value, i._value) && deepEqual(iv.label, i._label))
-        )
-      ),
-    };
-    _.set(f, "state.internal", initial_state_internal);
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
+  // $: console.log("field", $field);
 
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
+  // $: console.log("options", options);
+  onMount(() => {
+    /// merge all options into data.base
+    field.update((f) => {
+      if (!f.data) {
+        f.data = {};
+      }
+      if (!f.data.base) {
+        f.data.base = {};
+      }
 
-        // get parts from data
-        _clone.checks = items.map((i) =>
-          Boolean(
-            a?.data?.base.find(
-              (iv) => deepEqual(iv.value, i._value) && deepEqual(iv.label, i._label)
-            )
-          )
-        );
+      const merged_base = merge({}, options, f.data.base);
+      // ensure all options have a checked property
 
-        // set field state if changed
-        if (!deepEqual(a?.state?.internal, _clone)) {
-          $field.state.internal = _clone;
+      Object.entries(merged_base).forEach(([key, item]) => {
+        if (typeof item === "object" && item.checked === undefined) {
+          item.checked = false;
         }
+      });
 
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        let base = [];
-        b.checks.forEach((c, index) => {
-          if (c)
-            base.push({
-              value: items[index]._value,
-              label: items[index]._label,
-            });
-        });
-        _.set(_clone, "data.base", base);
-        return _clone;
-      }
-    );
+      f.data.base = merged_base;
+      return f;
+    });
   });
+
+  //: boolean | "indeterminate" | undefined
+  const on_change = (new_value, key) => {
+    field.update((f) => {
+      if (!f.data.base[key]) {
+        f.data.base[key] = {};
+      }
+      f.data.base[key].checked = new_value;
+      return f;
+    });
+  };
 </script>
 
-{#if $internal}
-  <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
-    {#each items as item, index}
-      <div class="flex space-x-3 relative mt-2">
-        <Checkbox
-          id="input_{state_key}_{index}"
-          name={state_key}
-          bind:checked={$internal.checks[index]}
-        />
+<div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
+  <Label class="block pb-2 {hide_label ? 'hidden' : ''}">
+    {label}
+  </Label>
+  {#each Object.entries(options) as [key, item] (key)}
+    <div class="flex space-x-3 relative mt-2">
+      <Checkbox
+        id="input_{state_key}_{key}"
+        name={key}
+        checked={$field.data?.base?.[key]?.checked || false}
+        onCheckedChange={(new_value) => on_change(new_value, key)}
+      />
 
-        <Label for="input_{state_key}" class=" {hide_label ? 'hidden' : ''}">
-          {item._label}
-        </Label>
-      </div>
-    {/each}
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}
+      <Label for="input_{state_key}_${key}" class=" {hide_label ? 'hidden' : ''}">
+        {item.label || startCase(key)}
+      </Label>
+    </div>
+  {/each}
+  {#if validationMessage}
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
+  {/if}
+</div>

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

@@ -3,6 +3,7 @@ export namespace definitions {
     export { _valid_fieldtype };
     export { arraybuilder };
     export { checkbox };
+    export { code };
     export { contactselector };
     export { currency };
     export { dataindication };
@@ -45,10 +46,11 @@ export const selectableFieldtypes: ({
     label: string;
     value: string;
 } | null)[];
-import _all from "./_all.json";
-import _valid_fieldtype from "./_valid_fieldtype.json";
+import _all from "$lib/fields/definitions/_all.json";
+import _valid_fieldtype from "$lib/fields/definitions/_valid_fieldtype.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 +83,8 @@ 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 smart_text from "$lib/fields/definitions/smart_text.json";
 import telephone from "./telephone.json";
 import text from "./text.json";
 import voicenote from "./voicenote.json";
-import _placeholder from "./_placeholder.json";
+import _placeholder from "$lib/fields/definitions/_placeholder.json";

package/dist/fields/definitions/index.js

@@ -1,8 +1,9 @@
 // import _ from "lodash-es";
-import _all from "./_all.json";
-import _valid_fieldtype from "./_valid_fieldtype.json";
+import _all from "$lib/fields/definitions/_all.json";
+import _valid_fieldtype from "$lib/fields/definitions/_valid_fieldtype.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";
@@ -36,17 +37,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 smart_text from "$lib/fields/definitions/smart_text.json";
 import telephone from "./telephone.json";
 import text from "./text.json";
 import voicenote from "./voicenote.json";
-import _placeholder from "./_placeholder.json";
+import _placeholder from "$lib/fields/definitions/_placeholder.json";
 
 export const definitions = {
   _all,
   _valid_fieldtype,
   arraybuilder,
   checkbox,
+  code,
   contactselector,
   currency,
   dataindication,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "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",