@stubber/form-fields 2.2.6 → 3.0.0

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

@@ -1,159 +0,0 @@
-<script context="module">import {
-} from "../interfaces";
-export const file_field_param_spec = {
-  spec: {
-    fields: {
-      max_files: {
-        fieldtype: "number",
-        __order: 0
-      },
-      file_creation_options: file_creation_options_field_spec
-    }
-  }
-};
-</script>
-
-<script>import { Button } from "@stubber/ui/button";
-import { isEmpty, isEqual, isUndefined } from "lodash-es";
-import Dropzone from "svelte-file-dropzone";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import { append_attachment, remove_attachment, uploadFiles } from "../fileserver";
-import { file_creation_options_field_spec } from "../file_creation_options";
-export let fieldStore;
-$: validation_result = $fieldStore.validation_result;
-$: validation_type = validation_result?.type;
-async function handle_files_select(e) {
-  const { acceptedFiles, fileRejections } = e.detail;
-  if (limit_remaining < acceptedFiles.length) {
-    alert("You have reached the maximum number of files allowed");
-    return;
-  }
-  selected_files = [
-    ...selected_files,
-    ...acceptedFiles.map((f) => ({
-      filename: f.name,
-      f_id: Math.random().toString(36).substring(7)
-    }))
-  ];
-  const upload_res = await uploadFiles(
-    acceptedFiles,
-    $fieldStore.formDependencies,
-    file_creation_options
-  );
-  const { uploaded_files: newly_uploaded, failed_files: newly_failed } = upload_res || {
-    uploaded_files: [],
-    failed_files: []
-  };
-  const newly_uploaded_with_f_id = newly_uploaded.map((f) => ({
-    filename: f.filename,
-    fileuuid: f.fileuuid,
-    f_id: Math.random().toString(36).substring(7),
-    originalname: f.originalname,
-    contentType: f.contentType
-  }));
-  for (const f of newly_uploaded) {
-    append_attachment(f, $fieldStore.attachmentsStore);
-  }
-  uploaded_files = [...uploaded_files, ...newly_uploaded_with_f_id];
-  failed_files = [
-    ...failed_files,
-    ...newly_failed.map((f) => ({
-      filename: f.name,
-      f_id: Math.random().toString(36).substring(7)
-    }))
-  ];
-  selected_files = [];
-}
-let uploaded_files = Array.isArray($fieldStore.value) ? $fieldStore.value : [];
-let failed_files = [];
-let selected_files = [];
-$: update_fieldStore(uploaded_files);
-function update_fieldStore(uploaded_files2) {
-  if (isEmpty(uploaded_files2) && isUndefined($fieldStore.value)) return;
-  $fieldStore.value = uploaded_files2;
-}
-$: update_uploaded_files($fieldStore.value);
-function update_uploaded_files(value) {
-  if (isEmpty(value)) {
-    uploaded_files = [];
-  } else if (Array.isArray(value) && !isEqual(value, uploaded_files)) {
-    uploaded_files = value;
-  }
-}
-$: all_files = [
-  ...uploaded_files.map((f) => ({ ...f, is_uploaded: true, is_failed: false })),
-  ...failed_files.map((f) => ({ ...f, is_failed: true, is_uploaded: false })),
-  ...selected_files.map((f) => ({ ...f, is_uploaded: false, is_failed: false }))
-];
-let max_files = isNaN(Number($fieldStore.params?.max_files)) ? Infinity : Number($fieldStore.params?.max_files);
-$: limit_remaining = max_files - selected_files.length - uploaded_files.length;
-let file_creation_options = $fieldStore.params?.file_creation_options;
-function remove_file(item) {
-  uploaded_files = uploaded_files?.filter((f) => f.f_id !== item.f_id);
-  failed_files = failed_files?.filter((f) => f.f_id !== item.f_id);
-  selected_files = selected_files?.filter((f) => f.f_id !== item.f_id);
-  if ("fileuuid" in item) {
-    remove_attachment(item.fileuuid, $fieldStore.attachmentsStore);
-  }
-}
-</script>
-
-<FieldLabel {fieldStore} />
-<div class="flex w-full flex-col {validation_type == 'error' ? 'border-b border-warning-500' : ''}">
-  <Dropzone on:drop={handle_files_select} disabled={limit_remaining <= 0}>
-    <div class="flex h-full flex-col justify-center rounded-sm text-center">
-      <div>
-        <p class=" text-surface-800">Drop files to upload</p>
-        <p class=" text-surface-800">
-          Or click <span
-            class="cursor-pointer text-primary-500 hover:text-primary-400 hover:underline"
-            >here</span
-          >
-          to browse
-        </p>
-        {#if limit_remaining <= 0}
-          <p class="text-field text-sm italic text-danger-600">
-            You have reached the maximum number of files allowed
-          </p>
-        {/if}
-      </div>
-    </div>
-  </Dropzone>
-  <div class="mt-2 flex w-full flex-col gap-2">
-    {#each all_files as item}
-      <div class="flex w-full flex-row items-center gap-2">
-        {#if item.is_uploaded}
-          <div class="flex h-6 w-6 items-center justify-center text-success-500">
-            <i class="fa fa-check" />
-          </div>
-        {:else if item.is_failed}
-          <div class="flex h-6 w-6 items-center justify-center text-danger-400">
-            <i class="fa-regular fa-triangle-exclamation" />
-          </div>
-        {:else}
-          <div class="flex h-6 w-6 items-center justify-center text-surface-500">
-            <i class="fa fa-pulse fa-spinner" />
-          </div>
-        {/if}
-        <div class="flex-1 truncate rounded-sm border border-surface-200 py-1 pl-2">
-          <p class="text-surface-800">
-            {item?.filename}
-          </p>
-        </div>
-        <Button
-          type="button"
-          variant="destructive"
-          size="icon"
-          class="h-8 w-8 shrink-0"
-          on:click={() => {
-            remove_file(item);
-          }}
-        >
-          <i class="fa-solid fa-x text-xs" />
-        </Button>
-      </div>
-    {/each}
-  </div>
-</div>
-<FieldMessage {fieldStore} />

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

@@ -1,69 +0,0 @@
-<script context="module">export const grid_field_param_spec = {
-  spec: {
-    fields: {
-      columnDefs: {
-        fieldtype: "arraybuilder",
-        params: {
-          new_entry_field: {
-            fieldtype: "jsoneditor"
-          }
-        },
-        help: "See https://www.ag-grid.com/javascript-data-grid/column-definitions/"
-      }
-    }
-  }
-};
-</script>
-
-<script>import { onMount } from "svelte";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-let gridDiv;
-let gridApi;
-const gridOptions = {
-  autoSizeStrategy: {
-    type: "fitGridWidth",
-    defaultMinWidth: 100
-  },
-  defaultColDef: {
-    suppressMovable: true
-  },
-  onGridReady: (params) => {
-    gridApi = params.api;
-  },
-  onCellValueChanged: () => {
-    let rowData = [];
-    gridApi.forEachNode((node) => rowData.push(node.data));
-    $fieldStore.value = rowData;
-  },
-  // Row Data: The data to be displayed.
-  rowData: [],
-  // Column Definitions: Defines & controls grid columns.
-  columnDefs: []
-};
-async function initializeGrid(cancelled) {
-  const [{ createGrid }] = await Promise.all([
-    import("ag-grid-community"),
-    import("ag-grid-community/styles/ag-grid.css"),
-    import("ag-grid-community/styles/ag-theme-material.css")
-  ]);
-  if (cancelled()) return;
-  let columnDefs = $fieldStore.params?.columnDefs;
-  if (columnDefs) gridOptions.columnDefs = columnDefs;
-  let rowData = $fieldStore.value;
-  if (Array.isArray(rowData)) gridOptions.rowData = rowData;
-  createGrid(gridDiv, gridOptions);
-}
-onMount(() => {
-  let cancelled = false;
-  void initializeGrid(() => cancelled);
-  return () => {
-    cancelled = true;
-  };
-});
-</script>
-
-<FieldLabel {fieldStore} />
-<div bind:this={gridDiv} class="ag-theme-material h-96 w-full" />
-<FieldMessage {fieldStore} />

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

@@ -1,70 +0,0 @@
-<script context="module">import { get } from "svelte/store";
-import {} from "../interfaces";
-</script>
-
-<script>import { Button } from "@stubber/ui/button";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import FormField from "../form-field.svelte";
-export let fieldStore;
-$: fields = $fieldStore.sub_fields || [];
-let allChildrenConditionsChecked = true;
-let current_page_index = 0;
-</script>
-
-<FieldLabel {fieldStore} />
-
-{#if fields?.length}
-  <div class={!allChildrenConditionsChecked ? "invisible absolute" : ""}>
-    <div class="border border-surface-200">
-      <div class="p-2 py-3 overflow-x-auto whitespace-nowrap">
-        <div class="flex items-center">
-          {#each fields as p, i}
-            <button
-              type="button"
-              on:click={() => (current_page_index = i)}
-              class="flex items-center mr-4 {current_page_index === i
-                ? 'text-surface-900'
-                : 'text-surface-500'}"
-            >
-              <span
-                class="mr-1 flex items-center justify-center w-6 h-6 rounded-full {current_page_index ===
-                i
-                  ? 'bg-primary-500 text-surface-0'
-                  : 'bg-surface-100 text-surface-700'}"
-              >
-                {i + 1}
-              </span>
-            </button>
-          {/each}
-        </div>
-      </div>
-      {#each $fieldStore.sub_fields || [] as sub_field, index (get(sub_field).id)}
-        <div
-          class="p-6 border-y border-surface-200 {current_page_index !== index
-            ? 'invisible absolute'
-            : ''}"
-        >
-          <FormField fieldStore={sub_field} />
-        </div>
-      {/each}
-      <div class="flex items-center justify-between text-sm p-2">
-        {#if current_page_index > 0}
-          <Button variant="outline" on:click={() => (current_page_index = current_page_index - 1)}>
-            Back
-          </Button>
-        {/if}
-        {#if current_page_index < fields.length - 1}
-          <Button
-            class="ml-auto"
-            variant="outline"
-            on:click={() => (current_page_index = current_page_index + 1)}
-          >
-            Next
-          </Button>
-        {/if}
-      </div>
-    </div>
-    <FieldMessage {fieldStore} />
-  </div>
-{/if}

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

@@ -1,18 +0,0 @@
-<script context="module">import {} from "../interfaces";
-</script>
-
-<script>import { Textarea } from "@stubber/ui/textarea";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-</script>
-
-<FieldLabel {fieldStore} />
-<Textarea
-  id={$fieldStore.id}
-  bind:value={$fieldStore.value}
-  placeholder={$fieldStore.label}
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  aria-describedby="message-{$fieldStore.id}"
-/>
-<FieldMessage {fieldStore} />

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

@@ -1,134 +0,0 @@
-<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 * as Collapsible from "@stubber/ui/collapsible";
-import { Button } from "@stubber/ui/button";
-import { Input } from "@stubber/ui/input";
-import { Label } from "@stubber/ui/label";
-import { cloneDeep } from "lodash-es";
-import FieldExprToggle from "../FieldExprToggle.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import FormField from "../form-field.svelte";
-import { build_field } from "../utils";
-export let fieldStore;
-let key_field_spec = $fieldStore.params?.key_field_spec;
-let value_field_spec = $fieldStore.params?.value_field_spec;
-const update_field_value = (new_value_inner_value) => {
-  console.log("updated value", new_value_inner_value);
-  const new_value_object = {};
-  new_value_inner_value.forEach(({ key, value }) => {
-    new_value_object[key] = value;
-  });
-};
-const handle_key_input = (old_key, e) => {
-  const target = e.target;
-  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;
-    }
-  }
-  $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];
-  $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;
-</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>{$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-1 pl-2">
-    {#each Object.keys($fieldStore.value || {}) as key}
-      <Collapsible.Root open={true}>
-        <div class="flex flex-row items-center gap-2">
-          <Collapsible.Trigger let:builder class="">
-            {#if builder["data-state"] === "open"}
-              <i class="fa fa-chevron-down" />
-            {:else}
-              <i class="fa fa-chevron-right w-4" />
-            {/if}
-          </Collapsible.Trigger>
-          <div class="flex w-full items-center gap-2">
-            <Input
-              class="w-full"
-              placeholder="Key"
-              value={key}
-              on:input={(e) => handle_key_input(key, e)}
-            />
-            <Button variant="destructive" class="h-6 w-6 p-2" on:click={() => remove_value(key)}>
-              <i class="fa fa-trash" />
-            </Button>
-          </div>
-        </div>
-        <Collapsible.Content class="mt-2 pl-6">
-          {@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
-          )}
-          <FormField fieldStore={built_value_field} />
-        </Collapsible.Content>
-      </Collapsible.Root>
-      <!-- <Separator class="my-2" /> -->
-    {/each}
-
-    <div class="flex items-center justify-between">
-      <Button size="icon" variant="outline" on:click={add_value}>
-        <i class="fa fa-plus" />
-      </Button>
-    </div>
-  </Collapsible.Content>
-</Collapsible.Root>

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

@@ -1,84 +0,0 @@
-<script context="module">import {} from "../interfaces";
-</script>
-
-<script>import { Button } from "@stubber/ui/button";
-import * as Dialog from "@stubber/ui/dialog";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-let qr_code_lib;
-let is_cameras_available = false;
-let scan_success = false;
-let scanned_text = "";
-const open_scanner_modal = (is_open) => {
-  if (is_open) {
-    setup_scanner();
-  } else {
-    qr_code_lib?.stop();
-  }
-};
-const setup_scanner = async () => {
-  const { Html5Qrcode } = await import("html5-qrcode");
-  let cameras = await Html5Qrcode.getCameras();
-  if (!cameras) {
-    is_cameras_available = false;
-    return;
-  }
-  is_cameras_available = true;
-  let cameraId = cameras[0].id;
-  qr_code_lib = new Html5Qrcode("reader");
-  qr_code_lib.start(cameraId, { fps: 2 }, on_scan_success, on_scan_failure);
-};
-function on_scan_success(decodedText, decodedResult) {
-  scanned_text = decodedText;
-  scan_success = true;
-}
-function on_scan_failure(errorString) {
-}
-let open = false;
-function confirm_scan() {
-  $fieldStore.value = scanned_text;
-  open = false;
-}
-</script>
-
-<FieldLabel {fieldStore} />
-<Dialog.Root bind:open onOpenChange={open_scanner_modal}>
-  <Dialog.Trigger asChild let:builder>
-    <Button builders={[builder]} class="flex">
-      <i class="fa-solid fa-qrcode" />
-      Scan Code
-    </Button>
-  </Dialog.Trigger>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>Scan Code</Dialog.Title>
-      <div class="flex w-full flex-col gap-2">
-        <div id="reader" class="flex w-[250px] flex-col items-center sm:w-[310px]" />
-        {#if is_cameras_available}
-          {#if scan_success}
-            <div class="flex items-center space-x-2">
-              <i class="fas fa-circle fa-2xs text-success-400" />
-              <p class="text-label text-surface-800">{scanned_text}</p>
-            </div>
-          {:else}
-            <div class="flex items-center space-x-2">
-              <i class="fas fa-circle fa-2xs text-surface-200" />
-              <p class="text-label text-surface-800">Searching for code ...</p>
-            </div>
-          {/if}
-          <div class="flex">
-            <div class="ml-auto flex">
-              <Button disabled={!scan_success} on:click={confirm_scan}>Confirm</Button>
-            </div>
-          </div>
-        {:else}
-          <div class="flex aspect-square w-[250px] items-center justify-center sm:w-[310px]">
-            <p class="text-label text-surface-800">No camera found</p>
-          </div>
-        {/if}
-      </div>
-    </Dialog.Header>
-  </Dialog.Content>
-</Dialog.Root>
-<FieldMessage {fieldStore} />

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

@@ -1,69 +0,0 @@
-<script context="module">import { get } from "svelte/store";
-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 { Label } from "@stubber/ui/label";
-import * as RadioGroup from "@stubber/ui/radio-group";
-import { isEqual } from "lodash-es";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import { set_value_details } from "../utils";
-export let fieldStore;
-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 = (new_key) => {
-  const selected_option2 = mapped_options.find((o) => o.key === new_key);
-  if (selected_option2) {
-    $fieldStore.value = selected_option2.value;
-  }
-};
-</script>
-
-<FieldLabel {fieldStore} />
-<RadioGroup.Root
-  value={selected_option?.key}
-  onValueChange={handle_radio_change}
-  class="border rounded-md px-2 py-1"
->
-  {#each mapped_options as option}
-    <div class="flex items-center space-x-2">
-      <RadioGroup.Item value={option.key} id={option.key} />
-      <Label for={option.key}>{option.label}</Label>
-    </div>
-  {/each}
-</RadioGroup.Root>
-<FieldMessage {fieldStore} />