@stubber/form-fields 1.0.0

package/dist/fields/components/Arraybuilder.svelte

@@ -0,0 +1,101 @@
+<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";
+
+  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">
+    <label for="input_{state_key}" class="block text-label {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"
+          on:click={() => addEntry()}
+          class="text-xl w-8 h-8 border border-dashed bg-surface-0 border-primary-300 hover:bg-primary-500 hover:text-surface-0 hover:border-0 active:bg-primary-500 active:text-surface-0 active:border-0 rounded text-primary-500"
+        >
+          <i class="fa-regular fa-plus" />
+        </button>
+      </div>
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ArraybuilderProps */
+/** @typedef {typeof __propDef.events}  ArraybuilderEvents */
+/** @typedef {typeof __propDef.slots}  ArraybuilderSlots */
+export default class Arraybuilder extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Checkbox.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount, onDestroy } from "svelte";
+  import { writable } from "svelte/store";
+
+  export let field;
+
+  const internal = writable();
+
+  $: state_key = $field.state?.state_key;
+  $: label = $field.spec?.title;
+  $: hide_label = $field.spec?.hide_label;
+  $: checkedvalue =
+    $field.spec?.params?.checkedvalue !== undefined ? $field.spec?.params?.checkedvalue : true;
+  $: uncheckedvalue =
+    $field.spec?.params?.uncheckedvalue !== undefined ? $field.spec?.params?.uncheckedvalue : false;
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+
+  let store_sync_sub;
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let checked = deepEqual(f?.data?.base, checkedvalue);
+    let initial_data = {
+      ...f?.data,
+      base: checked ? checkedvalue : uncheckedvalue,
+    };
+    if (!f?.spec?.without_value_details) initial_data.base_label = label;
+    let initial_state_internal = {
+      ...f?.state?.internal,
+      checked,
+    };
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    store_sync_sub = syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a?.state?.internal) || {};
+
+        // get parts from data
+        _clone.checked = deepEqual(a?.data?.base, checkedvalue);
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+        }
+
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        // update the state
+        _.set(_clone, "state.internal", _.cloneDeep(b));
+        // update the data
+        _.set(_clone, "data.base", b?.checked ? checkedvalue : uncheckedvalue);
+
+        return _clone;
+      }
+    );
+  });
+
+  onDestroy(() => {
+    store_sync_sub?.destroy();
+  });
+</script>
+
+{#if $internal}
+  <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
+    <div class="flex space-x-3 relative mt-2 items-center">
+      <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+        {label}
+      </label>
+      <input
+        on:keydown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+          }
+        }}
+        type="checkbox"
+        id="input_{state_key}"
+        placeholder={label}
+        class="block w-5 h-5 rounded-md text-label focus:outline-primary-400"
+        name={state_key}
+        bind:checked={$internal.checked}
+      />
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CheckboxProps */
+/** @typedef {typeof __propDef.events}  CheckboxEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxSlots */
+export default class Checkbox extends SvelteComponentTyped<{
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/CheckboxAutocomplete.svelte

@@ -0,0 +1,92 @@
+<script>
+  import _ from "lodash-es";
+  import Checkbox from "./Checkbox.svelte";
+  import SmartText from "./SmartText.svelte";
+  import * as utils from "../../utils/index.js";
+  let clickOutside = utils.clickOutside;
+
+  export let field;
+
+  $field.spec.without_value_details = true;
+
+  $field.spec.params = $field.spec?.params || {};
+  $field.spec.params = {
+    ...$field.spec.params,
+    code_language: "handlebars",
+  };
+
+  // this field picks the best field to render based on the data
+  let selected_option = typeof $field.data.base === "boolean" ? "Checkbox" : "Smart Text";
+
+  let menu_open = false;
+
+  const open_menu = () => {
+    menu_open = !menu_open;
+  };
+
+  const options = ["Checkbox", "Smart Text"];
+
+  function select_option(option) {
+    selected_option = option;
+    switch (selected_option) {
+      case "Checkbox":
+        $field.data.base = false;
+        break;
+      case "Smart Text":
+        $field.data.base = "";
+        break;
+      default:
+        break;
+    }
+
+    menu_open = false;
+  }
+</script>
+
+<div>
+  <div class="flex gap-1 items-center">
+    <div
+      class="relative"
+      use:clickOutside={() => {
+        if (menu_open) {
+          menu_open = false;
+        }
+      }}
+    >
+      <button
+        type="button"
+        on:click={open_menu}
+        class="flex items-center justify-center border border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-600 active:text-surface-0 rounded text-surface-500"
+      >
+        <i class="fa-regular fa-chevron-down" />
+      </button>
+      {#if menu_open}
+        <div
+          class="absolute z-10 left-0 top-6 w-48 bg-white shadow-lg rounded-md ring-1 ring-surface-300"
+        >
+          <div class="p-2">
+            {#each options as option}
+              <div class="flex items-center gap-1">
+                <input
+                  id="fieldtype_radio_{option}"
+                  type="radio"
+                  name="fieldtype"
+                  checked={option === selected_option}
+                  on:change={() => {
+                    select_option(option);
+                  }}
+                />
+                <label for="fieldtype_radio_{option}">{option}</label>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+    {#if selected_option === "Checkbox"}
+      <Checkbox {field} />
+    {:else}
+      <SmartText {field} />
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CheckboxAutocompleteProps */
+/** @typedef {typeof __propDef.events}  CheckboxAutocompleteEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxAutocompleteSlots */
+export default class CheckboxAutocomplete extends SvelteComponentTyped<{
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CheckboxAutocompleteProps = typeof __propDef.props;
+export type CheckboxAutocompleteEvents = typeof __propDef.events;
+export type CheckboxAutocompleteSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};