@nuxt/ui 4.10.0 → 4.11.0

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>

package/dist/runtime/components/Splitter.vue.d.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/Switch.vue

@@ -41,17 +41,21 @@ const emits = defineEmits(["change", "update:modelValue"]);
 const props = useComponentProps("switch", _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 attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.switch || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  color: color.value,
+  highlight: highlight.value,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading