@ramathibodi/nuxt-commons 4.0.11 → 4.0.13

package/dist/runtime/composables/graphqlModel.js

@@ -3,7 +3,7 @@ import { watchDebounced } from "@vueuse/core";
 import { useAlert } from "./alert.js";
 import { buildRequiredInputFields } from "./graphqlOperation.js";
 import { useGraphqlModelOperation } from "./graphqlModelOperation.js";
-import pLimit from "p-limit";
+import { useImportProgress } from "./importProgress.js";
 import { arrayWrap } from "../utils/array.js";
 export function useGraphqlModel(props) {
   const alert = useAlert();
@@ -15,6 +15,7 @@ export function useGraphqlModel(props) {
     search.value = keyword;
   }
   const isLoading = ref(false);
+  const importProgress = useImportProgress();
   const { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch } = useGraphqlModelOperation(props);
   function keyToField(key) {
     const parts = key.split(".");
@@ -64,27 +65,33 @@ export function useGraphqlModel(props) {
       } else items.value.push(result);
       if (callback && callback.setData) callback.setData(result);
     }).catch((error) => {
+      if (importing) throw error;
       alert?.addAlert({ alertType: "error", message: error });
     }).finally(() => {
       if (!importing) isLoading.value = false;
       if (callback) callback.done();
     });
   }
-  function importItems(importItems2, callback) {
+  function importItems(importData, callback) {
+    if (importProgress.isImporting.value) return;
+    if (importData.length === 0) {
+      if (callback) callback.done();
+      return;
+    }
     isLoading.value = true;
-    const limit = pLimit(50);
-    const importPromises = importItems2.map(
-      (item) => limit(
-        () => (item[props.modelKey || "id"] ? operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
-          if (!result) {
-            return createItem(Object.assign({}, props.initialData, item), void 0, true);
-          }
-        }) : createItem(Object.assign({}, props.initialData, item), void 0, true)).catch((error) => {
-          alert?.addAlert({ alertType: "error", message: error });
-        })
-      )
-    );
-    Promise.all(importPromises).finally(() => {
+    const worker = (item) => {
+      const createAsNew = () => createItem(Object.assign({}, props.initialData, item), void 0, true);
+      return item[props.modelKey || "id"] ? operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
+        if (!result) return createAsNew();
+      }) : createAsNew();
+    };
+    importProgress.run(importData, worker, { concurrency: props.importConcurrency }).then(({ succeeded, failed }) => {
+      if (failed > 0) {
+        alert?.addAlert({ alertType: "warning", message: `\u0E19\u0E33\u0E40\u0E02\u0E49\u0E32\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 ${succeeded} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23, \u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27 ${failed} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23` });
+      } else {
+        alert?.addAlert({ alertType: "success", message: `\u0E19\u0E33\u0E40\u0E02\u0E49\u0E32\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 ${succeeded} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23` });
+      }
+    }).finally(() => {
       isLoading.value = false;
       reload();
       if (callback) callback.done();
@@ -127,7 +134,7 @@ export function useGraphqlModel(props) {
         sortBy: options.sortBy
       };
       isLoading.value = true;
-      operationReadPageable.value?.call([{ data: fields.value }, "meta"], Object.assign({}, props.modelBy, { pageable: pageableVariable })).then((result) => {
+      return operationReadPageable.value?.call([{ data: fields.value }, "meta"], Object.assign({}, props.modelBy, { pageable: pageableVariable })).then((result) => {
         items.value = result.data;
         itemsLength.value = result.meta.totalItems;
       }).catch((error) => {
@@ -141,10 +148,10 @@ export function useGraphqlModel(props) {
   }
   function reload() {
     if (canServerPageable.value) {
-      if (currentOptions.value) loadItems(currentOptions.value);
+      if (currentOptions.value) return loadItems(currentOptions.value);
     } else {
       isLoading.value = true;
-      operationRead.value?.call(fields.value, props.modelBy).then((result) => {
+      return operationRead.value?.call(fields.value, props.modelBy).then((result) => {
         items.value = arrayWrap(result);
       }).catch((error) => {
         items.value = [];
@@ -184,6 +191,7 @@ export function useGraphqlModel(props) {
     deleteItem,
     loadItems,
     reload,
-    isLoading
+    isLoading,
+    importProgress
   };
 }

package/dist/runtime/composables/graphqlModelOperation.d.ts

@@ -10,6 +10,7 @@ export interface GraphqlModelConfigProps {
     operationReadPageable?: graphqlOperationObject<any, any> | string;
     operationSearch?: graphqlOperationObject<any, any> | string;
     fields?: Array<string | object>;
+    importConcurrency?: number;
 }
 export declare function useGraphqlModelOperation<T extends GraphqlModelConfigProps>(props: T): {
     operationCreate: import("vue").ComputedRef<graphqlOperationObject<any, any>>;

package/dist/runtime/composables/importProgress.d.ts

@@ -0,0 +1,34 @@
+export interface ImportError {
+    index: number;
+    message: string;
+}
+export interface ImportSummary {
+    succeeded: number;
+    failed: number;
+    errors: ImportError[];
+}
+export type ImportWorker<T = any> = (item: T, index: number) => Promise<any>;
+/**
+ * useImportProgress drives a concurrency-limited bulk import while exposing
+ * reactive progress. The runner continues on per-row errors and never rejects;
+ * callers read the resolved summary for the success/failure breakdown.
+ */
+export declare function useImportProgress(): {
+    isImporting: import("vue").Ref<boolean, boolean>;
+    total: import("vue").Ref<number, number>;
+    processed: import("vue").Ref<number, number>;
+    succeeded: import("vue").Ref<number, number>;
+    failed: import("vue").Ref<number, number>;
+    errors: import("vue").Ref<{
+        index: number;
+        message: string;
+    }[], ImportError[] | {
+        index: number;
+        message: string;
+    }[]>;
+    percent: import("vue").ComputedRef<number>;
+    reset: () => void;
+    run: <T = any>(items: T[], worker: ImportWorker<T>, options?: {
+        concurrency?: number;
+    }) => Promise<ImportSummary>;
+};

package/dist/runtime/composables/importProgress.js

@@ -0,0 +1,50 @@
+import { computed, ref } from "vue";
+import pLimit from "p-limit";
+export function useImportProgress() {
+  const isImporting = ref(false);
+  const total = ref(0);
+  const processed = ref(0);
+  const succeeded = ref(0);
+  const failed = ref(0);
+  const errors = ref([]);
+  const percent = computed(
+    () => total.value ? Math.round(processed.value / total.value * 100) : 0
+  );
+  function reset() {
+    total.value = 0;
+    processed.value = 0;
+    succeeded.value = 0;
+    failed.value = 0;
+    errors.value = [];
+  }
+  async function run(items, worker, options = {}) {
+    if (isImporting.value) {
+      return { succeeded: succeeded.value, failed: failed.value, errors: [...errors.value] };
+    }
+    reset();
+    total.value = items.length;
+    isImporting.value = true;
+    const limit = pLimit(options.concurrency && options.concurrency > 0 ? options.concurrency : 3);
+    try {
+      await Promise.all(
+        items.map(
+          (item, index) => limit(async () => {
+            try {
+              await worker(item, index);
+              succeeded.value++;
+            } catch (error) {
+              failed.value++;
+              errors.value.push({ index, message: error?.message || String(error) });
+            } finally {
+              processed.value++;
+            }
+          })
+        )
+      );
+    } finally {
+      isImporting.value = false;
+    }
+    return { succeeded: succeeded.value, failed: failed.value, errors: [...errors.value] };
+  }
+  return { isImporting, total, processed, succeeded, failed, errors, percent, reset, run };
+}

package/dist/runtime/composables/modelAutoRefresh.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared auto-refresh wiring for `<ModelTable>` and `<ModelIterator>`.
+ *
+ * Both components expose the same `autoRefresh` / `autoRefreshDefault` / `autoRefreshControl`
+ * props and gate polling on the same signals (dialog open + in-flight loading). This helper
+ * keeps that contract in one place: pass the model's `reload`/`isLoading` and the dialog-open
+ * ref, get back the `useAutoRefresh` handle plus a `manualReload` that reloads and restarts
+ * the countdown (used by the toolbar refresh icon).
+ */
+import { type Ref } from 'vue';
+import { type UseAutoRefreshHandle } from './autoRefresh.js';
+export interface ModelAutoRefreshProps {
+    autoRefresh?: number | boolean;
+    autoRefreshDefault?: number;
+}
+export interface UseModelAutoRefreshDeps {
+    /** The model composable's reload(). */
+    reload: () => void | Promise<void>;
+    /** The model composable's loading flag. */
+    isLoading: Ref<boolean>;
+    /** Component ref that is true while a create/edit dialog is open. */
+    isDialogOpen: Ref<boolean>;
+}
+export interface UseModelAutoRefreshHandle {
+    autoRefresh: UseAutoRefreshHandle;
+    /** Reload now and restart the countdown — wired to the toolbar refresh icon. */
+    manualReload: () => void;
+}
+export declare function useModelAutoRefresh(props: ModelAutoRefreshProps, deps: UseModelAutoRefreshDeps): UseModelAutoRefreshHandle;

package/dist/runtime/composables/modelAutoRefresh.js

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+import { useAutoRefresh } from "./autoRefresh.js";
+export function useModelAutoRefresh(props, deps) {
+  const autoRefresh = useAutoRefresh({
+    interval: () => props.autoRefresh,
+    defaultSeconds: props.autoRefreshDefault,
+    reload: deps.reload,
+    isLoading: deps.isLoading,
+    paused: computed(() => deps.isDialogOpen.value)
+  });
+  function manualReload() {
+    deps.reload();
+    autoRefresh.reset();
+  }
+  return { autoRefresh, manualReload };
+}

package/dist/runtime/composables/utils/validation.d.ts

@@ -3,6 +3,7 @@ export declare function useRules(): {
     requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
     requireTrue: (customError?: string) => (value: any) => string | true;
     requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+    requireNotEmpty: (customError?: string) => (value: any) => string | true;
     numeric: (customError?: string) => (value: any) => string | true;
     range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
     integer: (customError?: string) => (value: any) => string | true;
@@ -31,6 +32,7 @@ export declare function useRules(): {
         requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
         requireTrue: (customError?: string) => (value: any) => string | true;
         requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+        requireNotEmpty: (customError?: string) => (value: any) => string | true;
         numeric: (customError?: string) => (value: any) => string | true;
         range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
         integer: (customError?: string) => (value: any) => string | true;
@@ -59,6 +61,7 @@ export declare function useRules(): {
         requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
         requireTrue: (customError?: string) => (value: any) => string | true;
         requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+        requireNotEmpty: (customError?: string) => (value: any) => string | true;
         numeric: (customError?: string) => (value: any) => string | true;
         range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
         integer: (customError?: string) => (value: any) => string | true;
@@ -87,6 +90,7 @@ export declare function useRules(): {
         requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
         requireTrue: (customError?: string) => (value: any) => string | true;
         requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+        requireNotEmpty: (customError?: string) => (value: any) => string | true;
         numeric: (customError?: string) => (value: any) => string | true;
         range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
         integer: (customError?: string) => (value: any) => string | true;

package/dist/runtime/composables/utils/validation.js

@@ -7,6 +7,7 @@ export function useRules() {
   const requireIf = (conditionIf, customError = "This field is required") => (value) => condition(!!value || value === false || value === 0 || !conditionIf, customError);
   const requireTrue = (customError = "This field must be true") => (value) => condition(!!value, customError);
   const requireTrueIf = (conditionIf, customError = "This field must be true") => (value) => condition(!!value || !conditionIf, customError);
+  const requireNotEmpty = (customError = "This field is required") => (value) => condition(Array.isArray(value) ? value.length > 0 : !!value || value === false || value === 0, customError);
   const numeric = (customError = "This field must be a number") => (value) => condition(!value || !isNaN(Number(value)), customError);
   const range = (minValue, maxValue, customError = `Value is out of range (${minValue}-${maxValue})`) => (value) => condition(!value || value >= minValue && value <= maxValue, customError);
   const integer = (customError = "This field must be an integer") => (value) => condition(!value || isInteger(value) || /^\+?-?\d+$/.test(value), customError);
@@ -35,6 +36,7 @@ export function useRules() {
     requireIf,
     requireTrue,
     requireTrueIf,
+    requireNotEmpty,
     numeric,
     range,
     integer,

package/dist/runtime/utils/virtualize.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Pure helpers for the ModelTable/ModelIterator virtualization layer (#246).
+ */
+/**
+ * Decide whether to render rows virtualized.
+ * @param count rendered-row count (items.length)
+ * @param override tri-state `virtual` prop: true/false force, undefined = auto
+ * @param threshold auto-virtualize above this count (default 500)
+ */
+export declare function shouldVirtualize(count: number, override: boolean | undefined, threshold: number | undefined): boolean;
+/**
+ * Cards-per-row for a Vuetify grid column span (out of 12).
+ * span 12 -> 1, 6 -> 2, 4 -> 3, 2 -> 6. Falsy / out-of-range -> 1 (full width).
+ */
+export declare function itemsPerRowForSpan(span: number | string | boolean | undefined): number;

package/dist/runtime/utils/virtualize.js

@@ -0,0 +1,10 @@
+export function shouldVirtualize(count, override, threshold) {
+  if (override === true) return true;
+  if (override === false) return false;
+  return count > (threshold ?? 500);
+}
+export function itemsPerRowForSpan(span) {
+  const n = Number(span);
+  if (!Number.isFinite(n) || n <= 0 || n > 12) return 1;
+  return Math.max(1, Math.floor(12 / n));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "4.0.11",
+  "version": "4.0.13",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -49,6 +49,7 @@
     "dev:build": "nuxt build playground",
     "dev:generate": "nuxt generate playground",
     "playground:scaffold": "node scripts/scaffold-playground-pages.mjs",
+    "template:validate": "node scripts/validate-document-template.mjs",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
     "docs:api:components": "vue-docgen -c docs/vue-docgen.config.cjs && npm run docs:ai:summary && node scripts/enrich-vue-docs-from-ai.mjs",
     "docs:api:composables": "typedoc --options docs/typedoc.json",
@@ -88,7 +89,7 @@
     "@techstark/opencv-js": "4.11.0-release.1",
     "@thumbmarkjs/thumbmarkjs": "^1.7.4",
     "@vue/apollo-composable": "^4.2.2",
-    "@vuepic/vue-datepicker": "^7.4.1",
+    "@vuepic/vue-datepicker": "^12.1.0",
     "@vueuse/integrations": "^14.2.1",
     "@zxing/browser": "^0.1.5",
     "cropperjs": "^1.6.2",

package/scripts/validate-document-template.mjs

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+/**
+ * Codegen-style validator for Document Template JSON.
+ *
+ * Usage:
+ *   node scripts/validate-document-template.mjs [file|glob ...] [options]
+ *   cat template.json | node scripts/validate-document-template.mjs
+ *
+ * Options:
+ *   --strict   Promote builder-unsafe warnings to errors (exit 1 on them too).
+ *   --json     Emit machine-readable JSON: [{ file, result }].
+ *   --quiet    Print errors only (suppress warnings and infos).
+ *   -h, --help Show this help.
+ *
+ * Exit code: 1 if any input has errors (warnings count as errors under --strict),
+ * otherwise 0.
+ *
+ * Shares the exact validation core used by the `useDocumentTemplate` runtime via
+ * jiti (the TypeScript loader Nuxt already ships), so the CLI and the composable
+ * can never diverge.
+ */
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve, relative } from 'node:path'
+import process from 'node:process'
+import { createJiti } from 'jiti'
+
+const dir = dirname(fileURLToPath(import.meta.url))
+const repoRoot = resolve(dir, '..')
+
+const jiti = createJiti(import.meta.url)
+const { validateDocumentTemplate } = await jiti.import(
+  resolve(repoRoot, 'src/runtime/composables/document/validateTemplate.ts'),
+)
+
+// --- arg parsing -----------------------------------------------------------
+const argv = process.argv.slice(2)
+const flags = new Set(argv.filter(a => a.startsWith('-')))
+const files = argv.filter(a => !a.startsWith('-'))
+
+if (flags.has('-h') || flags.has('--help')) {
+  printHelp()
+  process.exit(0)
+}
+
+const strict = flags.has('--strict')
+const asJson = flags.has('--json')
+const quiet = flags.has('--quiet')
+
+// --- input collection ------------------------------------------------------
+/** @type {{ file: string, content: string }[]} */
+const inputs = []
+
+if (files.length === 0) {
+  const stdin = readFileSync(0, 'utf8')
+  if (!stdin.trim()) {
+    console.error('No input: pass file paths/globs or pipe JSON via stdin.')
+    process.exit(2)
+  }
+  inputs.push({ file: '<stdin>', content: stdin })
+}
+else {
+  const resolved = await expandGlobs(files)
+  if (resolved.length === 0) {
+    console.error(`No files matched: ${files.join(', ')}`)
+    process.exit(2)
+  }
+  for (const f of resolved) {
+    try {
+      inputs.push({ file: f, content: readFileSync(f, 'utf8') })
+    }
+    catch (e) {
+      console.error(`Cannot read ${f}: ${e.message}`)
+      process.exit(2)
+    }
+  }
+}
+
+// --- validation ------------------------------------------------------------
+const results = inputs.map(({ file, content }) => ({
+  file,
+  result: validateDocumentTemplate(content, { strict }),
+}))
+
+const hadErrors = results.some(r => !r.result.valid)
+
+if (asJson) {
+  const rel = f => (f === '<stdin>' ? f : relative(repoRoot, resolve(f)))
+  console.log(JSON.stringify(results.map(r => ({ file: rel(r.file), result: r.result })), null, 2))
+  process.exit(hadErrors ? 1 : 0)
+}
+
+// --- human report ----------------------------------------------------------
+let totalErrors = 0
+let totalWarnings = 0
+let totalInfos = 0
+
+for (const { file, result } of results) {
+  const shown = quiet ? result.errors : result.issues
+  totalErrors += result.errors.length
+  totalWarnings += result.warnings.length
+  totalInfos += result.infos.length
+
+  const status = result.valid ? (result.warnings.length ? 'WARN' : 'OK') : 'FAIL'
+  console.log(`\n${status}  ${file}`)
+  if (shown.length === 0) {
+    if (!quiet) console.log('  no issues')
+    continue
+  }
+  for (const issue of shown) {
+    const tag = issue.severity.toUpperCase().padEnd(7)
+    const loc = issue.path || '(root)'
+    console.log(`  ${tag} ${loc}  ${issue.code}  ${issue.message}`)
+  }
+}
+
+console.log(
+  `\n${results.length} file(s): ${totalErrors} error(s), ${totalWarnings} warning(s), ${totalInfos} info(s)`
+  + (strict ? '  [strict]' : ''),
+)
+
+process.exit(hadErrors ? 1 : 0)
+
+// --- helpers ---------------------------------------------------------------
+async function expandGlobs(patterns) {
+  const out = []
+  for (const p of patterns) {
+    if (/[*?[\]{}]/.test(p)) {
+      try {
+        const { glob } = await import('node:fs/promises')
+        for await (const entry of glob(p)) out.push(entry)
+      }
+      catch {
+        console.error(`Globbing not supported in this Node version for "${p}"; pass explicit file paths.`)
+        process.exit(2)
+      }
+    }
+    else {
+      out.push(p)
+    }
+  }
+  // De-dupe while preserving order.
+  return [...new Set(out)]
+}
+
+function printHelp() {
+  console.log(`Validate Document Template JSON.
+
+Usage:
+  node scripts/validate-document-template.mjs [file|glob ...] [options]
+  cat template.json | node scripts/validate-document-template.mjs
+
+Options:
+  --strict   Promote builder-unsafe warnings to errors.
+  --json     Emit machine-readable JSON.
+  --quiet    Print errors only.
+  -h, --help Show this help.`)
+}