@nhealth/nutils 0.0.2

package/dist/runtime/app/composables/useComponentRouter.d.ts

@@ -0,0 +1,50 @@
+import { type Component } from '#imports';
+import type { ShallowRef } from 'vue';
+import { createHooks } from 'hookable';
+type AsyncComponentLoader = () => Promise<Component | {
+    default: Component;
+}>;
+export type ComponentRouteRecord = {
+    path: string;
+    component: Component | AsyncComponentLoader;
+    name?: string;
+};
+export type ComponentRouterMode = 'query' | 'hash' | 'memory';
+export interface UseComponentRouterOptions {
+    routes: ComponentRouteRecord[] | Record<string, Component | AsyncComponentLoader>;
+    base?: string;
+    mode?: ComponentRouterMode;
+    initial?: string;
+    provideKey?: string;
+    debug?: boolean;
+}
+type RouterHooks = {
+    navigated: (data: {
+        path: string;
+        params: Record<string, string>;
+    }) => void;
+};
+type RouterContext = {
+    route: ShallowRef<{
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, string | string[]>;
+    }>;
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
+    makePath: (patternOrPath: string, params?: Record<string, string | number | boolean>) => string;
+    makeHref: (patternOrPath: string, params?: Record<string, string | number | boolean>) => string;
+    pushTo: (patternOrPath: string, params?: Record<string, string | number | boolean>) => Promise<void>;
+    replaceTo: (patternOrPath: string, params?: Record<string, string | number | boolean>) => Promise<void>;
+    hooks: ReturnType<typeof createHooks<RouterHooks>>;
+};
+export declare function useComponentRouter(): RouterContext & {
+    component?: Component;
+};
+export declare function useComponentRouter(opts: UseComponentRouterOptions): RouterContext & {
+    component: Component;
+};
+export default useComponentRouter;
+export declare function createComponentRoutes(glob: Record<string, AsyncComponentLoader>, options?: {
+    base?: string;
+}): ComponentRouteRecord[];

package/dist/runtime/app/composables/useComponentRouter.js

@@ -0,0 +1,265 @@
+import {
+  computed,
+  inject,
+  provide,
+  shallowRef,
+  useRoute,
+  useRouter,
+  watch,
+  defineAsyncComponent
+} from "#imports";
+import { createHooks } from "hookable";
+export function useComponentRouter(opts) {
+  const CTX_KEY = "component-router";
+  if (!opts || !("routes" in opts) || !opts.routes) {
+    const key = (opts && "provideKey" in opts ? opts.provideKey : void 0) ?? CTX_KEY;
+    const ctx = inject(key, null);
+    if (!ctx) {
+      console.warn(
+        "[useComponentRouter] No parent router context found. Ensure a parent uses useComponentRouter with routes or wrap children in <component-router>."
+      );
+      const emptyRoute = shallowRef({ path: "", params: {}, query: {} });
+      const warnNav = async (_p) => console.warn(
+        "[useComponentRouter] push/replace called without a parent router context."
+      );
+      const noopMake = (p, _params) => p;
+      const noopHref = (p, _params) => p;
+      const emptyHooks = createHooks();
+      return {
+        route: emptyRoute,
+        push: warnNav,
+        replace: warnNav,
+        makePath: noopMake,
+        makeHref: noopHref,
+        pushTo: async (p, _params) => warnNav(p),
+        replaceTo: async (p, _params) => warnNav(p),
+        hooks: emptyHooks,
+        component: void 0
+      };
+    }
+    return ctx;
+  }
+  const props = {
+    routes: Array.isArray(opts.routes) ? opts.routes : Object.entries(opts.routes || {}).map(([path, component2]) => ({
+      path,
+      component: component2
+    })),
+    base: opts.base ?? "fp",
+    mode: opts.mode ?? "query",
+    initial: opts.initial,
+    provideKey: opts.provideKey ?? CTX_KEY,
+    debug: opts.debug === true
+  };
+  const nuxtRoute = useRoute();
+  const nuxtRouter = useRouter();
+  const component = shallowRef(null);
+  const route = shallowRef({
+    path: "",
+    params: {},
+    query: {}
+  });
+  const hooks = createHooks();
+  const dbg = (...args) => {
+    if (props.debug) console.info("[component-router]", ...args);
+  };
+  function isAsyncComponentLoader(comp) {
+    return typeof comp === "function" && !("__vccOpts" in comp) && !("_asyncResolved" in comp);
+  }
+  function normalizeComponent(comp) {
+    if (isAsyncComponentLoader(comp)) {
+      return defineAsyncComponent(() => {
+        const result = comp();
+        return Promise.resolve(result).then((m) => {
+          if (typeof m === "object" && m !== null && "default" in m) {
+            return m.default;
+          }
+          return m;
+        });
+      });
+    }
+    return comp;
+  }
+  function esc(text) {
+    return text.replace(/([.+*?=^!${}()[\]|\\])/g, "\\$1");
+  }
+  function compilePattern(path) {
+    const keys = [];
+    const dyn = /\/:([^/]+)/g;
+    let last = 0;
+    let pattern = "";
+    let m;
+    while (m = dyn.exec(path)) {
+      pattern += esc(path.slice(last, m.index));
+      keys.push(m[1]);
+      pattern += "/([^/]+)";
+      last = m.index + m[0].length;
+    }
+    pattern += esc(path.slice(last));
+    const regex = new RegExp("^" + pattern + "$");
+    dbg("compiled", { path, pattern, regex, keys });
+    return { regex, keys };
+  }
+  const records = computed(
+    () => props.routes.map((r) => {
+      const { regex, keys } = compilePattern(r.path);
+      return { ...r, regex, keys };
+    })
+  );
+  function matchPath(path) {
+    dbg("matchPath", path);
+    for (const r of records.value) {
+      const m = r.regex.exec(path);
+      dbg(" try", r.path, r.regex, !!m);
+      if (m) {
+        const params = {};
+        r.keys.forEach(
+          (k, i) => params[k] = decodeURIComponent(m[i + 1] || "")
+        );
+        return { record: r, params };
+      }
+    }
+    return null;
+  }
+  function setCurrent(path) {
+    dbg("setCurrent", path);
+    const m = matchPath(path) || matchPath(props.routes[0]?.path || "/");
+    if (!m) return;
+    const rawComponent = m.record.component;
+    component.value = normalizeComponent(rawComponent);
+    const [pathOnly, queryString] = path.split("?");
+    const queryParams = {};
+    if (queryString) {
+      const params = new URLSearchParams(queryString);
+      params.forEach((value, key) => {
+        queryParams[key] = value;
+      });
+    }
+    route.value = {
+      path: pathOnly || path,
+      params: m.params,
+      query: queryParams
+      // Only use query params from the current path, not from nuxtRoute
+    };
+    dbg("current", route.value);
+    dbg("calling navigated hook with", { path: pathOnly || path, params: m.params });
+    hooks.callHook("navigated", { path: pathOnly || path, params: m.params });
+  }
+  function readFromHost() {
+    if (props.mode === "query") {
+      const p = nuxtRoute.query[props.base];
+      dbg("readFromHost(query)", p);
+      return typeof p === "string" ? p : null;
+    }
+    if (props.mode === "hash") {
+      const h = (typeof window !== "undefined" ? window.location.hash : "") || "";
+      const key = `#${props.base}=`;
+      const idx = h.indexOf(key);
+      dbg("readFromHost(hash)", h);
+      return idx >= 0 ? h.slice(idx + key.length) : null;
+    }
+    return null;
+  }
+  async function writeToHost(path, replace2 = false) {
+    dbg("writeToHost", path, { replace: replace2, mode: props.mode });
+    const prevPath = route.value.path;
+    dbg("current path before write:", prevPath, "new path:", path);
+    if (props.mode === "query") {
+      const [pathOnly, queryString] = path.split("?");
+      const pathQuery = {};
+      if (queryString) {
+        const params = new URLSearchParams(queryString);
+        params.forEach((value, key) => {
+          pathQuery[key] = value;
+        });
+      }
+      const nextQuery = { [props.base]: pathOnly, ...pathQuery };
+      if (nuxtRoute.query[props.base] === pathOnly && !queryString) {
+        setCurrent(path);
+        return;
+      }
+      await (replace2 ? nuxtRouter.replace({ query: nextQuery }) : nuxtRouter.push({ query: nextQuery }));
+      return;
+    }
+    if (props.mode === "hash" && typeof window !== "undefined") {
+      const key = `#${props.base}=`;
+      const nextHash = key + path;
+      if (window.location.hash !== nextHash) {
+        if (replace2) {
+          const url = window.location.href.replace(/#.*/, "") + nextHash;
+          window.history.replaceState(null, "", url);
+        } else {
+          window.location.hash = nextHash;
+        }
+      }
+      setCurrent(path);
+      return;
+    }
+    setCurrent(path);
+  }
+  async function push(path) {
+    await writeToHost(path, false);
+  }
+  async function replace(path) {
+    await writeToHost(path, true);
+  }
+  function makePath(patternOrPath, params) {
+    const hasDyn = /:[^/]+/.test(patternOrPath);
+    if (!hasDyn) return patternOrPath;
+    const replaced = patternOrPath.replace(/:([^/]+)/g, (_m, key) => {
+      const v = params?.[key];
+      return encodeURIComponent(v == null ? "" : String(v));
+    });
+    return replaced.replace(/\/{2,}/g, "/");
+  }
+  function makeHref(patternOrPath, params) {
+    const path = makePath(patternOrPath, params);
+    if (props.mode === "query") return `?${props.base}=${path}`;
+    if (props.mode === "hash") return `#${props.base}=${path}`;
+    return path;
+  }
+  async function pushTo(patternOrPath, params) {
+    const path = makePath(patternOrPath, params);
+    await push(path);
+  }
+  async function replaceTo(patternOrPath, params) {
+    const path = makePath(patternOrPath, params);
+    await replace(path);
+  }
+  const exposed = { push, replace, route, makePath, makeHref, pushTo, replaceTo, hooks };
+  provide(props.provideKey, exposed);
+  const initialPath = readFromHost() || props.initial || props.routes[0]?.path || "/";
+  dbg("init", { initialPath });
+  writeToHost(initialPath, true);
+  watch(
+    () => ({
+      q: nuxtRoute.query[props.base],
+      h: typeof window !== "undefined" ? window.location.hash : ""
+    }),
+    () => {
+      const path = readFromHost();
+      dbg("watch change detected ->", path);
+      if (path) setCurrent(path);
+    }
+  );
+  return { component, route, push, replace, makePath, makeHref, pushTo, replaceTo, hooks };
+}
+export default useComponentRouter;
+export function createComponentRoutes(glob, options) {
+  const base = options?.base || "";
+  const toPath = (key) => {
+    let p = key.replace(/^\.\//, "/").replace(/\.(vue|tsx?|jsx?)$/, "");
+    p = p.replace(/\/index$/, "");
+    p = p.replace(/\[(.+?)\]/g, ":$1");
+    if (!p.startsWith("/")) p = "/" + p;
+    if (base) {
+      const b = base.startsWith("/") ? base : "/" + base;
+      p = (b + (p === "/" ? "" : p)).replace(/\/+/, "/");
+    }
+    return p || "/";
+  };
+  return Object.entries(glob).map(([key, loader]) => ({
+    path: toPath(key),
+    component: loader
+    // Pass loader directly, normalizeComponent handles it
+  }));
+}

package/dist/runtime/app/composables/useConfirmModal.d.ts

@@ -0,0 +1,50 @@
+export type ConfirmModalResult<T = unknown> = {
+    confirmed: boolean;
+    value?: T;
+};
+export type ConfirmModalOptions<T = unknown> = {
+    title?: string;
+    text?: string;
+    description?: string;
+    items?: string[];
+    warning?: string;
+    icon?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: 'primary' | 'neutral' | 'error' | 'success' | 'warning';
+    cancelColor?: 'neutral' | 'primary' | 'error' | 'success' | 'warning';
+    confirmVariant?: 'solid' | 'subtle' | 'ghost' | 'outline' | 'soft' | 'link';
+    cancelVariant?: 'solid' | 'subtle' | 'ghost' | 'outline' | 'soft' | 'link';
+    iconColor?: 'primary' | 'error' | 'warning' | 'success' | 'info';
+    dangerous?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    autofocus?: 'confirm' | 'cancel' | 'none';
+    closeOnConfirm?: boolean;
+    closeOnCancel?: boolean;
+    requireInputEquals?: string;
+    inputPlaceholder?: string;
+    inputLabel?: string;
+    inputHint?: string;
+    requireCheckbox?: boolean;
+    checkboxLabel?: string;
+    payload?: T;
+    onConfirm?: (ctx: {
+        payload?: T;
+    }) => void | Promise<void>;
+    onCancel?: (ctx: {
+        payload?: T;
+    }) => void | Promise<void>;
+};
+export type InternalRequest<T = unknown> = {
+    id: number;
+    options: ConfirmModalOptions<T>;
+    resolve: (v: ConfirmModalResult<T>) => void;
+    reject: (e?: unknown) => void;
+};
+export declare function useConfirmModal<T = unknown>(defaults?: ConfirmModalOptions<T>): (overrides?: ConfirmModalOptions<T>) => Promise<ConfirmModalResult<T>>;
+export declare function useConfirmModalActions(): {
+    onConfirm: () => Promise<void>;
+    onCancel: () => Promise<void>;
+    onClosedExternally: () => void;
+};
+export default useConfirmModal;

package/dist/runtime/app/composables/useConfirmModal.js

@@ -0,0 +1,107 @@
+import { useConfirmModalState } from "./useConfirmModalState.js";
+let autoId = 0;
+function enqueue(req) {
+  const state = useConfirmModalState();
+  const id = ++autoId;
+  const full = { id, ...req };
+  state.value.queue.push(full);
+  if (!state.value.current) {
+    showNext();
+  }
+}
+function showNext() {
+  const state = useConfirmModalState();
+  const next = state.value.queue[0] || null;
+  state.value.current = next;
+  state.value.confirmInput = "";
+  state.value.confirmChecked = false;
+  state.value.loading = false;
+  state.value.open = !!next;
+  state.value.renderOptions = next?.options ?? state.value.renderOptions;
+}
+function finishCurrent(result) {
+  const state = useConfirmModalState();
+  const cur = state.value.current;
+  if (!cur) return;
+  try {
+    cur.resolve(result);
+  } catch {
+  }
+  state.value.queue.shift();
+  state.value.current = null;
+  state.value.open = false;
+  state.value.loading = false;
+  if (state.value.queue.length > 0) {
+    queueMicrotask(showNext);
+  }
+}
+export function useConfirmModal(defaults) {
+  const mergedDefaults = {
+    title: "Confirm",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    confirmColor: "primary",
+    cancelColor: "neutral",
+    confirmVariant: "solid",
+    cancelVariant: "subtle",
+    autofocus: "confirm",
+    closeOnConfirm: true,
+    closeOnCancel: true,
+    ...defaults || {}
+  };
+  return function confirm(overrides = {}) {
+    const options = {
+      ...mergedDefaults,
+      ...overrides || {}
+    };
+    return new Promise((resolve, reject) => {
+      enqueue({ options, resolve, reject });
+    });
+  };
+}
+export function useConfirmModalActions() {
+  const state = useConfirmModalState();
+  async function onConfirm() {
+    const cur = state.value.current;
+    if (!cur) return;
+    const { requireInputEquals, requireCheckbox } = cur.options;
+    if (requireInputEquals && state.value.confirmInput !== requireInputEquals) {
+      return;
+    }
+    if (requireCheckbox && !state.value.confirmChecked) {
+      return;
+    }
+    state.value.loading = true;
+    try {
+      const res = await cur.options.onConfirm?.({
+        payload: cur.options.payload
+      });
+      const result = { confirmed: true, value: res };
+      if (cur.options.closeOnConfirm !== false) {
+        finishCurrent(result);
+      } else {
+        state.value.loading = false;
+      }
+    } catch {
+      state.value.loading = false;
+    }
+  }
+  async function onCancel() {
+    const cur = state.value.current;
+    if (!cur) return;
+    try {
+      await cur.options.onCancel?.({ payload: cur.options.payload });
+    } finally {
+      if (cur.options.closeOnCancel !== false) {
+        finishCurrent({ confirmed: false });
+      }
+    }
+  }
+  function onClosedExternally() {
+    const cur = state.value.current;
+    if (!cur) return;
+    finishCurrent({ confirmed: false });
+  }
+  return { onConfirm, onCancel, onClosedExternally };
+}
+export default useConfirmModal;

package/dist/runtime/app/composables/useConfirmModalState.d.ts

@@ -0,0 +1,12 @@
+import type { InternalRequest, ConfirmModalOptions } from './useConfirmModal.js';
+type ConfirmModalState = {
+    open: boolean;
+    loading: boolean;
+    queue: InternalRequest<unknown>[];
+    current: InternalRequest | null;
+    confirmInput: string;
+    confirmChecked: boolean;
+    renderOptions: ConfirmModalOptions<unknown> | null;
+};
+export declare function useConfirmModalState(): Ref<ConfirmModalState>;
+export default useConfirmModalState;

package/dist/runtime/app/composables/useConfirmModalState.js

@@ -0,0 +1,12 @@
+export function useConfirmModalState() {
+  return useState("confirmModal", () => ({
+    open: false,
+    loading: false,
+    queue: [],
+    current: null,
+    confirmInput: "",
+    confirmChecked: false,
+    renderOptions: null
+  }));
+}
+export default useConfirmModalState;

package/dist/runtime/shared/formatters.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Format a date to a readable string
+ * @param date - Date object or timestamp
+ * @param locale - Locale string (default: 'en-US')
+ * @returns Formatted date string
+ */
+export declare const formatDate: (date: Date | number, locale?: string) => string;
+/**
+ * Format a number with thousand separators
+ * @param num - Number to format
+ * @param locale - Locale string (default: 'en-US')
+ * @returns Formatted number string
+ */
+export declare const formatNumber: (num: number, locale?: string) => string;
+/**
+ * Truncate a string to a specified length
+ * @param str - String to truncate
+ * @param maxLength - Maximum length (default: 50)
+ * @param suffix - Suffix to add when truncated (default: '...')
+ * @returns Truncated string
+ */
+export declare const truncate: (str: string, maxLength?: number, suffix?: string) => string;

package/dist/runtime/shared/formatters.js

@@ -0,0 +1,15 @@
+export const formatDate = (date, locale = "en-US") => {
+  const dateObj = typeof date === "number" ? new Date(date) : date;
+  return dateObj.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+export const formatNumber = (num, locale = "en-US") => {
+  return num.toLocaleString(locale);
+};
+export const truncate = (str, maxLength = 50, suffix = "...") => {
+  if (str.length <= maxLength) return str;
+  return str.substring(0, maxLength - suffix.length) + suffix;
+};

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@nhealth/nutils",
+  "version": "0.0.2",
+  "description": "Shared Nuxt.js v4 module with components, composables, and utilities",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs",
+      "style": "./dist/runtime/app/assets/styles.css"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "build": "yarn dev:prepare && nuxt-module-build build",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "bumpp --recursive && npm publish",
+    "bumpp": "bumpp --recursive",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.2.2"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint-config": "^1.12.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.23.0",
+    "@nuxt/ui": "^4.3.0",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.2.2",
+    "bumpp": "10.3.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nhealthorg/nutils.git"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "nuxt4",
+    "components",
+    "composables",
+    "utilities"
+  ],
+  "author": "nhealth.org",
+  "license": "MIT"
+}