naive-ui 2.34.4 → 2.36.0

package/es/skeleton/src/Skeleton.js

@@ -1,4 +1,4 @@
-import { pxfy } from 'seemly';
+import { pxfy, repeat } from 'seemly';
 import { computed, defineComponent, h, Fragment, mergeProps } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { createKey, useHoudini } from '../../_utils';
@@ -60,7 +60,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { repeat, style, mergedClsPrefix, $attrs } = this;
+        const { repeat: repeatProp, style, mergedClsPrefix, $attrs } = this;
         // BUG:
         // Chrome devtools can't read the element
         // Maybe it's a bug of chrome
@@ -68,11 +68,8 @@ export default defineComponent({
             class: `${mergedClsPrefix}-skeleton`,
             style
         }, $attrs));
-        if (repeat > 1) {
-            return (h(Fragment, null, Array.apply(null, { length: repeat }).map((_) => [
-                child,
-                '\n'
-            ])));
+        if (repeatProp > 1) {
+            return h(Fragment, null, repeat(repeatProp, null).map((_) => [child, '\n']));
         }
         return child;
     }

package/es/slider/src/Slider.d.ts

@@ -52,6 +52,8 @@ export declare const sliderProps: {
     readonly reverse: BooleanConstructor;
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
+    readonly onDragstart: PropType<() => void>;
+    readonly onDragend: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
@@ -190,6 +192,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly reverse: BooleanConstructor;
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
+    readonly onDragstart: PropType<() => void>;
+    readonly onDragend: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
@@ -281,7 +285,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderRadius: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
     uncontrolledValue: import("vue").Ref<number | number[]>;
     mergedValue: import("vue").ComputedRef<number | number[]>;
@@ -403,6 +407,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly reverse: BooleanConstructor;
     readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
+    readonly onDragstart: PropType<() => void>;
+    readonly onDragend: PropType<() => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         markFontSize: string;
@@ -506,5 +512,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue: number | number[];
     readonly keyboard: boolean;
     readonly showTooltip: boolean | undefined;
-}>;
+}, {}>;
 export default _default;

package/es/slider/src/Slider.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/space-before-function-paren */
 import { h, ref, toRef, computed, watch, nextTick, defineComponent, Transition, onBeforeUnmount } from 'vue';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
@@ -33,7 +34,7 @@ export const sliderProps = Object.assign(Object.assign({}, useTheme.props), { to
     }, tooltip: {
         type: Boolean,
         default: true
-    }, vertical: Boolean, reverse: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, vertical: Boolean, reverse: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onDragstart: [Function], onDragend: [Function] });
 export default defineComponent({
     name: 'Slider',
     props: sliderProps,
@@ -158,11 +159,11 @@ export default defineComponent({
             var _a;
             if (~index) {
                 activeIndexRef.value = index;
-                (_a = handleRefs.value.get(index)) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = handleRefs.get(index)) === null || _a === void 0 ? void 0 : _a.focus();
             }
         }
         function syncPosition() {
-            followerRefs.value.forEach((inst, index) => {
+            followerRefs.forEach((inst, index) => {
                 if (isShowTooltip(index))
                     inst.syncPosition();
             });
@@ -359,6 +360,8 @@ export default defineComponent({
         function startDragging() {
             if (!draggingRef.value) {
                 draggingRef.value = true;
+                if (props.onDragstart)
+                    call(props.onDragstart);
                 on('touchend', document, handleMouseUp);
                 on('mouseup', document, handleMouseUp);
                 on('touchmove', document, handleMouseMove);
@@ -368,6 +371,8 @@ export default defineComponent({
         function stopDragging() {
             if (draggingRef.value) {
                 draggingRef.value = false;
+                if (props.onDragend)
+                    call(props.onDragend);
                 off('touchend', document, handleMouseUp);
                 off('mouseup', document, handleMouseUp);
                 off('touchmove', document, handleMouseMove);
@@ -381,6 +386,8 @@ export default defineComponent({
                 return;
             }
             const pointValue = getPointValue(event);
+            if (pointValue === undefined)
+                return;
             doDispatchValue(sanitizeValue(pointValue, arrifiedValueRef.value[activeIndex]), activeIndex);
         }
         function handleMouseUp() {
@@ -538,7 +545,15 @@ export default defineComponent({
                     return (h(VBinder, null, {
                         default: () => [
                             h(VTarget, null, {
-                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle-wrapper`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => { this.handleHandleFocus(index); }, onBlur: () => { this.handleHandleBlur(index); }, onMouseenter: () => { this.handleHandleMouseEnter(index); }, onMouseleave: () => { this.handleHandleMouseLeave(index); } }, resolveSlot(this.$slots.thumb, () => [
+                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle-wrapper`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => {
+                                        this.handleHandleFocus(index);
+                                    }, onBlur: () => {
+                                        this.handleHandleBlur(index);
+                                    }, onMouseenter: () => {
+                                        this.handleHandleMouseEnter(index);
+                                    }, onMouseleave: () => {
+                                        this.handleHandleMouseLeave(index);
+                                    } }, resolveSlot(this.$slots.thumb, () => [
                                     h("div", { class: `${mergedClsPrefix}-slider-handle` })
                                 ])))
                             }),

package/es/slider/src/utils.d.ts

@@ -1,10 +1,10 @@
-import { type Ref, type ComponentPublicInstance } from 'vue';
+import { type ComponentPublicInstance } from 'vue';
 export declare function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent;
 type RefType = HTMLElement | ComponentPublicInstance;
 type RefKey = number;
 type RefsValue<T extends RefType> = Map<RefKey, T>;
 export declare function useRefs<T extends RefType>(): [
-    Ref<RefsValue<T>>,
+    RefsValue<T>,
     (key: RefKey) => (el: any) => void
 ];
 export {};

package/es/slider/src/utils.js

@@ -1,12 +1,14 @@
-import { ref, onBeforeUpdate } from 'vue';
+import { onBeforeUpdate } from 'vue';
 export function isTouchEvent(e) {
     return window.TouchEvent && e instanceof window.TouchEvent;
 }
 export function useRefs() {
-    const refs = ref(new Map());
+    const refs = new Map();
     const setRefs = (index) => (el) => {
-        refs.value.set(index, el);
+        refs.set(index, el);
     };
-    onBeforeUpdate(() => { refs.value.clear(); });
+    onBeforeUpdate(() => {
+        refs.clear();
+    });
     return [refs, setRefs];
 }

package/es/space/src/Space.d.ts

@@ -18,6 +18,7 @@ export declare const spaceProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
@@ -60,6 +61,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
@@ -87,7 +89,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     useGap: boolean;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     margin: import("vue").ComputedRef<{
         horizontal: number;
         vertical: number;
@@ -108,6 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
@@ -140,5 +143,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly justify: Justify;
     readonly wrapItem: boolean;
     readonly internalUseGap: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/space/src/Space.js

@@ -14,7 +14,7 @@ export const spaceProps = Object.assign(Object.assign({}, useTheme.props), { ali
     }, wrapItem: {
         type: Boolean,
         default: true
-    }, itemStyle: [String, Object], wrap: {
+    }, itemClass: String, itemStyle: [String, Object], wrap: {
         type: Boolean,
         default: true
     }, 
@@ -58,7 +58,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { vertical, align, inline, justify, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap, wrapItem, internalUseGap } = this;
+        const { vertical, align, inline, justify, itemClass, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap, wrapItem, internalUseGap } = this;
         const children = flatten(getSlot(this));
         if (!children.length)
             return null;
@@ -84,7 +84,7 @@ export default defineComponent({
                 gap: useGap ? `${margin.vertical}px ${margin.horizontal}px` : ''
             } }, !wrapItem && (useGap || internalUseGap)
             ? children
-            : children.map((child, index) => (h("div", { role: "none", style: [
+            : children.map((child, index) => (h("div", { role: "none", class: itemClass, style: [
                     itemStyle,
                     {
                         maxWidth: '100%'

package/es/spin/src/Spin.d.ts

@@ -1,6 +1,8 @@
-import { type PropType } from 'vue';
+import { type PropType, type CSSProperties } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const spinProps: {
+    contentClass: StringConstructor;
+    contentStyle: PropType<string | CSSProperties>;
     description: StringConstructor;
     stroke: StringConstructor;
     size: {
@@ -21,6 +23,7 @@ export declare const spinProps: {
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -57,6 +60,8 @@ export declare const spinProps: {
 };
 export type SpinProps = ExtractPublicPropTypes<typeof spinProps>;
 declare const _default: import("vue").DefineComponent<{
+    contentClass: StringConstructor;
+    contentStyle: PropType<string | CSSProperties>;
     description: StringConstructor;
     stroke: StringConstructor;
     size: {
@@ -77,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -111,8 +117,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
-    compitableShow: import("vue").ComputedRef<boolean>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    active: import("vue").Ref<boolean>;
     mergedStrokeWidth: import("vue").ComputedRef<number>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
@@ -124,6 +130,8 @@ declare const _default: import("vue").DefineComponent<{
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: StringConstructor;
+    contentStyle: PropType<string | CSSProperties>;
     description: StringConstructor;
     stroke: StringConstructor;
     size: {
@@ -144,6 +152,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: () => boolean;
         default: undefined;
     };
+    delay: NumberConstructor;
     theme: PropType<import("../../_mixins").Theme<"Spin", {
         fontSize: string;
         textColor: string;
@@ -182,5 +191,5 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     rotate: boolean;
     spinning: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/spin/src/Spin.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, Transition, watchEffect } from 'vue';
+import { computed, defineComponent, h, Transition, ref, watchEffect } from 'vue';
 import { useCompitable } from 'vooks';
 import { pxfy } from 'seemly';
 import { NBaseLoading } from '../../_internal';
@@ -11,7 +11,7 @@ const STROKE_WIDTH = {
     medium: 18,
     large: 16
 };
-export const spinProps = Object.assign(Object.assign({}, useTheme.props), { description: String, stroke: String, size: {
+export const spinProps = Object.assign(Object.assign({}, useTheme.props), { contentClass: String, contentStyle: [Object, String], description: String, stroke: String, size: {
         type: [String, Number],
         default: 'medium'
     }, show: {
@@ -26,7 +26,7 @@ export const spinProps = Object.assign(Object.assign({}, useTheme.props), { desc
             return true;
         },
         default: undefined
-    } });
+    }, delay: Number });
 export default defineComponent({
     name: 'Spin',
     props: spinProps,
@@ -61,9 +61,27 @@ export default defineComponent({
                 return typeof size === 'number' ? String(size) : size[0];
             }), cssVarsRef, props)
             : undefined;
+        const compitableShow = useCompitable(props, ['spinning', 'show']);
+        const activeRef = ref(false);
+        watchEffect((onCleanup) => {
+            let timerId;
+            if (compitableShow.value) {
+                const { delay } = props;
+                if (delay) {
+                    timerId = window.setTimeout(() => {
+                        activeRef.value = true;
+                    }, delay);
+                    onCleanup(() => {
+                        clearTimeout(timerId);
+                    });
+                    return;
+                }
+            }
+            activeRef.value = compitableShow.value;
+        });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            compitableShow: useCompitable(props, ['spinning', 'show']),
+            active: activeRef,
             mergedStrokeWidth: computed(() => {
                 const { strokeWidth } = props;
                 if (strokeWidth !== undefined)
@@ -93,10 +111,11 @@ export default defineComponent({
         return $slots.default ? (h("div", { class: [`${mergedClsPrefix}-spin-container`, this.themeClass], style: this.cssVars },
             h("div", { class: [
                     `${mergedClsPrefix}-spin-content`,
-                    this.compitableShow && `${mergedClsPrefix}-spin-content--spinning`
-                ] }, $slots),
+                    this.active && `${mergedClsPrefix}-spin-content--spinning`,
+                    this.contentClass
+                ], style: this.contentStyle }, $slots),
             h(Transition, { name: "fade-in-transition" }, {
-                default: () => (this.compitableShow ? icon : null)
+                default: () => (this.active ? icon : null)
             }))) : (icon);
     }
 });

package/es/split/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NSplit, splitProps } from './src/Split';
+export type { SplitProps } from './src/Split';

package/es/split/index.js

@@ -0,0 +1 @@
+export { default as NSplit, splitProps } from './src/Split';

package/es/split/src/Split.d.ts

@@ -0,0 +1,135 @@
+import { type PropType } from 'vue';
+import { type ExtractPublicPropTypes } from '../../_utils';
+export declare const splitProps: {
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly resizeTriggerSize: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly defaultSize: {
+        readonly type: NumberConstructor;
+        readonly default: 0.5;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly onDragStart: PropType<(e: Event) => void>;
+    readonly onDragMove: PropType<(e: Event) => void>;
+    readonly onDragEnd: PropType<(e: Event) => void>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+};
+export type SplitProps = ExtractPublicPropTypes<typeof splitProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly resizeTriggerSize: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly defaultSize: {
+        readonly type: NumberConstructor;
+        readonly default: 0.5;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly onDragStart: PropType<(e: Event) => void>;
+    readonly onDragMove: PropType<(e: Event) => void>;
+    readonly onDragEnd: PropType<(e: Event) => void>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+}, {
+    cssVars: import("vue").ComputedRef<{
+        '--n-resize-trigger-color-hover': string;
+    }> | undefined;
+    resizeTriggerElRef: import("vue").Ref<HTMLElement | null>;
+    isDragging: import("vue").Ref<boolean>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    resizeTriggerWrapperStyle: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+        cursor: string;
+    }>;
+    resizeTriggerStyle: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+    }>;
+    handleMouseDown: (e: MouseEvent) => void;
+    firstPaneStyle: import("vue").ComputedRef<{
+        flex: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly resizeTriggerSize: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly defaultSize: {
+        readonly type: NumberConstructor;
+        readonly default: 0.5;
+    };
+    readonly min: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly onDragStart: PropType<(e: Event) => void>;
+    readonly onDragMove: PropType<(e: Event) => void>;
+    readonly onDragEnd: PropType<(e: Event) => void>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
+        resizableTriggerColorHover: string;
+    }, any>>>;
+}>>, {
+    readonly direction: "horizontal" | "vertical";
+    readonly disabled: boolean;
+    readonly max: number;
+    readonly min: number;
+    readonly defaultSize: number;
+    readonly resizeTriggerSize: number;
+}, {}>;
+export default _default;

package/es/split/src/Split.js

@@ -0,0 +1,145 @@
+import { h, defineComponent, ref, computed } from 'vue';
+import { resolveSlot } from '../../_utils';
+import useConfig from '../../_mixins/use-config';
+import style from './styles/index.cssr';
+import { useTheme } from '../../_mixins';
+import { splitLight } from '../styles';
+import { off, on } from 'evtd';
+export const splitProps = Object.assign(Object.assign({}, useTheme.props), { direction: {
+        type: String,
+        default: 'horizontal'
+    }, resizeTriggerSize: {
+        type: Number,
+        default: 3
+    }, disabled: Boolean, defaultSize: {
+        type: Number,
+        default: 0.5
+    }, min: {
+        type: Number,
+        default: 0
+    }, max: {
+        type: Number,
+        default: 1
+    }, onDragStart: Function, onDragMove: Function, onDragEnd: Function });
+export default defineComponent({
+    name: 'Split',
+    props: splitProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('Split', '-split', style, splitLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { resizableTriggerColorHover } } = themeRef.value;
+            return {
+                '--n-resize-trigger-color-hover': resizableTriggerColorHover
+            };
+        });
+        const resizeTriggerElRef = ref(null);
+        const isDraggingRef = ref(false);
+        const currentSize = ref(props.defaultSize);
+        const firstPaneStyle = computed(() => {
+            const size = currentSize.value * 100;
+            return {
+                flex: `0 0 calc(${size}% - ${(props.resizeTriggerSize * size) / 100}px)`
+            };
+        });
+        const resizeTriggerStyle = computed(() => {
+            return props.direction === 'horizontal'
+                ? {
+                    width: `${props.resizeTriggerSize}px`,
+                    height: '100%'
+                }
+                : {
+                    width: '100%',
+                    height: `${props.resizeTriggerSize}px`
+                };
+        });
+        const resizeTriggerWrapperStyle = computed(() => {
+            const horizontal = props.direction === 'horizontal';
+            return {
+                width: horizontal ? `${props.resizeTriggerSize}px` : '',
+                height: horizontal ? '' : `${props.resizeTriggerSize}px`,
+                cursor: props.direction === 'horizontal' ? 'col-resize' : 'row-resize'
+            };
+        });
+        let offset = 0;
+        const handleMouseDown = (e) => {
+            e.preventDefault();
+            isDraggingRef.value = true;
+            if (props.onDragStart)
+                props.onDragStart(e);
+            const mouseMoveEvent = 'mousemove';
+            const mouseUpEvent = 'mouseup';
+            const onMouseMove = (e) => {
+                updateSize(e);
+                if (props.onDragMove)
+                    props.onDragMove(e);
+            };
+            const onMouseUp = () => {
+                off(mouseMoveEvent, document, onMouseMove);
+                off(mouseUpEvent, document, onMouseUp);
+                isDraggingRef.value = false;
+                if (props.onDragEnd)
+                    props.onDragEnd(e);
+                document.body.style.cursor = '';
+            };
+            document.body.style.cursor = resizeTriggerWrapperStyle.value.cursor;
+            on(mouseMoveEvent, document, onMouseMove);
+            on(mouseUpEvent, document, onMouseUp);
+            const resizeTriggerEl = resizeTriggerElRef.value;
+            if (resizeTriggerEl) {
+                const elRect = resizeTriggerEl.getBoundingClientRect();
+                if (props.direction === 'horizontal') {
+                    offset = e.clientX - elRect.left;
+                }
+                else {
+                    offset = elRect.top - e.clientY;
+                }
+            }
+            updateSize(e);
+        };
+        const updateSize = (event) => {
+            var _a, _b;
+            const parentRect = (_b = (_a = resizeTriggerElRef.value) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!parentRect)
+                return;
+            const newSize = props.direction === 'horizontal'
+                ? (event.clientX - parentRect.left - offset) /
+                    (parentRect.width - props.resizeTriggerSize)
+                : (event.clientY - parentRect.top + offset) /
+                    (parentRect.height - props.resizeTriggerSize);
+            currentSize.value = newSize;
+            if (props.min) {
+                currentSize.value = Math.max(newSize, props.min);
+            }
+            if (props.max) {
+                currentSize.value = Math.min(currentSize.value, props.max);
+            }
+        };
+        return {
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            resizeTriggerElRef,
+            isDragging: isDraggingRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            resizeTriggerWrapperStyle,
+            resizeTriggerStyle,
+            handleMouseDown,
+            firstPaneStyle
+        };
+    },
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { class: [
+                `${this.mergedClsPrefix}-split`,
+                `${this.mergedClsPrefix}-split--${this.direction}`
+            ], style: this.cssVars },
+            h("div", { class: `${this.mergedClsPrefix}-split-pane-1`, style: this.firstPaneStyle }, (_b = (_a = this.$slots)[1]) === null || _b === void 0 ? void 0 : _b.call(_a)),
+            !this.disabled && (h("div", { ref: "resizeTriggerElRef", class: `${this.mergedClsPrefix}-split__resize-trigger-wrapper`, style: this.resizeTriggerWrapperStyle, onMousedown: this.handleMouseDown }, resolveSlot(this.$slots['resize-trigger'], () => [
+                h("div", { style: this.resizeTriggerStyle, class: [
+                        `${this.mergedClsPrefix}-split__resize-trigger`,
+                        this.isDragging &&
+                            `${this.mergedClsPrefix}-split__resize-trigger--hover`
+                    ] })
+            ]))),
+            h("div", { class: `${this.mergedClsPrefix}-split-pane-2` }, (_d = (_c = this.$slots)[2]) === null || _d === void 0 ? void 0 : _d.call(_c))));
+    }
+});

package/es/split/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;