nuxt-ui-tools 1.20.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.20.0",
+  "version": "1.20.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

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