@leavepulse/ui 0.44.0 → 0.45.0

package/src/components/LpPhoneInput.vue

@@ -13,8 +13,14 @@ export default { inheritAttrs: false }
  * match wins). The model is the full string ("+380501234567"); a `change` event
  * also carries the parsed { country, dialCode, number } for forms that want it.
  *
- * Deliberately NOT a full phone validator (no libphonenumber) — it stays free
- * text so any number is allowed; `restrict` only blocks obviously non-phone keys.
+ * Numbers are formatted as they are typed ("+380 50 123 4567") with
+ * libphonenumber-js, loaded on first use (see phone.ts). Digits past the
+ * longest number the country allows are dropped with a passing note, and a
+ * number that cannot be right is marked once the field is left, with the reason
+ * floating under it. v-model stays the formatted text the field shows; `change`
+ * also carries `e164` ("+380501234567"), `possible` and `valid`, which
+ * is what a form should store. Until the library arrives the field takes digits
+ * as before, unformatted.
  */
 import {
   ComboboxAnchor,
@@ -27,13 +33,24 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, onMounted, ref, useAttrs } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { computed, onMounted, ref, shallowRef, useAttrs } from "vue"
+import { useField, useFieldControl } from "../composables/useField"
+import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { type Country, filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
 import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
+import {
+  caretAfterDigits,
+  digitsBefore,
+  digitsOf,
+  formatPhone,
+  loadPhoneExamples,
+  loadPhoneLib,
+  type PhoneLib,
+} from "./phone"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface PhoneDetail {
@@ -43,6 +60,17 @@ export interface PhoneDetail {
   dialCode: string
   /** National part (digits after the dial code). */
   number: string
+  /** Normalised "+380501234567"; empty when there are no digits. */
+  e164: string
+  /** The length fits the country. False until the formatter has loaded. */
+  possible: boolean
+  /** A real number for the country. False until the formatter has loaded. */
+  valid: boolean
+  /**
+   * "MOBILE", "FIXED_LINE"… when known. The `min` metadata the field loads does
+   * not carry number types, so this stays undefined unless that changes.
+   */
+  type?: string
 }
 
 const props = withDefaults(
@@ -53,6 +81,7 @@ const props = withDefaults(
     only?: string[]
     /** Default country (ISO2) used when the field is empty. */
     defaultCountry?: string
+    /** Unset shows an example number for the active country. */
     placeholder?: string
     disabled?: boolean
     invalid?: boolean
@@ -61,7 +90,7 @@ const props = withDefaults(
     searchPlaceholder?: string
   }>(),
   {
-    placeholder: "Phone number",
+    placeholder: undefined,
     size: "md",
     emptyText: "No country",
     searchPlaceholder: "Search country…",
@@ -106,13 +135,17 @@ const query = ref("")
 
 const filtered = computed(() => filterCountries(countries.value, query.value))
 
+const phoneLib = shallowRef<PhoneLib>()
+
 function parse(value: string): PhoneDetail {
-  const country = matchCountryByValue(value, countries.value)
-  const digits = value.replace(/[^\d]/g, "")
-  if (country) {
-    return { country, dialCode: country.dial, number: digits.slice(country.dial.length) }
-  }
-  return { country: undefined, dialCode: "", number: digits }
+  const formatted = formatPhone(value, phoneLib.value)
+  const country =
+    (formatted.country && countries.value.find((c) => c.iso2 === formatted.country)) ??
+    matchCountryByValue(value, countries.value)
+  const digits = digitsOf(formatted.e164)
+  const base = { e164: formatted.e164, possible: formatted.possible, valid: formatted.valid, type: formatted.type }
+  if (country) return { ...base, country, dialCode: country.dial, number: digits.slice(country.dial.length) }
+  return { ...base, country: undefined, dialCode: "", number: digits }
 }
 
 function setValue(value: string) {
@@ -120,9 +153,85 @@ function setValue(value: string) {
   emit("change", parse(value))
 }
 
+/*
+ * Notes float under the field: the LpFormField around it shows them when there
+ * is one, otherwise the field shows its own.
+ */
+const notice = useFieldNotice()
+const outerField = useField()
+const ownNotice = computed(() => !outerField?.value.notify)
+function say(message: string, options?: FieldNoticeOptions) {
+  if (outerField?.value.notify) outerField.value.notify(message, options)
+  else notice.show(message, options)
+}
+function unsay() {
+  if (outerField?.value.clearNotice) outerField.value.clearNotice()
+  else notice.clear()
+}
+
+/** Shown invalid after the field was left with a number that cannot be right. */
+const flagged = ref(false)
+const countryName = (iso?: string) =>
+  (iso && countries.value.find((c) => c.iso2 === iso)?.name) || ""
+
+/*
+ * Reformat after every edit and put the caret back after the same number of
+ * digits it followed, so spaces the formatter adds or moves never push it
+ * around.
+ */
 function onInput(e: Event) {
   filterInput(e)
-  setValue((e.target as HTMLInputElement).value)
+  const el = e.target as HTMLInputElement
+  const before = digitsBefore(el.value, el.selectionStart ?? el.value.length)
+  const result = formatPhone(el.value, phoneLib.value)
+  if (el.value !== result.display) {
+    el.value = result.display
+    const caret = caretAfterDigits(result.display, Math.min(before, digitsOf(result.display).length))
+    el.setSelectionRange(caret, caret)
+  }
+  if (flagged.value) {
+    flagged.value = false
+    unsay()
+  }
+  if (result.dropped) {
+    const name = countryName(result.country)
+    say(
+      (name ? text.value.tooLongFor : text.value.tooLong)
+        .replace("{country}", name)
+        .replace("{max}", String(digitsOf(result.e164).length - (result.callingCode?.length ?? 0))),
+    )
+  }
+  setValue(result.display)
+}
+
+/*
+ * Backspace or Delete next to a space the formatter put there would only remove
+ * the space, and formatting would put it straight back: the key would seem
+ * dead. The digit beside it goes instead.
+ */
+function onKeyEdit(e: InputEvent) {
+  const el = e.target as HTMLInputElement
+  const start = el.selectionStart ?? 0
+  const end = el.selectionEnd ?? 0
+  const backward = e.inputType === "deleteContentBackward"
+  const forward = e.inputType === "deleteContentForward"
+  if ((!backward && !forward) || start !== end) return
+  const value = el.value
+  const at = backward ? start - 1 : start
+  if (at < 0 || at >= value.length || /\d/.test(value[at]!)) return
+  let i = at
+  while (i >= 0 && i < value.length && !/\d/.test(value[i]!)) i += backward ? -1 : 1
+  if (i < 0 || i >= value.length) return
+  e.preventDefault()
+  el.value = value.slice(0, i) + value.slice(i + 1)
+  const caret = backward ? i : start
+  el.setSelectionRange(caret, caret)
+  el.dispatchEvent(new Event("input", { bubbles: true }))
+}
+
+function onBeforeEdit(e: InputEvent) {
+  onKeyEdit(e)
+  if (!e.defaultPrevented) onBeforeInput(e)
 }
 
 /**
@@ -139,7 +248,31 @@ function chooseCountry(c: Country) {
 }
 
 onMounted(async () => {
-  allCountries.value = await loadCountries()
+  const [list, phone] = await Promise.all([loadCountries(), loadPhoneLib().catch(() => undefined)])
+  allCountries.value = list
+  phoneLib.value = phone
+  // A value set before the formatter arrived is shown formatted from now on.
+  if (phone && props.modelValue) {
+    const display = formatPhone(props.modelValue, phone).display
+    if (display !== props.modelValue) setValue(display)
+  }
+  if (props.placeholder === undefined) examplesFor.value = await loadPhoneExamples().catch(() => undefined)
+})
+
+/* An example number for the active country, when the consumer gave no text. */
+const examplesFor = shallowRef<Awaited<ReturnType<typeof loadPhoneExamples>>>()
+const shownPlaceholder = computed(() => {
+  if (props.placeholder !== undefined) return props.placeholder
+  const phone = phoneLib.value
+  const iso = activeCountry.value?.iso2
+  if (phone && examplesFor.value && iso) {
+    try {
+      return phone.getExampleNumber(iso as never, examplesFor.value)?.formatInternational() ?? text.value.placeholder
+    } catch {
+      return text.value.placeholder
+    }
+  }
+  return text.value.placeholder
 })
 
 // The default country's "+code" is put in place when the user enters an empty
@@ -151,7 +284,21 @@ function onFocus() {
   if (!props.modelValue && seeded.value) setValue(seeded.value)
 }
 function onBlur() {
-  if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) setValue("")
+  if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) {
+    setValue("")
+    return
+  }
+  const result = phoneLib.value && props.modelValue ? formatPhone(props.modelValue, phoneLib.value) : undefined
+  if (!result || result.valid || digitsOf(result.e164).length <= (activeCountry.value?.dial.length ?? 0)) return
+  flagged.value = true
+  const name = countryName(result.country) || activeCountry.value?.name || ""
+  const reason =
+    result.problem === "too-short"
+      ? (name ? text.value.tooShortFor : text.value.tooShort)
+      : result.problem === "invalid-country"
+        ? text.value.unknownCountry
+        : text.value.invalidNumber
+  say(reason.replace("{country}", name), { tone: "danger", duration: 0 })
 }
 
 const sizeClass = {
@@ -168,13 +315,23 @@ const attrs = useAttrs()
 const field = useFieldControl(() => ({
   wrapped: false,
   id: typeof attrs.id === "string" ? attrs.id : undefined,
-  invalid: props.invalid,
+  invalid: props.invalid || flagged.value,
   disabled: props.disabled,
 }))
-const text = useLabels("phoneInput", { selectCountry: "Select country" })
+const text = useLabels("phoneInput", {
+  selectCountry: "Select country",
+  placeholder: "Phone number",
+  tooLong: "A phone number has at most {max} digits",
+  tooLongFor: "Numbers in {country} have at most {max} digits after the code",
+  tooShort: "This number is too short",
+  tooShortFor: "Too short for {country}",
+  invalidNumber: "Not a valid phone number",
+  unknownCountry: "Unknown country code",
+})
+const noticeId = `${field.value.id ?? "lp-phone"}-notice`
 const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
-    "flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
+    "relative flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
     sizeClass[props.size],
     field.value.invalid
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
@@ -224,6 +381,7 @@ const inputAttrs = computed(() => {
 
       <ComboboxPortal>
         <ComboboxContent
+          :collision-padding="8"
           position="popper"
           align="start"
           :side-offset="6"
@@ -272,18 +430,19 @@ const inputAttrs = computed(() => {
       v-bind="inputAttrs"
       :id="field.id"
       :value="modelValue"
-      :placeholder="placeholder"
+      :placeholder="shownPlaceholder"
       :disabled="field.disabled"
       :required="field.required || undefined"
       :aria-invalid="field.invalid || undefined"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="[field.describedBy, notice.message.value ? noticeId : ''].filter(Boolean).join(' ') || undefined"
       class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
-      @beforeinput="onBeforeInput"
+      @beforeinput="onBeforeEdit"
       @paste="onPaste"
       @compositionend="onCompositionEnd"
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
     />
+    <LpFieldNotice v-if="ownNotice" :notice="notice" :id="noticeId" />
   </div>
 </template>

package/src/components/LpPie.vue

@@ -697,16 +697,19 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               </span>
             </LpShift>
           </template>
+            <!-- The canvas keeps its natural size where there is room and scales
+                 down as a whole where there is not (a phone, a narrow column):
+                 the callout labels widen the box well past the circle, and at a
+                 fixed width they ran off the screen. -->
             <div
-              class="relative shrink-0"
-              :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"
+              class="relative max-w-full shrink-0 max-sm:mx-auto"
+              :style="{ width: `${canvasWidth}px`, aspectRatio: `${canvasWidth} / ${canvasHeight}` }"
             >
             <!-- Clicking the empty middle (or the gaps) clears, so a selection can
                  be dropped without hunting for somewhere outside the chart. -->
             <svg
-              :width="canvasWidth"
-              :height="canvasHeight"
-              class="touch-none select-none"
+              :viewBox="`0 0 ${canvasWidth} ${canvasHeight}`"
+              class="block size-full touch-none select-none"
               role="img"
               :aria-label="summary"
               @pointerleave="leaveChart"

package/src/components/LpPopover.vue

@@ -32,6 +32,7 @@ const open = defineModel<boolean>("open")
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        :collision-padding="8"
         :side="side"
         :align="align"
         :side-offset="sideOffset"