@stubber/form-fields 1.4.5 → 1.5.0

package/dist/fields2/sub/signature-field.svelte

@@ -0,0 +1,84 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { Textarea } from "@stubber/ui/textarea";
+import { Button } from "@stubber/ui/button";
+import SignaturePad from "signature_pad";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { onMount } from "svelte";
+import { append_attachment, remove_attachment, uploadFiles } from "../fileserver";
+import { debounce, snakeCase } from "lodash-es";
+export let fieldStore;
+let canvasContainer;
+let pad;
+let signaturePad;
+onMount(() => {
+  signaturePad = new SignaturePad(pad);
+  signaturePad.addEventListener("endStroke", handleStroke);
+  if ($fieldStore.value?.data) {
+    setTimeout(() => {
+      signaturePad.fromData($fieldStore.value?.data);
+    }, 0);
+  }
+});
+function clear() {
+  signaturePad.clear();
+  if ($fieldStore.value) {
+    $fieldStore.value = {};
+  }
+}
+function handleStroke() {
+  const data = signaturePad.toData();
+  if (!$fieldStore.value) {
+    $fieldStore.value = {};
+  }
+  $fieldStore.value = {
+    ...$fieldStore.value,
+    data
+  };
+  is_uploading = true;
+  debounced_uploadFile();
+}
+let is_uploading = false;
+$: canvasWidth = canvasContainer?.clientWidth;
+async function uploadFile() {
+  const fileURI = signaturePad.toDataURL();
+  const fileBlob = await (await fetch(fileURI)).blob();
+  const file = new File([fileBlob], `${snakeCase($fieldStore.label)}.png`, { type: "image/png" });
+  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  const { uploaded_files = [] } = upload_res || {};
+  if (uploaded_files?.length) {
+    const prev_file = $fieldStore.value?.file;
+    if (prev_file && prev_file.fileuuid) {
+      remove_attachment(prev_file.fileuuid, $fieldStore.attachmentsStore);
+    }
+    $fieldStore.value = {
+      ...$fieldStore.value,
+      file: uploaded_files[0]
+    };
+    append_attachment(uploaded_files[0], $fieldStore.attachmentsStore);
+  }
+  is_uploading = false;
+}
+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>
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/signature-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField } from "../interfaces";
+export interface ISignatureField extends IBaseField<{}> {
+    fieldtype: "signature";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignatureFieldProps = typeof __propDef.props;
+export type SignatureFieldEvents = typeof __propDef.events;
+export type SignatureFieldSlots = typeof __propDef.slots;
+export default class SignatureField extends SvelteComponent<SignatureFieldProps, SignatureFieldEvents, SignatureFieldSlots> {
+}
+export {};

package/dist/fields2/sub/slider-field.svelte

@@ -0,0 +1,28 @@
+<script context="module"></script>
+
+<script>import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+$: min = $fieldStore.min ?? 0;
+$: max = $fieldStore.max ?? 100;
+$: step = $fieldStore.step ?? 1;
+</script>
+
+<FieldLabel {fieldStore} />
+<div class="relative">
+  <div class="flex justify-between items-end text-sm text-surface-300">
+    <div>{min}</div>
+    <div class="text-md text-surface-700">{$fieldStore.value || ""}</div>
+    <div>{max}</div>
+  </div>
+  <input
+    class="block w-full text-field rounded-md border-0 mb-2 focus:outline-none"
+    bind:value={$fieldStore.value}
+    {min}
+    {max}
+    {step}
+    type="range"
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+  />
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/slider-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField } from "../interfaces";
+interface INumberParams {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface ISliderField extends IBaseField<INumberParams> {
+    fieldtype: "slider";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SliderFieldProps = typeof __propDef.props;
+export type SliderFieldEvents = typeof __propDef.events;
+export type SliderFieldSlots = typeof __propDef.slots;
+export default class SliderField extends SvelteComponent<SliderFieldProps, SliderFieldEvents, SliderFieldSlots> {
+}
+export {};

package/dist/fields2/sub/smart-text-field.svelte

@@ -0,0 +1,245 @@
+<script context="module">import {} from "../interfaces";
+export const smart_text_field_param_spec = {
+  spec: {
+    fields: {
+      parse_string: {
+        fieldtype: "checkbox",
+        without_value_details: true
+      },
+      code_language: {
+        fieldtype: "select",
+        without_value_details: true,
+        params: {
+          options: [
+            { label: "Handlebars", value: "handlebars" },
+            { label: "None", value: "none" }
+          ]
+        }
+      },
+      auto_completions: {
+        fieldtype: "section",
+        fields: {
+          match_before: {
+            fieldtype: "text"
+          },
+          explicit: {
+            fieldtype: "checkbox",
+            without_value_details: true
+          },
+          options: {
+            fieldtype: "arraybuilder",
+            params: {
+              new_entry_field: {
+                fieldtype: "section",
+                fields: {
+                  label: {
+                    fieldtype: "text"
+                  },
+                  apply: {
+                    fieldtype: "text"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<script>import {
+  acceptCompletion,
+  autocompletion,
+  CompletionContext,
+  completionKeymap
+} from "@codemirror/autocomplete";
+import { history } from "@codemirror/commands";
+import { EditorState, StateField } from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  keymap,
+  MatchDecorator,
+  placeholder,
+  ViewPlugin,
+  ViewUpdate
+} from "@codemirror/view";
+import { find } from "lodash-es";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+let editor_view;
+$: validation_result = $fieldStore.validation_result;
+$: type = validation_result?.type;
+$: isValid = type !== "error";
+$: is_object = typeof $fieldStore.value === "object";
+$: parse_string = $fieldStore.params?.parse_string;
+$: auto_completions = $fieldStore.params?.auto_completions || [];
+$: code_language = $fieldStore.params?.code_language;
+const setup_editor = (element) => {
+  const extensions = [
+    history({ newGroupDelay: 150 }),
+    EditorView.lineWrapping,
+    contentField,
+    autocompletion({ override: [myCompletions], defaultKeymap: false }),
+    tab_accept_completion,
+    placeholder($fieldStore.label),
+    EditorView.contentAttributes.of({
+      spellcheck: "true"
+    })
+  ];
+  if (code_language === "handlebars") {
+    extensions.push(fake_handlebars_lang());
+  }
+  editor_view = new EditorView({
+    state: EditorState.create({
+      doc: $fieldStore.value,
+      extensions
+    }),
+    parent: element
+  });
+};
+const tab_accept_completion = keymap.of(
+  completionKeymap.filter((binding) => binding.key != "Enter").concat([
+    {
+      key: "Enter",
+      run: () => {
+        return false;
+      }
+    },
+    {
+      key: "Tab",
+      run: acceptCompletion
+    }
+  ])
+);
+const contentField = StateField.define({
+  create() {
+    return "";
+  },
+  update(value, transaction) {
+    if (transaction.docChanged) {
+      $fieldStore.value = parse_string ? parse_string_value(transaction.newDoc.toString()) : transaction.newDoc.toString();
+      return transaction.newDoc.toString();
+    }
+    return value;
+  }
+});
+function fake_handlebars_lang() {
+  const curly_decorator = new MatchDecorator({
+    regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
+    decoration: Decoration.mark({ class: "curly-braces-highlight" })
+  });
+  return ViewPlugin.fromClass(
+    class {
+      // blocks;
+      constructor(view) {
+        this.curlies = curly_decorator.createDeco(view);
+      }
+      update(update) {
+        this.curlies = curly_decorator.updateDeco(update, this.curlies);
+      }
+    },
+    {
+      decorations: (instance) => instance.curlies
+    }
+  );
+}
+function myCompletions(context) {
+  for (let completion of auto_completions) {
+    if (!completion.match_before) continue;
+    let before = context.matchBefore(new RegExp(completion.match_before));
+    if (!before) continue;
+    return {
+      from: before.from,
+      options: completion.options,
+      validFor: /^.*$/
+    };
+  }
+  let explicit_completions = find(auto_completions, { explicit: true });
+  if (explicit_completions && context.explicit) {
+    return {
+      from: context.pos,
+      options: explicit_completions.options,
+      validFor: /^.*$/
+    };
+  }
+  return null;
+}
+function parse_string_value(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (!isNaN(value) && value !== "") {
+    return Number(value);
+  }
+  return value;
+}
+</script>
+
+<FieldLabel {fieldStore} />
+{#if !is_object}
+  <div
+    use:setup_editor
+    class=" stubber-cm text-sm {isValid ? 'stubber-valid' : 'stubber-invalid'}"
+  />
+{:else}
+  <p class="text-surface-400">The value of this field is not a string.</p>
+{/if}
+<FieldMessage {fieldStore} />
+
+<style>
+  .stubber-cm :global(.cm-editor) {
+    /* Base styles */
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 0.375rem;
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+    border-width: 1px;
+    border-style: solid;
+    width: 100%;
+    color: rgb(31 41 51);
+
+    /* Top inset shadow only */
+    box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);
+  }
+
+  .stubber-cm :global(.cm-editor.cm-focused) {
+    outline: none;
+    border-width: 1px;
+    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+  }
+
+  .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
+    border-color: rgb(170, 170, 170, 0.5);
+  }
+
+  .stubber-cm.stubber-invalid :global(.cm-editor) {
+    border-color: rgb(225 45 57);
+  }
+
+  .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) {
+    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
+  }
+
+  .stubber-cm :global(.curly-braces-highlight) {
+    color: rgb(9 103 210);
+  }
+</style>

package/dist/fields2/sub/smart-text-field.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+export interface ISmartTextFieldParams {
+    parse_string?: boolean;
+    auto_completions?: Array<{
+        match_before?: string;
+        explicit?: boolean;
+        options: Array<{
+            label: string;
+            apply?: string;
+        }>;
+    }>;
+    code_language?: string;
+}
+export declare const smart_text_field_param_spec: IInitialForm;
+export interface ISmartTextField extends IBaseField<ISmartTextFieldParams> {
+    fieldtype: "smart_text";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ISmartTextFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SmartTextFieldProps = typeof __propDef.props;
+export type SmartTextFieldEvents = typeof __propDef.events;
+export type SmartTextFieldSlots = typeof __propDef.slots;
+export default class SmartTextField extends SvelteComponent<SmartTextFieldProps, SmartTextFieldEvents, SmartTextFieldSlots> {
+}
+export {};

package/dist/fields2/sub/telephone-field.svelte

@@ -0,0 +1,68 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import intlTelInput from "intl-tel-input";
+import "intl-tel-input/build/css/intlTelInput.css";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { set_value_details } from "../utils";
+export let fieldStore;
+let iti;
+function setupInput(input_element) {
+  iti = intlTelInput(input_element, {
+    initialCountry: "auto",
+    geoIpLookup: (callback) => {
+      fetch("https://ipapi.co/json").then((res) => res.json()).then((data) => callback(data.country_code)).catch(() => callback("us"));
+    },
+    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
+  });
+  const itis = document.querySelectorAll("div.iti");
+  itis.forEach((iti2) => {
+    iti2.style["width"] = "100%";
+  });
+  input_element.addEventListener("countrychange", () => set_number_details());
+  set_number_details();
+}
+$: if ($fieldStore.value) set_number_details();
+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.getSelectedCountryData();
+  delete country_data?.node;
+  if (is_valid && (force || 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
+    });
+  }
+}
+if ($fieldStore.value) {
+  setTimeout(() => {
+    $fieldStore.value = $fieldStore.value || "";
+    set_number_details(true);
+  }, 100);
+}
+</script>
+
+<FieldLabel {fieldStore} />
+<div
+  class="w-full bg-surface-100 flex space-x-4 focus:outline-primary-400 relative mt-2 rounded-md"
+>
+  <input
+    use:setupInput
+    bind:value={$fieldStore.value}
+    type="tel"
+    id={$fieldStore.id}
+    class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+  />
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/telephone-field.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField } from "../interfaces";
+export interface ITelephoneFieldParams {
+}
+export interface ITelephoneField extends IBaseField<ITelephoneFieldParams> {
+    fieldtype: "telephone";
+}
+import "intl-tel-input/build/css/intlTelInput.css";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ITelephoneFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TelephoneFieldProps = typeof __propDef.props;
+export type TelephoneFieldEvents = typeof __propDef.events;
+export type TelephoneFieldSlots = typeof __propDef.slots;
+export default class TelephoneField extends SvelteComponent<TelephoneFieldProps, TelephoneFieldEvents, TelephoneFieldSlots> {
+}
+export {};

package/dist/fields2/sub/text-field.svelte

@@ -0,0 +1,46 @@
+<script context="module">import {} from "../interfaces";
+export const text_field_param_spec = {
+  spec: {
+    fields: {
+      parse_string: {
+        fieldtype: "checkbox",
+        without_value_details: true
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Input } from "@stubber/ui/input";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+function parse_string_value(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (value !== "" && !isNaN(Number(value))) {
+    return Number(value);
+  }
+  return value;
+}
+function on_input(e) {
+  const new_value = e.target.value;
+  if ($fieldStore.params?.parse_string) {
+    const parsed_value = parse_string_value(new_value);
+    $fieldStore.value = parsed_value;
+  } else {
+    $fieldStore.value = new_value;
+  }
+}
+</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} />

package/dist/fields2/sub/text-field.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+export interface ITextFieldParams {
+    parse_string?: boolean;
+}
+export interface ITextField extends IBaseField<ITextFieldParams> {
+    fieldtype: "text";
+}
+export declare const text_field_param_spec: IInitialForm;
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ITextFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TextFieldProps = typeof __propDef.props;
+export type TextFieldEvents = typeof __propDef.events;
+export type TextFieldSlots = typeof __propDef.slots;
+export default class TextField extends SvelteComponent<TextFieldProps, TextFieldEvents, TextFieldSlots> {
+}
+export {};