@stubber/form-fields 1.0.10 → 1.1.0

package/dist/fields/components/Contactselector.svelte

@@ -279,7 +279,7 @@
                flex h-7 w-full items-center justify-between rounded px-3 py-2
                text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
+               placeholder:text-muted-foreground
                {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"

package/dist/fields/components/Currency.svelte

@@ -183,12 +183,13 @@
       {label}
     </Label>
     <div
-      class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive flex h-7 w-full items-center justify-between rounded px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 relative {!isValid
-        ? 'ring-danger-500'
-        : 'ring-surface-300 focus:ring-primary-400'} "
+      class="w-full flex items-center gap-2 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-within:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {!isValid
+        ? 'focus-within:ring-danger-500'
+        : 'ring-surface-300'}"
+      style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
     >
-      <div class="pointer-events-none flex items-center pl-3">
-        <span class="text-label text-surface-600">
+      <div class="pointer-events-none flex items-center pl-2">
+        <span class="text-sm text-surface-600">
           {getSymbolFromCurrency($internal?.currencycode)}
         </span>
       </div>
@@ -198,10 +199,10 @@
             e.preventDefault();
           }
         }}
+        class="w-full focus-within:outline-none"
         use:inputRegexMask={currencyRegex}
         id="input_{state_key}"
         placeholder={label}
-        class="bg-transparent w-full focus:outline-none text-surface-900 placeholder:text-surface-400 ml-2"
         name={state_key}
         inputmode="decimal"
         bind:value={$internal.raw}

package/dist/fields/components/Dataindication.svelte

@@ -2,6 +2,7 @@
   import _ from "lodash-es";
 
   import { Label } from "@stubber/ui/label";
+  import { Input } from "@stubber/ui/input";
 
   export let field;
 
@@ -18,16 +19,8 @@
   <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
     {label}
   </Label>
-  <div class="relative mt-2 rounded-md">
-    <div
-      class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select flex items-center h-7 w-full rounded px-3 py-2 text-sm focus:outline-none placeholder:text-black"
-    >
-      {#if value_is_string}
-        {value}
-      {:else}
-        <pre>{value}</pre>
-      {/if}
-    </div>
+  <div class="relative mt-2 rounded-md bg-surface-100 p-2">
+    <pre class="rounded-md">{value}</pre>
   </div>
 
   {#if validationMessage}

package/dist/fields/components/Date.svelte

@@ -80,9 +80,10 @@
         type="date"
         id="input_{state_key}"
         placeholder={label}
-        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
-         placeholder:text-black
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
+        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
+         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Datetime.svelte

@@ -80,9 +80,10 @@
         type="datetime-local"
         id="input_{state_key}"
         placeholder={label}
-        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
-         placeholder:text-black
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
+        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
+         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Email.svelte

@@ -111,9 +111,7 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!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}
       />

package/dist/fields/components/Note.svelte

@@ -80,9 +80,7 @@
         rows="3"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 '} "
+        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '} "
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Number.svelte

@@ -102,7 +102,7 @@
         type="number"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
+        class="block w-full {!isValid
           ? 'ring-danger-500'
           : 'ring-surface-300 focus:ring-primary-400'} "
         name={state_key}

package/dist/fields/components/Qrcodescanner.svelte

@@ -7,7 +7,7 @@
   import { fade } from "svelte/transition";
   import { Html5Qrcode } from "html5-qrcode";
   import { Button } from "@stubber/ui/button";
-
+  import { Input } from "@stubber/ui/input";
   import { Label } from "@stubber/ui/label";
 
   export let field;
@@ -170,20 +170,20 @@
     <div class="relative mt-2 rounded-md">
       <div class="flex items-center space-x-3">
         {#if $internal.raw}
-          <input
+          <Input
             readonly
             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"
             name={state_key}
             value={$internal.raw}
           />
         {/if}
         <div class="shrink-0">
-          <Button icon="camera" label="Scan code" on:click={openScannerModal} />
+          <Button on:click={openScannerModal}>
+            <i class="fa-solid fa-qrcode" />
+            Scan Code
+          </Button>
         </div>
       </div>
     </div>

package/dist/fields/components/Select.svelte

@@ -1,29 +1,20 @@
 <script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onMount, onDestroy } from "svelte";
-  import { writable } from "svelte/store";
-  import * as utils from "../../utils/index.js";
+  import { onMount, tick } from "svelte";
 
   import { Label } from "@stubber/ui/label";
-  import { scale } from "svelte/transition";
+  import * as Command from "@stubber/ui/command";
+  import * as Popover from "@stubber/ui/popover";
+  import { Button } from "@stubber/ui/button";
+  import { isArray, isEqual } from "lodash-es";
 
   export let field;
 
-  const internal = writable();
-  const { clickOutside } = utils;
-
-  let is_focused = false;
-  let filter_text = "";
-  let input;
-
   $: 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;
-  $: items = _.isArray($field.spec?.params?.options)
+  $: items = isArray($field.spec?.params?.options)
     ? $field.spec?.params?.options?.map((o, index) => {
         let { label, value } = o || {};
         let _value = value !== undefined ? value : label;
@@ -32,222 +23,85 @@
         return { _key, _label, _value };
       })
     : [];
-  $: filteritems = items.filter((i) => {
-    let _filter_text = filter_text?.toLowerCase();
-    if (!_filter_text) return true;
-    let _label = i?._label?.toLowerCase();
-    return _label?.includes(_filter_text);
-  });
 
   onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_item = items?.find((i) => deepEqual($field.data.base, i._value));
-    let initial_data = {
-      ...f?.data,
-      base: initial_item?._value ?? null,
-    };
-    if (!f?.spec?.without_value_details) initial_data.base_label = initial_item?._label;
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      focused_index: -1,
-      selected_item_key: initial_item?._key,
-    };
-    _.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 item = items.find((i) => i._value === a?.data?.base);
-        if (item) {
-          filter_text = item?._label;
-          _clone.selected_item_key = item?._key;
-
-          // set field_label if changed
-          if (!deepEqual(a?.data?.base_label, item?._label) && !a?.spec?.without_value_details) {
-            $field.data.base_label = item?._label;
-          }
-
-          // 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
-        let item = items.find((i) => i._key === b?.selected_item_key);
-        _.set(_clone, "data.base", item?._value);
-        if (!a?.spec?.without_value_details) _.set(_clone, "data.base_label", item?._label);
-        return _clone;
+    if ($field.data.base && !$field.spec?.without_value_details) {
+      // If the field has a base value, we need to find the corresponding label
+      const item = items.find((i) => isEqual(i._value, $field.data.base));
+      if (item) {
+        $field.data.base_label = item._label;
       }
-    );
-  });
-
-  let teleportedNode = null;
-  onDestroy(() => {
-    if (teleportedNode) {
-      teleportedNode.remove();
-      teleportedNode = null;
     }
   });
 
-  // used to show the dropdown panel in the body instead of inside the component
-  // fixes an issue where the dropdown panel would be cut off by the parent container
-  function teleport(node) {
-    // Get the original position and width
-    let rect = node.getBoundingClientRect();
-    let originalWidth = node.offsetWidth;
-    let originalHeight = node.offsetHeight;
-
-    // Teleport to the body
-    let teleportContainer = document.body;
-    teleportContainer.appendChild(node);
-
-    teleportedNode = node;
+  function simpleSetSelected(item_key) {
+    const item = items.find((i) => i._key === item_key);
+    if (!item) return;
 
-    // Apply the original width and position to the teleported element
-    node.style.width = originalWidth + "px";
-    node.style.height = originalHeight + "px";
-    node.style.position = "absolute";
-    node.style.top = rect.top + window.scrollY + "px";
-    node.style.left = rect.left + "px";
-
-    // set z-index to 1000
-    node.style.zIndex = 1000;
+    field.update((f) => {
+      f.data.base = item?._value;
+      if (!f.spec?.without_value_details) {
+        f.data.base_label = item?._label;
+      }
+      return f;
+    });
   }
 
-  function setSelected(item) {
-    filter_text = item._label;
-    let comparison = _.cloneDeep($internal);
-    comparison.focused_index = -1;
-    comparison.selected_item_key = item._key;
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = _.cloneDeep(comparison);
-    }
-
-    is_focused = false;
-    input.blur();
+  let open = false;
+
+  $: dropdownLabel = items.find((i) => isEqual(i._value, $field.data.base))?._label ?? "Select...";
+  // We want to refocus the trigger button when the user selects
+  // an item from the list so users can continue navigating the
+  // rest of the form with the keyboard.
+  function closeAndFocusTrigger(triggerId) {
+    open = false;
+    tick().then(() => {
+      document.getElementById(triggerId)?.focus();
+    });
   }
 </script>
 
-{#if $internal}
-  <div
-    use:clickOutside={() => {
-      if (is_focused) {
-        is_focused = false;
-        filter_text = $field?.data?.base_label ?? "";
-      }
-    }}
-    class="relative flex flex-col w-full text-surface-900 my-2"
-  >
-    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative flex rounded-md">
-      <input
-        on:keydown={(e) => {
-          switch (e.key) {
-            case "Enter":
-              if ($internal.focused_index >= 0 && $internal.focused_index < items.length) {
-                setSelected(filteritems[$internal.focused_index]);
-              }
-              e.preventDefault();
-              break;
-            case "ArrowDown":
-              $internal.focused_index = ($internal.focused_index + 1) % items.length;
-              e.preventDefault();
-              break;
-            case "ArrowUp":
-              $internal.focused_index = ($internal.focused_index - 1 + items.length) % items.length;
-              e.preventDefault();
-              break;
-          }
-        }}
-        on:focus={() => {
-          if (!is_focused) {
-            is_focused = true;
-            filter_text = "";
-          }
-        }}
-        bind:this={input}
-        type="select"
-        id="input_{state_key}"
-        placeholder={label}
-        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 focus:outline-none
-               [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
-               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
-        name={state_key}
-        bind:value={filter_text}
-        autocomplete="off"
-      />
-      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-        <i class="text-surface-300 fa-regular fa-arrows-up-down fa-fw" />
-      </div>
-    </div>
-    {#if is_focused}
-      <div use:teleport class="z-10 w-full inset-y-[70px] mt-1">
-        <div
-          transition:scale={{
-            start: 0.95,
-            opacity: 0,
-            duration: 50,
-          }}
-          class="bg-popover text-popover-foreground relative min-w-[8rem]
-             overflow-hidden rounded-md border shadow-md outline-none
-             max-h-[200px] overflow-y-auto w-full p-1"
-        >
-          {#if filteritems.length > 0}
-            <ul>
-              {#each filteritems as item, index (item._key)}
-                <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''} ">
-                  <button
-                    type="button"
-                    on:click|preventDefault={() => setSelected(item)}
-                    class="selectitem relative flex w-full cursor-default
-                       select-none items-center rounded-sm py-1 pl-8 pr-2
-                       text-sm outline-none hover:bg-accent
-                       hover:text-accent-foreground
-                       data-[highlighted]:bg-accent
-                       data-[highlighted]:text-accent-foreground
-                       data-[disabled]:pointer-events-none
-                       data-[disabled]:opacity-50"
-                  >
-                    {item._label}
-                    {#if item._key === $internal?.selected_item_key}
-                      <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
-                    {/if}
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          {:else}
-            <div class="flex items-center justify-center py-4">
-              <span class="text-sm text-surface-400">
-                {filter_text ? "No results found" : "Start typing to search..."}
-              </span>
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/if}
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
+    {label}
+  </Label>
+  <Popover.Root bind:open let:ids>
+    <Popover.Trigger asChild let:builder>
+      <Button
+        builders={[builder]}
+        variant="outline"
+        role="combobox"
+        aria-expanded={open}
+        class="border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-[200px] rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 justify-between"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
+      >
+        {dropdownLabel}
+        <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content class="w-[200px] p-0">
+      <Command.Root>
+        <Command.Input placeholder="Search..." />
+        <Command.Empty>No results found.</Command.Empty>
+        <Command.Group>
+          {#each items as item}
+            <Command.Item
+              value={item._key}
+              onSelect={(item_key) => {
+                simpleSetSelected(item_key);
+                closeAndFocusTrigger(ids.trigger);
+              }}
+              class={$field.data.base === item._value ? "bg-primary-100" : ""}
+            >
+              {item._label}
+            </Command.Item>
+          {/each}
+        </Command.Group>
+      </Command.Root>
+    </Popover.Content>
+  </Popover.Root>
+
+  {#if validationMessage}
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
+  {/if}
+</div>

package/dist/fields/components/Selectresource.svelte

@@ -236,7 +236,7 @@
                flex h-7 w-full items-center justify-between rounded px-3 py-2
                text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
+               placeholder:text-muted-foreground
                {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"

package/dist/fields/components/SmartText.svelte

@@ -290,7 +290,7 @@
   .stubber-cm :global(.cm-editor.cm-focused) {
     outline: none;
     border-width: 1px;
-    border-color: var(--ring);
+    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
   }
 
   .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
@@ -318,18 +318,10 @@
   }
 
   .stubber-cm :global(.cm-editor .cm-placeholder) {
-    color: var(--muted-foreground, rgb(165 169 173));
+    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
   }
 
   .stubber-cm :global(.curly-braces-highlight) {
     color: rgb(9 103 210);
   }
-
-  /* CSS Custom Properties */
-  :root {
-    --ring: rgb(98, 98, 98);
-    --muted-foreground: rgb(165 169 173);
-    --input: 214.3 31.8% 91.4%;
-    --border: 214.3 31.8% 91.4%;
-  }
 </style>

package/dist/fields/components/Telephone.svelte

@@ -141,12 +141,10 @@
         bind:value={$internal.raw}
         type="tel"
         id="input_{state_key}"
-        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'}"
+        class="w-full pl-12 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-10 rounded-md border py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {!isValid
+          ? 'ring-danger-500'
+          : 'ring-surface-300'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
       />
     </div>
     {#if validationMessage}

package/dist/fields/components/Text.svelte

@@ -93,9 +93,7 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 '} "
+        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '}"
         name={state_key}
         bind:value={$internal.raw}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "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.18",
+    "@stubber/ui": "^1.1.1",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "currency-symbol-map": "^5.1.0",