@stubber/form-fields 2.2.5 → 3.0.0

package/dist/form-fields/Form.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
 import type { UploadedFile } from "./fileserver";
 import type { IFormDependencies, IInitialForm } from "./interfaces";
+import { type FormFieldStyles } from "./styles";
 declare const __propDef: {
     props: {
         initial_form: IInitialForm;
@@ -10,6 +11,7 @@ declare const __propDef: {
         dependencies?: IFormDependencies | undefined;
         form_valid?: boolean;
         dynamic_field_type?: boolean;
+        styles?: FormFieldStyles | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/form-fields/UploadStatus.svelte

@@ -0,0 +1,76 @@
+<script>export let status;
+$: label = status === "uploaded" ? "Uploaded" : status === "failed" ? "Upload failed" : "Uploading";
+</script>
+
+<span class="upload-status upload-status-{status}" aria-label={label} role="status">
+  {#if status === "uploaded"}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="m6.75 12.25 3.25 3.25 7.25-7.25" />
+    </svg>
+  {:else if status === "failed"}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 7.5v5.25M12 16.5h.01" />
+    </svg>
+  {:else}
+    <span class="upload-spinner" aria-hidden="true" />
+  {/if}
+</span>
+
+<style>
+  .upload-status {
+    display: inline-grid;
+    box-sizing: border-box;
+    width: var(--form-upload-status-size, 1.75rem);
+    height: var(--form-upload-status-size, 1.75rem);
+    flex: none;
+    place-items: center;
+    border-radius: 999px;
+  }
+
+  .upload-status-uploaded {
+    color: var(--form-upload-success-color, #15803d);
+    background: var(--form-upload-success-background, #dcfce7);
+  }
+
+  .upload-status-failed {
+    color: var(--form-upload-failure-color, #b91c1c);
+    background: var(--form-upload-failure-background, #fee2e2);
+  }
+
+  .upload-status-uploading {
+    color: var(--form-upload-progress-color, #2563eb);
+    background: var(--form-upload-progress-background, #dbeafe);
+  }
+
+  svg {
+    width: 1.2rem;
+    height: 1.2rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .upload-spinner {
+    box-sizing: border-box;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 999px;
+    animation: upload-spin 0.7s linear infinite;
+  }
+
+  @keyframes upload-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .upload-spinner {
+      animation-duration: 1.5s;
+    }
+  }
+</style>

package/dist/form-fields/UploadStatus.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        status: "uploading" | "uploaded" | "failed";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UploadStatusProps = typeof __propDef.props;
+export type UploadStatusEvents = typeof __propDef.events;
+export type UploadStatusSlots = typeof __propDef.slots;
+export default class UploadStatus extends SvelteComponent<UploadStatusProps, UploadStatusEvents, UploadStatusSlots> {
+}
+export {};

package/dist/form-fields/fields/_field-builder-reorder.svelte

@@ -0,0 +1,35 @@
+<script>import { getContext } from "svelte";
+import { STYLES_CONTEXT } from "../styles";
+export let item;
+export let first;
+export let last;
+export let moveUp;
+export let moveDown;
+const styles = getContext(STYLES_CONTEXT);
+</script>
+
+<div class="field-builder-reorder">
+  <button
+    type="button"
+    class="field-builder-reorder-up {$styles.button ?? ''}"
+    data-size="icon"
+    disabled={first}
+    on:click={moveUp}
+    aria-label="Move {item} up">↑</button
+  >
+  <button
+    type="button"
+    class="field-builder-reorder-down {$styles.button ?? ''}"
+    data-size="icon"
+    disabled={last}
+    on:click={moveDown}
+    aria-label="Move {item} down">↓</button
+  >
+</div>
+
+<style>
+  .field-builder-reorder {
+    display: flex;
+    flex: none;
+  }
+</style>

package/dist/form-fields/fields/_field-builder-reorder.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        item: string;
+        first: boolean;
+        last: boolean;
+        moveUp: () => void;
+        moveDown: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldBuilderReorderProps = typeof __propDef.props;
+export type FieldBuilderReorderEvents = typeof __propDef.events;
+export type FieldBuilderReorderSlots = typeof __propDef.slots;
+export default class FieldBuilderReorder extends SvelteComponent<FieldBuilderReorderProps, FieldBuilderReorderEvents, FieldBuilderReorderSlots> {
+}
+export {};

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

@@ -10,16 +10,17 @@
 };
 </script>
 
-<script>import { Button } from "@stubber/ui/button";
-import * as Collapsible from "@stubber/ui/collapsible";
-import { Label } from "@stubber/ui/label";
+<script>import { getContext } from "svelte";
 import { get as get_store_value } from "svelte/store";
 import FieldExprToggle from "../FieldExprToggle.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
+import CollapsibleSection from "../CollapsibleSection.svelte";
+import { STYLES_CONTEXT } from "../styles";
 import { build_field } from "../utils";
 import { validate_field } from "../validations/validate_field";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 const new_entry_field = $fieldStore?.params?.new_entry_field || {
   fieldtype: "text"
 };
@@ -95,45 +96,110 @@ const validate_sub_fields = async (field) => {
 };
 </script>
 
-<Collapsible.Root bind:open class="w-full">
-  <Collapsible.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
-      <Label class={section_has_errors ? "font-bold text-red-500" : ""}>{$fieldStore.label}</Label>
+<div
+  class="array-builder-field"
+  class:array-builder-field-invalid={section_has_errors}
+  aria-invalid={section_has_errors ? true : undefined}
+>
+  <CollapsibleSection
+    title={$fieldStore.label}
+    bind:open
+    contentId="content-{$fieldStore.id}"
+    labelledBy="label-{$fieldStore.id}"
+  >
+    <div slot="heading" class="array-builder-heading">
+      <span id="label-{$fieldStore.id}" class="array-builder-label">
+        {$fieldStore.label}
+      </span>
       <FieldMessage {fieldStore} />
-
-      <div class="flex items-center">
-        {#if open}
-          <i class="fa fa-caret-down pr-1" />
-        {:else}
-          <i class="fa fa-caret-right pr-1" />
-        {/if}
-        <FieldExprToggle {fieldStore} />
-      </div>
-    </Button>
-  </Collapsible.Trigger>
-  <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
+    </div>
+    <div slot="actions" class="array-builder-header-actions">
+      <FieldExprToggle {fieldStore} />
+    </div>
     {#each $fieldStore.sub_fields || [] as sub_field, index (get_store_value(sub_field).id)}
-      <div class="flex w-full items-center space-x-2">
-        <!-- up and down sort buttons -->
-        <div class="flex flex-col items-center space-y-1">
-          <Button variant="ghost" class="h-6 w-6 p-2" on:click={() => move_value_up(index)}>
-            <i class="fa fa-chevron-up" />
-          </Button>
-          <Button variant="ghost" class="h-6 w-6 p-2" on:click={() => move_value_down(index)}>
-            <i class="fa fa-chevron-down" />
-          </Button>
+      <div class="array-builder-item">
+        <div class="array-builder-value">
+          <FormField fieldStore={sub_field} />
         </div>
-        <FormField fieldStore={sub_field} />
-        <Button variant="destructive" class="h-6 w-6 p-2" on:click={() => remove_value(index)}>
-          <i class="fa fa-trash" />
-        </Button>
+        <button
+          type="button"
+          class={$styles.button}
+          data-size="icon"
+          disabled={index === 0}
+          aria-label="Move {$fieldStore.label} item {index + 1} up"
+          on:click={() => move_value_up(index)}
+        >
+          <span aria-hidden="true">↑</span>
+        </button>
+        <button
+          type="button"
+          class={$styles.button}
+          data-size="icon"
+          disabled={index === array_value.length - 1}
+          aria-label="Move {$fieldStore.label} item {index + 1} down"
+          on:click={() => move_value_down(index)}
+        >
+          <span aria-hidden="true">↓</span>
+        </button>
+        <button
+          type="button"
+          class={$styles.button}
+          data-variant="destructive"
+          data-size="icon"
+          aria-label="Remove {$fieldStore.label} item {index + 1}"
+          on:click={() => remove_value(index)}
+        >
+          <span aria-hidden="true">×</span>
+        </button>
       </div>
     {/each}
-    <div class="flex items-center justify-between">
-      <Button size="icon" variant="outline" on:click={add_value}>
-        <i class="fa fa-plus" />
-      </Button>
+    <div class="array-builder-footer">
+      <button
+        type="button"
+        class={$styles.button}
+        data-variant="primary"
+        aria-label="Add {$fieldStore.label} item"
+        on:click={add_value}
+      >
+        <span aria-hidden="true">+</span>
+        <span>Add item</span>
+      </button>
       <FieldExprToggle {fieldStore} />
     </div>
-  </Collapsible.Content>
-</Collapsible.Root>
+  </CollapsibleSection>
+</div>
+
+<style>
+  .array-builder-field,
+  .array-builder-item,
+  .array-builder-value {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .array-builder-header-actions,
+  .array-builder-reorder-actions,
+  .array-builder-footer {
+    display: flex;
+    align-items: center;
+  }
+
+  .array-builder-heading,
+  .array-builder-value {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .array-builder-header-actions,
+  .array-builder-reorder-actions,
+  .array-builder-remove {
+    flex: none;
+  }
+
+  .array-builder-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

package/dist/form-fields/fields/checkbox-autocomplete.svelte

@@ -0,0 +1,153 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import ChevronDownIcon from "../icons/ChevronDownIcon.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+import CheckboxField, {} from "./checkbox-field.svelte";
+import SmartTextField, {} from "./smart-text-field.svelte";
+import { isEqual } from "lodash-es";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$fieldStore.without_value_details = true;
+let selected_option = $fieldStore.value === void 0 || typeof $fieldStore.value === "boolean" || isEqual($fieldStore.value, $fieldStore.params?.checkedvalue || true) ? "Checkbox" : "Smart Text";
+const options = ["Checkbox", "Smart Text"];
+let open = false;
+function select_option(new_option) {
+  selected_option = new_option;
+  switch (selected_option) {
+    case "Checkbox":
+      $fieldStore.value = false;
+      break;
+    case "Smart Text":
+      $fieldStore.value = "";
+      break;
+    default:
+      break;
+  }
+  open = false;
+}
+function handle_focusout(event) {
+  const nextTarget = event.relatedTarget;
+  const currentTarget = event.currentTarget;
+  if (!(nextTarget instanceof Node) || !currentTarget.contains(nextTarget)) open = false;
+}
+function handle_keydown(event) {
+  if (event.key === "Escape" && open) {
+    event.preventDefault();
+    open = false;
+  }
+}
+function preserve_mouse_focus(node) {
+  const prevent_default = (event) => event.preventDefault();
+  node.addEventListener("mousedown", prevent_default);
+  return {
+    destroy: () => node.removeEventListener("mousedown", prevent_default)
+  };
+}
+</script>
+
+<svelte:window on:keydown={handle_keydown} />
+
+<div class="checkbox-autocomplete">
+  <div class="popover" on:focusout={handle_focusout}>
+    <button
+      type="button"
+      class={classNames("trigger", $styles.button)}
+      data-size="icon"
+      aria-label="Choose input type"
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      aria-controls="checkbox-autocomplete-menu-{$fieldStore.id}"
+      on:click={() => (open = !open)}
+    >
+      <span class:indicator-open={open} class="indicator" aria-hidden="true">
+        <ChevronDownIcon />
+      </span>
+    </button>
+    {#if open}
+      <div
+        id="checkbox-autocomplete-menu-{$fieldStore.id}"
+        class={classNames("popup", $styles.popover)}
+        role="dialog"
+        aria-label="Choose input type"
+        use:preserve_mouse_focus
+      >
+        <div class="option-list" role="radiogroup">
+          {#each options as option}
+            <label
+              class={classNames("option", $styles.option)}
+              data-selected={selected_option === option ? true : undefined}
+            >
+              <input
+                class={$styles.choice}
+                type="radio"
+                name="checkbox-autocomplete-mode-{$fieldStore.id}"
+                value={option}
+                checked={selected_option === option}
+                on:change={() => select_option(option)}
+              />
+              <span>{option}</span>
+            </label>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if selected_option === "Smart Text"}
+    <div class="mode-field">
+      <SmartTextField {fieldStore} />
+    </div>
+  {:else}
+    <div class="mode-field">
+      <CheckboxField {fieldStore} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .checkbox-autocomplete {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .popover {
+    position: relative;
+    flex: none;
+  }
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .indicator {
+    display: inline-flex;
+  }
+
+  .popup {
+    position: absolute;
+    z-index: 20;
+    top: calc(100% + 0.25rem);
+    left: 0;
+    min-width: 10rem;
+    overflow: hidden;
+  }
+
+  .option-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .option {
+    display: flex;
+    align-items: center;
+  }
+
+  .mode-field {
+    flex: 1;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,69 @@
+<script context="module">export const checkbox_field_param_spec = {
+  spec: {
+    fields: {
+      checkedvalue: {
+        fieldtype: "jsoneditor",
+        initvalue: { has_default: true, default: true }
+      },
+      uncheckedvalue: {
+        fieldtype: "jsoneditor",
+        initvalue: { has_default: true, default: false }
+      }
+    }
+  }
+};
+</script>
+
+<script>import { isEqual } from "lodash-es";
+import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT } from "../styles";
+import { set_value_details } from "../utils";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+set_value_details($fieldStore, "label", $fieldStore.label);
+$: checked = isEqual($fieldStore.value, $fieldStore.params?.checkedvalue ?? true);
+const on_change = (event) => {
+  const new_value = event.currentTarget.checked;
+  const checked_value = $fieldStore.params?.checkedvalue ?? true;
+  const unchecked_value = $fieldStore.params?.uncheckedvalue ?? false;
+  if (new_value) {
+    $fieldStore.value = checked_value;
+  } else {
+    $fieldStore.value = unchecked_value;
+  }
+};
+</script>
+
+<div class="checkbox-field">
+  <div
+    class="checkbox-line"
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <input
+      class={$styles.choice}
+      id={$fieldStore.id}
+      type="checkbox"
+      {checked}
+      aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
+      on:change={on_change}
+    />
+    <FieldLabel {fieldStore} with_margin={false} />
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .checkbox-field {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox-line {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

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

@@ -14,10 +14,12 @@
 };
 </script>
 
-<script>import { Button } from "@stubber/ui/button";
+<script>import { getContext } from "svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 import SelectField, {
 } from "./select-field.svelte";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 const params = $fieldStore.params || {};
 const dependencies = $fieldStore.formDependencies;
 const createWantToModal = dependencies?.createWantToModal;
@@ -69,12 +71,13 @@ const load_options = async (search_term) => {
 </script>
 
 <SelectField {fieldStore} {load_options}>
-  <Button
+  <button
+    type="button"
+    class={$styles.button}
+    data-variant="primary"
     on:click={show_create_contact_modal}
-    variant="ghost"
-    class="ml-auto text-sm text-surface-500 hover:text-surface-700"
   >
-    <i class="fa-regular fa-plus" />
+    <span aria-hidden="true">+</span>
     Create new contact
-  </Button>
+  </button>
 </SelectField>