@ramathibodi/nuxt-commons 4.0.10 → 4.0.12

package/dist/runtime/composables/document/templateInputTypes.d.ts

@@ -0,0 +1,228 @@
+/**
+ * Registry of input types available in `<DocumentTemplateBuilder>` (the
+ * structured editor for document templates) AND consumable by the runtime
+ * renderer (`useDocumentTemplate` in `./template.ts`).
+ *
+ * **Single registration entry point:** `registerDocumentTemplateInputType`.
+ *
+ * Use it from a Nuxt plugin to add an entry app-wide. The same `entry` object
+ * carries everything — dropdown label, builder-UI flags, and an optional
+ * `render` function consumed by the runtime renderer in `template.ts`:
+ *
+ * ```ts
+ * // app/plugins/document-template-inputs.ts
+ * export default defineNuxtPlugin(() => {
+ *   registerDocumentTemplateInputType({
+ *     label: 'From Staff',
+ *     value: 'FromStaff',
+ *     render(item, _parents, dataVariable) {
+ *       return `<FromStaff :staff-id="${dataVariable}.${item.variableName}" />`
+ *     },
+ *   })
+ * })
+ * ```
+ *
+ * For rare page-scoped extensions, call `useDocumentTemplateInputType()` in
+ * `<script setup>` — it wraps `register` + `onScopeDispose` so the entry is
+ * removed automatically when the component unmounts.
+ *
+ * Merge order (later wins on `value` collision):
+ *   built-in ⊕ runtime-registry
+ *
+ * The runtime renderer dispatches as follows inside `templateItemToString`:
+ *   1. If the registered entry for `inputType` has a `render` function → call it.
+ *   2. Else if `inputType` is one of the built-in special cases (Header,
+ *      Separator, FormTable, …) → use the hand-written switch arm.
+ *   3. Else → `processDefaultTemplate` (the v-model/label fallback).
+ *
+ * The `computedValue` post-pass (appending `<FormHidden>` to write a derived
+ * value back to `data[variableName]`) still runs unconditionally, so custom
+ * renderers don't need to handle it.
+ */
+import type { DocumentTemplateItem } from './template.js';
+/**
+ * Signature for a custom renderer registered against a specific `inputType`.
+ *
+ * Must return the Vue template fragment string to splice into the document
+ * template. Receives:
+ *
+ *   - `item` — a `cloneDeep`'d copy of the template item, with two
+ *     transformations already applied to `item.inputAttributes`:
+ *       1. `migrateInputAttributes()` — Vuetify v3→v4 attribute migration
+ *          (e.g. bare `dense` → `density="compact"`).
+ *       2. If `item.conditionalDisplay` was set, `v-if="<expr>"` has already
+ *          been appended. **Renderers don't need to handle
+ *          `conditionalDisplay` separately** — just include
+ *          `item.inputAttributes` on the emitted tag.
+ *   - `parentTemplates` — chain of ancestor template codes (used by nested
+ *     types like `DocumentForm` / `FormTable`); pass-through to nested
+ *     `useDocumentTemplate()` calls when relevant.
+ *   - `dataVariable` — the form `data` variable name. `"data"` at the top
+ *     level; nested tables pass their row alias (e.g. `"row"`).
+ *
+ * **Helpers safe to import from `./template`:**
+ *
+ *   - `buildValidationRules(item.validationRules)` — produces the
+ *     `:rules="[rules.x()]"` attribute string (or `''` when no rules).
+ *     The same helper used by the built-in switch arms.
+ *   - `optionStringToChoiceObject(item.inputOptions)` — parses
+ *     `"a|1,b|2"` / array forms into `ChoiceItem[]`.
+ *   - `escapeObjectForInlineBinding(obj)` — `JSON.stringify` + `'` escaping
+ *     for inline `v-bind` payloads.
+ *   - `processDefaultTemplate(item, insideTemplate?, optionString?, validationRules?, dataVariable?)`
+ *     — the same fallback used for unknown types. Call it from a renderer
+ *     when you want "the default plus a wrapper".
+ *
+ * **Handled for you AFTER `render` returns:**
+ *
+ *   - The `computedValue` post-pass that appends
+ *     `<FormHidden v-model="data.x" :hook="()=>computedValue"/>`
+ *     when both `item.computedValue` and `item.variableName` are set.
+ *   - Column wrapping (`<v-col cols=…>`), `columnAttributes`, `customClass`,
+ *     `customStyle` are applied by the caller (`columnWrapTemplateItemString`).
+ *
+ * **What `optionString` is and why it isn't passed:** the built-in switch
+ * arms precompute an `optionString` for the specific built-in option-bearing
+ * types (`MasterAutocomplete`, `VSelect`, `VAutocomplete`, `VCombobox`,
+ * `FormCheckboxGroup`, `VRadio`, `VRadioInline`, `Header`). For any
+ * custom-registered `inputType` that string is empty, so passing it would
+ * be dead weight. Compose your own option markup with the two helpers above
+ * when needed.
+ *
+ * **Minimal "field-shaped" renderer template:**
+ *
+ *   ```ts
+ *   import { buildValidationRules } from '@ramathibodi/nuxt-commons'
+ *
+ *   render(item, _parents, dataVariable) {
+ *     const variable = (item.variableName ?? '').replace(/[^\w$]/g, '')
+ *     const attrs = item.inputAttributes ? ` ${item.inputAttributes.trim()}` : ''
+ *     const rules = item.validationRules ? buildValidationRules(item.validationRules) : ''
+ *     return `<MyComponent `
+ *       + `:value="${dataVariable}.${variable}" `
+ *       + `@update:value="v => ${dataVariable}.${variable} = v"`
+ *       + `${attrs}${rules ? ' ' + rules : ''}/>`
+ *   }
+ *   ```
+ */
+export type DocumentTemplateInputTypeRenderer = (item: DocumentTemplateItem, parentTemplates: string | string[], dataVariable: string) => string;
+export interface DocumentTemplateInputType {
+    /** Label shown in the input-type dropdown. */
+    label: string;
+    /**
+     * `inputType` value stored in the template JSON. For app-specific types,
+     * this must be a globally-registered Vue component tag — the runtime
+     * renderer emits it as `<value v-model=… label=… …/>`.
+     */
+    value: string;
+    /** Default `true`. Set `false` for decoration types (e.g. `Header`, `Separator`). */
+    needsVariableName?: boolean;
+    /** Default `true`. Set `false` for types that have no label (e.g. `Separator`, `CustomCode`). */
+    needsLabel?: boolean;
+    /** Default `true`. Set `false` for types laid out outside the grid (e.g. `Separator`, `FormHidden`). */
+    needsWidth?: boolean;
+    /**
+     * Whether the generic `inputOptions` editor (textarea / specific editor)
+     * is shown. Default `true`. Set `false` only when the type has no
+     * meaningful inputOptions (e.g. `Separator`, `CustomCode`, `FormFile`).
+     */
+    showsOptions?: boolean;
+    /** Default `false`. Set `true` to make `inputOptions` required in the editor. */
+    requiresOptions?: boolean;
+    /** Override the textarea label (`'Input Options'` by default). */
+    optionsLabel?: string;
+    /**
+     * Render the choice-array editor instead of a plain textarea. Applies to
+     * the choice-style inputs (select, radio, checkbox-group, etc.).
+     */
+    optionsAsChoice?: boolean;
+    /**
+     * Marks the type as having a custom inputOptions sub-editor handled inline
+     * by `TemplateBuilder.vue` (FormHidden / FormTable / FormTableData). Apps
+     * cannot extend this; new built-ins must update the builder UI as well.
+     */
+    hasSpecificOptionEditor?: boolean;
+    /** Default `false`. Hides the Validations expansion panel. */
+    hidesValidationRules?: boolean;
+    /** Default `false`. Hides the `Input Attributes` field inside Advanced settings. */
+    hidesInputAttributes?: boolean;
+    /** Default `false`. Hides the `Column Attributes` field inside Advanced settings. */
+    hidesColumnAttributes?: boolean;
+    /** Default `false`. Hides the entire Advanced settings expansion panel. */
+    hidesAdvancedSettings?: boolean;
+    /** Default `false`. Hides the Class and Styles expansion panel. */
+    hidesClassAndStyle?: boolean;
+    /**
+     * Optional renderer that overrides the default `<Tag v-model="…" label="…"/>`
+     * emission for this `inputType`. Use when an app component does not follow
+     * the standard contract (different value prop, slot content, etc.).
+     */
+    render?: DocumentTemplateInputTypeRenderer;
+}
+/**
+ * Built-in registry. One entry per inputType that `TemplateBuilder.vue`
+ * historically hard-coded. Flag values mirror the previous arrays
+ * (`requireOption`, `notRequireVariable`, `notRequireLabel`, `notRequireWidth`,
+ * `notRequireOptions`, `notRequireRules`, `notRequireInputAttributes`,
+ * `notRequireColumnAttributes`, `notRequireAdvancedSetting`,
+ * `notRequireClassAndStyle`, `choiceOption`, `inputOptionsLabel`,
+ * `hasSpecificOption`).
+ */
+export declare const BUILT_IN_DOCUMENT_TEMPLATE_INPUT_TYPES: readonly DocumentTemplateInputType[];
+/**
+ * Merge multiple lists of input-type definitions. Later entries win on
+ * `value` collision, allowing a consumer to override a built-in entry's
+ * label or flags (e.g. relabel "Text Field" to "Free Text" in one app).
+ *
+ * Render functions follow the same precedence: a later entry without
+ * `render` does NOT clear an earlier-registered render (the shallow merge
+ * keeps the prior value). To explicitly remove a render, set
+ * `render: undefined` on the later entry, or call
+ * `unregisterDocumentTemplateInputType`.
+ */
+export declare function mergeDocumentTemplateInputTypes(...lists: Array<readonly DocumentTemplateInputType[] | DocumentTemplateInputType[] | undefined | null>): DocumentTemplateInputType[];
+/**
+ * Register (or upsert) an input-type entry. Returns an `unregister()`
+ * function so callers — especially HMR-aware Nuxt plugins — can revert the
+ * registration. Calling `register` twice with the same `value` performs a
+ * shallow merge, matching the wider `mergeDocumentTemplateInputTypes`
+ * semantics. No-op (and returns a no-op unregister) when `entry` lacks a
+ * string `value`.
+ *
+ * **Where to call from:**
+ * - Nuxt plugin (`app/plugins/*.ts`) — the canonical place for app-wide
+ *   registration. Entries persist for the lifetime of the app.
+ * - Inside a Vue component setup — prefer `useDocumentTemplateInputType`
+ *   instead; it wraps this function with auto-cleanup on unmount.
+ */
+export declare function registerDocumentTemplateInputType(entry: DocumentTemplateInputType): () => void;
+/** Explicit removal — handy in unit tests and for one-off cleanup. */
+export declare function unregisterDocumentTemplateInputType(value: string): void;
+/**
+ * Page-scoped registration. Calls `registerDocumentTemplateInputType` and
+ * schedules the returned `unregister()` on `onScopeDispose`, so the entry
+ * is removed automatically when the surrounding effect scope (typically a
+ * Vue component's setup) is disposed.
+ *
+ * If called outside an effect scope, the registration persists for the
+ * lifetime of the runtime — at which point you should use
+ * `registerDocumentTemplateInputType` directly so the lifecycle is explicit.
+ */
+export declare function useDocumentTemplateInputType(entry: DocumentTemplateInputType): void;
+/** Snapshot of the runtime registry. Internal — exported for tests. */
+export declare function _getDocumentTemplateRuntimeRegistry(): DocumentTemplateInputType[];
+/** Test-only reset. Does not affect built-ins. */
+export declare function _resetDocumentTemplateRuntimeRegistry(): void;
+/**
+ * Look up a single entry from the merged registry (built-in ⊕ runtime).
+ * Used by `templateItemToString` to decide whether a custom `render` is in
+ * play.
+ */
+export declare function getDocumentTemplateInputTypeEntry(value: string): DocumentTemplateInputType | undefined;
+/**
+ * Read the merged input-type registry: built-in ⊕ runtime registry.
+ * Stable across calls (re-reads on every call so HMR-driven re-registration
+ * picks up). Returns a fresh array — callers may mutate without affecting
+ * the underlying state.
+ */
+export declare function useDocumentTemplateInputTypes(): DocumentTemplateInputType[];

package/dist/runtime/composables/document/templateInputTypes.js

@@ -0,0 +1,128 @@
+import { getCurrentScope, onScopeDispose } from "vue";
+export const BUILT_IN_DOCUMENT_TEMPLATE_INPUT_TYPES = Object.freeze([
+  { label: "Text Field", value: "VTextField" },
+  { label: "Text Area", value: "VTextarea" },
+  { label: "Text Date Picker", value: "FormDate" },
+  { label: "Text Time Picker", value: "FormTime" },
+  { label: "Text Date & Time Picker", value: "FormDateTime" },
+  { label: "Select Dropdown", value: "VSelect", requiresOptions: true, optionsAsChoice: true },
+  { label: "Select Combobox", value: "VCombobox", requiresOptions: true, optionsAsChoice: true },
+  { label: "Autocomplete", value: "VAutocomplete", requiresOptions: true, optionsAsChoice: true },
+  { label: "Autocomplete from Master", value: "MasterAutocomplete", requiresOptions: true, optionsLabel: "Group Key" },
+  { label: "Radio Buttons", value: "VRadio", requiresOptions: true, optionsAsChoice: true },
+  { label: "Radio Buttons Inline", value: "VRadioInline", requiresOptions: true, optionsAsChoice: true },
+  { label: "Checkbox", value: "VCheckbox" },
+  { label: "Checkbox Group", value: "FormCheckboxGroup", requiresOptions: true, optionsAsChoice: true },
+  { label: "Switch", value: "VSwitch" },
+  { label: "File Upload", value: "FormFile", needsLabel: false, showsOptions: false },
+  { label: "Signature Pad", value: "FormSignPad" },
+  { label: "Table", value: "FormTable", requiresOptions: true, hasSpecificOptionEditor: true },
+  { label: "Table Data", value: "FormTableData", requiresOptions: true, hasSpecificOptionEditor: true },
+  {
+    label: "[Decoration] Header",
+    value: "Header",
+    needsVariableName: false,
+    needsWidth: false,
+    optionsLabel: "Class",
+    hidesValidationRules: true,
+    hidesInputAttributes: true
+  },
+  {
+    label: "[Decoration] Separator",
+    value: "Separator",
+    needsVariableName: false,
+    needsLabel: false,
+    needsWidth: false,
+    showsOptions: false,
+    hidesValidationRules: true,
+    hidesInputAttributes: true,
+    hidesColumnAttributes: true,
+    hidesAdvancedSettings: true
+  },
+  {
+    label: "[Advanced] Hidden Field",
+    value: "FormHidden",
+    needsLabel: false,
+    needsWidth: false,
+    hasSpecificOptionEditor: true,
+    hidesValidationRules: true,
+    hidesColumnAttributes: true,
+    hidesClassAndStyle: true
+  },
+  {
+    label: "[Advanced] Inherit Form",
+    value: "DocumentForm",
+    needsVariableName: false,
+    needsLabel: false,
+    needsWidth: false,
+    requiresOptions: true,
+    optionsLabel: "Template Code",
+    hidesValidationRules: true,
+    hidesInputAttributes: true,
+    hidesColumnAttributes: true
+  },
+  {
+    label: "[Advanced] Custom Code",
+    value: "CustomCode",
+    needsVariableName: false,
+    needsLabel: false,
+    showsOptions: false,
+    hidesValidationRules: true,
+    hidesInputAttributes: true,
+    hidesAdvancedSettings: true
+  }
+]);
+export function mergeDocumentTemplateInputTypes(...lists) {
+  const byValue = /* @__PURE__ */ new Map();
+  for (const list of lists) {
+    if (!list) continue;
+    for (const entry of list) {
+      if (!entry || typeof entry.value !== "string" || entry.value.length === 0) continue;
+      byValue.set(entry.value, { ...byValue.get(entry.value), ...entry });
+    }
+  }
+  return [...byValue.values()];
+}
+const runtimeRegistry = /* @__PURE__ */ new Map();
+export function registerDocumentTemplateInputType(entry) {
+  if (!entry || typeof entry.value !== "string" || entry.value.length === 0) {
+    return () => {
+    };
+  }
+  const previous = runtimeRegistry.get(entry.value);
+  const merged = { ...previous, ...entry };
+  runtimeRegistry.set(entry.value, merged);
+  return () => {
+    if (runtimeRegistry.get(entry.value) === merged) {
+      runtimeRegistry.delete(entry.value);
+    }
+  };
+}
+export function unregisterDocumentTemplateInputType(value) {
+  runtimeRegistry.delete(value);
+}
+export function useDocumentTemplateInputType(entry) {
+  const unregister = registerDocumentTemplateInputType(entry);
+  if (getCurrentScope()) {
+    onScopeDispose(unregister);
+  }
+}
+export function _getDocumentTemplateRuntimeRegistry() {
+  return [...runtimeRegistry.values()];
+}
+export function _resetDocumentTemplateRuntimeRegistry() {
+  runtimeRegistry.clear();
+}
+export function getDocumentTemplateInputTypeEntry(value) {
+  if (!value) return void 0;
+  const fromRuntime = runtimeRegistry.get(value);
+  const builtIn = BUILT_IN_DOCUMENT_TEMPLATE_INPUT_TYPES.find((t) => t.value === value);
+  if (fromRuntime) return { ...builtIn, ...fromRuntime };
+  return builtIn;
+}
+export function useDocumentTemplateInputTypes() {
+  return mergeDocumentTemplateInputTypes(
+    BUILT_IN_DOCUMENT_TEMPLATE_INPUT_TYPES,
+    _getDocumentTemplateRuntimeRegistry()
+  );
+}

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

@@ -29,7 +29,7 @@ export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T):
     importItems: (importItems: Record<string, any>[], callback?: FormDialogCallback) => void;
     updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
     deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-    loadItems: (options: any) => void;
-    reload: () => void;
+    loadItems: (options: any) => Promise<void> | undefined;
+    reload: () => Promise<void> | undefined;
     isLoading: import("vue").Ref<boolean, boolean>;
 };

package/dist/runtime/composables/graphqlModel.js

@@ -127,7 +127,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 +141,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 = [];

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -47,6 +47,8 @@
     "prepack": "nuxt-module-build build",
     "dev": "npm run dev:prepare && nuxt dev playground",
     "dev:build": "nuxt build playground",
+    "dev:generate": "nuxt generate playground",
+    "playground:scaffold": "node scripts/scaffold-playground-pages.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",
@@ -86,7 +88,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/generate-ai-summary.mjs

@@ -159,6 +159,73 @@ function extractEmits(content) {
   return emits
 }
 
+function extractTemplate(content) {
+  const m = content.match(/<template[^>]*>([\s\S]*)<\/template>/i)
+  return m ? m[1] : ''
+}
+
+function extractSlots(content) {
+  const slots = []
+  const seen = new Set()
+  const template = extractTemplate(content)
+  if (!template) return slots
+
+  const slotRe = /<slot\b([^>]*?)(?:\/?>)/g
+  let match
+  while ((match = slotRe.exec(template)) !== null) {
+    const attrs = match[1] || ''
+    const nameMatch = attrs.match(/(?:^|\s)name\s*=\s*"([^"]+)"/)
+                   || attrs.match(/(?:^|\s)#([A-Za-z_][A-Za-z0-9_-]*)/)
+    const name = nameMatch ? nameMatch[1] : 'default'
+    if (seen.has(name)) continue
+    seen.add(name)
+
+    const bindings = []
+    const bindRe = /:([A-Za-z_][A-Za-z0-9_-]*)\s*=\s*"([^"]*)"/g
+    let bm
+    while ((bm = bindRe.exec(attrs)) !== null) {
+      if (bm[1] === 'name') continue
+      bindings.push({ name: bm[1], expression: compact(bm[2]) })
+    }
+    slots.push({ name, bindings })
+  }
+  return slots
+}
+
+function extractExposed(content) {
+  const exposed = []
+  const m = content.match(/defineExpose\s*\(\s*\{([\s\S]*?)\}\s*\)/)
+  if (!m) return exposed
+  const body = m[1]
+  // Match top-level identifiers; ignore values, nested braces handled by depth.
+  let depth = 0
+  let token = ''
+  const tokens = []
+  for (let i = 0; i < body.length; i++) {
+    const ch = body[i]
+    if (ch === '{' || ch === '(' || ch === '[') depth++
+    else if (ch === '}' || ch === ')' || ch === ']') depth--
+    else if (ch === ',' && depth === 0) {
+      tokens.push(token); token = ''
+      continue
+    }
+    token += ch
+  }
+  if (token.trim()) tokens.push(token)
+
+  for (const raw of tokens) {
+    const piece = raw.trim().replace(/^\s*\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '').trim()
+    if (!piece) continue
+    // `name`, `name: value`, `name(...) {}` — take the first identifier.
+    const idMatch = piece.match(/^([A-Za-z_$][A-Za-z0-9_$]*)/)
+    if (!idMatch) continue
+    const name = idMatch[1]
+    if (exposed.find(e => e.name === name)) continue
+    exposed.push({ name })
+  }
+  return exposed
+}
+
 function extractExports(content) {
   const functions = []
   const constants = []
@@ -251,11 +318,15 @@ for (const file of componentFiles) {
   const summary = extractTopDescription(content)
   const props = extractProps(content)
   const emits = extractEmits(content)
+  const slots = extractSlots(content)
+  const exposed = extractExposed(content)
   const componentEntry = {
     path: rel,
     summary,
     props,
     emits,
+    slots,
+    exposed,
   }
   docModel.components.push(componentEntry)
 
@@ -283,6 +354,23 @@ for (const file of componentFiles) {
   } else {
     lines.push('- Emits: None detected.')
   }
+  if (slots.length) {
+    lines.push(`- Slots (${slots.length}):`)
+    for (const s of slots) {
+      const bindings = s.bindings.length ? ` bindings: ${s.bindings.map(b => `${b.name}=${b.expression}`).join(', ')}` : ''
+      lines.push(`  - \`${s.name}\`${bindings}`)
+    }
+  } else {
+    lines.push('- Slots: None detected.')
+  }
+  if (exposed.length) {
+    lines.push(`- Exposed (${exposed.length}):`)
+    for (const x of exposed) {
+      lines.push(`  - \`${x.name}\``)
+    }
+  } else {
+    lines.push('- Exposed: None detected.')
+  }
   lines.push('')
 }