nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/module.d.mts

@@ -23,6 +23,8 @@ declare module '@nuxt/schema' {
 interface ModuleOptions {
     prefix?: string;
     global?: boolean;
+    /** Ships the thin overlay-style scrollbar stylesheet applied to every scroll container. Defaults to `true`. */
+    scrollbars?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,13 +1,13 @@
 {
-  "name": "nuxt-ui-tools",
-  "configKey": "nuxtUiTools",
-  "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "compatibility": {
     "nuxt": ">=4.4.0"
   },
-  "version": "0.1.3",
+  "configKey": "nuxtUiTools",
+  "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
+  "name": "nuxt-ui-tools",
+  "version": "1.0.1",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,25 +1,30 @@
 import { createRequire } from 'node:module';
 import { join, dirname } from 'node:path';
-import { addComponent, addImports, logger, addTemplate, defineNuxtModule, createResolver, installModule } from '@nuxt/kit';
+import { addComponent, addImports, logger, defineNuxtModule, createResolver, installModule, addPlugin, addVitePlugin } from '@nuxt/kit';
 import { breakpointsTailwind } from '@vueuse/core';
+import typescript from 'typescript';
+import { isString, isFunction } from '../dist/runtime/shared/utils/predicate.js';
 
 function getPublicComponents(runtimeDir, options) {
   const prefix = options.prefix ?? "Ui";
   return [
     // I18n
     {
-      name: `${prefix}ToolsProvider`,
       filePath: `${runtimeDir}/i18n/provider.vue`,
-      global: options.global
+      global: options.global,
+      name: `${prefix}ToolsProvider`
     },
     // Table
     {
-      name: `${prefix}DataList`,
-      filePath: `${runtimeDir}/table/components/DataList.vue`,
-      global: options.global
+      filePath: `${runtimeDir}/table/components/data-list.vue`,
+      global: options.global,
+      name: `${prefix}DataList`
     },
     ...[
       "Root",
+      "ActionsDropdown",
+      "ActionsToolbar",
+      "SelectionActions",
       "Search",
       "FilterTags",
       "AddFilter",
@@ -36,25 +41,30 @@ function getPublicComponents(runtimeDir, options) {
       "Pagination",
       "InfiniteLoader"
     ].map((part) => ({
-      name: `${prefix}DataList${part}`,
-      filePath: `${runtimeDir}/table/components/data-list/DataList${part}.vue`,
-      global: options.global
+      filePath: `${runtimeDir}/table/components/data-list/data-list-${toKebabCase(part)}.vue`,
+      global: options.global,
+      name: `${prefix}DataList${part}`
     })),
     // Form
     {
-      name: `${prefix}Form`,
-      filePath: `${runtimeDir}/form/components/root/Form.vue`,
-      global: options.global
+      filePath: `${runtimeDir}/form/components/root/form.vue`,
+      global: options.global,
+      name: `${prefix}Form`
     },
     {
-      name: `${prefix}FormProvider`,
-      filePath: `${runtimeDir}/form/components/provider/FormProvider.vue`,
-      global: options.global
+      filePath: `${runtimeDir}/form/components/provider/form-provider.vue`,
+      global: options.global,
+      name: `${prefix}FormProvider`
     }
   ];
 }
+function toKebabCase(value) {
+  return value.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").toLowerCase();
+}
 function setupComponents(runtimeDir, options) {
-  for (const component of getPublicComponents(runtimeDir, options)) addComponent(component);
+  for (const component of getPublicComponents(runtimeDir, options)) {
+    addComponent(component);
+  }
 }
 
 function withRuntime(runtimeDir, imports) {
@@ -67,64 +77,195 @@ function setupImports(runtimeDir) {
   addImports([
     // Query state
     ...withRuntime(runtimeDir, [
-      { name: "booleanCodec", from: "query-state" },
-      { name: "createArrayCodec", from: "query-state" },
-      { name: "createEnumCodec", from: "query-state" },
-      { name: "dateISOCodec", from: "query-state" },
-      { name: "dynamicQueryState", from: "query-state" },
-      { name: "numberCodec", from: "query-state" },
-      { name: "registerQueryStateClient", from: "query-state" },
-      { name: "stringCodec", from: "query-state" },
-      { name: "useQueryState", from: "query-state" },
-      { name: "useQueryStateClient", from: "query-state" },
-      { name: "useQueryStates", from: "query-state" }
+      { from: "query-state", name: "booleanCodec" },
+      { from: "query-state", name: "createArrayCodec" },
+      { from: "query-state", name: "createEnumCodec" },
+      { from: "query-state", name: "dateISOCodec" },
+      { from: "query-state", name: "dynamicQueryState" },
+      { from: "query-state", name: "numberCodec" },
+      { from: "query-state", name: "registerQueryStateClient" },
+      { from: "query-state", name: "stringCodec" },
+      { from: "query-state", name: "useQueryState" },
+      { from: "query-state", name: "useQueryStateClient" },
+      { from: "query-state", name: "useQueryStates" }
+    ]),
+    // Query prefetch
+    ...withRuntime(runtimeDir, [
+      { from: "query-prefetch", name: "defineQueryPrefetch" },
+      { from: "query-prefetch", name: "defineQueryPrefetchPlan" },
+      { from: "query-prefetch", name: "executeQueryPrefetch" },
+      { from: "query-prefetch", name: "executeQueryPrefetchPlan" },
+      { from: "query-prefetch", name: "prefetchPage" }
     ]),
     // I18n
     ...withRuntime(runtimeDir, [
-      { name: "defineUiToolsLocale", from: "i18n" },
-      { name: "extendUiToolsLocale", from: "i18n" },
-      { name: "provideUiToolsLocale", from: "i18n" },
-      { name: "useUiToolsLocale", from: "i18n" }
+      { from: "i18n", name: "defineUiToolsLocale" },
+      { from: "i18n", name: "extendUiToolsLocale" },
+      { from: "i18n", name: "provideUiToolsLocale" },
+      { from: "i18n", name: "useUiToolsLocale" }
     ]),
     // Shared responsive helpers
     ...withRuntime(runtimeDir, [
-      { name: "getResponsiveValue", from: "shared" },
-      { name: "parseResponsiveValue", from: "shared" },
-      { name: "resolveResponsiveValueAtBreakpoint", from: "shared" },
-      { name: "useResponsiveValue", from: "shared" }
+      { from: "shared", name: "getResponsiveValue" },
+      { from: "shared", name: "parseResponsiveValue" },
+      { from: "shared", name: "resolveResponsiveValueAtBreakpoint" },
+      { from: "shared", name: "useResponsiveValue" }
     ]),
     // Table
     ...withRuntime(runtimeDir, [
-      { name: "createTableColumnBuilder", from: "table" },
-      { name: "createTableFilterBuilder", from: "table" },
-      { name: "defineTableSchema", from: "table" },
-      { name: "useTable", from: "table" }
+      { from: "table", name: "createTableColumnBuilder" },
+      { from: "table", name: "createTableFilterBuilder" },
+      { from: "table", name: "defineTableSchema" },
+      { from: "table", name: "prefetchTable" },
+      { from: "table", name: "tableSource" },
+      { from: "table", name: "useTable" }
     ]),
     // Form
     ...withRuntime(runtimeDir, [
-      { name: "defineFormField", from: "form" },
-      { name: "defineFormFields", from: "form" },
-      { name: "defineFormSchema", from: "form" },
-      { name: "useForm", from: "form" },
-      { name: "useFormApi", from: "form" },
-      { name: "useFormSubmit", from: "form" }
+      { from: "form", name: "defineFormField" },
+      { from: "form", name: "defineFormFields" },
+      { from: "form", name: "defineFormSchema" },
+      { from: "form", name: "useForm" },
+      { from: "form", name: "useFormApi" }
     ])
   ]);
 }
 
+const SCRIPT_SETUP_TAG_RE = /<script\b(?=[^>]*\bsetup\b)[^>]*>/u;
+function getMacroCall(typescript, statement, name) {
+  if (!typescript.isExpressionStatement(statement) || !typescript.isCallExpression(statement.expression)) {
+    return;
+  }
+  if (!typescript.isIdentifier(statement.expression.expression)) {
+    return;
+  }
+  if (statement.expression.expression.text !== name) {
+    return;
+  }
+  return statement.expression;
+}
+function getPropertyName(typescript, property, source) {
+  if (typescript.isSpreadAssignment(property)) {
+    return;
+  }
+  const name = "name" in property ? property.name : void 0;
+  if (!name) {
+    return;
+  }
+  if (typescript.isComputedPropertyName(name)) {
+    const { expression } = name;
+    if (typescript.isStringLiteral(expression) || typescript.isNoSubstitutionTemplateLiteral(expression)) {
+      return expression.text;
+    }
+    return;
+  }
+  return name.getText(source);
+}
+function applyTextEdits(code, edits) {
+  return [...edits].sort((left, right) => right.start - left.start).reduce(
+    (transformed, edit) => `${transformed.slice(0, edit.start)}${edit.text}${transformed.slice(edit.end)}`,
+    code
+  );
+}
+function transformQueryPrefetchMacro(typescript, code, id) {
+  const scriptTag = SCRIPT_SETUP_TAG_RE.exec(code);
+  if (!scriptTag) {
+    return;
+  }
+  const scriptStart = scriptTag.index + scriptTag[0].length;
+  const scriptEnd = code.indexOf("<\/script>", scriptStart);
+  if (scriptEnd === -1) {
+    return;
+  }
+  const script = code.slice(scriptStart, scriptEnd);
+  const source = typescript.createSourceFile(
+    id,
+    script,
+    typescript.ScriptTarget.Latest,
+    true,
+    typescript.ScriptKind.TSX
+  );
+  const prefetchStatements = source.statements.map((statement) => ({
+    call: getMacroCall(typescript, statement, "defineQueryPrefetch"),
+    statement
+  })).filter((entry) => !!entry.call);
+  if (!prefetchStatements.length) {
+    return;
+  }
+  if (prefetchStatements.length > 1) {
+    throw new Error(`Multiple defineQueryPrefetch calls are not supported in ${id}`);
+  }
+  const pageMetaStatements = source.statements.map((statement) => ({
+    call: getMacroCall(typescript, statement, "definePageMeta"),
+    statement
+  })).filter((entry) => !!entry.call);
+  if (pageMetaStatements.length > 1) {
+    throw new Error(`Multiple definePageMeta calls are not supported in ${id}`);
+  }
+  const prefetch = prefetchStatements[0];
+  if (!prefetch) {
+    return;
+  }
+  const { call: prefetchCall, statement: prefetchStatement } = prefetch;
+  if (prefetchCall.arguments.length !== 2) {
+    throw new Error(`defineQueryPrefetch must receive a route name and resolver in ${id}`);
+  }
+  const prefetchCode = prefetchCall.getText(source);
+  const pageMeta = pageMetaStatements[0];
+  if (!pageMeta) {
+    return applyTextEdits(code, [
+      {
+        end: scriptStart + prefetchStatement.end,
+        start: scriptStart + prefetchStatement.getStart(source),
+        text: `definePageMeta({
+  queryPrefetch: ${prefetchCode},
+})`
+      }
+    ]);
+  }
+  const meta = pageMeta.call.arguments[0];
+  if (!meta || !typescript.isObjectLiteralExpression(meta)) {
+    throw new Error(`definePageMeta must receive an object when using defineQueryPrefetch in ${id}`);
+  }
+  if (meta.properties.some((property) => typescript.isSpreadAssignment(property))) {
+    throw new Error(
+      `definePageMeta spreads are unsupported when using defineQueryPrefetch in ${id}`
+    );
+  }
+  const alreadyConfigured = meta.properties.some(
+    (property) => getPropertyName(typescript, property, source) === "queryPrefetch"
+  );
+  if (alreadyConfigured) {
+    throw new Error(`queryPrefetch is already configured through definePageMeta in ${id}`);
+  }
+  return applyTextEdits(code, [
+    {
+      end: scriptStart + meta.getStart(source) + 1,
+      start: scriptStart + meta.getStart(source) + 1,
+      text: `
+  queryPrefetch: ${prefetchCode},`
+    },
+    {
+      end: scriptStart + prefetchStatement.end,
+      start: scriptStart + prefetchStatement.getStart(source),
+      text: ""
+    }
+  ]);
+}
+
 function isUiCssTemplate(template) {
   if (template.filename === "ui.css") {
     return true;
   }
-  return typeof template.dst === "string" && template.dst.endsWith("/ui.css");
+  return isString(template.dst) && template.dst.endsWith("/ui.css");
 }
 function hasContentsGetter(template) {
-  return typeof template?.filename === "string" && typeof template.getContents === "function";
+  return isString(template?.filename) && isFunction(template.getContents);
 }
 function setupTailwindCss(nuxt, runtimeDir) {
   const runtimeSource = `${runtimeDir.replaceAll("\\", "/")}/**/*.{vue,js,mjs,ts,jsx,tsx}`;
   const sourceDirective = `@source "${runtimeSource}";`;
-  nuxt.hook("modules:done", () => {
+  nuxt.hook("ready", () => {
     const uiCssTemplate = nuxt.options.build.templates.find(isUiCssTemplate);
     if (!hasContentsGetter(uiCssTemplate)) {
       logger.warn(
@@ -132,17 +273,18 @@ function setupTailwindCss(nuxt, runtimeDir) {
       );
       return;
     }
-    addTemplate({
-      filename: "ui.css",
-      write: true,
-      getContents: async (ctx) => {
-        const uiCss = await uiCssTemplate.getContents(ctx);
-        if (typeof uiCss !== "string") return sourceDirective;
-        if (uiCss.includes(sourceDirective)) return uiCss;
-        return `${sourceDirective}
-${uiCss}`;
+    const getUiCss = uiCssTemplate.getContents;
+    uiCssTemplate.getContents = async (ctx) => {
+      const uiCss = await getUiCss(ctx);
+      if (!isString(uiCss)) {
+        return sourceDirective;
       }
-    });
+      if (uiCss.includes(sourceDirective)) {
+        return uiCss;
+      }
+      return `${sourceDirective}
+${uiCss}`;
+    };
   });
 }
 
@@ -156,21 +298,28 @@ const viewportDefaults = {
   fallbackBreakpoint: "lg",
   feature: "minWidth"
 };
-const publicRuntimeDomains = ["form", "i18n", "query-state", "shared", "table"];
+const publicRuntimeDomains = [
+  "form",
+  "i18n",
+  "query-prefetch",
+  "query-state",
+  "shared",
+  "table"
+];
 const require$1 = createRequire(import.meta.url);
 const cookieEsmPath = join(dirname(require$1.resolve("cookiejs/package.json")), "dist/cookie.esm.js");
 const module$1 = defineNuxtModule({
   defaults: {
-    prefix: "Ui",
-    global: false
+    global: false,
+    prefix: "Ui"
   },
   meta: {
-    name: "nuxt-ui-tools",
-    configKey: "nuxtUiTools",
-    docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
     compatibility: {
       nuxt: ">=4.4.0"
-    }
+    },
+    configKey: "nuxtUiTools",
+    docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
+    name: "nuxt-ui-tools"
   },
   moduleDependencies: {
     "@nuxt/ui": {
@@ -189,8 +338,9 @@ const module$1 = defineNuxtModule({
     const internationalizedDateDir = dirname(
       dirname(nuxtUiRequire.resolve("@internationalized/date"))
     );
-    for (const domain of publicRuntimeDomains)
+    for (const domain of publicRuntimeDomains) {
       nuxt.options.alias[`#ui-tools/${domain}`] = resolve(`./runtime/${domain}`);
+    }
     nuxt.options.alias["@nuxt/ui/components"] ??= nuxtUiComponentsDir;
     nuxt.options.alias["@nuxt/ui/composables"] ??= join(nuxtUiRuntimeDir, "composables");
     nuxt.options.alias["@nuxt/ui/runtime"] ??= nuxtUiRuntimeDir;
@@ -211,8 +361,28 @@ const module$1 = defineNuxtModule({
     nuxt.options.viewport = viewportOptions;
     await installModule("nuxt-viewport", viewportOptions);
     setupTailwindCss(nuxt, resolve("./runtime"));
+    nuxt.options.css.push(resolve("./runtime/shared/styles/tokens.css"));
+    if (options.scrollbars !== false) {
+      nuxt.options.css.push(resolve("./runtime/shared/styles/scrollbars.css"));
+    }
     setupImports(resolve("./runtime"));
     setupComponents(resolve("./runtime"), options);
+    addPlugin(resolve("./runtime/query-prefetch/plugins/link-prefetch.client"));
+    addVitePlugin({
+      enforce: "pre",
+      name: "nuxt-ui-tools:query-prefetch-macro",
+      transform(code, id) {
+        const path = id.split("?", 1)[0] ?? id;
+        if (!path.endsWith(".vue") || !/[\\/]pages[\\/]/u.test(path)) {
+          return;
+        }
+        const transformed = transformQueryPrefetchMacro(typescript, code, id);
+        if (!transformed || transformed === code) {
+          return;
+        }
+        return { code: transformed, map: null };
+      }
+    });
   }
 });
 function mergeViewportOptions(viewportOptions) {
@@ -231,7 +401,9 @@ function mergeViewportOptions(viewportOptions) {
   };
 }
 function normalizeViewportOptions(viewportOptions) {
-  if (viewportOptions === false) return mergeViewportOptions(void 0);
+  if (viewportOptions === false) {
+    return mergeViewportOptions();
+  }
   return mergeViewportOptions(viewportOptions);
 }
 function setupJsxCompilerOptions(config) {

package/dist/runtime/form/components/actions/{FormActions.vue → form-actions.vue}

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { getResponsiveValue } from "../../../shared/composables/use-responsive-value";
 import { useFormUi } from "../../composables/use-form-ui";
 import { createPublicFormApi } from "../../utils/api";
+import { invokeFormFunction, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -13,12 +14,12 @@ const props = defineProps({
 const formUi = useFormUi();
 const emit = defineEmits(["cancel"]);
 const actionContext = computed(() => ({
-  currentStep: props.runtime.currentStepIndex.value,
-  api: createPublicFormApi(props.runtime),
   actionPending: props.runtime.actionPending.value,
-  isMultiStep: props.runtime.isStepped.value,
+  api: createPublicFormApi(props.runtime),
+  currentStep: props.runtime.currentStepIndex.value,
   isFirstStep: props.runtime.isFirstStep.value,
-  isLastStep: props.runtime.isLastStep.value
+  isLastStep: props.runtime.isLastStep.value,
+  isMultiStep: props.runtime.isStepped.value
 }));
 const visibleActions = computed(
   () => props.actions.filter((action) => action.condition?.(actionContext.value) ?? true)
@@ -30,7 +31,9 @@ const actionsRight = computed(
   () => visibleActions.value.filter((action) => resolveActionSlot(action) !== "left")
 );
 async function runAction(action) {
-  if (isBuiltInAction(action, "submit")) return;
+  if (isBuiltInAction(action, "submit")) {
+    return;
+  }
   if (isBuiltInAction(action, "next")) {
     await props.runtime.nextStep();
     return;
@@ -40,14 +43,16 @@ async function runAction(action) {
     return;
   }
   if (isBuiltInAction(action, "reset")) {
-    props.runtime.reset();
+    await props.runtime.reset();
     return;
   }
   if (isBuiltInAction(action, "cancel")) {
     emit("cancel");
     return;
   }
-  if ("action" in action) await action.action?.(actionContext.value);
+  if ("action" in action) {
+    await action.action?.(actionContext.value);
+  }
 }
 function resolveActionLabel(action) {
   return resolveFormText(action.label);
@@ -61,32 +66,50 @@ function resolveActionWidth(action) {
   return width === "fill" ? "fill" : "fit";
 }
 function resolveActionLink(action) {
-  if (!("link" in action)) return void 0;
-  return typeof action.link === "function" ? action.link(actionContext.value) : action.link;
+  if (!("link" in action)) {
+    return;
+  }
+  if (isString(action.link)) {
+    return action.link;
+  }
+  const link = invokeFormFunction(action.link, [actionContext.value]);
+  return isString(link) ? link : void 0;
 }
 function isActionDisabled(action) {
   const disabled = action.disabled?.(actionContext.value) ?? false;
-  if (disabled) return true;
-  if (!props.runtime.actionPending.value) return false;
+  if (disabled) {
+    return true;
+  }
+  if (!props.runtime.actionPending.value) {
+    return false;
+  }
   return !isActionLoading(action);
 }
 function isActionLoading(action) {
-  if (!isBuiltInActionKey(action.key)) return false;
+  if (!isBuiltInActionKey(action.key)) {
+    return false;
+  }
   const pending = props.runtime.actionPending.value;
-  if (pending === null) return false;
-  if (pending === "submit" || pending === "next")
-    return action.key === "submit" || action.key === "next";
-  return false;
+  if (pending === null) {
+    return false;
+  }
+  return action.key === pending;
 }
 function resolveActionColor(action) {
-  if (action.color) return action.color;
-  if (action.type === "primary") return "primary";
-  return void 0;
+  if (action.color) {
+    return action.color;
+  }
+  if (action.type === "primary") {
+    return "primary";
+  }
 }
 function resolveActionVariant(action) {
-  if (action.variant) return action.variant;
-  if (action.type === "primary") return "solid";
-  return void 0;
+  if (action.variant) {
+    return action.variant;
+  }
+  if (action.type === "primary") {
+    return "solid";
+  }
 }
 function actionButtonClass(action) {
   return mergeFormUiClass(

package/dist/runtime/form/components/layout/{DrawerLayout.vue → drawer-layout.vue}

@@ -1,6 +1,7 @@
 <script setup>
 import UDrawer from "@nuxt/ui/components/Drawer.vue";
 import { computed } from "vue";
+import { isNumber } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   config: { type: Object, required: false },
@@ -10,19 +11,24 @@ const props = defineProps({
   dismissible: { type: Boolean, required: true },
   ui: { type: Object, required: false }
 });
-defineEmits(["update:open", "after-close"]);
+const emit = defineEmits(["update:open", "after-close"]);
 const direction = computed(() => props.config?.placement ?? "right");
 const contentStyle = computed(() => ({
-  width: cssSize(props.config?.width),
   height: cssSize(props.config?.height),
-  resize: props.config?.resizable ? ["top", "bottom"].includes(direction.value) ? "vertical" : "horizontal" : void 0
+  resize: props.config?.resizable ? ["top", "bottom"].includes(direction.value) ? "vertical" : "horizontal" : void 0,
+  width: cssSize(props.config?.width)
 }));
 const contentProps = computed(() => ({
   disableOutsidePointerEvents: void 0,
   style: contentStyle.value
 }));
 function cssSize(value) {
-  return typeof value === "number" ? `${value}px` : value;
+  return isNumber(value) ? `${value}px` : value;
+}
+function handleAnimationEnd(open) {
+  if (!open) {
+    emit("after-close");
+  }
 }
 </script>
 
@@ -36,14 +42,11 @@ function cssSize(value) {
     :content="contentProps"
     :handle="false"
     :ui="{
-  overlay: ui?.overlay,
-  content: mergeFormUiClass(
-    'h-dvh overflow-hidden border-l border-default p-0 md:max-w-xl',
-    ui?.content
-  )
+  overlay: mergeFormUiClass('bg-(--nut-form-veil) backdrop-blur-[2px]', ui?.overlay),
+  content: mergeFormUiClass('h-dvh max-w-full overflow-hidden border-default p-0', ui?.content)
 }"
     @update:open="$emit('update:open', $event)"
-    @animation-end="$emit('after-close')"
+    @animation-end="handleAnimationEnd"
   >
     <template #content>
       <slot />

package/dist/runtime/form/components/layout/{FullscreenLayout.vue → fullscreen-layout.vue}

@@ -20,7 +20,7 @@ defineEmits(["update:open", "after-close"]);
     fullscreen
     :dismissible="dismissible && config?.allowOutsideClick !== false"
     :ui="{
-  overlay: ui?.overlay,
+  overlay: mergeFormUiClass('bg-(--nut-form-veil) backdrop-blur-[2px]', ui?.overlay),
   content: mergeFormUiClass(
     'h-dvh overflow-hidden p-0 sm:max-w-none sm:rounded-none',
     ui?.content