@stubber/form-fields 2.2.6 → 3.0.0

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

@@ -0,0 +1,284 @@
+<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 { isEmpty, isEqual, isUndefined } 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 { file_creation_options_field_spec } from "../file_creation_options";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$: validation_result = $fieldStore.validation_result;
+$: validation_type = validation_result?.type;
+async function handle_files_select(acceptedFiles) {
+  if (acceptedFiles.length === 0) return;
+  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) => ({
+    ...f,
+    f_id: Math.random().toString(36).substring(7)
+  }));
+  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 = [];
+}
+function handle_input(event) {
+  const input = event.currentTarget;
+  void handle_files_select(Array.from(input.files ?? []));
+  input.value = "";
+}
+let drag_depth = 0;
+let is_dragging = false;
+function handle_dragenter(event) {
+  if (limit_remaining <= 0 || !event.dataTransfer?.types.includes("Files")) return;
+  drag_depth += 1;
+  is_dragging = true;
+}
+function handle_dragleave() {
+  drag_depth = Math.max(0, drag_depth - 1);
+  if (drag_depth === 0) is_dragging = false;
+}
+function handle_drop(event) {
+  drag_depth = 0;
+  is_dragging = false;
+  if (limit_remaining <= 0) return;
+  void handle_files_select(Array.from(event.dataTransfer?.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>
+
+<div class="file-field">
+  <FieldLabel {fieldStore} />
+  <div class="file-control" class:file-control-invalid={validation_type === "error"}>
+    <label
+      class={classNames("file-dropzone", $styles.dropzone)}
+      class:file-dropzone-active={is_dragging}
+      class:file-dropzone-disabled={limit_remaining <= 0}
+      data-dragging={is_dragging ? true : undefined}
+      data-disabled={limit_remaining <= 0 ? true : undefined}
+      data-invalid={validation_type === "error" ? true : undefined}
+      on:dragenter={handle_dragenter}
+      on:dragover|preventDefault
+      on:dragleave={handle_dragleave}
+      on:drop|preventDefault={handle_drop}
+    >
+      <input
+        id={$fieldStore.id}
+        class="file-input"
+        type="file"
+        multiple
+        disabled={limit_remaining <= 0}
+        aria-invalid={validation_type === "error" ? true : undefined}
+        aria-describedby="message-{$fieldStore.id}"
+        on:change={handle_input}
+      />
+      <span class="file-prompt">Drop files here</span>
+      <span class="file-hint">or click to browse</span>
+      {#if limit_remaining <= 0}
+        <span class="file-limit">You have reached the maximum number of files allowed</span>
+      {/if}
+    </label>
+
+    <ul class="file-list" aria-live="polite">
+      {#each all_files as item (item.f_id)}
+        <li class={classNames("file-item", $styles.uploadItem)}>
+          <div class="file-status">
+            <UploadStatus
+              status={item.is_uploaded ? "uploaded" : item.is_failed ? "failed" : "uploading"}
+            />
+          </div>
+          <span class="file-filename">{item.filename}</span>
+          <button
+            type="button"
+            class={classNames("file-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            aria-label="Remove {item.filename}"
+            on:click={() => remove_file(item)}
+          >
+            ×
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .file-field,
+  .file-control,
+  :where(.file-dropzone),
+  .file-input,
+  .file-list {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :where(.file-dropzone) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 6rem;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .file-control,
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :where(.file-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);
+  }
+
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .file-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .file-prompt {
+    font-weight: 600;
+  }
+
+  .file-hint,
+  .file-limit {
+    font-size: 0.875em;
+  }
+
+  .file-dropzone-disabled {
+    cursor: not-allowed;
+  }
+
+  .file-filename {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .file-status,
+  :where(.file-remove) {
+    flex: none;
+  }
+
+  .file-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .file-status-text {
+    font-size: 0.875em;
+    font-weight: 600;
+  }
+
+  @media (max-width: 30rem) {
+    .file-status-text {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+    }
+  }
+</style>

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

@@ -14,6 +14,8 @@ declare const __propDef: {
         fieldStore: Writable<IBuiltField<IFileFieldParams>>;
     };
     events: {
+        dragover: DragEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -0,0 +1,152 @@
+<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 { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$: columns = ($fieldStore.params?.columnDefs ?? []).filter(
+  (column) => typeof column.field === "string"
+);
+$: rows = Array.isArray($fieldStore.value) ? $fieldStore.value : [];
+function get_value(row, field) {
+  return field.split(".").reduce((value, key) => value?.[key], row);
+}
+function set_value(row, field, value) {
+  const nextRow = { ...row };
+  const keys = field.split(".");
+  let target = nextRow;
+  let source = row;
+  keys.slice(0, -1).forEach((key) => {
+    target[key] = { ...source?.[key] ?? {} };
+    target = target[key];
+    source = source?.[key];
+  });
+  target[keys[keys.length - 1]] = value;
+  return nextRow;
+}
+function input_type(column, value) {
+  if (column.cellDataType === "boolean" || typeof value === "boolean") return "checkbox";
+  if (column.cellDataType === "number" || column.type === "number" || typeof value === "number") {
+    return "number";
+  }
+  return "text";
+}
+function update_cell(rowIndex, column, event) {
+  const input = event.currentTarget;
+  const currentValue = get_value(rows[rowIndex], column.field);
+  let value = input.value;
+  if (input.type === "checkbox") value = input.checked;
+  if (input.type === "number") value = input.value === "" ? "" : input.valueAsNumber;
+  if (typeof column.valueParser === "function") {
+    value = column.valueParser({
+      newValue: value,
+      oldValue: currentValue,
+      data: rows[rowIndex],
+      colDef: column
+    });
+  }
+  $fieldStore.value = rows.map(
+    (row, index) => index === rowIndex ? set_value(row, column.field, value) : row
+  );
+}
+function display_value(row, column) {
+  const value = get_value(row, column.field);
+  if (typeof column.valueFormatter === "function") {
+    return column.valueFormatter({ value, data: row, colDef: column });
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return value ?? "";
+}
+</script>
+
+<div class="grid-field" class:grid-field-invalid={$fieldStore.validation_result?.type === "error"}>
+  <FieldLabel {fieldStore} />
+  <div class="grid-viewport">
+    <table id={$fieldStore.id} class="grid-table" aria-describedby={`message-${$fieldStore.id}`}>
+      <thead class="grid-head">
+        <tr class="grid-row">
+          {#each columns as column (column.field)}
+            <th class="grid-header" scope="col">{column.headerName ?? column.field}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody class="grid-body">
+        {#each rows as row, rowIndex}
+          <tr class="grid-row">
+            {#each columns as column (column.field)}
+              <td class="grid-cell">
+                {#if column.editable === true}
+                  <input
+                    class={classNames(
+                      "grid-input",
+                      input_type(column, get_value(row, column.field)) === "checkbox"
+                        ? $styles.choice
+                        : $styles.input
+                    )}
+                    type={input_type(column, get_value(row, column.field))}
+                    value={input_type(column, get_value(row, column.field)) === "checkbox"
+                      ? undefined
+                      : get_value(row, column.field) ?? ""}
+                    checked={input_type(column, get_value(row, column.field)) === "checkbox"
+                      ? Boolean(get_value(row, column.field))
+                      : undefined}
+                    aria-label={`${column.headerName ?? column.field}, row ${rowIndex + 1}`}
+                    aria-invalid={$fieldStore.validation_result?.type === "error"
+                      ? true
+                      : undefined}
+                    aria-describedby={`message-${$fieldStore.id}`}
+                    on:input={(event) => update_cell(rowIndex, column, event)}
+                    on:change={(event) => update_cell(rowIndex, column, event)}
+                  />
+                {:else}
+                  {display_value(row, column)}
+                {/if}
+              </td>
+            {/each}
+          </tr>
+        {:else}
+          <tr class="grid-row">
+            <td class="grid-empty" colspan={Math.max(columns.length, 1)}>No rows.</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .grid-field,
+  .grid-viewport,
+  .grid-table {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .grid-viewport {
+    overflow-x: auto;
+  }
+
+  :where(.grid-input) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>

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

@@ -13,16 +13,19 @@ export const heading_field_param_spec = {
 };
 </script>
 
-<script>export let fieldStore;
+<script>import { getContext } from "svelte";
+import { STYLES_CONTEXT } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 $: heading_text = $fieldStore?.params?.heading_text;
 $: subheading_text = $fieldStore?.params?.subheading_text;
 </script>
 
-<div class="flex flex-col w-full mb-2">
+<div class="heading-field">
   {#if heading_text}
-    <h1 class="text-xl text-black tracking-tight font-semibold mt-4">{heading_text}</h1>
+    <h1 class="heading-title">{heading_text}</h1>
   {/if}
   {#if subheading_text}
-    <h2 class="text-sm text-surface-500 whitespace-pre-wrap">{subheading_text}</h2>
+    <h2 class="heading-subtitle">{subheading_text}</h2>
   {/if}
 </div>

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

@@ -10,12 +10,14 @@ export const html_field_param_spec = {
 };
 </script>
 
-<script>export let fieldStore;
-let params = $fieldStore.params;
-$: html = params?.html;
+<script>import { getContext } from "svelte";
+import { STYLES_CONTEXT } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$: html = $fieldStore.params?.html;
 </script>
 
-<div class="w-full">
+<div class="html-field">
   {#if html}
     {@html html}
   {/if}