@sdata/web-vue 4.5.4 → 4.6.0

package/es/panel-group/index.js

@@ -0,0 +1,22 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import panel_group_default from "./panel-group.js";
+import panel_separator_default from "./panel-separator.js";
+import panel_default from "./panel.js";
+//#region components/panel-group/index.ts
+var PanelGroup = Object.assign(panel_group_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + panel_group_default.name, panel_group_default);
+} });
+var Panel = Object.assign(panel_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + panel_default.name, panel_default);
+} });
+var PanelSeparator = Object.assign(panel_separator_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + panel_separator_default.name, panel_separator_default);
+} });
+//#endregion
+export { Panel, PanelSeparator, PanelGroup as default };

package/es/panel-group/panel-group.js

@@ -0,0 +1,5 @@
+import panel_group_vue_vue_type_script_setup_true_lang_default from "./panel-group.vue_vue_type_script_setup_true_lang.js";
+//#region components/panel-group/panel-group.vue
+var panel_group_default = panel_group_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { panel_group_default as default };

package/es/panel-group/panel-group.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PanelTransition } from './types';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    reorder?: boolean;
+    transition?: PanelTransition;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/panel-group/panel-group.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { injectParentPanelGroup, providePanelGroup } from "./context.js";
+import { createEngineGroup } from "./core/group.js";
+import { reorder } from "./core/reorder.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onBeforeUpdate, onUpdated, openBlock, ref, renderSlot } from "vue";
+//#region components/panel-group/panel-group.vue?vue&type=script&setup=true&lang.ts
+var panel_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "PanelGroup" }), {}, {
+	__name: "panel-group",
+	props: {
+		orientation: {},
+		reorder: { type: Boolean },
+		transition: {}
+	},
+	setup(__props) {
+		var _props$orientation;
+		/** @zh 面板与伸缩杆 @en Panels and separators */
+		const props = __props;
+		const parentGroup = injectParentPanelGroup();
+		const group = createEngineGroup((_props$orientation = props.orientation) !== null && _props$orientation !== void 0 ? _props$orientation : "horizontal");
+		providePanelGroup(group);
+		const rootRef = ref();
+		const prefixCls = getPrefixCls("panel-group");
+		const classNames = computed(() => [prefixCls]);
+		const rootStyle = computed(() => ({
+			display: "flex",
+			flexDirection: group.axes.direction,
+			height: "100%",
+			width: "100%",
+			overflow: parentGroup ? void 0 : "clip"
+		}));
+		let beforeBoxes = null;
+		onBeforeUpdate(() => {
+			if (props.reorder !== false && rootRef.value) beforeBoxes = reorder.measure(rootRef.value, group.axes);
+		});
+		onUpdated(() => {
+			const boxes = beforeBoxes;
+			beforeBoxes = null;
+			if (boxes) reorder.play(boxes, group.axes, props.transition);
+			group.notify();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(classNames.value),
+				style: normalizeStyle(rootStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
+}));
+//#endregion
+export { panel_group_vue_vue_type_script_setup_true_lang_default as default };

package/es/panel-group/panel-separator.js

@@ -0,0 +1,5 @@
+import panel_separator_vue_vue_type_script_setup_true_lang_default from "./panel-separator.vue_vue_type_script_setup_true_lang.js";
+//#region components/panel-group/panel-separator.vue
+var panel_separator_default = panel_separator_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { panel_separator_default as default };

package/es/panel-group/panel-separator.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PanelController } from './core/panel';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_Props = {
+    ariaLabel?: string;
+    own?: PanelController;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/panel-group/panel-separator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,119 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useI18n } from "../locale/index.js";
+import IconDragDotVertical from "../icon/icon-drag-dot-vertical/index.js";
+import { usePanelGroup } from "./context.js";
+import { edgeSize } from "./core/env.js";
+import IconDragDot from "../icon/icon-drag-dot/index.js";
+import { attachSeparator } from "./core/separator.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref } from "vue";
+//#region components/panel-group/panel-separator.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation", "aria-label"];
+var _hoisted_2 = ["aria-orientation", "aria-label"];
+var panel_separator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "PanelSeparator",
+	inheritAttrs: false
+}), {}, {
+	__name: "panel-separator",
+	props: {
+		ariaLabel: {},
+		own: {}
+	},
+	setup(__props) {
+		var _props$own$state$end, _props$own;
+		/** @zh 自定义伸缩杆内容 @en Custom resize grip content */
+		const props = __props;
+		const { t } = useI18n();
+		const group = usePanelGroup();
+		const { axes } = group;
+		const prefixCls = getPrefixCls("panel-separator");
+		const gripRef = ref();
+		let detach;
+		const ownEnd = ref((_props$own$state$end = (_props$own = props.own) === null || _props$own === void 0 ? void 0 : _props$own.state.end) !== null && _props$own$state$end !== void 0 ? _props$own$state$end : false);
+		let unsubOwn;
+		if (props.own) unsubOwn = props.own.subscribe(() => {
+			var _props$own$state$end2, _props$own2;
+			ownEnd.value = (_props$own$state$end2 = (_props$own2 = props.own) === null || _props$own2 === void 0 ? void 0 : _props$own2.state.end) !== null && _props$own$state$end2 !== void 0 ? _props$own$state$end2 : false;
+		});
+		onMounted(() => {
+			if (gripRef.value) detach = attachSeparator(gripRef.value, group, props.own);
+		});
+		onBeforeUnmount(() => {
+			detach === null || detach === void 0 || detach();
+			unsubOwn === null || unsubOwn === void 0 || unsubOwn();
+		});
+		const ariaLabel = computed(() => {
+			var _props$ariaLabel;
+			return (_props$ariaLabel = props.ariaLabel) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : t("a11y.resize");
+		});
+		const slotClass = computed(() => props.own ? [`${prefixCls}-edge`] : [prefixCls]);
+		const triggerCls = getPrefixCls("resizebox-trigger");
+		const gripClass = [
+			`${prefixCls}-grip`,
+			triggerCls,
+			`${triggerCls}-${axes.separator}`
+		];
+		const ownStyle = computed(() => {
+			const end = ownEnd.value;
+			return {
+				position: "absolute",
+				[axes.axis === "Inline" ? end ? "insetInlineEnd" : "insetInlineStart" : end ? "insetBlockEnd" : "insetBlockStart"]: 0,
+				[axes.axis === "Inline" ? "insetBlock" : "insetInline"]: 0
+			};
+		});
+		const slotStyle = computed(() => ({ [axes.extent]: 0 }));
+		const gripStyle = computed(() => _objectSpread2({ cursor: axes.cursor }, props.own ? { [axes.extent]: `${edgeSize()}px` } : {}));
+		return (_ctx, _cache) => {
+			return __props.own ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(slotClass.value),
+				style: normalizeStyle(ownStyle.value)
+			}, [createElementVNode("div", mergeProps({
+				ref_key: "gripRef",
+				ref: gripRef
+			}, _ctx.$attrs, {
+				class: gripClass,
+				style: gripStyle.value,
+				role: "separator",
+				tabindex: "0",
+				"aria-orientation": unref(axes).separator,
+				"aria-label": ariaLabel.value
+			}), [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+				class: normalizeClass(`${unref(triggerCls)}-icon-wrapper`),
+				"aria-hidden": "true"
+			}, [unref(axes).separator === "horizontal" ? (openBlock(), createBlock(unref(IconDragDot), {
+				key: 0,
+				class: normalizeClass(`${unref(triggerCls)}-icon`)
+			}, null, 8, ["class"])) : (openBlock(), createBlock(unref(IconDragDotVertical), {
+				key: 1,
+				class: normalizeClass(`${unref(triggerCls)}-icon`)
+			}, null, 8, ["class"]))], 2)])], 16, _hoisted_1)], 6)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(slotClass.value),
+				style: normalizeStyle(slotStyle.value),
+				"data-sd-panels-separator": ""
+			}, [createElementVNode("div", mergeProps({
+				ref_key: "gripRef",
+				ref: gripRef
+			}, _ctx.$attrs, {
+				class: gripClass,
+				style: gripStyle.value,
+				role: "separator",
+				tabindex: "0",
+				"aria-orientation": unref(axes).separator,
+				"aria-label": ariaLabel.value
+			}), [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+				class: normalizeClass(`${unref(triggerCls)}-icon-wrapper`),
+				"aria-hidden": "true"
+			}, [unref(axes).separator === "horizontal" ? (openBlock(), createBlock(unref(IconDragDot), {
+				key: 0,
+				class: normalizeClass(`${unref(triggerCls)}-icon`)
+			}, null, 8, ["class"])) : (openBlock(), createBlock(unref(IconDragDotVertical), {
+				key: 1,
+				class: normalizeClass(`${unref(triggerCls)}-icon`)
+			}, null, 8, ["class"]))], 2)])], 16, _hoisted_2)], 6));
+		};
+	}
+}));
+//#endregion
+export { panel_separator_vue_vue_type_script_setup_true_lang_default as default };

package/es/panel-group/panel.js

@@ -0,0 +1,5 @@
+import panel_vue_vue_type_script_setup_true_lang_default from "./panel.vue_vue_type_script_setup_true_lang.js";
+//#region components/panel-group/panel.vue
+var panel_default = panel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { panel_default as default };

package/es/panel-group/panel.vue.d.ts

@@ -0,0 +1,30 @@
+import type { PanelFold, PanelSize, PanelSlotProps, PanelTransition } from './types';
+type __VLS_Props = {
+    size?: PanelSize;
+    collapsed?: boolean;
+    defaultSize?: PanelSize;
+    fold?: PanelFold;
+    minSize?: PanelSize;
+    maxSize?: PanelSize;
+    pin?: boolean;
+    keepMounted?: boolean;
+    transition?: PanelTransition;
+};
+type __VLS_Slots = {
+    default?: (props: PanelSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (collapsed: boolean) => any;
+    "update:size": (size: PanelSize) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+    "onUpdate:size"?: ((size: PanelSize) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/panel-group/panel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,251 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { usePanelGroup } from "./context.js";
+import { cssEasing, timing } from "./core/transition.js";
+import panel_separator_default from "./panel-separator.js";
+import { createPanel } from "./core/panel.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
+//#region components/panel-group/panel.vue?vue&type=script&setup=true&lang.ts
+var panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Panel",
+	inheritAttrs: false
+}), {}, {
+	__name: "panel",
+	props: {
+		size: {},
+		collapsed: { type: Boolean },
+		defaultSize: {},
+		fold: {},
+		minSize: {},
+		maxSize: {},
+		pin: { type: Boolean },
+		keepMounted: { type: Boolean },
+		transition: {}
+	},
+	emits: ["update:size", "update:collapsed"],
+	setup(__props, { emit: __emit }) {
+		var _getCurrentInstance, _props$size, _controller$state;
+		const props = __props;
+		const emit = __emit;
+		/**
+		* @zh 面板内容
+		* @en Panel content
+		* @slot default
+		* @binding {PanelSlotProps} collapsed/dragging/folding 面板状态
+		*/
+		const group = usePanelGroup();
+		const { axes } = group;
+		const prefixCls = getPrefixCls("panel");
+		const hasCollapsedBinding = !!((_getCurrentInstance = getCurrentInstance()) === null || _getCurrentInstance === void 0 || (_getCurrentInstance = _getCurrentInstance.vnode.props) === null || _getCurrentInstance === void 0 ? void 0 : _getCurrentInstance["onUpdate:collapsed"]);
+		const sized = props.size !== void 0;
+		const controller = sized ? createPanel(group, {
+			size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : "100%",
+			collapsed: props.collapsed,
+			defaultSize: props.defaultSize,
+			minSize: props.minSize,
+			maxSize: props.maxSize,
+			transition: props.transition,
+			onSizeChange: (value) => emit("update:size", value),
+			onCollapsedChange: hasCollapsedBinding ? (value) => {
+				emit("update:collapsed", value);
+			} : void 0
+		}) : void 0;
+		const unsubs = [];
+		const panelState = ref((_controller$state = controller === null || controller === void 0 ? void 0 : controller.state) !== null && _controller$state !== void 0 ? _controller$state : {
+			bare: false,
+			dragging: false,
+			end: void 0,
+			folding: false
+		});
+		if (controller) unsubs.push(controller.subscribe(() => {
+			panelState.value = controller.state;
+		}));
+		const state = panelState;
+		const present = computed(() => {
+			var _props$fold;
+			return !props.collapsed || state.value.dragging || ((_props$fold = props.fold) === null || _props$fold === void 0 ? void 0 : _props$fold.hidden) === void 0 && state.value.folding;
+		});
+		const wasPresent = ref(present.value);
+		watch(present, (value) => {
+			if (value) wasPresent.value = true;
+		});
+		const contentMounted = computed(() => props.keepMounted === false ? present.value : wasPresent.value || present.value);
+		const contentPose = computed(() => {
+			var _props$fold2, _props$fold3, _props$fold4;
+			return present.value || !((_props$fold2 = props.fold) === null || _props$fold2 === void 0 ? void 0 : _props$fold2.hidden) ? (_props$fold3 = props.fold) === null || _props$fold3 === void 0 ? void 0 : _props$fold3.shown : (_props$fold4 = props.fold) === null || _props$fold4 === void 0 ? void 0 : _props$fold4.hidden;
+		});
+		const poseTransition = computed(() => {
+			var _props$transition$dur, _props$transition;
+			const duration = (_props$transition$dur = (_props$transition = props.transition) === null || _props$transition === void 0 ? void 0 : _props$transition.duration) !== null && _props$transition$dur !== void 0 ? _props$transition$dur : 250;
+			const easing = cssEasing(props.transition);
+			return { transition: `transform ${duration}ms ${easing}, opacity ${duration}ms ${easing}` };
+		});
+		const contentStyle = computed(() => [
+			{ [axes.cross]: "100%" },
+			poseTransition.value,
+			contentPose.value
+		]);
+		const contentAnimations = /* @__PURE__ */ new Map();
+		const cancelContent = (el) => {
+			var _contentAnimations$ge;
+			(_contentAnimations$ge = contentAnimations.get(el)) === null || _contentAnimations$ge === void 0 || _contentAnimations$ge.cancel();
+			contentAnimations.delete(el);
+		};
+		const animateContent = (el, done, entering) => {
+			var _props$fold5, _props$fold$shown$opa, _props$fold$shown, _props$fold$shown$tra, _props$fold$shown2, _props$fold$hidden$op, _props$fold$hidden$tr;
+			cancelContent(el);
+			if (props.keepMounted !== false || !((_props$fold5 = props.fold) === null || _props$fold5 === void 0 ? void 0 : _props$fold5.hidden)) {
+				done();
+				return;
+			}
+			const shown = {
+				opacity: (_props$fold$shown$opa = (_props$fold$shown = props.fold.shown) === null || _props$fold$shown === void 0 ? void 0 : _props$fold$shown.opacity) !== null && _props$fold$shown$opa !== void 0 ? _props$fold$shown$opa : 1,
+				transform: (_props$fold$shown$tra = (_props$fold$shown2 = props.fold.shown) === null || _props$fold$shown2 === void 0 ? void 0 : _props$fold$shown2.transform) !== null && _props$fold$shown$tra !== void 0 ? _props$fold$shown$tra : "none"
+			};
+			const hidden = {
+				opacity: (_props$fold$hidden$op = props.fold.hidden.opacity) !== null && _props$fold$hidden$op !== void 0 ? _props$fold$hidden$op : shown.opacity,
+				transform: (_props$fold$hidden$tr = props.fold.hidden.transform) !== null && _props$fold$hidden$tr !== void 0 ? _props$fold$hidden$tr : shown.transform
+			};
+			const animation = el.animate(entering ? [hidden, shown] : [shown, hidden], {
+				duration: timing(props.transition).duration,
+				easing: cssEasing(props.transition)
+			});
+			contentAnimations.set(el, animation);
+			animation.finished.then(() => {
+				contentAnimations.delete(el);
+				done();
+			}, () => {});
+		};
+		const enterContent = (el, done) => animateContent(el, done, true);
+		const leaveContent = (el, done) => animateContent(el, done, false);
+		const slotProps = computed(() => ({
+			collapsed: !!props.collapsed,
+			dragging: state.value.dragging,
+			folding: state.value.folding
+		}));
+		const wrapperRef = ref();
+		const contentRef = ref();
+		watch(contentRef, (el, _previous, onCleanup) => {
+			if (!el || !controller) return;
+			const applyContent = (value) => {
+				el.style[axes.extent] = `${value}px`;
+			};
+			applyContent(controller.motion.content.get());
+			onCleanup(controller.motion.content.on("change", applyContent));
+		}, { flush: "post" });
+		const fillClipping = computed(() => group.fill.size !== "100%");
+		const fillStyle = computed(() => {
+			const overflow = fillClipping.value ? "clip" : "visible";
+			if (props.pin) return {
+				flex: "1 1 0%",
+				minWidth: 0,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: axes.direction,
+				justifyContent: group.fill.anchor,
+				overflow
+			};
+			return {
+				flex: "1 1 0%",
+				minWidth: 0,
+				minHeight: 0,
+				overflow
+			};
+		});
+		const pinInnerStyle = computed(() => ({
+			flexShrink: 0,
+			[axes.cross]: "100%",
+			[axes.extent]: typeof group.fill.size === "number" ? `${group.fill.size}px` : group.fill.size
+		}));
+		const buildOptions = () => ({
+			size: props.size,
+			collapsed: props.collapsed,
+			defaultSize: props.defaultSize,
+			minSize: props.minSize,
+			maxSize: props.maxSize,
+			transition: props.transition,
+			onSizeChange: (value) => emit("update:size", value),
+			onCollapsedChange: hasCollapsedBinding ? (value) => {
+				emit("update:collapsed", value);
+			} : void 0
+		});
+		let detach;
+		onMounted(() => {
+			if (!controller || !wrapperRef.value) return;
+			const el = wrapperRef.value;
+			detach = controller.attach(el);
+			const extentProp = axes.extent;
+			const applyExtent = (v) => {
+				el.style[extentProp] = `${Math.abs(v)}px`;
+			};
+			applyExtent(controller.motion.size.get());
+			unsubs.push(controller.motion.size.on("change", applyExtent));
+			unsubs.push(group.subscribe(() => controller.sync(buildOptions())));
+			controller.sync(buildOptions(), true);
+		});
+		watch(() => [
+			props.size,
+			props.collapsed,
+			props.defaultSize,
+			props.minSize,
+			props.maxSize,
+			props.transition
+		], () => {
+			controller === null || controller === void 0 || controller.sync(buildOptions());
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			for (const el of contentAnimations.keys()) cancelContent(el);
+			detach === null || detach === void 0 || detach();
+			detach = void 0;
+			for (const fn of [...unsubs].reverse()) fn();
+			unsubs.length = 0;
+			controller === null || controller === void 0 || controller.destroy();
+		});
+		const sizedClass = [prefixCls];
+		const contentClass = [`${prefixCls}-content`];
+		const fillClass = [`${prefixCls}-fill`];
+		const pinInnerClass = [`${prefixCls}-fill-inner`];
+		const sizedStaticStyle = computed(() => ({
+			flexDirection: axes.direction,
+			justifyContent: state.value.end ? "flex-start" : "flex-end",
+			overflow: props.collapsed || state.value.dragging || state.value.folding ? "clip" : "visible"
+		}));
+		return (_ctx, _cache) => {
+			return sized ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass(sizedClass),
+				style: normalizeStyle(sizedStaticStyle.value)
+			}, [createVNode(Transition, {
+				css: false,
+				onEnter: enterContent,
+				onLeave: leaveContent,
+				onEnterCancelled: cancelContent,
+				onLeaveCancelled: cancelContent
+			}, {
+				default: withCtx(() => [contentMounted.value ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 0,
+					ref_key: "contentRef",
+					ref: contentRef
+				}, _ctx.$attrs, {
+					class: contentClass,
+					style: contentStyle.value
+				}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))], 16)) : createCommentVNode("", true)]),
+				_: 3
+			}), unref(state).bare ? (openBlock(), createBlock(panel_separator_default, {
+				key: 0,
+				own: unref(controller)
+			}, null, 8, ["own"])) : createCommentVNode("", true)], 4)) : (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, __props.pin ? {} : _ctx.$attrs, {
+				class: fillClass,
+				style: fillStyle.value,
+				"data-sd-panels-fill": ""
+			}), [__props.pin ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+				class: pinInnerClass,
+				style: pinInnerStyle.value
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))], 16)) : renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), void 0, void 0, 1)], 16));
+		};
+	}
+}));
+//#endregion
+export { panel_vue_vue_type_script_setup_true_lang_default as default };

package/es/panel-group/style/index.css

@@ -0,0 +1,110 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-panel-group {
+  position: relative;
+}
+
+.sd-panel {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sd-panel-content,
+.sd-panel-fill-inner {
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sd-panel-fill {
+  min-width: 0;
+  min-height: 0;
+}
+
+.sd-panel-separator {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  flex-direction: inherit;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sd-panel-separator-edge {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd-panel-separator-grip {
+  position: relative;
+  flex-shrink: 0;
+  outline: none;
+  cursor: var(--sd-panel-separator-cursor, col-resize);
+  touch-action: none;
+}
+.sd-panel-separator-grip[aria-orientation=vertical] {
+  width: 14px;
+  height: 100%;
+}
+.sd-panel-separator-grip[aria-orientation=horizontal] {
+  width: 100%;
+  height: 14px;
+}
+.sd-panel-separator-grip:focus-visible {
+  border-radius: 4px;
+  box-shadow: 0 0 0 3px var(--sd-color-primary-light-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-panel-content {
+    transition: none !important;
+  }
+}
+.sd-resizebox-trigger-icon-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--sd-color-text-1);
+  font-size: 12px;
+  line-height: 1;
+  background-color: var(--sd-color-neutral-3);
+  transform: translate(-50%, -50%);
+}
+.sd-resizebox-trigger-icon {
+  display: inline-block;
+  margin: -3px;
+}
+.sd-resizebox-trigger-vertical > .sd-resizebox-trigger-icon-wrapper {
+  width: 6px;
+}
+.sd-resizebox-trigger-horizontal > .sd-resizebox-trigger-icon-wrapper {
+  height: 6px;
+}