@nuxt/ui 4.9.0 → 4.11.0

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -90,26 +92,26 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     enter: () => any;
-    "update:open": (value: boolean) => any;
-    "after:leave": () => any;
     leave: () => any;
+    "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
     onEnter?: (() => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
     onLeave?: (() => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
-    side: Slideover["variants"]["side"];
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
+    side: Slideover["variants"]["side"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Slideover.vue

@@ -31,14 +31,15 @@ const _props = defineProps({
   ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false, default: true }
+  modal: { type: Boolean, required: false, default: true },
+  unmountOnHide: { type: Boolean, required: false }
 });
 const emits = defineEmits(["leave", "after:leave", "enter", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("slideover", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "open", "defaultOpen", "modal", "unmountOnHide"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -56,7 +57,7 @@ const contentEvents = computed(() => {
     pointerDownOutside
   };
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
   side: props.side,
   inset: props.inset
@@ -69,7 +70,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal v-bind="portalProps">
+    <DialogPortal v-bind="portalProps" :force-mount="portalProps.disabled && props.unmountOnHide === false || void 0">
       <FieldGroupReset>
         <DialogOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 

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

@@ -2,7 +2,9 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -90,26 +92,26 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     enter: () => any;
-    "update:open": (value: boolean) => any;
-    "after:leave": () => any;
     leave: () => any;
+    "after:leave": () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
     onEnter?: (() => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onAfter:leave"?: (() => any) | undefined;
     onLeave?: (() => any) | undefined;
+    "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     modal: boolean;
     transition: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
-    side: Slideover["variants"]["side"];
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
+    side: Slideover["variants"]["side"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,7 +1,7 @@
 import type { SliderRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slider';
-import type { TooltipProps } from '../types';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ComponentConfig } from '../types/tv';
 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
 export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Slider.vue

@@ -10,6 +10,7 @@ import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
+import { pick, omit } from "../utils";
 import { tv } from "../utils/tv";
 import UTooltip from "./Tooltip.vue";
 const _props = defineProps({
@@ -30,11 +31,15 @@ const _props = defineProps({
   minStepsBetweenThumbs: { type: Number, required: false }
 });
 const emits = defineEmits(["change"]);
+defineOptions({ inheritAttrs: false });
 const props = useComponentProps("slider", _props);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(_props);
+const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === "number") {
     return [props.defaultValue];
@@ -53,10 +58,11 @@ const sliderValue = computed({
   }
 });
 const thumbs = computed(() => sliderValue.value?.length ?? 1);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slider || {} })({
+const thumbAttrs = ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext", "aria-invalid", "aria-errormessage"];
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slider || {} })({
   disabled: disabled.value,
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   orientation: props.orientation
 }));
 function onChange(value) {
@@ -68,12 +74,13 @@ function onChange(value) {
 
 <template>
   <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-model="sliderValue"
+    data-slot="root"
+    :role="thumbs > 1 && ($attrs['aria-label'] || $attrs['aria-labelledby']) ? 'group' : void 0"
+    v-bind="{ ...rootProps, ...thumbs > 1 ? $attrs : omit($attrs, thumbAttrs) }"
     :name="name"
     :disabled="disabled"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
@@ -90,9 +97,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
     </template>
   </SliderRoot>
 </template>

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

@@ -1,7 +1,7 @@
 import type { SliderRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slider';
-import type { TooltipProps } from '../types';
+import type { TooltipProps } from './Tooltip.vue';
 import type { ComponentConfig } from '../types/tv';
 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
 export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -0,0 +1,266 @@
+import type { SplitterGroupProps, SplitterGroupEmits, SplitterPanelProps, SplitterResizeHandleProps } from 'reka-ui';
+import type { VNode, ComponentPublicInstance } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/splitter';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Splitter = ComponentConfig<typeof theme, AppConfig, 'splitter'>;
+export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'> {
+    /**
+     * A unique id for the panel. Also used as the Vue `key`. Defaults to an auto-generated id.
+     */
+    id?: string;
+    slot?: string;
+    class?: any;
+    ui?: Pick<Splitter['slots'], 'panel'>;
+    [key: string]: any;
+}
+export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * A unique id for the group, also used to derive the ids of its panels and handles.
+     * Set it when rendering on the server, auto-generated ids can differ between the server and the client and break resizing on hydration.
+     */
+    id?: string;
+    /**
+     * The orientation of the splitter.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Splitter['variants']['orientation'];
+    items?: T[];
+    /**
+     * Whether the resize handles are disabled, locking the current layout.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    class?: any;
+    ui?: Splitter['slots'];
+}
+export interface SplitterEmits {
+    layout: SplitterGroupEmits['layout'];
+    collapse: [index: number];
+    expand: [index: number];
+    resize: [index: number, size: number, prevSize?: number];
+    dragging: [index: number, dragging: boolean];
+}
+type PanelSlotProps = {
+    index: number;
+    collapsed: boolean;
+    collapse: () => void;
+    expand: () => void;
+    resize: (size: number) => void;
+    ui: Splitter['ui'];
+};
+type SlotProps<T extends SplitterItem> = (props: {
+    item: T;
+} & PanelSlotProps) => VNode[];
+export type SplitterSlots<T extends SplitterItem = SplitterItem> = {
+    'resize-handle'?: (props: {
+        index: number;
+        ui: Splitter['ui'];
+    }) => VNode[];
+} & DynamicSlots<T, undefined, PanelSlotProps> & {
+    [key: `panel-${number}`]: SlotProps<T> | undefined;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends SplitterItem>(__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<SplitterProps<T> & {
+        onResize?: ((index: number, size: number, prevSize?: number | undefined) => any) | undefined;
+        onCollapse?: ((index: number) => any) | undefined;
+        onExpand?: ((index: number) => any) | undefined;
+        onLayout?: ((val: number[]) => any) | undefined;
+        onDragging?: ((index: number, dragging: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        panelsRef: import("vue").Ref<({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly collapsedSize?: number | undefined;
+                readonly collapsible?: boolean | undefined;
+                readonly defaultSize?: number | undefined;
+                readonly id?: string | undefined;
+                readonly maxSize?: number | undefined;
+                readonly minSize?: number | undefined;
+                readonly order?: number | undefined;
+                readonly sizeUnit?: "%" | "px" | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+                readonly onResize?: ((size: number, prevSize: number | undefined) => any) | undefined | undefined;
+                readonly onCollapse?: (() => any) | undefined | undefined;
+                readonly onExpand?: (() => any) | undefined | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: import("vue").Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "resize", size: number, prevSize: number | undefined) => void) & ((event: "collapse") => void) & ((event: "expand") => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<SplitterPanelProps> & Readonly<{
+                onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+                onCollapse?: (() => any) | undefined;
+                onExpand?: (() => any) | undefined;
+            }>, {
+                collapse: () => void;
+                expand: () => void;
+                getSize(): number;
+                resize: (size: number) => void;
+                isCollapsed: import("vue").ComputedRef<boolean>;
+                isExpanded: import("vue").ComputedRef<boolean>;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                resize: (size: number, prevSize: number | undefined) => any;
+                collapse: () => any;
+                expand: () => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<SplitterPanelProps> & Readonly<{
+            onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+            onCollapse?: (() => any) | undefined;
+            onExpand?: (() => any) | undefined;
+        }>, "resize" | "collapse" | "expand" | "isCollapsed" | "getSize" | "isExpanded"> & {
+            collapse: () => void;
+            expand: () => void;
+            getSize: () => number;
+            resize: (size: number) => void;
+            isCollapsed: boolean;
+            isExpanded: boolean;
+        } & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {
+                    isCollapsed: boolean;
+                    isExpanded: boolean;
+                    collapse: () => void;
+                    expand: () => void;
+                    resize: (size: number) => void;
+                }) => any;
+            };
+        })[], ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly collapsedSize?: number | undefined;
+                readonly collapsible?: boolean | undefined;
+                readonly defaultSize?: number | undefined;
+                readonly id?: string | undefined;
+                readonly maxSize?: number | undefined;
+                readonly minSize?: number | undefined;
+                readonly order?: number | undefined;
+                readonly sizeUnit?: "%" | "px" | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+                readonly onResize?: ((size: number, prevSize: number | undefined) => any) | undefined | undefined;
+                readonly onCollapse?: (() => any) | undefined | undefined;
+                readonly onExpand?: (() => any) | undefined | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: import("vue").Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "resize", size: number, prevSize: number | undefined) => void) & ((event: "collapse") => void) & ((event: "expand") => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<SplitterPanelProps> & Readonly<{
+                onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+                onCollapse?: (() => any) | undefined;
+                onExpand?: (() => any) | undefined;
+            }>, {
+                collapse: () => void;
+                expand: () => void;
+                getSize(): number;
+                resize: (size: number) => void;
+                isCollapsed: import("vue").ComputedRef<boolean>;
+                isExpanded: import("vue").ComputedRef<boolean>;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                resize: (size: number, prevSize: number | undefined) => any;
+                collapse: () => any;
+                expand: () => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<SplitterPanelProps> & Readonly<{
+            onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
+            onCollapse?: (() => any) | undefined;
+            onExpand?: (() => any) | undefined;
+        }>, "resize" | "collapse" | "expand" | "isCollapsed" | "getSize" | "isExpanded"> & {
+            collapse: () => void;
+            expand: () => void;
+            getSize: () => number;
+            resize: (size: number) => void;
+            isCollapsed: boolean;
+            isExpanded: boolean;
+        } & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {
+                    isCollapsed: boolean;
+                    isExpanded: boolean;
+                    collapse: () => void;
+                    expand: () => void;
+                    resize: (size: number) => void;
+                }) => any;
+            };
+        })[]>;
+    }>) => void;
+    attrs: any;
+    slots: SplitterSlots<T>;
+    emit: ((evt: "resize", index: number, size: number, prevSize?: number | undefined) => void) & ((evt: "collapse", index: number) => void) & ((evt: "expand", index: number) => void) & ((evt: "layout", val: number[]) => void) & ((evt: "dragging", index: number, dragging: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+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/Splitter.vue

@@ -0,0 +1,99 @@
+<script>
+import theme from "#build/ui/splitter";
+</script>
+
+<script setup>
+import { ref, computed, onBeforeUpdate } from "vue";
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
+import { tv } from "../utils/tv";
+const _props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  items: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  autoSaveId: { type: [String, null], required: false },
+  keyboardResizeBy: { type: [Number, null], required: false },
+  storage: { type: Object, required: false },
+  hitAreaMargins: { type: Object, required: false }
+});
+const emits = defineEmits(["layout", "collapse", "expand", "resize", "dragging"]);
+defineSlots();
+const props = useComponentProps("splitter", _props);
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "as", "id", "autoSaveId", "keyboardResizeBy", "storage"));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.splitter || {} })({
+  orientation: props.orientation
+}));
+const panelsRef = ref([]);
+onBeforeUpdate(() => {
+  panelsRef.value.length = 0;
+});
+function getPanelId(item, index) {
+  return item.id ?? (props.id ? `${props.id}-panel-${index}` : void 0);
+}
+function getHandleId(index) {
+  return props.id ? `${props.id}-handle-${index}` : void 0;
+}
+function setPanelRef(index, el) {
+  if (el) {
+    panelsRef.value[index] = el;
+  }
+}
+defineExpose({
+  panelsRef
+});
+</script>
+
+<template>
+  <SplitterGroup v-bind="rootProps" :direction="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @layout="emits('layout', $event)">
+    <template v-for="(item, index) in props.items" :key="item.id ?? index">
+      <SplitterPanel
+        :id="getPanelId(item, index)"
+        :ref="(el) => setPanelRef(index, el)"
+        v-slot="{ isCollapsed, collapse, expand, resize }"
+        :default-size="item.defaultSize"
+        :min-size="item.minSize"
+        :max-size="item.maxSize"
+        :collapsible="item.collapsible"
+        :collapsed-size="item.collapsedSize"
+        :size-unit="item.sizeUnit"
+        :order="item.order"
+        data-slot="panel"
+        :class="ui.panel({ class: [props.ui?.panel, item.ui?.panel, item.class] })"
+        @collapse="emits('collapse', index)"
+        @expand="emits('expand', index)"
+        @resize="(size, prevSize) => emits('resize', index, size, prevSize)"
+      >
+        <slot
+          :name="item.slot || `panel-${index}`"
+          :item="item"
+          :index="index"
+          :collapsed="isCollapsed"
+          :collapse="collapse"
+          :expand="expand"
+          :resize="resize"
+          :ui="ui"
+        />
+      </SplitterPanel>
+
+      <SplitterResizeHandle
+        v-if="index < props.items.length - 1"
+        :id="getHandleId(index)"
+        :disabled="props.disabled"
+        :hit-area-margins="props.hitAreaMargins"
+        data-slot="handle"
+        :class="ui.handle({ class: props.ui?.handle })"
+        @dragging="(dragging) => emits('dragging', index, dragging)"
+      >
+        <slot name="resize-handle" :index="index" :ui="ui" />
+      </SplitterResizeHandle>
+    </template>
+  </SplitterGroup>
+</template>