@stubber/form-fields 2.2.6 → 3.0.0

package/dist/form-fields/interfaces.js

@@ -1,41 +1,42 @@
-import ArrayBuilderField from "./sub/array-builder-field.svelte";
-import CheckboxAutocomplete from "./sub/checkbox-autocomplete.svelte";
-import CheckboxField from "./sub/checkbox-field.svelte";
-import CodeField from "./sub/code-field.svelte";
-import ContactSelectorField from "./sub/contact-selector-field.svelte";
-import CurrencyField from "./sub/currency-field.svelte";
-import DataIndicationField, {} from "./sub/data-indication-field.svelte";
-import DateField from "./sub/date-field.svelte";
-import DateTimeField from "./sub/date-time-field.svelte";
-import EmailField from "./sub/email-field.svelte";
-import FieldBuilderField, {} from "./sub/field-builder-field.svelte";
-import FileField, {} from "./sub/file-field.svelte";
-import GridField from "./sub/grid-field.svelte";
-import HeadingField, {} from "./sub/heading-field.svelte";
-import HiddenField, {} from "./sub/hidden-field.svelte";
-import HiddenLocationField from "./sub/hidden-location-field.svelte";
-import HtmlField, {} from "./sub/html-field.svelte";
-import JSONEditorField, {} from "./sub/jsoneditor-field.svelte";
-import MapField from "./sub/map-field.svelte";
-import MultiCheckboxField from "./sub/multi-checkbox-field.svelte";
-import MultistepField from "./sub/multistep-field.svelte";
-import NoteField, {} from "./sub/note-field.svelte";
-import NumberField from "./sub/number-field.svelte";
-import ObjectBuilderField, {} from "./sub/object-builder-field.svelte";
-import QrCodeScannerField, {} from "./sub/qr-code-scanner-field.svelte";
-import RadioField from "./sub/radio-field.svelte";
-import ScreenrecorderField from "./sub/screenrecorder-field.svelte";
-import ScreenshotField from "./sub/screenshot-field.svelte";
-import ScrollAndReadDisplayField, {} from "./sub/scroll-and-read-display-field.svelte";
-import SectionField from "./sub/section-field.svelte";
-import SelectField from "./sub/select-field.svelte";
-import SelectresourceField, {} from "./sub/selectresource-field.svelte";
-import SignatureField, {} from "./sub/signature-field.svelte";
-import SliderField from "./sub/slider-field.svelte";
-import SmartTextField from "./sub/smart-text-field.svelte";
-import TelephoneField from "./sub/telephone-field.svelte";
-import TextField from "./sub/text-field.svelte";
-import VoicenoteField from "./sub/voicenote-field.svelte";
+import { isEqual } from "lodash-es";
+import ArrayBuilderField from "./fields/array-builder-field.svelte";
+import CheckboxAutocomplete from "./fields/checkbox-autocomplete.svelte";
+import CheckboxField from "./fields/checkbox-field.svelte";
+import CodeField from "./fields/code-field.svelte";
+import ContactSelectorField from "./fields/contact-selector-field.svelte";
+import CurrencyField from "./fields/currency-field.svelte";
+import DataIndicationField, {} from "./fields/data-indication-field.svelte";
+import DateField from "./fields/date-field.svelte";
+import DateTimeField from "./fields/date-time-field.svelte";
+import EmailField from "./fields/email-field.svelte";
+import FieldBuilderField, {} from "./fields/field-builder-field.svelte";
+import FileField, {} from "./fields/file-field.svelte";
+import GridField from "./fields/grid-field.svelte";
+import HeadingField, {} from "./fields/heading-field.svelte";
+import HiddenField, {} from "./fields/hidden-field.svelte";
+import HiddenLocationField from "./fields/hidden-location-field.svelte";
+import HtmlField, {} from "./fields/html-field.svelte";
+import JSONEditorField, {} from "./fields/jsoneditor-field.svelte";
+import MapField from "./fields/map-field.svelte";
+import MultiCheckboxField from "./fields/multi-checkbox-field.svelte";
+import MultistepField from "./fields/multistep-field.svelte";
+import NoteField, {} from "./fields/note-field.svelte";
+import NumberField from "./fields/number-field.svelte";
+import ObjectBuilderField, {} from "./fields/object-builder-field.svelte";
+import QrCodeScannerField, {} from "./fields/qr-code-scanner-field.svelte";
+import RadioField from "./fields/radio-field.svelte";
+import ScreenrecorderField from "./fields/screenrecorder-field.svelte";
+import ScreenshotField from "./fields/screenshot-field.svelte";
+import ScrollAndReadDisplayField, {} from "./fields/scroll-and-read-display-field.svelte";
+import SectionField from "./fields/section-field.svelte";
+import SelectField from "./fields/select-field.svelte";
+import SelectresourceField, {} from "./fields/selectresource-field.svelte";
+import SignatureField, {} from "./fields/signature-field.svelte";
+import SliderField from "./fields/slider-field.svelte";
+import SmartTextField from "./fields/smart-text-field.svelte";
+import TelephoneField from "./fields/telephone-field.svelte";
+import TextField from "./fields/text-field.svelte";
+import VoicenoteField from "./fields/voicenote-field.svelte";
 export const fields = {
     text: TextField,
     number: NumberField,
@@ -86,6 +87,8 @@ const string_fields = [
     "date",
     "datetime",
     "hidden",
+    "currency",
+    "dataindication",
 ];
 export const final_field_type = (f, allow_dynamic_switching) => {
     if (!allow_dynamic_switching) {
@@ -96,7 +99,7 @@ export const final_field_type = (f, allow_dynamic_switching) => {
         if (!Array.isArray(options)) {
             return "smart_text";
         }
-        const has_value_in_options = options.some((opt) => opt.value === f.value);
+        const has_value_in_options = options.some((opt) => isEqual(opt.value, f.value));
         if (has_value_in_options) {
             return "select";
         }

package/dist/form-fields/intl-tel-input.css

@@ -0,0 +1 @@
+@import "intl-tel-input/styles";

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

@@ -0,0 +1,17 @@
+import type { Writable } from "svelte/store";
+export interface FormFieldStyles {
+    label?: string;
+    input?: string;
+    choice?: string;
+    range?: string;
+    message?: string;
+    group?: string;
+    dropzone?: string;
+    popover?: string;
+    option?: string;
+    button?: string;
+    uploadItem?: string;
+}
+export declare const STYLES_CONTEXT: unique symbol;
+export type StylesContext = Writable<FormFieldStyles>;
+export declare function classNames(...values: Array<string | undefined | false>): string;

package/dist/form-fields/styles.js

@@ -0,0 +1,4 @@
+export const STYLES_CONTEXT = Symbol("form-field-styles");
+export function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.2.6",
+  "version": "3.0.0",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -64,7 +64,6 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.9",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",
@@ -74,13 +73,12 @@
     "fast-equals": "^5.0.1",
     "github-markdown-css": "^5.2.0",
     "html5-qrcode": "^2.3.8",
-    "intl-tel-input": "^29.1.1",
+    "intl-tel-input": "^29.2.3",
     "jsonata": "^2.0.3",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "signature_pad": "^4.1.6",
     "svelte": "^4.2.19",
-    "svelte-file-dropzone": "^2.0.4",
     "svelte-jsoneditor": "^2.3.3",
     "svelte-markdown": "^0.4.0",
     "svelte-writable-derived": "^3.1.0"

package/dist/form-fields/sub/checkbox-autocomplete.svelte

@@ -1,56 +0,0 @@
-<script context="module"></script>
-
-<script>import { Button } from "@stubber/ui/button";
-import { Label } from "@stubber/ui/label";
-import * as Popover from "@stubber/ui/popover";
-import * as RadioGroup from "@stubber/ui/radio-group";
-import CheckboxField, {} from "./checkbox-field.svelte";
-import SmartTextField, {} from "./smart-text-field.svelte";
-import { isEqual } from "lodash-es";
-export let fieldStore;
-$fieldStore.without_value_details = true;
-let selected_option = $fieldStore.value === void 0 || typeof $fieldStore.value === "boolean" || isEqual($fieldStore.value, $fieldStore.params?.checkedvalue || true) ? "Checkbox" : "Smart Text";
-const options = ["Checkbox", "Smart Text"];
-function select_option(new_option) {
-  selected_option = new_option;
-  switch (selected_option) {
-    case "Checkbox":
-      $fieldStore.value = false;
-      break;
-    case "Smart Text":
-      $fieldStore.value = "";
-      break;
-    default:
-      break;
-  }
-}
-</script>
-
-<div class="w-full flex items-start space-x-2">
-  <Popover.Root>
-    <Popover.Trigger let:builder asChild>
-      <Button builders={[builder]} class="w-5 h-5 p-0" variant="outline">
-        <i class="fa fa-chevron-down" />
-      </Button>
-    </Popover.Trigger>
-    <Popover.Content>
-      <RadioGroup.Root value={selected_option} onValueChange={select_option}>
-        {#each options as option}
-          <div class="flex items-center space-x-2">
-            <RadioGroup.Item value={option} id={option} />
-            <Label for={option}>{option}</Label>
-          </div>
-        {/each}
-      </RadioGroup.Root>
-    </Popover.Content>
-  </Popover.Root>
-  {#if selected_option === "Smart Text"}
-    <div class="w-full">
-      <SmartTextField {fieldStore} />
-    </div>
-  {:else}
-    <div class="w-full">
-      <CheckboxField {fieldStore} />
-    </div>
-  {/if}
-</div>

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

@@ -1,42 +0,0 @@
-<script context="module">export const checkbox_field_param_spec = {
-  spec: {
-    fields: {
-      checkedvalue: {
-        fieldtype: "jsoneditor",
-        initvalue: { has_default: true, default: true }
-      },
-      uncheckedvalue: {
-        fieldtype: "jsoneditor",
-        initvalue: { has_default: true, default: false }
-      }
-    }
-  }
-};
-</script>
-
-<script>import { Checkbox } from "@stubber/ui/checkbox";
-import { Label } from "@stubber/ui/label";
-import { isEqual } from "lodash-es";
-import FieldMessage from "../FieldMessage.svelte";
-import { set_value_details } from "../utils";
-import FieldExprToggle from "../FieldExprToggle.svelte";
-export let fieldStore;
-set_value_details($fieldStore, "label", $fieldStore.label);
-$: checked = isEqual($fieldStore.value, $fieldStore.params?.checkedvalue || true);
-const on_change = (new_value) => {
-  const checked_value = $fieldStore.params?.checkedvalue ?? true;
-  const unchecked_value = $fieldStore.params?.uncheckedvalue ?? false;
-  if (new_value === true) {
-    $fieldStore.value = checked_value;
-  } else {
-    $fieldStore.value = unchecked_value;
-  }
-};
-</script>
-
-<div class="flex w-full items-center gap-x-2">
-  <Checkbox {checked} onCheckedChange={on_change} />
-  <Label>{$fieldStore.label}</Label>
-  <FieldExprToggle {fieldStore} />
-</div>
-<FieldMessage {fieldStore} />

package/dist/form-fields/sub/data-indication-field.svelte

@@ -1,19 +0,0 @@
-<script context="module"></script>
-
-<script>import { isString } from "lodash-es";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-let value;
-$: {
-  const new_value = $fieldStore.value;
-  const is_string = isString(new_value);
-  value = is_string ? new_value : JSON.stringify(new_value, null, 2);
-}
-</script>
-
-<FieldLabel {fieldStore} />
-<div class="relative mt-2 rounded-md bg-surface-100 p-2">
-  <pre class="rounded-md">{value ?? ""}</pre>
-</div>
-<FieldMessage {fieldStore} />

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

@@ -1,31 +0,0 @@
-<script context="module"></script>
-
-<script>import { Input } from "@stubber/ui/input";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-</script>
-
-<FieldLabel {fieldStore} />
-<Input
-  id={$fieldStore.id}
-  bind:value={$fieldStore.value}
-  type="date"
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  class="w-full date-input {!$fieldStore.value ? 'text-muted-foreground' : ''}"
-  aria-describedby="message-{$fieldStore.id}"
-/>
-<FieldMessage {fieldStore} />
-
-<style>
-  :global(input[type="date"].date-input) {
-    position: relative;
-    padding-right: 2rem;
-  }
-
-  :global(input[type="date"].date-input::-webkit-calendar-picker-indicator) {
-    position: absolute;
-    right: 0.5rem;
-    cursor: pointer;
-  }
-</style>

package/dist/form-fields/sub/date-time-field.svelte

@@ -1,31 +0,0 @@
-<script context="module"></script>
-
-<script>import { Input } from "@stubber/ui/input";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-export let fieldStore;
-</script>
-
-<FieldLabel {fieldStore} />
-<Input
-  id={$fieldStore.id}
-  bind:value={$fieldStore.value}
-  type="datetime-local"
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  class="w-full date-input {!$fieldStore.value ? 'text-muted-foreground' : ''}"
-  aria-describedby="message-{$fieldStore.id}"
-/>
-<FieldMessage {fieldStore} />
-
-<style>
-  :global(input[type="datetime-local"].date-input) {
-    position: relative;
-    padding-right: 2rem;
-  }
-
-  :global(input[type="datetime-local"].date-input::-webkit-calendar-picker-indicator) {
-    position: absolute;
-    right: 0.5rem;
-    cursor: pointer;
-  }
-</style>