@gct-paas/core-web 0.1.4-dev.11 → 0.1.4-dev.13

package/es/components/svg-icon/svg-icon.vue_vue_type_script_setup_true_name_SvgIcon_lang.mjs

@@ -0,0 +1,52 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/svg-icon/svg-icon.vue?vue&type=script&setup=true&name=SvgIcon&lang.ts
+var _hoisted_1 = ["xlink:href"];
+var svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "svg-icon",
+	props: {
+		prefix: {
+			type: String,
+			default: "icon"
+		},
+		name: {
+			type: String,
+			required: true
+		},
+		size: {
+			type: [Number, String],
+			default: 16
+		},
+		spin: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const ns = useNamespace("svg-icon");
+		const props = __props;
+		const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+		const getStyle = computed(() => {
+			const { size } = props;
+			let s = `${size}`;
+			s = `${s.replace("px", "")}px`;
+			return {
+				width: s,
+				height: s
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				class: normalizeClass([
+					_ctx.$attrs.class,
+					unref(ns).b(),
+					__props.spin && unref(ns).m("spin")
+				]),
+				style: normalizeStyle(getStyle.value),
+				"aria-hidden": "true"
+			}, [createElementVNode("use", { "xlink:href": symbolId.value }, null, 8, _hoisted_1)], 6);
+		};
+	}
+});
+//#endregion
+export { svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default as default };

package/es/components/vue3-grid-dnd-item/vue3-grid-dnd-item.css

@@ -0,0 +1,103 @@
+@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-vue3-grid-dnd-item {
+  opacity: 0;
+  margin-left: -6px;
+}
+
+.vxe-table--render-default .vxe-body--row:hover .gct-vue3-grid-dnd-item {
+  opacity: 1;
+}
+.vxe-table--render-default .vxe-body--row.row--current:hover .gct-vue3-grid-dnd-item {
+  opacity: 0;
+}
+.vxe-table--render-default .vxe-body--row.is-dragging {
+  opacity: 0.3;
+}
+.vxe-table--render-default .vxe-body--row.is-over {
+  position: relative;
+}
+.vxe-table--render-default .vxe-body--row.is-over.is-before:first-child::after {
+  top: 0;
+}
+.vxe-table--render-default .vxe-body--row.is-over.is-before::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: -1px;
+  width: 100%;
+  border-bottom: 2px solid var(--ant-primary-color);
+}
+.vxe-table--render-default .vxe-body--row.is-over.is-after::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  width: 100%;
+  border-bottom: 2px solid var(--ant-primary-color);
+}
+.vxe-table--render-default .vxe-body--row.is-over.is-after:last-child::after {
+  bottom: 0;
+}

package/es/components/vue3-grid-dnd-item/vue3-grid-dnd-item.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+export declare const Vue3GridDndItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    move: {
+        type: PropType<(isBefore: boolean, row: IObject, dragData: IObject) => void>;
+    };
+    end: {
+        type: PropType<(data: IObject) => void>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    dropCollect: import('vue').Ref<{
+        handlerId: string;
+        canDrop: boolean;
+        isShallowOver: boolean;
+    }, {
+        handlerId: string;
+        canDrop: boolean;
+        isShallowOver: boolean;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    move: {
+        type: PropType<(isBefore: boolean, row: IObject, dragData: IObject) => void>;
+    };
+    end: {
+        type: PropType<(data: IObject) => void>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/vue3-grid-dnd-item/vue3-grid-dnd-item.mjs

@@ -0,0 +1,122 @@
+import './vue3-grid-dnd-item.css';/* empty css                         */
+import { computed, createVNode, defineComponent, ref, watch } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { useDrag, useDrop } from "vue3-dnd";
+//#region src/components/vue3-grid-dnd-item/vue3-grid-dnd-item.tsx
+var Vue3GridDndItem = /* @__PURE__ */ defineComponent({
+	name: "Vue3GridDndItem",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		move: { type: Function },
+		end: { type: Function }
+	},
+	setup(props) {
+		const ns = useNamespace("vue3-grid-dnd-item");
+		/**
+		* 找到指定父
+		*
+		* @author zhanghanrui
+		* @date 2024-09-26 10:09:34
+		* @param {HTMLElement} node
+		* @param {string} tag
+		* @return {*}  {(HTMLElement | null)}
+		*/
+		function findParent(node, tag) {
+			if (node && node.classList.contains(tag)) return node;
+			return findParent(node.parentElement, tag);
+		}
+		const rootRef = ref(null);
+		const dragRef = computed(() => {
+			if (rootRef.value) {
+				const node = findParent(rootRef.value, "vxe-body--row");
+				if (node) return node;
+			}
+			return null;
+		});
+		const isBeforeHover = ref(false);
+		const [dragCollect, drag, preview] = useDrag({
+			type: "vue3-grid-dnd-item",
+			item: () => {
+				return props.data;
+			},
+			collect: (monitor) => {
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging: monitor.isDragging()
+				};
+			},
+			end(draggedItem) {
+				if (props.end) props.end(draggedItem);
+			}
+		});
+		const [dropCollect, drop] = useDrop({
+			accept: "vue3-grid-dnd-item",
+			collect(monitor) {
+				return {
+					handlerId: monitor.getHandlerId(),
+					canDrop: monitor.canDrop(),
+					isShallowOver: monitor.isOver({ shallow: true })
+				};
+			},
+			hover(item, monitor) {
+				if (monitor.canDrop() === false || dragCollect.value.isDragging === true) return;
+				if (props.data === item) return;
+				if (monitor.isOver({ shallow: true })) {
+					const rect = rootRef.value.getBoundingClientRect();
+					const offset = monitor.getClientOffset();
+					const { top, height } = rect;
+					const { y } = offset;
+					const half = height / 2;
+					if (y - top - half < 0) isBeforeHover.value = true;
+					else isBeforeHover.value = false;
+				}
+			},
+			canDrop() {
+				if (dragCollect.value.isDragging === true) return false;
+				return true;
+			},
+			drop(item, monitor) {
+				if (monitor.canDrop() === false || dragCollect.value.isDragging === true) return;
+				if (props.data === item) return;
+				if (props.move) props.move(isBeforeHover.value, props.data, item);
+			}
+		});
+		drag(rootRef);
+		drop(dragRef);
+		preview(dragRef);
+		watch([dropCollect, isBeforeHover], () => {
+			if (!dragRef.value) return;
+			dragRef.value.classList.remove(ns.is("over", true), ns.is("before", true), ns.is("after", true));
+			if (dropCollect.value.canDrop && dropCollect.value.isShallowOver) {
+				const n = ns.is("over", true);
+				const x = isBeforeHover.value ? ns.is("before", true) : ns.is("after", true);
+				dragRef.value.classList.add(n, x);
+			}
+		});
+		watch(dragCollect, () => {
+			if (!dragRef.value) return;
+			dragRef.value.classList.remove(ns.is("dragging", true));
+			if (dragCollect.value.isDragging) dragRef.value.classList.add(ns.is("dragging", true));
+		});
+		return {
+			ns,
+			rootRef,
+			dropCollect
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": this.ns.b()
+		}, [this.$slots.default?.()]);
+	}
+});
+//#endregion
+export { Vue3GridDndItem };

package/es/components/wujie-container/wujie-container.mjs

@@ -1,84 +1,61 @@
-import { defineComponent, useAttrs, computed, onUnmounted, createVNode, resolveComponent, mergeProps } from 'vue';
-import { useNamespace, useUserStore, getToken } from '@gct-paas/core';
-import WujieVue3 from 'wujie-vue3';
 import './wujie-container.css';/* empty css                      */
-
-const {
-  destroyApp
-} = WujieVue3;
-const WuJieContainer = /* @__PURE__ */ defineComponent({
-  name: 'WuJieContainer',
-  props: {
-    wuJieName: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('wujie-container');
-    const attr = useAttrs();
-
-    // 加载脚本之前
-    function beforeLoad(win) {
-      Object.defineProperty(win, 'pSystem', {
-        get: () => {
-          return window.System;
-        }
-      });
-      Object.defineProperty(win, '_gct', {
-        get: () => {
-          return window._gct;
-        }
-      });
-      Object.defineProperty(win, '_api', {
-        get: () => {
-          return window._api;
-        }
-      });
-    }
-
-    // 加载脚本之后
-    function beforeMount(win) {
-      console.debug('beforeMount System', win.System);
-      console.debug('beforeMount _gct', win._gct);
-      console.debug('beforeMount _api', win._api);
-    }
-
-    // 加载脚本失败
-    function loadError(win) {
-      console.debug('loadError', win.System);
-    }
-    const {
-      userInfo
-    } = useUserStore();
-    const token = getToken();
-    const _props = computed(() => {
-      return {
-        appInfo: _gct.store.appInfo,
-        userInfo: userInfo,
-        token,
-        ...(attr.props ?? {})
-      };
-    });
-    onUnmounted(() => {
-      // 如果是 alive 模式，则不销毁应用
-      if (attr.alive === true) {
-        return;
-      }
-      destroyApp(props.wuJieName);
-    });
-    return () => {
-      return createVNode(resolveComponent("wujieVue"), mergeProps({
-        "class": ns.b(),
-        "name": props.wuJieName,
-        "beforeLoad": beforeLoad,
-        "beforeMount": beforeMount,
-        "loadError": loadError
-      }, attr, {
-        "props": _props.value
-      }), null);
-    };
-  }
+import { computed, createVNode, defineComponent, mergeProps, onUnmounted, resolveComponent, useAttrs } from "vue";
+import { getToken, useNamespace, useUserStore } from "@gct-paas/core";
+import WujieVue3 from "wujie-vue3";
+//#region src/components/wujie-container/wujie-container.tsx
+var { destroyApp } = WujieVue3;
+var WuJieContainer = /* @__PURE__ */ defineComponent({
+	name: "WuJieContainer",
+	props: { wuJieName: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const ns = useNamespace("wujie-container");
+		const attr = useAttrs();
+		function beforeLoad(win) {
+			Object.defineProperty(win, "pSystem", { get: () => {
+				return window.System;
+			} });
+			Object.defineProperty(win, "_gct", { get: () => {
+				return window._gct;
+			} });
+			Object.defineProperty(win, "_api", { get: () => {
+				return window._api;
+			} });
+		}
+		function beforeMount(win) {
+			console.debug("beforeMount System", win.System);
+			console.debug("beforeMount _gct", win._gct);
+			console.debug("beforeMount _api", win._api);
+		}
+		function loadError(win) {
+			console.debug("loadError", win.System);
+		}
+		const { userInfo } = useUserStore();
+		const token = getToken();
+		const _props = computed(() => {
+			return {
+				appInfo: _gct.store.appInfo,
+				userInfo,
+				token,
+				...attr.props ?? {}
+			};
+		});
+		onUnmounted(() => {
+			if (attr.alive === true) return;
+			destroyApp(props.wuJieName);
+		});
+		return () => {
+			return createVNode(resolveComponent("wujieVue"), mergeProps({
+				"class": ns.b(),
+				"name": props.wuJieName,
+				"beforeLoad": beforeLoad,
+				"beforeMount": beforeMount,
+				"loadError": loadError
+			}, attr, { "props": _props.value }), null);
+		};
+	}
 });
-
+//#endregion
 export { WuJieContainer };

package/es/create-app-vue.mjs

@@ -1,22 +1,30 @@
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
-import 'overlayscrollbars/overlayscrollbars.css';
-import Comps from './components/index.mjs';
-import * as Icons from '@ant-design/icons-vue';
-import { setupDirectives } from './directives/index.mjs';
-import ColorPicker from './modules/color-picker/src/ColorPicker.vue.mjs';
-import GctForm from './modules/gct-form/index.mjs';
-import GctTable from './modules/gct-table/index.mjs';
-
+import components_default from "./components/index.mjs";
+import gct_form_default from "./modules/gct-form/index.mjs";
+import gct_table_default from "./modules/gct-table/index.mjs";
+import ColorPicker_default from "./modules/color-picker/src/ColorPicker.vue.mjs";
+import "./modules/color-picker/index.mjs";
+import { setupDirectives } from "./directives/index.mjs";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
+import * as Icons from "@ant-design/icons-vue";
+import "overlayscrollbars/overlayscrollbars.css";
+//#region src/create-app-vue.ts
+/**
+* 核心 Web 库的外部使用注册，在创建 app 时调用
+*
+* @export
+* @param {App} app
+* @return {*}  {Promise<void>}
+*/
 async function coreWebCreateAppVue(app) {
-  setupDirectives(app);
-  app.use(Comps);
-  Object.entries(Icons).forEach(([key, component]) => {
-    app.component(key, component);
-  });
-  app.component(ColorPicker.name, ColorPicker);
-  app.component(OverlayScrollbarsComponent.__name, OverlayScrollbarsComponent);
-  app.use(GctForm);
-  app.use(GctTable);
+	setupDirectives(app);
+	app.use(components_default);
+	Object.entries(Icons).forEach(([key, component]) => {
+		app.component(key, component);
+	});
+	app.component(ColorPicker_default.name, ColorPicker_default);
+	app.component(OverlayScrollbarsComponent.__name, OverlayScrollbarsComponent);
+	app.use(gct_form_default);
+	app.use(gct_table_default);
 }
-
+//#endregion
 export { coreWebCreateAppVue };

package/es/directives/drag-resize.mjs

@@ -1,42 +1,41 @@
-const dragResizeDirective = {
-  mounted(el, binding) {
-    if (!binding.value) return false;
-    binding.instance?.$nextTick(() => {
-      const minWidth = binding.value;
-      const dragDom = el;
-      const resizeElL = document.createElement("div");
-      dragDom.appendChild(resizeElL);
-      resizeElL.style.cursor = "col-resize";
-      resizeElL.style.position = "absolute";
-      resizeElL.style.height = "100%";
-      resizeElL.style.width = "5px";
-      resizeElL.style.right = "0px";
-      resizeElL.style.top = "0px";
-      resizeElL.style.background = "rgba(255, 0, 0, 0);";
-      resizeElL.onmousedown = (e) => {
-        const elW = dragDom.clientWidth;
-        const clientX = e.clientX;
-        document.onmousemove = function(e2) {
-          e2.preventDefault();
-          const l = e2.clientX - clientX;
-          let nw = elW + l;
-          nw = nw < minWidth ? minWidth : nw;
-          dragDom.setAttribute("style", `width:${nw}px !important;`);
-          const resizeEvent = new CustomEvent("drag-resize-width", {
-            detail: { width: nw, resizing: true }
-          });
-          el.dispatchEvent(resizeEvent);
-        };
-        document.onmouseup = function() {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      };
-    });
-  }
-};
+//#region src/directives/drag-resize.ts
+var dragResizeDirective = { mounted(el, binding) {
+	if (!binding.value) return false;
+	binding.instance?.$nextTick(() => {
+		const minWidth = binding.value;
+		const dragDom = el;
+		const resizeElL = document.createElement("div");
+		dragDom.appendChild(resizeElL);
+		resizeElL.style.cursor = "col-resize";
+		resizeElL.style.position = "absolute";
+		resizeElL.style.height = "100%";
+		resizeElL.style.width = "5px";
+		resizeElL.style.right = "0px";
+		resizeElL.style.top = "0px";
+		resizeElL.style.background = "rgba(255, 0, 0, 0);";
+		resizeElL.onmousedown = (e) => {
+			const elW = dragDom.clientWidth;
+			const clientX = e.clientX;
+			document.onmousemove = function(e) {
+				e.preventDefault();
+				let nw = elW + (e.clientX - clientX);
+				nw = nw < minWidth ? minWidth : nw;
+				dragDom.setAttribute("style", `width:${nw}px !important;`);
+				const resizeEvent = new CustomEvent("drag-resize-width", { detail: {
+					width: nw,
+					resizing: true
+				} });
+				el.dispatchEvent(resizeEvent);
+			};
+			document.onmouseup = function() {
+				document.onmousemove = null;
+				document.onmouseup = null;
+			};
+		};
+	});
+} };
 function setupDragResizeDirective(app) {
-  app.directive("dragResize", dragResizeDirective);
+	app.directive("dragResize", dragResizeDirective);
 }
-
+//#endregion
 export { setupDragResizeDirective };

package/es/directives/ellipsis-title.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+export declare const EllipsisTitle: {
+    mounted(el: IObject, binding: IObject): void;
+    beforeUnmount(el: IObject): void;
+};
+/**内容溢出出现title */
+export declare function setupEllipsisTitleDirective(app: App): void;

package/es/directives/ellipsis-title.mjs

@@ -0,0 +1,21 @@
+//#region src/directives/ellipsis-title.ts
+var EllipsisTitle = {
+	mounted(el, binding) {
+		el.__ellipsisHandler__ = () => {
+			const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+			const title = binding.value;
+			if (isOverflowing) el.setAttribute("title", title);
+			else el.removeAttribute("title");
+		};
+		el.addEventListener("mouseenter", el.__ellipsisHandler__);
+	},
+	beforeUnmount(el) {
+		if (el.__ellipsisHandler__) el.removeEventListener("mouseenter", el.__ellipsisHandler__);
+	}
+};
+/**内容溢出出现title */
+function setupEllipsisTitleDirective(app) {
+	app.directive("ellipsis-title", EllipsisTitle);
+}
+//#endregion
+export { setupEllipsisTitleDirective };

package/es/directives/index.mjs

@@ -1,9 +1,17 @@
-import { setupDragResizeDirective } from './drag-resize.mjs';
-import { setupLoadingDirective } from './target-loading.mjs';
-
+import { setupDragResizeDirective } from "./drag-resize.mjs";
+import { setupEllipsisTitleDirective } from "./ellipsis-title.mjs";
+import { setupLoadingDirective } from "./target-loading.mjs";
+//#region src/directives/index.ts
+/**
+* 注册全局通用指令
+*
+* @export
+* @param {App} app
+*/
 function setupDirectives(app) {
-  setupDragResizeDirective(app);
-  setupLoadingDirective(app);
+	setupDragResizeDirective(app);
+	setupEllipsisTitleDirective(app);
+	setupLoadingDirective(app);
 }
-
+//#endregion
 export { setupDirectives };