@stubber/form-fields 2.2.5 → 3.0.0

package/dist/form-fields/fields/object-builder-field.svelte

@@ -0,0 +1,176 @@
+<script context="module">import {} from "svelte/store";
+import {} from "../interfaces";
+export const object_builder_field_param_spec = {
+  spec: {
+    fields: {
+      value_field_spec: {
+        fieldtype: "fieldbuilder",
+        help: "Field specification for the object values",
+        params: {}
+      }
+    }
+  }
+};
+</script>
+
+<script>import { cloneDeep } from "lodash-es";
+import { getContext } from "svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import FormField from "../form-field.svelte";
+import CollapsibleSection from "../CollapsibleSection.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+import { build_field } from "../utils";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+let value_field_spec = $fieldStore.params?.value_field_spec;
+const handle_key_input = (old_key, e) => {
+  const target = e.currentTarget;
+  const new_key = make_key_unique(target.value);
+  if (new_key === old_key) return;
+  const prev_value = $fieldStore.value || {};
+  const new_value = {};
+  for (const [key, value] of Object.entries(prev_value)) {
+    if (key === old_key) {
+      new_value[new_key] = value;
+    } else {
+      new_value[key] = value;
+    }
+  }
+  item_open[new_key] = item_open[old_key] ?? true;
+  delete item_open[old_key];
+  item_open = { ...item_open };
+  $fieldStore.value = new_value;
+};
+const add_value = () => {
+  const unique_key = make_key_unique("");
+  const field_value = cloneDeep($fieldStore.value || {});
+  field_value[unique_key] = null;
+  $fieldStore.value = field_value;
+};
+const remove_value = (key) => {
+  const field_value = cloneDeep($fieldStore.value || {});
+  delete field_value[key];
+  delete item_open[key];
+  item_open = { ...item_open };
+  $fieldStore.value = field_value;
+};
+const make_key_unique = (key) => {
+  let unique_key = key;
+  let counter = 1;
+  const keys = Object.keys($fieldStore.value || {});
+  while (keys.includes(unique_key)) {
+    unique_key = `${key}_${counter}`;
+    counter++;
+  }
+  return unique_key;
+};
+let open = true;
+let item_open = {};
+function is_item_open(key) {
+  return item_open[key] ?? true;
+}
+function set_item_open(key, open2) {
+  item_open = { ...item_open, [key]: open2 };
+}
+</script>
+
+<div
+  class="object-builder-field"
+  class:object-builder-field-invalid={$fieldStore.validation_result?.type === "error"}
+>
+  <CollapsibleSection
+    title={$fieldStore.label}
+    bind:open
+    contentId="content-{$fieldStore.id}"
+    labelledBy="label-{$fieldStore.id}"
+  >
+    <div slot="heading" class="object-builder-heading">
+      <span id="label-{$fieldStore.id}" class={classNames("object-builder-label", $styles.label)}>
+        {$fieldStore.label}
+      </span>
+      <FieldMessage {fieldStore} />
+    </div>
+    <div slot="actions" class="object-builder-actions">
+      <FieldExprToggle {fieldStore} />
+    </div>
+    {#each Object.keys($fieldStore.value || {}) as key, index (index)}
+      <div class="object-builder-item">
+        <CollapsibleSection
+          title={key || "Item"}
+          open={is_item_open(key)}
+          onToggle={(next_open) => set_item_open(key, next_open)}
+          contentId="value-{$fieldStore.id}-{index}"
+        >
+          <button
+            slot="actions"
+            type="button"
+            class={classNames("object-builder-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            on:click={() => remove_value(key)}
+            aria-label="Remove {key || 'item'}"
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+          <input
+            class={classNames("object-builder-key-input", $styles.input)}
+            aria-label="Key for {key || 'item'}"
+            placeholder="Key"
+            value={key}
+            on:input={(e) => handle_key_input(key, e)}
+          />
+          {@const built_value_field = build_field(
+            $fieldStore.formStore,
+            $fieldStore.attachmentsStore,
+            $fieldStore.formDependencies,
+            key,
+            value_field_spec || { fieldtype: "text", title: "Value", hide_label: true },
+            $fieldStore.data_path
+          )}
+          <div class="object-builder-value">
+            <FormField fieldStore={built_value_field} />
+          </div>
+        </CollapsibleSection>
+      </div>
+    {/each}
+
+    <div class="object-builder-footer">
+      <button
+        type="button"
+        class={classNames("object-builder-add", $styles.button)}
+        data-variant="primary"
+        on:click={add_value}
+      >
+        <span aria-hidden="true">+</span>
+        <span>Add item</span>
+      </button>
+    </div>
+  </CollapsibleSection>
+</div>
+
+<style>
+  .object-builder-field,
+  .object-builder-item,
+  .object-builder-value {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .object-builder-heading,
+  .object-builder-key-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .object-builder-actions,
+  .object-builder-remove {
+    flex: none;
+  }
+
+  .object-builder-actions {
+    display: flex;
+    align-items: center;
+  }
+</style>

package/dist/form-fields/fields/qr-code-scanner-field.svelte

@@ -0,0 +1,203 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { getContext, onDestroy } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import QrCodeScannerIcon from "../icons/QrCodeScannerIcon.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+let dialog;
+let qr_code_lib;
+let scanner_status = "loading";
+let scan_success = false;
+let scanned_text = "";
+let scanner_generation = 0;
+$: reader_id = `${$fieldStore.id}-reader`;
+onDestroy(() => {
+  scanner_generation += 1;
+  void stop_scanner();
+});
+async function stop_scanner() {
+  const scanner = qr_code_lib;
+  qr_code_lib = void 0;
+  if (!scanner) return;
+  try {
+    await scanner.stop();
+  } catch {
+  }
+  try {
+    scanner.clear();
+  } catch {
+  }
+}
+async function setup_scanner() {
+  const generation = ++scanner_generation;
+  scanner_status = "loading";
+  scan_success = false;
+  scanned_text = "";
+  try {
+    const { Html5Qrcode } = await import("html5-qrcode");
+    const cameras = await Html5Qrcode.getCameras();
+    if (generation !== scanner_generation || !dialog.open) return;
+    if (cameras.length === 0) {
+      scanner_status = "unavailable";
+      return;
+    }
+    const scanner = new Html5Qrcode(reader_id);
+    qr_code_lib = scanner;
+    await scanner.start(cameras[0].id, { fps: 2 }, on_scan_success, () => {
+    });
+    if (generation !== scanner_generation || !dialog.open) {
+      await stop_scanner();
+      return;
+    }
+    scanner_status = "scanning";
+  } catch {
+    scanner_status = "unavailable";
+    await stop_scanner();
+  }
+}
+function open_scanner() {
+  dialog.showModal();
+  void setup_scanner();
+}
+async function close_scanner() {
+  scanner_generation += 1;
+  dialog.close();
+  await stop_scanner();
+}
+function handle_cancel() {
+  scanner_generation += 1;
+  void stop_scanner();
+}
+function on_scan_success(decodedText) {
+  scanned_text = decodedText;
+  scan_success = true;
+}
+function confirm_scan() {
+  $fieldStore.value = scanned_text;
+  void close_scanner();
+}
+</script>
+
+<div class="qr-code-scanner-field">
+  <FieldLabel {fieldStore} />
+  <div
+    class="qr-code-scanner-control"
+    class:qr-code-scanner-control-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <button
+      id={$fieldStore.id}
+      type="button"
+      class={classNames("qr-code-scanner-trigger", $styles.button)}
+      data-variant="primary"
+      aria-haspopup="dialog"
+      aria-controls="dialog-{$fieldStore.id}"
+      aria-describedby="message-{$fieldStore.id}"
+      on:click={open_scanner}
+    >
+      <span class="qr-code-scanner-icon" aria-hidden="true">
+        <QrCodeScannerIcon />
+      </span>
+      Scan code
+    </button>
+
+    <dialog
+      bind:this={dialog}
+      id="dialog-{$fieldStore.id}"
+      class={classNames("qr-code-scanner-dialog", $styles.popover)}
+      aria-labelledby="dialog-title-{$fieldStore.id}"
+      on:cancel={handle_cancel}
+    >
+      <div class="qr-code-scanner-content">
+        <div class="qr-code-scanner-header">
+          <h2 id="dialog-title-{$fieldStore.id}" class="qr-code-scanner-title">Scan code</h2>
+          <button
+            type="button"
+            class={classNames("qr-code-scanner-close", $styles.button)}
+            data-size="icon"
+            aria-label="Close scanner"
+            on:click={() => void close_scanner()}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+
+        <div id={reader_id} class="qr-code-scanner-reader" />
+
+        {#if scanner_status === "unavailable"}
+          <p class="qr-code-scanner-unavailable" role="status">No camera found</p>
+        {:else}
+          <div
+            class="qr-code-scanner-status"
+            class:qr-code-scanner-status-success={scan_success}
+            role="status"
+            aria-live="polite"
+          >
+            <span class="qr-code-scanner-status-icon" aria-hidden="true">●</span>
+            <p>{scan_success ? scanned_text : "Searching for code…"}</p>
+          </div>
+          <div class="qr-code-scanner-actions">
+            <button
+              type="button"
+              class={classNames("qr-code-scanner-confirm", $styles.button)}
+              data-variant="primary"
+              disabled={!scan_success}
+              on:click={confirm_scan}>Confirm</button
+            >
+          </div>
+        {/if}
+      </div>
+    </dialog>
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .qr-code-scanner-field,
+  .qr-code-scanner-control,
+  .qr-code-scanner-content,
+  .qr-code-scanner-reader {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :where(.qr-code-scanner-dialog) {
+    box-sizing: border-box;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+  }
+
+  .qr-code-scanner-header {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .qr-code-scanner-title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :where(.qr-code-scanner-close) {
+    flex: none;
+  }
+
+  .qr-code-scanner-reader {
+    overflow: hidden;
+  }
+
+  .qr-code-scanner-reader :global(video),
+  .qr-code-scanner-reader :global(canvas) {
+    max-width: 100%;
+  }
+
+  .qr-code-scanner-status {
+    overflow-wrap: anywhere;
+  }
+</style>

package/dist/form-fields/fields/radio-field.svelte

@@ -0,0 +1,82 @@
+<script context="module">import {} from "../interfaces";
+export const radio_field_param_spec = {
+  spec: {
+    fields: {
+      options: {
+        fieldtype: "arraybuilder",
+        params: {
+          new_entry_field: {
+            fieldtype: "section",
+            fields: {
+              label: {
+                fieldtype: "text"
+              },
+              value: {
+                fieldtype: "jsoneditor"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<script>import { isEqual } from "lodash-es";
+import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+import { set_value_details } from "../utils";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+let options = $fieldStore.params?.options || [];
+let mapped_options = options.map((option, index) => {
+  const key = `${option.label}${index}`;
+  return {
+    label: option.label || index,
+    value: option.value || option.label || index,
+    key
+  };
+});
+$: selected_option = mapped_options.find((o) => isEqual(o.value, $fieldStore.value));
+$: update_value_details(selected_option);
+const update_value_details = (newly_set_option) => {
+  set_value_details($fieldStore, "label", newly_set_option?.label);
+};
+const handle_radio_change = (option) => {
+  $fieldStore.value = option.value;
+};
+</script>
+
+<div class="radio-field">
+  <FieldLabel {fieldStore} />
+  <fieldset
+    class="radio-options"
+    class:radio-options-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-label={$fieldStore.label}
+    aria-describedby={$fieldStore.validation_result ? `message-${$fieldStore.id}` : undefined}
+  >
+    {#each mapped_options as option, index (option.key)}
+      <div
+        class="radio-option"
+        class:radio-option-selected={isEqual(option.value, $fieldStore.value)}
+      >
+        <input
+          class={classNames("radio-input", $styles.choice)}
+          type="radio"
+          id="{$fieldStore.id}-option-{index}"
+          name={$fieldStore.id}
+          value={option.key}
+          checked={isEqual(option.value, $fieldStore.value)}
+          on:change={() => handle_radio_change(option)}
+        />
+        <label class="radio-label" for="{$fieldStore.id}-option-{index}">
+          {option.label}
+        </label>
+      </div>
+    {/each}
+  </fieldset>
+  <FieldMessage {fieldStore} />
+</div>

package/dist/form-fields/{sub → fields}/radio-field.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
 export interface IRadioFieldParams {
     options: {