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

package/es/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.mjs

@@ -1,239 +1,180 @@
-import { defineComponent, createVNode, ref, inject } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { useDrag, useDrop } from 'vue3-dnd';
-import { cloneDeep } from 'lodash-es';
-import { GCT_DND_INSERT_POS } from '../../constants/index.mjs';
+import { GCT_DND_INSERT_POS } from "../../constants/index.mjs";
 import './gct-dnd-item.css';/* empty css                   */
-
-const GctDndItem = /* @__PURE__ */ defineComponent({
-  name: 'GctDndItem',
-  props: {
-    config: {
-      type: Object,
-      required: true
-    },
-    // 数据所在位置下标
-    index: {
-      type: Number,
-      required: true
-    },
-    // 当前项数据
-    data: {
-      type: Object,
-      required: true
-    },
-    last: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['drop'],
-  setup(props, {
-    emit
-  }) {
-    const {
-      config
-    } = props;
-    const ns = useNamespace('dnd-item');
-    const rootRef = ref(null);
-    const isBeforeHover = ref(false);
-    const dropLineState = inject('vue3-dnd-drop-line-state');
-    // 通过悬浮时计算，放置的位置
-    const posState = ref(-1);
-    // 拖放配置，暂时无用，主要利用内部机制，避免悬浮时容器触发了放置
-    // 拖拽配置
-    const [collect, drag, preview] = useDrag({
-      type: config.group,
-      item: () => {
-        return {
-          index: props.index,
-          id: props.data.id,
-          data: props.data,
-          group: config.group,
-          mode: config.mode ?? 'move',
-          tagMap: config.tagMap ?? {},
-          types: []
-        };
-      },
-      collect: monitor => {
-        return {
-          canDrag: monitor.canDrag(),
-          isDragging: monitor.isDragging()
-        };
-      },
-      canDrag() {
-        if (config.isDrag === false) {
-          return false;
-        }
-        if (config.canDrag) {
-          return config.canDrag(props.data);
-        }
-        return true;
-      },
-      end: async (_, monitor) => {
-        const result = monitor.getDropResult();
-        if (result && result.asyncDrop) {
-          const res = await result.asyncDrop();
-          if (res.success === true && res.data) {
-            if (config.end) {
-              config.end(_, res);
-            }
-            if (config.add) {
-              config.add(res.data);
-            }
-            console.debug('drop success');
-          }
-        }
-      }
-    });
-    if (props.config.isDrop !== true) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const [_, drop] = useDrop({
-        accept: config.group,
-        canDrop() {
-          return false;
-        }
-      });
-      drop(rootRef);
-    } else {
-      const [dropCollect, drop] = useDrop({
-        accept: config.group,
-        collect(monitor) {
-          return {
-            handlerId: monitor.getHandlerId(),
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop(),
-            isShallowOver: monitor.isOver({
-              shallow: true
-            })
-          };
-        },
-        canDrop(item, monitor) {
-          if (collect.value.isDragging === true) {
-            return false;
-          }
-          return item.id !== props.data.id && monitor.isOver({
-            shallow: true
-          });
-        },
-        hover(_item, monitor) {
-          if (monitor.canDrop() === false) {
-            return;
-          }
-          const isOver = monitor.isOver({
-            shallow: true
-          });
-          if (isOver) {
-            const rect = rootRef.value.getBoundingClientRect();
-            const offset = monitor.getClientOffset();
-            // 放置线计算偏移量
-            const dropOffset = config.offset ?? 0;
-            let difference = 0;
-            if (config.direction === 'vertical') {
-              const {
-                top,
-                height
-              } = rect;
-              const {
-                y
-              } = offset;
-              const half = height / 2;
-              difference = y - top - half;
-              // 小于偏移量，则不处理
-              if (Math.abs(difference) < dropOffset) {
-                return;
-              }
-              if (difference < 0) {
-                isBeforeHover.value = true;
-              } else {
-                isBeforeHover.value = false;
-              }
-            } else if (config.direction === 'horizontal') {
-              const {
-                left,
-                width
-              } = rect;
-              const {
-                x
-              } = offset;
-              const half = width / 2;
-              difference = x - left - half;
-              // 小于偏移量，则不处理
-              if (Math.abs(difference) < dropOffset) {
-                return;
-              }
-              if (difference < 0) {
-                isBeforeHover.value = true;
-              } else {
-                isBeforeHover.value = false;
-              }
-            }
-            dropLineState.activeKey = props.data.id;
-            dropLineState.isBeforeHover = isBeforeHover.value;
-          } else {
-            dropLineState.activeKey = '';
-          }
-        },
-        drop: (item, monitor) => {
-          // 一旦放置，操控线的激活项就置空
-          dropLineState.activeKey = '';
-          if (dropCollect.value.isShallowOver !== true || monitor.canDrop() === false) {
-            return;
-          }
-          const callback = async () => {
-            let data = item.data;
-            if (config.drop) {
-              data = await config.drop(item);
-              if (!data) {
-                return {
-                  group: config.group,
-                  cfg: cloneDeep(props.config),
-                  success: false
-                };
-              }
-            }
-            onDrop(isBeforeHover.value ? GCT_DND_INSERT_POS.BEFORE : GCT_DND_INSERT_POS.AFTER, data);
-            return {
-              group: config.group,
-              success: true,
-              cfg: cloneDeep(props.config),
-              data
-            };
-          };
-          return {
-            asyncDrop: callback
-          };
-        }
-      });
-      drop(rootRef);
-    }
-    if (!config.handle && config.isDrag !== false) {
-      drag(rootRef);
-    }
-    preview(rootRef);
-    function onDrop(insertPos, data) {
-      emit('drop', insertPos, data);
-    }
-    return {
-      ns,
-      rootRef,
-      posState,
-      collect,
-      onDrop,
-      drag
-    };
-  },
-  render() {
-    const itemProps = {
-      index: this.index,
-      data: this.data,
-      drag: this.drag
-    };
-    return createVNode("div", {
-      "ref": "rootRef",
-      "class": [this.ns.b(), this.ns.is('dragging', this.collect.isDragging), this.ns.is('not-drag', this.collect.canDrag === false)]
-    }, [this.$slots.default?.(itemProps)]);
-  }
+import { createVNode, defineComponent, inject, ref } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { useDrag, useDrop } from "vue3-dnd";
+//#region src/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.tsx
+var GctDndItem = /* @__PURE__ */ defineComponent({
+	name: "GctDndItem",
+	props: {
+		config: {
+			type: Object,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		last: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["drop"],
+	setup(props, { emit }) {
+		const { config } = props;
+		const ns = useNamespace("dnd-item");
+		const rootRef = ref(null);
+		const isBeforeHover = ref(false);
+		const dropLineState = inject("vue3-dnd-drop-line-state");
+		const posState = ref(-1);
+		const [collect, drag, preview] = useDrag({
+			type: config.group,
+			item: () => {
+				return {
+					index: props.index,
+					id: props.data.id,
+					data: props.data,
+					group: config.group,
+					mode: config.mode ?? "move",
+					tagMap: config.tagMap ?? {},
+					types: []
+				};
+			},
+			collect: (monitor) => {
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging: monitor.isDragging()
+				};
+			},
+			canDrag() {
+				if (config.isDrag === false) return false;
+				if (config.canDrag) return config.canDrag(props.data);
+				return true;
+			},
+			end: async (_, monitor) => {
+				const result = monitor.getDropResult();
+				if (result && result.asyncDrop) {
+					const res = await result.asyncDrop();
+					if (res.success === true && res.data) {
+						if (config.end) config.end(_, res);
+						if (config.add) config.add(res.data);
+						console.debug("drop success");
+					}
+				}
+			}
+		});
+		if (props.config.isDrop !== true) {
+			const [_, drop] = useDrop({
+				accept: config.group,
+				canDrop() {
+					return false;
+				}
+			});
+			drop(rootRef);
+		} else {
+			const [dropCollect, drop] = useDrop({
+				accept: config.group,
+				collect(monitor) {
+					return {
+						handlerId: monitor.getHandlerId(),
+						isOver: monitor.isOver(),
+						canDrop: monitor.canDrop(),
+						isShallowOver: monitor.isOver({ shallow: true })
+					};
+				},
+				canDrop(item, monitor) {
+					if (collect.value.isDragging === true) return false;
+					return item.id !== props.data.id && monitor.isOver({ shallow: true });
+				},
+				hover(_item, monitor) {
+					if (monitor.canDrop() === false) return;
+					if (monitor.isOver({ shallow: true })) {
+						const rect = rootRef.value.getBoundingClientRect();
+						const offset = monitor.getClientOffset();
+						const dropOffset = config.offset ?? 0;
+						let difference = 0;
+						if (config.direction === "vertical") {
+							const { top, height } = rect;
+							const { y } = offset;
+							const half = height / 2;
+							difference = y - top - half;
+							if (Math.abs(difference) < dropOffset) return;
+							if (difference < 0) isBeforeHover.value = true;
+							else isBeforeHover.value = false;
+						} else if (config.direction === "horizontal") {
+							const { left, width } = rect;
+							const { x } = offset;
+							const half = width / 2;
+							difference = x - left - half;
+							if (Math.abs(difference) < dropOffset) return;
+							if (difference < 0) isBeforeHover.value = true;
+							else isBeforeHover.value = false;
+						}
+						dropLineState.activeKey = props.data.id;
+						dropLineState.isBeforeHover = isBeforeHover.value;
+					} else dropLineState.activeKey = "";
+				},
+				drop: (item, monitor) => {
+					dropLineState.activeKey = "";
+					if (dropCollect.value.isShallowOver !== true || monitor.canDrop() === false) return;
+					const callback = async () => {
+						let data = item.data;
+						if (config.drop) {
+							data = await config.drop(item);
+							if (!data) return {
+								group: config.group,
+								cfg: cloneDeep(props.config),
+								success: false
+							};
+						}
+						onDrop(isBeforeHover.value ? GCT_DND_INSERT_POS.BEFORE : GCT_DND_INSERT_POS.AFTER, data);
+						return {
+							group: config.group,
+							success: true,
+							cfg: cloneDeep(props.config),
+							data
+						};
+					};
+					return { asyncDrop: callback };
+				}
+			});
+			drop(rootRef);
+		}
+		if (!config.handle && config.isDrag !== false) drag(rootRef);
+		preview(rootRef);
+		function onDrop(insertPos, data) {
+			emit("drop", insertPos, data);
+		}
+		return {
+			ns,
+			rootRef,
+			posState,
+			collect,
+			onDrop,
+			drag
+		};
+	},
+	render() {
+		const itemProps = {
+			index: this.index,
+			data: this.data,
+			drag: this.drag
+		};
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [
+				this.ns.b(),
+				this.ns.is("dragging", this.collect.isDragging),
+				this.ns.is("not-drag", this.collect.canDrag === false)
+			]
+		}, [this.$slots.default?.(itemProps)]);
+	}
 });
-
-export { GctDndItem };
+//#endregion
+export { GctDndItem as default };

package/es/modules/gct-dnd/constants/index.mjs

@@ -1,20 +1,12 @@
-const GCT_DND_INSERT_POS = {
-  /**
-   * 插入第一个
-   */
-  FIRST: "first",
-  /**
-   * 插入前
-   */
-  BEFORE: "before",
-  /**
-   * 插入后
-   */
-  AFTER: "after",
-  /**
-   * 插入最后
-   */
-  LAST: "last"
+//#region src/modules/gct-dnd/constants/index.ts
+/**
+* 拖拽放置时的插入位置
+*/
+var GCT_DND_INSERT_POS = {
+	FIRST: "first",
+	BEFORE: "before",
+	AFTER: "after",
+	LAST: "last"
 };
-
+//#endregion
 export { GCT_DND_INSERT_POS };

package/es/modules/gct-dnd/index.mjs

@@ -0,0 +1,4 @@
+import "./constants/index.mjs";
+import "./components/gct-dnd-item/gct-dnd-item.mjs";
+import "./components/gct-dnd-drop-line/gct-dnd-drop-line.mjs";
+import "./components/gct-dnd-container/gct-dnd-container.mjs";

package/es/modules/gct-form/components/flex-container/flex-container.css

@@ -0,0 +1,67 @@
+@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-flex-container {
+  display: flex;
+}

package/es/modules/gct-form/components/flex-container/flex-container.d.ts

@@ -0,0 +1,14 @@
+import { PropType } from 'vue';
+import { IFlexContainer, IFormGroup } from '../../interface';
+/**
+ * flex 布局容器
+ */
+export declare const FlexContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    layout: PropType<IFlexContainer>;
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    getStyle: () => IData;
+    getItemStyle: (model: IFormGroup) => IData;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    layout: PropType<IFlexContainer>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/components/flex-container/flex-container.mjs

@@ -0,0 +1,61 @@
+import { FlexItem } from "../flex-item/flex-item.mjs";
+import './flex-container.css';/* empty css                     */
+import { createVNode, defineComponent, isVNode } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/components/flex-container/flex-container.tsx
+/**
+* flex 布局容器
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var FlexContainer = /* @__PURE__ */ defineComponent({
+	name: "FlexContainer",
+	props: { layout: Object },
+	setup(props) {
+		const ns = useNamespace("flex-container");
+		const getStyle = () => {
+			const style = {};
+			if (props.layout) {
+				const { alignContent, alignItems, flexDirection, flexWrap, justifyContent } = props.layout;
+				if (alignContent != null) style.alignContent = alignContent;
+				if (alignItems != null) style.alignItems = alignItems;
+				if (flexDirection != null) style.flexDirection = flexDirection;
+				if (flexWrap != null) style.flexWrap = flexWrap;
+				if (justifyContent != null) style.justifyContent = justifyContent;
+			}
+			return style;
+		};
+		const getItemStyle = (model) => {
+			const style = {};
+			if (model) {
+				const { width, height } = model;
+				if (width != null) style.width = width;
+				if (height != null) style.height = height;
+			}
+			return style;
+		};
+		return {
+			ns,
+			getStyle,
+			getItemStyle
+		};
+	},
+	render() {
+		let items = this.$slots.default?.() || [];
+		if (items.length > 0) items = items[0].children || [];
+		return createVNode("div", {
+			"class": this.ns.b(),
+			"style": this.getStyle()
+		}, [items.map((item) => {
+			if (!item) return null;
+			const model = item.props.model.flexItem;
+			return createVNode(FlexItem, {
+				"layout": model,
+				"style": this.getItemStyle(item.props.model)
+			}, _isSlot(item) ? item : { default: () => [item] });
+		})]);
+	}
+});
+//#endregion
+export { FlexContainer };

package/es/modules/gct-form/components/flex-item/flex-item.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { IFlexItem } from '../../interface';
+/**
+ * flex 布局容器项
+ */
+export declare const FlexItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    layout: PropType<IFlexItem>;
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    getStyle: () => IData;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    layout: PropType<IFlexItem>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/components/flex-item/flex-item.mjs

@@ -0,0 +1,37 @@
+import { createVNode, defineComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/components/flex-item/flex-item.tsx
+/**
+* flex 布局容器项
+*/
+var FlexItem = /* @__PURE__ */ defineComponent({
+	name: "FlexItem",
+	props: { layout: Object },
+	setup(props) {
+		const ns = useNamespace("flex-item");
+		const getStyle = () => {
+			const style = {};
+			if (props.layout) {
+				const { order, alignSelf, flexBasis, flexGrow, flexShrink } = props.layout;
+				if (order != null) style["order"] = order;
+				if (alignSelf != null) style["align-self"] = alignSelf;
+				if (flexBasis != null) style["flex-basis"] = flexBasis;
+				if (flexGrow != null) style["flex-grow"] = flexGrow;
+				if (flexShrink != null) style["flex-shrink"] = flexShrink;
+			}
+			return style;
+		};
+		return {
+			ns,
+			getStyle
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"class": this.ns.b(),
+			"style": this.getStyle()
+		}, [this.$slots.default?.()]);
+	}
+});
+//#endregion
+export { FlexItem };

package/es/modules/gct-form/components/grid-container/grid-container.d.ts

@@ -0,0 +1,10 @@
+import { PropType } from 'vue';
+import { IGridContainer } from '../../interface';
+/**
+ * 栅格布局
+ */
+export declare const GridContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    layout: PropType<IGridContainer>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    layout: PropType<IGridContainer>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;