@leavepulse/ui 0.44.0 → 0.45.1

package/src/components/phone.ts

@@ -0,0 +1,140 @@
+/*
+ * The phone-number engine behind LpPhoneInput, split from the component so its
+ * rules are testable. libphonenumber-js (the `min` metadata build) is loaded
+ * on first use, the way the country table is: an app that never renders a
+ * phone field never downloads it, and until it arrives the field still takes
+ * digits, just without formatting or checks.
+ */
+import type { CountryCode } from "libphonenumber-js/min"
+
+export type PhoneLib = typeof import("libphonenumber-js/min")
+type Examples = typeof import("libphonenumber-js/examples.mobile.json")["default"]
+
+let lib: Promise<PhoneLib> | undefined
+let examples: Promise<Examples> | undefined
+
+export function loadPhoneLib(): Promise<PhoneLib> {
+  lib ??= import("libphonenumber-js/min")
+  return lib
+}
+
+export function loadPhoneExamples(): Promise<Examples> {
+  examples ??= import("libphonenumber-js/examples.mobile.json").then((m) => m.default)
+  return examples
+}
+
+/** E.164 allows at most 15 digits, country code included. */
+export const E164_MAX_DIGITS = 15
+
+export function digitsOf(text: string): string {
+  return text.replace(/\D/g, "")
+}
+
+/** How many digits sit before `caret` in `text`. */
+export function digitsBefore(text: string, caret: number): number {
+  return digitsOf(text.slice(0, caret)).length
+}
+
+/**
+ * The caret position in `formatted` that has `count` digits before it, placed
+ * right after the last of them so typing continues from there. Zero digits
+ * puts it after a leading "+".
+ */
+export function caretAfterDigits(formatted: string, count: number): number {
+  if (count <= 0) return formatted.startsWith("+") ? 1 : 0
+  let seen = 0
+  for (let i = 0; i < formatted.length; i++) {
+    if (/\d/.test(formatted[i]!)) {
+      seen++
+      if (seen === count) return i + 1
+    }
+  }
+  return formatted.length
+}
+
+export type PhoneProblem = "too-short" | "too-long" | "invalid" | "invalid-country"
+
+export interface FormattedPhone {
+  /** What the field shows: "+380 50 123 4567". */
+  display: string
+  /** Normalised "+380501234567", or "" when there are no digits. */
+  e164: string
+  /** Digits that were typed past the longest number the country allows. */
+  dropped: number
+  /** The calling code the number starts with ("380"), once recognised. */
+  callingCode?: string
+  /** Country libphonenumber recognised from the number, when it did. */
+  country?: CountryCode
+  possible: boolean
+  valid: boolean
+  type?: string
+  problem?: PhoneProblem
+}
+
+/**
+ * Format what was typed, dropping digits beyond what the number may hold:
+ * the country's own maximum once libphonenumber knows the country, the E.164
+ * cap otherwise. The value always starts with "+", since the field holds a
+ * full international number.
+ */
+export function formatPhone(input: string, phone: PhoneLib | undefined): FormattedPhone {
+  let digits = digitsOf(input)
+  let dropped = 0
+  if (digits.length > E164_MAX_DIGITS) {
+    dropped += digits.length - E164_MAX_DIGITS
+    digits = digits.slice(0, E164_MAX_DIGITS)
+  }
+  if (!digits) return { display: input.trim().startsWith("+") ? "+" : "", e164: "", dropped, possible: false, valid: false }
+  if (!phone) return { display: `+${digits}`, e164: `+${digits}`, dropped, possible: false, valid: false }
+
+  while (digits.length > 1 && phone.validatePhoneNumberLength(`+${digits}`) === "TOO_LONG") {
+    digits = digits.slice(0, -1)
+    dropped++
+  }
+
+  // A number that was already complete and valid does not take one more
+  // digit that would make it neither: a Ukrainian mobile ends at nine digits
+  // after +380 although the country's longest number type allows ten, and
+  // that tenth digit is almost always a slip rather than another kind of line.
+  const isValid = (d: string) => phone.parsePhoneNumberFromString(`+${d}`)?.isValid() ?? false
+  while (digits.length > 1 && !isValid(digits) && isValid(digits.slice(0, -1))) {
+    digits = digits.slice(0, -1)
+    dropped++
+  }
+
+  const typer = new phone.AsYouType()
+  let display = typer.input(`+${digits}`)
+  // A length the country allows but no format covers (a 10-digit Ukrainian
+  // national number) comes back as one run of digits; group it by threes after
+  // the calling code so it still reads as a phone number.
+  const code = typer.getCallingCode()
+  if (code && !/\s/.test(display.slice(code.length + 2))) {
+    const national = digits.slice(code.length)
+    display = `+${code}${national ? " " + (national.match(/.{1,3}/g) ?? []).join(" ") : ""}`
+  }
+  const parsed = phone.parsePhoneNumberFromString(`+${digits}`)
+  const country = typer.getCountry() ?? parsed?.country
+  const possible = parsed?.isPossible() ?? false
+  const valid = parsed?.isValid() ?? false
+  const length = phone.validatePhoneNumberLength(`+${digits}`)
+  const problem: PhoneProblem | undefined = valid
+    ? undefined
+    : length === "TOO_SHORT" || length === "NOT_A_NUMBER"
+      ? "too-short"
+      : length === "INVALID_COUNTRY"
+        ? "invalid-country"
+        : length === "TOO_LONG"
+          ? "too-long"
+          : "invalid"
+  return {
+    display,
+    e164: `+${digits}`,
+    dropped,
+    callingCode: code,
+    country,
+    possible,
+    valid,
+    type: valid ? parsed?.getType() : undefined,
+    problem,
+  }
+}

package/src/components/tableFilter.ts

@@ -0,0 +1,122 @@
+/*
+ * The rules behind LpTable's value filters and remembered state, kept pure so
+ * they can be tested. A column's filter is the set of HIDDEN values (see
+ * LpTable): a value nobody has seen before shows up rather than staying out.
+ */
+
+/** Hide everything except `keep`: "show only this" in one step. */
+export function onlyValues(values: readonly unknown[], keep: readonly unknown[]): Set<unknown> {
+  const kept = new Set(keep)
+  return new Set(values.filter((v) => !kept.has(v)))
+}
+
+/** Hide every value: the "None" step before ticking the few that matter. */
+export function hideAllValues(values: readonly unknown[]): Set<unknown> {
+  return new Set(values)
+}
+
+/** Swap shown and hidden among the values the column holds. */
+export function invertHidden(values: readonly unknown[], hidden: ReadonlySet<unknown>): Set<unknown> {
+  return new Set(values.filter((v) => !hidden.has(v)))
+}
+
+/** Show these values again, leaving the rest of the filter as it was. */
+export function unhideValues(hidden: ReadonlySet<unknown>, values: readonly unknown[]): Set<unknown> {
+  const next = new Set(hidden)
+  for (const v of values) next.delete(v)
+  return next
+}
+
+/** Lower-cased and stripped of accents, so "cafe" finds "Café". */
+export function foldText(text: string): string {
+  return text.normalize("NFKD").replace(/\p{M}/gu, "").toLocaleLowerCase()
+}
+
+/** Every word of the query appears somewhere in the label, in any order. */
+export function matchesQuery(label: string, query: string): boolean {
+  const words = foldText(query).split(/\s+/).filter(Boolean)
+  if (!words.length) return true
+  const hay = foldText(label)
+  return words.every((w) => hay.includes(w))
+}
+
+/** How many rows hold each value of a column. */
+export function countValues<Row extends Record<string, unknown>>(
+  rows: readonly Row[],
+  key: string,
+): Map<unknown, number> {
+  const counts = new Map<unknown, number>()
+  for (const row of rows) counts.set(row[key], (counts.get(row[key]) ?? 0) + 1)
+  return counts
+}
+
+/**
+ * A chip's text for one column's filter: the values still shown, the first
+ * `listed` by name and the rest as "+N", which says more than "3 of 12".
+ */
+export function summarizeShown(shownLabels: readonly string[], listed = 2): string {
+  if (shownLabels.length <= listed) return shownLabels.join(", ")
+  return `${shownLabels.slice(0, listed).join(", ")} +${shownLabels.length - listed}`
+}
+
+// ── remembered state ───────────────────────────────────────────
+
+export interface PersistedTableState {
+  sort?: { key: string; dir: "asc" | "desc" } | null
+  hidden?: Record<string, unknown[]>
+  columns?: string[]
+}
+
+type Plain = string | number | boolean | null
+
+function isPlain(value: unknown): value is Plain {
+  return value === null || ["string", "number", "boolean"].includes(typeof value)
+}
+
+/**
+ * The state worth keeping across visits, as JSON. Only plain values survive:
+ * a Date or an object hidden in a filter cannot come back as the same value
+ * (the filter compares by identity), so it is left out rather than restored
+ * as something that matches nothing.
+ */
+export function serializeTableState(state: PersistedTableState): string {
+  const hidden: Record<string, Plain[]> = {}
+  for (const [key, values] of Object.entries(state.hidden ?? {})) {
+    const plain = values.filter(isPlain)
+    if (plain.length) hidden[key] = plain
+  }
+  return JSON.stringify({ sort: state.sort ?? null, hidden, columns: state.columns ?? [] })
+}
+
+/** Read it back, dropping anything about columns the table no longer has. */
+export function parseTableState(raw: string | null, columnKeys: readonly string[]): PersistedTableState | null {
+  if (!raw) return null
+  let data: unknown
+  try {
+    data = JSON.parse(raw)
+  } catch {
+    return null
+  }
+  if (!data || typeof data !== "object") return null
+  const known = new Set(columnKeys)
+  const record = data as Record<string, unknown>
+  const out: PersistedTableState = {}
+
+  const sort = record.sort as { key?: unknown; dir?: unknown } | null | undefined
+  if (sort === null) out.sort = null
+  else if (sort && typeof sort.key === "string" && known.has(sort.key) && (sort.dir === "asc" || sort.dir === "desc")) {
+    out.sort = { key: sort.key, dir: sort.dir }
+  }
+
+  if (record.hidden && typeof record.hidden === "object") {
+    out.hidden = {}
+    for (const [key, values] of Object.entries(record.hidden as Record<string, unknown>)) {
+      if (known.has(key) && Array.isArray(values)) out.hidden[key] = values.filter(isPlain)
+    }
+  }
+
+  if (Array.isArray(record.columns)) {
+    out.columns = record.columns.filter((c): c is string => typeof c === "string" && known.has(c))
+  }
+  return out
+}

package/src/components/tags.ts

@@ -0,0 +1,62 @@
+/*
+ * The add pipeline behind LpTagsInput, kept pure so its rules are testable:
+ * split what was typed or pasted, normalise each part, then accept or reject
+ * it against the limit, the duplicate policy and the consumer's validator.
+ */
+
+export type TagDuplicates = "reject" | "ignore" | "allow"
+
+/** An error message for an invalid tag; anything else accepts it. */
+export type TagValidator = (tag: string, tags: readonly string[]) => string | null | undefined | void
+
+export type TagRejection = { value: string; reason: "max" | "duplicate" | "invalid"; message?: string }
+
+export interface AddTagsOptions {
+  max?: number
+  duplicates?: TagDuplicates
+  validate?: TagValidator
+  normalize?: (tag: string) => string
+}
+
+export function splitTags(text: string, delimiter: string | RegExp | readonly string[]): string[] {
+  const parts =
+    delimiter instanceof RegExp
+      ? text.split(new RegExp(delimiter.source, delimiter.flags.includes("g") ? delimiter.flags : `${delimiter.flags}g`))
+      : (typeof delimiter === "string" ? [delimiter] : delimiter).reduce<string[]>(
+          (acc, d) => (d ? acc.flatMap((p) => p.split(d)) : acc),
+          [text],
+        )
+  return parts.map((p) => p.trim()).filter(Boolean)
+}
+
+export function addTags(
+  current: readonly string[],
+  candidates: readonly string[],
+  options: AddTagsOptions = {},
+): { tags: string[]; rejected: TagRejection[]; ignored: string[] } {
+  const tags = [...current]
+  const rejected: TagRejection[] = []
+  /** Repeats dropped under the "ignore" policy, as stored, so the UI can point at the original. */
+  const ignored: string[] = []
+  const duplicates = options.duplicates ?? "reject"
+  for (const candidate of candidates) {
+    const value = options.normalize ? options.normalize(candidate) : candidate
+    if (!value) continue
+    if (tags.includes(value) && duplicates !== "allow") {
+      if (duplicates === "reject") rejected.push({ value: candidate, reason: "duplicate" })
+      else ignored.push(value)
+      continue
+    }
+    if (options.max && tags.length >= options.max) {
+      rejected.push({ value: candidate, reason: "max" })
+      continue
+    }
+    const message = options.validate?.(value, tags)
+    if (typeof message === "string" && message) {
+      rejected.push({ value: candidate, reason: "invalid", message })
+      continue
+    }
+    tags.push(value)
+  }
+  return { tags, rejected, ignored }
+}

package/src/composables/useField.ts

@@ -1,4 +1,5 @@
 import { computed, inject, provide, useId, type ComputedRef, type InjectionKey } from "vue"
+import type { FieldNoticeOptions } from "./useFieldNotice"
 
 /*
  * What a form field tells the control inside it: the id its label points at,
@@ -14,6 +15,9 @@ export interface FieldContext {
   invalid: boolean
   required: boolean
   disabled: boolean
+  /** Float a short note under the control without moving the layout (see useFieldNotice). */
+  notify?: (text: string, options?: FieldNoticeOptions) => void
+  clearNotice?: () => void
 }
 
 export const LP_FIELD: InjectionKey<ComputedRef<FieldContext>> = Symbol.for("lp-field")

package/src/composables/useFieldNotice.ts

@@ -0,0 +1,59 @@
+import { getCurrentScope, onScopeDispose, ref, type Ref } from "vue"
+
+/*
+ * A short note about what just happened to a field ("already added", "up to 5
+ * items") that floats under it instead of taking a line in the layout. A
+ * validation message belongs in the field's message line and may push the
+ * form down; a passing remark about one keystroke should not, or every refused
+ * paste would jolt the fields below.
+ *
+ * Render it with LpFieldNotice inside a `relative` box around the control.
+ * LpFormField does that for its control and hands `notify` down the field
+ * context, so a control inside a field (or the app) can raise one without
+ * owning any markup.
+ */
+export type FieldNoticeTone = "info" | "danger"
+
+export interface FieldNoticeOptions {
+  tone?: FieldNoticeTone
+  /** How long it stays, in ms. 0 keeps it until `clear()`. */
+  duration?: number
+}
+
+export interface FieldNotice {
+  message: Ref<string>
+  tone: Ref<FieldNoticeTone>
+  /** Bumped on every `show`, so a repeat of the same note can nudge rather than sit still. */
+  seq: Ref<number>
+  show: (text: string, options?: FieldNoticeOptions) => void
+  clear: () => void
+}
+
+export const FIELD_NOTICE_MS = 2600
+
+export function useFieldNotice(defaultDuration = FIELD_NOTICE_MS): FieldNotice {
+  const message = ref("")
+  const tone = ref<FieldNoticeTone>("info")
+  const seq = ref(0)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function clear() {
+    if (timer) clearTimeout(timer)
+    timer = undefined
+    message.value = ""
+  }
+
+  function show(text: string, options: FieldNoticeOptions = {}) {
+    if (timer) clearTimeout(timer)
+    timer = undefined
+    message.value = text
+    tone.value = options.tone ?? "info"
+    seq.value++
+    const duration = options.duration ?? defaultDuration
+    if (duration > 0 && text) timer = setTimeout(clear, duration)
+  }
+
+  if (getCurrentScope()) onScopeDispose(clear)
+
+  return { message, tone, seq, show, clear }
+}