@stubber/form-fields 1.0.0

package/dist/fields/components/Map.svelte

@@ -0,0 +1,192 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+  import GeoCoder from "../../thirdparty/mapbox/GeoCoder.svelte";
+  import Map from "../../thirdparty/mapbox/Map.svelte";
+  import MapMarker from "../../thirdparty/mapbox/MapMarker.svelte";
+  import { controls } from "@beyonk/svelte-mapbox";
+
+  export let form;
+  export let field;
+
+  const { GeolocateControl } = controls;
+
+  const internal = writable();
+  let dependencies = form?.dependencies;
+  let mapboxAccessToken = dependencies?.map?.mapboxAccessToken;
+  let mapboxStylesheetUrl = dependencies?.map?.mapboxStylesheetUrl;
+  let geocoderResult;
+  let browserLocation;
+  let center;
+  let mapComponent;
+
+  $: 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;
+  $: geolocateDisabled = $field.spec?.params?.hide_geolocate_button;
+  $: auto_set_location = $field.spec?.params?.auto_set_location;
+
+  function setValueCoords(lat, lng) {
+    if (lat && lng) {
+      let _clone = _.cloneDeep($internal) || {};
+      _.set(_clone, "lat", lat);
+      _.set(_clone, "lng", lng);
+      $internal = _clone;
+    }
+  }
+
+  function handleMapClick(e) {
+    setValueCoords(e?.detail?.lat, e?.detail?.lng);
+  }
+
+  function setCurrentPosition(o) {
+    let { latitude, longitude } = o?.coords || {};
+    if (!latitude || !longitude) return;
+    browserLocation = {
+      lat: latitude,
+      lng: longitude,
+    };
+
+    setValueCoords(latitude, longitude);
+    mapComponent.flyTo({ center: [longitude, latitude] });
+    center = [longitude, latitude];
+  }
+
+  function resetValues() {
+    let _clone = _.cloneDeep($internal) || {};
+    _.set(_clone, "lat", _clone?.initial_value?.lat ?? null);
+    _.set(_clone, "lng", _clone?.initial_value?.lng ?? null);
+    $internal = _clone;
+    center = [$internal.initial_value?.lng ?? 18.5, $internal.initial_value?.lat ?? -34.0];
+    mapComponent.flyTo({ center });
+  }
+
+  function handleGeolocate(o) {
+    let { latitude, longitude } = o?.detail?.coords || {};
+    setValueCoords(latitude, longitude);
+  }
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let initial_value = f?.data?.base ?? null;
+    let initial_data = {
+      ...f?.data,
+      base: initial_value,
+    };
+    let initial_state_internal = {
+      ...f?.state?.internal,
+      lat: initial_value?.lat ?? null,
+      lng: initial_value?.lng ?? null,
+      initial_value: _.cloneDeep(initial_value),
+    };
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        _clone.lat = a?.data?.base?.lat;
+        _clone.lng = a?.data?.base?.lng;
+
+        // 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.lat", b?.lat);
+        _.set(_clone, "data.base.lng", b?.lng);
+        _.set(_clone, "data.base.latlng", `${b?.lat},${b?.lng}`);
+        return _clone;
+      }
+    );
+
+    if (auto_set_location) {
+      navigator.geolocation.getCurrentPosition(setCurrentPosition);
+    } else {
+      setTimeout(resetValues, 0);
+    }
+  });
+</script>
+
+{#if $internal}
+  <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>
+      <button
+        type="button"
+        on:click={resetValues}
+        class="text-sm text-surface-300 hover:underline hover:text-surface-500"
+      >
+        <i class="fa-regular fa-undo" /> Reset
+      </button>
+    </div>
+    <div class="relative mt-2 rounded-md">
+      <div class="w-full h-72">
+        <Map
+          {center}
+          zoom={14}
+          on:click={handleMapClick}
+          {geocoderResult}
+          {mapboxAccessToken}
+          {mapboxStylesheetUrl}
+          bind:mapComponent
+        >
+          <div class="absolute left-2 top-2">
+            <GeoCoder onResult={(r) => (geocoderResult = r)} {mapboxAccessToken} />
+          </div>
+          {#if !geolocateDisabled}
+            <GeolocateControl position="top-right" on:geolocate={(o) => handleGeolocate(o)} />
+          {/if}
+          {#if browserLocation}
+            <MapMarker lat={browserLocation.lat} lng={browserLocation.lng}>
+              <div class="relative w-0">
+                <div
+                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
+                >
+                  <i class="fa-solid fa-user text-4xl" />
+                </div>
+              </div>
+            </MapMarker>
+          {/if}
+          {#if $internal?.lat && $internal?.lng}
+            <MapMarker lat={$internal?.lat} lng={$internal?.lng}>
+              <div class="relative w-0">
+                <div
+                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
+                >
+                  lat: {$internal?.lat?.toString()?.substring(0, 6)} <br />
+                  lng: {$internal?.lng?.toString()?.substring(0, 6)}
+                </div>
+              </div>
+            </MapMarker>
+          {/if}
+        </Map>
+      </div>
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MapProps */
+/** @typedef {typeof __propDef.events}  MapEvents */
+/** @typedef {typeof __propDef.slots}  MapSlots */
+export default class Map extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MapProps = typeof __propDef.props;
+export type MapEvents = typeof __propDef.events;
+export type MapSlots = 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/Multicheckbox.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  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 };
+      })
+    : [];
+
+  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;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // 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)
+            )
+          )
+        );
+
+        // 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
+        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;
+      }
+    );
+  });
+</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">
+        <input
+          on:keydown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+            }
+          }}
+          type="checkbox"
+          id="input_{state_key}_{index}"
+          placeholder={label}
+          class="block w-5 h-5 rounded-md text-label focus:outline-primary-400"
+          name={state_key}
+          bind:checked={$internal.checks[index]}
+        />
+        <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+          {item._label}
+        </label>
+      </div>
+    {/each}
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

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

package/dist/fields/components/Multistep.svelte

@@ -0,0 +1,86 @@
+<script>
+  import * as utils from "../../utils/index.js";
+  import Field from "../../Field.svelte";
+
+  export let form;
+  export let field;
+
+  let current_page_index = 0;
+
+  $: state_key = $field.state?.state_key;
+  $: fields = utils.getFieldsToRender($field.spec?.fields);
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+  $: allChildrenConditionsChecked = Object.values($form?.state || {})
+    ?.filter((s) => s.parent_field_state_key === state_key)
+    ?.reduce((acc, child_state) => {
+      if (!child_state?.conditions_checked) acc = false;
+      return acc;
+    }, true);
+</script>
+
+{#if fields?.length}
+  <div class={!allChildrenConditionsChecked ? "invisible absolute" : ""}>
+    <div class="border border-surface-200">
+      <div class="p-2 py-3 overflow-x-auto whitespace-nowrap">
+        <div class="flex items-center">
+          {#each fields as p, i}
+            <button
+              type="button"
+              on:click={() => (current_page_index = i)}
+              class="flex items-center mr-4 {current_page_index === i
+                ? 'text-surface-900'
+                : 'text-surface-500'}"
+            >
+              <span
+                class="mr-1 flex items-center justify-center w-6 h-6 rounded-full {current_page_index ===
+                i
+                  ? 'bg-primary-500 text-surface-0'
+                  : 'bg-surface-100 text-surface-700'}"
+              >
+                {i + 1}
+              </span>
+            </button>
+          {/each}
+        </div>
+      </div>
+      {#if fields}
+        {#each fields as initial_field_spec, index (initial_field_spec.__key)}
+          <div
+            class="p-6 border-y border-surface-200 {current_page_index !== index
+              ? 'invisible absolute'
+              : ''}"
+          >
+            <Field {form} {initial_field_spec} parent_field={field} />
+          </div>
+        {/each}
+      {/if}
+      <div class="flex items-center justify-between text-sm p-2">
+        <button
+          type="button"
+          class="bg-surface-300 px-4 py-1 rounded text-surface-0 {current_page_index === 0
+            ? 'invisible'
+            : ''}"
+          on:click={() => (current_page_index = current_page_index - 1)}
+        >
+          Back
+        </button>
+        <button
+          type="button"
+          class="bg-surface-300 px-4 py-1 rounded text-surface-0 {current_page_index >=
+          fields.length - 1
+            ? 'invisible'
+            : ''}"
+          on:click={() => (current_page_index = current_page_index + 1)}
+        >
+          Next
+        </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/Multistep.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MultistepProps */
+/** @typedef {typeof __propDef.events}  MultistepEvents */
+/** @typedef {typeof __propDef.slots}  MultistepSlots */
+export default class Multistep extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MultistepProps = typeof __propDef.props;
+export type MultistepEvents = typeof __propDef.events;
+export type MultistepSlots = 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/Note.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount } 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;
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+
+  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,
+      raw: initial_value,
+    };
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        _clone.raw = a?.data?.base;
+
+        // 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?.raw);
+        return _clone;
+      },
+      null,
+      300
+    );
+  });
+</script>
+
+{#if $internal}
+  <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">
+      <textarea
+        on:keydown={(e) => {
+          if (e.key === "Enter") {
+            e.stopPropagation();
+          }
+        }}
+        rows="3"
+        id="input_{state_key}"
+        placeholder={label}
+        class="block w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset {!isValid
+          ? 'ring-danger-500'
+          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        name={state_key}
+        bind:value={$internal.raw}
+      />
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

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