@stubber/form-fields 1.7.10 → 2.0.0

package/dist/{fields2 → form-fields}/sub/currency-field.svelte

@@ -44,8 +44,7 @@ export const currency_field_param_spec = {
 };
 </script>
 
-<script>import * as utils from "../../utils/index.js";
-import { Button } from "@stubber/ui/button";
+<script>import { Button } from "@stubber/ui/button";
 import * as Command from "@stubber/ui/command";
 import * as Popover from "@stubber/ui/popover";
 import getSymbolFromCurrency from "currency-symbol-map";
@@ -55,6 +54,7 @@ import { get as get_store_value } from "svelte/store";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
+import { inputRegexMask } from "../../utils/input_regex_mask";
 export let fieldStore;
 let field = $fieldStore;
 let params = field.params;
@@ -62,7 +62,6 @@ const currencyRegex = /^([0-9]+(\.?[0-9]?[0-9]?)?)$/;
 const currencyName = new Intl.DisplayNames("en-US", {
   type: "currency"
 });
-let { inputRegexMask } = utils;
 let initial_ui_value = $fieldStore.value || "";
 let currency_list = [];
 const build_currency_list_from_codes = (codes) => {

package/dist/{fields2 → form-fields}/sub/select-field.svelte

@@ -31,17 +31,20 @@ import { debounce, isEqual } from "lodash-es";
 import { tick } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import { set_value_details } from "../utils";
+import { clear_value_details, set_value_details } from "../utils";
 export let fieldStore;
 export let load_options = void 0;
 let open = false;
 let loading = false;
 let items = [];
 const state = createState();
-$: dropdownLabel = items.find((i) => isEqual(i.value, $fieldStore.value))?.label ?? $fieldStore.value?._default_label ?? get($fieldStore.formStore)[$fieldStore.data_path + "_label"] ?? "Select...";
+$: dropdownLabel = items.find((i) => isEqual(i.value, $fieldStore.value))?.label ?? $fieldStore.value?._default_label ?? "Select...";
 $: update_value_details_label(dropdownLabel);
 const update_value_details_label = (label) => {
-  if (!label || label === "Select...") return;
+  if (!label || label === "Select...") {
+    clear_value_details($fieldStore, "label");
+    return;
+  }
   set_value_details($fieldStore, "label", label);
 };
 const map_field_options = (options) => {

package/dist/{fields2 → form-fields}/utils.d.ts

@@ -7,3 +7,4 @@ export declare const generate_field_data_path: (key: string, field: IField, base
 export declare const get_field_label: (key: string, field: IField) => string;
 export declare const get_field_help_message: (field: IBuiltField) => IValidationResult | undefined;
 export declare const set_value_details: (field: IBuiltField, key: "label" | "details", details: any) => void;
+export declare const clear_value_details: (field: IBuiltField, key: "label" | "details") => void;

package/dist/{fields2 → form-fields}/utils.js

@@ -1,4 +1,4 @@
-import { get, isEqual, set, startCase } from "lodash-es";
+import { get, isEqual, set, startCase, unset } from "lodash-es";
 import { get as getStoreValue, writable } from "svelte/store";
 export const build_fields = (formStore, attachmentsStore, formDependencies, input_fields, base_path = null) => {
     return Object.entries(input_fields).map(([key, field]) => {
@@ -117,3 +117,11 @@ export const set_value_details = (field, key, details) => {
         });
     }
 };
+export const clear_value_details = (field, key) => {
+    const formStore = field.formStore;
+    const value_details_path = field.data_path + `_${key}`;
+    formStore.update((f) => {
+        unset(f, value_details_path);
+        return f;
+    });
+};

package/dist/utils/input_regex_mask.d.ts

@@ -0,0 +1,3 @@
+export declare function inputRegexMask(input: HTMLInputElement, regex: RegExp): {
+    destroy(): void;
+};

package/dist/utils/input_regex_mask.js

@@ -0,0 +1,25 @@
+export function inputRegexMask(input, regex) {
+    let lastValidValue;
+    function handleBeforeInput(event) {
+        lastValidValue = event.target.value;
+    }
+    function handleInput(event) {
+        const input_element = event.target;
+        let { value, selectionStart } = input_element;
+        if (!regex.test(value) && value && selectionStart) {
+            input_element.value = lastValidValue;
+            const cursorPlace = selectionStart - (value.length - value.length);
+            requestAnimationFrame(() => input_element.setSelectionRange(cursorPlace, cursorPlace));
+            return;
+        }
+        lastValidValue = value;
+    }
+    input.addEventListener("beforeinput", handleBeforeInput);
+    input.addEventListener("input", handleInput);
+    return {
+        destroy() {
+            input.removeEventListener("beforeinput", handleBeforeInput);
+            input.removeEventListener("input", handleInput);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.7.10",
+  "version": "2.0.0",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -17,12 +17,8 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./fields2": {
-      "types": "./dist/fields2/index.d.ts",
-      "svelte": "./dist/fields2/index.js"
+      "types": "./dist/form-fields/index.d.ts",
+      "svelte": "./dist/form-fields/index.js"
     }
   },
   "scripts": {
@@ -66,7 +62,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.6",
+    "@stubber/ui": "^1.13.7",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",

package/dist/Field.svelte

@@ -1,36 +0,0 @@
-<script>
-  import { getContext, onDestroy, onMount } from "svelte";
-  import * as utils from "./utils/index.js";
-  import _ from "lodash-es";
-
-  export let form;
-  export let initial_field_spec = null;
-  export let parent_field = null;
-  export let field_wrapper = null;
-  export let field = null;
-
-  const default_field_wrapper = getContext("stubber-form-fields-default-wrapper");
-
-  let removeField;
-  onMount(() => {
-    let addResult = form.addField(initial_field_spec, $parent_field?.state?.state_key);
-    if (addResult?.state_key) field = utils.createField(addResult?.state_key, form);
-    if (addResult?.removeField) removeField = addResult?.removeField;
-  });
-
-  onDestroy(() => {
-    if (removeField) removeField();
-  });
-
-  // derive the field wrapper
-  $: FieldWrapper = field_wrapper || default_field_wrapper;
-
-  // get the right svelte component
-  $: fieldcomponent = utils.mapFieldToComponent($field?.spec);
-</script>
-
-{#if $field?.state?.conditions_passed}
-  <div class={$field?.state?.invisible ? "invisible absolute" : ""}>
-    <svelte:component this={FieldWrapper} {form} {field} {fieldcomponent} {parent_field} />
-  </div>
-{/if}

package/dist/Field.svelte.d.ts

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  FieldProps */
-/** @typedef {typeof __propDef.events}  FieldEvents */
-/** @typedef {typeof __propDef.slots}  FieldSlots */
-export default class Field extends SvelteComponent<{
-    form: any;
-    field?: null | undefined;
-    parent_field?: null | undefined;
-    initial_field_spec?: null | undefined;
-    field_wrapper?: null | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FieldProps = typeof __propDef.props;
-export type FieldEvents = typeof __propDef.events;
-export type FieldSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field?: null | undefined;
-        parent_field?: null | undefined;
-        initial_field_spec?: null | undefined;
-        field_wrapper?: null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/Form.svelte

@@ -1,34 +0,0 @@
-<script>
-  import { setContext } from "svelte";
-  import * as utils from "./utils/index.js";
-  import _ from "lodash-es";
-  import Field from "./Field.svelte";
-  import NullFieldWrapper from "./NullFieldWrapper.svelte";
-  import { deepEqual } from "fast-equals";
-
-  export let initial_form = {};
-  export let form = null;
-  export let field_wrapper = null;
-  export let dependencies = null;
-
-  form = utils.createForm({ dependencies, form });
-  setContext("stubber-form-fields-default-wrapper", field_wrapper || NullFieldWrapper);
-
-  let debounceRenderForm = utils.debounce(renderForm, 50);
-  $: debounceRenderForm(initial_form);
-  function renderForm(v) {
-    if (!deepEqual($form?.initial_form, v)) form.initialize(v);
-  }
-
-  $: fields = utils.getFieldsToRender($form?.root_spec?.fields);
-</script>
-
-{#if $form?.render_index}
-  {#key $form?.render_index}
-    {#if fields}
-      {#each fields as initial_field_spec (initial_field_spec.__key)}
-        <Field {form} {initial_field_spec} />
-      {/each}
-    {/if}
-  {/key}
-{/if}

package/dist/Form.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  FormProps */
-/** @typedef {typeof __propDef.events}  FormEvents */
-/** @typedef {typeof __propDef.slots}  FormSlots */
-export default class Form extends SvelteComponent<{
-    form?: any;
-    field_wrapper?: null | undefined;
-    initial_form?: {} | undefined;
-    dependencies?: null | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form?: any;
-        field_wrapper?: null | undefined;
-        initial_form?: {} | undefined;
-        dependencies?: null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/NullFieldWrapper.svelte

@@ -1,6 +0,0 @@
-<script>
-  // fieldWrapper
-  export let fieldcomponent;
-</script>
-
-<svelte:component this={fieldcomponent} {...$$props} />

package/dist/NullFieldWrapper.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  NullFieldWrapperProps */
-/** @typedef {typeof __propDef.events}  NullFieldWrapperEvents */
-/** @typedef {typeof __propDef.slots}  NullFieldWrapperSlots */
-export default class NullFieldWrapper extends SvelteComponent<{
-    [x: string]: any;
-    fieldcomponent: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NullFieldWrapperProps = typeof __propDef.props;
-export type NullFieldWrapperEvents = typeof __propDef.events;
-export type NullFieldWrapperSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        fieldcomponent: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/component_parts/arraybuilder/FieldWrapper.svelte

@@ -1,74 +0,0 @@
-<script>
-  import _ from "lodash-es";
-
-  import { Button } from "@stubber/ui/button";
-
-  // fieldWrapper
-  export let field;
-  export let fieldcomponent;
-  export let parent_field;
-
-  function removeEntry() {
-    let field_index = parseInt($field.spec?.__key);
-    // update the parent field
-    let parent_data = _.cloneDeep($parent_field?.data?.base);
-    if (_.isArray(parent_data)) {
-      parent_data = parent_data.slice(0, field_index).concat(parent_data.slice(field_index + 1));
-    }
-
-    parent_field.update((p) => {
-      let cp = _.cloneDeep(p);
-      _.set(cp, "data.base", parent_data);
-      return cp;
-    });
-  }
-
-  function reorder(is_move_higher) {
-    let field_index = parseInt($field.spec?.__key);
-    let sibling_index = field_index + (is_move_higher ? 1 : -1);
-
-    if (sibling_index < 0 || sibling_index >= $parent_field?.data?.base?.length) return;
-
-    // update the parent field
-    let parent_data = _.cloneDeep($parent_field?.data?.base);
-    if (_.isArray(parent_data)) {
-      let temp = _.cloneDeep(parent_data[field_index]);
-      parent_data[field_index] = _.cloneDeep(parent_data[sibling_index]);
-      parent_data[sibling_index] = temp;
-    }
-
-    $parent_field.data.base = parent_data;
-  }
-</script>
-
-<div class="flex items-center pb-1">
-  <div class="relative flex-grow-0 mr-2">
-    <Button
-      on:click={() => reorder(false)}
-      variant="ghost"
-      size="icon"
-      class="flex items-center justify-center w-5 h-5 "
-    >
-      <i class="fa-sharp fa-regular fa-angle-up text-base" />
-    </Button>
-    <Button
-      on:click={() => reorder(true)}
-      variant="ghost"
-      size="icon"
-      class="flex items-center justify-center w-5 h-5"
-    >
-      <i class="fa-sharp fa-regular fa-angle-down text-base" />
-    </Button>
-  </div>
-  <div class="flex-grow">
-    <svelte:component this={fieldcomponent} {...$$props} field_wrapper={null} />
-  </div>
-  <Button
-    on:click={removeEntry}
-    variant="destructive"
-    size="icon"
-    class="flex-grow-0 flex items-center justify-center w-6 h-6 ml-2 "
-  >
-    <i class="fa-regular fa-trash-alt text-xs" />
-  </Button>
-</div>

package/dist/fields/component_parts/arraybuilder/FieldWrapper.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  FieldWrapperProps */
-/** @typedef {typeof __propDef.events}  FieldWrapperEvents */
-/** @typedef {typeof __propDef.slots}  FieldWrapperSlots */
-export default class FieldWrapper extends SvelteComponent<{
-    [x: string]: any;
-    field: any;
-    fieldcomponent: any;
-    parent_field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FieldWrapperProps = typeof __propDef.props;
-export type FieldWrapperEvents = typeof __propDef.events;
-export type FieldWrapperSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        field: any;
-        fieldcomponent: any;
-        parent_field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/component_parts/fieldbuilder/FieldWrapper.svelte

@@ -1,8 +0,0 @@
-<script>
-  // fieldWrapper
-  export let fieldcomponent;
-</script>
-
-<div class="mb-2">
-  <svelte:component this={fieldcomponent} {...$$props} />
-</div>

package/dist/fields/component_parts/fieldbuilder/FieldWrapper.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  FieldWrapperProps */
-/** @typedef {typeof __propDef.events}  FieldWrapperEvents */
-/** @typedef {typeof __propDef.slots}  FieldWrapperSlots */
-export default class FieldWrapper extends SvelteComponent<{
-    [x: string]: any;
-    fieldcomponent: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FieldWrapperProps = typeof __propDef.props;
-export type FieldWrapperEvents = typeof __propDef.events;
-export type FieldWrapperSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        fieldcomponent: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/AgGrid.svelte

@@ -1,46 +0,0 @@
-<script>import { syncStoreToStore } from "../../utils/syncing";
-import { deepEqual } from "fast-equals";
-import _ from "lodash-es";
-import { onMount } from "svelte";
-import { createGrid, GridApi } from "ag-grid-community";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-material.css";
-export let field;
-$: 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;
-let gridDiv;
-let gridApi;
-const gridOptions = {
-  autoSizeStrategy: {
-    type: "fitGridWidth",
-    defaultMinWidth: 100
-  },
-  defaultColDef: {
-    suppressMovable: true
-  },
-  onGridReady: (params) => {
-    gridApi = params.api;
-  },
-  onCellValueChanged: () => {
-    let rowData = [];
-    gridApi.forEachNode((node) => rowData.push(node.data));
-    $field.data.base = rowData;
-  },
-  // Row Data: The data to be displayed.
-  rowData: [],
-  // Column Definitions: Defines & controls grid columns.
-  columnDefs: []
-};
-onMount(() => {
-  let columnDefs = $field.spec?.params?.columnDefs;
-  if (columnDefs) gridOptions.columnDefs = columnDefs;
-  let rowData = $field.data?.base;
-  if (Array.isArray(rowData)) gridOptions.rowData = rowData;
-  createGrid(gridDiv, gridOptions);
-});
-</script>
-
-<div bind:this={gridDiv} class="ag-theme-material w-full h-96" />

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

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-material.css";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AgGridProps = typeof __propDef.props;
-export type AgGridEvents = typeof __propDef.events;
-export type AgGridSlots = typeof __propDef.slots;
-export default class AgGrid extends SvelteComponent<AgGridProps, AgGridEvents, AgGridSlots> {
-}
-export {};

package/dist/fields/components/Arraybuilder.svelte

@@ -1,98 +0,0 @@
-<script>
-  import _ from "lodash-es";
-  import FieldWrapper from "../component_parts/arraybuilder/FieldWrapper.svelte";
-  import Field from "../../Field.svelte";
-  import { onMount } from "svelte";
-  import { deepEqual } from "fast-equals";
-
-  import { Button } from "@stubber/ui/button";
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  $: 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;
-  $: new_entry = {
-    ...$field.spec?.params?.new_entry_field,
-    hide_label: true,
-    title: $field.spec?.params?.new_entry_field?.title || "New Entry",
-    details: {
-      ...$field.spec?.params?.new_entry_field?.details,
-      datapath: "",
-      keyname: "",
-    },
-  };
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
-    let initial_data = _.merge(
-      {
-        base: initial_value,
-      },
-      f?.data
-    );
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
-  });
-
-  function addEntry() {
-    field.update((f) => {
-      let new_data_base = _.cloneDeep($field?.data?.base);
-      if (!_.isArray(new_data_base)) new_data_base = [];
-      new_data_base.push(null);
-      _.set(f, `data.base`, new_data_base);
-      return f;
-    });
-  }
-
-  let rendered_fields;
-  $: updateRenderedFields($field?.data?.base, new_entry);
-  function updateRenderedFields(d, e) {
-    let update = [];
-
-    if (!_.isArray(d)) return;
-
-    d?.forEach((element, i) => {
-      update.push(
-        _.merge({}, _.cloneDeep(e), {
-          __order: i,
-          __key: i.toString(),
-          without_value_details: true,
-        })
-      );
-    });
-
-    if (!deepEqual(rendered_fields, update)) {
-      rendered_fields = _.cloneDeep(update);
-    }
-  }
-</script>
-
-{#if new_entry}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative mt-2 rounded-md">
-      {#if rendered_fields}
-        {#each rendered_fields as initial_field_spec (initial_field_spec?.__key)}
-          <Field {form} {initial_field_spec} parent_field={field} field_wrapper={FieldWrapper} />
-        {/each}
-      {/if}
-      <div>
-        <Button type="button" size="icon" variant="outline" on:click={() => addEntry()} class="">
-          <i class="fa-regular fa-plus" />
-        </Button>
-      </div>
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ArraybuilderProps */
-/** @typedef {typeof __propDef.events}  ArraybuilderEvents */
-/** @typedef {typeof __propDef.slots}  ArraybuilderSlots */
-export default class Arraybuilder extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ArraybuilderProps = typeof __propDef.props;
-export type ArraybuilderEvents = typeof __propDef.events;
-export type ArraybuilderSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};