@stubber/form-fields 1.4.5 → 1.5.0

package/dist/fields2/sub/object-builder-field.svelte

@@ -0,0 +1,123 @@
+<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 { Separator } from "@stubber/ui/separator";
+import { cloneDeep } from "lodash-es";
+import FieldLabel from "../FieldLabel.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;
+};
+</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 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="pl-6 mt-2">
+          {@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}
+    <Button size="icon" variant="outline" on:click={add_value}>
+      <i class="fa fa-plus" />
+    </Button>
+  </Collapsible.Content>
+</Collapsible.Root>

package/dist/fields2/sub/object-builder-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IField, type IInitialForm } from "../interfaces";
+interface IObjectBuilderFieldParams {
+    key_field_spec?: IField;
+    value_field_spec?: IField;
+}
+export declare const object_builder_field_param_spec: IInitialForm;
+export interface IObjectBuilderField extends IBaseField<IObjectBuilderFieldParams> {
+    fieldtype: "objectbuilder";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IObjectBuilderFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ObjectBuilderFieldProps = typeof __propDef.props;
+export type ObjectBuilderFieldEvents = typeof __propDef.events;
+export type ObjectBuilderFieldSlots = typeof __propDef.slots;
+export default class ObjectBuilderField extends SvelteComponent<ObjectBuilderFieldProps, ObjectBuilderFieldEvents, ObjectBuilderFieldSlots> {
+}
+export {};

package/dist/fields2/sub/qr-code-scanner-field.svelte

@@ -0,0 +1,86 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { Textarea } from "@stubber/ui/textarea";
+import { Input } from "@stubber/ui/input";
+import { Button } from "@stubber/ui/button";
+import * as Dialog from "@stubber/ui/dialog";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { Html5Qrcode } from "html5-qrcode";
+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 () => {
+  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 flex-col w-full gap-2">
+        <div id="reader" class="w-[250px] sm:w-[310px] flex flex-col items-center" />
+        {#if is_cameras_available}
+          {#if scan_success}
+            <div class="flex items-center space-x-2">
+              <i class="fas fa-circle text-success-400 fa-2xs" />
+              <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 text-surface-200 fa-2xs" />
+              <p class="text-label text-surface-800">Searching for code ...</p>
+            </div>
+          {/if}
+          <div class="flex">
+            <div class="flex ml-auto">
+              <Button disabled={!scan_success} on:click={confirm_scan}>Confirm</Button>
+            </div>
+          </div>
+        {:else}
+          <div class="w-[250px] sm:w-[310px] aspect-square flex items-center justify-center">
+            <p class="text-surface-800 text-label">No camera found</p>
+          </div>
+        {/if}
+      </div>
+    </Dialog.Header>
+  </Dialog.Content>
+</Dialog.Root>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/qr-code-scanner-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 IQRCodeScannerField extends IBaseField<{}> {
+    fieldtype: "qrcodescanner";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type QrCodeScannerFieldProps = typeof __propDef.props;
+export type QrCodeScannerFieldEvents = typeof __propDef.events;
+export type QrCodeScannerFieldSlots = typeof __propDef.slots;
+export default class QrCodeScannerField extends SvelteComponent<QrCodeScannerFieldProps, QrCodeScannerFieldEvents, QrCodeScannerFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,69 @@
+<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} />

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+export interface IRadioFieldParams {
+    options: {
+        label?: string;
+        value?: any;
+    }[];
+}
+export declare const radio_field_param_spec: IInitialForm;
+export interface IRadioField extends IBaseField<IRadioFieldParams> {
+    fieldtype: "radio";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IRadioFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RadioFieldProps = typeof __propDef.props;
+export type RadioFieldEvents = typeof __propDef.events;
+export type RadioFieldSlots = typeof __propDef.slots;
+export default class RadioField extends SvelteComponent<RadioFieldProps, RadioFieldEvents, RadioFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,182 @@
+<script context="module">import {} from "../interfaces";
+export const max_files_param_spec = {
+  spec: {
+    fields: {
+      max_files: {
+        fieldtype: "number"
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Button } from "@stubber/ui/button";
+import { max, 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;
+$: 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);
+  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-video-slash" />
+    {:else}
+      <i class="fa-solid fa-video" />
+    {/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>
+
+        {#if item?.blob}
+          <div class="shrink p-2">
+            <div class="overflow-hidden relative max-w-[200px]">
+              <!-- <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 py-1 pl-2 truncate border border-surface-200 rounded-sm">
+            <p class="text-surface-800 text-fluid-md">
+              {item?.filename}
+            </p>
+          </div>
+        {/if}
+        <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/screenrecorder-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";
+interface IScreenRecorderFieldParams {
+    max_files?: number | string;
+}
+export declare const max_files_param_spec: IInitialForm;
+export interface IScreenRecorderField extends IBaseField<IScreenRecorderFieldParams> {
+    fieldtype: "screenrecorder";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IScreenRecorderFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ScreenrecorderFieldProps = typeof __propDef.props;
+export type ScreenrecorderFieldEvents = typeof __propDef.events;
+export type ScreenrecorderFieldSlots = typeof __propDef.slots;
+export default class ScreenrecorderField extends SvelteComponent<ScreenrecorderFieldProps, ScreenrecorderFieldEvents, ScreenrecorderFieldSlots> {
+}
+export {};