@sdata/web-vue 3.30.0 → 4.1.0

package/es/collapse/collapse-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,168 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isNumber } from "../_utils/is.js";
+import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
+import IconCaretLeft from "../icon/icon-caret-left/index.js";
+import IconCaretRight from "../icon/icon-caret-right/index.js";
+import { collapseKey } from "./context.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+//#region components/collapse/collapse-item.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-disabled",
+	"aria-expanded",
+	"tabindex"
+];
+var collapse_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "CollapseItem" }), {}, {
+	__name: "collapse-item",
+	props: {
+		header: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showExpandIcon: {
+			type: Boolean,
+			default: true
+		},
+		destroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		var _instance$vnode$key;
+		const props = __props;
+		useSlots();
+		const instance = getCurrentInstance();
+		const prefixCls = getPrefixCls("collapse-item");
+		const collapseCtx = inject(collapseKey, {});
+		const key = instance && isNumber(instance.vnode.key) ? instance.vnode.key : String((_instance$vnode$key = instance === null || instance === void 0 ? void 0 : instance.vnode.key) !== null && _instance$vnode$key !== void 0 ? _instance$vnode$key : "");
+		const isActive = computed(() => {
+			var _collapseCtx$activeKe;
+			return (_collapseCtx$activeKe = collapseCtx.activeKeys) === null || _collapseCtx$activeKe === void 0 ? void 0 : _collapseCtx$activeKe.includes(key);
+		});
+		const mergedDestroyOnHide = computed(() => collapseCtx.destroyOnHide || props.destroyOnHide);
+		const mergedShowExpandIcon = computed(() => {
+			var _collapseCtx$showExpa;
+			return (_collapseCtx$showExpa = collapseCtx.showExpandIcon) !== null && _collapseCtx$showExpa !== void 0 ? _collapseCtx$showExpa : props.showExpandIcon;
+		});
+		const mounted = ref(mergedDestroyOnHide.value ? isActive.value : true);
+		const expandIconPosition = computed(() => {
+			var _collapseCtx$expandIc;
+			return (_collapseCtx$expandIc = collapseCtx.expandIconPosition) !== null && _collapseCtx$expandIc !== void 0 ? _collapseCtx$expandIc : "left";
+		});
+		const headerId = `${prefixCls}-${instance === null || instance === void 0 ? void 0 : instance.uid}-header`;
+		const contentId = `${prefixCls}-${instance === null || instance === void 0 ? void 0 : instance.uid}-content`;
+		const cls = computed(() => [prefixCls, { [`${prefixCls}-active`]: isActive.value }]);
+		const headerCls = computed(() => [
+			`${prefixCls}-header`,
+			`${prefixCls}-header-${collapseCtx.expandIconPosition}`,
+			{ [`${prefixCls}-header-disabled`]: props.disabled }
+		]);
+		const iconCls = computed(() => [{ [`${prefixCls}-icon-right`]: collapseCtx.expandIconPosition === "right" }]);
+		const contentCls = computed(() => [`${prefixCls}-content`, { [`${prefixCls}-content-expend`]: isActive.value }]);
+		const RenderContextExpandIcon = () => {
+			var _collapseCtx$slots, _collapseCtx$slots$ex;
+			return (_collapseCtx$slots = collapseCtx.slots) === null || _collapseCtx$slots === void 0 || (_collapseCtx$slots$ex = _collapseCtx$slots["expand-icon"]) === null || _collapseCtx$slots$ex === void 0 ? void 0 : _collapseCtx$slots$ex.call(_collapseCtx$slots, {
+				active: isActive.value,
+				disabled: props.disabled,
+				position: expandIconPosition.value
+			});
+		};
+		const handleClick = (event) => {
+			if (!props.disabled) {
+				var _collapseCtx$handleCl;
+				(_collapseCtx$handleCl = collapseCtx.handleClick) === null || _collapseCtx$handleCl === void 0 || _collapseCtx$handleCl.call(collapseCtx, key, event);
+			}
+		};
+		const handleKeydown = (event) => {
+			if (props.disabled) return;
+			if (isActivationKey(event)) {
+				var _collapseCtx$handleCl2;
+				event.preventDefault();
+				(_collapseCtx$handleCl2 = collapseCtx.handleClick) === null || _collapseCtx$handleCl2 === void 0 || _collapseCtx$handleCl2.call(collapseCtx, key, event);
+			}
+		};
+		const transitionEvents = {
+			onEnter: (element) => {
+				element.style.height = `${element.scrollHeight}px`;
+			},
+			onAfterEnter: (element) => {
+				element.style.height = "auto";
+			},
+			onBeforeLeave: (element) => {
+				element.style.height = `${element.scrollHeight}px`;
+			},
+			onLeave: (element) => {
+				element.style.height = "0";
+			},
+			onAfterLeave: () => {
+				if (mergedDestroyOnHide.value) mounted.value = false;
+			}
+		};
+		watch(isActive, (active) => {
+			if (active && !mounted.value) mounted.value = true;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(cls.value) }, [createElementVNode("div", {
+				role: "button",
+				"aria-disabled": __props.disabled,
+				"aria-expanded": isActive.value,
+				"aria-controls": contentId,
+				tabindex: __props.disabled ? -1 : 0,
+				class: normalizeClass(headerCls.value),
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [
+				mergedShowExpandIcon.value ? (openBlock(), createBlock(icon_hover_default, {
+					key: 0,
+					prefix: unref(prefixCls),
+					class: normalizeClass(iconCls.value),
+					disabled: __props.disabled
+				}, {
+					default: withCtx(() => {
+						var _unref$slots;
+						return [_ctx.$slots["expand-icon"] ? renderSlot(_ctx.$slots, "expand-icon", {
+							active: isActive.value,
+							disabled: __props.disabled,
+							position: expandIconPosition.value
+						}, void 0, void 0, 0) : ((_unref$slots = unref(collapseCtx).slots) === null || _unref$slots === void 0 ? void 0 : _unref$slots["expand-icon"]) ? (openBlock(), createBlock(RenderContextExpandIcon, { key: 1 })) : expandIconPosition.value === "right" ? (openBlock(), createBlock(unref(IconCaretLeft), {
+							key: 2,
+							class: normalizeClass(`${unref(prefixCls)}-expand-icon`)
+						}, null, 8, ["class"])) : (openBlock(), createBlock(unref(IconCaretRight), {
+							key: 3,
+							class: normalizeClass(`${unref(prefixCls)}-expand-icon`)
+						}, null, 8, ["class"]))];
+					}),
+					_: 3
+				}, 8, [
+					"prefix",
+					"class",
+					"disabled"
+				])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					id: headerId,
+					class: normalizeClass(`${unref(prefixCls)}-header-title`)
+				}, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(__props.header), 1)])], 2),
+				_ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-header-extra`)
+				}, [renderSlot(_ctx.$slots, "extra")], 2)) : createCommentVNode("", true)
+			], 42, _hoisted_1), createVNode(Transition, mergeProps({ name: "collapse-slider" }, transitionEvents), {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					id: contentId,
+					role: "region",
+					"aria-labelledby": headerId,
+					class: normalizeClass(contentCls.value)
+				}, [mounted.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-content-box`)
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)], 2), [[vShow, isActive.value]])]),
+				_: 3
+			}, 16)], 2);
+		};
+	}
+}));
+//#endregion
+export { collapse_item_vue_vue_type_script_setup_true_lang_default as default };

package/es/collapse/collapse.vue.d.ts

@@ -70,8 +70,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onChange?: ((_activeKey: (string | number)[], _ev: Event) => any) | undefined;
     "onUpdate:activeKey"?: ((_activeKey: (string | number)[]) => any) | undefined;
 }>, {
-    bordered: boolean;
     activeKey: (string | number)[];
+    bordered: boolean;
     showExpandIcon: boolean;
     destroyOnHide: boolean;
     defaultActiveKey: (string | number)[];

package/es/collapse/collapse.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray } from "../_utils/is.js";
 import { collapseKey } from "./context.js";

package/es/collapse/index.d.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
-import _CollapseItem from './collapse-item';
+import _CollapseItem from './collapse-item.vue';
 import _Collapse from './collapse.vue';
 declare const Collapse: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
@@ -39,8 +39,8 @@ declare const Collapse: {
         change: (_activeKey: (string | number)[], _ev: Event) => any;
         "update:activeKey": (_activeKey: (string | number)[]) => any;
     }, import("vue").PublicProps, {
-        bordered: boolean;
         activeKey: (string | number)[];
+        bordered: boolean;
         showExpandIcon: boolean;
         destroyOnHide: boolean;
         defaultActiveKey: (string | number)[];
@@ -86,8 +86,8 @@ declare const Collapse: {
         onChange?: ((_activeKey: (string | number)[], _ev: Event) => any) | undefined;
         "onUpdate:activeKey"?: ((_activeKey: (string | number)[]) => any) | undefined;
     }>, {}, {}, {}, {}, {
-        bordered: boolean;
         activeKey: (string | number)[];
+        bordered: boolean;
         showExpandIcon: boolean;
         destroyOnHide: boolean;
         defaultActiveKey: (string | number)[];
@@ -133,8 +133,8 @@ declare const Collapse: {
     change: (_activeKey: (string | number)[], _ev: Event) => any;
     "update:activeKey": (_activeKey: (string | number)[]) => any;
 }, string, {
-    bordered: boolean;
     activeKey: (string | number)[];
+    bordered: boolean;
     showExpandIcon: boolean;
     destroyOnHide: boolean;
     defaultActiveKey: (string | number)[];
@@ -145,162 +145,57 @@ declare const Collapse: {
         default?: (props: {}) => any;
     };
 }) & {
-    Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        header: StringConstructor;
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showExpandIcon: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        destroyOnHide: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        header: StringConstructor;
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showExpandIcon: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        destroyOnHide: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
+    Item: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+            header?: string;
+            disabled?: boolean;
+            showExpandIcon?: boolean;
+            destroyOnHide?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            disabled: boolean;
+            showExpandIcon: boolean;
+            destroyOnHide: boolean;
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            header?: string;
+            disabled?: boolean;
+            showExpandIcon?: boolean;
+            destroyOnHide?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, {
+            disabled: boolean;
+            showExpandIcon: boolean;
+            destroyOnHide: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{
+        header?: string;
+        disabled?: boolean;
+        showExpandIcon?: boolean;
+        destroyOnHide?: boolean;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         disabled: boolean;
         showExpandIcon: boolean;
         destroyOnHide: boolean;
-    }, {}, {
-        IconHover: {
-            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                prefix: {
-                    type: StringConstructor;
-                };
-                size: {
-                    type: import("vue").PropType<import("../index.ts").Size>;
-                    default: string;
-                };
-                disabled: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-            }>> & Readonly<{
-                onClick?: ((_e: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                click: (_e: MouseEvent) => any;
-            }, import("vue").PublicProps, {
-                size: "small" | "medium" | "large" | "mini";
-                disabled: boolean;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                prefix: {
-                    type: StringConstructor;
-                };
-                size: {
-                    type: import("vue").PropType<import("../index.ts").Size>;
-                    default: string;
-                };
-                disabled: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-            }>> & Readonly<{
-                onClick?: ((_e: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, {
-                size: "small" | "medium" | "large" | "mini";
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: () => import("vue").VNode[];
+            header?: () => import("vue").VNode[];
+            'expand-icon'?: (props: {
+                active: boolean | undefined;
                 disabled: boolean;
-            }>;
-            __isFragment?: never;
-            __isTeleport?: never;
-            __isSuspense?: never;
-        } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            prefix: {
-                type: StringConstructor;
-            };
-            size: {
-                type: import("vue").PropType<import("../index.ts").Size>;
-                default: string;
-            };
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & Readonly<{
-            onClick?: ((_e: MouseEvent) => any) | undefined;
-        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (_e: MouseEvent) => any;
-        }, string, {
-            size: "small" | "medium" | "large" | "mini";
-            disabled: boolean;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        });
-        IconCaretRight: {
-            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
-                onClick?: ((_ev: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                click: (_ev: MouseEvent) => any;
-            }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
-                onClick?: ((_ev: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, {}>;
-            __isFragment?: never;
-            __isTeleport?: never;
-            __isSuspense?: never;
-        } & import("vue").ComponentOptionsBase<Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
-            onClick?: ((_ev: MouseEvent) => any) | undefined;
-        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (_ev: MouseEvent) => any;
-        }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
-            install: (app: App, options?: import("../_utils/types").SDIconOptions) => void;
-        };
-        IconCaretLeft: {
-            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
-                onClick?: ((_ev: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                click: (_ev: MouseEvent) => any;
-            }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
-                onClick?: ((_ev: MouseEvent) => any) | undefined;
-            }>, {}, {}, {}, {}, {}>;
-            __isFragment?: never;
-            __isTeleport?: never;
-            __isSuspense?: never;
-        } & import("vue").ComponentOptionsBase<Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
-            onClick?: ((_ev: MouseEvent) => any) | undefined;
-        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (_ev: MouseEvent) => any;
-        }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
-            install: (app: App, options?: import("../_utils/types").SDIconOptions) => void;
+                position: "left" | "right";
+            }) => import("vue").VNode[];
+            extra?: () => import("vue").VNode[];
         };
-    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    });
     install: (app: App, options?: SDOptions) => void;
 };
 export type CollapseInstance = InstanceType<typeof _Collapse>;

package/es/collapse/style/index.css

@@ -86,6 +86,7 @@
 }
 .sd-collapse-item-header-title {
   display: inline;
+  overflow: hidden;
 }
 .sd-collapse-item-header-extra {
   float: right;

package/es/collapse/style/index.scss

@@ -93,6 +93,7 @@ $collapse-prefix-cls: string.unquote('#{theme.$prefix}-collapse');
 
       &-title {
         display: inline;
+        overflow: hidden;
       }
 
       &-extra {