@gct-paas/core-web 0.1.6-dev.9 → 6.0.0-dev.1

package/es/components/label-design/stage/stage-canvas.vue_vue_type_script_setup_true_lang.mjs

@@ -9,7 +9,11 @@ import { cloneDeep } from "lodash-es";
 var stage_canvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "stage-canvas",
 	props: { schema: {} },
-	emits: ["movingItem", "updatePBarcodeWidth"],
+	emits: [
+		"movingItem",
+		"updatePBarcodeWidth",
+		"updatePQrCodeWidthAndHeight"
+	],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const defProps = __props;
@@ -18,7 +22,7 @@ var stage_canvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			style: "solid",
 			color: "#f1867f"
 		};
-		const { selectedElements, snapTracking, selectedPage, zoom, moveElement, rebaseSelectedElements, resizeElement, rotateElement, addSelectedElements, clearSelectedElements, removeElement, registerElement, resizeBarcodeWidth, isModal } = useDesigner();
+		const { selectedElements, snapTracking, selectedPage, zoom, moveElement, rebaseSelectedElements, resizeElement, rotateElement, addSelectedElements, clearSelectedElements, removeElement, registerElement, resizeBarcodeWidth, resizeQrCodeWidthAndHeight, isModal } = useDesigner();
 		const { project } = usePage();
 		const mrContainerRef = ref();
 		const dropContainer = ref();
@@ -240,6 +244,25 @@ var stage_canvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			});
 			rebaseSelectedElements();
 		};
+		const updatePQrCodeWidthAndHeight = ({ width, rotateWidth, height, rotateHeight, elId }) => {
+			resizeQrCodeWidthAndHeight({
+				width,
+				rotateWidth,
+				height,
+				rotateHeight,
+				elId,
+				pageId: project.value.id
+			});
+			emit("updatePQrCodeWidthAndHeight", {
+				width,
+				rotateWidth,
+				height,
+				rotateHeight,
+				elId,
+				pageId: project.value.id
+			});
+			rebaseSelectedElements();
+		};
 		function movingItem(x, y, w, h) {
 			emit("movingItem", x, y, w, h);
 		}
@@ -274,7 +297,8 @@ var stage_canvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					return openBlock(), createBlock(StageEl_default, {
 						key: element.id,
 						elem: element,
-						onUpdatePBarcodeWidth: updatePBarcodeWidth
+						onUpdatePBarcodeWidth: updatePBarcodeWidth,
+						onUpdatePQrCodeWidthAndHeight: updatePQrCodeWidthAndHeight
 					}, null, 8, ["elem"]);
 				}), 128))]),
 				_: 1

package/es/components/label-design/toolkits/toolkit-widgets.vue.mjs

@@ -1,7 +1,7 @@
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
 import toolkit_widgets_vue_vue_type_script_setup_true_name_toolkit_widgets_lang_default from "./toolkit-widgets.vue_vue_type_script_setup_true_name_toolkit-widgets_lang.mjs";
-import './toolkit-widgets.vue_vue_type_style_index_0_scoped_a787d212_lang.css';/* empty css                                                                      */
+import './toolkit-widgets.vue_vue_type_style_index_0_scoped_c0634baf_lang.css';/* empty css                                                                      */
 //#region src/components/label-design/toolkits/toolkit-widgets.vue
-var toolkit_widgets_default = /* @__PURE__ */ _plugin_vue_export_helper_default(toolkit_widgets_vue_vue_type_script_setup_true_name_toolkit_widgets_lang_default, [["__scopeId", "data-v-a787d212"]]);
+var toolkit_widgets_default = /* @__PURE__ */ _plugin_vue_export_helper_default(toolkit_widgets_vue_vue_type_script_setup_true_name_toolkit_widgets_lang_default, [["__scopeId", "data-v-c0634baf"]]);
 //#endregion
 export { toolkit_widgets_default as default };

package/es/components/label-design/toolkits/toolkit-widgets.vue_vue_type_script_setup_true_name_toolkit-widgets_lang.mjs

@@ -2,6 +2,7 @@ import symbolElements from "../constants/CommonPrintElems.mjs";
 import { usePage } from "../hooks/usePage.mjs";
 import { useDesigner } from "../hooks/useDesigner.mjs";
 import { Fragment, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+import { t } from "@gct-paas/core";
 //#region src/components/label-design/toolkits/toolkit-widgets.vue?vue&type=script&setup=true&name=toolkit-widgets&lang.ts
 var _hoisted_1 = { class: "element-menu-wrapper" };
 var _hoisted_2 = { class: "title py8px" };
@@ -42,15 +43,15 @@ var toolkit_widgets_vue_vue_type_script_setup_true_name_toolkit_widgets_lang_def
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(symbolElements), (category) => {
-				return openBlock(), createElementBlock("div", { key: category.label }, [createElementVNode("div", _hoisted_2, toDisplayString(category.label), 1), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(category.children, (element) => {
+				return openBlock(), createElementBlock("div", { key: category.label }, [createElementVNode("div", _hoisted_2, toDisplayString(unref(t)(category.label)), 1), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(category.children, (element) => {
 					return openBlock(), createElementBlock("div", {
 						key: element.type,
 						class: "comp-menu__el-wrap",
-						title: element.displayName,
+						title: unref(t)(element.displayName),
 						draggable: "true",
 						onDragstart: (e) => dragstartHandler(e, element),
 						onClick: (e) => addItemToStage(e, element)
-					}, [createElementVNode("div", _hoisted_5, [createElementVNode("i", { class: normalizeClass(["iconfont", "icon-" + element.iconName]) }, null, 2), createElementVNode("span", null, toDisplayString(element.displayName), 1)])], 40, _hoisted_4);
+					}, [createElementVNode("div", _hoisted_5, [createElementVNode("i", { class: normalizeClass(["iconfont", "icon-" + element.iconName]) }, null, 2), createElementVNode("span", null, toDisplayString(unref(t)(element.displayName)), 1)])], 40, _hoisted_4);
 				}), 128))])]);
 			}), 128))]);
 		};

package/es/components/label-design/toolkits/{toolkit-widgets.vue_vue_type_style_index_0_scoped_a787d212_lang.css → toolkit-widgets.vue_vue_type_style_index_0_scoped_c0634baf_lang.css}

@@ -1,4 +1,4 @@
-.element-menu-wrapper[data-v-a787d212] {
+.element-menu-wrapper[data-v-c0634baf] {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -6,14 +6,14 @@
   overflow-y: auto;
   padding: 10px 11px;
 }
-.element-menu-wrapper .comp-menu[data-v-a787d212] {
+.element-menu-wrapper .comp-menu[data-v-c0634baf] {
   width: 100%;
   height: 100%;
   display: flex;
   flex-flow: wrap;
   gap: 12px;
 }
-.element-menu-wrapper .comp-menu__el-wrap[data-v-a787d212] {
+.element-menu-wrapper .comp-menu__el-wrap[data-v-c0634baf] {
   border: 1px solid #f1f1f1;
   box-sizing: border-box;
   background-color: transparent;
@@ -24,22 +24,22 @@
   background: #fff;
   border-radius: 4px;
 }
-.element-menu-wrapper .comp-menu__el-wrap i[data-v-a787d212] {
+.element-menu-wrapper .comp-menu__el-wrap i[data-v-c0634baf] {
   font-size: 30px;
 }
-.element-menu-wrapper .comp-menu__el-wrap[data-v-a787d212]:hover {
+.element-menu-wrapper .comp-menu__el-wrap[data-v-c0634baf]:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
-.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el[data-v-a787d212] {
+.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el[data-v-c0634baf] {
   width: 100%;
   height: 100%;
   cursor: pointer;
   text-align: center;
 }
-.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el .iconfont[data-v-a787d212] {
+.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el .iconfont[data-v-c0634baf] {
   color: #797a7d;
 }
-.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el span[data-v-a787d212] {
+.element-menu-wrapper .comp-menu__el-wrap .comp-menu__el span[data-v-c0634baf] {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -47,6 +47,6 @@
   padding: 0 8px;
   color: #212528;
 }
-.title[data-v-a787d212] {
+.title[data-v-c0634baf] {
   line-height: 18px;
 }

package/es/components/label-design/type/index.d.ts

@@ -0,0 +1,15 @@
+export type ButtonType = 'primary' | 'default' | 'ghost' | 'dashed' | 'link' | 'text' | 'error';
+export declare enum ButtonTextEnum {
+    DETAIL = "viewDetails",
+    PREVIEW = "preview",
+    DELETE = "delete",
+    EDIT = "edit",
+    DESIGN = "design"
+}
+export interface ActionsType {
+    type?: ButtonType;
+    text: ButtonTextEnum;
+    icon: string;
+    ghost?: boolean;
+    danger?: boolean;
+}

package/es/components/label-design/type/index.mjs

@@ -0,0 +1,11 @@
+//#region src/components/label-design/type/index.ts
+var ButtonTextEnum = /* @__PURE__ */ function(ButtonTextEnum) {
+	ButtonTextEnum["DETAIL"] = "viewDetails";
+	ButtonTextEnum["PREVIEW"] = "preview";
+	ButtonTextEnum["DELETE"] = "delete";
+	ButtonTextEnum["EDIT"] = "edit";
+	ButtonTextEnum["DESIGN"] = "design";
+	return ButtonTextEnum;
+}({});
+//#endregion
+export { ButtonTextEnum };

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

@@ -0,0 +1,117 @@
+@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-modal-name-editor__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.gct-modal-name-editor.is-edit {
+  cursor: default;
+}
+
+.gct-modal-name-editor__input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.gct-modal-name-editor__input .anticon-loading {
+  margin-right: var(--gct-spacing-4);
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm {
+  padding: 0;
+  color: rgb(var(--gct-color-text-1));
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm.ant-input-disabled {
+  background-color: transparent;
+}
+.gct-modal-name-editor__input .ant-input[disabled] {
+  color: rgb(var(--gct-color-text-1));
+}
+
+.gct-modal-name-editor__error-info {
+  font-size: 12px;
+  line-height: 16px;
+  position: absolute;
+  top: 24px;
+  z-index: 999;
+  padding: var(--gct-padding-2);
+  color: var(--gct-color-danger-hover);
+  background-color: var(--gct-color-danger-light-hover);
+  border-radius: var(--gct-border-radius-s);
+}
+
+.gct-modal-name-editor__edit {
+  margin-left: var(--gct-spacing-4);
+  color: rgb(var(--gct-colo-text-1));
+}
+
+.gct-modal-name-editor {
+  display: flex;
+  align-items: center;
+  height: 22px;
+  cursor: pointer;
+}

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

@@ -0,0 +1,43 @@
+import { PropType } from 'vue';
+export declare const ModalNameEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    save: {
+        type: PropType<(name: string) => Promise<void>>;
+        required: false;
+    };
+}>, () => 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;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    save: {
+        type: PropType<(name: string) => Promise<void>>;
+        required: false;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    defaultName: string;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,141 @@
+import './modal-name-editor.css';/* empty css                        */
+import { computed, createVNode, defineComponent, nextTick, ref, resolveComponent, watch } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { onClickOutside } from "@vueuse/core";
+//#region src/components/modal-name-editor/modal-name-editor.tsx
+var ModalNameEditor = /* @__PURE__ */ defineComponent({
+	name: "ModalNameEditor",
+	props: {
+		value: {
+			type: String,
+			default: "未命名"
+		},
+		defaultName: {
+			type: String,
+			default: "未命名名称"
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		save: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: ["update:value", "change"],
+	setup(props, { emit, expose }) {
+		const ns = useNamespace("modal-name-editor");
+		const isEdit = ref(false);
+		const nameInputRef = ref();
+		const name = ref(props.value);
+		const displayName = computed(() => {
+			return name.value || props.defaultName;
+		});
+		const isError = computed(() => {
+			if (displayName.value.length > props.max) return true;
+			return false;
+		});
+		watch(() => props.value, () => {
+			if (name.value !== props.value) name.value = props.value;
+		});
+		const isSaving = ref(false);
+		const hasUserModified = ref(false);
+		const editStartValue = ref("");
+		const val = computed({
+			get() {
+				if (isEdit.value && hasUserModified.value) return name.value;
+				return displayName.value;
+			},
+			set(val) {
+				hasUserModified.value = true;
+				const trimmedVal = val.trim();
+				if (name.value !== trimmedVal) {
+					name.value = trimmedVal;
+					emit("update:value", trimmedVal);
+				}
+			}
+		});
+		const onEditName = () => {
+			editStartValue.value = name.value;
+			isEdit.value = true;
+			hasUserModified.value = false;
+			nextTick(() => {
+				nameInputRef.value.focus();
+				nameInputRef.value.select();
+			});
+		};
+		const onSaveName = async () => {
+			if (hasUserModified.value && !name.value.trim() && editStartValue.value.trim()) {
+				name.value = editStartValue.value;
+				emit("update:value", editStartValue.value);
+				isEdit.value = false;
+				hasUserModified.value = false;
+				return;
+			}
+			if (name.value && name.value.trim()) {
+				isSaving.value = true;
+				try {
+					if (props.save) await props.save(name.value);
+					emit("update:value", name.value);
+				} finally {
+					isSaving.value = false;
+				}
+			}
+			isEdit.value = false;
+			hasUserModified.value = false;
+		};
+		const onBlurOrEnter = () => {
+			if (isEdit.value) {
+				if (isError.value === true) {
+					nextTick(() => {
+						nameInputRef.value.focus();
+						nameInputRef.value.select();
+					});
+					return;
+				}
+				onSaveName();
+				isEdit.value = false;
+			}
+		};
+		onClickOutside(nameInputRef, async () => {
+			onBlurOrEnter();
+		});
+		const onChange = () => {
+			emit("change");
+		};
+		expose({ validate() {
+			return !isError.value;
+		} });
+		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)])
+			]);
+		};
+	}
+});
+//#endregion
+export { ModalNameEditor };

package/es/components/model-cascader/index.d.ts

@@ -0,0 +1,34 @@
+export * from './util';
+export declare const ModelCascader: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "change"[], "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    label: string;
+    expandToLeft: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/model-cascader/index.mjs

@@ -0,0 +1,98 @@
+import { getRecursiveModelTreeData, renderColTitle, renderOptionLabel } from "./util.mjs";
+import './style.css';/* empty css            */
+import { createVNode, defineComponent, h, ref, watch } from "vue";
+import { t } from "@gct-paas/core";
+import { Cascader, Spin } from "ant-design-vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+//#region src/components/model-cascader/index.tsx
+var indicator = h(LoadingOutlined, {
+	style: { fontSize: "10px" },
+	spin: true
+});
+var ModelCascader = /* @__PURE__ */ defineComponent({
+	name: "ModelCascader",
+	props: {
+		value: {
+			type: String,
+			default: ""
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		expandToLeft: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["change"],
+	setup(props, { emit }) {
+		const visible = ref(false);
+		const isLoading = ref(false);
+		const treeOptions = ref([]);
+		const treeNameMap = ref({});
+		const selectedValue = ref([]);
+		const updateTreeData = async () => {
+			isLoading.value = true;
+			getRecursiveModelTreeData(props.value, 2).then((data) => {
+				const { value: rootValue, label: rootLabel } = props;
+				treeOptions.value = [{
+					label: rootLabel,
+					value: rootValue,
+					children: data.treeOptions
+				}];
+				treeNameMap.value = {
+					[rootValue]: rootLabel,
+					...data.treeNameMap
+				};
+			}).finally(() => {
+				isLoading.value = false;
+			});
+		};
+		watch(() => props.value, () => {
+			if (props.value.split("..")[0] !== selectedValue.value[0]) updateTreeData();
+		}, { immediate: true });
+		const renderOptions = (nodes, col) => {
+			return [col === 1 ? renderColTitle(t("sys.component.fieldTransfer.currentModel"), "current") : renderColTitle(t("sys.component.fieldTransfer.linkModel"), "link"), ...nodes.map((node) => {
+				const { value, children } = node;
+				return {
+					label: renderOptionLabel(node),
+					value,
+					isLeaf: false,
+					disabled: false,
+					children: children?.length ? renderOptions(children, col + 1) : null
+				};
+			})];
+		};
+		return () => {
+			const displayLabel = props.value.split("..").map((val) => treeNameMap.value[val]).join(" / ");
+			const isReadOnly = !treeOptions.value[0]?.children?.length;
+			return createVNode("div", null, [createVNode(Cascader, {
+				"value": selectedValue.value,
+				"onUpdate:value": ($event) => selectedValue.value = $event,
+				"changeOnSelect": true,
+				"expandTrigger": "hover",
+				"placement": "bottomRight",
+				"dropdownClassName": `model-cascader-popup ${props.expandToLeft ? "expand-to-left" : ""}`,
+				"options": renderOptions(treeOptions.value, 1),
+				"open": isReadOnly ? false : visible.value,
+				"onChange": (val) => emit("change", val.join("..")),
+				"onDropdownVisibleChange": (v) => {
+					visible.value = v;
+				}
+			}, { default: () => [createVNode("div", { "class": `flex items-center ${isReadOnly ? "" : "cursor-pointer"}` }, [
+				isLoading.value && createVNode(Spin, {
+					"indicator": indicator,
+					"class": "h-4 flex items-center"
+				}, null),
+				createVNode("div", {
+					"class": "text-xs truncate min-w-0",
+					"title": displayLabel
+				}, [displayLabel]),
+				!isReadOnly && !isLoading.value && createVNode("i", { "class": "shrink-0 ml-1 gct-iconfont icon-zujianziduan-xiajiantou3" }, null)
+			])] })]);
+		};
+	}
+});
+//#endregion
+export { ModelCascader };

package/es/components/model-cascader/style.css

@@ -0,0 +1,54 @@
+.expand-to-left .ant-cascader-menus {
+  direction: rtl;
+}
+.expand-to-left .ant-cascader-menu {
+  direction: ltr;
+  /* 防止文字也反向 */
+}
+.model-cascader-popup {
+  z-index: 3000;
+}
+.model-cascader-popup > div {
+  max-width: 60vw;
+}
+.model-cascader-popup .ant-cascader-menu-item {
+  min-width: 160px;
+  padding: 0 4px;
+  /* stylelint-disable-next-line no-descending-specificity */
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.model-cascader-popup .ant-cascader-menu-item:hover:not(.ant-cascader-menu-item-disabled),
+.model-cascader-popup .ant-cascader-menu-item.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+  background-color: #F2F5F8;
+}
+.model-cascader-popup .ant-cascader-menu-item.ant-cascader-menu-item-active,
+.model-cascader-popup .ant-cascader-menu-item.ant-cascader-menu-item-active .iconfont {
+  color: var(--ant-primary-color);
+}
+.model-cascader-popup .ant-cascader-menu-item .ant-cascader-menu-item-content {
+  display: flex;
+  align-items: center;
+}
+.model-cascader-popup .ant-cascader-menu-item .model-ops {
+  flex: 1;
+  padding-right: 0;
+  padding-left: 16px;
+  line-height: 32px;
+}
+.model-cascader-popup .ant-cascader-menu-item .model-ops .model-ops-name .model-ops-desc {
+  color: rgba(0, 0, 0, 0.45);
+}
+.model-cascader-popup .ant-cascader-menu-item .iconfont {
+  flex-shrink: 0;
+  padding-right: 8px;
+  padding-left: 4px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.model-cascader-popup .ant-cascader-menu-item .ant-cascader-menu-item-expand-icon {
+  display: none;
+}
+.model-cascader-popup .ant-cascader-menu-item.ant-cascader-menu-item-disabled {
+  color: #c3c3c3;
+  cursor: default;
+}