@gct-paas/design 0.1.5-test.2 → 0.1.6-dev.1

package/es/components/material/material-outline-tree/material-outline-tree.mjs

@@ -0,0 +1,67 @@
+import { MaterialRegister } from "../../../register/material/material.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './material-outline-tree.css';/* empty css                            */
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, resolveComponent, watch } from "vue";
+//#region src/components/material/material-outline-tree/material-outline-tree.tsx
+var MaterialOutlineTree = /* @__PURE__ */ defineComponent({
+	name: "MaterialOutlineTree",
+	setup() {
+		const ns = useNamespace("material-outline-tree");
+		const treeRef = ref();
+		const selectedKeys = ref([]);
+		const c = useDesignViewController();
+		watch(() => c.store.selected, () => {
+			if (c.store.selected) selectedKeys.value = [c.store.selected.id];
+			else selectedKeys.value = [];
+		});
+		watch(selectedKeys, () => {
+			const val = selectedKeys.value[0];
+			if (val) {
+				const node = c.store.getNode(val);
+				if (node && node.id !== c.store.selected?.id) c.store.setActive(node);
+			} else c.store.setActive(null);
+		});
+		const calcDeepTree = (items) => {
+			const arr = [];
+			items.forEach((_) => {
+				const p = MaterialRegister.getMaterial(_.type, c.store.prefix);
+				const node = {
+					key: _.id,
+					title: _.label,
+					icon: p && p.icon ? createVNode("i", { "class": `iconfont ${p.icon}` }, null) : "",
+					children: []
+				};
+				const children = c.store.getChildren(_.id);
+				if (children && children.length > 0) node.children = calcDeepTree(children);
+				arr.push(node);
+			});
+			return arr;
+		};
+		return {
+			ns,
+			treeRef,
+			selectedKeys,
+			treeData: computed(() => {
+				return calcDeepTree(c.store.getChildren());
+			})
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode(resolveComponent("a-tree"), {
+			"ref": "treeRef",
+			"class": this.ns.e("tree"),
+			"selectedKeys": this.selectedKeys,
+			"onUpdate:selectedKeys": ($event) => this.selectedKeys = $event,
+			"treeData": this.treeData,
+			"blockNode": true,
+			"show-icon": true,
+			"autoExpandParent": true,
+			"default-expand-all": true
+		}, null)]);
+	}
+});
+//#endregion
+export { MaterialOutlineTree };

package/es/components/material/material-tab-pane/material-tab-pane.css

@@ -0,0 +1,68 @@
+@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-material-tab-pane {
+  height: 100%;
+  overflow: hidden auto;
+}

package/es/components/material/material-tab-pane/material-tab-pane.d.ts

@@ -0,0 +1,13 @@
+export declare const MaterialTabPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-tab-pane/material-tab-pane.mjs

@@ -0,0 +1,19 @@
+import './material-tab-pane.css';/* empty css                        */
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent } from "vue";
+//#region src/components/material/material-tab-pane/material-tab-pane.tsx
+var MaterialTabPane = /* @__PURE__ */ defineComponent({
+	name: "MaterialTabPane",
+	props: { tabTag: {
+		type: String,
+		required: true
+	} },
+	setup() {
+		return { ns: useNamespace("material-tab-pane") };
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [this.$slots.default?.()]);
+	}
+});
+//#endregion
+export { MaterialTabPane };

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

@@ -0,0 +1,105 @@
+@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-material-tabs {
+  display: flex;
+  height: 100%;
+}
+.gct-material-tabs__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 74px;
+  color: #5D6474;
+  cursor: pointer;
+}
+.gct-material-tabs__item.is-active {
+  color: #000;
+  background-color: #cdd1d6;
+}
+
+.gct-material-tabs__item-icon {
+  height: 28px;
+}
+.gct-material-tabs__item-icon .iconfont {
+  font-size: 22px;
+}
+
+.gct-material-tabs__item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.gct-material-tabs-left {
+  flex-shrink: 0;
+  width: 48px;
+  background-color: #E6E9EF;
+  border: 2px solid #E0E3EA;
+  border-radius: 0;
+}
+
+.gct-material-tabs-right {
+  flex-grow: 1;
+}

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 };