@gct-paas/design-web 0.1.4-dev.13 → 0.1.4-dev.14

package/es/components/I18nSelect/src/i18n-select-input.vue.mjs

@@ -1,7 +1,7 @@
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
 import i18n_select_input_vue_vue_type_script_setup_true_name_i18n_select_input_lang_default from "./i18n-select-input.vue_vue_type_script_setup_true_name_i18n-select-input_lang.mjs";
-import './i18n-select-input.vue_vue_type_style_index_0_scoped_412e1309_lang.css';/* empty css                                                                        */
+import './i18n-select-input.vue_vue_type_style_index_0_scoped_64c5221c_lang.css';/* empty css                                                                        */
 //#region src/components/I18nSelect/src/i18n-select-input.vue
-var i18n_select_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(i18n_select_input_vue_vue_type_script_setup_true_name_i18n_select_input_lang_default, [["__scopeId", "data-v-412e1309"]]);
+var i18n_select_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(i18n_select_input_vue_vue_type_script_setup_true_name_i18n_select_input_lang_default, [["__scopeId", "data-v-64c5221c"]]);
 //#endregion
 export { i18n_select_input_default as default };

package/es/components/I18nSelect/src/i18n-select-input.vue_vue_type_script_setup_true_name_i18n-select-input_lang.mjs

@@ -46,7 +46,7 @@ var i18n_select_input_vue_vue_type_script_setup_true_name_i18n_select_input_lang
 			return props.i18nConfig ?? {};
 		});
 		const i18nValue = computed(() => {
-			return i18nConfigState.value?.[props.attr];
+			return i18nConfigState.value?.[props.attr] ?? "";
 		});
 		const handleSelectI18n = (params) => {
 			console.log("emit", params);

package/es/components/I18nSelect/src/i18n-select-input.vue_vue_type_style_index_0_scoped_64c5221c_lang.css

@@ -0,0 +1,3 @@
+[data-v-64c5221c] .ant-form-item-has-error .ant-btn {
+  border-color: var(--ant-error-color) !important;
+}

package/es/components/form-component/FieldCheckbox.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { CheckboxGroupProps } from 'ant-design-vue';
+import { FIELD_TYPE } from '@gct-paas/core';
+import { LowCodeWidget } from '@gct-paas/schema';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<CheckboxGroupProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<CheckboxGroupProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    design: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/form-component/FieldCheckbox.mjs

@@ -0,0 +1,71 @@
+import field_readonly_default from "./field-readonly.vue.mjs";
+import './index.css';/* empty css            */
+import { computed, createVNode, defineComponent } from "vue";
+import { FIELD_TYPE } from "@gct-paas/core";
+import { Checkbox, CheckboxGroup } from "ant-design-vue";
+//#region src/components/form-component/FieldCheckbox.tsx
+var FieldCheckbox_default = /* @__PURE__ */ defineComponent({
+	name: "FieldCheckbox",
+	props: {
+		design: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		fieldType: {
+			type: Object,
+			required: true
+		},
+		tagStyle: {
+			type: Object,
+			required: true
+		},
+		options: Array,
+		value: [String, Number]
+	},
+	setup(props, { emit }) {
+		const isBool = props.fieldType === FIELD_TYPE.BOOLEAN;
+		const currentValue = computed({
+			get() {
+				if (isBool) return [props.value];
+				return Array.isArray(props.value) ? props.value : props.value ? props.value.split(",") : void 0;
+			},
+			set(value) {
+				if (isBool) {
+					const bool = value?.[0];
+					if (bool === void 0 || bool === null || typeof bool !== "boolean") emit("update:value", Boolean(bool));
+					else emit("update:value", !!bool);
+				} else emit("update:value", value);
+			}
+		});
+		const options = computed(() => {
+			if (isBool) return (props.options ?? []).filter((item) => item.value);
+			return props.options ?? [];
+		});
+		return () => {
+			return createVNode(CheckboxGroup, {
+				"value": currentValue.value,
+				"onUpdate:value": ($event) => currentValue.value = $event,
+				"disabled": props.disabled,
+				"class": ["field-checkbox-group", props.readonly ? "field-checkbox-group--readonly" : ""]
+			}, { default: () => [options.value?.map((option) => {
+				const optionItem = option;
+				const { icon, iconColor, textColor } = optionItem?._item || {};
+				return createVNode(Checkbox, {
+					"key": optionItem.value,
+					"value": optionItem.value
+				}, { default: () => [createVNode(field_readonly_default, {
+					"tagWidgetStyle": props.tagStyle,
+					"type": props.fieldType,
+					"label": optionItem.label,
+					"disabled": props.disabled,
+					"iconExtraProps": { [optionItem.label]: {
+						icon,
+						iconColor,
+						textColor
+					} }
+				}, null)] });
+			})] });
+		};
+	}
+});
+//#endregion
+export { FieldCheckbox_default as default };

package/es/components/form-component/FieldRadio.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { RadioGroupProps } from 'ant-design-vue';
+import { FIELD_TYPE } from '@gct-paas/core';
+import { LowCodeWidget } from '@gct-paas/schema';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<RadioGroupProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<RadioGroupProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    design: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/form-component/FieldRadio.mjs

@@ -0,0 +1,64 @@
+import field_readonly_default from "./field-readonly.vue.mjs";
+import './index.css';/* empty css            */
+import { computed, createVNode, defineComponent, isVNode } from "vue";
+import { Radio, RadioGroup } from "ant-design-vue";
+//#region src/components/form-component/FieldRadio.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var FieldRadio_default = /* @__PURE__ */ defineComponent({
+	name: "FieldRadio",
+	props: {
+		design: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		fieldType: {
+			type: Object,
+			required: true
+		},
+		tagStyle: {
+			type: Object,
+			required: true
+		},
+		options: Array,
+		value: [String, Number]
+	},
+	setup(props, { emit }) {
+		const currentValue = computed({
+			get() {
+				return props.value;
+			},
+			set(value) {
+				emit("update:value", value);
+			}
+		});
+		return () => {
+			let _slot;
+			return createVNode(RadioGroup, {
+				"value": currentValue.value,
+				"onUpdate:value": ($event) => currentValue.value = $event,
+				"disabled": props.disabled,
+				"class": ["field-radio-group", props.readonly ? "field-radio-group--readonly" : ""]
+			}, _isSlot(_slot = (props.options ?? []).map((option) => {
+				const optionItem = option;
+				const { icon, iconColor, textColor } = optionItem?._item || {};
+				return createVNode(Radio, {
+					"key": optionItem.value,
+					"value": optionItem.value
+				}, { default: () => [createVNode(field_readonly_default, {
+					"tagWidgetStyle": props.tagStyle,
+					"type": props.fieldType,
+					"label": optionItem.label,
+					"disabled": props.disabled,
+					"iconExtraProps": { [optionItem.label]: {
+						icon,
+						iconColor,
+						textColor
+					} }
+				}, null)] });
+			})) ? _slot : { default: () => [_slot] });
+		};
+	}
+});
+//#endregion
+export { FieldRadio_default as default };

package/es/components/form-component/FieldSelect.d.ts

@@ -0,0 +1,82 @@
+import { PropType } from 'vue';
+import { SelectProps } from 'ant-design-vue';
+import { LowCodeWidget } from '@gct-paas/schema';
+import { FIELD_TYPE, FormComponents } from '@gct-paas/core';
+interface ISelectExtraProps {
+    mode?: 'multiple' | undefined;
+    placeholder?: string;
+    optionLabelProp?: string | undefined;
+    allowClear?: boolean;
+    showSearch?: boolean;
+    optionNoStyle?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    selectExtraProps: PropType<ISelectExtraProps>;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    type: {
+        type: PropType<FormComponents>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<SelectProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+    maxTagCount: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxTagTextLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectOptionLabel: {
+        type: StringConstructor;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    design: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    selectExtraProps: PropType<ISelectExtraProps>;
+    fieldType: {
+        type: PropType<FIELD_TYPE>;
+        required: true;
+    };
+    type: {
+        type: PropType<FormComponents>;
+        required: true;
+    };
+    tagStyle: {
+        type: PropType<LowCodeWidget.BasicStyle>;
+        required: true;
+    };
+    options: PropType<SelectProps["options"]>;
+    value: (StringConstructor | NumberConstructor)[];
+    maxTagCount: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxTagTextLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectOptionLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    maxTagCount: string | number;
+    maxTagTextLength: number;
+    design: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/form-component/FieldSelect.mjs

@@ -0,0 +1,174 @@
+import tag_label_default from "./field-label/tag-label.vue.mjs";
+import field_readonly_default from "./field-readonly.vue.mjs";
+import selectTag_default from "./field-label/selectTag.vue.mjs";
+import './index.css';/* empty css            */
+import { computed, createVNode, defineComponent, h, mergeProps } from "vue";
+import { pick } from "lodash-es";
+import { transformUrl } from "@gct-paas/core-web";
+import { FormComponents } from "@gct-paas/core";
+import { Avatar, Select } from "ant-design-vue";
+//#region src/components/form-component/FieldSelect.tsx
+var FieldSelect_default = /* @__PURE__ */ defineComponent({
+	name: "FieldSelect",
+	props: {
+		design: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		selectExtraProps: Object,
+		fieldType: {
+			type: String,
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		tagStyle: {
+			type: Object,
+			required: true
+		},
+		options: Array,
+		value: [String, Number],
+		maxTagCount: {
+			type: [Number, String],
+			default: 5
+		},
+		maxTagTextLength: {
+			type: Number,
+			default: 6
+		},
+		selectOptionLabel: { type: String }
+	},
+	setup(props, { emit }) {
+		const currentValue = computed({
+			get() {
+				return props.value;
+			},
+			set(value) {
+				emit("update:value", value);
+			}
+		});
+		const renderTag = (com, { name, iconExtraProps, otherParams = {} }) => {
+			return h(com, {
+				tagWidgetStyle: props.tagStyle,
+				type: props.fieldType,
+				label: name,
+				disabled: props.disabled,
+				iconExtraProps,
+				...otherParams
+			});
+		};
+		const renderSelectTag = ({ name, title, iconExtraProps, avatar, otherParams = {} }) => {
+			return createVNode(selectTag_default, mergeProps({
+				"tagWidgetStyle": props.tagStyle,
+				"type": props.fieldType,
+				"label": name,
+				"avatar": avatar,
+				"title": title?.length > props.maxTagTextLength ? title : null,
+				"disabled": props.disabled,
+				"iconExtraProps": iconExtraProps
+			}, otherParams), null);
+		};
+		const options = computed(() => {
+			return (props.options ?? []).map((item) => {
+				const { iconColor, icon, textColor } = item._item || {};
+				return {
+					...item,
+					[props.selectExtraProps?.optionLabelProp || "titleLabel"]: renderTag(tag_label_default, {
+						name: item.label,
+						iconExtraProps: { [item.label]: {
+							icon,
+							iconColor,
+							textColor
+						} }
+					})
+				};
+			});
+		});
+		function getLabelByDict(item, key) {
+			const { _DICT = {} } = item;
+			const value = item[key];
+			return _DICT[key]?.[value]?.join("，") ?? value ?? item.id_;
+		}
+		const selectInfo = computed(() => {
+			if (props.readonly) {
+				const list = options.value?.filter((item) => {
+					if (props.selectExtraProps?.mode === "multiple") return Array.isArray(currentValue.value) && currentValue.value.includes(item.value);
+					return item.value === currentValue.value;
+				}) ?? [];
+				const icons = Object.fromEntries(list?.map((item) => {
+					return [item.label, pick(item?._item || {}, [
+						"iconColor",
+						"icon",
+						"textColor"
+					])];
+				}) ?? []);
+				return {
+					labels: list.map((e) => e.label),
+					icons
+				};
+			}
+			return {};
+		});
+		const slot = { option: (data) => {
+			const { label, _item = {} } = data;
+			if (props.type === FormComponents.Userpicker) return createVNode("div", { "class": "flex items-center" }, [createVNode(Avatar, {
+				"size": 30,
+				"style": "margin: 0 8px;min-width:32px",
+				"src": transformUrl(_item.avatar)
+			}, null), createVNode("div", { "style": "width:calc(100% - 35px)" }, [createVNode("div", {
+				"class": " w100% ell",
+				"title": label
+			}, [label]), createVNode("div", { "class": "text-[#8F8F8F] text-[12px] mt2px" }, [_item.masterOrgName])])]);
+			else return renderTag(tag_label_default, {
+				name: props.selectOptionLabel ? getLabelByDict(_item, props.selectOptionLabel) : label,
+				iconExtraProps: { [label]: pick(_item, [
+					"iconColor",
+					"icon",
+					"textColor"
+				]) },
+				otherParams: { showTagStyle: false }
+			});
+		} };
+		const tagRender = (data) => {
+			const { label, option, closable, onClose } = data;
+			const { _item = {} } = option || {};
+			return renderSelectTag({
+				name: label,
+				title: option?.label,
+				avatar: option?._item?.avatar,
+				iconExtraProps: { [label]: pick(_item, [
+					"iconColor",
+					"icon",
+					"textColor"
+				]) },
+				otherParams: {
+					closable,
+					"onOn-close": onClose,
+					style: "margin-right: 4px"
+				}
+			});
+		};
+		return () => {
+			return props.readonly ? renderTag(field_readonly_default, {
+				name: selectInfo.value?.labels,
+				iconExtraProps: selectInfo.value?.icons
+			}) : createVNode(Select, mergeProps({
+				"class": ["field-select", "w100%"],
+				"value": currentValue.value,
+				"onUpdate:value": ($event) => currentValue.value = $event,
+				"options": options.value,
+				"disabled": props.disabled,
+				"optionLabelProp": "titleLabel",
+				"tagRender": tagRender,
+				"showArrow": true,
+				"maxTagCount": props.maxTagCount,
+				"maxTagTextLength": props.maxTagTextLength,
+				"dropdownMatchSelectWidth": 180,
+				"dropdownClassName": props.selectExtraProps?.mode === "multiple" ? "gct-project-select-dropdown gct-project-select-multiple vxe-table--ignore-clear" : "gct-project-select-dropdown vxe-table--ignore-clear"
+			}, props.selectExtraProps), props.selectExtraProps?.optionNoStyle ? null : slot);
+		};
+	}
+});
+//#endregion
+export { FieldSelect_default as default };

package/es/components/form-component/field-emptyValue.d.ts

@@ -0,0 +1,6 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+/**空值显示逻辑 */
+export declare function emptyValueDisplay(widget: LowCodeWidget.FieldSchema, value: IObject): {
+    RenderEmptyValue: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+    isEmpty: import('vue').ComputedRef<boolean | undefined>;
+};

package/es/components/form-component/field-label/selectTag.vue.d.ts

@@ -0,0 +1,10 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+export interface Props {
+    tagWidgetStyle: {
+        tagStyleOpen: boolean;
+        contentFont: LowCodeWidget.FontStyle;
+        tagStyle?: LowCodeWidget.TagConfigStyle;
+    };
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/form-component/field-label/selectTag.vue.mjs

@@ -0,0 +1,5 @@
+import selectTag_vue_vue_type_script_setup_true_lang_default from "./selectTag.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/form-component/field-label/selectTag.vue
+var selectTag_default = selectTag_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { selectTag_default as default };

package/es/components/form-component/field-label/selectTag.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,22 @@
+import tag_label_default from "./tag-label.vue.mjs";
+import { createBlock, defineComponent, openBlock, toRef } from "vue";
+//#region src/components/form-component/field-label/selectTag.vue?vue&type=script&setup=true&lang.ts
+var selectTag_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "selectTag",
+	props: { tagWidgetStyle: {} },
+	setup(__props) {
+		const props = __props;
+		const tagWidgetStyle = toRef(() => {
+			if (!props.tagWidgetStyle.tagStyleOpen) return {
+				tagStyleOpen: true,
+				contentFont: props.tagWidgetStyle?.contentFont
+			};
+			else return props.tagWidgetStyle;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(tag_label_default, { "tag-widget-style": tagWidgetStyle.value }, null, 8, ["tag-widget-style"]);
+		};
+	}
+});
+//#endregion
+export { selectTag_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/form-component/field-label/tag-label.vue.d.ts

@@ -0,0 +1,36 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+import { FIELD_TYPE } from '@gct-paas/core';
+export interface Props {
+    tagWidgetStyle?: {
+        tagStyleOpen?: boolean;
+        contentFont?: LowCodeWidget.FontStyle;
+        tagStyle?: LowCodeWidget.TagConfigStyle;
+    };
+    type?: FIELD_TYPE | undefined;
+    disabled?: boolean;
+    label?: string | (string | number)[];
+    isDesign?: boolean;
+    closable?: boolean;
+    /** 外部控制是否显示标签样式 */
+    showTagStyle?: boolean;
+    /** 头像 */
+    avatar?: string;
+    iconExtraProps?: Record<string, {
+        icon?: string;
+        iconColor?: string;
+        textColor?: string;
+    }>;
+    iconProps?: {
+        icon: string;
+        iconColor: string;
+        textColor: string;
+    };
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "on-close": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onOn-close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    showTagStyle: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/form-component/field-label/tag-label.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import tag_label_vue_vue_type_script_setup_true_lang_default from "./tag-label.vue_vue_type_script_setup_true_lang.mjs";
+import './tag-label.vue_vue_type_style_index_0_scoped_a1ded441_lang.css';/* empty css                                                                */
+//#region src/components/form-component/field-label/tag-label.vue
+var tag_label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(tag_label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a1ded441"]]);
+//#endregion
+export { tag_label_default as default };