@stubber/form-fields 1.7.10 → 2.0.0

package/dist/fields/components/Map.svelte

@@ -1,192 +0,0 @@
-<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 my-2">
-    <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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  MapProps */
-/** @typedef {typeof __propDef.events}  MapEvents */
-/** @typedef {typeof __propDef.slots}  MapSlots */
-export default class Map extends SvelteComponent<{
-    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 { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Multicheckbox.svelte

@@ -1,77 +0,0 @@
-<script>
-  import { merge, startCase } from "lodash-es";
-  import { onMount } from "svelte";
-
-  import { Checkbox } from "@stubber/ui/checkbox";
-  import { Label } from "@stubber/ui/label";
-
-  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;
-  $: options = $field.spec?.params?.options; // options is an object with a label property, value property (optional) and checked property
-
-  // $: console.log("field", $field);
-
-  // $: console.log("options", options);
-  onMount(() => {
-    /// merge all options into data.base
-    field.update((f) => {
-      if (!f.data) {
-        f.data = {};
-      }
-      if (!f.data.base) {
-        f.data.base = {};
-      }
-
-      const merged_base = merge({}, options, f.data.base);
-      // ensure all options have a checked property
-
-      Object.entries(merged_base).forEach(([key, item]) => {
-        if (typeof item === "object" && item.checked === undefined) {
-          item.checked = false;
-        }
-      });
-
-      f.data.base = merged_base;
-      return f;
-    });
-  });
-
-  //: boolean | "indeterminate" | undefined
-  const on_change = (new_value, key) => {
-    field.update((f) => {
-      if (!f.data.base[key]) {
-        f.data.base[key] = {};
-      }
-      f.data.base[key].checked = new_value;
-      return f;
-    });
-  };
-</script>
-
-<div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
-  <Label class="block pb-2 {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  {#each Object.entries(options) as [key, item] (key)}
-    <div class="flex space-x-3 relative mt-2">
-      <Checkbox
-        id="input_{state_key}_{key}"
-        name={key}
-        checked={$field.data?.base?.[key]?.checked || false}
-        onCheckedChange={(new_value) => on_change(new_value, key)}
-      />
-
-      <Label for="input_{state_key}_${key}" class=" {hide_label ? 'hidden' : ''}">
-        {item.label || startCase(key)}
-      </Label>
-    </div>
-  {/each}
-  {#if validationMessage}
-    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-  {/if}
-</div>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  MulticheckboxProps */
-/** @typedef {typeof __propDef.events}  MulticheckboxEvents */
-/** @typedef {typeof __propDef.slots}  MulticheckboxSlots */
-export default class Multicheckbox extends SvelteComponent<{
-    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 { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Multistep.svelte

@@ -1,86 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  MultistepProps */
-/** @typedef {typeof __propDef.events}  MultistepEvents */
-/** @typedef {typeof __propDef.slots}  MultistepSlots */
-export default class Multistep extends SvelteComponent<{
-    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 { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Note.svelte

@@ -1,92 +0,0 @@
-<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 { Textarea } from "@stubber/ui/textarea";
-  import { Label } from "@stubber/ui/label";
-  import { Button } from "@stubber/ui/button";
-
-  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 my-2">
-    <Label for="input_{state_key}" class=" {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative mt-2">
-      <Textarea
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.stopPropagation();
-          }
-        }}
-        rows="3"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '} "
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  NoteProps */
-/** @typedef {typeof __propDef.events}  NoteEvents */
-/** @typedef {typeof __propDef.slots}  NoteSlots */
-export default class Note extends SvelteComponent<{
-    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 { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Number.svelte

@@ -1,119 +0,0 @@
-<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 { Label } from "@stubber/ui/label";
-  import { Input } from "@stubber/ui/input";
-
-  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;
-  $: min_setting = $field.spec.params.min ?? false;
-  $: max_setting = $field.spec.params.max ?? false;
-  $: step_setting = $field.spec.params.step ?? 1;
-  $: has_step = $field.spec.params.step ?? false;
-
-  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) || {};
-
-        let raw = b.raw;
-
-        // check if raw is valid
-        if (max_setting != false && raw > max_setting) {
-          raw = max_setting;
-        }
-        if (min_setting != false && raw < min_setting) {
-          raw = min_setting;
-        }
-        if (has_step) {
-          raw = Math.round(raw / step_setting) * step_setting;
-        }
-
-        // if raw is different to b.raw, update internal
-        if (raw !== b.raw) $internal.raw = raw;
-
-        b.raw = raw;
-
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        _.set(_clone, "data.base", raw);
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative rounded-md">
-      <Input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        type="number"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} "
-        name={state_key}
-        min={min_setting}
-        max={max_setting}
-        step={step_setting}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}