@gct-paas/core-web 0.1.5-test.1 → 0.1.6-dev.0

package/es/components/field-tree-select/field-sort-popover.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import field_sort_popover_vue_vue_type_script_setup_true_lang_default from "./field-sort-popover.vue_vue_type_script_setup_true_lang.mjs";
+import './field-sort-popover.vue_vue_type_style_index_0_scoped_c1811778_lang.css';/* empty css                                                                         */
+//#region src/components/field-tree-select/field-sort-popover.vue
+var field_sort_popover_default = /* @__PURE__ */ _plugin_vue_export_helper_default(field_sort_popover_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c1811778"]]);
+//#endregion
+export { field_sort_popover_default as default };

package/es/components/field-tree-select/field-sort-popover.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,206 @@
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, openBlock, reactive, ref, renderSlot, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { cloneDeep } from "lodash-es";
+import { FieldIconMap } from "@gct-paas/core";
+import { SvgIcon } from "@gct-paas/core-components";
+//#region src/components/field-tree-select/field-sort-popover.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "w230px m--14px pb16px" };
+var _hoisted_2 = { class: "ks-col ell" };
+var _hoisted_3 = ["onClick"];
+var field_sort_popover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-sort-popover",
+	props: {
+		fieldMap: {
+			type: Object,
+			default: () => ({})
+		},
+		groupOptions: {
+			type: Array,
+			default: () => []
+		},
+		fieldNames: {
+			type: Object,
+			default: () => ({
+				children: "children",
+				title: "title",
+				key: "key"
+			})
+		},
+		getLabelByFun: {
+			type: Function,
+			default: () => {
+				console.log("getLabelByFun");
+			}
+		},
+		getFieldTypeByFun: {
+			type: Function,
+			default: () => {
+				console.log("getFieldTypeByFun");
+			}
+		},
+		getFieldHiddenByFun: {
+			type: Function,
+			default: (data) => data.visible
+		},
+		changeFieldHiddenByFun: {
+			type: Function,
+			default: (data, v) => {
+				data.visible = v;
+			}
+		}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		/**记录能否拖拽成功开关  标记线的颜色 */
+		const selectedDrop = ref(true);
+		/**拖拽后需要收起的节点 */
+		const dropExpandedKey = ref();
+		const emit = __emit;
+		const { fieldNames, getLabelByFun, fieldMap, getFieldTypeByFun, getFieldHiddenByFun, changeFieldHiddenByFun } = props;
+		const groupOptions = reactive(props.groupOptions);
+		function getFieldTitle(data) {
+			if (data.isGroup) return data[fieldNames.title];
+			else return getLabelByFun(fieldMap[data[fieldNames.key]]);
+		}
+		function getFieldVisible(key) {
+			return getFieldHiddenByFun(fieldMap[key]);
+		}
+		function getFieldTypeByKey(key) {
+			return getFieldTypeByFun(fieldMap[key]);
+		}
+		/**拖拽前记录被拖拽文件夹状态  */
+		function dragend({ node }) {
+			if (!node.isGroup) return;
+			const dropClassKey = node.expanded ? "gct-" + node.key : void 0;
+			dropExpandedKey.value = dropClassKey;
+			node.dataRef.class = dropClassKey;
+		}
+		/**
+		* 拖拽后的节点恢复展开 模拟点击
+		*/
+		async function closeDragNodeByClass() {
+			if (!dropExpandedKey.value) return;
+			await nextTick();
+			const dragNode = document.querySelector(`.${dropExpandedKey.value}`);
+			dragNode && dragNode.childNodes[2] && dragNode.childNodes[2].click();
+		}
+		const onDrop = async (info) => {
+			if (!selectedDrop.value) return;
+			const { dropToGap, dragNode, node } = info;
+			const dropPosition = info.dropPosition;
+			const _dNode = await new Promise((resolve) => {
+				loop(groupOptions, dragNode.key, (_value, index, children) => {
+					resolve(cloneDeep(children.splice(index, 1)[0]));
+				});
+			});
+			loop(groupOptions, node.key, (value, index, children) => {
+				if (node.isGroup && !dropToGap) value.children.unshift(_dNode);
+				else children.splice(dropPosition === -1 ? index : index + 1, 0, _dNode);
+			});
+			emit("change", cloneDeep(groupOptions));
+			closeDragNodeByClass();
+		};
+		const loop = (data, key, callback, parent) => {
+			const length = data.length;
+			for (let i = 0; i < length; i++) {
+				const item = data[i];
+				if (item[fieldNames.key] === key) {
+					callback(item, i, data, parent);
+					break;
+				}
+				if (item.children) loop(item.children, key, callback, item);
+			}
+		};
+		/**计算是否可以拖拽 */
+		function getAllowDrop({ dragNode, dropNode }) {
+			let sameLevel = false;
+			loop(groupOptions, dropNode.key, (_value, _index, _children, parent) => {
+				sameLevel = dragNode.parent?.key === parent?.key;
+			});
+			return sameLevel;
+		}
+		/**
+		* 同级拖拽
+		*/
+		function allowDrop({ dragNode, dropNode, dropPosition }) {
+			if (dragNode.dataRef.noDrag || dragNode.parent && dropPosition === -1) return false;
+			if (dropPosition === 0) return dragNode.parent?.key === dropNode.key;
+			/**记录不可拖拽状态  改变线条样式 */
+			selectedDrop.value = getAllowDrop({
+				dragNode,
+				dropNode,
+				dropPosition
+			});
+			return true;
+		}
+		function hiddenField(key) {
+			const visible = getFieldVisible(key);
+			changeFieldHiddenByFun(fieldMap[key], !visible);
+			emit("change", cloneDeep(groupOptions));
+		}
+		return (_ctx, _cache) => {
+			const _component_a_tooltip = resolveComponent("a-tooltip");
+			const _component_a_tree = resolveComponent("a-tree");
+			const _component_a_popover = resolveComponent("a-popover");
+			return openBlock(), createBlock(_component_a_popover, {
+				trigger: "click",
+				placement: "bottom",
+				"get-popup-container": (element) => element.parentNode,
+				"overlay-style": { paddingTop: 0 }
+			}, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "popover-title" }, "显示字段", -1)), groupOptions.length ? (openBlock(), createBlock(_component_a_tree, {
+					key: 0,
+					"default-expand-all": "",
+					"field-names": unref(fieldNames),
+					height: 300,
+					draggable: "",
+					"tree-data": groupOptions,
+					"show-icon": "",
+					class: normalizeClass(["tree-field", { "gct-no-drop": !selectedDrop.value }]),
+					selectable: false,
+					"allow-drop": allowDrop,
+					virtual: false,
+					onDrop,
+					onDragstart: dragend
+				}, {
+					icon: withCtx(({ isGroup, key }) => [isGroup ? (openBlock(), createBlock(unref(SvgIcon), {
+						key: 0,
+						class: "folder",
+						size: "20",
+						name: "folder"
+					})) : getFieldTypeByKey(key) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["iconfont primary-gct", unref(FieldIconMap)[getFieldTypeByKey(key)]])
+					}, null, 2)) : createCommentVNode("", true)]),
+					title: withCtx(({ noDrag, data, key, isGroup }) => [(openBlock(), createElementBlock("div", {
+						key,
+						class: "ks-row"
+					}, [
+						createElementVNode("div", _hoisted_2, toDisplayString(getFieldTitle(data)), 1),
+						!isGroup ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(["iconfont mr-4px", getFieldVisible(key) ? "icon-yulan" : "icon-baomi"]),
+							onClick: ($event) => hiddenField(key)
+						}, null, 10, _hoisted_3)) : createCommentVNode("", true),
+						!noDrag ? (openBlock(), createBlock(_component_a_tooltip, {
+							key: 1,
+							title: "拖动排序"
+						}, {
+							default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "icon-drag iconfont" }, null, -1)])]),
+							_: 1
+						})) : createCommentVNode("", true)
+					]))]),
+					_: 1
+				}, 8, [
+					"field-names",
+					"tree-data",
+					"class"
+				])) : createCommentVNode("", true)])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["get-popup-container"]);
+		};
+	}
+});
+//#endregion
+export { field_sort_popover_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-tree-select/field-sort-popover.vue_vue_type_style_index_0_scoped_c1811778_lang.css

@@ -0,0 +1,136 @@
+@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 */
+.popover-title[data-v-c1811778] {
+  padding: 8px;
+  border-bottom: 1px solid #e0e3eb;
+  color: #212528;
+  font-weight: 500;
+}
+[data-v-c1811778] .gct-no-drop {
+  color: red;
+}
+[data-v-c1811778] .gct-no-drop .ant-tree-drop-indicator {
+  background-color: #8e8e8e !important;
+}
+[data-v-c1811778] .tree-field {
+  padding-top: 8px;
+}
+[data-v-c1811778] .tree-field .ant-tree-title .iconfont {
+  font-size: 12px;
+}
+[data-v-c1811778] .tree-field .ant-tree-icon__customize {
+  width: 20px;
+  text-align: left;
+}
+[data-v-c1811778] .tree-field .ant-tree-list-holder > div {
+  margin: 0 6px;
+}
+[data-v-c1811778] .tree-field .ant-tree-treenode {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  width: 100%;
+  padding: 6px 2px;
+  overflow: hidden;
+  transition: background 0.3s;
+  border-radius: 4px;
+  color: #5e5e5e;
+}
+[data-v-c1811778] .tree-field .ant-tree-treenode:hover {
+  background: var(--ant-primary-1);
+}
+[data-v-c1811778] .tree-field .ant-tree-treenode .ant-tree-switcher-noop {
+  width: 0;
+}
+[data-v-c1811778] .tree-field .ant-tree-treenode .ant-tree-indent-unit {
+  width: 12px;
+}
+[data-v-c1811778] .tree-field .ant-tree-node-content-wrapper {
+  display: flex;
+  flex: 1;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+[data-v-c1811778] .tree-field .ant-tree-node-content-wrapper .ant-tree-title {
+  flex: 1;
+  overflow: hidden;
+}
+[data-v-c1811778] .tree-field .ant-tree-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  line-height: 24px;
+}
+[data-v-c1811778] .tree-field .ant-tree-switcher .ant-tree-switcher-icon {
+  color: #797a7d;
+  font-size: 16px;
+}
+[data-v-c1811778] .tree-field .ant-tree-drop-indicator::after {
+  display: none !important;
+}

package/es/components/field-tree-select/field-tree-select.vue.d.ts

@@ -0,0 +1,119 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**字段map */
+    fieldMap: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**多级表头数据 */
+    groupOptions: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            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>[]>;
+        };
+        default: () => never[];
+    };
+    fieldNames: {
+        type: ObjectConstructor;
+        default: () => {
+            children: string;
+            title: string;
+            key: string;
+        };
+    };
+    /**最大层级数，默认3层 */
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getLabelByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    getFieldTypeByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    setLabelByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**字段map */
+    fieldMap: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**多级表头数据 */
+    groupOptions: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            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>[]>;
+        };
+        default: () => never[];
+    };
+    fieldNames: {
+        type: ObjectConstructor;
+        default: () => {
+            children: string;
+            title: string;
+            key: string;
+        };
+    };
+    /**最大层级数，默认3层 */
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getLabelByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    getFieldTypeByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    setLabelByFun: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    fieldMap: Record<string, any>;
+    groupOptions: IObject[];
+    fieldNames: Record<string, any>;
+    maxLevel: number;
+    getLabelByFun: Function;
+    getFieldTypeByFun: Function;
+    setLabelByFun: Function;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    treeRef: unknown;
+    editorInput: unknown;
+}, any>;
+export default _default;

package/es/components/field-tree-select/field-tree-select.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import field_tree_select_vue_vue_type_script_setup_true_lang_default from "./field-tree-select.vue_vue_type_script_setup_true_lang.mjs";
+import './field-tree-select.vue_vue_type_style_index_0_scoped_898030d3_lang.css';/* empty css                                                                        */
+//#region src/components/field-tree-select/field-tree-select.vue
+var field_tree_select_default = /* @__PURE__ */ _plugin_vue_export_helper_default(field_tree_select_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-898030d3"]]);
+//#endregion
+export { field_tree_select_default as default };