@stubber/form-fields 2.2.5 → 3.0.0

package/dist/form-fields/{sub → fields}/currency-field.svelte

@@ -44,18 +44,19 @@ export const currency_field_param_spec = {
 };
 </script>
 
-<script>import { Button } from "@stubber/ui/button";
-import * as Command from "@stubber/ui/command";
-import * as Popover from "@stubber/ui/popover";
-import getSymbolFromCurrency from "currency-symbol-map";
+<script>import getSymbolFromCurrency from "currency-symbol-map";
 import currency from "currency.js";
 import { get } from "lodash-es";
+import { getContext } from "svelte";
 import { get as get_store_value } from "svelte/store";
+import Autocomplete, {} from "../Autocomplete.svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 import { set_value_details } from "../utils";
 import { inputRegexMask } from "../../utils/input_regex_mask";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 $: params = $fieldStore.params;
 const currencyRegex = /^([0-9]+(\.?[0-9]?[0-9]?)?)$/;
 const currencyName = new Intl.DisplayNames("en-US", {
@@ -125,74 +126,111 @@ const on_input = (e) => {
   $fieldStore.value = current_details.amount ? current_details.amount.toFixed(2).toString() : "";
   set_value_details($fieldStore, "details", current_details);
 };
-let open = false;
-$: selectedValue = currency_list.find((c) => c.value === current_details?.currencycode)?.value || "Select Currency...";
+$: currency_options = currency_list.map((item) => ({
+  label: item.value,
+  value: item.value,
+  key: item.value,
+  searchText: `${item.value} ${item.name} ${item.symbol}`,
+  currency: item
+}));
+function select_currency(option) {
+  const item = option.currency;
+  if (!item) return;
+  current_details = {
+    ...current_details,
+    currencycode: item.value,
+    currencysymbol: item.symbol
+  };
+  set_value_details($fieldStore, "details", current_details);
+}
 </script>
 
-<FieldLabel {fieldStore} />
-<div
-  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">
-    {#if current_details?.currencysymbol}
-      {current_details.currencysymbol}
-    {:else if params?.currency}
-      {getSymbolFromCurrency(params.currency) || params.currency}
-    {:else}
-      $
+<div class="currency-field">
+  <FieldLabel {fieldStore} />
+  <div
+    class={classNames("currency-input", $styles.input)}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <!-- currency indicator front left -->
+    <span class="currency-symbol" aria-hidden="true">
+      {#if current_details?.currencysymbol}
+        {current_details.currencysymbol}
+      {:else if params?.currency}
+        {getSymbolFromCurrency(params.currency) || params.currency}
+      {:else}
+        $
+      {/if}
+    </span>
+    <input
+      id={$fieldStore.id}
+      class="currency-amount"
+      data-variant="embedded"
+      use:inputRegexMask={currencyRegex}
+      value={initial_ui_value}
+      inputmode="decimal"
+      aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
+      on:input={on_input}
+    />
+
+    <!-- currency selector back right -->
+    {#if currency_list.length > 1 && !params?.currency}
+      <Autocomplete
+        id="{$fieldStore.id}-currency"
+        options={currency_options}
+        value={current_details.currencycode}
+        variant="embedded"
+        ariaLabel="Currency"
+        emptyMessage="No currency found."
+        on:select={(event) => select_currency(event.detail)}
+      >
+        <svelte:fragment slot="option" let:option>
+          {option.currency.value} - {option.currency.name} ({option.currency.symbol})
+        </svelte:fragment>
+      </Autocomplete>
     {/if}
   </div>
-  <input
-    class="w-full bg-transparent focus-within:outline-none"
-    use:inputRegexMask={currencyRegex}
-    value={initial_ui_value}
-    inputmode="decimal"
-    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-    on:input={on_input}
-  />
-
-  <!-- currency selector back right -->
-  {#if currency_list.length > 1 && !params?.currency}
-    <Popover.Root bind:open let:ids>
-      <Popover.Trigger asChild let:builder>
-        <Button
-          builders={[builder]}
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          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="max-h-[50vh] overflow-y-scroll p-0">
-        <Command.Root>
-          <Command.Input placeholder="Search currencies..." />
-          <Command.Empty>No currency found.</Command.Empty>
-          <Command.Group>
-            {#each currency_list as c}
-              <Command.Item
-                value={c.value}
-                onSelect={(currentValue) => {
-                  current_details = {
-                    ...current_details,
-                    currencycode: currentValue,
-                    currencysymbol: getSymbolFromCurrency(currentValue) || "",
-                  };
-                  set_value_details($fieldStore, "details", current_details);
-                  open = false;
-                }}
-                class={selectedValue === c.value ? "bg-primary-100" : ""}
-              >
-                {c.value} - {c.name} ({c.symbol})
-              </Command.Item>
-            {/each}
-          </Command.Group>
-        </Command.Root>
-      </Popover.Content>
-    </Popover.Root>
-  {/if}
+  <FieldMessage {fieldStore} />
 </div>
-<FieldMessage {fieldStore} />
+
+<style>
+  .currency-field {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .currency-input {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+  }
+
+  .currency-symbol {
+    flex: none;
+    padding-right: 0.5rem;
+  }
+
+  .currency-amount {
+    min-width: 0;
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: inherit;
+  }
+
+  .currency-amount:focus {
+    outline: none;
+  }
+
+  .currency-amount:-webkit-autofill,
+  .currency-amount:-webkit-autofill:hover,
+  .currency-amount:-webkit-autofill:focus {
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: currentColor;
+  }
+</style>

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

@@ -0,0 +1,39 @@
+<script context="module"></script>
+
+<script>import { isString } from "lodash-es";
+import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+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>
+
+<div class="data-indication-field">
+  <FieldLabel {fieldStore} />
+  <output
+    id={$fieldStore.id}
+    class="data-indication-output"
+    aria-describedby="message-{$fieldStore.id}"
+  >
+    <pre class="data-indication-content">{value ?? ""}</pre>
+  </output>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .data-indication-field {
+    min-width: 0;
+  }
+
+  .data-indication-output {
+    display: block;
+    overflow: auto;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+</script>
+
+<div class="date-field">
+  <FieldLabel {fieldStore} />
+  <input
+    id={$fieldStore.id}
+    bind:value={$fieldStore.value}
+    type="date"
+    class={classNames("date-input", $styles.input)}
+    class:date-input-empty={!$fieldStore.value}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .date-field,
+  .date-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+</script>
+
+<div class="date-time-field">
+  <FieldLabel {fieldStore} />
+  <input
+    id={$fieldStore.id}
+    bind:value={$fieldStore.value}
+    type="datetime-local"
+    class={classNames("date-time-input", $styles.input)}
+    class:date-time-input-empty={!$fieldStore.value}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .date-time-field,
+  .date-time-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>

package/dist/form-fields/{sub → fields}/email-field.svelte

@@ -1,12 +1,14 @@
 <script context="module"></script>
 
-<script>import { Input } from "@stubber/ui/input";
+<script>import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
 import { set_value_details } from "../utils";
 export let fieldStore;
 const field = $fieldStore;
 const formStore = field.formStore;
+const styles = getContext(STYLES_CONTEXT);
 $: value = $fieldStore.value;
 $: {
   const regex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
@@ -28,13 +30,25 @@ function on_input(event) {
 }
 </script>
 
-<FieldLabel {fieldStore} />
-<Input
-  id={$fieldStore.id}
-  {value}
-  placeholder={$fieldStore.label}
-  on:input={on_input}
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  aria-describedby="message-{$fieldStore.id}"
-/>
-<FieldMessage {fieldStore} />
+<div class="email-field">
+  <FieldLabel {fieldStore} />
+  <input
+    class={classNames("email-input", $styles.input)}
+    id={$fieldStore.id}
+    type="email"
+    value={value ?? ""}
+    placeholder={$fieldStore.label}
+    on:input={on_input}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .email-field,
+  .email-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>