@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/EditorToolbar.vue

@@ -9,6 +9,7 @@ import { defu } from "defu";
 import { BubbleMenu, FloatingMenu } from "@tiptap/vue-3/menus";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { isArrayOfArray, pick, omit } from "../utils";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
@@ -26,7 +27,7 @@ const props = defineProps({
   items: { type: null, required: false },
   editor: { type: Object, required: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   layout: { type: String, required: false, default: "fixed" },
   pluginKey: { type: [Object, String], required: false },
   updateDelay: { type: Number, required: false },
@@ -38,6 +39,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editorToolbar", props);
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
 const Component = computed(() => {
   return {
@@ -76,11 +78,11 @@ function isDisabled(item) {
   }
   if ("items" in item && item.items?.length) {
     const items = isArrayOfArray(item.items) ? item.items.flat() : item.items;
-    const itemItems = items.filter((item2) => "kind" in item2);
-    if (itemItems.length === 0) {
+    const actionableItems = items.filter((item2) => item2.type !== "separator" && item2.type !== "label");
+    if (actionableItems.length === 0) {
       return true;
     }
-    return itemItems.every((item2) => isDisabled(item2));
+    return actionableItems.every((item2) => isDisabled(item2));
   }
   if (!("kind" in item)) {
     return item.disabled ?? false;
@@ -124,7 +126,7 @@ function getActiveChildItem(item) {
   });
 }
 function getButtonProps(item) {
-  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip"]);
+  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip", "onClick"]);
   if ("items" in item && item.items?.length) {
     const activeChild = getActiveChildItem(item);
     if (activeChild?.icon) {
@@ -143,9 +145,10 @@ function getButtonProps(item) {
   });
 }
 function getDropdownProps(item) {
-  const baseProps = pick(item, ["checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "ui"]);
+  const baseProps = pick(item, ["size", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "ui"]);
   return defu(baseProps, {
-    modal: false
+    modal: false,
+    size: props.size
   });
 }
 function mapDropdownItem(item) {
@@ -176,7 +179,7 @@ function getDropdownItems(item) {
     v-bind="Component !== 'template' ? {
   editor,
   tabindex: -1,
-  class: ui.root({ class: props.ui?.root }),
+  class: ui.root({ class: uiProp?.root }),
   ...rootProps,
   options,
   ...$attrs
@@ -184,9 +187,9 @@ function getDropdownItems(item) {
   ...$attrs
 }"
   >
-    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
       <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
-        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+        <div role="group" data-slot="group" :class="ui.group({ class: uiProp?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <slot
               :name="item.slot || 'item'"
@@ -202,10 +205,10 @@ function getDropdownItems(item) {
                 :items="getDropdownItems(item)"
               >
                 <UTooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
-                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
                 </UTooltip>
 
-                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
               </UDropdownMenu>
 
               <UTooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
@@ -233,7 +236,7 @@ function getDropdownItems(item) {
         <Separator
           v-if="groupIndex < groups.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: props.ui?.separator })"
+          :class="ui.separator({ class: uiProp?.separator })"
           orientation="vertical"
         />
       </template>

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

@@ -72,8 +72,10 @@ type SlotProps<T extends EditorToolbarItem> = (props: {
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
     item: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
-declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorToolbarProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__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<EditorToolbarProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -83,8 +85,8 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -43,9 +43,9 @@ export interface EmptySlots {
     actions(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Empty.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/empty";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
@@ -19,10 +20,11 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("empty", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} })({
   variant: props.variant,
   size: props.size
@@ -30,20 +32,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -51,9 +53,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -61,7 +63,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -43,9 +43,9 @@ export interface EmptySlots {
     actions(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -7,7 +7,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {
@@ -34,9 +34,13 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, 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<{}>, {
+    clear: boolean | ButtonProps;
+    as: any;
+    redirect: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Error.vue

@@ -6,20 +6,22 @@ import theme from "#build/ui/error";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { clearError, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
-  as: { type: null, required: false },
+  as: { type: null, required: false, default: "main" },
   error: { type: Object, required: false },
   redirect: { type: String, required: false, default: "/" },
   clear: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("error", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.error || {} })());
 function handleError() {
   clearError({ redirect: props.redirect });
@@ -27,23 +29,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: uiProp?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: uiProp?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage }}
       </slot>
     </h1>
-    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="ui.message({ class: uiProp?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
       <slot name="links">
         <UButton
           v-if="clear"

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

@@ -7,7 +7,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {
@@ -34,9 +34,13 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, 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<{}>, {
+    clear: boolean | ButtonProps;
+    as: any;
+    redirect: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -18,14 +18,18 @@ export interface FieldGroupProps {
      */
     orientation?: FieldGroup['variants']['orientation'];
     class?: any;
-    ui?: FieldGroup['slots'];
+    ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
+    orientation: FieldGroup["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/FieldGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/field-group";
 import { provide, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { fieldGroupInjectionKey } from "../composables/useFieldGroup";
 import { tv } from "../utils/tv";
 const props = defineProps({
@@ -13,10 +14,11 @@ const props = defineProps({
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("fieldGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fieldGroup || {} }));
 provide(fieldGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
@@ -25,7 +27,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -18,14 +18,18 @@ export interface FieldGroupProps {
      */
     orientation?: FieldGroup['variants']['orientation'];
     class?: any;
-    ui?: FieldGroup['slots'];
+    ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
+    orientation: FieldGroup["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -154,10 +154,15 @@ export interface FileUploadSlots<M extends boolean = false> {
         ui: FileUpload['ui'];
     }): any;
 }
-declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(FileUploadProps<M> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends boolean = false>(__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<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -166,12 +171,12 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }>) => void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/FileUpload.vue

@@ -7,6 +7,7 @@ import { computed, toRef, watch } from "vue";
 import { Primitive, VisuallyHidden } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useLocale } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { useFileUpload } from "../composables/useFileUpload";
 import { tv } from "../utils/tv";
@@ -39,12 +40,13 @@ const props = defineProps({
   fileDeleteIcon: { type: null, required: false },
   preview: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["change"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("fileUpload", props);
 const { t } = useLocale();
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
@@ -101,7 +103,7 @@ function onUpdate(files, reset = false) {
       modelValue.value = [...existingFiles, ...files || []];
     }
   } else {
-    modelValue.value = files?.[0];
+    modelValue.value = files?.[0] ?? null;
   }
   const event = new Event("change", { target: { value: modelValue.value } });
   emits("change", event);
@@ -139,9 +141,9 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
+      <div data-slot="files" :class="ui.files({ class: uiProp?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: uiProp?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <UAvatar
@@ -150,18 +152,18 @@ defineExpose({
                   :icon="fileIcon || appConfig.ui.icons.file"
                   :size="props.size"
                   data-slot="fileLeadingAvatar"
-                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
+                  :class="ui.fileLeadingAvatar({ class: uiProp?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
-                <span data-slot="fileName" :class="ui.fileName({ class: props.ui?.fileName })">
+              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: uiProp?.fileWrapper })">
+                <span data-slot="fileName" :class="ui.fileName({ class: uiProp?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ file.name }}
                   </slot>
                 </span>
 
-                <span data-slot="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
+                <span data-slot="fileSize" :class="ui.fileSize({ class: uiProp?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -185,7 +187,7 @@ defineExpose({
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
                   data-slot="fileTrailingButton"
-                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
+                  :class="ui.fileTrailingButton({ class: uiProp?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
               </slot>
@@ -198,7 +200,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -207,7 +209,7 @@ defineExpose({
         :role="variant === 'button' ? void 0 : 'button'"
         :data-dragging="isDragging"
         data-slot="base"
-        :class="ui.base({ class: props.ui?.base })"
+        :class="ui.base({ class: uiProp?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
         @keydown.space.prevent
@@ -215,25 +217,25 @@ defineExpose({
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+            <div v-if="label || !!slots.label" data-slot="label" :class="ui.label({ class: uiProp?.label })">
               <slot name="label">
                 {{ label }}
               </slot>
             </div>
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
             </div>
 
-            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>

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

@@ -154,10 +154,15 @@ export interface FileUploadSlots<M extends boolean = false> {
         ui: FileUpload['ui'];
     }): any;
 }
-declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(FileUploadProps<M> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends boolean = false>(__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<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -166,12 +171,12 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }>) => void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -18,9 +18,11 @@ export interface FooterSlots {
     top(props?: {}): any;
     bottom(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;