@stubber/form-fields 2.2.6 → 3.0.0

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

@@ -0,0 +1,104 @@
+<script context="module">export const select_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 Autocomplete, {} from "../Autocomplete.svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { clear_value_details, set_value_details } from "../utils";
+export let fieldStore;
+export let load_options = void 0;
+$: dropdownLabel = items.find((item) => isEqual(item.value, $fieldStore.value))?.label ?? $fieldStore.value?._default_label;
+$: update_value_details_label(dropdownLabel);
+const update_value_details_label = (label) => {
+  if (!label) {
+    clear_value_details($fieldStore, "label");
+    return;
+  }
+  set_value_details($fieldStore, "label", label);
+};
+const map_field_options = (options) => {
+  if (!options || !Array.isArray(options)) {
+    return [];
+  }
+  return options.filter(Boolean).map((option, index) => {
+    const key = `${option.label}${index}`;
+    return {
+      label: option.label,
+      value: option.value,
+      key
+    };
+  });
+};
+$: items = map_field_options($fieldStore.params?.options);
+async function loadAutocompleteOptions(search) {
+  return map_field_options(await load_options(search));
+}
+function select_item(item) {
+  $fieldStore.value = item.value;
+}
+</script>
+
+<div class="select-field">
+  <FieldLabel {fieldStore} />
+  <Autocomplete
+    id={$fieldStore.id}
+    options={items}
+    value={$fieldStore.value}
+    placeholder={dropdownLabel ?? "Select..."}
+    loadOptions={load_options ? loadAutocompleteOptions : undefined}
+    invalid={$fieldStore.validation_result?.type === "error"}
+    ariaDescribedby="message-{$fieldStore.id}"
+    on:select={(event) => select_item(event.detail)}
+  />
+  <div class="select-footer">
+    <div class="select-message">
+      <FieldMessage {fieldStore} />
+    </div>
+    <div class="select-actions">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .select-field {
+    width: 100%;
+  }
+
+  .select-footer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  .select-message {
+    min-width: 0;
+  }
+
+  .select-actions {
+    flex: none;
+    margin-inline-start: auto;
+  }
+</style>

package/dist/form-fields/{sub → fields}/signature-field.svelte

@@ -9,29 +9,47 @@ export const signature_field_param_spec = {
 };
 </script>
 
-<script>import { Textarea } from "@stubber/ui/textarea";
-import { Button } from "@stubber/ui/button";
-import SignaturePad from "signature_pad";
+<script>import SignaturePad from "signature_pad";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import { onMount } from "svelte";
+import UploadStatus from "../UploadStatus.svelte";
+import { getContext, onDestroy, onMount } from "svelte";
 import { append_attachment, remove_attachment, uploadFiles } from "../fileserver";
 import { debounce, snakeCase } from "lodash-es";
 import { file_creation_options_field_spec } from "../file_creation_options";
+import { STYLES_CONTEXT, classNames } from "../styles";
 export let fieldStore;
-let canvasContainer;
+const styles = getContext(STYLES_CONTEXT);
 let pad;
 let signaturePad;
+let resizeObserver;
 let file_creation_options = $fieldStore.params?.file_creation_options;
 onMount(() => {
   signaturePad = new SignaturePad(pad);
   signaturePad.addEventListener("endStroke", handleStroke);
+  resizeObserver = new ResizeObserver(resizeCanvas);
+  resizeObserver.observe(pad);
+  resizeCanvas();
   if ($fieldStore.value?.data) {
     setTimeout(() => {
       signaturePad.fromData($fieldStore.value?.data);
     }, 0);
   }
 });
+onDestroy(() => {
+  debounced_uploadFile.cancel();
+  resizeObserver?.disconnect();
+  signaturePad?.removeEventListener("endStroke", handleStroke);
+  signaturePad?.off();
+});
+function resizeCanvas() {
+  const data = signaturePad.toData();
+  const ratio = Math.max(window.devicePixelRatio || 1, 1);
+  pad.width = pad.offsetWidth * ratio;
+  pad.height = pad.offsetHeight * ratio;
+  pad.getContext("2d")?.scale(ratio, ratio);
+  if (data.length) signaturePad.fromData(data);
+}
 function clear() {
   signaturePad.clear();
   if ($fieldStore.value) {
@@ -51,7 +69,6 @@ function handleStroke() {
   debounced_uploadFile();
 }
 let is_uploading = false;
-$: canvasWidth = canvasContainer?.clientWidth;
 async function uploadFile() {
   const fileURI = signaturePad.toDataURL();
   const fileBlob = await (await fetch(fileURI)).blob();
@@ -78,21 +95,60 @@ async function uploadFile() {
 const debounced_uploadFile = debounce(uploadFile, 1e3);
 </script>
 
-<FieldLabel {fieldStore} />
-<div bind:this={canvasContainer}>
-  <canvas
-    bind:this={pad}
-    id="signature-pad"
-    class="signature-pad mt-2 rounded-md border"
-    width={canvasWidth}
-    height={200}
-  />
-  <div class="mt-1 flex items-center justify-between">
-    <Button variant="ghost" on:click={clear} type="button">Clear</Button>
-
-    {#if is_uploading}
-      <i class="fa fa-pulse fa-spinner text-surface-500" />
-    {/if}
+<div class="signature-field">
+  <FieldLabel {fieldStore} />
+  <div class="signature-pad">
+    <canvas
+      bind:this={pad}
+      id={$fieldStore.id}
+      class="signature-canvas"
+      aria-describedby="message-{$fieldStore.id}"
+      aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+    />
+    <div class="signature-actions">
+      <button
+        class={classNames("signature-clear", $styles.button)}
+        data-variant="destructive"
+        on:click={clear}
+        type="button">Clear</button
+      >
+      <span class="signature-status" hidden={!is_uploading} aria-live="polite">
+        <UploadStatus status="uploading" />
+        <span>Uploading signature…</span>
+      </span>
+    </div>
   </div>
+  <FieldMessage {fieldStore} />
 </div>
-<FieldMessage {fieldStore} />
+
+<style>
+  .signature-field,
+  .signature-pad,
+  .signature-canvas {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .signature-canvas {
+    display: block;
+    height: 12rem;
+    touch-action: none;
+  }
+
+  .signature-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.5rem;
+  }
+
+  .signature-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .signature-status[hidden] {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,53 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$: min = $fieldStore.min ?? 0;
+$: max = $fieldStore.max ?? 100;
+$: step = $fieldStore.step ?? 1;
+</script>
+
+<div class="slider-field">
+  <FieldLabel {fieldStore} />
+  <div class="slider-control">
+    <div class="slider-values">
+      <span class="slider-boundary">{min}</span>
+      <output class="slider-value" for={$fieldStore.id}>
+        {$fieldStore.value ?? ""}
+      </output>
+      <span class="slider-boundary">{max}</span>
+    </div>
+    <input
+      class={classNames("slider-input", $styles.range)}
+      id={$fieldStore.id}
+      bind:value={$fieldStore.value}
+      {min}
+      {max}
+      {step}
+      type="range"
+      aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
+    />
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .slider-field,
+  .slider-control,
+  .slider-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .slider-values {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+</style>

package/dist/form-fields/{sub → fields}/smart-text-field.svelte

@@ -58,9 +58,10 @@ export const smart_text_field_param_spec = {
 </script>
 
 <script>import { find } from "lodash-es";
+import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import { getContext } from "svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 export let fieldStore;
 let editor_view;
 let codemirror_loader;
@@ -76,6 +77,7 @@ function loadCodeMirror() {
       autocompletion: autocomplete.autocompletion,
       completionKeymap: autocomplete.completionKeymap,
       history: commands.history,
+      Compartment: state.Compartment,
       EditorState: state.EditorState,
       StateField: state.StateField,
       Decoration: view.Decoration,
@@ -93,17 +95,22 @@ $: type = validation_result?.type;
 $: isValid = type !== "error";
 $: is_object = typeof $fieldStore.value === "object";
 const smart_text_fields_ctx_store = getContext("smart_text_fields_ctx");
+const styles = getContext(STYLES_CONTEXT);
 $: parse_string = $fieldStore.params?.parse_string ?? true;
 $: code_language = $fieldStore.params?.code_language || "handlebars";
-const setup_editor = (element) => {
+const setup_editor = (element, initial_appearance) => {
   let disposed = false;
   let local_editor_view;
+  let appearance = initial_appearance;
+  let appearance_compartment;
+  let appearance_extension;
   void loadCodeMirror().then(
     ({
       acceptCompletion,
       autocompletion,
       completionKeymap,
       history,
+      Compartment,
       EditorState,
       StateField,
       Decoration,
@@ -114,6 +121,11 @@ const setup_editor = (element) => {
       ViewPlugin
     }) => {
       if (disposed) return;
+      appearance_compartment = new Compartment();
+      appearance_extension = () => EditorView.editorAttributes.of({
+        class: appearance.input,
+        "aria-invalid": appearance.invalid ? "true" : "false"
+      });
       const contentField = createContentField(StateField);
       const tab_accept_completion = keymap.of(
         completionKeymap.filter((binding) => binding.key != "Enter").concat([
@@ -132,12 +144,19 @@ const setup_editor = (element) => {
       const extensions = [
         history({ newGroupDelay: 150 }),
         EditorView.lineWrapping,
+        EditorView.theme({
+          "&": { minWidth: "0", width: "100%" },
+          ".cm-scroller": { overflow: "auto" }
+        }),
+        appearance_compartment.of(appearance_extension()),
         contentField,
         autocompletion({ override: [myCompletions], defaultKeymap: false }),
         tab_accept_completion,
         placeholder($fieldStore.label),
         EditorView.contentAttributes.of({
-          spellcheck: "true"
+          id: $fieldStore.id,
+          spellcheck: "true",
+          "aria-describedby": `message-${$fieldStore.id}`
         })
       ];
       if (code_language === "handlebars") {
@@ -155,6 +174,14 @@ const setup_editor = (element) => {
     }
   );
   return {
+    update(next_appearance) {
+      appearance = next_appearance;
+      if (local_editor_view && appearance_compartment && appearance_extension) {
+        local_editor_view.dispatch({
+          effects: appearance_compartment.reconfigure(appearance_extension())
+        });
+      }
+    },
     destroy() {
       disposed = true;
       local_editor_view?.destroy();
@@ -196,6 +223,17 @@ function update_editor_content(new_value) {
     }
   }
 }
+$: update_editor_attributes($fieldStore.id, !isValid);
+function update_editor_attributes(id, invalid) {
+  if (!editor_view) return;
+  editor_view.contentDOM.id = id;
+  editor_view.contentDOM.setAttribute("aria-describedby", `message-${id}`);
+  if (invalid) {
+    editor_view.contentDOM.setAttribute("aria-invalid", "true");
+  } else {
+    editor_view.contentDOM.removeAttribute("aria-invalid");
+  }
+}
 function fake_handlebars_lang(Decoration, MatchDecorator, ViewPlugin) {
   const curly_decorator = new MatchDecorator({
     regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
@@ -248,89 +286,31 @@ function parse_string_value(value) {
 }
 </script>
 
-<FieldLabel {fieldStore} />
-{#if !is_object}
-  <div use:setup_editor class="stubber-cm" aria-invalid={!isValid} />
-{:else}
-  <p class="text-surface-400">The value of this field is not a string.</p>
-{/if}
-<FieldMessage {fieldStore} />
-
-<!-- below styles are basically this tailwind string:
- flex h-9 w-full min-w-0 flex-row items-center gap-2 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30 -->
+<div class="smart-text-field">
+  <FieldLabel {fieldStore} />
+  {#if !is_object}
+    <div
+      class="smart-text-editor"
+      use:setup_editor={{ input: classNames("smart-text-input", $styles.input), invalid: !isValid }}
+    />
+  {:else}
+    <p class={classNames("smart-text-type-error", $styles.message)} data-variant="error">
+      The value of this field is not a string.
+    </p>
+  {/if}
+  <FieldMessage {fieldStore} />
+</div>
 
 <style>
-  .stubber-cm :global(.cm-editor) {
-    width: 100%;
+  .smart-text-field {
+    display: flex;
+    flex-direction: column;
     min-width: 0;
-    border-radius: 0.375rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
-
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    --tw-ring-offset-color: hsl(var(--background) / 1);
-    transition-property: color, box-shadow;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .stubber-cm :global(.cm-editor) {
-      background-color: hsl(var(--input) / 0.3);
-    }
-  }
-
-  .stubber-cm[aria-invalid="true"] :global(.cm-editor) {
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
-    --tw-ring-color: hsl(var(--destructive) / 0.5);
-  }
-
-  .stubber-cm :global(.cm-editor.cm-focused) {
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-      var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
-      var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsl(var(--ring) / 0.5);
-  }
-
-  .stubber-cm[aria-invalid="true"] :global(.cm-editor.cm-focused) {
-    --tw-ring-color: hsl(var(--destructive) / 0.5);
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
-  }
-
-  .stubber-cm :global(.cm-editor .cm-scroller) {
-    font-family: inherit;
-    line-height: inherit;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-content) {
-    padding: 0;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-line) {
-    padding: 0;
-    padding-left: 0.75rem;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-placeholder) {
-    --tw-text-opacity: 1;
-    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
+    width: 100%;
   }
 
-  .stubber-cm :global(.curly-braces-highlight) {
-    color: rgb(9 103 210);
+  .smart-text-editor {
+    min-width: 0;
+    width: 100%;
   }
 </style>

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

@@ -0,0 +1,108 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { getContext } from "svelte";
+import intlTelInput, {} from "intl-tel-input";
+import "../intl-tel-input.css";
+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 iti = null;
+function setupInput(input_element, initial_appearance) {
+  const handle_country_change = () => set_number_details();
+  input_element.addEventListener("countrychange", handle_country_change);
+  let appearance = initial_appearance;
+  const instance = intlTelInput(input_element, {
+    loadUtils: () => import("intl-tel-input/utils"),
+    initialCountryLookup: async () => {
+      const res = await fetch("https://ipapi.co/json");
+      const data = await res.json();
+      return data?.country_code || "us";
+    },
+    separateDialCode: false,
+    classNames: {
+      searchWrapper: appearance.search,
+      searchInput: appearance.searchInput
+    }
+  });
+  iti = instance;
+  const container = input_element.parentElement;
+  container?.style.setProperty("width", "100%");
+  void instance.promise.then(() => {
+    if (iti === instance) set_number_details();
+  });
+  return {
+    update(next_appearance) {
+      const container2 = input_element.parentElement;
+      const search = container2?.querySelector(".iti__search-input-wrapper");
+      const search_input = container2?.querySelector(".iti__search-input");
+      replaceClasses(search, appearance.search, next_appearance.search);
+      replaceClasses(search_input, appearance.searchInput, next_appearance.searchInput);
+      appearance = next_appearance;
+    },
+    destroy() {
+      input_element.removeEventListener("countrychange", handle_country_change);
+      instance.destroy();
+      if (iti === instance) iti = null;
+    }
+  };
+}
+function replaceClasses(element, previous, next) {
+  if (!element) return;
+  element.classList.remove(...previous.split(/\s+/).filter(Boolean));
+  element.classList.add(...next.split(/\s+/).filter(Boolean));
+}
+let last_set_value = null;
+function set_number_details(force = false) {
+  if (!iti) return;
+  if (!force && last_set_value === $fieldStore.value) return;
+  last_set_value = $fieldStore.value;
+  const formatted_number = iti.getNumber();
+  const is_valid = iti.isValidNumber();
+  const country_data = iti.getSelectedCountry();
+  if (is_valid && formatted_number !== $fieldStore.value) {
+    $fieldStore.value = formatted_number;
+  }
+  if ($fieldStore.value) {
+    set_value_details($fieldStore, "details", {
+      is_valid_number: is_valid,
+      selected_country: country_data
+    });
+  }
+}
+</script>
+
+<div class="telephone-field">
+  <FieldLabel {fieldStore} />
+  <input
+    use:setupInput={{
+      search: "telephone-search",
+      searchInput: classNames("telephone-search-input", $styles.input),
+    }}
+    bind:value={$fieldStore.value}
+    on:input={() => set_number_details()}
+    type="tel"
+    id={$fieldStore.id}
+    class={classNames("telephone-input", $styles.input)}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .telephone-field,
+  .telephone-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .telephone-field :global(.telephone-search),
+  .telephone-field :global(.telephone-search-input) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>

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

@@ -6,7 +6,7 @@ export interface ITelephoneFieldParams {
 export interface ITelephoneField extends IBaseField<ITelephoneFieldParams> {
     fieldtype: "telephone";
 }
-import "intl-tel-input/styles";
+import "../intl-tel-input.css";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField<ITelephoneFieldParams>>;

package/dist/form-fields/{sub → fields}/text-field.svelte

@@ -11,10 +11,12 @@ export const text_field_param_spec = {
 };
 </script>
 
-<script>import { Input } from "@stubber/ui/input";
+<script>import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT } from "../styles";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 function parse_string_value(value) {
   if (value === "true") return true;
   if (value === "false") return false;
@@ -34,13 +36,28 @@ function on_input(e) {
 }
 </script>
 
-<FieldLabel {fieldStore} />
-<Input
-  id={$fieldStore.id}
-  value={$fieldStore.value}
-  placeholder={$fieldStore.label}
-  on:input={on_input}
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  aria-describedby="message-{$fieldStore.id}"
-/>
-<FieldMessage {fieldStore} />
+<div class="text-field">
+  <FieldLabel {fieldStore} />
+  <input
+    class={$styles.input}
+    id={$fieldStore.id}
+    value={$fieldStore.value ?? ""}
+    placeholder={$fieldStore.label}
+    on:input={on_input}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby={$fieldStore.validation_result ? `message-${$fieldStore.id}` : undefined}
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .text-field {
+    width: 100%;
+  }
+
+  input {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+  }
+</style>