@stubber/form-fields 1.7.8 → 1.8.0

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  TelephoneProps */
-/** @typedef {typeof __propDef.events}  TelephoneEvents */
-/** @typedef {typeof __propDef.slots}  TelephoneSlots */
-export default class Telephone extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TelephoneProps = typeof __propDef.props;
-export type TelephoneEvents = typeof __propDef.events;
-export type TelephoneSlots = 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/Text.svelte

@@ -1,107 +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 { Input } from "@stubber/ui/input";
-  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;
-  $: parse_string = $field.spec?.params?.parse_string;
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = f?.data?.base ?? "";
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      raw: initial_value,
-    };
-    _.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.raw = 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
-        const final_value = parse_string ? parse_string_value(b?.raw) : b?.raw;
-        _.set(_clone, "data.base", final_value);
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-
-  function parse_string_value(value) {
-    if (value === "true") return true;
-    if (value === "false") return false;
-
-    // convert to number if possible
-    if (!isNaN(value) && value !== "") {
-      return Number(value);
-    }
-
-    return value;
-  }
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full my-2">
-    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative rounded-md">
-      <Input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        type="text"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '}"
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class="mt-1.5 {!isValid ? `text-danger-500` : `text-success-500`}"
-        >{validationMessage}</Label
-      >
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  TextProps */
-/** @typedef {typeof __propDef.events}  TextEvents */
-/** @typedef {typeof __propDef.slots}  TextSlots */
-export default class Text extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextProps = typeof __propDef.props;
-export type TextEvents = typeof __propDef.events;
-export type TextSlots = 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/Voicenote.svelte

@@ -1,267 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { Button } from "@stubber/ui/button";
-  import _ from "lodash-es";
-  import { deepEqual } from "fast-equals";
-  import { writable } from "svelte/store";
-  import { syncStoreToStore } from "../../utils/syncing";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  const internal = writable({});
-
-  let isRecording;
-  let media = [];
-  let mediaRecorder = null;
-
-  $: 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 initializeMediaRecorder() {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    mediaRecorder = new MediaRecorder(stream);
-    mediaRecorder.ondataavailable = (e) => media.push(e.data);
-    mediaRecorder.onstop = function () {
-      let id = Math.random().toString(36).substring(7);
-      let filename = `${$field.spec?.name}_${id}.ogg`;
-      let blob = new Blob(media, { type: "audio/ogg; codecs=opus" });
-      let file = new File([blob], filename, { type: "audio/ogg; codecs=opus" });
-      uploadFile(file, blob, filename);
-      media = [];
-      mediaRecorder = null;
-    };
-  }
-
-  async function startRecording() {
-    if (limit_remaining <= 0) {
-      alert("You have reached the maximum number of files allowed");
-      return;
-    }
-    await initializeMediaRecorder();
-    mediaRecorder.start();
-  }
-
-  function stopRecording() {
-    mediaRecorder.stop();
-  }
-
-  function toggleRecording() {
-    isRecording = !isRecording;
-    if (isRecording) {
-      startRecording();
-    } else {
-      stopRecording();
-    }
-  }
-
-  async function uploadFile(file, blob, filename) {
-    let comparison = _.cloneDeep($internal);
-    let f_id = Math.random().toString(36).substring(7);
-    comparison.selected_files = comparison.selected_files || [];
-    comparison.selected_files.push({
-      blob,
-      file,
-      filename,
-      f_id,
-    });
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    let upload_res = await form.uploadFiles([file]);
-    let { uploaded_files } = upload_res || {};
-
-    let comparison2 = _.cloneDeep($internal);
-    if (_.isArray(uploaded_files)) {
-      uploaded_files.forEach((a) => {
-        a.f_id = f_id;
-        form.appendAttachment(a);
-        comparison2.uploaded_files.push(a);
-      });
-    }
-
-    if (!uploaded_files?.length) {
-      comparison2.failed_files.push({
-        file,
-        filename,
-        f_id,
-      });
-    }
-
-    comparison2.selected_files = comparison2.selected_files.filter((f) => {
-      return f.f_id !== f_id;
-    });
-
-    if (!deepEqual(comparison2, $internal)) {
-      $internal = comparison2;
-    }
-  }
-
-  function removeFile(item) {
-    let name = item?.file?.filename ?? item?.file?.name;
-    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);
-    }
-  }
-
-  async function fileToBlob(file) {
-    return new Blob([new Uint8Array(await file.arrayBuffer())], { type: file.type });
-  }
-
-  let fileList = [];
-  $: formatFileList($internal);
-  async function formatFileList(i) {
-    let { uploaded_files, selected_files, failed_files } = i;
-    let r = [];
-    for (let item of uploaded_files || []) {
-      r.push({
-        file: item,
-        filename: item.filename,
-        is_uploaded: true,
-      });
-    }
-    for (let item of selected_files || []) {
-      r.push({
-        ...item,
-        is_selected: true,
-      });
-    }
-    for (let item of failed_files || []) {
-      r.push({
-        ...item,
-        is_failed: true,
-        blob: await fileToBlob(item.file),
-      });
-    }
-    fileList = r;
-  }
-
-  $: buttonLabel = isRecording ? "Stop recording" : "Start recording";
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div>
-      <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
-        {#if isRecording}
-          <i class="fa-solid fa-microphone-slash" />
-        {:else}
-          <i class="fa-solid fa-microphone" />
-        {/if}
-        {buttonLabel}
-      </Button>
-      {#each fileList as item}
-        <div class="w-full flex flex-row items-center">
-          {#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">uploading...</p>
-              <i class="fa fa-pulse fa-spinner" />
-            </div>
-          {/if}
-          {#if item?.blob}
-            <div class="shrink p-2">
-              <div class="overflow-hidden">
-                <audio 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">
-                {item?.filename}
-              </p>
-            </div>
-          {/if}
-          <button
-            type="button"
-            class="shrink-0 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
-            on:click={() => {
-              removeFile(item);
-            }}
-          />
-        </div>
-      {/each}
-    </div>
-  </div>
-  {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
-  {/if}
-{/if}

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  VoicenoteProps */
-/** @typedef {typeof __propDef.events}  VoicenoteEvents */
-/** @typedef {typeof __propDef.slots}  VoicenoteSlots */
-export default class Voicenote extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VoicenoteProps = typeof __propDef.props;
-export type VoicenoteEvents = typeof __propDef.events;
-export type VoicenoteSlots = 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/index.d.ts

@@ -1,84 +0,0 @@
-export namespace components {
-    export { Arraybuilder as arraybuilder };
-    export { Checkbox as checkbox };
-    export { CheckboxAutocomplete as checkbox_autocomplete };
-    export { Code as code };
-    export { Contactselector as contactselector };
-    export { Currency as currency };
-    export { Dataindication as dataindication };
-    export { Date as date };
-    export { Datetime as datetime };
-    export { Email as email };
-    export { Fieldbuilder as fieldbuilder };
-    export { Fieldsbuilder as fieldsbuilder };
-    export { FileField as file };
-    export { Heading as heading };
-    export { Hidden as hidden };
-    export { Hiddenlocation as hiddenlocation };
-    export { Html as html };
-    export { Jsoneditor as jsoneditor };
-    export { Map as map };
-    export { Multicheckbox as multicheckbox };
-    export { Multistep as multistep };
-    export { Note as note };
-    export { Number as number };
-    export { Objectbuilder as objectbuilder };
-    export { Qrcodescanner as qrcodescanner };
-    export { Radio as radio };
-    export { Renderfield as renderfield };
-    export { Note as richtext };
-    export { Screenrecorder as screenrecorder };
-    export { Screenshot as screenshot };
-    export { Scrollandreaddisplay as scrollandreaddisplay };
-    export { Section as section };
-    export { Select as select };
-    export { Selectresource as selectresource };
-    export { Signature as signature };
-    export { Slider as slider };
-    export { Telephone as telephone };
-    export { Text as text };
-    export { Voicenote as voicenote };
-    export { AgGrid as grid };
-    export { SmartText as smart_text };
-    export { Text as _placeholder };
-}
-import Arraybuilder from "./Arraybuilder.svelte";
-import Checkbox from "./Checkbox.svelte";
-import CheckboxAutocomplete from "./CheckboxAutocomplete.svelte";
-import Code from "./Code.svelte";
-import Contactselector from "./Contactselector.svelte";
-import Currency from "./Currency.svelte";
-import Dataindication from "./Dataindication.svelte";
-import Date from "./Date.svelte";
-import Datetime from "./Datetime.svelte";
-import Email from "./Email.svelte";
-import Fieldbuilder from "./Fieldbuilder.svelte";
-import Fieldsbuilder from "./Fieldsbuilder.svelte";
-import FileField from "./File.svelte";
-import Heading from "./Heading.svelte";
-import Hidden from "./Hidden.svelte";
-import Hiddenlocation from "./Hiddenlocation.svelte";
-import Html from "./Html.svelte";
-import Jsoneditor from "./Jsoneditor.svelte";
-import Map from "./Map.svelte";
-import Multicheckbox from "./Multicheckbox.svelte";
-import Multistep from "./Multistep.svelte";
-import Note from "./Note.svelte";
-import Number from "./Number.svelte";
-import Objectbuilder from "./Objectbuilder.svelte";
-import Qrcodescanner from "./Qrcodescanner.svelte";
-import Radio from "./Radio.svelte";
-import Renderfield from "./Renderfield.svelte";
-import Screenrecorder from "./Screenrecorder.svelte";
-import Screenshot from "./Screenshot.svelte";
-import Scrollandreaddisplay from "./Scrollandreaddisplay.svelte";
-import Section from "./Section.svelte";
-import Select from "./Select.svelte";
-import Selectresource from "./Selectresource.svelte";
-import Signature from "./Signature.svelte";
-import Slider from "./Slider.svelte";
-import Telephone from "./Telephone.svelte";
-import Text from "./Text.svelte";
-import Voicenote from "./Voicenote.svelte";
-import AgGrid from "./AgGrid.svelte";
-import SmartText from "./SmartText.svelte";

package/dist/fields/components/index.js

@@ -1,85 +0,0 @@
-import AgGrid from "./AgGrid.svelte";
-import Arraybuilder from "./Arraybuilder.svelte";
-import Checkbox from "./Checkbox.svelte";
-import Contactselector from "./Contactselector.svelte";
-import Currency from "./Currency.svelte";
-import Dataindication from "./Dataindication.svelte";
-import Date from "./Date.svelte";
-import Datetime from "./Datetime.svelte";
-import Email from "./Email.svelte";
-import Fieldbuilder from "./Fieldbuilder.svelte";
-import Fieldsbuilder from "./Fieldsbuilder.svelte";
-import FileField from "./File.svelte";
-import Heading from "./Heading.svelte";
-import Hidden from "./Hidden.svelte";
-import Hiddenlocation from "./Hiddenlocation.svelte";
-import Html from "./Html.svelte";
-import Jsoneditor from "./Jsoneditor.svelte";
-import Map from "./Map.svelte";
-import Multicheckbox from "./Multicheckbox.svelte";
-import Multistep from "./Multistep.svelte";
-import Note from "./Note.svelte";
-import Number from "./Number.svelte";
-import Objectbuilder from "./Objectbuilder.svelte";
-import Qrcodescanner from "./Qrcodescanner.svelte";
-import Radio from "./Radio.svelte";
-import Renderfield from "./Renderfield.svelte";
-import Screenrecorder from "./Screenrecorder.svelte";
-import Screenshot from "./Screenshot.svelte";
-import Scrollandreaddisplay from "./Scrollandreaddisplay.svelte";
-import Section from "./Section.svelte";
-import Select from "./Select.svelte";
-import Selectresource from "./Selectresource.svelte";
-import Signature from "./Signature.svelte";
-import Slider from "./Slider.svelte";
-import Telephone from "./Telephone.svelte";
-import Text from "./Text.svelte";
-import Voicenote from "./Voicenote.svelte";
-import SmartText from "./SmartText.svelte";
-import CheckboxAutocomplete from "./CheckboxAutocomplete.svelte";
-import Code from "./Code.svelte";
-
-export const components = {
-  arraybuilder: Arraybuilder,
-  checkbox: Checkbox,
-  checkbox_autocomplete: CheckboxAutocomplete,
-  code: Code,
-  contactselector: Contactselector,
-  currency: Currency,
-  dataindication: Dataindication,
-  date: Date,
-  datetime: Datetime,
-  email: Email,
-  fieldbuilder: Fieldbuilder,
-  fieldsbuilder: Fieldsbuilder,
-  file: FileField,
-  heading: Heading,
-  hidden: Hidden,
-  hiddenlocation: Hiddenlocation,
-  html: Html,
-  jsoneditor: Jsoneditor,
-  map: Map,
-  multicheckbox: Multicheckbox,
-  multistep: Multistep,
-  note: Note,
-  number: Number,
-  objectbuilder: Objectbuilder,
-  qrcodescanner: Qrcodescanner,
-  radio: Radio,
-  renderfield: Renderfield,
-  richtext: Note,
-  screenrecorder: Screenrecorder,
-  screenshot: Screenshot,
-  scrollandreaddisplay: Scrollandreaddisplay,
-  section: Section,
-  select: Select,
-  selectresource: Selectresource,
-  signature: Signature,
-  slider: Slider,
-  telephone: Telephone,
-  text: Text,
-  voicenote: Voicenote,
-  grid: AgGrid,
-  smart_text: SmartText,
-  _placeholder: Text,
-};

package/dist/fields/definitions/all.json

@@ -1,38 +0,0 @@
-{
-  "fieldtype": "_all",
-  "description": "Applies to all fields",
-  "settings_form": {
-    "fields": {
-      "all_params": {
-        "fieldtype": "section",
-        "hide_label": true,
-        "details": {
-          "keyname": "spec"
-        },
-        "fields": {
-          "name": {
-            "title": "Field name",
-            "fieldtype": "renderfield",
-            "params": {
-              "dynamic_fieldspec": {
-                "fieldtype": "$boolean(form.data.spec_name_editable) ? 'text' : 'dataindication'"
-              }
-            }
-          },
-          "fieldtype": {
-            "title": "Fieldtype",
-            "fieldtype": "renderfield",
-            "params": {
-              "dynamic_fieldspec": {
-                "fieldtype": "$boolean(form.data.spec_fieldtype_editable) ? 'select' : 'dataindication'",
-                "params": {
-                  "options": "form.data.fieldtype_options"
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}