@stubber/form-fields 1.4.5 → 1.5.0

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

@@ -0,0 +1,23 @@
+<script context="module">import {} from "../interfaces";
+export const jsoneditor_field_param_spec = {
+  spec: {
+    fields: {
+      readOnly: {
+        fieldtype: "checkbox",
+        without_value_details: true
+      }
+    }
+  }
+};
+</script>
+
+<script>import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import JsonEditorBound from "./json-editor-bound.svelte";
+export let fieldStore;
+let read_only = $fieldStore.params?.readOnly ?? false;
+</script>
+
+<FieldLabel {fieldStore} />
+<JsonEditorBound bind:value={$fieldStore.value} readOnly={read_only} />
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/jsoneditor-field.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+export interface IJSONEditorFieldParams {
+    readOnly?: boolean;
+}
+export declare const jsoneditor_field_param_spec: IInitialForm;
+export interface IJSONEditorField extends IBaseField<IJSONEditorFieldParams> {
+    fieldtype: "jsoneditor";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IJSONEditorFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type JsoneditorFieldProps = typeof __propDef.props;
+export type JsoneditorFieldEvents = typeof __propDef.events;
+export type JsoneditorFieldSlots = typeof __propDef.slots;
+export default class JsoneditorField extends SvelteComponent<JsoneditorFieldProps, JsoneditorFieldEvents, JsoneditorFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,144 @@
+<script context="module">import { onMount } from "svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import {} from "../interfaces";
+export const map_field_param_spec = {
+  spec: {
+    fields: {
+      hide_geolocate_button: {
+        fieldtype: "checkbox"
+      },
+      auto_set_location: {
+        fieldtype: "checkbox"
+      }
+    }
+  }
+};
+</script>
+
+<script>import { controls, Geocoder, Map, Marker } from "@beyonk/svelte-mapbox";
+import FieldLabel from "../FieldLabel.svelte";
+const { GeolocateControl } = controls;
+export let fieldStore;
+const initial_value = $fieldStore.value;
+let params = $fieldStore.params;
+let hide_geolocate_button = params?.hide_geolocate_button || false;
+let auto_set_location = params?.auto_set_location || false;
+let dependencies = $fieldStore?.formDependencies;
+let mapboxAccessToken = dependencies?.map?.mapboxAccessToken;
+let mapboxStylesheetUrl = dependencies?.map?.mapboxStylesheetUrl;
+let mapComponent;
+let geocoder = void 0;
+let center = [
+  $fieldStore.value?.lng || 18.5,
+  $fieldStore.value?.lat || -34
+];
+let browserLocation;
+onMount(() => {
+  if (auto_set_location) {
+    navigator.geolocation.getCurrentPosition(setCurrentPosition);
+  } else {
+    resetValues();
+  }
+});
+function setCurrentPosition(o) {
+  let { latitude, longitude } = o?.coords || {};
+  if (!latitude || !longitude) return;
+  browserLocation = {
+    lat: latitude,
+    lng: longitude
+  };
+  setValueCoords(latitude, longitude);
+  center = [longitude, latitude];
+  mapComponent?.flyTo({ center });
+}
+function setValueCoords(lat, lng, force = false) {
+  if (lat && lng || force) {
+    $fieldStore.value = {
+      lat: lat ?? null,
+      lng: lng ?? null,
+      latlng: `${lat ?? null},${lng ?? null}`
+    };
+  }
+}
+function resetValues() {
+  center = [initial_value?.lng ?? 18.5, initial_value?.lat ?? -34];
+  setValueCoords(initial_value?.lat, initial_value?.lng, true);
+  mapComponent?.flyTo({ center });
+}
+function handle_map_click(e) {
+  setValueCoords(e?.detail?.lat, e?.detail?.lng);
+}
+function handle_geocoder_result(r) {
+  const geo_center = r?.detail?.result?.center || [];
+  if (geo_center.length === 2) {
+    center = [geo_center[0], geo_center[1]];
+    mapComponent?.flyTo({ center });
+  }
+}
+function handle_geolocate(o) {
+  const coords = o?.detail?.coords || {};
+  setValueCoords(coords.latitude, coords.longitude);
+}
+</script>
+
+<FieldLabel {fieldStore} />
+{#if mapboxAccessToken}
+  <div class="flex flex-col w-full">
+    <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
+          bind:center
+          zoom={14}
+          accessToken={mapboxAccessToken}
+          style={mapboxStylesheetUrl}
+          bind:this={mapComponent}
+          on:click={handle_map_click}
+        >
+          <div class="absolute left-2 top-2">
+            <Geocoder
+              on:result={handle_geocoder_result}
+              accessToken={mapboxAccessToken}
+              {geocoder}
+            />
+          </div>
+          {#if !hide_geolocate_button}
+            <GeolocateControl position="top-right" on:geolocate={handle_geolocate} />
+          {/if}
+          {#if browserLocation}
+            <Marker 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>
+            </Marker>
+          {/if}
+          {#if $fieldStore.value?.lat && $fieldStore.value?.lng}
+            <Marker lat={$fieldStore.value.lat} lng={$fieldStore.value.lng} popup={false}>
+              <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: {$fieldStore.value.lat?.toString()?.substring(0, 6)} <br />
+                  lng: {$fieldStore.value.lng?.toString()?.substring(0, 6)}
+                </div>
+              </div>
+            </Marker>
+          {/if}
+        </Map>
+      </div>
+    </div>
+  </div>
+{/if}
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/map-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+export interface IMapFieldParams {
+    hide_geolocate_button?: boolean;
+    auto_set_location?: boolean;
+}
+export interface IMapField extends IBaseField<IMapFieldParams> {
+    fieldtype: "map";
+}
+export declare const map_field_param_spec: IInitialForm;
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IMapFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MapFieldProps = typeof __propDef.props;
+export type MapFieldEvents = typeof __propDef.events;
+export type MapFieldSlots = typeof __propDef.slots;
+export default class MapField extends SvelteComponent<MapFieldProps, MapFieldEvents, MapFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,83 @@
+<script context="module">import {} from "../interfaces";
+export const multi_checkbox_field_param_spec = {
+  spec: {
+    fields: {
+      options: {
+        fieldtype: "objectbuilder",
+        params: {
+          value_field_spec: {
+            fieldtype: "section",
+            fields: {
+              label: {
+                fieldtype: "text",
+                help: "Optional label for this option (if different from the key)"
+              },
+              value: {
+                fieldtype: "jsoneditor",
+                help: "Optional additional data point to store with this option"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Checkbox } from "@stubber/ui/checkbox";
+import { Label } from "@stubber/ui/label";
+import { cloneDeep, startCase } from "lodash-es";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+let options = $fieldStore.params?.options || {};
+if ($fieldStore.value) {
+  const newValue = {};
+  for (const key of Object.keys(options)) {
+    if ($fieldStore.value[key]) {
+      newValue[key] = $fieldStore.value[key];
+    }
+  }
+  $fieldStore.value = newValue;
+}
+for (const [key, item] of Object.entries(options)) {
+  if (!$fieldStore.value?.[key]) {
+    if (!$fieldStore.value) {
+      $fieldStore.value = {};
+    }
+    $fieldStore.value[key] = {
+      ...item,
+      checked: item.checked || false
+    };
+  }
+}
+const handle_check_change = (key, item, checked) => {
+  if (!$fieldStore.value) {
+    $fieldStore.value = {};
+  }
+  $fieldStore.value[key] = {
+    ...item,
+    checked
+  };
+  $fieldStore.value = cloneDeep({ ...$fieldStore.value });
+};
+</script>
+
+<FieldLabel {fieldStore} />
+{#each Object.entries(options) as [key, item] (key)}
+  {@const checked = $fieldStore.value?.[key]?.checked ?? false}
+  <div class="flex space-x-3 relative mt-2">
+    <Checkbox
+      id="{$fieldStore.id}_{key}"
+      name={key}
+      {checked}
+      onCheckedChange={(checked) => handle_check_change(key, item, checked)}
+    />
+
+    <Label for="{$fieldStore.id}_{key}">
+      {item.label || startCase(key)}
+    </Label>
+  </div>
+{/each}
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/multi-checkbox-field.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+interface IOption {
+    label: string;
+    value?: any;
+    checked?: boolean;
+}
+interface IMultiCheckboxFieldParams {
+    options: {
+        [key: string]: IOption;
+    };
+}
+export declare const multi_checkbox_field_param_spec: IInitialForm;
+export interface IMultiCheckboxField extends IBaseField<IMultiCheckboxFieldParams> {
+    fieldtype: "multicheckbox";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IMultiCheckboxFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MultiCheckboxFieldProps = typeof __propDef.props;
+export type MultiCheckboxFieldEvents = typeof __propDef.events;
+export type MultiCheckboxFieldSlots = typeof __propDef.slots;
+export default class MultiCheckboxField extends SvelteComponent<MultiCheckboxFieldProps, MultiCheckboxFieldEvents, MultiCheckboxFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,70 @@
+<script context="module">import { get } from "svelte/store";
+import {} from "../interfaces";
+</script>
+
+<script>import { Button } from "@stubber/ui/button";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import FormField from "../form-field.svelte";
+export let fieldStore;
+$: fields = $fieldStore.sub_fields || [];
+let allChildrenConditionsChecked = true;
+let current_page_index = 0;
+</script>
+
+<FieldLabel {fieldStore} />
+
+{#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>
+      {#each $fieldStore.sub_fields || [] as sub_field, index (get(sub_field).id)}
+        <div
+          class="p-6 border-y border-surface-200 {current_page_index !== index
+            ? 'invisible absolute'
+            : ''}"
+        >
+          <FormField fieldStore={sub_field} />
+        </div>
+      {/each}
+      <div class="flex items-center justify-between text-sm p-2">
+        {#if current_page_index > 0}
+          <Button variant="outline" on:click={() => (current_page_index = current_page_index - 1)}>
+            Back
+          </Button>
+        {/if}
+        {#if current_page_index < fields.length - 1}
+          <Button
+            class="ml-auto"
+            variant="outline"
+            on:click={() => (current_page_index = current_page_index + 1)}
+          >
+            Next
+          </Button>
+        {/if}
+      </div>
+    </div>
+    <FieldMessage {fieldStore} />
+  </div>
+{/if}

package/dist/fields2/sub/multistep-field.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IField } from "../interfaces";
+export interface IMultistepField extends IBaseField<{}> {
+    fieldtype: "multistep";
+    fields: Record<string, IField>;
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MultistepFieldProps = typeof __propDef.props;
+export type MultistepFieldEvents = typeof __propDef.events;
+export type MultistepFieldSlots = typeof __propDef.slots;
+export default class MultistepField extends SvelteComponent<MultistepFieldProps, MultistepFieldEvents, MultistepFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,18 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { Textarea } from "@stubber/ui/textarea";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+</script>
+
+<FieldLabel {fieldStore} />
+<Textarea
+  id={$fieldStore.id}
+  bind:value={$fieldStore.value}
+  placeholder={$fieldStore.label}
+  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+  aria-describedby="message-{$fieldStore.id}"
+/>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/note-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField } from "../interfaces";
+export interface INoteField extends IBaseField<{}> {
+    fieldtype: "note";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type NoteFieldProps = typeof __propDef.props;
+export type NoteFieldEvents = typeof __propDef.events;
+export type NoteFieldSlots = typeof __propDef.slots;
+export default class NoteField extends SvelteComponent<NoteFieldProps, NoteFieldEvents, NoteFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,77 @@
+<script context="module">export const number_field_param_spec = {
+  spec: {
+    fields: {
+      min: {
+        fieldtype: "number",
+        help: "Minimum value allowed",
+        validations: [
+          {
+            validationtype: "jsonata",
+            invalid_message: "Minimum value cannot be greater than maximum value",
+            params: {
+              jsonata: "$not($exists(field.data) and $exists(form.data.max)) or form.data.max >= field.data"
+            }
+          }
+        ]
+      },
+      max: {
+        fieldtype: "number",
+        help: "Maximum value allowed",
+        validations: [
+          {
+            validationtype: "jsonata",
+            invalid_message: "Maximum value cannot be less than minimum value",
+            params: {
+              jsonata: "$not($exists(field.data) and $exists(form.data.min)) or form.data.min <= field.data"
+            }
+          }
+        ]
+      },
+      step: {
+        fieldtype: "number",
+        help: "Increment step for the number input"
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Input } from "@stubber/ui/input";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+function onInput(e) {
+  const new_value = e.target.value;
+  let parsedValue = parseFloat(new_value);
+  if (!isNaN(parsedValue)) {
+    $fieldStore.value = parsedValue;
+  } else {
+    $fieldStore.value = void 0;
+  }
+}
+function onBlur() {
+  let parsedValue = parseFloat($fieldStore.value);
+  if (!isNaN(parsedValue)) {
+    if ($fieldStore.min !== void 0 && parsedValue < $fieldStore.min) {
+      parsedValue = $fieldStore.min;
+    }
+    if ($fieldStore.max !== void 0 && parsedValue > $fieldStore.max) {
+      parsedValue = $fieldStore.max;
+    }
+    if ($fieldStore.step !== void 0) {
+      parsedValue = Math.round(parsedValue / $fieldStore.step) * $fieldStore.step;
+    }
+    $fieldStore.value = parsedValue;
+  }
+}
+</script>
+
+<FieldLabel {fieldStore} />
+<Input
+  value={$fieldStore.value}
+  on:input={onInput}
+  on:blur={onBlur}
+  type="number"
+  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+/>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/number-field.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
+interface INumberParams {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export declare const number_field_param_spec: IInitialForm;
+export interface INumberField extends IBaseField<INumberParams> {
+    fieldtype: "number";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type NumberFieldProps = typeof __propDef.props;
+export type NumberFieldEvents = typeof __propDef.events;
+export type NumberFieldSlots = typeof __propDef.slots;
+export default class NumberField extends SvelteComponent<NumberFieldProps, NumberFieldEvents, NumberFieldSlots> {
+}
+export {};