@leavepulse/ui 0.44.0 → 0.45.1

package/dist/components/phone.d.ts

@@ -0,0 +1,41 @@
+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"];
+export declare function loadPhoneLib(): Promise<PhoneLib>;
+export declare function loadPhoneExamples(): Promise<Examples>;
+/** E.164 allows at most 15 digits, country code included. */
+export declare const E164_MAX_DIGITS = 15;
+export declare function digitsOf(text: string): string;
+/** How many digits sit before `caret` in `text`. */
+export declare function digitsBefore(text: string, caret: number): number;
+/**
+ * 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 declare function caretAfterDigits(formatted: string, count: number): number;
+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 declare function formatPhone(input: string, phone: PhoneLib | undefined): FormattedPhone;
+export {};

package/dist/components/phone.js

@@ -0,0 +1,80 @@
+let lib;
+let examples;
+function loadPhoneLib() {
+  lib ??= import("libphonenumber-js/min");
+  return lib;
+}
+function loadPhoneExamples() {
+  examples ??= import("libphonenumber-js/examples.mobile.json").then((m) => m.default);
+  return examples;
+}
+const E164_MAX_DIGITS = 15;
+function digitsOf(text) {
+  return text.replace(/\D/g, "");
+}
+function digitsBefore(text, caret) {
+  return digitsOf(text.slice(0, caret)).length;
+}
+function caretAfterDigits(formatted, count) {
+  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;
+}
+function formatPhone(input, phone) {
+  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++;
+  }
+  const isValid = (d) => 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}`);
+  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 = valid ? void 0 : 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() : void 0,
+    problem
+  };
+}
+export {
+  E164_MAX_DIGITS,
+  caretAfterDigits,
+  digitsBefore,
+  digitsOf,
+  formatPhone,
+  loadPhoneExamples,
+  loadPhoneLib
+};

package/dist/components/tableFilter.d.ts

@@ -0,0 +1,36 @@
+/** Hide everything except `keep`: "show only this" in one step. */
+export declare function onlyValues(values: readonly unknown[], keep: readonly unknown[]): Set<unknown>;
+/** Hide every value: the "None" step before ticking the few that matter. */
+export declare function hideAllValues(values: readonly unknown[]): Set<unknown>;
+/** Swap shown and hidden among the values the column holds. */
+export declare function invertHidden(values: readonly unknown[], hidden: ReadonlySet<unknown>): Set<unknown>;
+/** Show these values again, leaving the rest of the filter as it was. */
+export declare function unhideValues(hidden: ReadonlySet<unknown>, values: readonly unknown[]): Set<unknown>;
+/** Lower-cased and stripped of accents, so "cafe" finds "Café". */
+export declare function foldText(text: string): string;
+/** Every word of the query appears somewhere in the label, in any order. */
+export declare function matchesQuery(label: string, query: string): boolean;
+/** How many rows hold each value of a column. */
+export declare function countValues<Row extends Record<string, unknown>>(rows: readonly Row[], key: string): Map<unknown, number>;
+/**
+ * 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 declare function summarizeShown(shownLabels: readonly string[], listed?: number): string;
+export interface PersistedTableState {
+    sort?: {
+        key: string;
+        dir: "asc" | "desc";
+    } | null;
+    hidden?: Record<string, unknown[]>;
+    columns?: string[];
+}
+/**
+ * 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 declare function serializeTableState(state: PersistedTableState): string;
+/** Read it back, dropping anything about columns the table no longer has. */
+export declare function parseTableState(raw: string | null, columnKeys: readonly string[]): PersistedTableState | null;

package/dist/components/tableFilter.js

@@ -0,0 +1,84 @@
+function onlyValues(values, keep) {
+  const kept = new Set(keep);
+  return new Set(values.filter((v) => !kept.has(v)));
+}
+function hideAllValues(values) {
+  return new Set(values);
+}
+function invertHidden(values, hidden) {
+  return new Set(values.filter((v) => !hidden.has(v)));
+}
+function unhideValues(hidden, values) {
+  const next = new Set(hidden);
+  for (const v of values) next.delete(v);
+  return next;
+}
+function foldText(text) {
+  return text.normalize("NFKD").replace(new RegExp("\\p{M}", "gu"), "").toLocaleLowerCase();
+}
+function matchesQuery(label, query) {
+  const words = foldText(query).split(/\s+/).filter(Boolean);
+  if (!words.length) return true;
+  const hay = foldText(label);
+  return words.every((w) => hay.includes(w));
+}
+function countValues(rows, key) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const row of rows) counts.set(row[key], (counts.get(row[key]) ?? 0) + 1);
+  return counts;
+}
+function summarizeShown(shownLabels, listed = 2) {
+  if (shownLabels.length <= listed) return shownLabels.join(", ");
+  return `${shownLabels.slice(0, listed).join(", ")} +${shownLabels.length - listed}`;
+}
+function isPlain(value) {
+  return value === null || ["string", "number", "boolean"].includes(typeof value);
+}
+function serializeTableState(state) {
+  const hidden = {};
+  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 ?? [] });
+}
+function parseTableState(raw, columnKeys) {
+  if (!raw) return null;
+  let data;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!data || typeof data !== "object") return null;
+  const known = new Set(columnKeys);
+  const record = data;
+  const out = {};
+  const sort = record.sort;
+  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)) {
+      if (known.has(key) && Array.isArray(values)) out.hidden[key] = values.filter(isPlain);
+    }
+  }
+  if (Array.isArray(record.columns)) {
+    out.columns = record.columns.filter((c) => typeof c === "string" && known.has(c));
+  }
+  return out;
+}
+export {
+  countValues,
+  foldText,
+  hideAllValues,
+  invertHidden,
+  matchesQuery,
+  onlyValues,
+  parseTableState,
+  serializeTableState,
+  summarizeShown,
+  unhideValues
+};

package/dist/components/tags.d.ts

@@ -0,0 +1,20 @@
+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 declare function splitTags(text: string, delimiter: string | RegExp | readonly string[]): string[];
+export declare function addTags(current: readonly string[], candidates: readonly string[], options?: AddTagsOptions): {
+    tags: string[];
+    rejected: TagRejection[];
+    ignored: string[];
+};

package/dist/components/tags.js

@@ -0,0 +1,37 @@
+function splitTags(text, delimiter) {
+  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(
+    (acc, d) => d ? acc.flatMap((p) => p.split(d)) : acc,
+    [text]
+  );
+  return parts.map((p) => p.trim()).filter(Boolean);
+}
+function addTags(current, candidates, options = {}) {
+  const tags = [...current];
+  const rejected = [];
+  const ignored = [];
+  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 };
+}
+export {
+  addTags,
+  splitTags
+};

package/dist/composables/useField.d.ts

@@ -1,4 +1,5 @@
 import { type ComputedRef, type InjectionKey } from "vue";
+import type { FieldNoticeOptions } from "./useFieldNotice";
 export interface FieldContext {
     id: string;
     /** Id of the visible label, for controls a `<label for>` cannot name (groups). */
@@ -7,6 +8,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 declare const LP_FIELD: InjectionKey<ComputedRef<FieldContext>>;
 export declare function provideField(context: ComputedRef<FieldContext>): void;

package/dist/composables/useFieldNotice.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from "vue";
+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 declare const FIELD_NOTICE_MS = 2600;
+export declare function useFieldNotice(defaultDuration?: number): FieldNotice;

package/dist/composables/useFieldNotice.js

@@ -0,0 +1,28 @@
+import { ref, getCurrentScope, onScopeDispose } from "vue";
+const FIELD_NOTICE_MS = 2600;
+function useFieldNotice(defaultDuration = FIELD_NOTICE_MS) {
+  const message = ref("");
+  const tone = ref("info");
+  const seq = ref(0);
+  let timer;
+  function clear() {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    message.value = "";
+  }
+  function show(text, options = {}) {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    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 };
+}
+export {
+  FIELD_NOTICE_MS,
+  useFieldNotice
+};

package/dist/composables/useForm.d.ts

@@ -0,0 +1,53 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type UnwrapRef } from "vue";
+export type FormErrorMessage = string | null | undefined | void | false;
+export type FieldRule<V, T> = (value: V, values: T) => FormErrorMessage | Promise<FormErrorMessage>;
+export type FormRules<T> = {
+    [K in keyof T]?: FieldRule<T[K], T> | FieldRule<T[K], T>[];
+};
+export type FormErrors<T> = Partial<Record<keyof T | "form", string>>;
+export interface UseFormOptions<T extends object> {
+    initial: MaybeRefOrGetter<T>;
+    rules?: FormRules<T>;
+    /** Cross-field checks; return messages by field, or under `form` for the whole form. */
+    validate?: (values: T) => FormErrors<T> | void | Promise<FormErrors<T> | void>;
+}
+export interface FieldBinding<V> {
+    modelValue: V;
+    "onUpdate:modelValue": (value: V) => void;
+    onBlur: () => void;
+    error: string | undefined;
+    invalid: boolean;
+}
+export interface UseForm<T extends object> {
+    values: UnwrapRef<T>;
+    /** Errors as currently computed, shown or not. */
+    errors: ComputedRef<FormErrors<T>>;
+    /** Errors the user should see now. */
+    visibleErrors: ComputedRef<FormErrors<T>>;
+    touched: Partial<Record<keyof T, boolean>>;
+    dirty: ComputedRef<boolean>;
+    valid: ComputedRef<boolean>;
+    validating: Ref<boolean>;
+    submitting: Ref<boolean>;
+    submitCount: Ref<number>;
+    isDirty: (name: keyof T) => boolean;
+    /** Props for a kit control: `<LpInput v-bind="form.field('email')" />`. */
+    field: <K extends keyof T>(name: K) => FieldBinding<T[K]>;
+    set: <K extends keyof T>(name: K, value: T[K]) => void;
+    setValues: (values: Partial<T>) => void;
+    touch: (name: keyof T) => void;
+    /** Run the checks for one field, or all of them; resolves to whether it passed. */
+    validate: (name?: keyof T) => Promise<boolean>;
+    /** Errors from elsewhere, a server reply most often. Cleared field by field on edit. */
+    setErrors: (errors: FormErrors<T>) => void;
+    /** Back to `values` (or the current initial), which also become the new baseline. */
+    reset: (values?: T) => void;
+    /**
+     * Wrap the submit handler: touches everything, validates, and calls `fn`
+     * only when valid and not already submitting. A successful `fn` makes the
+     * submitted values the new baseline.
+     */
+    handleSubmit: (fn: (values: T) => unknown) => (event?: Event) => Promise<void>;
+}
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+export declare function useForm<T extends object>(options: UseFormOptions<T>): UseForm<T>;

package/dist/composables/useForm.js

@@ -0,0 +1,207 @@
+import { toValue, reactive, ref, computed, watch, toRaw } from "vue";
+function clone(value) {
+  try {
+    return structuredClone(toRaw(value));
+  } catch {
+    return JSON.parse(JSON.stringify(value));
+  }
+}
+function deepEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  return ka.every((k) => deepEqual(a[k], b[k]));
+}
+function message(result) {
+  return typeof result === "string" && result ? result : void 0;
+}
+function useForm(options) {
+  let baseline = clone(toValue(options.initial));
+  const values = reactive(clone(baseline));
+  const plain = () => values;
+  const errors = reactive({});
+  const external = reactive({});
+  const touched = reactive({});
+  const validating = ref(false);
+  const submitting = ref(false);
+  const submitCount = ref(0);
+  const runs = /* @__PURE__ */ new Map();
+  const baseVersion = ref(0);
+  const keys = () => Object.keys(plain());
+  const dirty = computed(() => {
+    void baseVersion.value;
+    return !deepEqual(plain(), baseline);
+  });
+  function isDirty(name) {
+    void baseVersion.value;
+    return !deepEqual(plain()[name], baseline[name]);
+  }
+  async function checkField(name) {
+    const rule = options.rules?.[name];
+    const list = Array.isArray(rule) ? rule : rule ? [rule] : [];
+    for (const r of list) {
+      const found = message(await r(plain()[name], plain()));
+      if (found) return found;
+    }
+    return void 0;
+  }
+  async function runField(name) {
+    const run = (runs.get(name) ?? 0) + 1;
+    runs.set(name, run);
+    const found = await checkField(name);
+    if (runs.get(name) !== run) return !errors[name];
+    if (found) errors[name] = found;
+    else delete errors[name];
+    return !found && !external[name];
+  }
+  async function runForm() {
+    if (!options.validate) return true;
+    const run = (runs.get("form") ?? 0) + 1;
+    runs.set("form", run);
+    const found = await options.validate(plain()) ?? {};
+    if (runs.get("form") !== run) return true;
+    let ok = true;
+    for (const [name, text] of Object.entries(found)) {
+      if (!text) continue;
+      ok = false;
+      if (!errors[name]) errors[name] = text;
+    }
+    return ok;
+  }
+  async function validate(name) {
+    validating.value = true;
+    try {
+      if (name !== void 0) return await runField(name);
+      if (errors.form) delete errors.form;
+      const fields = await Promise.all(keys().map(runField));
+      const form = await runForm();
+      return fields.every(Boolean) && form && !Object.values(external).some(Boolean);
+    } finally {
+      validating.value = false;
+    }
+  }
+  function touch(name) {
+    touched[name] = true;
+    void validate(name);
+  }
+  function set(name, value) {
+    values[name] = value;
+  }
+  function setValues(next) {
+    for (const [k, v] of Object.entries(next)) set(k, v);
+  }
+  function clearState() {
+    for (const k of Object.keys(errors)) delete errors[k];
+    for (const k of Object.keys(external)) delete external[k];
+    for (const k of Object.keys(touched)) delete touched[k];
+    runs.clear();
+    submitCount.value = 0;
+  }
+  function adopt(next) {
+    baseline = clone(next);
+    const target = values;
+    for (const k of Object.keys(target)) if (!(k in baseline)) delete target[k];
+    Object.assign(target, clone(baseline));
+    baseVersion.value++;
+  }
+  function reset(next) {
+    adopt(next ?? toValue(options.initial));
+    clearState();
+  }
+  function setErrors(next) {
+    for (const [k, v] of Object.entries(next)) {
+      if (v) external[k] = v;
+      else delete external[k];
+    }
+  }
+  watch(
+    () => toValue(options.initial),
+    (next) => {
+      if (!dirty.value && !deepEqual(next, baseline)) adopt(next);
+    },
+    { deep: true }
+  );
+  let snapshot = clone(plain());
+  watch(
+    plain,
+    () => {
+      const now = clone(plain());
+      for (const name of Object.keys(now)) {
+        if (deepEqual(now[name], snapshot[name])) continue;
+        if (external[name]) delete external[name];
+        if (touched[name] || submitCount.value) void validate(name);
+      }
+      snapshot = now;
+    },
+    { deep: true }
+  );
+  const merged = computed(() => ({ ...errors, ...external }));
+  const visibleErrors = computed(() => {
+    const all = merged.value;
+    if (submitCount.value) return all;
+    const shown = {};
+    for (const [k, v] of Object.entries(all)) {
+      if (touched[k] || external[k]) shown[k] = v;
+    }
+    return shown;
+  });
+  const valid = computed(() => !Object.values(merged.value).some(Boolean));
+  function field(name) {
+    const error = visibleErrors.value[name];
+    return {
+      modelValue: values[name],
+      "onUpdate:modelValue": (value) => set(name, value),
+      onBlur: () => touch(name),
+      error,
+      invalid: !!error
+    };
+  }
+  function handleSubmit(fn) {
+    return async (event) => {
+      event?.preventDefault();
+      if (submitting.value) return;
+      submitting.value = true;
+      try {
+        submitCount.value++;
+        for (const name of keys()) touched[name] = true;
+        if (!await validate()) return;
+        const submitted = clone(plain());
+        await fn(submitted);
+        if (deepEqual(plain(), submitted)) {
+          baseline = submitted;
+          baseVersion.value++;
+        }
+      } finally {
+        submitting.value = false;
+      }
+    };
+  }
+  return {
+    values,
+    errors: merged,
+    visibleErrors,
+    touched,
+    dirty,
+    valid,
+    validating,
+    submitting,
+    submitCount,
+    isDirty,
+    field,
+    set,
+    setValues,
+    touch,
+    validate,
+    setErrors,
+    reset,
+    handleSubmit
+  };
+}
+export {
+  deepEqual,
+  useForm
+};