@stubber/form-fields 1.6.2 → 1.6.3

package/dist/fields2/sub/currency-field.svelte

@@ -130,7 +130,7 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
 
 <FieldLabel {fieldStore} />
 <div
-  class="flex-row items-center gap-2 border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
+  class="flex h-9 w-full min-w-0 flex-row items-center gap-2 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30"
 >
   <!-- currency indicator front left -->
   <div class="pointer-events-none text-gray-500">
@@ -143,7 +143,7 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
     {/if}
   </div>
   <input
-    class="w-full focus-within:outline-none bg-transparent"
+    class="w-full bg-transparent focus-within:outline-none"
     use:inputRegexMask={currencyRegex}
     value={initial_ui_value}
     inputmode="decimal"
@@ -160,13 +160,13 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          class="w-28 border-none bg-transparent px-1 justify-between"
+          class="w-28 justify-between border-none bg-transparent px-1"
         >
           {selectedValue}
           <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </Popover.Trigger>
-      <Popover.Content class="p-0 max-h-[50vh] overflow-y-scroll">
+      <Popover.Content class="max-h-[50vh] overflow-y-scroll p-0">
         <Command.Root>
           <Command.Input placeholder="Search currencies..." />
           <Command.Empty>No currency found.</Command.Empty>

package/dist/fields2/sub/smart-text-field.svelte

@@ -121,12 +121,30 @@ const contentField = StateField.define({
   },
   update(value, transaction) {
     if (transaction.docChanged) {
-      $fieldStore.value = parse_string ? parse_string_value(transaction.newDoc.toString()) : transaction.newDoc.toString();
-      return transaction.newDoc.toString();
+      let new_value = transaction.newDoc.toString();
+      if (new_value !== $fieldStore.value) {
+        $fieldStore.value = parse_string ? parse_string_value(new_value) : new_value;
+      }
+      return new_value;
     }
     return value;
   }
 });
+$: update_editor_content($fieldStore.value);
+function update_editor_content(new_value) {
+  if (editor_view) {
+    const current_value = editor_view.state.doc.toString();
+    if (new_value !== current_value && typeof new_value === "string") {
+      editor_view.dispatch({
+        changes: {
+          from: 0,
+          to: current_value.length,
+          insert: new_value
+        }
+      });
+    }
+  }
+}
 function fake_handlebars_lang() {
   const curly_decorator = new MatchDecorator({
     regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
@@ -180,43 +198,63 @@ function parse_string_value(value) {
 
 <FieldLabel {fieldStore} />
 {#if !is_object}
-  <div
-    use:setup_editor
-    class=" stubber-cm text-sm {isValid ? 'stubber-valid' : 'stubber-invalid'}"
-  />
+  <div use:setup_editor class="stubber-cm" aria-invalid={!isValid} />
 {:else}
   <p class="text-surface-400">The value of this field is not a string.</p>
 {/if}
 <FieldMessage {fieldStore} />
 
+<!-- below styles are basically this tailwind string:
+ flex h-9 w-full min-w-0 flex-row items-center gap-2 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30 -->
+
 <style>
   .stubber-cm :global(.cm-editor) {
-    /* Base styles */
-    background-color: rgba(255, 255, 255, 0.85);
+    width: 100%;
+    min-width: 0;
     border-radius: 0.375rem;
+    border-width: 1px;
     --tw-border-opacity: 1;
     border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
-    border-width: 1px;
-    border-style: solid;
-    width: 100%;
-    color: rgb(31 41 51);
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
 
-    /* Top inset shadow only */
-    box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-ring-offset-color: hsl(var(--background) / 1);
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
   }
 
-  .stubber-cm :global(.cm-editor.cm-focused) {
-    outline: none;
-    border-width: 1px;
-    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+  @media (prefers-color-scheme: dark) {
+    .stubber-cm :global(.cm-editor) {
+      background-color: hsl(var(--input) / 0.3);
+    }
+  }
+
+  .stubber-cm[aria-invalid="true"] :global(.cm-editor) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
+    --tw-ring-color: hsl(var(--destructive) / 0.5);
   }
 
-  .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
-    border-color: rgb(170, 170, 170, 0.5);
+  .stubber-cm :global(.cm-editor.cm-focused) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsl(var(--ring) / 0.5);
   }
 
-  .stubber-cm.stubber-invalid :global(.cm-editor) {
-    border-color: rgb(225 45 57);
+  .stubber-cm[aria-invalid="true"] :global(.cm-editor.cm-focused) {
+    --tw-ring-color: hsl(var(--destructive) / 0.5);
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
   }
 
   .stubber-cm :global(.cm-editor .cm-scroller) {
@@ -236,6 +274,7 @@ function parse_string_value(value) {
   }
 
   .stubber-cm :global(.cm-editor .cm-placeholder) {
+    --tw-text-opacity: 1;
     color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -50,6 +50,7 @@
     "postcss": "^8.4.28",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "publint": "^0.2.2",
     "socket.io-client": "^4.8.1",
     "svelte-check": "^3.4.3",
@@ -65,7 +66,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.5",
+    "@stubber/ui": "^1.13.6",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",