@gct-paas/design 0.1.5-dev.6 → 0.1.5-dev.8

package/es/components/material/material-tabs/material-tabs.d.ts

@@ -0,0 +1,103 @@
+export declare const MaterialTabs: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    onChange: (e: MouseEvent, tag: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:active")[], "change" | "update:active", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-tabs/material-tabs.mjs

@@ -0,0 +1,44 @@
+import './material-tabs.css';/* empty css                    */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent } from "vue";
+//#region src/components/material/material-tabs/material-tabs.tsx
+var MaterialTabs = /* @__PURE__ */ defineComponent({
+	name: "MaterialTabs",
+	props: {
+		tabs: {
+			type: Array,
+			required: true
+		},
+		active: {
+			type: String,
+			required: true
+		}
+	},
+	emits: ["update:active", "change"],
+	setup(_props, { emit }) {
+		const ns = useNamespace("material-tabs");
+		const onChange = (e, tag) => {
+			e.stopPropagation();
+			emit("update:active", tag);
+			emit("change", tag);
+		};
+		return {
+			ns,
+			onChange
+		};
+	},
+	render() {
+		const slots = this.$slots.default ? this.$slots.default() : [];
+		return createVNode("div", { "class": this.ns.b() }, [createVNode("div", { "class": this.ns.b("left") }, [this.tabs.map((tab) => createVNode("div", {
+			"class": [this.ns.e("item"), this.ns.is("active", tab.id === this.active)],
+			"onClick": (e) => this.onChange(e, tab.id)
+		}, [createVNode("div", { "class": this.ns.e("item-icon") }, [createVNode("i", { "class": `iconfont ${tab.icon}` }, null)]), createVNode("div", { "class": this.ns.e("item-label") }, [tab.label])]))]), createVNode("div", { "class": this.ns.b("right") }, [slots.map((slot) => {
+			const { props } = slot;
+			if (props) if (props.tabTag === this.active) props.style = { display: "block" };
+			else props.style = { display: "none" };
+			return slot;
+		})])]);
+	}
+});
+//#endregion
+export { MaterialTabs };

package/es/components/modal-name-editor/modal-name-editor.d.ts

@@ -11,17 +11,7 @@ export declare const ModalNameEditor: import('vue').DefineComponent<import('vue'
         type: NumberConstructor;
         default: number;
     };
-}>, {
-    ns: import('@gct-paas/core').Namespace;
-    isEdit: import('vue').Ref<boolean, boolean>;
-    isError: import('vue').ComputedRef<boolean>;
-    isSaving: import('vue').Ref<boolean, boolean>;
-    val: import('vue').WritableComputedRef<string, string>;
-    nameInputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
-    onEditName: () => void;
-    onBlurOrEnter: () => void;
-    onChange: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:value")[], "change" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:value")[], "change" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: string;

package/es/components/modal-name-editor/modal-name-editor.mjs

@@ -90,45 +90,34 @@ var ModalNameEditor = /* @__PURE__ */ defineComponent({
 		const onChange = () => {
 			emit("change");
 		};
-		return {
-			ns,
-			isEdit,
-			isError,
-			isSaving,
-			val,
-			nameInputRef,
-			onEditName,
-			onBlurOrEnter,
-			onChange
+		return () => {
+			return createVNode("div", { "class": ns.b() }, [
+				createVNode("div", {
+					"class": [ns.e("name"), ns.is("hidden", isEdit.value)],
+					"title": val.value,
+					"onDblclick": onEditName
+				}, [val.value]),
+				createVNode("div", { "class": [ns.e("input"), ns.is("hidden", !isEdit.value)] }, [
+					isSaving.value ? createVNode(resolveComponent("loading-outlined"), null, null) : null,
+					createVNode(resolveComponent("a-input"), {
+						"value": val.value,
+						"onUpdate:value": ($event) => val.value = $event,
+						"ref": nameInputRef,
+						"size": "small",
+						"bordered": false,
+						"onBlur": onBlurOrEnter,
+						"onPressEnter": onBlurOrEnter,
+						"disabled": isSaving.value,
+						"onChange": onChange
+					}, null),
+					createVNode("div", { "class": [ns.e("error-info"), ns.is("hidden", !isError.value)] }, [`最大${props.max}字`])
+				]),
+				createVNode("div", {
+					"class": [ns.e("edit"), ns.is("hidden", isEdit.value)],
+					"onClick": onEditName
+				}, [createVNode("i", { "class": "iconfont icon-bianji" }, null)])
+			]);
 		};
-	},
-	render() {
-		return createVNode("div", { "class": this.ns.b() }, [
-			createVNode("div", {
-				"class": [this.ns.e("name"), this.ns.is("hidden", this.isEdit)],
-				"title": this.val,
-				"onDblclick": this.onEditName
-			}, [this.val]),
-			createVNode("div", { "class": [this.ns.e("input"), this.ns.is("hidden", !this.isEdit)] }, [
-				this.isSaving ? createVNode(resolveComponent("loading-outlined"), null, null) : null,
-				createVNode(resolveComponent("a-input"), {
-					"value": this.val,
-					"onUpdate:value": ($event) => this.val = $event,
-					"ref": "nameInputRef",
-					"size": "small",
-					"bordered": false,
-					"onBlur": this.onBlurOrEnter,
-					"onPressEnter": this.onBlurOrEnter,
-					"disabled": this.isSaving,
-					"onChange": this.onChange
-				}, null),
-				createVNode("div", { "class": [this.ns.e("error-info"), this.ns.is("hidden", !this.isError)] }, [`最大${this.max}字`])
-			]),
-			createVNode("div", {
-				"class": [this.ns.e("edit"), this.ns.is("hidden", this.isEdit)],
-				"onClick": this.onEditName
-			}, [createVNode("i", { "class": "iconfont icon-bianji" }, null)])
-		]);
 	}
 });
 //#endregion

package/es/components/multi-field/index.d.ts

@@ -0,0 +1,2 @@
+import { default as MultiFieldDisplay } from './multi-field-display.vue';
+export { MultiFieldDisplay };

package/es/components/multi-field/index.mjs

@@ -0,0 +1 @@
+import "./multi-field-display.vue.mjs";

package/es/components/multi-field/multi-field-display.vue.d.ts

@@ -0,0 +1,8 @@
+import { IBasicSchema } from '@gct-paas/schema';
+type __VLS_Props = {
+    widget: IBasicSchema;
+    rowReadonly?: boolean;
+    isDesign?: boolean;
+};
+declare const _default: 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>;
+export default _default;

package/es/components/multi-field/multi-field-display.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import multi_field_display_vue_vue_type_script_setup_true_lang_default from "./multi-field-display.vue_vue_type_script_setup_true_lang.mjs";
+import './multi-field-display.vue_vue_type_style_index_0_scoped_802ade7b_lang.css';/* empty css                                                                          */
+//#region src/components/multi-field/multi-field-display.vue
+var multi_field_display_default = /* @__PURE__ */ _plugin_vue_export_helper_default(multi_field_display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-802ade7b"]]);
+//#endregion
+export { multi_field_display_default as default };

package/es/components/multi-field/multi-field-display.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,32 @@
+import multi_field_item_default from "./multi-field-item.vue.mjs";
+import { MaterialEnum } from "@gct-paas/core";
+import { Fragment, computed, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, renderList } from "vue";
+//#region src/components/multi-field/multi-field-display.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex tag-area"
+};
+var multi_field_display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "multi-field-display",
+	props: {
+		widget: {},
+		rowReadonly: { type: Boolean },
+		isDesign: { type: Boolean }
+	},
+	setup(__props) {
+		const defProps = __props;
+		const showTag = computed(() => {
+			return defProps.rowReadonly && defProps.widget.materialType === MaterialEnum.MaterialTableField && defProps.widget.props.multiFieldDisplay;
+		});
+		return (_ctx, _cache) => {
+			return showTag.value ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(defProps.widget.props.multiFieldConfig, (item, idx) => {
+				return openBlock(), createElementBlock("div", { key: idx }, [createVNode(multi_field_item_default, {
+					config: item,
+					"is-design": defProps.isDesign
+				}, null, 8, ["config", "is-design"])]);
+			}), 128))])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { multi_field_display_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/multi-field/multi-field-display.vue_vue_type_style_index_0_scoped_802ade7b_lang.css

@@ -0,0 +1,4 @@
+.tag-area[data-v-802ade7b] {
+  flex-wrap: nowrap;
+  width: auto;
+}

package/es/components/multi-field/multi-field-item.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    config: IObject;
+    isDesign: boolean;
+};
+declare const _default: 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>;
+export default _default;

package/es/components/multi-field/multi-field-item.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import multi_field_item_vue_vue_type_script_setup_true_lang_default from "./multi-field-item.vue_vue_type_script_setup_true_lang.mjs";
+import './multi-field-item.vue_vue_type_style_index_0_scoped_881cb08e_lang.css';/* empty css                                                                       */
+//#region src/components/multi-field/multi-field-item.vue
+var multi_field_item_default = /* @__PURE__ */ _plugin_vue_export_helper_default(multi_field_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-881cb08e"]]);
+//#endregion
+export { multi_field_item_default as default };

package/es/components/multi-field/multi-field-item.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,47 @@
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, toDisplayString } from "vue";
+import { colord } from "colord";
+//#region src/components/multi-field/multi-field-item.vue?vue&type=script&setup=true&lang.ts
+var multi_field_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "multi-field-item",
+	props: {
+		config: {},
+		isDesign: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const runName = ref();
+		const name = computed(() => {
+			if (!props.config?.event?.name) return "";
+			if (props.isDesign) return "辅助字段";
+			return runName.value;
+		});
+		const style = computed(() => {
+			if (props.config.style.labelType.includes("surface_")) return {
+				background: props.config.style.color,
+				color: "#fff"
+			};
+			if (props.config.style.labelType.includes("line_dashed_")) return {
+				border: `1px dashed ${colord(props.config.style.color).alpha(.5).toRgbString()}`,
+				color: props.config.style.color
+			};
+			if (props.config.style.labelType.includes("line_")) return {
+				border: `1px solid ${colord(props.config.style.color).alpha(.5).toRgbString()}`,
+				color: props.config.style.color
+			};
+			return {
+				background: colord(props.config.style.color).alpha(.1).toRgbString(),
+				color: props.config.style.color,
+				border: `1px solid ${colord(props.config.style.color).alpha(.5).toRgbString()}`
+			};
+		});
+		return (_ctx, _cache) => {
+			return name.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["tag", props.config.style.labelType]),
+				style: normalizeStyle(style.value)
+			}, toDisplayString(name.value), 7)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { multi_field_item_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/multi-field/multi-field-item.vue_vue_type_style_index_0_scoped_881cb08e_lang.css

@@ -0,0 +1,31 @@
+.tag[data-v-881cb08e] {
+  display: flex;
+  align-items: center;
+  height: 22px;
+  margin-left: 8px;
+  font-size: 12px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+.radius[data-v-881cb08e],
+.surface_radius[data-v-881cb08e],
+.line_radius[data-v-881cb08e],
+.line_dashed_radius[data-v-881cb08e] {
+  padding-right: 6px;
+  padding-left: 6px;
+  border-radius: 3px;
+}
+.big_radius[data-v-881cb08e],
+.surface_big_radius[data-v-881cb08e],
+.line_big_radius[data-v-881cb08e] {
+  padding-right: 8px;
+  padding-left: 8px;
+  border-radius: 50px;
+}
+.line_status[data-v-881cb08e],
+.surface_status[data-v-881cb08e],
+.status[data-v-881cb08e] {
+  padding-right: 8px;
+  padding-left: 8px;
+  border-radius: 11px 3px 3px;
+}

package/es/components/panel/index.d.ts

@@ -0,0 +1 @@
+export { PanelContent } from './panel-content/panel-content';

package/es/components/panel/index.mjs

@@ -0,0 +1 @@
+import "./panel-content/panel-content.mjs";

package/es/components/panel/panel-content/panel-content.css

@@ -0,0 +1,189 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-panel-content {
+  height: 100%;
+  overflow: hidden auto;
+  background-color: #FFF;
+  border-left: 1px solid #e0e3ea;
+  --gct-form-item-label-color: #242424;
+}
+.gct-panel-content .gct-form-item .ant-form-item-label {
+  --gct-form-item-label-align: left;
+}
+.gct-panel-content .gct-form-item__left {
+  float: right;
+}
+.gct-panel-content .gct-form-item__label, .gct-panel-content .ant-form-item-label, .gct-panel-content .ant-checkbox-group {
+  --gct-form-item-label-font-size: 12px;
+  --gct-form-item-checkbox-width: 5px;
+  --gct-form-item-checkbox-height: 7px;
+}
+.gct-panel-content__paths {
+  height: 42px;
+}
+
+.gct-panel-content__content {
+  height: calc(100% - 42px);
+}
+
+.gct-panel-content .gct-form-collapse {
+  border-right: none;
+  border-left: none;
+}
+.gct-panel-content .gct-form-collapse:first-child {
+  border-top: none;
+}
+.gct-panel-content .gct-form-collapse.ant-collapse > .ant-collapse-item {
+  border-bottom-width: 0;
+}
+.gct-panel-content .ant-input,
+.gct-panel-content .ant-select {
+  color: #666;
+}
+.gct-panel-content .ant-input-show-count-suffix {
+  color: #c3c3c3;
+}
+.gct-panel-content .ant-input-affix-wrapper-sm {
+  padding: 2px 7px;
+}
+.gct-panel-content .ant-input-number-sm input {
+  height: 26px;
+}
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
+  height: 28px;
+}
+.gct-panel-content .ant-select-multiple.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
+  min-height: 28px;
+}
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector::after {
+  line-height: 26px;
+}
+.gct-panel-content {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.gct-panel-content .ant-select-multiple.ant-select-sm .ant-select-selection-item {
+  height: 20px;
+  line-height: 17px;
+}
+.gct-panel-content {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.gct-panel-content .ant-select-selection-placeholder,
+.gct-panel-content .ant-input::placeholder {
+  color: #c3c3c3;
+}
+.gct-panel-content .ant-form .ant-form-item {
+  margin-bottom: 8px;
+}
+.gct-panel-content .in-row-no-bottom {
+  margin-bottom: 0 !important;
+}
+.gct-panel-content .ant-form-vertical .ant-form-item-label {
+  padding-bottom: 2px;
+}
+.gct-panel-content .ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  right: 12px;
+}
+.gct-panel-content .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding: 0;
+}
+.gct-panel-content .ant-collapse,
+.gct-panel-content .ant-input,
+.gct-panel-content .ant-collapse-header,
+.gct-panel-content .ant-btn,
+.gct-panel-content .ant-select,
+.gct-panel-content .ant-form .ant-form-item,
+.gct-panel-content .ant-breadcrumb {
+  font-size: 12px;
+}
+.gct-panel-content span.ant-radio + * {
+  padding-right: 8px;
+  padding-left: 6px;
+}
+.gct-panel-content .ant-radio-inner {
+  width: 12px;
+  height: 12px;
+}
+.gct-panel-content .ant-input-number,
+.gct-panel-content .ant-input-number-group-addon {
+  font-size: 12px;
+}
+.gct-panel-content .style-pane .ant-form-item {
+  min-height: 28px;
+  margin-bottom: 8px;
+}
+.gct-panel-content .suffix-number-input .ant-input-number-group > .ant-input-number:first-child {
+  border-radius: 2px;
+}
+.gct-panel-content .suffix-number-input .ant-input-number-group-addon {
+  padding: 0 16px 0 8px;
+  background-color: transparent;
+  border: 0;
+}
+.gct-panel-content {
+  --gct-form-item-label-color: #242424;
+}

package/es/components/panel/panel-content/panel-content.d.ts

@@ -0,0 +1,19 @@
+import { PropType } from 'vue';
+import { IEditForm } from '@gct-paas/core-web';
+export declare const PanelContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../../..').IDesignViewController;
+    formModel: import('vue').ComputedRef<IEditForm | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/panel/panel-content/panel-content.mjs

@@ -0,0 +1,48 @@
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import { PanelPath } from "../panel-path/panel-path.mjs";
+import { PanelForm } from "../panel-form/panel-form.mjs";
+import './panel-content.css';/* empty css                    */
+import { isFunction } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent } from "vue";
+//#region src/components/panel/panel-content/panel-content.tsx
+var PanelContent = /* @__PURE__ */ defineComponent({
+	name: "PanelContent",
+	props: { context: {
+		type: Object,
+		default: () => {
+			return {};
+		}
+	} },
+	setup(props) {
+		const ns = useNamespace("panel-content");
+		const c = useDesignViewController();
+		return {
+			ns,
+			c,
+			formModel: computed(() => {
+				if (c.store.selected) {
+					const p = NodeRegister.get(c.store.selected.type, c.store.prefix);
+					if (p) {
+						if (isFunction(p.model)) return p.model(props.context, c.store.selected);
+						return p.model;
+					}
+				}
+				return null;
+			})
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode("div", { "class": this.ns.e("paths") }, [createVNode(PanelPath, null, null)]), createVNode("div", { "class": this.ns.e("content") }, [this.c.store.selected && this.formModel ? createVNode(PanelForm, {
+			"key": this.c.store.selected.id,
+			"model": this.formModel,
+			"node": this.c.store.selected,
+			"context": this.context
+		}, null) : null])]);
+	}
+});
+//#endregion
+export { PanelContent };