@stubber/form-fields 1.7.10 → 2.0.0

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  NumberProps */
-/** @typedef {typeof __propDef.events}  NumberEvents */
-/** @typedef {typeof __propDef.slots}  NumberSlots */
-export default class Number extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NumberProps = typeof __propDef.props;
-export type NumberEvents = typeof __propDef.events;
-export type NumberSlots = 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/Objectbuilder.svelte

@@ -1,154 +0,0 @@
-<script>
-  import { Form } from "../..";
-  import _ from "lodash-es";
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { writable } from "svelte/store";
-  import { onMount } from "svelte";
-  import { deepEqual } from "fast-equals";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  let dependencies = form.dependencies;
-
-  $: state_key = $field.state?.state_key;
-  $: label = $field.spec?.title;
-  $: hide_label = $field.spec?.hide_label;
-  $: with_order = $field.spec?.params?.with_order;
-  $: key_field_spec = $field.spec?.params?.key_field_spec || {};
-  $: value_field_spec = $field.spec?.params?.value_field_spec || {};
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-
-  let initial_form;
-  let settings_form = writable();
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = f?.data?.base ?? {};
-    let initial_data = _.merge(
-      {
-        base: initial_value,
-      },
-      f?.data
-    );
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
-
-    initial_form = {
-      spec: {
-        fields: {
-          entries: {
-            fieldtype: "arraybuilder",
-            hide_label: true,
-            params: {
-              new_entry_field: {
-                fieldtype: "section",
-                fields: {
-                  key: _.merge({}, { title: "Key" }, key_field_spec),
-                  value: _.merge({}, { title: "Value" }, value_field_spec),
-                },
-              },
-            },
-          },
-        },
-      },
-      data: {
-        entries: _.cloneDeep(
-          Object.entries(initial_value ?? {})
-            .sort((a, b) => {
-              let a_order = a[1]?.__order ?? 0;
-              let b_order = b[1]?.__order ?? 0;
-              return a_order - b_order;
-            })
-            .map((e) => {
-              return {
-                value: e[1],
-                key: e[0],
-              };
-            })
-        ),
-      },
-    };
-
-    syncStoreToStore(
-      field,
-      settings_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-
-        let internal_entries = _.cloneDeep(a?.state?.internal || []);
-        let entries = Object.entries(a?.data?.base || {})
-          .sort((a, b) => {
-            let a_order = a[1]?.__order ?? 0;
-            let b_order = b[1]?.__order ?? 0;
-            return a_order - b_order;
-          })
-          .map((e, index) => {
-            let internal_state = internal_entries[index] || {};
-            return {
-              ...internal_state,
-              value: e[1],
-              key: e[0],
-            };
-          });
-
-        _.set(_clone, "data.entries", entries);
-
-        if (!deepEqual(entries, a?.state?.internal)) {
-          $field.state.internal = _.cloneDeep(entries);
-        }
-
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-
-        let uentries = _.cloneDeep(b.data.entries || []);
-        let entries = [];
-        uentries.forEach((curr, index) => {
-          let key = curr.key ?? "";
-          if (_.isObject(key)) key = JSON.stringify(key);
-          key = key.toString().trim();
-          let value = curr.value ?? null;
-          if (_.isObject(value) && with_order) {
-            value.__order = index;
-          }
-          let key_exists = entries.find((e) => e.key === key);
-          if (key_exists) key = key + " (copy)";
-          entries.push({ ...curr, key, value });
-        });
-
-        if (!deepEqual(entries, b.data.entries)) {
-          $settings_form.data.entries = _.cloneDeep(entries);
-        }
-
-        let base = entries.reduce((acc, curr) => {
-          acc[curr.key] = curr.value;
-          return acc;
-        }, {});
-
-        _.set(_clone, "data.base", _.cloneDeep(base));
-        _.set(_clone, "state.internal", _.cloneDeep(entries));
-
-        return _clone;
-      }
-    );
-  });
-</script>
-
-<div class="flex flex-col w-full text-surface-900 my-2">
-  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  {#if initial_form}
-    <Form bind:form={settings_form} {initial_form} {dependencies} />
-  {/if}
-  {#if validationMessage}
-    <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </Label>
-  {/if}
-</div>

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ObjectbuilderProps */
-/** @typedef {typeof __propDef.events}  ObjectbuilderEvents */
-/** @typedef {typeof __propDef.slots}  ObjectbuilderSlots */
-export default class Objectbuilder extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ObjectbuilderProps = typeof __propDef.props;
-export type ObjectbuilderEvents = typeof __propDef.events;
-export type ObjectbuilderSlots = 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/Qrcodescanner.svelte

@@ -1,196 +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 { fade } from "svelte/transition";
-  import { Html5Qrcode } from "html5-qrcode";
-  import { Button } from "@stubber/ui/button";
-  import { Input } from "@stubber/ui/input";
-  import { Label } from "@stubber/ui/label";
-
-  export let field;
-
-  const internal = writable();
-  let html5Qrcode;
-  let isScannerModalOpen = false;
-  let isCameraAvailable = false;
-  let scansuccess = false;
-  let scannedResult = "";
-
-  async function openScannerModal() {
-    if (isScannerModalOpen == false) {
-      isScannerModalOpen = true;
-      scannedResult = "";
-      scansuccess = false;
-      let cameras = await Html5Qrcode.getCameras();
-      if (!cameras) {
-        isCameraAvailable = false;
-        return;
-      }
-      isCameraAvailable = true;
-      let cameraId = cameras[0].id;
-      html5Qrcode = new Html5Qrcode("reader");
-      html5Qrcode.start(cameraId, { fps: 2 }, onScanSuccess, onScanFailure);
-    }
-  }
-
-  function closeScannerModal() {
-    isScannerModalOpen = false;
-    html5Qrcode.stop();
-  }
-
-  function onScanSuccess(decodedText, decodedResult) {
-    scannedResult = decodedText;
-    scansuccess = true;
-  }
-
-  function onScanFailure(error) {
-    // handle scan failure, usually better to ignore and keep scanning.
-  }
-
-  $: 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;
-
-  function confirmScan() {
-    closeScannerModal();
-    $internal.raw = scannedResult;
-  }
-
-  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;
-      }
-    );
-  });
-</script>
-
-{#if $internal}
-  {#if isScannerModalOpen}
-    <div class="fixed inset-0 w-screen h-screen bg-black/50 z-30">
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        in:fade|global
-        out:fade|global={{ duration: 100 }}
-        on:click|self={() => {
-          closeScannerModal();
-        }}
-        class="fixed inset-0 flex justify-center items-center z-30 my-6"
-      >
-        <div
-          class="max-w-full max-h-full overflow-auto bg-surface-0 p-6 pt-4 rounded-2xl border shadow-2xl"
-        >
-          <button
-            type="button"
-            class="block ml-auto text-surface-700 font-bold text-lg"
-            on:click={closeScannerModal}
-          >
-            <i class="fa-regular fa-xmark" />
-          </button>
-          <div class="px-2 space-y-3">
-            <h4
-              class="text-start text-surface-900 text-heading-6 font-medium border-b border-surface-200"
-            >
-              Scan code
-            </h4>
-            <div id="reader" class="w-[250px] sm:w-[310px] flex flex-col items-center" />
-            {#if isCameraAvailable}
-              {#if scansuccess}
-                <div class="flex items-center space-x-2">
-                  <i class="fas fa-circle text-success-400 fa-2xs" />
-                  <p class="text-label text-surface-800">{scannedResult}</p>
-                </div>
-              {:else}
-                <div class="flex items-center space-x-2">
-                  <i class="fas fa-circle text-surface-200 fa-2xs" />
-                  <p class="text-label text-surface-800">Searching for code ...</p>
-                </div>
-              {/if}
-              <div class="flex">
-                <div class="flex ml-auto">
-                  <Button disabled={!scansuccess} on:click={confirmScan}>Confirm</Button>
-                </div>
-              </div>
-            {:else}
-              <div class="w-[250px] sm:w-[310px] aspect-square flex items-center justify-center">
-                <p class="text-surface-800 text-label">No camera found</p>
-              </div>
-            {/if}
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative mt-2 rounded-md">
-      <div class="flex items-center space-x-3">
-        {#if $internal.raw}
-          <Input
-            readonly
-            type="text"
-            id="input_{state_key}"
-            placeholder={label}
-            name={state_key}
-            value={$internal.raw}
-          />
-        {/if}
-        <div class="shrink-0">
-          <Button on:click={openScannerModal}>
-            <i class="fa-solid fa-qrcode" />
-            Scan Code
-          </Button>
-        </div>
-      </div>
-    </div>
-    {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  QrcodescannerProps */
-/** @typedef {typeof __propDef.events}  QrcodescannerEvents */
-/** @typedef {typeof __propDef.slots}  QrcodescannerSlots */
-export default class Qrcodescanner extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type QrcodescannerProps = typeof __propDef.props;
-export type QrcodescannerEvents = typeof __propDef.events;
-export type QrcodescannerSlots = 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/Radio.svelte

@@ -1,117 +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 * as RadioGroup from "@stubber/ui/radio-group";
-  import { Label } from "@stubber/ui/label";
-
-  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;
-  $: 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_item = items?.find((i) => deepEqual($field.data.base, i._value));
-    if (!initial_item) initial_item = items[0];
-    let initial_data = {
-      ...f?.data,
-      base: initial_item?._value,
-    };
-    if (!f?.spec?.without_value_details) initial_data.base_label = initial_item?._label;
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      selected_item_key: initial_item?._key,
-    };
-    _.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
-        let item = items.find((i) => i._value === a?.data?.base);
-        if (!item) item = items[0];
-        if (item) {
-          _clone.selected_item_key = item?._key;
-
-          // set field_label if changed
-          if (!deepEqual(a?.data?.base_label, item?._label) && !a?.spec?.without_value_details) {
-            $field.data.base_label = item?._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 item = items.find((i) => i._key === b?.selected_item_key);
-        _.set(_clone, "data.base", item?._value);
-        if (!a?.spec?.without_value_details) _.set(_clone, "data.base_label", item?._label);
-        return _clone;
-      }
-    );
-  });
-</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>
-    {#if items?.length}
-      <fieldset
-        class="flex flex-col border {!isValid
-          ? 'border-warning-500'
-          : 'border-surface-100'} rounded-md px-2 py-1"
-        id="input_{state_key}"
-      >
-        {#each items as item}
-          <div class="py-1">
-            <RadioGroup.Root bind:value={$internal.selected_item_key} name={state_key}>
-              <div class="flex items-center space-x-2">
-                <RadioGroup.Item value={item._key} id="input_{item._key}" />
-                <Label for="input_{item._key}">{item._label}</Label>
-              </div>
-
-              <RadioGroup.Input name={state_key} />
-            </RadioGroup.Root>
-          </div>
-        {/each}
-      </fieldset>
-    {/if}
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  RadioProps */
-/** @typedef {typeof __propDef.events}  RadioEvents */
-/** @typedef {typeof __propDef.slots}  RadioSlots */
-export default class Radio extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = 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/Renderfield.svelte

@@ -1,58 +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 { Form } from "../..";
-
-  export let form;
-  export let field;
-
-  let render_form = writable();
-  let dependencies = form.dependencies;
-
-  let initial_form;
-  $: updateInitForm($field?.state?.dynamic_fieldspec);
-  function updateInitForm(rf) {
-    let name = rf?.name ?? "rendered_field";
-    let f = _.cloneDeep(rf);
-    _.set(f, "details.keyname", "rendered_field");
-    let current_f = _.get(initial_form, `spec.fields.${name}`);
-    if (deepEqual(current_f, f)) return;
-    initial_form = _.cloneDeep({
-      spec: {
-        fields: {
-          [name]: f,
-        },
-      },
-      data: {
-        rendered_field: $field?.data?.base,
-      },
-    });
-  }
-
-  onMount(() => {
-    // set field values that aren't set yet
-
-    syncStoreToStore(
-      field,
-      render_form,
-      (a, b) => {
-        // return field internal state
-        let _clone = _.cloneDeep(b) || {};
-        _.set(_clone, "data.rendered_field", a?.data?.base);
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        _.set(_clone, "data.base", b?.data?.rendered_field ?? a?.data?.base);
-        return _clone;
-      }
-    );
-  });
-</script>
-
-{#if initial_form}
-  <Form bind:form={render_form} {initial_form} {dependencies} />
-{/if}

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  RenderfieldProps */
-/** @typedef {typeof __propDef.events}  RenderfieldEvents */
-/** @typedef {typeof __propDef.slots}  RenderfieldSlots */
-export default class Renderfield extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RenderfieldProps = typeof __propDef.props;
-export type RenderfieldEvents = typeof __propDef.events;
-export type RenderfieldSlots = 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 {};