@stubber/form-fields 2.1.2 → 2.2.0

package/dist/form-fields/file_creation_options.d.ts

@@ -0,0 +1,4 @@
+import type { IInitialForm } from "./interfaces";
+import type { ISectionField } from "./sub/section-field.svelte";
+export declare const file_creation_options_field_spec: ISectionField;
+export declare const basic_files_field_param_spec: IInitialForm;

package/dist/form-fields/file_creation_options.js

@@ -0,0 +1,72 @@
+export const file_creation_options_field_spec = {
+    fieldtype: "section",
+    __order: 300,
+    fields: {
+        visibility: {
+            fieldtype: "select",
+            params: {
+                options: [
+                    {
+                        label: "private",
+                        value: "private",
+                    },
+                    {
+                        label: "public",
+                        value: "public",
+                    },
+                ],
+            },
+            name: "visibility",
+            __key: "visibility",
+            __order: 0,
+            without_value_details: true,
+        },
+        folder: {
+            name: "folder",
+            __key: "folder",
+            __order: 1,
+            fieldtype: "text",
+        },
+        lifecycle: {
+            fieldtype: "section",
+            fields: {
+                archive: {
+                    fieldtype: "section",
+                    fields: {
+                        after_creation_minutes: {
+                            fieldtype: "number",
+                        },
+                        after_access_minutes: {
+                            fieldtype: "number",
+                        },
+                    },
+                },
+                delete: {
+                    fieldtype: "section",
+                    fields: {
+                        after_creation_minutes: {
+                            fieldtype: "number",
+                        },
+                        after_access_minutes: {
+                            fieldtype: "number",
+                        },
+                    },
+                },
+            },
+            name: "lifecycle",
+            __key: "lifecycle",
+            __order: 2,
+        },
+    },
+};
+export const basic_files_field_param_spec = {
+    spec: {
+        fields: {
+            max_files: {
+                fieldtype: "number",
+                __order: 0,
+            },
+            file_creation_options: file_creation_options_field_spec,
+        },
+    },
+};

package/dist/form-fields/fileserver.d.ts

@@ -1,6 +1,6 @@
 import type { Writable } from "svelte/store";
-import type { IFormDependencies } from "./interfaces";
-export declare const uploadFiles: (files: File[], dependencies?: IFormDependencies) => Promise<{
+import type { IFileCreationOptions, IFormDependencies } from "./interfaces";
+export declare const uploadFiles: (files: File[], dependencies?: IFormDependencies, file_creation_options?: IFileCreationOptions) => Promise<{
     uploaded_files: UploadedFile[];
     failed_files: File[];
 } | undefined>;

package/dist/form-fields/fileserver.js

@@ -1,8 +1,9 @@
+import { cloneDeep, isEmpty } from "lodash-es";
 // export interface ExtendedFile extends File {
 //   path?: string; //for webkitdirectory, dont know svelte-file-dropzone has this apparently
 //   filename?: string; //from fileserver after upload
 // }
-export const uploadFiles = async (files, dependencies) => {
+export const uploadFiles = async (files, dependencies, file_creation_options) => {
     if (!dependencies?.file?.upload_url)
         return;
     const url = dependencies.file.upload_url;
@@ -12,14 +13,19 @@ export const uploadFiles = async (files, dependencies) => {
     files.forEach((file) => {
         filesForm.append(file.name, file);
     });
+    const headers = {};
+    const merged_file_creation_options = merge_with_delete(cloneDeep(dependencies?.file_creation_options) ?? {}, file_creation_options ?? {});
+    if (!isEmpty(merged_file_creation_options)) {
+        headers["file-creation-options"] = JSON.stringify(merged_file_creation_options);
+    }
     //send request
     let resJSON;
     try {
         let res = await fetch(url, {
             method: "POST",
             body: filesForm,
+            headers,
         });
-        //   resJSON = await utils.rawResToJSON(res);
         if (res.ok) {
             resJSON = await res.json();
         }
@@ -50,3 +56,39 @@ export const remove_attachment = (fileuuid, attachment_store) => {
         return atts;
     });
 };
+/**
+ * Converts a nested object into a flat object with dot notation keys.
+ */
+function flatten(obj, prefix = "") {
+    return Object.entries(obj).reduce((acc, [key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+            Object.assign(acc, flatten(value, path));
+        }
+        else {
+            acc[path] = value;
+        }
+        return acc;
+    }, {});
+}
+function merge_with_delete(target, source) {
+    if (!source)
+        return target;
+    for (const [key, value] of Object.entries(source)) {
+        if (value === null) {
+            delete target[key];
+        }
+        else if (value &&
+            typeof value === "object" &&
+            !Array.isArray(value) &&
+            target[key] &&
+            typeof target[key] === "object" &&
+            !Array.isArray(target[key])) {
+            merge_with_delete(target[key], value);
+        }
+        else {
+            target[key] = value;
+        }
+    }
+    return target;
+}

package/dist/form-fields/interfaces.d.ts

@@ -128,6 +128,19 @@ export declare const fields: {
     screenrecorder: typeof ScreenrecorderField;
     code: typeof CodeField;
 };
+interface IPolicy {
+    after_creation_minutes?: number;
+    after_access_minutes?: number;
+}
+interface ILifecycle {
+    archive?: IPolicy;
+    delete?: IPolicy;
+}
+export interface IFileCreationOptions {
+    visibility?: "public" | "private";
+    folder?: string;
+    lifecycle?: ILifecycle;
+}
 export interface IFormDependencies {
     file?: {
         upload_url: string;
@@ -144,6 +157,7 @@ export interface IFormDependencies {
         orguuid: string;
         stubref?: string;
     };
+    file_creation_options?: IFileCreationOptions;
     [key: string]: any;
 }
 export interface IInitialForm {
@@ -205,3 +219,4 @@ export interface IValidationResult {
     type: "error" | "info";
     message: string;
 }
+export {};

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

@@ -35,10 +35,10 @@ const field_params_spec_lookup = {
   objectbuilder: object_builder_field_param_spec,
   qrcodescanner: null,
   radio: radio_field_param_spec,
-  screenrecorder: max_files_param_spec,
-  screenshot: max_files_param_spec,
-  voicenote: max_files_param_spec,
-  signature: null,
+  screenrecorder: basic_files_field_param_spec,
+  screenshot: basic_files_field_param_spec,
+  voicenote: basic_files_field_param_spec,
+  signature: signature_field_param_spec,
   scrollandreaddisplay: scroll_and_read_display_field_param_spec,
   section: null,
   // todo: fields for section
@@ -80,11 +80,12 @@ import { multi_checkbox_field_param_spec } from "./multi-checkbox-field.svelte";
 import { number_field_param_spec } from "./number-field.svelte";
 import { object_builder_field_param_spec } from "./object-builder-field.svelte";
 import { radio_field_param_spec } from "./radio-field.svelte";
-import { max_files_param_spec } from "./screenrecorder-field.svelte";
 import { scroll_and_read_display_field_param_spec } from "./scroll-and-read-display-field.svelte";
 import { select_field_param_spec } from "./select-field.svelte";
 import { select_resource_field_param_spec } from "./selectresource-field.svelte";
 import { handle_editor_change_setter, handle_store_change } from "../../utils/json-editor-sync";
+import { basic_files_field_param_spec } from "../file_creation_options";
+import { signature_field_param_spec } from "./signature-field.svelte";
 export let fieldStore;
 let value = cloneDeep($fieldStore.value) || {
   details: {},

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

@@ -1,10 +1,13 @@
-<script context="module">import {} from "../interfaces";
+<script context="module">import {
+} from "../interfaces";
 export const file_field_param_spec = {
   spec: {
     fields: {
       max_files: {
-        fieldtype: "number"
-      }
+        fieldtype: "number",
+        __order: 0
+      },
+      file_creation_options: file_creation_options_field_spec
     }
   }
 };
@@ -16,6 +19,7 @@ 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;
@@ -32,7 +36,11 @@ async function handle_files_select(e) {
       f_id: Math.random().toString(36).substring(7)
     }))
   ];
-  const upload_res = await uploadFiles(acceptedFiles, $fieldStore.formDependencies);
+  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: []
@@ -80,6 +88,7 @@ $: all_files = [
 ];
 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);

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

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+import { type IBaseField, type IBuiltField, type IFileCreationOptions, type IInitialForm } from "../interfaces";
 export interface IFileFieldParams {
     max_files?: number;
+    file_creation_options?: IFileCreationOptions;
 }
 export interface IFileField extends IBaseField<IFileFieldParams> {
     fieldtype: "file";

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

@@ -1,17 +1,8 @@
 <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 { snakeCase } from "lodash-es";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import {
@@ -26,6 +17,7 @@ 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 = () => {
@@ -78,7 +70,11 @@ async function uploadFile(file, blob, filename) {
       is_failed: false
     }
   ];
-  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  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;
@@ -130,7 +126,7 @@ function removeFile(item) {
 </script>
 
 <FieldLabel {fieldStore} />
-<div class="flex flex-col gap-2 items-start">
+<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" />
@@ -139,10 +135,10 @@ function removeFile(item) {
     {/if}
     {buttonLabel}
   </Button>
-  <div class="flex flex-col gap-1 w-full">
+  <div class="flex w-full flex-col gap-1">
     {#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">
+      <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}
@@ -154,7 +150,7 @@ function removeFile(item) {
 
         {#if item?.blob}
           <div class="shrink p-2">
-            <div class="overflow-hidden relative max-w-[200px]">
+            <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" />
@@ -162,15 +158,15 @@ function removeFile(item) {
             </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">
+          <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 p-0 shrink-0"
+          class="h-6 w-6 shrink-0 p-0"
           on:click={() => removeFile(item)}
         >
           <i class="fa-solid fa-2xs fa-x" />

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+import { type IBaseField, type IBuiltField, type IFileCreationOptions } from "../interfaces";
 interface IScreenRecorderFieldParams {
     max_files?: number | string;
+    file_creation_options?: IFileCreationOptions;
 }
-export declare const max_files_param_spec: IInitialForm;
 export interface IScreenRecorderField extends IBaseField<IScreenRecorderFieldParams> {
     fieldtype: "screenrecorder";
 }

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

@@ -16,6 +16,7 @@ let fileList = [];
 let isRecording = false;
 $: buttonLabel = isRecording ? "Cancel" : "Take screenshot";
 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 = () => {
@@ -72,7 +73,11 @@ async function uploadFile(file, filename) {
       is_failed: false
     }
   ];
-  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  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;
@@ -124,7 +129,7 @@ function removeFile(item) {
 </script>
 
 <FieldLabel {fieldStore} />
-<div class="flex flex-col gap-2 items-start">
+<div class="flex flex-col items-start gap-2">
   <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
     {#if isRecording}
       <i class="fa-solid fa-camera-slash" />
@@ -133,10 +138,10 @@ function removeFile(item) {
     {/if}
     {buttonLabel}
   </Button>
-  <div class="flex flex-col gap-1 w-full">
+  <div class="flex w-full flex-col gap-1">
     {#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">
+      <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}
@@ -146,14 +151,14 @@ function removeFile(item) {
           {/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">
+        <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>
         <Button
           variant="destructive"
-          class="h-6 w-6 p-0 shrink-0"
+          class="h-6 w-6 shrink-0 p-0"
           on:click={() => removeFile(item)}
         >
           <i class="fa-solid fa-2xs fa-x" />

package/dist/form-fields/sub/screenshot-field.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-import { type IBaseField, type IBuiltField } from "../interfaces";
+import { type IBaseField, type IBuiltField, type IFileCreationOptions } from "../interfaces";
 interface IScreenshotFieldParams {
     max_files?: number | string;
+    file_creation_options?: IFileCreationOptions;
 }
 export interface IScreenshotField extends IBaseField<IScreenshotFieldParams> {
     fieldtype: "screenshot";

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

@@ -1,4 +1,12 @@
-<script context="module">import {} from "../interfaces";
+<script context="module">import {
+} from "../interfaces";
+export const signature_field_param_spec = {
+  spec: {
+    fields: {
+      file_creation_options: file_creation_options_field_spec
+    }
+  }
+};
 </script>
 
 <script>import { Textarea } from "@stubber/ui/textarea";
@@ -9,10 +17,12 @@ import FieldMessage from "../FieldMessage.svelte";
 import { onMount } from "svelte";
 import { append_attachment, remove_attachment, uploadFiles } from "../fileserver";
 import { debounce, snakeCase } from "lodash-es";
+import { file_creation_options_field_spec } from "../file_creation_options";
 export let fieldStore;
 let canvasContainer;
 let pad;
 let signaturePad;
+let file_creation_options = $fieldStore.params?.file_creation_options;
 onMount(() => {
   signaturePad = new SignaturePad(pad);
   signaturePad.addEventListener("endStroke", handleStroke);
@@ -46,7 +56,11 @@ 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 upload_res = await uploadFiles(
+    [file],
+    $fieldStore.formDependencies,
+    file_creation_options
+  );
   const { uploaded_files = [] } = upload_res || {};
   if (uploaded_files?.length) {
     const prev_file = $fieldStore.value?.file;

package/dist/form-fields/sub/signature-field.svelte.d.ts

@@ -1,12 +1,16 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-import { type IBaseField, type IBuiltField } from "../interfaces";
-export interface ISignatureField extends IBaseField<{}> {
+import { type IBaseField, type IBuiltField, type IFileCreationOptions, type IInitialForm } from "../interfaces";
+interface ISignatureFieldParams {
+    file_creation_options?: IFileCreationOptions;
+}
+export interface ISignatureField extends IBaseField<ISignatureFieldParams> {
     fieldtype: "signature";
 }
+export declare const signature_field_param_spec: IInitialForm;
 declare const __propDef: {
     props: {
-        fieldStore: Writable<IBuiltField>;
+        fieldStore: Writable<IBuiltField<ISignatureFieldParams>>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,11 +1,10 @@
 <script context="module">import {} from "../interfaces";
 </script>
 
-<script>import { Textarea } from "@stubber/ui/textarea";
-import { Button } from "@stubber/ui/button";
+<script>import { Button } from "@stubber/ui/button";
+import { snakeCase } from "lodash-es";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
-import { snakeCase } from "lodash-es";
 import {
   append_attachment,
   remove_attachment,
@@ -19,6 +18,7 @@ let fileList = [];
 $: 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 = () => {
@@ -58,7 +58,11 @@ async function uploadFile(file, blob, filename) {
       is_failed: false
     }
   ];
-  const upload_res = await uploadFiles([file], $fieldStore.formDependencies);
+  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;
@@ -113,7 +117,7 @@ function removeFile(item) {
 </script>
 
 <FieldLabel {fieldStore} />
-<div class="flex flex-col gap-2 items-start">
+<div class="flex flex-col items-start gap-2">
   <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
     {#if isRecording}
       <i class="fa-solid fa-microphone-slash" />
@@ -122,10 +126,10 @@ function removeFile(item) {
     {/if}
     {buttonLabel}
   </Button>
-  <div class="flex flex-col gap-1 w-full">
+  <div class="flex w-full flex-col gap-1">
     {#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">
+      <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}
@@ -135,21 +139,21 @@ function removeFile(item) {
           {/if}
         </div>
         {#if item?.blob}
-          <div class="shrink p-2 w-full">
+          <div class="w-full shrink p-2">
             <div class="overflow-hidden">
               <audio class="w-full" controls src={window.URL.createObjectURL(item.blob)} />
             </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">
+          <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 p-0 shrink-0"
+          class="h-6 w-6 shrink-0 p-0"
           on:click={() => removeFile(item)}
         >
           <i class="fa-solid fa-2xs fa-x" />

package/dist/form-fields/sub/voicenote-field.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-import { type IBaseField, type IBuiltField } from "../interfaces";
+import { type IBaseField, type IBuiltField, type IFileCreationOptions } from "../interfaces";
 interface IVoicenoteFieldParams {
     max_files?: number | string;
+    file_creation_options?: IFileCreationOptions;
 }
 export interface IVoicenoteField extends IBaseField<IVoicenoteFieldParams> {
     fieldtype: "voicenote";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",