@stubber/form-fields 1.6.4 → 1.7.0

package/README.md

@@ -34,58 +34,48 @@ See default ruleset [here](https://github.com/semantic-release/commit-analyzer/b
 
 Conversion Progress:
 
-| Component            | TS DONE    | TESTS DONE |
-| -------------------- | ---------- | ---------- |
-| AgGrid               | x          |            |
-| Arraybuilder         | x          |            |
-| Checkbox             | x          |            |
-| CheckboxAutocomplete | x          |            |
-| Code                 | x          |            |
-| Contactselector      | x          |            |
-| Currency             | x          |            |
-| Dataindication       | x          |            |
-| Date                 | x          |            |
-| Datetime             | x          |            |
-| Email                | x          |            |
-| Fieldbuilder         | x          |            |
-| Fieldsbuilder        | deprecated |            |
-| File                 | x          |            |
-| Heading              | x          |            |
-| Hidden               | x          |            |
-| Hiddenlocation       | x          |            |
-| Html                 | x          |            |
-| Jsoneditor           | x          |            |
-| Map                  | x          |            |
-| Multicheckbox        | x          |            |
-| Multistep            | x          |            |
-| Note                 | x          |            |
-| Number               | x          |            |
-| Objectbuilder        | x          |            |
-| Qrcodescanner        | x          |            |
-| Radio                | x          |            |
-| Renderfield          | deprecated |            |
-| Screenrecorder       | x          |            |
-| Screenshot           | x          |            |
-| Scrollandreaddisplay | x          |            |
-| Section              | x          |            |
-| Select               | x          |            |
-| Selectresource       | x          |            |
-| Signature            | x          |            |
-| Slider               | x          |            |
-| SmartText            | x          |            |
-| Telephone            | x          |            |
-| Text                 | x          |            |
-| Voicenote            | x          |            |
-
-Generate Features
-
-| Feature               | TS DONE | TESTS DONE |
-| --------------------- | ------- | ---------- |
-| hide_label            | x       |            |
-| init_value            | x       |            |
-| without_value_details | x       |            |
-| attachments           | x       |            |
-| fieldbuilder support  | x       |            |
+| Component            | TS DONE    | IS STRING |
+| -------------------- | ---------- | --------- |
+| AgGrid               | x          |           |
+| Arraybuilder         | x          |           |
+| Checkbox             | x          |           |
+| CheckboxAutocomplete | x          |           |
+| Code                 | x          |           |
+| Contactselector      | x          |           |
+| Currency             | x          |           |
+| Dataindication       | x          |           |
+| Date                 | x          |           |
+| Datetime             | x          |           |
+| Email                | x          |           |
+| Fieldbuilder         | x          |           |
+| Fieldsbuilder        | deprecated |           |
+| File                 | x          |           |
+| Heading              | x          |           |
+| Hidden               | x          |           |
+| Hiddenlocation       | x          |           |
+| Html                 | x          |           |
+| Jsoneditor           | x          |           |
+| Map                  | x          |           |
+| Multicheckbox        | x          |           |
+| Multistep            | x          |           |
+| Note                 | x          |           |
+| Number               | x          |           |
+| Objectbuilder        | x          |           |
+| Qrcodescanner        | x          |           |
+| Radio                | x          |           |
+| Renderfield          | deprecated |           |
+| Screenrecorder       | x          |           |
+| Screenshot           | x          |           |
+| Scrollandreaddisplay | x          |           |
+| Section              | x          |           |
+| Select               | x          |           |
+| Selectresource       | x          |           |
+| Signature            | x          |           |
+| Slider               | x          |           |
+| SmartText            | x          |           |
+| Telephone            | x          |           |
+| Text                 | x          |           |
+| Voicenote            | x          |           |
 
 ## TS Refactor
 

package/dist/fields2/FieldExprToggle.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from "svelte";
+export let fieldStore;
+const field_component_store = getContext("field_component");
+const show_toggle = getContext("show_field_expr_toggle") ?? false;
+$: selected_fieldtype = $field_component_store.fieldtype;
+$: is_true_field = $fieldStore.fieldtype === selected_fieldtype;
+const handle_fieldtype_click = (ft) => {
+  $field_component_store.fieldtype = ft;
+};
+</script>
+
+{#if show_toggle}
+  <div
+    class="ml-auto flex h-fit w-fit flex-row items-center gap-0.5 rounded bg-gray-300 p-0.5 text-xs"
+  >
+    <button
+      on:click={() => handle_fieldtype_click($fieldStore.fieldtype)}
+      class={is_true_field ? "rounded bg-white px-0.5" : ""}
+    >
+      field
+    </button>
+    <button
+      on:click={() => handle_fieldtype_click("smart_text")}
+      class={!is_true_field ? "rounded bg-white px-0.5" : ""}
+    >
+      expr
+    </button>
+  </div>
+{/if}

package/dist/fields2/FieldExprToggle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBuiltField } from "./interfaces";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldExprToggleProps = typeof __propDef.props;
+export type FieldExprToggleEvents = typeof __propDef.events;
+export type FieldExprToggleSlots = typeof __propDef.slots;
+export default class FieldExprToggle extends SvelteComponent<FieldExprToggleProps, FieldExprToggleEvents, FieldExprToggleSlots> {
+}
+export {};

package/dist/fields2/FieldLabel.svelte

@@ -1,8 +1,12 @@
 <script>import { Label } from "@stubber/ui/label";
+import FieldExprToggle from "./FieldExprToggle.svelte";
 export let fieldStore;
 $: hide_label = $fieldStore.hide_label;
 </script>
 
-{#if !hide_label}
-  <Label for={$fieldStore.id}>{$fieldStore.label}</Label>
-{/if}
+<div class="mb-1 flex flex-row items-center justify-between">
+  {#if !hide_label}
+    <Label for={$fieldStore.id}>{$fieldStore.label}</Label>
+  {/if}
+  <FieldExprToggle {fieldStore} />
+</div>

package/dist/fields2/FieldMessage.svelte

@@ -1,6 +1,4 @@
 <script>import { Label } from "@stubber/ui/label";
-import { get, startCase } from "lodash-es";
-import { get_field_help_message } from "./utils";
 export let fieldStore;
 $: validation_result = $fieldStore.validation_result;
 $: type = validation_result?.type;
@@ -8,7 +6,8 @@ $: type = validation_result?.type;
 
 <Label
   id="message-{$fieldStore.id}"
-  class="ml-2 truncate text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
+  for={$fieldStore.id}
+  class="block truncate text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
     ? 'text-red-500'
     : 'text-muted-foreground'}"
 >

package/dist/fields2/FieldMessage.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { IBuiltField } from "./interfaces";
 import type { Writable } from "svelte/store";
+import type { IBuiltField } from "./interfaces";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField>;

package/dist/fields2/Form.svelte

@@ -2,11 +2,14 @@
 import FormField from "./form-field.svelte";
 import { build_fields } from "./utils";
 import { validate_field } from "./validations/validate_field";
+import { setContext } from "svelte";
 export let initial_form;
 export let form;
 export let attachments = writable([]);
 export let dependencies = void 0;
 export let form_valid = false;
+export let show_field_expr_toggle = false;
+setContext("show_field_expr_toggle", show_field_expr_toggle);
 if (initial_form.data) {
   form.update((data) => {
     return { ...data, ...initial_form.data };
@@ -28,7 +31,7 @@ const validate_form = async (_) => {
 };
 </script>
 
-<div class="flex flex-col gap-y-1">
+<div class="flex flex-col gap-y-2">
   {#each fields as fieldStore (getStoreValue(fieldStore).id)}
     <FormField {fieldStore} />
   {/each}

package/dist/fields2/Form.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         attachments?: Writable<UploadedFile[]>;
         dependencies?: IFormDependencies | undefined;
         form_valid?: boolean;
+        show_field_expr_toggle?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/fields2/form-field.svelte

@@ -1,6 +1,26 @@
-<script>import { component_for } from "./interfaces";
+<script>import { set } from "lodash-es";
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { component_for, final_field_type } from "./interfaces";
 export let fieldStore;
-const component = component_for($fieldStore);
+const show_toggle = getContext("show_field_expr_toggle") ?? false;
+let fieldtype = final_field_type($fieldStore, show_toggle);
+let component = component_for(fieldtype);
+const field_component_store = writable({ fieldtype });
+setContext("field_component", field_component_store);
+$: handle_field_type_change($field_component_store.fieldtype);
+const handle_field_type_change = (new_fieldtype) => {
+  if (new_fieldtype === fieldtype) {
+    return;
+  }
+  fieldtype = new_fieldtype;
+  const new_value = new_fieldtype == "smart_text" ? typeof $fieldStore.value === "string" ? $fieldStore.value : "" : new_fieldtype == "checkbox" ? false : new_fieldtype == "number" ? 0 : new_fieldtype == "arraybuilder" ? [] : new_fieldtype == "section" || new_fieldtype == "objectbuilder" ? {} : null;
+  $fieldStore.formStore.update((form) => {
+    set(form, $fieldStore.data_path, new_value);
+    return form;
+  });
+  component = component_for(new_fieldtype);
+};
 </script>
 
 {#if !$fieldStore.hidden}

package/dist/fields2/form-field.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
 import { type IBuiltField } from "./interfaces";
-import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
-        fieldStore: Writable<IBuiltField>;
+        fieldStore: Writable<IBuiltField<any>>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/fields2/interfaces.d.ts

@@ -177,7 +177,8 @@ export interface IBuiltField<T = {}> {
     set value(val: any);
     params?: T;
 }
-export declare const component_for: (f: IBuiltField) => typeof TextField | typeof NumberField | typeof SectionField | typeof CheckboxField | typeof CheckboxAutocomplete | typeof ArrayBuilderField | typeof GridField | typeof SelectField | typeof SelectresourceField | typeof SliderField | typeof ContactSelectorField | typeof CurrencyField | typeof DataIndicationField | typeof DateField | typeof DateTimeField | typeof EmailField | typeof FieldBuilderField | typeof JSONEditorField | typeof FileField | typeof HeadingField | typeof HiddenField | typeof HiddenLocationField | typeof HtmlField | typeof MapField | typeof TelephoneField | typeof NoteField | typeof MultistepField | typeof ObjectBuilderField | typeof RadioField | typeof MultiCheckboxField | typeof QrCodeScannerField | typeof ScrollAndReadDisplayField | typeof VoicenoteField | typeof SignatureField | typeof SmartTextField | typeof ScreenshotField | typeof ScreenrecorderField | typeof CodeField;
+export declare const final_field_type: (f: IBuiltField, allow_dynamic_switching: boolean) => FieldType;
+export declare const component_for: (fieldtype: FieldType) => typeof GridField | typeof TextField | typeof NumberField | typeof SectionField | typeof CheckboxField | typeof CheckboxAutocomplete | typeof ArrayBuilderField | typeof SelectField | typeof SelectresourceField | typeof SliderField | typeof ContactSelectorField | typeof CurrencyField | typeof DataIndicationField | typeof DateField | typeof DateTimeField | typeof EmailField | typeof FieldBuilderField | typeof JSONEditorField | typeof FileField | typeof HeadingField | typeof HiddenField | typeof HiddenLocationField | typeof HtmlField | typeof MapField | typeof TelephoneField | typeof NoteField | typeof MultistepField | typeof ObjectBuilderField | typeof RadioField | typeof MultiCheckboxField | typeof QrCodeScannerField | typeof ScrollAndReadDisplayField | typeof VoicenoteField | typeof SignatureField | typeof SmartTextField | typeof ScreenshotField | typeof ScreenrecorderField | typeof CodeField;
 export interface IBaseValidation {
     invalid_message?: string;
 }

package/dist/fields2/interfaces.js

@@ -76,7 +76,21 @@ export const fields = {
     screenrecorder: ScreenrecorderField,
     code: CodeField,
 };
-export const component_for = (f) => {
-    return fields[f.fieldtype];
+const string_fields = ["text", "email", "telephone", "smart_text", "note", "code"];
+export const final_field_type = (f, allow_dynamic_switching) => {
+    if (!allow_dynamic_switching) {
+        return f.fieldtype;
+    }
+    const is_string = typeof f.value === "string";
+    // if the initial value is a string
+    // but this field isn't typically a string field,
+    // rather render it as a smart_text field
+    if (is_string && !string_fields.includes(f.fieldtype)) {
+        return "smart_text";
+    }
+    return f.fieldtype;
+};
+export const component_for = (fieldtype) => {
+    return fields[fieldtype];
 };
 export const validation_types = ["required", "regex", "jsonata"];

package/dist/fields2/sub/array-builder-field.svelte

@@ -17,11 +17,16 @@ import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
+import FieldExprToggle from "../FieldExprToggle.svelte";
+import { Label } from "@stubber/ui/label";
 export let fieldStore;
 const new_entry_field = $fieldStore?.params?.new_entry_field || {
   fieldtype: "text"
 };
 const update_sub_fields = (new_value) => {
+  if (!Array.isArray(new_value)) {
+    return;
+  }
   const field = $fieldStore;
   field.sub_fields = new_value.map((_value, index) => {
     return build_field(
@@ -79,7 +84,7 @@ const move_value_down = (index) => {
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
@@ -87,7 +92,7 @@ const move_value_down = (index) => {
   </Collapsible.Trigger>
   <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
     {#each $fieldStore.sub_fields || [] as sub_field, index (get_store_value(sub_field).id)}
-      <div class="flex items-center space-x-2 w-full">
+      <div class="flex w-full items-center space-x-2">
         <!-- up and down sort buttons -->
         <div class="flex flex-col items-center space-y-1">
           <Button variant="ghost" class="h-6 w-6 p-2" on:click={() => move_value_up(index)}>
@@ -103,8 +108,11 @@ const move_value_down = (index) => {
         </Button>
       </div>
     {/each}
-    <Button size="icon" variant="outline" on:click={add_value}>
-      <i class="fa fa-plus" />
-    </Button>
+    <div class="flex items-center justify-between">
+      <Button size="icon" variant="outline" on:click={add_value}>
+        <i class="fa fa-plus" />
+      </Button>
+      <FieldExprToggle {fieldStore} />
+    </div>
   </Collapsible.Content>
 </Collapsible.Root>

package/dist/fields2/sub/checkbox-field.svelte

@@ -19,6 +19,7 @@ import { Label } from "@stubber/ui/label";
 import { isEqual } from "lodash-es";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 let field = $fieldStore;
 set_value_details(field, "label", field.label);
@@ -34,8 +35,9 @@ const on_change = (new_value) => {
 };
 </script>
 
-<div class="w-full flex items-center space-x-2">
+<div class="flex w-full items-center gap-x-2">
   <Checkbox {checked} onCheckedChange={on_change} />
   <Label>{field.label}</Label>
+  <FieldExprToggle {fieldStore} />
 </div>
 <FieldMessage {fieldStore} />

package/dist/fields2/sub/object-builder-field.svelte

@@ -16,9 +16,9 @@ export const object_builder_field_param_spec = {
 <script>import * as Collapsible from "@stubber/ui/collapsible";
 import { Button } from "@stubber/ui/button";
 import { Input } from "@stubber/ui/input";
-import { Separator } from "@stubber/ui/separator";
+import { Label } from "@stubber/ui/label";
 import { cloneDeep } from "lodash-es";
-import FieldLabel from "../FieldLabel.svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
@@ -73,7 +73,7 @@ const make_key_unique = (key) => {
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
@@ -102,7 +102,7 @@ const make_key_unique = (key) => {
             </Button>
           </div>
         </div>
-        <Collapsible.Content class="pl-6 mt-2">
+        <Collapsible.Content class="mt-2 pl-6">
           {@const built_value_field = build_field(
             $fieldStore.formStore,
             $fieldStore.attachmentsStore,
@@ -116,8 +116,12 @@ const make_key_unique = (key) => {
       </Collapsible.Root>
       <!-- <Separator class="my-2" /> -->
     {/each}
-    <Button size="icon" variant="outline" on:click={add_value}>
-      <i class="fa fa-plus" />
-    </Button>
+
+    <div class="flex items-center justify-between">
+      <Button size="icon" variant="outline" on:click={add_value}>
+        <i class="fa fa-plus" />
+      </Button>
+      <FieldExprToggle {fieldStore} />
+    </div>
   </Collapsible.Content>
 </Collapsible.Root>

package/dist/fields2/sub/scroll-and-read-display-field.svelte

@@ -23,6 +23,7 @@ import { isEqual } from "lodash-es";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
 import { onMount } from "svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 let params = $fieldStore.params;
 let yes_value = params?.checkedvalue ?? true;
@@ -59,11 +60,11 @@ const update_value_details = (new_value) => {
 };
 </script>
 
-<div class="flex flex-col w-full text-surface-900 my-2">
+<div class="my-2 flex w-full flex-col text-surface-900">
   <!-- div with inner shadow -->
   <div
     bind:this={outer}
-    class="border max-h-[300px] overflow-y-scroll shadow-inner rounded-md"
+    class="max-h-[300px] overflow-y-scroll rounded-md border shadow-inner"
     on:scroll={handle_scroll}
   >
     <div class="p-6 px-2">
@@ -73,9 +74,7 @@ const update_value_details = (new_value) => {
   <div
     class="{!scrolled_to_bottom
       ? 'opacity-20'
-      : ''} flex space-x-3 relative mt-2 items-center {is_error
-      ? 'border-b border-warning-500'
-      : ''}"
+      : ''} relative mt-2 flex items-center gap-x-2 {is_error ? 'border-b border-warning-500' : ''}"
   >
     <Checkbox
       disabled={!scrolled_to_bottom}
@@ -87,6 +86,7 @@ const update_value_details = (new_value) => {
     <Label for="input_{$fieldStore.id}" class="block">
       {$fieldStore.label}
     </Label>
+    <FieldExprToggle {fieldStore} />
   </div>
   <FieldMessage {fieldStore} />
 </div>

package/dist/fields2/sub/section-field.svelte

@@ -6,22 +6,25 @@ import * as Collapsible from "@stubber/ui/collapsible";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
+import { Label } from "@stubber/ui/label";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 </script>
 
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
     </Button>
   </Collapsible.Trigger>
 
-  <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
+  <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
     {#each $fieldStore.sub_fields || [] as sub_field (get_store_value(sub_field).id)}
       <FormField fieldStore={sub_field} />
     {/each}
+    <FieldExprToggle {fieldStore} />
   </Collapsible.Content>
 </Collapsible.Root>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -27,7 +27,7 @@
   },
   "scripts": {
     "dev": "vite dev --host",
-    "build": "vite build && npm run package",
+    "build": "vite build",
     "package": "svelte-kit sync && svelte-package && publint",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
@@ -94,7 +94,7 @@
   },
   "release": {
     "branches": [
-      "master"
+      "staging"
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",