nuxt-ui-tools 1.19.0 → 1.20.1

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.19.0",
+  "version": "1.20.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/components/page/form-page-section.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, onBeforeUnmount, onMounted, useId, useTemplateRef } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFormGridLayout } from "../../composables/use-form-layout";
@@ -60,6 +61,19 @@ onBeforeUnmount(() => unregister?.());
   mergeFormUiClass('flex flex-wrap items-center gap-x-3 gap-y-1', pageUi?.sectionHeader)
 "
     >
+      <span
+        v-if="section.icon"
+        :class="
+  mergeFormUiClass(
+    'grid size-8 shrink-0 place-items-center rounded-lg bg-elevated text-muted',
+    pageUi?.sectionIcon
+  )
+"
+        aria-hidden="true"
+        data-form-page-section-icon
+      >
+        <UIcon :name="section.icon" class="size-4" />
+      </span>
       <h2
         :id="titleId"
         tabindex="-1"

package/dist/runtime/form/fields/auto-complete/component.vue

@@ -10,6 +10,7 @@ import FormOptionSuffix from "../../components/utils/form-option-suffix.vue";
 import FormOptionValueOverlay from "../../components/utils/form-option-value-overlay.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useOptionMenu } from "../../composables/use-option-menu";
+import { leadingVisualPadding } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -61,6 +62,7 @@ const controlUi = computed(() => ({
   ...controlProps.value.ui,
   base: mergeFormUiClass(
     controlProps.value.ui?.base,
+    menu.leadingOption.value ? leadingVisualPadding(controlProps.value.size) : void 0,
     overlayActive.value ? "text-transparent" : void 0
   ),
   content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value),

package/dist/runtime/form/fields/select/component.vue

@@ -11,6 +11,7 @@ import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer
 import FormOptionSuffix from "../../components/utils/form-option-suffix.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useOptionMenu } from "../../composables/use-option-menu";
+import { leadingVisualPadding } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -65,6 +66,10 @@ const menu = useOptionMenu({
 });
 const controlUi = computed(() => ({
   ...controlProps.value.ui,
+  base: mergeFormUiClass(
+    controlProps.value.ui?.base,
+    menu.leadingOption.value ? leadingVisualPadding(controlProps.value.size) : void 0
+  ),
   content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value),
   itemDescription: mergeFormUiClass(
     menu.renderOption.value ? "hidden" : "text-[12.5px]",

package/dist/runtime/form/types/page.d.ts

@@ -40,6 +40,11 @@ export interface FormPageSection<TContext = NonNullable<unknown>, TFields extend
     label: FormText;
     /** Supporting copy next to the title. */
     description?: FormText;
+    /**
+     * Iconify icon drawn before the title, so each section of a long page reads at a glance
+     * (`'i-lucide-map-pin'` for an address). Style it with `ui.page.ui.sectionIcon`.
+     */
+    icon?: string;
     /**
      * Marks the section optional while nothing is entered in it, and leaves it out of the sections
      * left to complete. A section without a required field is optional already; set this when its
@@ -172,6 +177,8 @@ export interface FormPageSectionState {
     label: string;
     /** Resolved supporting copy. */
     description?: string;
+    /** Icon drawn before the title. */
+    icon?: string;
     /**
      * True when the section is declared optional, or declares nothing and has no required field
      * outside array items.

package/dist/runtime/form/types/ui.d.ts

@@ -268,6 +268,8 @@ export interface FormPageUi {
     sectionSkeleton?: FormUiClass;
     section?: FormUiClass;
     sectionHeader?: FormUiClass;
+    /** Tile around the section `icon`, before the title. */
+    sectionIcon?: FormUiClass;
     sectionTitle?: FormUiClass;
     sectionDescription?: FormUiClass;
     /** The "Optional" badge of an optional section with nothing entered. */

package/dist/runtime/form/utils/options.d.ts

@@ -12,6 +12,12 @@ export interface FormOptionKeys {
 export type { ResolvedFormOption } from '../types/index.js';
 /** The one visual an option draws before its label: its icon, else its avatar, else its chip. */
 export type OptionLeading = 'icon' | 'avatar' | 'chip';
+/**
+ * Start padding of a select or auto-complete that draws the chosen option's visual in its leading
+ * slot. Nuxt UI decides that padding from the slot once, so a visual that appears after mount (a
+ * value picked later) would otherwise draw over the text.
+ */
+export declare function leadingVisualPadding(size: unknown): "ps-10" | "ps-9" | "ps-8" | "ps-11" | "ps-7";
 export declare function resolveOptionLeading(option: ResolvedFormOption): OptionLeading | undefined;
 export declare function resolveOptionDescriptionIndent(option: ResolvedFormOption): string | undefined;
 export declare function normalizeOptionItem(option: FormValue, keys?: FormOptionKeys): ResolvedFormOption;

package/dist/runtime/form/utils/options.js

@@ -12,6 +12,13 @@ const CHIP_COLORS = [
   "error",
   "neutral"
 ];
+const LEADING_PADDING = { lg: "ps-10", md: "ps-9", sm: "ps-8", xl: "ps-11", xs: "ps-7" };
+export function leadingVisualPadding(size) {
+  return LEADING_PADDING[isLeadingSize(size) ? size : "md"];
+}
+function isLeadingSize(size) {
+  return isString(size) && Object.hasOwn(LEADING_PADDING, size);
+}
 export function resolveOptionLeading(option) {
   if (option.icon) return "icon";
   if (option.avatar) return "avatar";

package/dist/runtime/form/utils/page.js

@@ -69,6 +69,7 @@ export function resolveFormPageSectionState(params) {
   return {
     description: resolveFormText(entry.section.description),
     dirty: dirtyPaths.length > 0,
+    icon: entry.section.icon,
     dirtyPaths,
     index: params.index,
     key: entry.section.key,

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-column-row.d.vue.ts

@@ -6,12 +6,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reset: () => any;
-    ignore: () => any;
     assign: (header: number) => any;
+    ignore: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onReset?: (() => any) | undefined;
-    onIgnore?: (() => any) | undefined;
     onAssign?: ((header: number) => any) | undefined;
+    onIgnore?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-column-row.vue.d.ts

@@ -6,12 +6,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reset: () => any;
-    ignore: () => any;
     assign: (header: number) => any;
+    ignore: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onReset?: (() => any) | undefined;
-    onIgnore?: (() => any) | undefined;
     onAssign?: ((header: number) => any) | undefined;
+    onIgnore?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/tags/boolean-filter-tag.d.vue.ts

@@ -27,12 +27,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/boolean-filter-tag.vue.d.ts

@@ -27,12 +27,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/date-filter-tag.d.vue.ts

@@ -29,12 +29,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/date-filter-tag.vue.d.ts

@@ -29,12 +29,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/number-filter-tag.d.vue.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/number-filter-tag.vue.d.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/option-filter-tag.d.vue.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/option-filter-tag.vue.d.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/text-filter-tag.d.vue.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/text-filter-tag.vue.d.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
     back: () => any;
+    dismiss: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -122,6 +122,6 @@ export declare function resolveDataListTableDensity(density: DataListDensity): {
 export declare function resolveDataListContentShellClass(options: {
     layout: 'table' | 'grid';
     surface: DataListContentSurface;
-}): "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "grid gap-5" | "overflow-hidden rounded-md border border-default bg-default";
+}): "grid gap-5" | "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
 /** Merges application and root DataList defaults without losing nested UI slots. */
 export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density?: DataListDensity, size?: DataListControlSize): DataListUiConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.19.0",
+  "version": "1.20.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",