@gct-paas/core-web 0.1.4-dev.9 → 0.1.5-dev.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.css

@@ -0,0 +1,74 @@
+@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-wujie-container {
+  height: 100%;
+  width: 100%;
+}
+.gct-wujie-container .__vue-devtools-container__ {
+  display: none;
+}
+.gct-wujie-container iframe {
+  border: 0;
+}

package/es/components/wujie-container/wujie-container.d.ts

@@ -0,0 +1,11 @@
+export declare const WuJieContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    wuJieName: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    wuJieName: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,61 @@
+import './wujie-container.css';/* empty css                      */
+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,17 +1,32 @@
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
-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 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 Antdv from "ant-design-vue";
+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(Antdv);
+	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 };

package/es/directives/target-loading.mjs

@@ -1,40 +1,32 @@
-import '../modules/target-loading/src/target-loading.vue.mjs';
-import '../modules/target-loading/src/target-loading.css';/* empty css                                                 */
-import 'vue';
-import { createLoading } from '../modules/target-loading/src/createLoading.mjs';
-
-const loadingDirective = {
-  mounted(el, binding) {
-    const tip = el.getAttribute("loading-tip");
-    const background = el.getAttribute("loading-background");
-    const size = el.getAttribute("loading-size");
-    const fullscreen = !!binding.modifiers.fullscreen;
-    const instance = createLoading(
-      {
-        tip,
-        background,
-        size: size || "large",
-        loading: !!binding.value,
-        absolute: !fullscreen
-      },
-      fullscreen ? document.body : el
-    );
-    el.instance = instance;
-  },
-  updated(el, binding) {
-    const instance = el.instance;
-    if (!instance) return;
-    instance.setTip(el.getAttribute("loading-tip"));
-    if (binding.oldValue !== binding.value) {
-      instance.setLoading?.(binding.value && !instance.loading);
-    }
-  },
-  unmounted(el) {
-    el?.instance?.close();
-  }
+import { createLoading } from "../modules/target-loading/src/createLoading.mjs";
+import "../modules/target-loading/index.mjs";
+//#region src/directives/target-loading.ts
+var loadingDirective = {
+	mounted(el, binding) {
+		const tip = el.getAttribute("loading-tip");
+		const background = el.getAttribute("loading-background");
+		const size = el.getAttribute("loading-size");
+		const fullscreen = !!binding.modifiers.fullscreen;
+		el.instance = createLoading({
+			tip,
+			background,
+			size: size || "large",
+			loading: !!binding.value,
+			absolute: !fullscreen
+		}, fullscreen ? document.body : el);
+	},
+	updated(el, binding) {
+		const instance = el.instance;
+		if (!instance) return;
+		instance.setTip(el.getAttribute("loading-tip"));
+		if (binding.oldValue !== binding.value) instance.setLoading?.(binding.value && !instance.loading);
+	},
+	unmounted(el) {
+		el?.instance?.close();
+	}
 };
 function setupLoadingDirective(app) {
-  app.directive("target-loading", loadingDirective);
+	app.directive("target-loading", loadingDirective);
 }
-
+//#endregion
 export { setupLoadingDirective };

package/es/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useLocale } from './useLocale';
 export { useTheme } from './useTheme';
 export { UseDragByLine } from './useDragLine';
+export * from './useFile';

package/es/hooks/index.mjs

@@ -0,0 +1,4 @@
+import "./useLocale.mjs";
+import "./useTheme.mjs";
+import "./useDragLine.mjs";
+import "./useFile.mjs";