@leavepulse/ui 0.78.1 → 0.78.3

package/src/components/LpTimeField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
@@ -22,7 +23,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
-import { focusLeft, useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { focusLeft, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 
@@ -34,6 +35,8 @@ const props = withDefaults(
     modelValue?: string
     disabled?: boolean
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     size?: "sm" | "md" | "lg"
     /** 24 or 12-hour clock, independent of the browser locale. */
     hourCycle?: 12 | 24
@@ -68,9 +71,7 @@ function onUpdate(next: unknown) {
   emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`)
 }
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid,
   disabled: props.disabled,
 }))
 
@@ -82,13 +83,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     "flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
     shellSize[props.size],
     field.value.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
 usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <TimeFieldRoot
     v-slot="{ segments }"
     :model-value="value"
@@ -121,4 +122,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       </TimeFieldInput>
     </template>
   </TimeFieldRoot>
+  </FieldWrapper>
 </template>

package/src/components/calendar.ts

@@ -52,6 +52,8 @@ export interface PickerFieldProps {
   clearable?: boolean
   disabled?: boolean
   invalid?: boolean
+  /** A message under the picker, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string
   size?: "sm" | "md" | "lg"
   /** Locale of the shown date and the calendar; defaults to reka's ConfigProvider, then the browser. */
   locale?: string

package/src/composables/useField.ts

@@ -154,6 +154,58 @@ export function fieldWrapperBinds(
   return { wrapped, id: field.id, label, hint, error, required, class: attrs.class, style: attrs.style }
 }
 
+/**
+ * Whether a control with these props draws its own LpFormField. A label or a
+ * hint is its own; an error alone is, except inside an outer LpFormField, which
+ * owns the label (its `for` points at the control) and the message line: a
+ * second field in it showed the message twice and took the label's control id.
+ * There the error only marks the control invalid.
+ */
+export function wrapsItself(
+  own: { label?: string; hint?: string; error?: string },
+  outer: ComputedRef<FieldContext> | null,
+): boolean {
+  if (own.label || own.hint) return true
+  return !!own.error && !outer?.value
+}
+
+/**
+ * A control that takes `label`, `hint` and `error` the way LpInput does: given
+ * any of them it wraps itself in LpFormField (FieldWrapper, bound to
+ * `wrapper`), an error marks it invalid, and the consumer's class and style lay
+ * out that field instead of the control (`ownAttrs` says whether the control's
+ * root still takes them). Without them it is the bare control, as before. So
+ * `v-bind="form.field('x')"`, which hands every control `error`, shows the
+ * message on any of them.
+ * Inside an outer LpFormField an error alone does not wrap (wrapsItself).
+ */
+export function useOwnField(
+  state: () => { label?: string; hint?: string; error?: string; required?: boolean; invalid?: boolean; disabled?: boolean; id?: string },
+) {
+  const attrs = useAttrs()
+  const outer = useField()
+  const wrapped = computed(() => wrapsItself(state(), outer))
+  const field = useFieldControl(() => {
+    const own = state()
+    return {
+      wrapped: wrapped.value,
+      hasMessage: !!own.error || !!own.hint,
+      id: own.id ?? (typeof attrs.id === "string" ? attrs.id : undefined),
+      invalid: !!own.invalid || !!own.error,
+      required: own.required,
+      disabled: own.disabled,
+    }
+  })
+  const wrapper = computed(() => fieldWrapperBinds(wrapped.value, field.value, state(), attrs))
+  /* The attributes for the control itself: all of them, less the class and style the wrapper takes. */
+  const controlAttrs = computed(() => {
+    if (!wrapped.value) return attrs
+    const { class: _class, style: _style, ...rest } = attrs
+    return rest
+  })
+  return { wrapped, field, wrapper, controlAttrs, ownAttrs: () => !wrapped.value }
+}
+
 /** The state of a control that takes its id from the app and draws no wrapper of its own. */
 export function useAttrsField(state: () => { invalid?: boolean; disabled?: boolean }) {
   const attrs = useAttrs()

package/src/composables/useMergedClass.ts

@@ -62,11 +62,13 @@ function merge(...classes: (string | undefined | null | false)[]): string {
  */
 export function useMergedClass(
   own: MaybeRefOrGetter<string | undefined>,
+  /** False while something else takes the consumer's class (a field wrapper). */
+  takesAttrs: () => boolean = () => true,
 ): ComputedRef<string> {
   const attrs = useAttrs()
   // `cn` returns undefined when everything it was given was empty; a class
   // binding is happier with "" than with undefined.
-  return computed(() => merge(toValue(own), attrs.class as string | undefined))
+  return computed(() => merge(toValue(own), takesAttrs() ? (attrs.class as string | undefined) : undefined))
 }
 
 /**
@@ -85,16 +87,20 @@ export function useMergedClass(
  * Vue appends that second `class` to the merged one, and stylesheet order —
  * not the caller — decides which wins.
  */
-export function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
+export function useMergedAttrs(
+  own: MaybeRefOrGetter<string | undefined>,
+  /** False while a field wrapper takes the consumer's class and style (useOwnField's `ownAttrs`). */
+  takesAttrs: () => boolean = () => true,
+): {
   class: ComputedRef<string>
   attrs: ComputedRef<Record<string, unknown>>
 } {
   const attrs = useAttrs()
   return {
-    class: useMergedClass(own),
+    class: useMergedClass(own, takesAttrs),
     attrs: computed(() => {
-      const { class: _omitted, ...rest } = attrs
-      return rest
+      const { class: _omitted, style, ...rest } = attrs
+      return takesAttrs() ? { ...rest, ...(style === undefined ? {} : { style }) } : rest
     }),
   }
 }

package/dist/chunks/LpAddressInput-BSS49jpm.js

@@ -1,393 +0,0 @@
-import { defineComponent, defineAsyncComponent, computed, watch, ref, onMounted, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, createBlock, createCommentVNode, createTextVNode, toDisplayString, renderSlot, normalizeClass } from "vue";
-import { useAsyncTask } from "../composables/useAsyncTask.js";
-import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
-import { flagEmoji, loadCountries } from "../components/countries.js";
-import { _ as _sfc_main$2 } from "./LpAutocomplete-DkY6CSyD.js";
-import { _ as _sfc_main$3 } from "./LpButton-DSHioIfD.js";
-import { _ as _sfc_main$1 } from "./LpFormField-BKYn9dyP.js";
-import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
-import { _ as _sfc_main$5 } from "./LpInput-D0O6dpuA.js";
-import { _ as _sfc_main$7 } from "./LpModal-DDvrSAnf.js";
-import { _ as _sfc_main$6 } from "./LpSelect-Y-iuSymW.js";
-import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
-import { useLabels } from "../composables/useLpConfig.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-const _hoisted_1 = ["aria-labelledby", "aria-invalid", "aria-describedby"];
-const _hoisted_2 = { class: "flex items-stretch gap-2" };
-const _hoisted_3 = { class: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_10rem]" };
-const _hoisted_4 = {
-  key: 1,
-  class: "flex items-center gap-2"
-};
-const _hoisted_5 = {
-  key: 0,
-  class: "text-xs text-muted"
-};
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpAddressInput",
-  props: {
-    modelValue: {},
-    provider: {},
-    tiles: { default: () => OSM_TILES },
-    only: {},
-    secondLine: { type: Boolean },
-    minChars: { default: 3 },
-    debounce: { default: 350 },
-    language: {},
-    disabled: { type: Boolean },
-    invalid: { type: Boolean },
-    size: { default: "md" },
-    hideMap: { type: Boolean },
-    labels: {}
-  },
-  emits: ["update:modelValue", "pick"],
-  setup(__props, { emit: __emit }) {
-    const LpMapPicker = defineAsyncComponent(() => import("../components/LpMapPicker.vue.js"));
-    const props = __props;
-    const emit = __emit;
-    const DEFAULT_LABELS = {
-      line: "Street and number",
-      linePlaceholder: "Baker Street 221B",
-      secondLine: "Apartment, suite (optional)",
-      secondLinePlaceholder: "Flat 4",
-      city: "City",
-      cityPlaceholder: "London",
-      postalCode: "Postcode",
-      postalCodePlaceholder: "NW1 6XE",
-      country: "Country",
-      countryPlaceholder: "Select country…",
-      countrySearch: "Search country…",
-      pickOnMap: "Pick on map",
-      mapTitle: "Pick a location",
-      mapHint: "Click the map to drop a pin, drag to move around.",
-      use: "Use this address",
-      cancel: "Cancel",
-      searching: "Searching…",
-      noSuggestions: "No suggestions",
-      nothingHere: "No address found here"
-    };
-    const text = useLabels("addressInput", DEFAULT_LABELS, () => props.labels);
-    const fallbackProvider = createNominatimProvider();
-    const geocoder = computed(() => props.provider ?? fallbackProvider);
-    const value = computed(() => props.modelValue ?? emptyAddress());
-    let latest;
-    watch(
-      () => props.modelValue,
-      () => latest = void 0
-    );
-    function patch(changes) {
-      latest = { ...latest ?? value.value, ...changes };
-      emit("update:modelValue", latest);
-    }
-    function edit(changes) {
-      patch({ ...changes, lat: void 0, lon: void 0 });
-    }
-    const allCountries = ref([]);
-    const countries = computed(() => {
-      const only = props.only?.map((code) => code.toUpperCase());
-      return only?.length ? allCountries.value.filter((c) => only.includes(c.iso2)) : allCountries.value;
-    });
-    const countryOptions = computed(
-      () => countries.value.map((country) => ({
-        value: country.iso2,
-        label: `${flagEmoji(country.iso2)} ${country.name}`
-      }))
-    );
-    onMounted(async () => {
-      allCountries.value = await loadCountries();
-    });
-    function useSuggestions(field2) {
-      const options = ref([]);
-      const task = useAsyncTask();
-      function query(term) {
-        if (term.trim().length < props.minChars) {
-          task.cancel();
-          options.value = [];
-          return;
-        }
-        task.run(
-          (signal) => geocoder.value.search(term.trim(), field2, {
-            country: value.value.country || void 0,
-            language: props.language,
-            signal
-          }),
-          {
-            delay: props.debounce,
-            apply: (found) => options.value = found,
-            // Network failure: leave the field usable as free text.
-            fail: () => options.value = []
-          }
-        );
-      }
-      return { options, loading: task.pending, query };
-    }
-    const lineSuggestions = useSuggestions("line");
-    const citySuggestions = useSuggestions("city");
-    function applySuggestion(suggestion, keep) {
-      const parsed = suggestion.address;
-      const changes = { lat: suggestion.lat, lon: suggestion.lon };
-      if (parsed.line && keep !== "line") changes.line = parsed.line;
-      if (parsed.city) changes.city = parsed.city;
-      if (parsed.postalCode) changes.postalCode = parsed.postalCode;
-      if (parsed.country) changes.country = parsed.country;
-      patch(changes);
-    }
-    function onLineSelect(chosen) {
-      const suggestion = lineSuggestions.options.value.find((option) => option.value === chosen);
-      if (suggestion) applySuggestion(suggestion, "line");
-    }
-    function onCitySelect(chosen) {
-      const suggestion = citySuggestions.options.value.find((option) => option.value === chosen);
-      if (suggestion) applySuggestion(suggestion, "city");
-    }
-    const mapOpen = ref(false);
-    const point = ref();
-    const resolved = ref();
-    const resolving = ref(false);
-    computed(
-      () => countries.value.find((c) => c.iso2 === value.value.country)?.name
-    );
-    const preview = computed(() => {
-      if (resolving.value) return text.value.searching;
-      if (!point.value) return text.value.mapHint;
-      if (!resolved.value) return text.value.nothingHere;
-      const parsed = resolved.value.address;
-      return formatAddress(
-        {
-          line: parsed.line ?? "",
-          city: parsed.city ?? "",
-          postalCode: parsed.postalCode ?? "",
-          country: parsed.country ?? ""
-        },
-        countries.value.find((c) => c.iso2 === parsed.country)?.name
-      );
-    });
-    watch(mapOpen, (open) => {
-      if (!open) return;
-      point.value = value.value.lat != null && value.value.lon != null ? { lat: value.value.lat, lon: value.value.lon } : void 0;
-      resolved.value = void 0;
-    });
-    const reverse = useAsyncTask();
-    watch(reverse.pending, (busy) => resolving.value = busy);
-    function onPick(next) {
-      point.value = next;
-      resolved.value = void 0;
-      reverse.run(
-        () => geocoder.value.reverse(next.lat, next.lon, { language: props.language }),
-        {
-          apply: (found) => resolved.value = found,
-          fail: () => resolved.value = void 0
-        }
-      );
-    }
-    function confirmPoint() {
-      if (!point.value) return;
-      const parsed = resolved.value?.address ?? {};
-      patch({
-        line: parsed.line ?? value.value.line,
-        city: parsed.city ?? value.value.city,
-        postalCode: parsed.postalCode ?? value.value.postalCode,
-        country: parsed.country ?? value.value.country,
-        lat: point.value.lat,
-        lon: point.value.lon
-      });
-      emit("pick", point.value);
-      mapOpen.value = false;
-    }
-    const field = useFieldControl(() => ({ wrapped: false, invalid: props.invalid, disabled: props.disabled }));
-    const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "flex flex-col gap-3"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        role: "group",
-        "aria-labelledby": unref(field).labelId,
-        "aria-invalid": unref(field).invalid || void 0,
-        class: unref(rootClass)
-      }, unref(rest), {
-        "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy)
-      }), [
-        createVNode(_sfc_main$1, {
-          label: unref(text).line
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_2, [
-              createVNode(_sfc_main$2, {
-                class: "min-w-0 flex-1",
-                "model-value": value.value.line,
-                options: unref(lineSuggestions).options.value,
-                loading: unref(lineSuggestions).loading.value,
-                filter: false,
-                "min-chars": __props.minChars,
-                disabled: unref(field).disabled,
-                invalid: unref(field).invalid,
-                size: __props.size,
-                placeholder: unref(text).linePlaceholder,
-                "empty-text": unref(text).noSuggestions,
-                "loading-text": unref(text).searching,
-                icon: "lucide:map-pin",
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = (next) => {
-                  edit({ line: next });
-                  unref(lineSuggestions).query(next);
-                }),
-                onSelect: onLineSelect
-              }, null, 8, ["model-value", "options", "loading", "min-chars", "disabled", "invalid", "size", "placeholder", "empty-text", "loading-text"]),
-              !__props.hideMap ? (openBlock(), createBlock(_sfc_main$3, {
-                key: 0,
-                variant: "soft",
-                size: __props.size,
-                square: "",
-                disabled: unref(field).disabled,
-                title: unref(text).pickOnMap,
-                "aria-label": unref(text).pickOnMap,
-                onClick: _cache[1] || (_cache[1] = ($event) => mapOpen.value = true)
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$4, {
-                    name: "lucide:map",
-                    size: 16
-                  })
-                ]),
-                _: 1
-              }, 8, ["size", "disabled", "title", "aria-label"])) : createCommentVNode("", true)
-            ])
-          ]),
-          _: 1
-        }, 8, ["label"]),
-        __props.secondLine ? (openBlock(), createBlock(_sfc_main$5, {
-          key: 0,
-          "model-value": value.value.line2 ?? "",
-          label: unref(text).secondLine,
-          placeholder: unref(text).secondLinePlaceholder,
-          disabled: unref(field).disabled,
-          invalid: unref(field).invalid,
-          size: __props.size,
-          autocomplete: "address-line2",
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = (next) => patch({ line2: next }))
-        }, null, 8, ["model-value", "label", "placeholder", "disabled", "invalid", "size"])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3, [
-          createVNode(_sfc_main$1, {
-            label: unref(text).city
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$2, {
-                "model-value": value.value.city,
-                options: unref(citySuggestions).options.value,
-                loading: unref(citySuggestions).loading.value,
-                filter: false,
-                "min-chars": __props.minChars,
-                disabled: unref(field).disabled,
-                invalid: unref(field).invalid,
-                size: __props.size,
-                placeholder: unref(text).cityPlaceholder,
-                "empty-text": unref(text).noSuggestions,
-                "loading-text": unref(text).searching,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = (next) => {
-                  edit({ city: next });
-                  unref(citySuggestions).query(next);
-                }),
-                onSelect: onCitySelect
-              }, null, 8, ["model-value", "options", "loading", "min-chars", "disabled", "invalid", "size", "placeholder", "empty-text", "loading-text"])
-            ]),
-            _: 1
-          }, 8, ["label"]),
-          createVNode(_sfc_main$5, {
-            "model-value": value.value.postalCode,
-            label: unref(text).postalCode,
-            placeholder: unref(text).postalCodePlaceholder,
-            disabled: unref(field).disabled,
-            invalid: unref(field).invalid,
-            size: __props.size,
-            autocomplete: "postal-code",
-            "onUpdate:modelValue": _cache[4] || (_cache[4] = (next) => edit({ postalCode: next }))
-          }, null, 8, ["model-value", "label", "placeholder", "disabled", "invalid", "size"])
-        ]),
-        createVNode(_sfc_main$1, {
-          label: unref(text).country
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$6, {
-              "model-value": value.value.country,
-              options: countryOptions.value,
-              placeholder: unref(text).countryPlaceholder,
-              "search-placeholder": unref(text).countrySearch,
-              disabled: unref(field).disabled,
-              invalid: unref(field).invalid,
-              size: __props.size,
-              searchable: "",
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = (next) => edit({ country: String(next ?? "") }))
-            }, null, 8, ["model-value", "options", "placeholder", "search-placeholder", "disabled", "invalid", "size"])
-          ]),
-          _: 1
-        }, 8, ["label"]),
-        !__props.hideMap ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createVNode(_sfc_main$3, {
-            variant: "soft",
-            size: __props.size === "lg" ? "md" : "sm",
-            disabled: unref(field).disabled,
-            onClick: _cache[6] || (_cache[6] = ($event) => mapOpen.value = true)
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$4, {
-                name: "lucide:map",
-                size: 15
-              }),
-              createTextVNode(" " + toDisplayString(unref(text).pickOnMap), 1)
-            ]),
-            _: 1
-          }, 8, ["size", "disabled"]),
-          value.value.lat != null && value.value.lon != null ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(value.value.lat.toFixed(5)) + ", " + toDisplayString(value.value.lon.toFixed(5)), 1)) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$7, {
-          open: mapOpen.value,
-          "onUpdate:open": _cache[8] || (_cache[8] = ($event) => mapOpen.value = $event),
-          title: unref(text).mapTitle,
-          size: "2xl"
-        }, {
-          footer: withCtx(() => [
-            createVNode(_sfc_main$3, {
-              variant: "ghost",
-              onClick: _cache[7] || (_cache[7] = ($event) => mapOpen.value = false)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(text).cancel), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$3, {
-              disabled: !point.value,
-              onClick: confirmPoint
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(text).use), 1)
-              ]),
-              _: 1
-            }, 8, ["disabled"])
-          ]),
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "map", {
-              point: point.value,
-              setPoint: onPick,
-              tiles: __props.tiles
-            }, () => [
-              createVNode(unref(LpMapPicker), {
-                "model-value": point.value,
-                tiles: __props.tiles,
-                "onUpdate:modelValue": onPick
-              }, null, 8, ["model-value", "tiles"])
-            ]),
-            createElementVNode("p", {
-              class: normalizeClass(["mt-3 min-h-5 text-sm", resolved.value || resolving.value ? "text-ink" : "text-muted"])
-            }, toDisplayString(preview.value), 3)
-          ]),
-          _: 3
-        }, 8, ["open", "title"])
-      ], 16, _hoisted_1);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};