@gct-paas/core-web 0.1.5-dev.6 → 0.1.5-dev.8

package/es/components/app-popover/app-popover-component.mjs

@@ -0,0 +1,160 @@
+import { useLocale } from "../../hooks/useLocale.mjs";
+import "../../hooks/index.mjs";
+import './app-popover-component.css';/* empty css                            */
+import { createVNode, defineComponent, isVNode, onUnmounted, reactive, ref } from "vue";
+import { isNumber } from "lodash-es";
+import { Modal, OverlayPopoverContainer, useNamespace } from "@gct-paas/core";
+import { ConfigProvider } from "ant-design-vue";
+import { onClickOutside } from "@vueuse/core";
+import { DndProvider } from "vue3-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/components/app-popover/app-popover-component.tsx
+/**
+* 计算飘窗显示
+*
+* @author chitanda
+* @date 2022-11-08 21:11:18
+* @param {HTMLElement} element
+* @param {HTMLElement} el
+* @param {HTMLElement} arrEl
+* @param {IPopoverOptions<FloatingUIConfig>} opts
+* @return {*}  {Promise<void>}
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+async function computePos(element, el, arrEl, opts) {
+	const middlewareArr = [
+		offset(opts.offsetOpts || 6),
+		flip(),
+		shift()
+	];
+	if (!opts.noArrow) middlewareArr.push(arrow({ element: arrEl }));
+	const config = {
+		placement: opts.placement,
+		strategy: "absolute",
+		middleware: middlewareArr
+	};
+	if (opts.options) Object.assign(config, opts.options);
+	const options = await computePosition(element, el, config);
+	{
+		const { x, y, placement, middlewareData } = options;
+		const { style } = el;
+		style.left = `${x}px`;
+		style.top = `${y}px`;
+		if (!opts.noArrow) {
+			const { x: arrowX, y: arrowY } = middlewareData.arrow;
+			const staticSide = {
+				top: "bottom",
+				right: "left",
+				bottom: "top",
+				left: "right"
+			}[placement.split("-")[0]];
+			Object.assign(arrEl.style, {
+				left: arrowX != null ? `${arrowX}px` : "",
+				top: arrowY != null ? `${arrowY}px` : "",
+				right: "",
+				bottom: "",
+				[staticSide]: "-4px"
+			});
+		}
+	}
+}
+var AppPopoverComponent = /* @__PURE__ */ defineComponent({
+	props: { opts: {
+		type: Object,
+		default: () => ({})
+	} },
+	setup(props, ctx) {
+		const ns = useNamespace("popover");
+		const isShow = ref(false);
+		const el = ref();
+		const arrEl = ref();
+		const customStyle = reactive({});
+		const { width, height, maxHeight } = props.opts;
+		if (width) if (isNumber(width)) customStyle.width = `${width}px`;
+		else customStyle.width = width;
+		if (height) if (isNumber(height)) customStyle.height = `${height}px`;
+		else customStyle.height = height;
+		if (maxHeight) if (isNumber(maxHeight)) customStyle.maxHeight = `${maxHeight}px`;
+		else customStyle.maxHeight = maxHeight;
+		const modal = new Modal({ dismiss: (data) => {
+			ctx.emit("dismiss", data);
+		} });
+		function dismiss(data) {
+			return modal.dismiss(data);
+		}
+		let cleanUpAutoUpdate = () => {};
+		onUnmounted(() => {
+			cleanUpAutoUpdate();
+		});
+		onClickOutside(el, () => {
+			dismiss({ ok: false });
+		});
+		/**
+		* 飘窗显示并计算位置
+		*
+		* @author chitanda
+		* @date 2022-11-09 12:11:04
+		* @param {HTMLElement} target
+		* @return {*}  {Promise<void>}
+		*/
+		async function present(target) {
+			isShow.value = true;
+			const updatePosition = () => {
+				return computePos(target, el.value, arrEl.value, props.opts);
+			};
+			cleanUpAutoUpdate = autoUpdate(target, el.value, updatePosition);
+		}
+		ctx.expose({
+			present,
+			dismiss
+		});
+		const onMaskClick = () => {
+			if (props.opts.autoClose === true) dismiss();
+		};
+		const { getAntdLocale } = useLocale();
+		return () => {
+			const slot = ctx.slots.default?.();
+			if (slot && slot.length > 0 && slot[0].props) slot[0].props.modal = modal;
+			const content = createVNode("div", {
+				"class": [
+					ns.b(),
+					ns.is("show", isShow.value),
+					props.opts.className
+				],
+				"ref": el,
+				"style": customStyle,
+				"onClick": (e) => {
+					e.stopPropagation();
+				}
+			}, [!props.opts.noArrow && createVNode("div", {
+				"class": [ns.e("arrow")],
+				"ref": arrEl
+			}, null), slot]);
+			if (props.opts.autoClose === true) return createVNode("div", {
+				"class": [ns.e("overlay")],
+				"onClick": () => {
+					onMaskClick();
+				}
+			}, [content]);
+			return createVNode(ConfigProvider, { "locale": getAntdLocale.value }, { default: () => [createVNode(DndProvider, { "backend": HTML5Backend }, _isSlot(content) ? content : { default: () => [content] })] });
+		};
+	}
+});
+/**
+* 创建飘窗
+*
+* @author chitanda
+* @date 2022-12-29 15:12:59
+* @export
+* @param {() => VNode} render
+* @param {IPopoverOptions<FloatingUIConfig>} [opts]
+* @return {*}  {OverlayPopoverContainer}
+*/
+function createPopover(render, opts) {
+	return new OverlayPopoverContainer(AppPopoverComponent, render, opts);
+}
+//#endregion
+export { createPopover };

package/es/components/copy-module-key/copy-module-key.vue.mjs

@@ -1,7 +1,7 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
 import copy_module_key_vue_vue_type_script_setup_true_name_copy_module_key_lang_default from "./copy-module-key.vue_vue_type_script_setup_true_name_copy-module-key_lang.mjs";
-import './copy-module-key.vue_vue_type_style_index_0_scoped_531b3cd2_lang.css';/* empty css                                                                     */
+import './copy-module-key.vue_vue_type_style_index_0_scoped_66e22862_lang.css';/* empty css                                                                     */
 //#region src/components/copy-module-key/copy-module-key.vue
-var copy_module_key_default = /* @__PURE__ */ _plugin_vue_export_helper_default(copy_module_key_vue_vue_type_script_setup_true_name_copy_module_key_lang_default, [["__scopeId", "data-v-531b3cd2"]]);
+var copy_module_key_default = /* @__PURE__ */ _plugin_vue_export_helper_default(copy_module_key_vue_vue_type_script_setup_true_name_copy_module_key_lang_default, [["__scopeId", "data-v-66e22862"]]);
 //#endregion
 export { copy_module_key_default as default };

package/es/components/copy-module-key/copy-module-key.vue_vue_type_script_setup_true_name_copy-module-key_lang.mjs

@@ -14,6 +14,7 @@ var _hoisted_3 = {
 	class: "copy-wrap"
 };
 var copy_module_key_vue_vue_type_script_setup_true_name_copy_module_key_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CopyModuleKey",
 	__name: "copy-module-key",
 	props: {
 		moduleKey: {

package/es/components/copy-module-key/{copy-module-key.vue_vue_type_style_index_0_scoped_531b3cd2_lang.css → copy-module-key.vue_vue_type_style_index_0_scoped_66e22862_lang.css}

@@ -1,8 +1,8 @@
 
-.copy-wrap[data-v-531b3cd2] {
+.copy-wrap[data-v-66e22862] {
   display: inline-block;
 }
-.iconfont.icon-fuzhi[data-v-531b3cd2] {
+.iconfont.icon-fuzhi[data-v-66e22862] {
   margin-left: 4px;
   line-height: 0.8;
   cursor: pointer;
@@ -10,10 +10,10 @@
   top: 2px;
 }
 .copy-wrap-tooltip {
-&[data-v-531b3cd2] {
+&[data-v-66e22862] {
   display: flex;
   }
-.copy-key[data-v-531b3cd2] {
+.copy-key[data-v-66e22862] {
     display: inline-block;
     width: 100%;
     overflow: hidden;

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

@@ -0,0 +1,2 @@
+import { default as FieldCascader } from './src/FieldCascader.vue';
+export { FieldCascader };

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

@@ -0,0 +1 @@
+import "./src/FieldCascader.vue.mjs";

package/es/components/field-cascader/src/FieldCascader.vue.d.ts

@@ -0,0 +1,87 @@
+import { PropType } from 'vue';
+import { comPropsType } from './hooks';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    fieldMetaList: {
+        type: PropType<comPropsType["fieldMetaList"]>;
+        default: () => comPropsType["fieldMetaList"];
+    };
+    filterFieldByFunction: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    FieldClick: (...args: any[]) => void;
+    labelChange: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    fieldMetaList: {
+        type: PropType<comPropsType["fieldMetaList"]>;
+        default: () => comPropsType["fieldMetaList"];
+    };
+    filterFieldByFunction: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onFieldClick?: ((...args: any[]) => any) | undefined;
+    onLabelChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    fieldMetaList: (import('@gct-paas/api/apaas').FieldMetaDTO & {
+        __bindFields: string[];
+    })[];
+    filterFieldByFunction: Function;
+    maxLevel: number;
+    value: string;
+    allowClear: boolean;
+    valueSeparator: string;
+    searchable: boolean;
+    expandToLeft: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/field-cascader/src/FieldCascader.vue.mjs

@@ -0,0 +1,6 @@
+import FieldCascader_vue_vue_type_script_setup_true_lang_default from "./FieldCascader.vue_vue_type_script_setup_true_lang.mjs";
+import './FieldCascader.vue_vue_type_style_index_0_lang.css';/* empty css                                                    */
+//#region src/components/field-cascader/src/FieldCascader.vue
+var FieldCascader_default = FieldCascader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FieldCascader_default as default };

package/es/components/field-cascader/src/FieldCascader.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,115 @@
+import { useFieldCascader } from "./hooks.mjs";
+import { createBlock, defineComponent, h, openBlock, ref, resolveComponent, unref } from "vue";
+//#region src/components/field-cascader/src/FieldCascader.vue?vue&type=script&setup=true&lang.ts
+var FieldCascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldCascader",
+	props: {
+		fieldMetaList: {
+			type: Object,
+			default: () => {
+				return [];
+			}
+		},
+		filterFieldByFunction: {
+			type: Function,
+			default: () => true
+		},
+		maxLevel: {
+			type: Number,
+			default: 3
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		valueSeparator: {
+			type: String,
+			default: "$"
+		},
+		searchable: {
+			type: Boolean,
+			default: true
+		},
+		expandToLeft: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["FieldClick", "labelChange"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const { visibleValue, getChildrenOptionsByKey, filterOptions, fieldValues, fieldMapByKey } = useFieldCascader(props, { onFieldClick });
+		const lastSelectedIds = ref();
+		const loadData = async (selectedOptions) => {
+			if (selectedOptions.map((i) => i.value).join(",") === lastSelectedIds.value) return;
+			lastSelectedIds.value = selectedOptions.slice(0, -1).map((item) => item.value).join(",");
+			const targetOption = selectedOptions.at(-1);
+			if (!targetOption.isExpandField) return;
+			await getChildrenOptionsByKey(targetOption.__props, selectedOptions.length + 1);
+		};
+		function dropdownVisibleChange(v) {
+			visibleValue.value = v;
+		}
+		function onFieldClick(row) {
+			const value = row?.__bindFields?.join(props.valueSeparator);
+			emit("FieldClick", value, row);
+			visibleValue.value = false;
+		}
+		function displayRender({ labels, selectedOptions }) {
+			const levelCount = selectedOptions.length;
+			let title = selectedOptions.filter((i) => i).map((i, index) => {
+				return index === levelCount - 1 ? i.title : i.titleWithRelation;
+			}).join(".");
+			if (!title && labels.length > 0)
+ /**过滤的时候会导致这边查不到 */
+			title = labels.map((k) => fieldMapByKey[k]?.name || "").join(".");
+			emit("labelChange", title);
+			return h("div", {
+				class: "ell",
+				title,
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+				}
+			}, title);
+		}
+		function change(v) {
+			if (v === void 0)
+ /**清空逻辑 */
+			emit("FieldClick", v, {});
+		}
+		return (_ctx, _cache) => {
+			const _component_a_cascader = resolveComponent("a-cascader");
+			return openBlock(), createBlock(_component_a_cascader, {
+				placeholder: "请选择",
+				options: unref(filterOptions),
+				"load-data": loadData,
+				"expand-trigger": "hover",
+				class: "gct-field-cascader-selector",
+				"dropdown-class-name": `gct-field-cascader ${props.expandToLeft ? "cascader-expand-to-left" : ""}`,
+				open: unref(visibleValue),
+				"allow-clear": __props.allowClear,
+				"display-render": displayRender,
+				value: unref(fieldValues),
+				placement: props.expandToLeft ? "topRight" : void 0,
+				onMousedown: _cache[0] || (_cache[0] = (e) => e.preventDefault()),
+				onDropdownVisibleChange: dropdownVisibleChange,
+				onChange: change
+			}, null, 8, [
+				"options",
+				"dropdown-class-name",
+				"open",
+				"allow-clear",
+				"value",
+				"placement"
+			]);
+		};
+	}
+});
+//#endregion
+export { FieldCascader_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-cascader/src/FieldCascader.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,69 @@
+.gct-field-cascader {
+  padding: 0;
+}
+.gct-field-cascader .ant-cascader-menu {
+  min-width: 180px;
+  max-width: 280px;
+  height: 280px;
+  margin: 0;
+  padding: 0;
+}
+.gct-field-cascader .ant-cascader-menu-item-disabled {
+  color: #8b8b8b;
+  cursor: default;
+}
+.gct-field-cascader .ant-cascader-menu-item {
+  padding: 0;
+  color: #1a1d23;
+}
+.gct-field-cascader .ant-cascader-menu-item[aria-checked='true'] .gct-option-label {
+  background-color: color-mix(in srgb, var(--ant-primary-color) 8%, transparent);
+  color: var(--ant-primary-color);
+}
+.gct-field-cascader .ant-cascader-menu-item:hover {
+  background-color: #fff;
+  font-weight: normal;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-expand-icon {
+  display: none;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-loading-icon {
+  display: none;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-label {
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 6px;
+  border-radius: 4px;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-label .iconfont {
+  color: #5a5f6b;
+  font-size: 14px;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-title {
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 6px;
+  color: #8b8b8b;
+}
+.gct-field-cascader .ant-cascader-menu-item-active {
+  background-color: #fff;
+  font-weight: normal;
+}
+.gct-field-cascader .ant-cascader-menu-item-active .gct-option-label {
+  background-color: #f2f5f8;
+}
+.gct-field-cascader .ant-cascader-menu-item-active .gct-option-label .iconfont {
+  color: var(--ant-primary-color);
+}
+.cascader-expand-to-left .ant-cascader-menus {
+  flex-direction: row-reverse;
+}
+.cascader-expand-to-left .ant-cascader-menus .ant-cascader-menu {
+  width: 230px;
+}

package/es/components/field-cascader/src/SearchInput.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    visibleValue: {
+        value: boolean;
+    };
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/components/field-cascader/src/SearchInput.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import SearchInput_vue_vue_type_script_setup_true_lang_default from "./SearchInput.vue_vue_type_script_setup_true_lang.mjs";
+import './SearchInput.vue_vue_type_style_index_0_scoped_512c4b38_lang.css';/* empty css                                                                  */
+//#region src/components/field-cascader/src/SearchInput.vue
+var SearchInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-512c4b38"]]);
+//#endregion
+export { SearchInput_default as default };

package/es/components/field-cascader/src/SearchInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,38 @@
+import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, resolveComponent, watch, withCtx, withModifiers } from "vue";
+//#region src/components/field-cascader/src/SearchInput.vue?vue&type=script&setup=true&lang.ts
+var SearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchInput",
+	props: { visibleValue: {} },
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const value = ref();
+		function changeValue() {
+			emit("change", value.value);
+		}
+		watch(() => props.visibleValue.value, (val) => {
+			if (!val) {
+				value.value = void 0;
+				emit("change", value.value);
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			return openBlock(), createElementBlock("div", {
+				class: "gct-field-cascader-search",
+				onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+			}, [createVNode(_component_a_input, {
+				value: value.value,
+				"onUpdate:value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+				placeholder: "搜索字段",
+				onChange: changeValue
+			}, {
+				prefix: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "iconfont icon-pad_search text-[#8B8B8B]" }, null, -1)])]),
+				_: 1
+			}, 8, ["value"])], 32);
+		};
+	}
+});
+//#endregion
+export { SearchInput_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-cascader/src/SearchInput.vue_vue_type_style_index_0_scoped_512c4b38_lang.css

@@ -0,0 +1,9 @@
+[data-v-512c4b38] .ant-input-affix-wrapper {
+  padding: 0 11px;
+  border: none;
+}
+.gct-field-cascader-search[data-v-512c4b38] {
+  box-sizing: border-box;
+  padding: 8px 0;
+  border-bottom: 1px solid #f2f5f8;
+}