@stubber/form-fields 1.0.0

package/dist/fields/components/Number.svelte

@@ -0,0 +1,118 @@
+<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;
+  $: 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">
+    <label for="input_{state_key}" class="block text-label {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 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}
+        min={min_setting}
+        max={max_setting}
+        step={step_setting}
+        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/Number.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  NumberProps */
+/** @typedef {typeof __propDef.events}  NumberEvents */
+/** @typedef {typeof __propDef.slots}  NumberSlots */
+export default class Number extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Objectbuilder.svelte

@@ -0,0 +1,152 @@
+<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";
+
+  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">
+  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    {label}
+  </label>
+  {#if initial_form}
+    <Form bind:form={settings_form} {initial_form} {dependencies} />
+  {/if}
+  {#if validationMessage}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+</div>

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

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

package/dist/fields/components/Qrcodescanner.svelte

@@ -0,0 +1,198 @@
+<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";
+
+  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 text-label {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}
+            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}
+            value={$internal.raw}
+          />
+        {/if}
+        <div class="shrink-0">
+          <Button icon="camera" label="Scan code" on:click={openScannerModal} />
+        </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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  QrcodescannerProps */
+/** @typedef {typeof __propDef.events}  QrcodescannerEvents */
+/** @typedef {typeof __propDef.slots}  QrcodescannerSlots */
+export default class Qrcodescanner extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Radio.svelte

@@ -0,0 +1,116 @@
+<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;
+  $: 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">
+    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      {label}
+    </label>
+    {#if items?.length}
+      <fieldset
+        class="flex flex-col border {!isValid
+          ? 'border-warning-500'
+          : 'border-surface-300'} rounded-md px-2 py-1"
+        id="input_{state_key}"
+      >
+        {#each items as item}
+          <div class="py-1">
+            <input
+              id="input_{item._key}"
+              name={state_key}
+              bind:group={$internal.selected_item_key}
+              type="radio"
+              value={item._key}
+            />
+            <label for="input_{item._key}" class="text-field">{item._label}</label>
+          </div>
+        {/each}
+      </fieldset>
+    {/if}
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  RadioProps */
+/** @typedef {typeof __propDef.events}  RadioEvents */
+/** @typedef {typeof __propDef.slots}  RadioSlots */
+export default class Radio extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};