@stubber/form-fields 2.2.6 → 3.0.0

package/dist/form-fields/sub/screenrecorder-field.svelte

@@ -1,178 +0,0 @@
-<script context="module">import {} from "../interfaces";
-</script>
-
-<script>import { Button } from "@stubber/ui/button";
-import { snakeCase } from "lodash-es";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import {
-  append_attachment,
-  remove_attachment,
-  uploadFiles
-} from "../fileserver";
-export let fieldStore;
-const file_name_prefix = snakeCase($fieldStore.label || "Screenshot");
-let fileList = [];
-let mediaRecorder = null;
-$: isRecording = mediaRecorder?.state === "recording";
-$: buttonLabel = isRecording ? "Stop Recording" : "Start Recording";
-let max_files_param = $fieldStore.params?.max_files;
-let file_creation_options = $fieldStore.params?.file_creation_options;
-$: max_files = isNaN(parseInt(max_files_param)) ? Infinity : parseInt(max_files_param);
-$: limit_remaining = max_files - fileList.length;
-const toggleRecording = () => {
-  if (mediaRecorder?.state === "recording") {
-    stopRecording();
-  } else {
-    startRecording();
-  }
-};
-async function startRecording() {
-  if (limit_remaining <= 0) {
-    alert("You have reached the maximum number of files allowed");
-    return;
-  }
-  if (!navigator.mediaDevices.getDisplayMedia) {
-    alert("Screen capture is not supported in this browser.");
-    return;
-  }
-  const stream = await navigator.mediaDevices.getDisplayMedia({
-    audio: true,
-    // @ts-ignore
-    video: { mediaSource: "screen" }
-  });
-  const audiostream = await navigator.mediaDevices.getUserMedia({ audio: true });
-  const combine = new MediaStream([...stream.getVideoTracks(), ...audiostream.getAudioTracks()]);
-  mediaRecorder = new MediaRecorder(combine, { mimeType: "video/webm;codecs=vp9" });
-  const media = [];
-  mediaRecorder.ondataavailable = (e) => media.push(e.data);
-  mediaRecorder.onstop = function() {
-    let id = Math.random().toString(36).substring(7);
-    let filename = `${$fieldStore.label}_${id}.webm`;
-    let blob = new Blob(media, { type: "video/webm;codecs=vp9" });
-    let file = new File([blob], filename, { type: "video/webm;codecs=vp9" });
-    uploadFile(file, blob, filename);
-    mediaRecorder = null;
-  };
-  mediaRecorder.start();
-}
-function stopRecording() {
-  mediaRecorder?.stop();
-}
-async function uploadFile(file, blob, filename) {
-  fileList = [
-    ...fileList,
-    {
-      file,
-      blob,
-      filename,
-      is_uploaded: false,
-      is_failed: false
-    }
-  ];
-  const upload_res = await uploadFiles(
-    [file],
-    $fieldStore.formDependencies,
-    file_creation_options
-  );
-  const { uploaded_files = [], failed_files = [] } = upload_res || {};
-  const newly_uploaded = uploaded_files.find((f) => f.filename === filename) || {};
-  const is_uploaded = uploaded_files.length > 0;
-  const is_failed = failed_files.length > 0;
-  fileList = fileList.map((item) => {
-    if (item.filename === filename) {
-      return {
-        ...item,
-        ...newly_uploaded,
-        is_uploaded,
-        is_failed
-      };
-    }
-    return item;
-  });
-  if (newly_uploaded.fileuuid) {
-    append_attachment(newly_uploaded, $fieldStore.attachmentsStore);
-  }
-}
-const update_file_list = (field_value) => {
-  if (Array.isArray(field_value)) {
-    fileList = field_value.map((f) => ({
-      file: f.file,
-      blob: f.blob,
-      fileuuid: f.fileuuid,
-      contentType: f.contentType,
-      originalname: f.originalname,
-      filename: f.filename,
-      is_uploaded: f.is_uploaded || f.fileuuid ? true : false,
-      is_failed: f.is_failed || false
-    }));
-  }
-};
-update_file_list($fieldStore.value);
-$: update_field_value(fileList);
-const update_field_value = (files) => {
-  const uploaded_files = files.filter((f) => f.is_uploaded && f.fileuuid);
-  $fieldStore.value = uploaded_files.map((f) => ({
-    filename: f.filename,
-    fileuuid: f.fileuuid,
-    contentType: f.contentType,
-    originalname: f.originalname
-  }));
-};
-function removeFile(item) {
-  fileList = fileList.filter((f) => f !== item);
-  remove_attachment(item.fileuuid, $fieldStore.attachmentsStore);
-}
-</script>
-
-<FieldLabel {fieldStore} />
-<div class="flex flex-col items-start gap-2">
-  <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
-    {#if isRecording}
-      <i class="fa-solid fa-video-slash" />
-    {:else}
-      <i class="fa-solid fa-video" />
-    {/if}
-    {buttonLabel}
-  </Button>
-  <div class="flex w-full flex-col gap-1">
-    {#each fileList as item}
-      <div class="flex w-full flex-row items-center gap-1">
-        <div class="flex h-6 w-6 shrink-0 items-center justify-center">
-          {#if item.is_uploaded}
-            <i class="fa fa-check text-success-500" />
-          {:else if item.is_failed}
-            <i class="fa-regular fa-triangle-exclamation text-danger-400" />
-          {:else}
-            <i class="fa fa-pulse fa-spinner text-surface-500" />
-          {/if}
-        </div>
-
-        {#if item?.blob}
-          <div class="shrink p-2">
-            <div class="relative max-w-[200px] overflow-hidden">
-              <!-- <audio controls src={window.URL.createObjectURL(item.blob)} /> -->
-              <video controls src={window.URL.createObjectURL(item.blob)} class="w-full">
-                <track kind="captions" />
-              </video>
-            </div>
-          </div>
-        {:else}
-          <div class="w-full shrink truncate rounded-sm border border-surface-200 py-1 pl-2">
-            <p class="text-fluid-md text-surface-800">
-              {item?.filename}
-            </p>
-          </div>
-        {/if}
-        <Button
-          variant="destructive"
-          class="h-6 w-6 shrink-0 p-0"
-          on:click={() => removeFile(item)}
-        >
-          <i class="fa-solid fa-2xs fa-x" />
-        </Button>
-      </div>
-    {/each}
-  </div>
-</div>
-<FieldMessage {fieldStore} />

package/dist/form-fields/sub/section-field.svelte

@@ -1,50 +0,0 @@
-<script context="module">import { get as get_store_value } from "svelte/store";
-</script>
-
-<script>import { Button } from "@stubber/ui/button";
-import * as Collapsible from "@stubber/ui/collapsible";
-import FieldMessage from "../FieldMessage.svelte";
-import FormField from "../form-field.svelte";
-import { Label } from "@stubber/ui/label";
-import FieldExprToggle from "../FieldExprToggle.svelte";
-import { validate_field } from "../validations/validate_field";
-export let fieldStore;
-let open = true;
-$: validate_sub_fields($fieldStore);
-let section_has_errors = false;
-const validate_sub_fields = async (field) => {
-  section_has_errors = false;
-  if (field.sub_fields && field.sub_fields.length > 0) {
-    for (const sub_field of field.sub_fields || []) {
-      const { key, errors } = await validate_field(field.formStore, sub_field);
-      if (errors.length > 0) {
-        section_has_errors = true;
-      }
-    }
-  }
-};
-</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>
-      <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-2 pl-2">
-    {#each $fieldStore.sub_fields || [] as sub_field (get_store_value(sub_field).id)}
-      <FormField fieldStore={sub_field} />
-    {/each}
-  </Collapsible.Content>
-</Collapsible.Root>

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

@@ -1,150 +0,0 @@
-<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 { Button } from "@stubber/ui/button";
-import * as Command from "@stubber/ui/command";
-import * as Popover from "@stubber/ui/popover";
-import { createState } from "cmdk-sv";
-import { debounce, isEqual } from "lodash-es";
-import { onMount, tick } from "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;
-let open = false;
-let loading = false;
-let items = [];
-const state = createState();
-$: dropdownLabel = items.find((i) => isEqual(i.value, $fieldStore.value))?.label ?? $fieldStore.value?._default_label ?? "Select...";
-$: update_value_details_label(dropdownLabel);
-const update_value_details_label = (label) => {
-  if (!label || label === "Select...") {
-    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
-    };
-  });
-};
-const params = $fieldStore.params || {};
-items = map_field_options(params?.options);
-const get_selected_item_from_key = (key) => {
-  return items.find((item) => item.key === key);
-};
-function closeAndFocusTrigger(triggerId) {
-  open = false;
-  tick().then(() => {
-    document.getElementById(triggerId)?.focus();
-  });
-}
-let last_search = void 0;
-const handle_search = async (search) => {
-  last_search = search;
-  if (load_options) {
-    loading = true;
-    const remote_results = await load_options($state.search);
-    loading = false;
-    items = map_field_options(remote_results);
-  }
-};
-let debounced_handle_search = null;
-if (load_options) {
-  debounced_handle_search = debounce(handle_search, 300);
-}
-$: if (load_options && $state.search !== void 0 && $state.search !== last_search) {
-  if (debounced_handle_search) debounced_handle_search($state.search);
-}
-const handle_select = (item_key, trigger) => {
-  const selected_item = get_selected_item_from_key(item_key);
-  if (selected_item) {
-    $fieldStore.value = selected_item.value;
-  }
-  closeAndFocusTrigger(trigger);
-};
-let triggerEl;
-let portalTarget;
-onMount(() => {
-  const root = triggerEl?.getRootNode();
-  portalTarget = root instanceof ShadowRoot ? null : document.body;
-});
-</script>
-
-<div class="invisible hidden" bind:this={triggerEl} />
-
-<FieldLabel {fieldStore} />
-<Popover.Root bind:open let:ids portal={portalTarget}>
-  <Popover.Trigger asChild let:builder>
-    <Button
-      builders={[builder]}
-      variant="outline"
-      role="combobox"
-      aria-expanded={open}
-      class="flex h-10 w-full justify-between rounded-md border border-input bg-white bg-opacity-[15] px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
-      style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-      aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-      aria-describedby="message-{$fieldStore.id}"
-    >
-      {dropdownLabel}
-      <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
-    </Button>
-  </Popover.Trigger>
-  <Popover.Content sameWidth class="z-[100] p-0">
-    <Command.Root shouldFilter={!load_options} {state}>
-      <Command.Input class="border-none outline-none focus:ring-0" placeholder="Search..." />
-      <Command.List>
-        {#if loading}
-          <Command.Loading class="py-6 text-center text-sm">Loading…</Command.Loading>
-        {:else}
-          <Command.Empty>No results found.</Command.Empty>
-
-          {#each items as item}
-            <Command.Item
-              value={item.key}
-              onSelect={(item_key) => handle_select(item_key, ids.trigger)}
-              class={isEqual(item.value, $fieldStore.value) ? "bg-primary-100" : ""}
-            >
-              {item.label}
-            </Command.Item>
-          {/each}
-        {/if}
-      </Command.List>
-    </Command.Root>
-  </Popover.Content>
-</Popover.Root>
-<div class="flex items-center gap-2">
-  <FieldMessage {fieldStore} />
-  <slot />
-</div>

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

@@ -1,28 +0,0 @@
-<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/form-fields/sub/telephone-field.svelte

@@ -1,64 +0,0 @@
-<script context="module">import {} from "../interfaces";
-</script>
-
-<script>import intlTelInput, { Iti } from "intl-tel-input";
-import "intl-tel-input/styles";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import { set_value_details } from "../utils";
-export let fieldStore;
-let iti = null;
-function setupInput(input_element) {
-  setup_intl_tel_input(input_element);
-}
-async function setup_intl_tel_input(input_element) {
-  iti = 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,
-    containerClass: "w-full"
-  });
-  input_element.addEventListener("countrychange", () => set_number_details());
-  await iti.promise;
-  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.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>
-
-<FieldLabel {fieldStore} />
-<div
-  class="relative mt-2 flex w-full space-x-4 rounded-md bg-surface-100 focus:outline-primary-400"
->
-  <input
-    use:setupInput
-    bind:value={$fieldStore.value}
-    on:input={() => set_number_details()}
-    type="tel"
-    id={$fieldStore.id}
-    class="shadow-xs flex h-9 w-full min-w-0 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"
-    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-    aria-describedby="message-{$fieldStore.id}"
-  />
-</div>
-<FieldMessage {fieldStore} />