@stubber/form-fields 2.2.6 → 3.0.0

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

@@ -0,0 +1,255 @@
+<script context="module">import {} from "../interfaces";
+</script>
+
+<script>import { getContext, onDestroy } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import UploadStatus from "../UploadStatus.svelte";
+import {
+  append_attachment,
+  remove_attachment,
+  uploadFiles
+} from "../fileserver";
+import ScreenRecordingIcon from "../icons/ScreenRecordingIcon.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+let fileList = [];
+let mediaRecorder = null;
+let captureStreams = [];
+$: 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;
+function stopCaptureStreams() {
+  captureStreams.forEach((stream) => stream.getTracks().forEach((track) => track.stop()));
+  captureStreams = [];
+}
+onDestroy(() => {
+  if (mediaRecorder?.state === "recording") {
+    mediaRecorder.onstop = null;
+    mediaRecorder.stop();
+  }
+  stopCaptureStreams();
+  fileList.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+});
+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,
+    video: true
+  });
+  const audiostream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  captureStreams = [stream, audiostream];
+  const combine = new MediaStream([...stream.getVideoTracks(), ...audiostream.getAudioTracks()]);
+  const recorder = new MediaRecorder(combine, { mimeType: "video/webm;codecs=vp9" });
+  mediaRecorder = recorder;
+  const media = [];
+  recorder.ondataavailable = (e) => media.push(e.data);
+  recorder.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, URL.createObjectURL(blob));
+    stopCaptureStreams();
+    mediaRecorder = null;
+  };
+  recorder.start();
+}
+function stopRecording() {
+  mediaRecorder?.stop();
+}
+async function uploadFile(file, blob, filename, previewUrl) {
+  fileList = [
+    ...fileList,
+    {
+      file,
+      blob,
+      filename,
+      previewUrl,
+      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,
+      previewUrl: f.previewUrl || (f.blob ? URL.createObjectURL(f.blob) : void 0),
+      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);
+  if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+  remove_attachment(item.fileuuid, $fieldStore.attachmentsStore);
+}
+</script>
+
+<div class="screenrecorder-field">
+  <FieldLabel {fieldStore} />
+  <div
+    class="screenrecorder-control"
+    class:screenrecorder-control-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <div class="screenrecorder-list" aria-live="polite">
+      {#each fileList as item}
+        <div class={classNames("screenrecorder-item", $styles.uploadItem)}>
+          <UploadStatus
+            status={item.is_uploaded ? "uploaded" : item.is_failed ? "failed" : "uploading"}
+          />
+          {#if item.previewUrl}
+            <video class="screenrecorder-preview" controls src={item.previewUrl}>
+              <track kind="captions" />
+            </video>
+          {:else}
+            <p class="screenrecorder-filename">{item?.filename}</p>
+          {/if}
+          <button
+            type="button"
+            class={classNames("screenrecorder-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            aria-label="Remove {item.filename}"
+            on:click={() => removeFile(item)}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+      {/each}
+    </div>
+    <button
+      id={$fieldStore.id}
+      type="button"
+      class={classNames("screenrecorder-record", $styles.button)}
+      data-variant="primary"
+      class:screenrecorder-record-active={isRecording}
+      aria-pressed={isRecording}
+      aria-describedby="message-{$fieldStore.id}"
+      on:click={toggleRecording}
+    >
+      <span class="screenrecorder-icon" aria-hidden="true">
+        {#if isRecording}
+          ■
+        {:else}
+          <ScreenRecordingIcon />
+        {/if}
+      </span>
+      {buttonLabel}
+    </button>
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .screenrecorder-field,
+  .screenrecorder-control,
+  .screenrecorder-list {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .screenrecorder-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .screenrecorder-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :where(.screenrecorder-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: var(--form-upload-item-padding, 0.625rem 0.75rem);
+    border: var(--form-upload-item-border, 1px solid #e2e8f0);
+    border-radius: var(--form-upload-item-radius, 0.5rem);
+    background: var(--form-upload-item-background, #fff);
+  }
+
+  .screenrecorder-preview,
+  .screenrecorder-filename {
+    flex: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .screenrecorder-filename {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.screenrecorder-record) {
+    align-self: flex-start;
+  }
+
+  :where(.screenrecorder-remove) {
+    flex: none;
+  }
+</style>

package/dist/form-fields/{sub → fields}/screenshot-field.svelte

@@ -1,16 +1,20 @@
 <script context="module">import {} from "../interfaces";
 </script>
 
-<script>import { Button } from "@stubber/ui/button";
-import { snakeCase } from "lodash-es";
+<script>import { snakeCase } from "lodash-es";
+import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import UploadStatus from "../UploadStatus.svelte";
 import {
   append_attachment,
   remove_attachment,
   uploadFiles
 } from "../fileserver";
+import ScreenshotIcon from "../icons/ScreenshotIcon.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 const file_name_prefix = snakeCase($fieldStore.label || "Screenshot");
 let fileList = [];
 let isRecording = false;
@@ -39,7 +43,7 @@ async function startRecording() {
     return;
   }
   const stream = await navigator.mediaDevices.getDisplayMedia({
-    video: { mediaSource: "screen" }
+    video: true
   });
   const track = stream.getVideoTracks()[0];
   const imageCapture = new ImageCapture(track);
@@ -128,43 +132,100 @@ function removeFile(item) {
 }
 </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-camera-slash" />
-    {:else}
-      <i class="fa-solid fa-camera" />
-    {/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 class="screenshot-field">
+  <FieldLabel {fieldStore} />
+  <div
+    class="screenshot-control"
+    class:screenshot-control-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <div class="screenshot-list" aria-live="polite">
+      {#each fileList as item}
+        <div class={classNames("screenshot-item", $styles.uploadItem)}>
+          <UploadStatus
+            status={item.is_uploaded ? "uploaded" : item.is_failed ? "failed" : "uploading"}
+          />
+          <p class="screenshot-filename">{item?.filename}</p>
+          <button
+            type="button"
+            class={classNames("screenshot-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            aria-label="Remove {item.filename}"
+            on:click={() => removeFile(item)}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
         </div>
-
-        <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 shrink-0 p-0"
-          on:click={() => removeFile(item)}
-        >
-          <i class="fa-solid fa-2xs fa-x" />
-        </Button>
-      </div>
-    {/each}
+      {/each}
+    </div>
+    <button
+      id={$fieldStore.id}
+      type="button"
+      class={classNames("screenshot-capture", $styles.button)}
+      data-variant="primary"
+      class:screenshot-capture-active={isRecording}
+      aria-pressed={isRecording}
+      aria-describedby="message-{$fieldStore.id}"
+      on:click={toggleRecording}
+    >
+      <span class="screenshot-icon" aria-hidden="true">
+        {#if isRecording}
+          ×
+        {:else}
+          <ScreenshotIcon />
+        {/if}
+      </span>
+      {buttonLabel}
+    </button>
   </div>
+  <FieldMessage {fieldStore} />
 </div>
-<FieldMessage {fieldStore} />
+
+<style>
+  .screenshot-field,
+  .screenshot-control,
+  .screenshot-list {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .screenshot-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .screenshot-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :where(.screenshot-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: var(--form-upload-item-padding, 0.625rem 0.75rem);
+    border: var(--form-upload-item-border, 1px solid #e2e8f0);
+    border-radius: var(--form-upload-item-radius, 0.5rem);
+    background: var(--form-upload-item-background, #fff);
+  }
+
+  .screenshot-filename {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.screenshot-capture) {
+    align-self: flex-start;
+  }
+
+  :where(.screenshot-remove) {
+    flex: none;
+  }
+</style>

package/dist/form-fields/{sub → fields}/scroll-and-read-display-field.svelte

@@ -17,26 +17,23 @@ export const scroll_and_read_display_field_param_spec = {
 };
 </script>
 
-<script>import { Checkbox } from "@stubber/ui/checkbox";
-import { Label } from "@stubber/ui/label";
-import { isEqual } from "lodash-es";
+<script>import { isEqual } from "lodash-es";
+import { getContext, onMount } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 import { set_value_details } from "../utils";
-import { onMount } from "svelte";
-import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 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;
+const handle_checked_change = (event) => {
+  const new_checked = event.currentTarget.checked;
+  $fieldStore.value = new_checked ? yes_value : no_value;
 };
 let outer;
 const handle_scroll = (event) => {
@@ -60,33 +57,52 @@ const update_value_details = (new_value) => {
 };
 </script>
 
-<div class="my-2 flex w-full flex-col text-surface-900">
-  <!-- div with inner shadow -->
+<div class="scroll-and-read-field">
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     bind:this={outer}
-    class="max-h-[300px] overflow-y-scroll rounded-md border shadow-inner"
+    class="scroll-and-read-content"
+    role="region"
+    aria-label="{$fieldStore.label} content"
+    tabindex="0"
     on:scroll={handle_scroll}
   >
-    <div class="p-6 px-2">
-      {@html displaytext}
-    </div>
+    {@html displaytext}
   </div>
   <div
-    class="{!scrolled_to_bottom
-      ? 'opacity-20'
-      : ''} relative mt-2 flex items-center gap-x-2 {is_error ? 'border-b border-warning-500' : ''}"
+    class="scroll-and-read-confirmation"
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
   >
-    <Checkbox
+    <input
+      class={classNames("scroll-and-read-input", $styles.choice)}
       disabled={!scrolled_to_bottom}
-      id="input_{$fieldStore.id}"
+      id={$fieldStore.id}
       name={$fieldStore.id}
+      type="checkbox"
       {checked}
-      onCheckedChange={handle_checked_change}
+      aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
+      on:change={handle_checked_change}
     />
-    <Label for="input_{$fieldStore.id}" class="block">
-      {$fieldStore.label}
-    </Label>
-    <FieldExprToggle {fieldStore} />
+    <FieldLabel {fieldStore} with_margin={false} />
   </div>
   <FieldMessage {fieldStore} />
 </div>
+
+<style>
+  .scroll-and-read-field {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .scroll-and-read-content {
+    max-height: 20rem;
+    overflow-y: auto;
+  }
+
+  .scroll-and-read-confirmation {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,73 @@
+<script context="module">import { get as get_store_value } from "svelte/store";
+</script>
+
+<script>import { getContext } from "svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import FormField from "../form-field.svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
+import CollapsibleSection from "../CollapsibleSection.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+import { validate_field } from "../validations/validate_field";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+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 { errors } = await validate_field(field.formStore, sub_field);
+      if (errors.length > 0) {
+        section_has_errors = true;
+      }
+    }
+  }
+};
+</script>
+
+<section
+  class={classNames("section-field", $styles.group)}
+  class:section-field-invalid={section_has_errors}
+  data-invalid={section_has_errors ? true : undefined}
+  aria-labelledby="label-{$fieldStore.id}"
+>
+  <CollapsibleSection
+    title={$fieldStore.label}
+    bind:open
+    contentId="content-{$fieldStore.id}"
+    labelledBy="label-{$fieldStore.id}"
+  >
+    <div slot="heading" class="section-heading">
+      <span id="label-{$fieldStore.id}" class={classNames("section-label", $styles.label)}
+        >{$fieldStore.label}</span
+      >
+      <FieldMessage {fieldStore} />
+    </div>
+    <div slot="actions" class="section-actions">
+      <FieldExprToggle {fieldStore} />
+    </div>
+    {#each $fieldStore.sub_fields || [] as sub_field (get_store_value(sub_field).id)}
+      <FormField fieldStore={sub_field} />
+    {/each}
+  </CollapsibleSection>
+</section>
+
+<style>
+  .section-field {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .section-heading {
+    min-width: 0;
+  }
+
+  .section-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: none;
+  }
+</style>