@stubber/form-fields 1.7.8 → 1.8.0

package/dist/fields/components/File.svelte

@@ -1,231 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import Dropzone from "svelte-file-dropzone";
-  import _ from "lodash-es";
-  import { deepEqual } from "fast-equals";
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { writable } from "svelte/store";
-
-  import { Input } from "@stubber/ui/input";
-  import { Label } from "@stubber/ui/label";
-  import { Button } from "@stubber/ui/button";
-
-  export let form;
-  export let field;
-
-  const internal = writable({});
-
-  $: state_key = $field.state?.state_key;
-  $: label = $field.spec?.title;
-  $: hide_label = $field.spec?.hide_label;
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-  $: max_files = isNaN(parseInt($field.spec?.params?.max_files))
-    ? Infinity
-    : parseInt($field.spec?.params?.max_files);
-  $: limit_remaining =
-    max_files - ($internal?.selected_files?.length ?? 0) - ($internal?.uploaded_files?.length ?? 0);
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      selected_files: [],
-      uploaded_files: initial_value,
-      failed_files: [],
-    };
-
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
-
-        // get parts from data
-        let files = _.isArray(a?.data?.base) ? a?.data?.base : [];
-        _clone.uploaded_files = files;
-
-        // set field state if changed
-        if (!deepEqual(a?.state?.internal, _clone)) {
-          $field.state.internal = _clone;
-        }
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        _.set(_clone, "data.base", b?.uploaded_files);
-        return _clone;
-      }
-    );
-  });
-
-  async function handleFilesSelect(e) {
-    const { acceptedFiles, fileRejections } = e.detail;
-    let comparison = _.cloneDeep($internal);
-    let batch = _.cloneDeep(
-      acceptedFiles.map((a) => {
-        return {
-          ...a,
-          f_id: Math.random().toString(36).substring(7),
-        };
-      })
-    );
-    if (limit_remaining < batch.length) {
-      alert("You have reached the maximum number of files allowed");
-      return;
-    }
-    comparison.selected_files = comparison.selected_files.concat(batch);
-    comparison.failed_files = comparison.failed_files.concat(_.cloneDeep(fileRejections));
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    let upload_res = await form.uploadFiles(acceptedFiles);
-    let { uploaded_files, failed_files } = upload_res;
-
-    let comparison2 = _.cloneDeep($internal);
-    if (_.isArray(uploaded_files)) {
-      uploaded_files.forEach((a) => {
-        a.f_id = batch.find((f) => f.path === a.filename).f_id;
-        form.appendAttachment(a);
-      });
-      comparison2.uploaded_files = comparison2.uploaded_files.concat(uploaded_files);
-    }
-
-    if (_.isArray(failed_files)) {
-      failed_files.forEach((a) => {
-        a.f_id = batch.find((f) => f.path === a.filename).f_id;
-      });
-      comparison2.failed_files = comparison2.failed_files.concat(failed_files);
-    }
-
-    let batch_ids = batch.map((b) => b.f_id);
-
-    comparison2.selected_files = comparison2.selected_files.filter((f) => {
-      return !batch_ids.includes(f.f_id);
-    });
-
-    if (!deepEqual(comparison2, $internal)) {
-      $internal = comparison2;
-    }
-  }
-
-  function removeFile(item) {
-    let comparison = _.cloneDeep($internal);
-
-    comparison.selected_files = comparison.selected_files?.filter((f) => f.f_id !== item.file.f_id);
-    comparison.failed_files = comparison.failed_files?.filter((f) => f.f_id !== item.file.f_id);
-    comparison.uploaded_files = comparison.uploaded_files?.filter((f) => f.f_id !== item.file.f_id);
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    if (item?.is_uploaded) {
-      form.removeAttachment(item?.file);
-    }
-  }
-
-  $: fileList = (
-    ($internal?.uploaded_files || [])?.map((f) => {
-      return {
-        file: f,
-        is_uploaded: true,
-      };
-    }) || []
-  )
-    .concat(
-      $internal?.selected_files?.map((f) => {
-        return {
-          file: f,
-          is_selected: true,
-        };
-      }) || []
-    )
-    .concat(
-      $internal?.failed_files?.map((f) => {
-        return {
-          file: f,
-          is_failed: true,
-        };
-      }) || []
-    );
-</script>
-
-{#if $internal}
-  <Label for="input_{state_key}" class="block py-2 text-surface-900 {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  <div class="w-full flex flex-col {!isValid ? 'border-b border-warning-500' : ''}">
-    <Dropzone on:drop={handleFilesSelect} disabled={limit_remaining <= 0}>
-      <div class="flex justify-center h-full flex-col text-center rounded-sm">
-        <div>
-          <p class=" text-surface-800">Drop files to upload</p>
-          <p class=" text-surface-800">
-            Or click <span
-              class="text-primary-500 hover:text-primary-400 hover:underline cursor-pointer"
-              >here</span
-            >
-            to browse
-          </p>
-          {#if limit_remaining <= 0}
-            <p class="text-field text-danger-600 text-sm italic">
-              You have reached the maximum number of files allowed
-            </p>
-          {/if}
-        </div>
-      </div>
-    </Dropzone>
-    <div class="w-full mt-2">
-      {#each fileList as item}
-        <div class="w-full flex flex-row">
-          {#if item.is_uploaded}
-            <div class="px-2">
-              <i class="fa fa-check text-success-500" />
-            </div>
-          {:else if item.is_failed}
-            <div class="px-2 space-x-2 flex items-center text-danger-400">
-              <i class="fa-regular fa-triangle-exclamation" />
-              <p class="hidden md:block text-fluid-md">Failed</p>
-            </div>
-          {:else}
-            <div class="px-2 space-x-2 flex items-center text-surface-500">
-              <p class="hidden md:block text-fluid-md" />
-              <i class="fa fa-pulse fa-spinner" />
-            </div>
-          {/if}
-          <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?.file?.filename ?? item?.file?.name ?? item?.file?.path}
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="destructive"
-            size="icon"
-            class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x  border-surface-0  "
-            on:click={() => {
-              removeFile(item);
-            }}
-          />
-        </div>
-      {/each}
-    </div>
-  </div>
-  {#if validationMessage}
-    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-  {/if}
-{/if}

package/dist/fields/components/File.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileProps */
-/** @typedef {typeof __propDef.events}  FileEvents */
-/** @typedef {typeof __propDef.slots}  FileSlots */
-export default class File extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileProps = typeof __propDef.props;
-export type FileEvents = typeof __propDef.events;
-export type FileSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Heading.svelte

@@ -1,17 +0,0 @@
-<script>
-  import _ from "lodash-es";
-
-  export let field;
-
-  $: heading_text = $field?.spec?.params?.heading_text;
-  $: subheading_text = $field?.spec?.params?.subheading_text;
-</script>
-
-<div class="flex flex-col w-full mb-2">
-  {#if heading_text}
-    <h1 class="text-xl text-black tracking-tight font-semibold mt-4">{heading_text}</h1>
-  {/if}
-  {#if subheading_text}
-    <h2 class="text-sm text-surface-500 whitespace-pre-wrap">{subheading_text}</h2>
-  {/if}
-</div>

package/dist/fields/components/Heading.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  HeadingProps */
-/** @typedef {typeof __propDef.events}  HeadingEvents */
-/** @typedef {typeof __propDef.slots}  HeadingSlots */
-export default class Heading extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HeadingProps = typeof __propDef.props;
-export type HeadingEvents = typeof __propDef.events;
-export type HeadingSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Hidden.svelte

@@ -1,7 +0,0 @@
-<script>
-  export let field;
-
-  $: state_key = $field.state?.state_key;
-</script>
-
-<input name={state_key} bind:value={$field.data.base} hidden />

package/dist/fields/components/Hidden.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  HiddenProps */
-/** @typedef {typeof __propDef.events}  HiddenEvents */
-/** @typedef {typeof __propDef.slots}  HiddenSlots */
-export default class Hidden extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HiddenProps = typeof __propDef.props;
-export type HiddenEvents = typeof __propDef.events;
-export type HiddenSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Hiddenlocation.svelte

@@ -1,28 +0,0 @@
-<script>
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onMount } from "svelte";
-
-  export let field;
-
-  $: state_key = $field.state?.state_key;
-
-  onMount(() => {
-    navigator.geolocation.getCurrentPosition((o) => {
-      let { latitude, longitude } = o?.coords || {};
-      if (!latitude || !longitude) return;
-
-      let base = {
-        lat: latitude,
-        lng: longitude,
-        latlng: `${latitude},${longitude}`,
-      };
-
-      if (!deepEqual(base, $field.data.base)) {
-        $field.data.base = base;
-      }
-    });
-  });
-</script>
-
-<input name={state_key} bind:value={$field.data.base} hidden />

package/dist/fields/components/Hiddenlocation.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  HiddenlocationProps */
-/** @typedef {typeof __propDef.events}  HiddenlocationEvents */
-/** @typedef {typeof __propDef.slots}  HiddenlocationSlots */
-export default class Hiddenlocation extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HiddenlocationProps = typeof __propDef.props;
-export type HiddenlocationEvents = typeof __propDef.events;
-export type HiddenlocationSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Html.svelte

@@ -1,13 +0,0 @@
-<script>
-  import _ from "lodash-es";
-
-  export let field;
-
-  $: html = $field?.spec?.params?.html;
-</script>
-
-<div class="w-full">
-  {#if html}
-    {@html html}
-  {/if}
-</div>

package/dist/fields/components/Html.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  HtmlProps */
-/** @typedef {typeof __propDef.events}  HtmlEvents */
-/** @typedef {typeof __propDef.slots}  HtmlSlots */
-export default class Html extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HtmlProps = typeof __propDef.props;
-export type HtmlEvents = typeof __propDef.events;
-export type HtmlSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Jsoneditor.svelte

@@ -1,133 +0,0 @@
-<script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onMount } from "svelte";
-  import { writable } from "svelte/store";
-  import { JSONEditor } from "svelte-jsoneditor";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let field;
-
-  const internal = writable();
-
-  $: state_key = $field.state?.state_key;
-  $: label = $field.spec?.title;
-  $: hide_label = $field.spec?.hide_label;
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-  $: readOnly = $field.spec?.params?.readonly;
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = f?.data?.base ?? null;
-    let mode = f?.state?.internal?.mode ?? "tree";
-    let content =
-      mode === "text" ? { text: JSON.stringify(initial_value) } : { json: initial_value };
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      mode,
-      content,
-    };
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
-
-        // get parts from data
-        _clone.content =
-          _clone.mode === "text"
-            ? { text: JSON.stringify(a?.data?.base) }
-            : { json: a?.data?.base };
-
-        // set field state if changed
-        if (!deepEqual(a?.state?.internal, _clone)) {
-          $field.state.internal = _clone;
-        }
-
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        try {
-          let base;
-          if (b?.mode === "text") base = JSON.parse(b?.content?.text);
-          else base = b?.content?.json;
-          _.set(_clone, "data.base", base);
-        } catch (err) {
-          console.warn("JSON parse error", err);
-        }
-        return _clone;
-      }
-    );
-  });
-</script>
-
-{#if $internal && $internal}
-  <div class="flex flex-col w-full text-surface-900 my-2 jse-theme-dark">
-    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <JSONEditor bind:content={$internal.content} {readOnly} bind:mode={$internal.mode} />
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  /* :global(.jsoneditor),
-  :global(.jsoneditor div) {
-    border-bottom-right-radius: 10px !important;
-    border-bottom-left-radius: 10px !important;
-    
-  } */
-
-  :global(.jse-button.jse-group-button) {
-    border-radius: 6px !important;
-    color: #000000 !important;
-    height: 1.5rem !important;
-    width: 3rem !important;
-    border: 0px !important;
-    margin: 5px !important;
-    padding: 12px !important;
-  }
-
-  :global(.jse-button) {
-    border-radius: 6px !important;
-    color: #000000 !important;
-    background-color: #efeff0 !important;
-  }
-
-  :global(.jse-button.jse-selected) {
-    background-color: #ffffff !important;
-    color: #000000 !important;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
-  }
-
-  :global(.jse-menu) {
-    color: #000000 !important;
-    background-color: #efeff0 !important;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    border-radius: 10px !important;
-  }
-
-  :global(.jse-navigation-bar) {
-    border-radius: 0px !important;
-  }
-</style>

package/dist/fields/components/Jsoneditor.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  JsoneditorProps */
-/** @typedef {typeof __propDef.events}  JsoneditorEvents */
-/** @typedef {typeof __propDef.slots}  JsoneditorSlots */
-export default class Jsoneditor extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type JsoneditorProps = typeof __propDef.props;
-export type JsoneditorEvents = typeof __propDef.events;
-export type JsoneditorSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};