@stubber/form-fields 2.2.6 → 3.0.0

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

@@ -30,12 +30,13 @@ export const map_field_param_spec = {
 </script>
 
 <script>import { controls, Geocoder, Map, Marker } from "@beyonk/svelte-mapbox";
+import { getContext } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import { mapValues, omit } from "lodash-es";
-import { Input } from "@stubber/ui/input";
-import { Label } from "@stubber/ui/label";
+import { STYLES_CONTEXT, classNames } from "../styles";
 const { GeolocateControl } = controls;
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 const initial_value = $fieldStore.value;
 let params = $fieldStore.params;
 let reverse_geocode_enabled = params?.address_mode && params?.address_mode !== "none";
@@ -133,7 +134,7 @@ function handle_geolocate(o) {
 }
 function handle_address_change(e) {
   const new_address = e?.target?.value || "";
-  if (new_address && $fieldStore.value.address.full_address !== new_address) {
+  if (new_address && $fieldStore.value?.address?.full_address !== new_address) {
     $fieldStore.value = {
       ...$fieldStore.value,
       address: {
@@ -145,93 +146,135 @@ function handle_address_change(e) {
 }
 </script>
 
-<FieldLabel {fieldStore} />
-{#if mapboxAccessToken}
-  <div class="flex w-full flex-col">
-    <div>
+<div class="map-field">
+  <FieldLabel {fieldStore} />
+  {#if mapboxAccessToken}
+    <div class="map-actions">
       <button
         type="button"
         on:click={resetValues}
-        class="text-sm text-surface-300 hover:text-surface-500 hover:underline"
+        class={classNames("map-reset", $styles.button)}
+        data-variant="destructive">Reset</button
       >
-        <i class="fa-regular fa-undo" /> Reset
-      </button>
     </div>
-    <div class="relative mt-2 rounded-md">
-      <div class="h-72 w-full">
-        <Map
-          bind:center
-          zoom={14}
-          accessToken={mapboxAccessToken}
-          style={mapboxStylesheetUrl}
-          bind:this={mapComponent}
-          on:click={handle_map_click}
-        >
-          <div class="absolute left-2 top-2">
-            <Geocoder
-              on:result={handle_geocoder_result}
-              accessToken={mapboxAccessToken}
-              {geocoder}
-            />
-          </div>
-          {#if !hide_geolocate_button}
-            <GeolocateControl position="top-right" on:geolocate={handle_geolocate} />
-          {/if}
-          {#if browserLocation}
-            <Marker
-              lat={browserLocation.lat}
-              lng={browserLocation.lng}
-              markerOptions={{ anchor: "center" }}
-            >
-              <div class="relative flex flex-col items-center">
-                <span class="fa-stack fa-2x">
-                  <i
-                    class="fa-solid fa-circle fa-stack-2x text-[1.3em] leading-[inherit] text-white"
-                  />
-                  <i class="fa-solid fa-user fa-stack-1x text-blue-600" />
-                </span>
+    <div
+      class="map-viewport"
+      id={params?.address_mode === "editable" ? undefined : $fieldStore.id}
+      aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+      aria-describedby="message-{$fieldStore.id}"
+    >
+      <Map
+        bind:center
+        zoom={14}
+        accessToken={mapboxAccessToken}
+        style={mapboxStylesheetUrl}
+        bind:this={mapComponent}
+        on:click={handle_map_click}
+      >
+        <div class="map-search">
+          <Geocoder on:result={handle_geocoder_result} accessToken={mapboxAccessToken} {geocoder} />
+        </div>
+        {#if !hide_geolocate_button}
+          <GeolocateControl position="top-right" on:geolocate={handle_geolocate} />
+        {/if}
+        {#if browserLocation}
+          <Marker
+            lat={browserLocation.lat}
+            lng={browserLocation.lng}
+            markerOptions={{ anchor: "center" }}
+          >
+            <span class="map-browser-marker" aria-hidden="true">
+              <svg class="map-browser-marker-icon" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="10" fill="currentColor" />
+                <circle cx="12" cy="9" r="3" fill="white" />
+                <path d="M6.5 18c.8-3 2.6-4.5 5.5-4.5s4.7 1.5 5.5 4.5" fill="white" />
+              </svg>
+            </span>
+          </Marker>
+        {/if}
+        {#if $fieldStore.value?.lat && $fieldStore.value?.lng}
+          <Marker
+            lat={$fieldStore.value.lat}
+            lng={$fieldStore.value.lng}
+            popup={false}
+            markerOptions={{ anchor: "bottom" }}
+          >
+            <div class="map-location-marker">
+              <div class="map-coordinates">
+                <div>lat: {$fieldStore.value.lat?.toString()?.substring(0, 7)}</div>
+                <div>lng: {$fieldStore.value.lng?.toString()?.substring(0, 7)}</div>
               </div>
-            </Marker>
-          {/if}
-          {#if $fieldStore.value?.lat && $fieldStore.value?.lng}
-            <Marker
-              lat={$fieldStore.value.lat}
-              lng={$fieldStore.value.lng}
-              popup={false}
-              markerOptions={{ anchor: "bottom" }}
-            >
-              <div class="relative flex flex-col items-center">
-                <div
-                  class="rounded-xl bg-white px-2 py-1 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-black/20"
-                >
-                  <div>lat: {$fieldStore.value.lat?.toString()?.substring(0, 7)}</div>
-                  <div>lng: {$fieldStore.value.lng?.toString()?.substring(0, 7)}</div>
-                </div>
-
-                <span class="fa-stack fa-2x h-[1.5em]">
-                  <i
-                    class="fa-solid fa-location-pin fa-stack-2x text-[1.2em] leading-[inherit] text-white"
+              <span aria-hidden="true">
+                <svg class="map-location-marker-icon" viewBox="0 0 24 32">
+                  <path
+                    d="M12 31s10-10.2 10-19A10 10 0 0 0 2 12c0 8.8 10 19 10 19Z"
+                    fill="currentColor"
                   />
-                  <i class="fa-solid fa-location-dot fa-stack-1x text-green-600" />
-                </span>
-              </div>
-            </Marker>
-          {/if}
-        </Map>
-      </div>
+                  <circle cx="12" cy="12" r="4" fill="white" />
+                </svg>
+              </span>
+            </div>
+          </Marker>
+        {/if}
+      </Map>
     </div>
     {#if params?.address_mode === "editable"}
-      <Input
+      <input
+        id={$fieldStore.id}
         type="text"
-        class="mt-1"
+        class={classNames("map-address-input", $styles.input)}
         value={$fieldStore.value?.address?.full_address || ".."}
         on:change={handle_address_change}
+        aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+        aria-describedby="message-{$fieldStore.id}"
       />
     {:else if params?.address_mode === "readonly"}
-      <Label class="mt-1 block text-sm font-medium text-surface-700"
-        >{$fieldStore.value?.address?.full_address || ".."}</Label
-      >
+      <p class="map-address">{$fieldStore.value?.address?.full_address || ".."}</p>
     {/if}
-  </div>
-{/if}
-<FieldMessage {fieldStore} />
+  {/if}
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .map-field,
+  .map-viewport,
+  :where(.map-address-input) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .map-viewport {
+    position: relative;
+    height: 24rem;
+    overflow: hidden;
+  }
+
+  .map-search {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    max-width: 100%;
+  }
+
+  .map-browser-marker-icon,
+  .map-location-marker-icon {
+    display: block;
+    width: 1.5rem;
+  }
+
+  .map-browser-marker-icon {
+    height: 1.5rem;
+  }
+
+  .map-location-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .map-location-marker-icon {
+    height: 2rem;
+  }
+</style>

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

@@ -25,12 +25,13 @@ export const multi_checkbox_field_param_spec = {
 };
 </script>
 
-<script>import { Checkbox } from "@stubber/ui/checkbox";
-import { Label } from "@stubber/ui/label";
-import { cloneDeep, startCase } from "lodash-es";
+<script>import { cloneDeep, startCase } from "lodash-es";
+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);
 let options = $fieldStore.params?.options || {};
 if ($fieldStore.value) {
   const newValue = {};
@@ -62,22 +63,36 @@ const handle_check_change = (key, item, checked) => {
   };
   $fieldStore.value = cloneDeep({ ...$fieldStore.value });
 };
+const handle_change = (key, item, event) => {
+  handle_check_change(key, item, event.currentTarget.checked);
+};
 </script>
 
-<FieldLabel {fieldStore} />
-{#each Object.entries(options) as [key, item] (key)}
-  {@const checked = $fieldStore.value?.[key]?.checked ?? false}
-  <div class="flex space-x-3 relative mt-2">
-    <Checkbox
-      id="{$fieldStore.id}_{key}"
-      name={key}
-      {checked}
-      onCheckedChange={(checked) => handle_check_change(key, item, checked)}
-    />
-
-    <Label for="{$fieldStore.id}_{key}">
-      {item.label || startCase(key)}
-    </Label>
-  </div>
-{/each}
-<FieldMessage {fieldStore} />
+<div class="multi-checkbox-field">
+  <FieldLabel {fieldStore} />
+  <fieldset
+    class="multi-checkbox-options"
+    class:multi-checkbox-options-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-label={$fieldStore.label}
+    aria-describedby="message-{$fieldStore.id}"
+  >
+    {#each Object.entries(options) as [key, item] (key)}
+      {@const checked = Boolean($fieldStore.value?.[key]?.checked)}
+      <div class="multi-checkbox-option" class:multi-checkbox-option-checked={checked}>
+        <input
+          class={classNames("multi-checkbox-input", $styles.choice)}
+          id="{$fieldStore.id}_{key}"
+          name={key}
+          type="checkbox"
+          {checked}
+          aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+          on:change={(event) => handle_change(key, item, event)}
+        />
+        <label class="multi-checkbox-label" for="{$fieldStore.id}_{key}">
+          {item.label || startCase(key)}
+        </label>
+      </div>
+    {/each}
+  </fieldset>
+  <FieldMessage {fieldStore} />
+</div>

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

@@ -0,0 +1,135 @@
+<script context="module">import { get } from "svelte/store";
+import {} from "../interfaces";
+</script>
+
+<script>import { getContext, tick } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import FormField from "../form-field.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+$: fields = $fieldStore.sub_fields || [];
+let allChildrenConditionsChecked = true;
+let current_page_index = 0;
+let stepButtons = [];
+$: if (fields.length && current_page_index >= fields.length) {
+  current_page_index = fields.length - 1;
+}
+async function focus_page(index) {
+  current_page_index = index;
+  await tick();
+  stepButtons[index]?.focus();
+}
+function handle_step_keydown(event, index) {
+  let nextIndex;
+  if (event.key === "ArrowRight") nextIndex = (index + 1) % fields.length;
+  if (event.key === "ArrowLeft") nextIndex = (index - 1 + fields.length) % fields.length;
+  if (event.key === "Home") nextIndex = 0;
+  if (event.key === "End") nextIndex = fields.length - 1;
+  if (nextIndex !== void 0) {
+    event.preventDefault();
+    void focus_page(nextIndex);
+  }
+}
+</script>
+
+<FieldLabel {fieldStore} />
+
+{#if fields?.length}
+  <div
+    class="multistep-field"
+    class:multistep-field-hidden={!allChildrenConditionsChecked}
+    hidden={!allChildrenConditionsChecked}
+  >
+    <div class="multistep-steps" role="tablist" aria-label={`${$fieldStore.label} steps`}>
+      {#each fields as page, index (get(page).id)}
+        <button
+          bind:this={stepButtons[index]}
+          type="button"
+          id="tab-{$fieldStore.id}-{index}"
+          class={classNames("multistep-step", $styles.button)}
+          class:multistep-step-current={current_page_index === index}
+          role="tab"
+          aria-selected={current_page_index === index}
+          aria-controls="panel-{$fieldStore.id}-{index}"
+          tabindex={current_page_index === index ? 0 : -1}
+          on:click={() => (current_page_index = index)}
+          on:keydown={(event) => handle_step_keydown(event, index)}
+        >
+          <span
+            class="multistep-marker"
+            class:multistep-marker-current={current_page_index === index}
+            aria-hidden="true"
+          >
+            {index + 1}
+          </span>
+          <span class="multistep-step-label">{get(page).label}</span>
+        </button>
+      {/each}
+    </div>
+
+    <div class="multistep-panels">
+      {#each fields as sub_field, index (get(sub_field).id)}
+        <div
+          id="panel-{$fieldStore.id}-{index}"
+          class="multistep-panel"
+          class:multistep-panel-hidden={current_page_index !== index}
+          role="tabpanel"
+          aria-labelledby="tab-{$fieldStore.id}-{index}"
+          hidden={current_page_index !== index}
+          tabindex="0"
+        >
+          <FormField fieldStore={sub_field} />
+        </div>
+      {/each}
+    </div>
+
+    <div class="multistep-actions">
+      {#if current_page_index > 0}
+        <button
+          type="button"
+          class={classNames("multistep-back", $styles.button)}
+          on:click={() => (current_page_index = current_page_index - 1)}
+        >
+          Back
+        </button>
+      {/if}
+      {#if current_page_index < fields.length - 1}
+        <button
+          type="button"
+          class={classNames("multistep-next", $styles.button)}
+          data-variant="primary"
+          on:click={() => (current_page_index = current_page_index + 1)}
+        >
+          Next
+        </button>
+      {/if}
+    </div>
+    <FieldMessage {fieldStore} />
+  </div>
+{/if}
+
+<style>
+  .multistep-field,
+  .multistep-panels,
+  .multistep-panel {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .multistep-steps {
+    display: flex;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .multistep-step {
+    flex: none;
+  }
+
+  .multistep-actions {
+    display: flex;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<script context="module">import {} from "../interfaces";
+</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="note-field">
+  <FieldLabel {fieldStore} />
+  <textarea
+    class={classNames("note-input", $styles?.input)}
+    id={$fieldStore.id}
+    bind:value={$fieldStore.value}
+    placeholder={$fieldStore.label}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+    aria-describedby={$fieldStore.validation_result ? `message-${$fieldStore.id}` : undefined}
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .note-field,
+  .note-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .note-input {
+    min-height: 100px;
+  }
+</style>

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

@@ -36,10 +36,12 @@
 };
 </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";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 function onInput(e) {
   const input_element = e.target;
   let { value } = input_element;
@@ -62,16 +64,29 @@ function onBlur() {
 }
 </script>
 
-<FieldLabel {fieldStore} />
-<Input
-  id={$fieldStore.id}
-  value={$fieldStore.value}
-  on:input={onInput}
-  on:blur={onBlur}
-  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
-  type="number"
-  step={$fieldStore.step || 0}
-  max={$fieldStore.max}
-  min={$fieldStore.min}
-/>
-<FieldMessage {fieldStore} />
+<div class="number-field">
+  <FieldLabel {fieldStore} />
+  <input
+    class={classNames("number-input", $styles.input)}
+    id={$fieldStore.id}
+    value={$fieldStore.value ?? ""}
+    placeholder={$fieldStore.label}
+    on:input={onInput}
+    on:blur={onBlur}
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    aria-describedby="message-{$fieldStore.id}"
+    type="number"
+    step={$fieldStore.step}
+    max={$fieldStore.max}
+    min={$fieldStore.min}
+  />
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .number-field,
+  .number-input {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>