nuxt-ui-tools 1.25.0 → 1.25.1

package/dist/runtime/display/types/blocks/facts.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayAction, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySurface, DisplayTone } from '../shared.js';
+import type { DisplayAction, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplaySurface, DisplayTone } from '../shared.js';
 export type DisplayFactsLayout = 'ledger' | 'grid' | 'inline' | 'columns' | 'tiles';
 export type DisplayFactsSlot = 'root' | 'group' | 'groupHeader' | 'groupTitle' | 'groupAside' | 'item' | 'label' | 'hint' | 'value' | 'empty' | 'actions';
 export interface DisplayFact {
@@ -19,6 +19,8 @@ export interface DisplayFact {
     icon?: string;
     /** Makes the value a link. */
     to?: string;
+    /** Where `to` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     /** Draws a placeholder bar instead of the value, such as one figure still loading. */
     loading?: boolean;
 }

package/dist/runtime/display/types/blocks/person.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
 export type DisplayPersonSlot = 'root' | 'avatar' | 'body' | 'name' | 'description' | 'chip' | 'group' | 'label' | 'contacts' | 'contact' | 'contactIcon' | 'contactValue';
 export interface DisplayPerson {
     name: DisplayText;
@@ -14,6 +14,8 @@ export interface DisplayPersonContact {
     value: string;
     /** Makes the value a link, such as `mailto:` or `tel:`. */
     href?: string;
+    /** Where `href` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     /** Adds a copy button. Defaults to `true`. */
     copy?: boolean;
 }

package/dist/runtime/display/types/blocks/record.d.ts

@@ -1,5 +1,5 @@
-import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayRevealable, DisplaySurface, DisplayTone } from '../shared.js';
-export type DisplayRecordSlot = 'root' | 'media' | 'icon' | 'body' | 'reference' | 'title' | 'meta' | 'description' | 'badges' | 'trailing' | 'trailingValue' | 'trailingCaption' | 'header' | 'list' | 'item' | 'more' | 'empty';
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayLinkTarget, DisplayRevealable, DisplaySurface, DisplayTone } from '../shared.js';
+export type DisplayRecordSlot = 'root' | 'media' | 'avatar' | 'icon' | 'body' | 'reference' | 'title' | 'meta' | 'description' | 'badges' | 'trailing' | 'trailingValue' | 'trailingCaption' | 'header' | 'list' | 'item' | 'more' | 'empty';
 export interface DisplayRecordItem {
     /** Small reference over the title, such as an identifier. */
     reference?: DisplayContent;
@@ -25,6 +25,8 @@ export interface DisplayRecordItem {
     chip?: DisplayChip;
     /** Makes the record a link. */
     to?: string;
+    /** Where `to` opens. Absolute http(s) links open in a new tab by default. */
+    target?: DisplayLinkTarget | null;
     onClick?: () => void;
 }
 export interface DisplayRecordProps extends DisplayBlockBase<DisplayRecordSlot>, Partial<DisplayRecordItem>, DisplayRevealable {

package/dist/runtime/display/types/config.d.ts

@@ -1,5 +1,5 @@
 import type { DisplayKind, DisplayPropsMap, DisplayUiMap } from './registry.js';
-import type { DisplayBuiltinTone, DisplayToneRegistry } from './shared.js';
+import type { DisplayBuiltinTone, DisplayChipUi, DisplayToneRegistry } from './shared.js';
 /**
  * Colors of a tone, as CSS colors. Only `color` is needed for a new tone: the ink defaults to it,
  * the soft background and the line mix it into the page background.
@@ -49,5 +49,12 @@ export interface DisplayUiConfig {
     presets?: DisplayPresets;
     /** Extra tones, and color changes to the built-in ones. Register new names in `DisplayToneRegistry`. */
     tones?: Partial<DisplayToneDefinitions>;
-    ui?: Partial<DisplayUiMap>;
+    /**
+     * Slot classes per kind, plus `chip`: the `UBadge` slots of every chip the blocks draw (facts
+     * chips, record badges, list chips…), so chips match the app's badge style. Tones still color
+     * them: leave colors out of these classes.
+     */
+    ui?: Partial<DisplayUiMap> & {
+        chip?: DisplayChipUi;
+    };
 }

package/dist/runtime/display/types/shared.d.ts

@@ -38,6 +38,11 @@ export type DisplayContent = LazyRenderableValue;
  * when the link is used (opened, previewed or downloaded), with the button showing its progress.
  */
 export type DisplayUrl = string | (() => MaybePromise<string>);
+/**
+ * Where a block link opens. Absolute http(s) links default to `_blank`, others to the same tab;
+ * `null` keeps an absolute link in the same tab.
+ */
+export type DisplayLinkTarget = '_blank' | '_self' | '_parent' | '_top' | (string & {});
 /** Date accepted by date-aware blocks: a `Date`, an ISO string, or epoch milliseconds. */
 export type DisplayDate = Date | string | number;
 /** Button rendered by a block, with every `UButton` prop. */
@@ -49,6 +54,10 @@ export interface DisplayChip extends Omit<BadgeProps, 'label'> {
     label: DisplayText;
     tone?: DisplayTone;
 }
+/** The `UBadge` slots of a chip. */
+export type DisplayChipSlot = 'base' | 'label' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'trailingIcon';
+/** Classes per `UBadge` slot of every chip, from `appConfig.nuxtUiTools.display.ui.chip`. */
+export type DisplayChipUi = DisplayUiSlots<DisplayChipSlot>;
 /** Avatar with every `UAvatar` prop. Without `src`, the initials of `alt` show. */
 export type DisplayAvatar = AvatarProps;
 /** Slot classes of a block: every key is optional and merged over the defaults. */

package/dist/runtime/display/utils/config.d.ts

@@ -1,6 +1,11 @@
 import type { AppConfig } from 'nuxt/schema';
-import type { DisplayKind, DisplayPropsMap, DisplayUiConfig } from '../types/index.js';
+import type { DisplayKind, DisplayPropsMap, DisplayUiConfig, DisplayUiSlots } from '../types/index.js';
 /** `appConfig.nuxtUiTools.display`, or an empty config. */
 export declare function resolveAppDisplayConfig(config: Pick<AppConfig, 'nuxtUiTools'>): DisplayUiConfig;
-/** The props of a block over the defaults of its preset; an unknown preset changes nothing. */
+/**
+ * The props of a block over the defaults of its preset; an unknown preset changes nothing. Slot
+ * classes merge per slot, the block's over the preset's, like the other props.
+ */
 export declare function applyDisplayPreset<TKind extends DisplayKind>(kind: TKind, props: DisplayPropsMap[TKind], preset: string | undefined, config: DisplayUiConfig): DisplayPropsMap[TKind];
+/** Two slot class maps merged per slot with tailwind-merge, `over` winning conflicts. */
+export declare function mergeDisplaySlots(base: DisplayUiSlots<string> | undefined, over: DisplayUiSlots<string> | undefined): DisplayUiSlots<string> | undefined;

package/dist/runtime/display/utils/config.js

@@ -1,7 +1,17 @@
+import { twMerge } from "tailwind-merge";
 export function resolveAppDisplayConfig(config) {
   return config.nuxtUiTools?.display ?? {};
 }
 export function applyDisplayPreset(kind, props, preset, config) {
   const defaults = preset === void 0 ? void 0 : config.presets?.[kind]?.[preset];
-  return defaults ? { ...defaults, ...props } : props;
+  if (!defaults) return props;
+  const merged = { ...defaults, ...props };
+  const ui = mergeDisplaySlots(defaults.ui, props.ui);
+  return ui ? { ...merged, ui } : merged;
+}
+export function mergeDisplaySlots(base, over) {
+  if (!base || !over) return base ?? over;
+  const merged = { ...base };
+  for (const [slot, classes] of Object.entries(over)) merged[slot] = twMerge(base[slot], classes);
+  return merged;
 }

package/dist/runtime/display/utils/links.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayLinkTarget } from '../types/index.js';
+/** Whether a link leaves the app: an absolute http(s) address (route objects never do). */
+export declare function isExternalLink<TTo>(to: TTo): to is TTo & string;
+/**
+ * Attributes of a block link: an absolute http(s) address opens in a new tab unless `target` says
+ * otherwise, and a new tab never gets access to the app (`noopener noreferrer`).
+ */
+export declare function displayLinkAttrs(to: string, target?: DisplayLinkTarget | null): {
+    rel: string | undefined;
+    target: DisplayLinkTarget | undefined;
+    to: string;
+};

package/dist/runtime/display/utils/links.js

@@ -0,0 +1,9 @@
+import { isString } from "../../shared/utils/predicate.js";
+const ABSOLUTE = /^https?:\/\//iu;
+export function isExternalLink(to) {
+  return isString(to) && ABSOLUTE.test(to);
+}
+export function displayLinkAttrs(to, target) {
+  const resolved = target === void 0 ? isExternalLink(to) ? "_blank" : void 0 : target ?? void 0;
+  return { rel: resolved === "_blank" ? "noopener noreferrer" : void 0, target: resolved, to };
+}

package/dist/runtime/form/composables/use-form-root.js

@@ -1,5 +1,5 @@
 import { useAppConfig } from "nuxt/app";
-import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import {
@@ -19,6 +19,7 @@ import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
 import { provideFormUi } from "./use-form-ui.js";
 export function useFormRoot(params) {
   const router = useRouter();
+  const appContext = getCurrentInstance()?.appContext;
   const { t } = useUiToolsLocale();
   const appConfig = useAppConfig();
   const schema = computed(() => params.form()?.schema.value ?? params.schema() ?? {});
@@ -122,11 +123,21 @@ export function useFormRoot(params) {
   }
   async function submit() {
     const controller = params.form();
-    const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
-    if (result.success) {
-      params.onSubmitted(runtime.output.value, result);
+    try {
+      const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
+      if (result.success) params.onSubmitted(runtime.output.value, result);
+    } catch (error) {
+      reportSubmitError(error);
     }
   }
+  function reportSubmitError(error) {
+    const handler = appContext?.config.errorHandler;
+    if (handler) handler(error, null, "nuxt-ui-tools form submit");
+    else
+      queueMicrotask(() => {
+        throw error;
+      });
+  }
   async function cancel() {
     if (!leaveConfirmed && shouldConfirmDirtyNavigation() && !await confirmLeave()) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",