@stubber/form-fields 1.4.5 → 1.5.0

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

@@ -0,0 +1,165 @@
+<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 isRecording = false;
+$: buttonLabel = isRecording ? "Cancel" : "Take screenshot";
+let max_files_param = $fieldStore.params?.max_files;
+$: max_files = isNaN(parseInt(max_files_param)) ? Infinity : parseInt(max_files_param);
+$: limit_remaining = max_files - fileList.length;
+const toggleRecording = () => {
+  isRecording = !isRecording;
+  if (isRecording) {
+    startRecording();
+  }
+};
+async function startRecording() {
+  if (limit_remaining <= 0) {
+    alert("You have reached the maximum number of files allowed");
+    isRecording = false;
+    return;
+  }
+  let id = Math.random().toString(36).substring(7);
+  let filename = `${file_name_prefix}_${id}`;
+  if (!navigator.mediaDevices.getDisplayMedia) {
+    alert("Screen capture is not supported in this browser.");
+    isRecording = false;
+    return;
+  }
+  const stream = await navigator.mediaDevices.getDisplayMedia({
+    video: { mediaSource: "screen" }
+  });
+  const track = stream.getVideoTracks()[0];
+  const imageCapture = new ImageCapture(track);
+  const bitmap = await imageCapture.grabFrame();
+  track.stop();
+  const canvas = document.createElement("canvas");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    isRecording = false;
+    return;
+  }
+  context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
+  const image = canvas.toDataURL();
+  const res = await fetch(image);
+  const buff = await res.arrayBuffer();
+  const file = new File([buff], `${filename}.png`, {
+    type: "image/png"
+  });
+  isRecording = false;
+  uploadFile(file, `${filename}.png`);
+}
+async function uploadFile(file, filename) {
+  fileList = [
+    ...fileList,
+    {
+      file,
+      filename,
+      is_uploaded: false,
+      is_failed: false
+    }
+  ];
+  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  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 gap-2 items-start">
+  <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
+    {#if isRecording}
+      <i class="fa-solid fa-camera-slash" />
+    {:else}
+      <i class="fa-solid fa-camera" />
+    {/if}
+    {buttonLabel}
+  </Button>
+  <div class="flex flex-col gap-1 w-full">
+    {#each fileList as item}
+      <div class="w-full flex flex-row items-center gap-1">
+        <div class="flex items-center justify-center w-6 h-6 shrink-0">
+          {#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>
+
+        <div class="w-full shrink py-1 pl-2 truncate border border-surface-200 rounded-sm">
+          <p class="text-surface-800 text-fluid-md">
+            {item?.filename}
+          </p>
+        </div>
+        <Button
+          variant="destructive"
+          class="h-6 w-6 p-0 shrink-0"
+          on:click={() => removeFile(item)}
+        >
+          <i class="fa-solid fa-2xs fa-x" />
+        </Button>
+      </div>
+    {/each}
+  </div>
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/screenshot-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";
+interface IScreenshotFieldParams {
+    max_files?: number | string;
+}
+export interface IScreenshotField extends IBaseField<IScreenshotFieldParams> {
+    fieldtype: "screenshot";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IScreenshotFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ScreenshotFieldProps = typeof __propDef.props;
+export type ScreenshotFieldEvents = typeof __propDef.events;
+export type ScreenshotFieldSlots = typeof __propDef.slots;
+export default class ScreenshotField extends SvelteComponent<ScreenshotFieldProps, ScreenshotFieldEvents, ScreenshotFieldSlots> {
+}
+export {};

package/dist/fields2/sub/scroll-and-read-display-field.svelte

@@ -0,0 +1,92 @@
+<script context="module">import {} from "svelte/store";
+import {} from "../interfaces";
+export const scroll_and_read_display_field_param_spec = {
+  spec: {
+    fields: {
+      displaytext: {
+        fieldtype: "note"
+      },
+      checkedvalue: {
+        fieldtype: "jsoneditor"
+      },
+      uncheckedvalue: {
+        fieldtype: "jsoneditor"
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Checkbox } from "@stubber/ui/checkbox";
+import { Label } from "@stubber/ui/label";
+import { isEqual } from "lodash-es";
+import FieldMessage from "../FieldMessage.svelte";
+import { set_value_details } from "../utils";
+import { onMount } from "svelte";
+export let fieldStore;
+let params = $fieldStore.params;
+let yes_value = params?.checkedvalue ?? true;
+let no_value = params?.uncheckedvalue ?? false;
+let displaytext = params?.displaytext || "";
+$: validation_result = $fieldStore.validation_result;
+$: type = validation_result?.type;
+$: is_error = type === "error";
+let scrolled_to_bottom = false;
+$: checked = isEqual($fieldStore.value, yes_value);
+const handle_checked_change = (new_checked) => {
+  let new_value = new_checked ? yes_value : no_value;
+  $fieldStore.value = new_value;
+};
+let outer;
+const handle_scroll = (event) => {
+  const target = event.target;
+  if (scrolled_to_bottom) return;
+  let scroll_percentage = Math.ceil(
+    target.scrollTop * 100 / (target.scrollHeight - target.clientHeight)
+  );
+  if (target.scrollHeight - target.clientHeight === 0) scroll_percentage = 100;
+  scrolled_to_bottom = scroll_percentage >= 99;
+};
+onMount(() => {
+  if (outer.scrollHeight <= outer.clientHeight) {
+    scrolled_to_bottom = true;
+  }
+});
+$: update_value_details($fieldStore.value);
+const update_value_details = (new_value) => {
+  if (!new_value) return;
+  set_value_details($fieldStore, "label", $fieldStore.label);
+};
+</script>
+
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <!-- div with inner shadow -->
+  <div
+    bind:this={outer}
+    class="border max-h-[300px] overflow-y-scroll shadow-inner rounded-md"
+    on:scroll={handle_scroll}
+  >
+    <div class="p-6 px-2">
+      {@html displaytext}
+    </div>
+  </div>
+  <div
+    class="{!scrolled_to_bottom
+      ? 'opacity-20'
+      : ''} flex space-x-3 relative mt-2 items-center {is_error
+      ? 'border-b border-warning-500'
+      : ''}"
+  >
+    <Checkbox
+      disabled={!scrolled_to_bottom}
+      id="input_{$fieldStore.id}"
+      name={$fieldStore.id}
+      {checked}
+      onCheckedChange={handle_checked_change}
+    />
+    <Label for="input_{$fieldStore.id}" class="block">
+      {$fieldStore.label}
+    </Label>
+  </div>
+  <FieldMessage {fieldStore} />
+</div>

package/dist/fields2/sub/scroll-and-read-display-field.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+interface IScrollAndReadDisplayFieldParams {
+    displaytext: string;
+    checkedvalue?: any;
+    uncheckedvalue?: any;
+}
+export declare const scroll_and_read_display_field_param_spec: IInitialForm;
+export interface IScrollAndReadDisplayField extends IBaseField<IScrollAndReadDisplayFieldParams> {
+    fieldtype: "scrollandreaddisplay";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IScrollAndReadDisplayFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ScrollAndReadDisplayFieldProps = typeof __propDef.props;
+export type ScrollAndReadDisplayFieldEvents = typeof __propDef.events;
+export type ScrollAndReadDisplayFieldSlots = typeof __propDef.slots;
+export default class ScrollAndReadDisplayField extends SvelteComponent<ScrollAndReadDisplayFieldProps, ScrollAndReadDisplayFieldEvents, ScrollAndReadDisplayFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+<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 FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import FormField from "../form-field.svelte";
+export let fieldStore;
+</script>
+
+<Collapsible.Root open={true} class="w-full">
+  <Collapsible.Trigger asChild let:builder>
+    <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+      <FieldLabel {fieldStore} />
+      <FieldMessage {fieldStore} />
+
+      <i class="fa fa-sort" />
+    </Button>
+  </Collapsible.Trigger>
+
+  <Collapsible.Content class="flex flex-col gap-y-1 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/fields2/sub/section-field.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField, IField } from "../interfaces";
+interface ISectionParams {
+}
+export interface ISectionField extends IBaseField<ISectionParams> {
+    fieldtype: "section";
+    fields: Record<string, IField>;
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SectionFieldProps = typeof __propDef.props;
+export type SectionFieldEvents = typeof __propDef.events;
+export type SectionFieldSlots = typeof __propDef.slots;
+export default class SectionField extends SvelteComponent<SectionFieldProps, SectionFieldEvents, SectionFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,138 @@
+<script context="module">import { get } from "svelte/store";
+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 { tick } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { set_value_details } from "../utils";
+export let fieldStore;
+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 ?? get($fieldStore.formStore)[$fieldStore.data_path + "_label"] ?? "Select...";
+$: update_value_details_label(dropdownLabel);
+const update_value_details_label = (label) => {
+  if (!label || label === "Select...") return;
+  set_value_details($fieldStore, "label", label);
+};
+const map_field_options = (options) => {
+  if (!options || !Array.isArray(options)) {
+    return [];
+  }
+  return options.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 (params.load_options) {
+    loading = true;
+    const remote_results = await params.load_options($state.search);
+    loading = false;
+    items = map_field_options(remote_results);
+  }
+};
+let debounced_handle_search = null;
+if (params.load_options) {
+  debounced_handle_search = debounce(handle_search, 300);
+}
+$: if (params.load_options && $state.search !== void 0 && $state.search !== last_search) {
+  console.log("doing debounced search", !!debounced_handle_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);
+};
+</script>
+
+<FieldLabel {fieldStore} />
+<Popover.Root bind:open let:ids>
+  <Popover.Trigger asChild let:builder>
+    <Button
+      builders={[builder]}
+      variant="outline"
+      role="combobox"
+      aria-expanded={open}
+      class="w-full border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 justify-between"
+      style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
+    >
+      {dropdownLabel}
+      <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
+    </Button>
+  </Popover.Trigger>
+  <Popover.Content sameWidth class="p-0 z-[100]">
+    <Command.Root shouldFilter={!params.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-sm text-center">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/fields2/sub/select-field.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
+export interface ISelectFieldOption {
+    label: string;
+    value: any;
+}
+export interface ISelectFieldParams {
+    options?: ISelectFieldOption[];
+    load_options?: (search_term: string) => Promise<ISelectFieldOption[]>;
+}
+export declare const select_field_param_spec: IInitialForm;
+export interface ISelectField extends IBaseField<ISelectFieldParams> {
+    fieldtype: "select";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ISelectFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SelectFieldProps = typeof __propDef.props;
+export type SelectFieldEvents = typeof __propDef.events;
+export type SelectFieldSlots = typeof __propDef.slots;
+export default class SelectField extends SvelteComponent<SelectFieldProps, SelectFieldEvents, SelectFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,69 @@
+<script context="module">import { get } from "svelte/store";
+export const select_resource_field_param_spec = {
+  spec: {
+    fields: {
+      resource_name: {
+        fieldtype: "text",
+        help: "The name of the resource to select from."
+      },
+      label: {
+        fieldtype: "text",
+        help: "The field in the resource to use as the label in the dropdown options."
+      }
+    }
+  }
+};
+</script>
+
+<script>import { cloneDeep, isEqual } from "lodash-es";
+import SelectField, {
+} from "./select-field.svelte";
+export let fieldStore;
+const load_options = async (search_term) => {
+  const resource_name = $fieldStore.params?.resource_name;
+  const dependencies = $fieldStore.formDependencies;
+  const clienthub = dependencies?.clienthub;
+  const stubber = dependencies?.stubber;
+  const socket = clienthub?.socket;
+  const stubref = stubber?.stubref;
+  const orguuid = stubber?.orguuid;
+  if (!clienthub || !socket) {
+    console.warn("Clienthub or socket not available");
+    return [];
+  }
+  if (!resource_name) {
+    console.warn("Resource name not specified in field params");
+    return [];
+  }
+  const details = {
+    resource_name
+  };
+  details.params = cloneDeep($fieldStore.params) || {};
+  details.params.orguuid = orguuid;
+  details.params.stubref = stubref;
+  details.params.input = search_term;
+  if (details.params.limit === void 0) {
+    details.params.limit = 50;
+  }
+  return new Promise((resolve, reject) => {
+    socket.emit("request", { type: "resource", details }, (res) => {
+      if (res.success) {
+        const resources = res.payload?.[resource_name] || [];
+        const result = resources.map((resource) => ({
+          value: resource,
+          label: resource[$fieldStore.params?.label || $fieldStore.label] ?? resource._default_label
+        }));
+        resolve(result);
+      } else {
+        console.error("Failed to load resource:", res);
+        resolve([]);
+      }
+    });
+  });
+};
+if ($fieldStore.params) {
+  $fieldStore.params.load_options = load_options;
+}
+</script>
+
+<SelectField {fieldStore} />

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
+export interface ISelectResourceFieldParams extends ISelectFieldParams {
+    resource_name: string;
+    label?: string;
+}
+export declare const select_resource_field_param_spec: IInitialForm;
+export interface ISelectResourceField extends IBaseField<ISelectResourceFieldParams> {
+    fieldtype: "selectresource";
+}
+import { type ISelectFieldParams } from "./select-field.svelte";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ISelectResourceFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SelectresourceFieldProps = typeof __propDef.props;
+export type SelectresourceFieldEvents = typeof __propDef.events;
+export type SelectresourceFieldSlots = typeof __propDef.slots;
+export default class SelectresourceField extends SvelteComponent<SelectresourceFieldProps, SelectresourceFieldEvents, SelectresourceFieldSlots> {
+}
+export {};