@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpPagination.vue

@@ -22,6 +22,7 @@ import { computed, useId } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 const props = withDefaults(
   defineProps<{
@@ -35,22 +36,37 @@ const props = withDefaults(
     /** Pages shown on each side of the current one in the inner run. */
     siblings?: number
     disabled?: boolean
+    labels?: Partial<Record<"nav" | "previous" | "next", string>>
   }>(),
   { page: 1, pageSize: 10, siblings: 1 },
 )
 
+const text = useLabels(
+  "pagination",
+  { nav: "Pagination", previous: "Previous page", next: "Next page" },
+  () => props.labels,
+)
+
 const emit = defineEmits<{
   (e: "update:page", value: number): void
   (e: "change", value: number): void
 }>()
 
 const count = computed(() => {
-  if (props.pageCount != null) return Math.max(1, props.pageCount)
-  if (props.total != null) return Math.max(1, Math.ceil(props.total / props.pageSize))
-  return 1
+  // Guarded so a zero page size or a total still loading never yields an
+  // "Infinity" or "NaN" page.
+  const n =
+    props.pageCount != null
+      ? props.pageCount
+      : props.total != null && props.pageSize > 0
+        ? Math.ceil(props.total / props.pageSize)
+        : 1
+  return Number.isFinite(n) ? Math.max(1, Math.floor(n)) : 1
 })
 
-const current = computed(() => Math.min(Math.max(1, props.page), count.value))
+const current = computed(() =>
+  Number.isFinite(props.page) ? Math.min(Math.max(1, Math.floor(props.page)), count.value) : 1,
+)
 
 // A fixed run of page slots. Each slot is either a real page or a gap ("…").
 // The number of slots is constant for a given `count`, so the row width is
@@ -122,12 +138,12 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 <template>
   <nav
     :class="rootClass"
-    v-bind="rest" aria-label="Pagination">
+    v-bind="rest" :aria-label="text.nav">
     <button
       type="button"
       :class="[navBase, navArrow]"
       :disabled="disabled || current === 1"
-      aria-label="Previous page"
+      :aria-label="text.previous"
       @click="go(current - 1)"
     >
       <LpIcon name="lucide:chevron-left" :size="16" />
@@ -171,7 +187,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       type="button"
       :class="[navBase, navArrow]"
       :disabled="disabled || current === count"
-      aria-label="Next page"
+      :aria-label="text.next"
       @click="go(current + 1)"
     >
       <LpIcon name="lucide:chevron-right" :size="16" />

package/src/components/LpPasswordInput.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 // Password field = LpInput + a show/hide toggle in its trailing slot.
 // No duplicated field styling — the shell lives in LpInput.
 import { ref } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 
@@ -23,6 +24,7 @@ defineProps<{
 }>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
+const text = useLabels("passwordInput", { show: "Show password", hide: "Hide password" })
 const visible = ref(false)
 const inner = ref<InstanceType<typeof LpInput> | null>(null)
 defineExpose({
@@ -35,6 +37,7 @@ defineExpose({
 <template>
   <LpInput
     ref="inner"
+    v-bind="$attrs"
     :model-value="modelValue"
     :type="visible ? 'text' : 'password'"
     :placeholder="placeholder"
@@ -51,7 +54,7 @@ defineExpose({
       <button
         type="button"
         class="group rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
-        :aria-label="visible ? 'Hide password' : 'Show password'"
+        :aria-label="visible ? text.hide : text.show"
         @click="visible = !visible"
       >
         <LpIcon

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,11 +33,24 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, onMounted, ref } from "vue"
+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 { type Country, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
+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 {
@@ -41,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(
@@ -51,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
@@ -59,7 +90,7 @@ const props = withDefaults(
     searchPlaceholder?: string
   }>(),
   {
-    placeholder: "Phone number",
+    placeholder: undefined,
     size: "md",
     emptyText: "No country",
     searchPlaceholder: "Search country…",
@@ -74,7 +105,9 @@ const emit = defineEmits<{
 // Phone keys only: digits, "+", spaces and the usual separators. Free typing of
 // "+code" stays possible; letters and junk are blocked at the source.
 const PHONE_CHARS = /[\d+()\-\s]/
-const { onBeforeInput, onPaste } = useInputFilter({ restrict: () => PHONE_CHARS })
+const { onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
+  restrict: () => PHONE_CHARS,
+})
 
 // The dial-code table is code-split; it's empty until the lazy chunk resolves.
 // Everything degrades gracefully meanwhile: digits still parse, the flag shows a
@@ -100,21 +133,19 @@ const activeCountry = computed<Country | undefined>(
 const open = ref(false)
 const query = ref("")
 
-const filtered = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  if (!q) return countries.value
-  return countries.value.filter(
-    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q.replace(/\D/g, "")),
-  )
-})
+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) {
@@ -122,8 +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) {
-  setValue((e.target as HTMLInputElement).value)
+  filterInput(e)
+  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,16 +247,60 @@ function chooseCountry(c: Country) {
   query.value = ""
 }
 
-// Load the dial-code table on mount (lazy chunk), then seed the default
-// country's "+code" into an empty field so the user starts with the prefix in
-// place — but never clobber a value the consumer already provided.
 onMounted(async () => {
-  allCountries.value = await loadCountries()
-  if (!props.modelValue && fallback.value) {
-    emit("update:modelValue", `+${fallback.value.dial} `)
+  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
+// field, and taken back out if they leave without typing a number. Seeding it
+// on mount instead made every untouched optional field submit "+380 ", pass
+// `required`, and read as edited.
+const seeded = computed(() => (fallback.value ? `+${fallback.value.dial} ` : ""))
+function onFocus() {
+  if (!props.modelValue && seeded.value) setValue(seeded.value)
+}
+function onBlur() {
+  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 = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -157,23 +309,47 @@ const sizeClass = {
 
 // The control is full-width with its own frame — the two things a consumer
 // placing it in a narrow column has to change, so `class="w-48"` must win.
+// style lays out the frame; every other attr (name, autocomplete, @blur…)
+// belongs to the number <input>.
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid || flagged.value,
+  disabled: props.disabled,
+}))
+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],
-    props.invalid
+    field.value.invalid
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
       : "border-line focus-within:border-brand",
-    props.disabled ? "cursor-not-allowed opacity-55" : "",
+    field.value.disabled ? "cursor-not-allowed opacity-55" : "",
   ].join(" "),
 )
+const inputAttrs = computed(() => {
+  const { style: _s, ...others } = rest.value
+  return others
+})
 </script>
 
 <template>
   <div
     data-lp-ring-owner
     :class="rootClass"
-    v-bind="rest"
+    :style="attrs.style as never"
   >
     <!-- reset-search-term-on-{select,blur}: as in LpSelect, the trigger shows
          the selection and the box only filters, so reka seeding the chosen value
@@ -184,15 +360,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
       :ignore-filter="true"
       :reset-search-term-on-select="false"
       :reset-search-term-on-blur="false"
-      :disabled="disabled"
+      :disabled="field.disabled"
       class="flex"
     >
       <ComboboxAnchor as-child>
         <ComboboxTrigger
           type="button"
-          :disabled="disabled"
-          class="flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-white/[0.04] data-[state=open]:bg-white/[0.04]"
-          aria-label="Select country"
+          :disabled="field.disabled"
+          class="flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-ink/5 data-[state=open]:bg-ink/5"
+          :aria-label="text.selectCountry"
         >
           <span class="text-base leading-none">{{ activeCountry ? flagEmoji(activeCountry.iso2) : "🌐" }}</span>
           <LpIcon
@@ -205,6 +381,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 
       <ComboboxPortal>
         <ComboboxContent
+          :collision-padding="8"
           position="popper"
           align="start"
           :side-offset="6"
@@ -247,17 +424,25 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     </ComboboxRoot>
 
     <input
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :aria-invalid="invalid || undefined"
       type="tel"
       inputmode="tel"
       autocomplete="tel"
+      v-bind="inputAttrs"
+      :id="field.id"
+      :value="modelValue"
+      :placeholder="shownPlaceholder"
+      :disabled="field.disabled"
+      :required="field.required || undefined"
+      :aria-invalid="field.invalid || undefined"
+      :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>