@stubber/form-fields 1.0.3 → 1.0.4

package/dist/fields/components/SmartText.svelte

@@ -10,12 +10,15 @@
     MatchDecorator,
     Decoration,
     ViewPlugin,
-    keymap
+    keymap,
   } from "@codemirror/view";
   import { EditorState, StateField } from "@codemirror/state";
   import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
   import { autocompletion } from "@codemirror/autocomplete";
 
+  import { Input } from "@stubber/ui/input";
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -59,6 +62,17 @@
         // set field state if changed
         if (!deepEqual(a?.state?.internal, _clone)) {
           $field.state.internal = _clone;
+
+          // update the editor content if it's different
+          if (editor_view?.state.doc.toString() !== _clone.raw) {
+            editor_view?.dispatch({
+              changes: {
+                from: 0,
+                to: editor_view.state.doc.length,
+                insert: _clone.raw,
+              },
+            });
+          }
         }
 
         return _clone;
@@ -191,6 +205,9 @@
   });
 
   let editor_parent;
+  /**
+   * @type {EditorView}
+   */
   let editor_view;
 
   $: is_string = typeof $internal?.raw === "string";
@@ -208,10 +225,7 @@
           EditorView.contentAttributes.of({
             spellcheck: "true",
           }),
-          keymap.of([
-            ...defaultKeymap,
-            ...historyKeymap,
-          ])
+          keymap.of([...defaultKeymap, ...historyKeymap]),
         ];
 
         if (code_language === "handlebars") {
@@ -235,24 +249,24 @@
 
 {#if $internal && is_string}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block{hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div
       bind:this={editor_parent}
       class="stubber-cm text-field {isValid ? 'stubber-valid' : 'stubber-invalid'}"
     />
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      <Label class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
         {validationMessage}
-      </p>
+      </Label>
     {/if}
   </div>
 {:else}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <p class="text-surface-400">The value of this field is not a string.</p>
   </div>
 {/if}

package/dist/fields/components/Telephone.svelte

@@ -7,6 +7,8 @@
   import intlTelInput from "intl-tel-input";
   import "intl-tel-input/build/css/intlTelInput.css";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -128,9 +130,9 @@
 
 {#if $internal}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div
       class="w-full bg-surface-100 flex space-x-4 focus:outline-primary-400 relative mt-2 rounded-md"
     >
@@ -139,15 +141,18 @@
         bind:value={$internal.raw}
         type="tel"
         id="input_{state_key}"
-        class="w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
+               flex h-7 w-full items-center justify-between rounded px-3 py-2
+               text-sm
+               [&>span]:line-clamp-1 aria-[invalid]:border-destructive
+               placeholder:text-black
+               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-primary-400'}"
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <div class="mt-1">
+        <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
+      </div>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Text.svelte

@@ -5,6 +5,9 @@
   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();
@@ -77,11 +80,11 @@
 
 {#if $internal}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative rounded-md">
-      <input
+      <Input
         on:keydown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -90,17 +93,15 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="block w-full  {!isValid ? 'ring-danger-500' : 'ring-surface-300 '} "
         name={state_key}
         bind:value={$internal.raw}
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <Label class="mt-1.5 {!isValid ? `text-danger-500` : `text-success-500`}"
+        >{validationMessage}</Label
+      >
     {/if}
   </div>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -57,7 +57,7 @@
     "@codemirror/commands": "^6.7.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@stubber/ui": "^1.0.11",
+    "@stubber/ui": "^1.0.18",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "currency-symbol-map": "^5.1.0",