@stubber/form-fields 1.7.8 → 1.8.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/file-field.svelte

@@ -19,14 +19,6 @@ import { append_attachment, remove_attachment, uploadFiles } from "../fileserver
 export let fieldStore;
 $: validation_result = $fieldStore.validation_result;
 $: validation_type = validation_result?.type;
-function parse_string_value(value) {
-  if (value === "true") return true;
-  if (value === "false") return false;
-  if (value !== "" && !isNaN(Number(value))) {
-    return Number(value);
-  }
-  return value;
-}
 async function handle_files_select(e) {
   const { acceptedFiles, fileRejections } = e.detail;
   if (limit_remaining < acceptedFiles.length) {
@@ -65,7 +57,7 @@ async function handle_files_select(e) {
   ];
   selected_files = [];
 }
-let uploaded_files = [];
+let uploaded_files = Array.isArray($fieldStore.value) ? $fieldStore.value : [];
 let failed_files = [];
 let selected_files = [];
 $: update_fieldStore(uploaded_files);
@@ -91,46 +83,44 @@ function remove_file(item) {
 </script>
 
 <FieldLabel {fieldStore} />
-<div class="w-full flex flex-col {validation_type == 'error' ? 'border-b border-warning-500' : ''}">
+<div class="flex w-full flex-col {validation_type == 'error' ? 'border-b border-warning-500' : ''}">
   <Dropzone on:drop={handle_files_select} disabled={limit_remaining <= 0}>
-    <div class="flex justify-center h-full flex-col text-center rounded-sm">
+    <div class="flex h-full flex-col justify-center rounded-sm text-center">
       <div>
         <p class=" text-surface-800">Drop files to upload</p>
         <p class=" text-surface-800">
           Or click <span
-            class="text-primary-500 hover:text-primary-400 hover:underline cursor-pointer"
+            class="cursor-pointer text-primary-500 hover:text-primary-400 hover:underline"
             >here</span
           >
           to browse
         </p>
         {#if limit_remaining <= 0}
-          <p class="text-field text-danger-600 text-sm italic">
+          <p class="text-field text-sm italic text-danger-600">
             You have reached the maximum number of files allowed
           </p>
         {/if}
       </div>
     </div>
   </Dropzone>
-  <div class="w-full mt-2">
+  <div class="mt-2 flex w-full flex-col gap-2">
     {#each all_files as item}
-      <div class="w-full flex flex-row">
+      <div class="flex w-full flex-row items-center gap-2">
         {#if item.is_uploaded}
-          <div class="px-2">
-            <i class="fa fa-check text-success-500" />
+          <div class="flex h-6 w-6 items-center justify-center text-success-500">
+            <i class="fa fa-check" />
           </div>
         {:else if item.is_failed}
-          <div class="px-2 space-x-2 flex items-center text-danger-400">
+          <div class="flex h-6 w-6 items-center justify-center text-danger-400">
             <i class="fa-regular fa-triangle-exclamation" />
-            <p class="hidden md:block text-fluid-md">Failed</p>
           </div>
         {:else}
-          <div class="px-2 space-x-2 flex items-center text-surface-500">
-            <p class="hidden md:block text-fluid-md" />
+          <div class="flex h-6 w-6 items-center justify-center text-surface-500">
             <i class="fa fa-pulse fa-spinner" />
           </div>
         {/if}
-        <div class="w-full shrink py-1 pl-2 truncate border border-surface-200 rounded-sm">
-          <p class="text-surface-800 text-fluid-md">
+        <div class="flex-1 truncate rounded-sm border border-surface-200 py-1 pl-2">
+          <p class="text-surface-800">
             {item?.filename}
           </p>
         </div>
@@ -138,11 +128,13 @@ function remove_file(item) {
           type="button"
           variant="destructive"
           size="icon"
-          class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x  border-surface-0  "
+          class="h-8 w-8 shrink-0"
           on:click={() => {
             remove_file(item);
           }}
-        />
+        >
+          <i class="fa-solid fa-x text-xs" />
+        </Button>
       </div>
     {/each}
   </div>

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.8",
+  "version": "1.8.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 {};