@gct-paas/render-web 0.1.6-dev.30 → 0.1.6-dev.32

package/es/plugins/render-card-field/render-card-field.css

@@ -0,0 +1,171 @@
+@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-render-card-field--horizontal {
+  display: flex;
+  align-items: start;
+}
+
+.gct-render-card-field--vertical {
+  display: flex;
+  flex-direction: column;
+}
+
+.gct-render-card-field__placeholder {
+  font-style: italic;
+  color: var(--gct-color-text-3);
+}
+
+.gct-render-card-field__label--name.is-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-render-card-field__label--name {
+  max-width: calc(100% - 14px);
+}
+
+.gct-render-card-field__label {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+.gct-render-card-field__label > span {
+  display: inline-block;
+}
+
+.gct-render-card-field__value {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+.gct-render-card-field__value .field-tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.gct-render-card-field__value .field-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--gct-color-primary);
+  white-space: nowrap;
+  background-color: var(--gct-color-primary-light-8);
+  border-radius: 4px;
+}
+
+.gct-render-card-field__value-tag {
+  display: flex;
+  align-items: center;
+  padding: 2px var(--gct-padding-4);
+  color: var(--ant-primary-color);
+}
+.gct-render-card-field__value-tag.radius {
+  color: #fff;
+  background-color: var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-render-card-field__value-tag.linear_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-render-card-field__value-tag.big_radius {
+  color: #fff;
+  background-color: var(--ant-primary-color);
+  border-radius: 10px;
+}
+.gct-render-card-field__value-tag.linear_big_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 10px;
+}
+.gct-render-card-field__value-tag.dashed_radius {
+  border: 1px dashed var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-render-card-field__value-tag.status {
+  color: #fff;
+  background-color: var(--ant-primary-color);
+  border-radius: 4px;
+  border-top-left-radius: 15px;
+}
+
+.gct-render-card-field {
+  height: 100%;
+  margin-bottom: var(--gct-spacing-3);
+  overflow: hidden;
+  color: var(--gct-color-text-4);
+}
+.gct-render-card-field.render-card-field--vertical .render-card-field__label {
+  margin-bottom: var(--gct-spacing-2);
+}
+.gct-render-card-field.render-card-field--vertical .render-card-field__value {
+  word-break: break-all;
+}
+.gct-render-card-field.render-card-field--horizontal .render-card-field__label {
+  min-width: 80px;
+  margin-right: var(--gct-spacing-3);
+}

package/es/plugins/render-card-field/render-card-field.d.ts

@@ -0,0 +1,48 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '@gct-paas/schema';
+export declare const RenderCardField: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: ObjectConstructor;
+    };
+    model: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageModel: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: ObjectConstructor;
+    };
+    model: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageModel: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    model: IDesignNode<import('@gct-paas/schema').IDesignNodeData>;
+    context: Record<string, any>;
+    preview: boolean;
+    pageModel: IDesignNode<import('@gct-paas/schema').IDesignNodeData>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/render-card-field/render-card-field.mjs

@@ -0,0 +1,157 @@
+import './render-card-field.css';/* empty css                        */
+import { RenderNodeRegister } from "@gct-paas/render";
+import { computed, createTextVNode, createVNode, defineComponent, h, ref, resolveComponent } from "vue";
+import { FIELD_TYPE, modelLoader, nullDisplayEnum, t, useNamespace } from "@gct-paas/core";
+import { isString } from "lodash-es";
+import { formatFieldValue, transformField2Component } from "@gct-paas/schema";
+//#region src/plugins/render-card-field/render-card-field.tsx
+var RenderCardField = /* @__PURE__ */ defineComponent({
+	name: "RenderCardField",
+	props: {
+		c: { type: Object },
+		model: {
+			type: Object,
+			default: () => ({})
+		},
+		context: {
+			type: Object,
+			default: () => ({})
+		},
+		preview: {
+			type: Boolean,
+			default: false
+		},
+		pageModel: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("render-card-field");
+		const pageData = computed(() => {
+			return props.pageModel?.data || {};
+		});
+		const nodeData = computed(() => {
+			return props.model?.data || {};
+		});
+		const fieldProvider = computed(() => {
+			return RenderNodeRegister.getDesignEditorNode(nodeData.value.type);
+		});
+		const fieldCom = computed(() => {
+			if (fieldProvider.value && fieldProvider.value.component) {
+				if (typeof fieldProvider.value.component === "string") return resolveComponent(fieldProvider.value.component);
+				return fieldProvider.value.component;
+			}
+			return null;
+		});
+		const layout = computed(() => {
+			return props.pageModel.data.layout_mode || "horizontal";
+		});
+		const labelWrap = computed(() => {
+			return pageData.value.wrap_mode === "wrap";
+		});
+		const labelStyle = computed(() => {
+			const style = {};
+			if (pageData.value.custom_label_width) style.width = `${pageData.value.label_width}${pageData.value.label_mode === "percent" ? "%" : "px"}`;
+			if (nodeData.value.label_font) {
+				const font_style = nodeData.value.label_font;
+				Object.assign(style, {
+					fontSize: font_style.fontSize,
+					color: font_style.color,
+					justifyContent: font_style.align === "justify" ? "space-between" : font_style.align,
+					fontWeight: font_style.bold ? "bold" : "normal",
+					fontStyle: font_style.italic ? "italic" : "normal",
+					textDecoration: font_style.textDecoration
+				});
+			}
+			return style;
+		});
+		const contentStyle = computed(() => {
+			const style = {};
+			if (nodeData.value.content_font) {
+				const font_style = nodeData.value.content_font;
+				Object.assign(style, {
+					fontSize: font_style.fontSize,
+					color: font_style.color,
+					justifyContent: font_style.align === "justify" ? "space-between" : font_style.align,
+					fontWeight: font_style.bold ? "bold" : "normal",
+					fontStyle: font_style.italic ? "italic" : "normal",
+					textDecoration: font_style.textDecoration
+				});
+			}
+			return style;
+		});
+		const field = ref(null);
+		const fieldLabel = computed(() => {
+			return nodeData.value.label || field.value?.name || "";
+		});
+		const fieldValue = computed(() => {
+			if (!field.value) return "";
+			let text = "";
+			if (props.preview === true) text = getLabelText(field.value) || "";
+			else text = props.context.data?.[field.value.key] || "";
+			if (text) return formatFieldValue$1(text);
+			return "";
+		});
+		function formatFieldValue$1(text) {
+			if (!field.value) return String(text || "");
+			return formatFieldValue(text, {
+				field: {
+					type: field.value.type || "",
+					mappingType: field.value.mappingType,
+					specificConfig: field.value.specificConfig
+				},
+				format: nodeData.value.format,
+				editorType: nodeData.value.editor_type,
+				currency: nodeData.value.currency,
+				timeType: nodeData.value.time_type
+			});
+		}
+		function getLabelText(field) {
+			const type = field.type === FIELD_TYPE.AGG || field.type === FIELD_TYPE.EXPRESSION ? field.mappingType : field.type;
+			const example = type ? transformField2Component(type)?.example : "";
+			let showMsg = example ? isString(example) ? t(example) : example.map((e) => t(e)) : "";
+			if (type === FIELD_TYPE.ENUM_MULTI || type === FIELD_TYPE.ENUM) showMsg = showMsg ? isString(showMsg) ? [showMsg] : showMsg : [];
+			if (showMsg instanceof Array) return showMsg.join("，");
+			else return showMsg;
+		}
+		function renderFieldValue() {
+			if (fieldValue.value === null || fieldValue.value === void 0 || fieldValue.value === "") return nullDisplayEnum[_gct.store.getEmptyDisplay];
+			const content = fieldCom.value ? h(fieldCom.value, {
+				...props,
+				field: field.value,
+				value: fieldValue.value
+			}) : fieldValue.value;
+			const tagStyle = nodeData.value.tag_style;
+			if (tagStyle && tagStyle.check === true) return createVNode("span", {
+				"class": [ns.e("value-tag"), tagStyle.mode],
+				"style": { "--ant-primary-color": tagStyle.color }
+			}, [content]);
+			return content;
+		}
+		async function loadModelField() {
+			try {
+				field.value = await modelLoader.loadField(nodeData.value.modelKey, nodeData.value.key);
+				console.log("field", field.value);
+			} catch (error) {
+				console.warn("加载模型失败:", error);
+			}
+		}
+		loadModelField();
+		return () => {
+			if (!field.value) return null;
+			return createVNode("div", { "class": [ns.b(), layout.value === "vertical" ? ns.m("vertical") : ns.m("horizontal")] }, [nodeData.value.show_label !== true ? null : createVNode("div", {
+				"class": ns.e("label"),
+				"style": labelStyle.value
+			}, [createVNode("span", {
+				"title": fieldLabel.value,
+				"class": [ns.em("label", "name"), ns.is("ellipsis", labelWrap.value !== true)]
+			}, [fieldLabel.value]), createVNode("span", { "class": ns.em("label", "colon") }, [createTextVNode("：")])]), createVNode("div", {
+				"class": ns.e("value"),
+				"style": contentStyle.value
+			}, [renderFieldValue()])]);
+		};
+	}
+});
+//#endregion
+export { RenderCardField };

package/es/plugins/render-card-field/render-card-field.provider.d.ts

@@ -0,0 +1,7 @@
+import { IRenderItemNodeProvider } from '@gct-paas/render';
+import { DesignNodeMode } from '@gct-paas/schema';
+export declare class RenderCardFieldProvider implements IRenderItemNodeProvider {
+    mode: DesignNodeMode.ITEM;
+    type: string;
+    component: string;
+}

package/es/plugins/render-card-field/render-card-field.provider.mjs

@@ -0,0 +1,10 @@
+import { RenderNodeType } from "@gct-paas/render";
+import { DesignNodeMode } from "@gct-paas/schema";
+//#region src/plugins/render-card-field/render-card-field.provider.ts
+var RenderCardFieldProvider = class {
+	mode = DesignNodeMode.ITEM;
+	type = RenderNodeType.FIELD;
+	component = "RenderCardField";
+};
+//#endregion
+export { RenderCardFieldProvider };

package/es/plugins/render-card-view-page/render-card-view-page.css

@@ -0,0 +1,72 @@
+@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-render-card-view-page {
+  position: relative;
+  padding: var(--gct-spacing-7);
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+}

package/es/plugins/render-card-view-page/render-card-view-page.d.ts

@@ -0,0 +1,33 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '@gct-paas/schema';
+export declare const RenderCardViewPage: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IDesignNode>;
+        default: () => {};
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    model: IDesignNode<import('@gct-paas/schema').IDesignNodeData>;
+    context: Record<string, any>;
+    preview: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/render-card-view-page/render-card-view-page.mjs

@@ -0,0 +1,61 @@
+import './render-card-view-page.css';/* empty css                            */
+import { computed, createVNode, defineComponent, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/plugins/render-card-view-page/render-card-view-page.tsx
+var RenderCardViewPage = /* @__PURE__ */ defineComponent({
+	name: "RenderCardViewPage",
+	props: {
+		model: {
+			type: Object,
+			default: () => ({})
+		},
+		context: {
+			type: Object,
+			default: () => ({})
+		},
+		preview: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const ns = useNamespace("render-card-view-page");
+		const style = computed(() => {
+			const { data } = props.model;
+			const style = {};
+			if (props.model) {
+				style.width = `${data.width}px`;
+				style.backgroundColor = data.background;
+				style.borderRadius = `${data.border_radius}px`;
+				const padding = data.spacing?.[1];
+				if (padding) {
+					style.paddingTop = padding.top;
+					style.paddingRight = padding.right;
+					style.paddingBottom = padding.bottom;
+					style.paddingLeft = padding.left;
+				}
+			}
+			return style;
+		});
+		const data = computed(() => {
+			return props.model?.data || {};
+		});
+		return () => {
+			const items = slots.default ? slots.default() : null;
+			return createVNode("div", {
+				"class": [ns.b(), ns.is("simple", data.value.mode === "simple")],
+				"style": style.value
+			}, [createVNode(resolveComponent("a-row"), {
+				"gutter": [12, 8],
+				"wrap": true
+			}, { default: () => [items && items.map((item) => {
+				return createVNode(resolveComponent("a-col"), {
+					"class": ns.e("col"),
+					"span": data.value.colspan || 24
+				}, { default: () => item });
+			})] })]);
+		};
+	}
+});
+//#endregion
+export { RenderCardViewPage };

package/es/plugins/render-card-view-page/render-card-view-page.provider.d.ts

@@ -0,0 +1,7 @@
+import { IRenderItemNodeProvider } from '@gct-paas/render';
+import { DesignNodeMode } from '@gct-paas/schema';
+export declare class RenderCardViewPageProvider implements IRenderItemNodeProvider {
+    mode: DesignNodeMode.ITEM;
+    type: string;
+    component: string;
+}

package/es/plugins/render-card-view-page/render-card-view-page.provider.mjs

@@ -0,0 +1,10 @@
+import { RenderNodeType } from "@gct-paas/render";
+import { DesignNodeMode } from "@gct-paas/schema";
+//#region src/plugins/render-card-view-page/render-card-view-page.provider.ts
+var RenderCardViewPageProvider = class {
+	mode = DesignNodeMode.ITEM;
+	type = RenderNodeType.PAGE;
+	component = "RenderCardViewPage";
+};
+//#endregion
+export { RenderCardViewPageProvider };

package/es/plugins/render-design-editor/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/plugins/render-design-editor/upload-file/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/es/plugins/render-design-editor/upload-file/upload-file.d.ts

@@ -0,0 +1,51 @@
+export declare const UploadFile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/render').IDesignRenderItemController>;
+        required: boolean;
+    };
+    model: {
+        type: import('vue').PropType<import('@gct-paas/schema').IDesignNode>;
+        required: boolean;
+    };
+    context: {
+        type: import('vue').PropType<IContext>;
+        required: boolean;
+    };
+    field: {
+        type: import('vue').PropType<IObject>;
+        required: boolean;
+    };
+    value: {
+        type: import('vue').PropType<any>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/render').IDesignRenderItemController>;
+        required: boolean;
+    };
+    model: {
+        type: import('vue').PropType<import('@gct-paas/schema').IDesignNode>;
+        required: boolean;
+    };
+    context: {
+        type: import('vue').PropType<IContext>;
+        required: boolean;
+    };
+    field: {
+        type: import('vue').PropType<IObject>;
+        required: boolean;
+    };
+    value: {
+        type: import('vue').PropType<any>;
+    };
+}>> & Readonly<{}>, {
+    preview: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/render-design-editor/upload-image/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;