@kp-ui/lowcode-pc-v2 0.0.11 → 0.0.12

package/src/widgets/containers/collapse/index-render.vue_vue_type_script_setup_true_lang.js

@@ -3,14 +3,22 @@ import RenderWidgetList_default from "../../../../core/src/components/common/ren
 import { ComponentNameEnum } from "../../../../core/src/constants/WidgetTypeEnum.js";
 import { useField } from "../../../../core/src/hooks/useField.js";
 import { WidgetType, getWidgetName } from "../../widgetTypes.js";
-import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, openBlock, unref, withCtx } from "vue";
-import { TpfCollapse } from "tmgc2-share";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, openBlock, renderList, resolveComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { SvgIcon } from "tmgc2-share";
 //#region src/widgets/containers/collapse/index-render.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "collapse-container"
 };
-var _hoisted_2 = { class: "collapse-right" };
+var _hoisted_2 = { class: "tpf-like-collapse-header-content" };
+var _hoisted_3 = { class: "tpf-like-collapse-title" };
+var _hoisted_4 = { class: "tpf-like-collapse-header-content" };
+var _hoisted_5 = { class: "tpf-like-collapse-title" };
+var _hoisted_6 = {
+	key: 0,
+	class: "collapse-right"
+};
+var legacyPaneKey = "legacy-collapse-pane";
 var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	name: getWidgetName(WidgetType.Collapse),
@@ -19,27 +27,138 @@ var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	props: { widget: {} },
 	setup(__props, { expose: __expose }) {
 		const { handleHidden, defineExposed } = useField(__props.widget);
+		const isCollapsePaneWidget = (child) => {
+			return child.type === WidgetType.CollapsePane;
+		};
+		const paneItems = computed(() => {
+			var _props$widget$childre;
+			return ((_props$widget$childre = __props.widget.children) !== null && _props$widget$childre !== void 0 ? _props$widget$childre : []).filter(isCollapsePaneWidget).map((child) => {
+				var _child$children, _child$headerChildren;
+				(_child$children = child.children) !== null && _child$children !== void 0 || (child.children = []);
+				(_child$headerChildren = child.headerChildren) !== null && _child$headerChildren !== void 0 || (child.headerChildren = []);
+				return child;
+			});
+		});
+		const isPaneMode = computed(() => paneItems.value.length > 0);
+		const normalizeActiveKeys = (value) => {
+			return Array.isArray(value) ? value : [value].filter(Boolean);
+		};
+		const paneActiveKeys = computed({
+			get: () => {
+				var _props$widget$props$a;
+				return (_props$widget$props$a = __props.widget.props.activeKeys) !== null && _props$widget$props$a !== void 0 ? _props$widget$props$a : [];
+			},
+			set: (value) => {
+				__props.widget.props.activeKeys = normalizeActiveKeys(value);
+			}
+		});
+		const legacyActiveKeys = computed({
+			get: () => {
+				var _props$widget$props$a2;
+				return ((_props$widget$props$a2 = __props.widget.props.activeKeys) === null || _props$widget$props$a2 === void 0 ? void 0 : _props$widget$props$a2.length) ? __props.widget.props.activeKeys : [legacyPaneKey];
+			},
+			set: (value) => {
+				__props.widget.props.activeKeys = normalizeActiveKeys(value);
+			}
+		});
+		const isActivePane = (key) => {
+			var _props$widget$props$a3;
+			return (_props$widget$props$a3 = __props.widget.props.activeKeys) === null || _props$widget$props$a3 === void 0 ? void 0 : _props$widget$props$a3.includes(key);
+		};
+		const isLegacyActive = computed(() => legacyActiveKeys.value.includes(legacyPaneKey));
 		__expose({ ...defineExposed });
 		return (_ctx, _cache) => {
-			return !unref(handleHidden) ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TpfCollapse), { title: _ctx.widget.props.label }, {
-				right: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(RenderWidgetList_default), {
-					list: _ctx.widget.headerChildren,
-					"onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.headerChildren = $event),
-					parentWidget: _ctx.widget
-				}, null, 8, ["list", "parentWidget"])])]),
-				default: withCtx(() => {
-					var _ctx$widget$style;
-					return [createElementVNode("div", {
-						class: "tpf-collapse-content-wrapper",
-						style: normalizeStyle({ height: unref(transformPx)((_ctx$widget$style = _ctx.widget.style) === null || _ctx$widget$style === void 0 ? void 0 : _ctx$widget$style.height) })
-					}, [createVNode(unref(RenderWidgetList_default), {
-						list: _ctx.widget.children,
-						"onUpdate:list": _cache[1] || (_cache[1] = ($event) => _ctx.widget.children = $event),
+			const _component_a_collapse_panel = resolveComponent("a-collapse-panel");
+			const _component_a_collapse = resolveComponent("a-collapse");
+			return !unref(handleHidden) ? (openBlock(), createElementBlock("div", _hoisted_1, [isPaneMode.value ? (openBlock(), createBlock(_component_a_collapse, {
+				key: 0,
+				activeKey: paneActiveKeys.value,
+				"onUpdate:activeKey": _cache[1] || (_cache[1] = ($event) => paneActiveKeys.value = $event),
+				class: "tpf-like-collapse",
+				accordion: _ctx.widget.props.accordion,
+				bordered: false
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(paneItems.value, (pane) => {
+					return openBlock(), createBlock(_component_a_collapse_panel, {
+						key: pane.props.key,
+						"show-arrow": false,
+						disabled: pane.props.disabled,
+						collapsible: pane.props.collapsible
+					}, {
+						header: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(pane.props.label), 1), createVNode(unref(SvgIcon), {
+							type: isActivePane(pane.props.key) ? "icon-xiangshang" : "icon-xiangxia",
+							size: 24,
+							shadow: "",
+							cursor: ""
+						}, null, 8, ["type"])])]),
+						extra: withCtx(() => [createElementVNode("div", {
+							class: "collapse-right",
+							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+						}, [createVNode(unref(RenderWidgetList_default), {
+							list: pane.headerChildren,
+							"onUpdate:list": ($event) => pane.headerChildren = $event,
+							parentWidget: _ctx.widget
+						}, null, 8, [
+							"list",
+							"onUpdate:list",
+							"parentWidget"
+						])])]),
+						default: withCtx(() => {
+							var _ctx$widget$style;
+							return [createElementVNode("div", {
+								class: "tpf-collapse-content-wrapper",
+								style: normalizeStyle({ height: unref(transformPx)((_ctx$widget$style = _ctx.widget.style) === null || _ctx$widget$style === void 0 ? void 0 : _ctx$widget$style.height) })
+							}, [createVNode(unref(RenderWidgetList_default), {
+								list: pane.children,
+								"onUpdate:list": ($event) => pane.children = $event,
+								parentWidget: _ctx.widget
+							}, null, 8, [
+								"list",
+								"onUpdate:list",
+								"parentWidget"
+							])], 4)];
+						}),
+						_: 2
+					}, 1032, ["disabled", "collapsible"]);
+				}), 128))]),
+				_: 1
+			}, 8, ["activeKey", "accordion"])) : (openBlock(), createBlock(_component_a_collapse, {
+				key: 1,
+				activeKey: legacyActiveKeys.value,
+				"onUpdate:activeKey": _cache[4] || (_cache[4] = ($event) => legacyActiveKeys.value = $event),
+				class: "tpf-like-collapse",
+				bordered: false
+			}, {
+				default: withCtx(() => [(openBlock(), createBlock(_component_a_collapse_panel, {
+					key: legacyPaneKey,
+					"show-arrow": false
+				}, {
+					header: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(_ctx.widget.props.label), 1), createVNode(unref(SvgIcon), {
+						type: isLegacyActive.value ? "icon-xiangshang" : "icon-xiangxia",
+						size: 24,
+						shadow: "",
+						cursor: ""
+					}, null, 8, ["type"])])]),
+					extra: withCtx(() => [isLegacyActive.value ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(unref(RenderWidgetList_default), {
+						list: _ctx.widget.headerChildren,
+						"onUpdate:list": _cache[2] || (_cache[2] = ($event) => _ctx.widget.headerChildren = $event),
 						parentWidget: _ctx.widget
-					}, null, 8, ["list", "parentWidget"])], 4)];
-				}),
+					}, null, 8, ["list", "parentWidget"])])) : createCommentVNode("", true)]),
+					default: withCtx(() => {
+						var _ctx$widget$style2;
+						return [createElementVNode("div", {
+							class: "tpf-collapse-content-wrapper",
+							style: normalizeStyle({ height: unref(transformPx)((_ctx$widget$style2 = _ctx.widget.style) === null || _ctx$widget$style2 === void 0 ? void 0 : _ctx$widget$style2.height) })
+						}, [createVNode(unref(RenderWidgetList_default), {
+							list: _ctx.widget.children,
+							"onUpdate:list": _cache[3] || (_cache[3] = ($event) => _ctx.widget.children = $event),
+							parentWidget: _ctx.widget
+						}, null, 8, ["list", "parentWidget"])], 4)];
+					}),
+					_: 1
+				}))]),
 				_: 1
-			}, 8, ["title"])])) : createCommentVNode("", true);
+			}, 8, ["activeKey"]))])) : createCommentVNode("", true);
 		};
 	}
 });

package/src/widgets/containers/collapse/schema.js

@@ -17,8 +17,13 @@ var Collapse = {
 		name: "",
 		label: "折叠面板",
 		hidden: false,
-		customClass: []
+		customClass: [],
+		activeKeys: [],
+		accordion: false,
+		bordered: true,
+		items: []
 	}
 };
+WidgetType.CollapsePane;
 //#endregion
 export { Collapse };

package/src/widgets/render.js

@@ -1,4 +1,5 @@
 import { getWidgetCompontent } from "../../core/src/utils/getWidgetCompontent.js";
+import { WidgetType } from "./widgetTypes.js";
 import { Input } from "./base/input/schema.js";
 import { Html } from "./base/html/schema.js";
 import { Button } from "./base/button/schema.js";
@@ -19,26 +20,6 @@ import { Slider } from "./base/slider/schema.js";
 import { StaticText } from "./base/static-text/schema.js";
 import { Divider } from "./base/divider/schema.js";
 import { Cascader } from "./base/cascader/schema.js";
-import input_default from "./base/input/index.js";
-import html_default from "./base/html/index.js";
-import button_default from "./base/button/index.js";
-import button_list_default from "./base/button-list/index.js";
-import textarea_default from "./base/textarea/index.js";
-import number_default from "./base/number/index.js";
-import radio_default from "./base/radio/index.js";
-import checkbox_default from "./base/checkbox/index.js";
-import select_default from "./base/select/index.js";
-import time_default from "./base/time/index.js";
-import time_range_default from "./base/time-range/index.js";
-import date_default from "./base/date/index.js";
-import date_range_default from "./base/date-range/index.js";
-import switch_default from "./base/switch/index.js";
-import rate_default from "./base/rate/index.js";
-import color_default from "./base/color/index.js";
-import slider_default from "./base/slider/index.js";
-import static_text_default from "./base/static-text/index.js";
-import divider_default from "./base/divider/index.js";
-import cascader_default from "./base/cascader/index.js";
 import { CodeEditor } from "./advanced/code-editor/schema.js";
 import { FileUpload } from "./advanced/file-upload/schema.js";
 import { RichEditor } from "./advanced/rich-editor/schema.js";
@@ -46,13 +27,6 @@ import { TreeSelect } from "./advanced/tree-select/schema.js";
 import { Tree } from "./advanced/tree/schema.js";
 import { DataTable } from "./advanced/data-table/schema.js";
 import { CustomRender } from "./advanced/custom-render/schema.js";
-import code_editor_default from "./advanced/code-editor/index.js";
-import file_upload_default from "./advanced/file-upload/index.js";
-import rich_editor_default from "./advanced/rich-editor/index.js";
-import tree_select_default from "./advanced/tree-select/index.js";
-import tree_default from "./advanced/tree/index.js";
-import data_table_default from "./advanced/data-table/index.js";
-import custom_render_default from "./advanced/custom-render/index.js";
 import { Grid } from "./containers/grid/schema.js";
 import { GridCol } from "./containers/grid-col/schema.js";
 import { Tab } from "./containers/tab/schema.js";
@@ -65,20 +39,8 @@ import { Space } from "./containers/space/schema.js";
 import { Flex } from "./containers/flex/schema.js";
 import { List } from "./containers/list/schema.js";
 import { SecondaryPage } from "./template/SecondaryPage/schema.js";
-import index_render_default from "./containers/grid-col/index-render.js";
-import index_render_default$1 from "./containers/grid/index-render.js";
-import index_render_default$2 from "./containers/tab/index-render.js";
-import index_render_default$3 from "./containers/tab-pane/index-render.js";
-import index_render_default$4 from "./containers/box/index-render.js";
-import index_render_default$5 from "./containers/collapse/index-render.js";
-import index_render_default$6 from "./containers/dialog/index-render.js";
-import index_render_default$7 from "./containers/form/index-render.js";
-import index_render_default$8 from "./containers/space/index-render.js";
-import index_render_default$9 from "./containers/flex/index-render.js";
-import index_render_default$10 from "./containers/list/index-render.js";
-import index_render_default$11 from "./template/SecondaryPage/index-render.js";
-//#region src/widgets/render.ts
-var renderSchemas = [
+import { defineAsyncComponent } from "vue";
+new Map([
 	Input,
 	Html,
 	Button,
@@ -118,50 +80,49 @@ var renderSchemas = [
 	Flex,
 	List,
 	SecondaryPage
-];
-var renderComponents = [
-	input_default,
-	html_default,
-	button_default,
-	button_list_default,
-	textarea_default,
-	number_default,
-	radio_default,
-	checkbox_default,
-	select_default,
-	time_default,
-	time_range_default,
-	date_default,
-	date_range_default,
-	switch_default,
-	rate_default,
-	color_default,
-	slider_default,
-	static_text_default,
-	divider_default,
-	cascader_default,
-	code_editor_default,
-	file_upload_default,
-	rich_editor_default,
-	tree_select_default,
-	tree_default,
-	data_table_default,
-	custom_render_default,
-	index_render_default$1,
-	index_render_default,
-	index_render_default$2,
-	index_render_default$3,
-	index_render_default$4,
-	index_render_default$5,
-	index_render_default$6,
-	index_render_default$7,
-	index_render_default$8,
-	index_render_default$9,
-	index_render_default$10,
-	index_render_default$11
-];
-new Map(renderSchemas.map((schema) => [schema.type, schema]));
-var renderRegistryComponents = new Map(renderComponents.map((component) => [component.name, component]));
+].map((schema) => [schema.type, schema]));
+var lazyWidget = (loader) => defineAsyncComponent(loader);
+var renderRegistryComponents = new Map([
+	[WidgetType.Input, lazyWidget(() => import("./base/input/index.js"))],
+	[WidgetType.Html, lazyWidget(() => import("./base/html/index.js"))],
+	[WidgetType.Button, lazyWidget(() => import("./base/button/index.js"))],
+	[WidgetType.ButtonList, lazyWidget(() => import("./base/button-list/index.js"))],
+	[WidgetType.Textarea, lazyWidget(() => import("./base/textarea/index.js"))],
+	[WidgetType.Number, lazyWidget(() => import("./base/number/index.js"))],
+	[WidgetType.Radio, lazyWidget(() => import("./base/radio/index.js"))],
+	[WidgetType.Checkbox, lazyWidget(() => import("./base/checkbox/index.js"))],
+	[WidgetType.Select, lazyWidget(() => import("./base/select/index.js"))],
+	[WidgetType.Time, lazyWidget(() => import("./base/time/index.js"))],
+	[WidgetType.TimeRange, lazyWidget(() => import("./base/time-range/index.js"))],
+	[WidgetType.Date, lazyWidget(() => import("./base/date/index.js"))],
+	[WidgetType.DateRange, lazyWidget(() => import("./base/date-range/index.js"))],
+	[WidgetType.Switch, lazyWidget(() => import("./base/switch/index.js"))],
+	[WidgetType.Rate, lazyWidget(() => import("./base/rate/index.js"))],
+	[WidgetType.Color, lazyWidget(() => import("./base/color/index.js"))],
+	[WidgetType.Slider, lazyWidget(() => import("./base/slider/index.js"))],
+	[WidgetType.StaticText, lazyWidget(() => import("./base/static-text/index.js"))],
+	[WidgetType.Divider, lazyWidget(() => import("./base/divider/index.js"))],
+	[WidgetType.Cascader, lazyWidget(() => import("./base/cascader/index.js"))],
+	[WidgetType.CodeEditor, lazyWidget(() => import("./advanced/code-editor/index.js"))],
+	[WidgetType.FileUpload, lazyWidget(() => import("./advanced/file-upload/index.js"))],
+	[WidgetType.RichEditor, lazyWidget(() => import("./advanced/rich-editor/index.js"))],
+	[WidgetType.TreeSelect, lazyWidget(() => import("./advanced/tree-select/index.js"))],
+	[WidgetType.Tree, lazyWidget(() => import("./advanced/tree/index.js"))],
+	[WidgetType.DataTable, lazyWidget(() => import("./advanced/data-table/index.js"))],
+	[WidgetType.CustomRender, lazyWidget(() => import("./advanced/custom-render/index.js"))],
+	[WidgetType.Grid, lazyWidget(() => import("./containers/grid/index-render.js"))],
+	[WidgetType.GridCol, lazyWidget(() => import("./containers/grid-col/index-render.js"))],
+	[WidgetType.Tab, lazyWidget(() => import("./containers/tab/index-render.js"))],
+	[WidgetType.TabPane, lazyWidget(() => import("./containers/tab-pane/index-render.js"))],
+	[WidgetType.Box, lazyWidget(() => import("./containers/box/index-render.js"))],
+	[WidgetType.Collapse, lazyWidget(() => import("./containers/collapse/index-render.js"))],
+	[WidgetType.Dialog, lazyWidget(() => import("./containers/dialog/index-render.js"))],
+	[WidgetType.Form, lazyWidget(() => import("./containers/form/index-render.js"))],
+	[WidgetType.Space, lazyWidget(() => import("./containers/space/index-render.js"))],
+	[WidgetType.Flex, lazyWidget(() => import("./containers/flex/index-render.js"))],
+	[WidgetType.List, lazyWidget(() => import("./containers/list/index-render.js"))],
+	[WidgetType.SecondaryPage, lazyWidget(() => import("./template/SecondaryPage/index-render.js"))]
+]);
 var getRenderWidget = (widget) => {
 	return getWidgetCompontent(widget, renderRegistryComponents, false);
 };

package/src/widgets/widgetTypes.js

@@ -37,6 +37,7 @@ var WidgetType = /* @__PURE__ */ function(WidgetType) {
 	WidgetType["TabPane"] = "tab-pane";
 	WidgetType["Box"] = "box";
 	WidgetType["Collapse"] = "collapse";
+	WidgetType["CollapsePane"] = "collapse-pane";
 	WidgetType["Dialog"] = "dialog";
 	WidgetType["GridSubForm"] = "grid-sub-form";
 	WidgetType["Space"] = "space";