@nuxt/ui 4.10.0 → 4.11.0

package/.nuxt/ui.static.css

@@ -1,15 +1,15 @@
 @theme static {
-  --color-old-neutral-50: oklch(98.5% 0 0);
-  --color-old-neutral-100: oklch(97% 0 0);
-  --color-old-neutral-200: oklch(92.2% 0 0);
-  --color-old-neutral-300: oklch(87% 0 0);
-  --color-old-neutral-400: oklch(70.8% 0 0);
-  --color-old-neutral-500: oklch(55.6% 0 0);
-  --color-old-neutral-600: oklch(43.9% 0 0);
-  --color-old-neutral-700: oklch(37.1% 0 0);
-  --color-old-neutral-800: oklch(26.9% 0 0);
-  --color-old-neutral-900: oklch(20.5% 0 0);
-  --color-old-neutral-950: oklch(14.5% 0 0);
+  --color-old-neutral-50: oklch(98.5% 0 none);
+  --color-old-neutral-100: oklch(97% 0 none);
+  --color-old-neutral-200: oklch(92.2% 0 none);
+  --color-old-neutral-300: oklch(87% 0 none);
+  --color-old-neutral-400: oklch(70.8% 0 none);
+  --color-old-neutral-500: oklch(55.6% 0 none);
+  --color-old-neutral-600: oklch(43.9% 0 none);
+  --color-old-neutral-700: oklch(37.1% 0 none);
+  --color-old-neutral-800: oklch(26.9% 0 none);
+  --color-old-neutral-900: oklch(20.5% 0 none);
+  --color-old-neutral-950: oklch(14.5% 0 none);
 }
 
 @theme default inline {

package/README.md

@@ -33,6 +33,7 @@ Kickstart your project with one of our ready-to-use Nuxt UI templates or follow
 - [Portfolio](https://github.com/nuxt-ui-templates/portfolio) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
 - [Changelog](https://github.com/nuxt-ui-templates/changelog) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
 - [Editor](https://github.com/nuxt-ui-templates/editor) — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.
+- [Calendar](https://github.com/nuxt-ui-templates/calendar) — An Apple Calendar-inspired template with day, week and month views, drag and drop and optimistic updates.
 
 ## Installation
 

package/cli/commands/make/locale.mjs

@@ -11,16 +11,14 @@ export default defineCommand({
   },
   args: {
     code: {
-      description: 'Locale code to create. For example: en.',
+      description: 'Locale code to create. For example: en or en_gb.',
       required: true
     },
     name: {
-      description: 'Locale name to create. For example: English.',
-      required: true
+      description: 'Locale name in its own language. Defaults to the CLDR name for the code.'
     },
     dir: {
-      description: 'Locale direction. For example: rtl.',
-      default: 'ltr'
+      description: 'Locale direction. Defaults to the CLDR direction for the code.'
     }
   },
   async setup({ args }) {
@@ -36,13 +34,44 @@ export default defineCommand({
       process.exit(1)
     }
 
-    if (!['ltr', 'rtl'].includes(args.dir)) {
-      consola.error(`🚨 Direction ${args.dir} not supported!`)
+    if (!args.code.match(/^[a-z]{2,3}(?:_(?:[a-z]{2}|\d{3}))?$/)) {
+      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en, en_gb or es_419`)
+      process.exit(1)
+    }
+
+    const code = normalizeLocale(args.code)
+    const language = code.split('-')[0]
+
+    // `Intl.DisplayNames` echoes the input back when the code is unknown to CLDR
+    if (new Intl.DisplayNames(['en'], { type: 'language' }).of(language) === language) {
+      consola.error(`🚨 ${language} is not a known ISO 639 language code!\nFor example, the code for Tajik is tg, not tj.`)
+      process.exit(1)
+    }
+
+    const region = code.split('-')[1]
+    if (region && new Intl.DisplayNames(['en'], { type: 'region' }).of(region) === region) {
+      consola.error(`🚨 ${region} is not a known region code!\nExample: en_gb or pt_br`)
       process.exit(1)
     }
 
-    if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
-      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
+    let name = args.name
+    if (!name) {
+      const cldrName = new Intl.DisplayNames([code], { type: 'language', languageDisplay: 'standard' }).of(code)
+      name = cldrName.charAt(0).toLocaleUpperCase(code) + cldrName.slice(1)
+      consola.info(`🌍 Using CLDR name for ${code}: ${name}`)
+    }
+
+    let dir = args.dir
+    if (!dir) {
+      const intlLocale = new Intl.Locale(code)
+      dir = (intlLocale.getTextInfo?.() ?? intlLocale.textInfo)?.direction ?? 'ltr'
+      if (dir === 'rtl') {
+        consola.info(`🌍 Using CLDR direction for ${code}: ${dir}`)
+      }
+    }
+
+    if (!['ltr', 'rtl'].includes(dir)) {
+      consola.error(`🚨 Direction ${dir} not supported!`)
       process.exit(1)
     }
 
@@ -55,8 +84,8 @@ export default defineCommand({
     await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
     const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
     const rewrittenLocaleFile = localeFile
-      .replace(/name: '(.*)',/, `name: '${args.name}',`)
-      .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n  dir: '${args.dir}',` : ''}`)
+      .replace(/name: '(.*)',/, `name: '${name}',`)
+      .replace(/code: '(.*)',/, `code: '${code}',${dir !== 'ltr' ? `\n  dir: '${dir}',` : ''}`)
     await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
 
     consola.success(`🪄 Generated ${newLocaleFilePath}`)

package/cli/templates.mjs

@@ -73,7 +73,7 @@ const props = useComponentProps('${componentKey}', _props)
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
+const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
@@ -126,7 +126,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 const rootProps = useForwardProps(reactivePick(props, 'as'), emits)
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
+const ui = computed(() => tv({ extend: theme, ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>

package/dist/module.d.mts

@@ -98,7 +98,7 @@ interface ModuleOptions {
          * - `string[]`: Enable detection and include additional components (useful for dynamic components)
          * @defaultValue false
          * @example true
-         * @example ['Modal', 'Dropdown']
+         * @example ['Modal', 'DropdownMenu']
          */
         componentDetection?: boolean | string[];
     };

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=4.1.0"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,17 +1,20 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, b as getDefaultConfig, g as getClientBundleIcons, e as publicComposables, a as addTemplates } from './shared/ui.XkBrgXFP.mjs';
+import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.DNq7CNkE.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
 import 'knitwork';
 import 'tailwindcss/colors';
+import 'node:fs';
 import 'node:fs/promises';
+import 'consola';
 import 'pathe';
 import 'tinyglobby';
+import 'mlly';
 
 const name = "@nuxt/ui";
-const version = "4.10.0";
+const version = "4.11.0";
 
 const module$1 = defineNuxtModule({
   meta: {

package/dist/runtime/components/AuthForm.d.vue.ts

@@ -11,7 +11,7 @@ import type { SelectMenuProps } from './SelectMenu.vue';
 import type { PinInputProps } from './PinInput.vue';
 import type { IconProps } from './Icon.vue';
 import type { LinkPropsKeys } from './Link.vue';
-import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { FormData, FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -107,7 +107,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AuthFormProps<T, F> & {
-        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+        onSubmit?: ((payload: FormSubmitEvent<import("../types").InferOutput<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -119,13 +119,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<FormData<T, T_1>>;
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
                     silent?: true | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -153,13 +153,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<FormData<T, T_1>>;
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
                     silent?: true | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -185,7 +185,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
-    emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
+    emit: (evt: "submit", payload: FormSubmitEvent<import("../types").InferOutput<T>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/AuthForm.vue.d.ts

@@ -11,7 +11,7 @@ import type { SelectMenuProps } from './SelectMenu.vue';
 import type { PinInputProps } from './PinInput.vue';
 import type { IconProps } from './Icon.vue';
 import type { LinkPropsKeys } from './Link.vue';
-import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { FormData, FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 import type { NonUnion } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -107,7 +107,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AuthFormProps<T, F> & {
-        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+        onSubmit?: ((payload: FormSubmitEvent<import("../types").InferOutput<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -119,13 +119,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<FormData<T, T_1>>;
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
                     silent?: true | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -153,13 +153,13 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<import("../types").FormData<T, T_1>>;
+                }): Promise<FormData<T, T_1>>;
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
                     silent?: true | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
-                }): Promise<false | import("../types").FormData<T, T_1>>;
+                }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
                 id?: string | undefined;
@@ -185,7 +185,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
     }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
-    emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
+    emit: (evt: "submit", payload: FormSubmitEvent<import("../types").InferOutput<T>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/Button.vue

@@ -70,6 +70,7 @@ const props = useComponentProps("button", _props);
 const appConfig = useAppConfig();
 const { orientation, size: buttonSize } = useFieldGroup(_props);
 const linkProps = useForwardProps(pickLinkProps(props));
+const forwardedLinkProps = computed(() => omit(linkProps.value, ["type", "disabled", "onClick"]));
 const loadingAutoState = ref(false);
 const formLoading = inject(formLoadingInjectionKey, void 0);
 async function onClickWrapper(event) {
@@ -85,7 +86,15 @@ const isLoading = computed(() => {
   return props.loading || props.loadingAuto && (loadingAutoState.value || formLoading?.value && props.type === "submit");
 });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
-  computed(() => ({ ...props, loading: isLoading.value }))
+  computed(() => ({
+    icon: props.icon,
+    leading: props.leading,
+    leadingIcon: props.leadingIcon,
+    trailing: props.trailing,
+    trailingIcon: props.trailingIcon,
+    loading: isLoading.value,
+    loadingIcon: props.loadingIcon
+  }))
 );
 const ui = computed(() => tv({
   extend: theme,
@@ -119,7 +128,7 @@ const ui = computed(() => tv({
     v-slot="{ active, ...slotProps }"
     :type="props.type"
     :disabled="props.disabled || isLoading"
-    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
+    v-bind="forwardedLinkProps"
     custom
   >
     <ULinkBase

package/dist/runtime/components/ChatPromptSubmit.d.vue.ts

@@ -82,11 +82,11 @@ export interface ChatPromptSubmitEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: (event: MouseEvent) => any;
     reload: (event: MouseEvent) => any;
+    stop: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
     streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";

package/dist/runtime/components/ChatPromptSubmit.vue.d.ts

@@ -82,11 +82,11 @@ export interface ChatPromptSubmitEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: (event: MouseEvent) => any;
     reload: (event: MouseEvent) => any;
+    stop: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
     streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";

package/dist/runtime/components/Checkbox.d.vue.ts

@@ -34,7 +34,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     /**
-     * The icon displayed when checked.
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */

package/dist/runtime/components/Checkbox.vue

@@ -41,19 +41,24 @@ const emits = defineEmits(["change", "update:modelValue"]);
 const props = useComponentProps("checkbox", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
-const { id: _id, emitFormChange, emitFormInput, size, color, highlight, name, disabled, ariaAttrs } = useFormField(_props);
+const { id: _id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const id = _id.value ?? useId();
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const labelIcon = computed(() => props.indicator === "hidden" ? props.icon : void 0);
 const attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkbox || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   variant: props.variant,
   indicator: props.indicator,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   required: props.required,
   disabled: disabled.value
 }));
@@ -78,7 +83,7 @@ function onUpdate(value) {
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+          <CheckboxIndicator v-if="props.indicator !== 'hidden'" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -86,7 +91,8 @@ function onUpdate(value) {
       </CheckboxRoot>
     </div>
 
-    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div v-if="labelIcon || (props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <UIcon v-if="labelIcon" :name="labelIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
       <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">
           {{ props.label }}

package/dist/runtime/components/Checkbox.vue.d.ts

@@ -34,7 +34,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     /**
-     * The icon displayed when checked.
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */

package/dist/runtime/components/CheckboxGroup.d.vue.ts

@@ -3,6 +3,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from './Checkbox.vue';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
@@ -12,6 +13,11 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: string;
+    /**
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
     ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;

package/dist/runtime/components/CheckboxGroup.vue

@@ -41,16 +41,21 @@ const slots = defineSlots();
 const props = useComponentProps("checkboxGroup", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
-const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator", "icon"));
+const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator"));
 const getProxySlots = () => omit(slots, ["legend"]);
-const { emitFormChange, emitFormInput, color, highlight, name, size, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, color: formFieldColor, highlight: formFieldHighlight, name, size: formFieldSize, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
+const color = computed(() => formFieldColor.value ?? props.color);
+const size = computed(() => formFieldSize.value ?? props.size);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkboxGroup || {} })({
-  size: size.value ?? props.size,
+  size: size.value,
   required: props.required,
   orientation: props.orientation,
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
+  highlight: highlight.value,
   disabled: disabled.value
 }));
 function normalizeItem(item) {
@@ -114,6 +119,7 @@ function onUpdate(value) {
         v-for="item in normalizedItems"
         :key="item.value"
         v-bind="{ ...item, ...checkboxProps }"
+        :icon="item.icon ?? props.icon"
         :color="color"
         :highlight="highlight"
         :size="size"

package/dist/runtime/components/CheckboxGroup.vue.d.ts

@@ -3,6 +3,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from './Checkbox.vue';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
@@ -12,6 +13,11 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: string;
+    /**
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
     ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;

package/dist/runtime/components/Editor.vue

@@ -177,7 +177,10 @@ const editor = useEditor({
       editor2.view.dispatch(editor2.state.tr);
     }
   },
-  onUpdate: ({ editor: editor2 }) => {
+  onUpdate: ({ editor: editor2, transaction, appendedTransactions }) => {
+    if (!transaction.docChanged && !appendedTransactions.some((tr) => tr.docChanged)) {
+      return;
+    }
     let value;
     try {
       if (contentType.value === "html") {

package/dist/runtime/components/Error.d.vue.ts

@@ -47,9 +47,9 @@ export interface ErrorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    redirect: string;
     clear: boolean | ButtonProps;
     as: any;
-    redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Error.vue.d.ts

@@ -47,9 +47,9 @@ export interface ErrorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    redirect: string;
     clear: boolean | ButtonProps;
     as: any;
-    redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/FileUpload.vue

@@ -59,7 +59,11 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 });
-const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormInput, emitFormChange, id, name, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const variant = computed(() => props.multiple ? "area" : props.variant);
 const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
 const position = computed(() => {
@@ -74,14 +78,14 @@ const position = computed(() => {
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: color.value ?? props.color,
-  size: props.size,
+  color: color.value,
+  size: size.value,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: highlight.value ?? props.highlight,
-  disabled: props.disabled
+  highlight: highlight.value,
+  disabled: disabled.value
 }));
 function createObjectUrl(file) {
   if (!props.fileImage) return void 0;
@@ -94,11 +98,14 @@ function formatFileSize(bytes) {
   const k = 1024;
   const sizes = ["B", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const size = bytes / Math.pow(k, i);
-  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  const value = bytes / Math.pow(k, i);
+  const formattedSize = i === 0 ? value.toString() : value.toFixed(0);
   return `${formattedSize}${sizes[i]}`;
 }
 function onUpdate(files, reset2 = false) {
+  if (disabled.value) {
+    return;
+  }
   if (props.multiple) {
     if (reset2) {
       modelValue.value = files;
@@ -154,7 +161,7 @@ defineExpose({
                   :as="{ img: 'img' }"
                   :src="createObjectUrl(file)"
                   :icon="props.fileIcon || appConfig.ui.icons.file"
-                  :size="props.size"
+                  :size="size"
                   data-slot="fileLeadingAvatar"
                   :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
@@ -184,7 +191,7 @@ defineExpose({
     size: 'xs'
   } : {
     variant: 'link',
-    size: props.size
+    size
   },
   ...typeof props.fileDelete === 'object' ? props.fileDelete : void 0
 }"
@@ -227,7 +234,7 @@ defineExpose({
           <slot name="leading" :ui="ui">
             <template v-if="props.icon !== false">
               <UIcon v-if="variant === 'button'" :name="props.icon ?? appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
             </template>
           </slot>