@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.8

package/es/components/design/design-drop-container/design-drop-container.d.ts

@@ -0,0 +1,87 @@
+import { PropType } from 'vue';
+import { IDesignNode, IDesignNodeData, IDropCollect } from '../../../interface';
+export declare const DesignDropContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    items: {
+        type: {
+            (arrayLength: number): IDesignNode<IDesignNodeData>[];
+            (...items: IDesignNode<IDesignNodeData>[]): IDesignNode<IDesignNodeData>[];
+            new (arrayLength: number): IDesignNode<IDesignNodeData>[];
+            new (...items: IDesignNode<IDesignNodeData>[]): IDesignNode<IDesignNodeData>[];
+            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;
+        };
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    infoMsg: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+    rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    collect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isDropMask: import('vue').ComputedRef<boolean | null | undefined>;
+    getMaskStyle: () => {};
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    items: {
+        type: {
+            (arrayLength: number): IDesignNode<IDesignNodeData>[];
+            (...items: IDesignNode<IDesignNodeData>[]): IDesignNode<IDesignNodeData>[];
+            new (arrayLength: number): IDesignNode<IDesignNodeData>[];
+            new (...items: IDesignNode<IDesignNodeData>[]): IDesignNode<IDesignNodeData>[];
+            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;
+        };
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    infoMsg: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    showInfo: boolean;
+    infoMsg: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-drop-container/design-drop-container.mjs

@@ -0,0 +1,217 @@
+import { defineComponent, createVNode, withDirectives, vShow, ref, computed, onUnmounted, watch, onMounted, nextTick } from 'vue';
+import { t, useNamespace } from '@gct-paas/core';
+import { useDrop } from 'vue3-dnd';
+import { clone } from 'lodash-es';
+import { useResizeObserver } from '@vueuse/core';
+import { DesignViewPrefix } from '../../../constant/index.mjs';
+import '../../../hooks/design-view/useDesigner.mjs';
+import '../../../hooks/design-view/useGlobal.mjs';
+import '../../../hooks/design-view/usePage.mjs';
+import '../../../hooks/design-view/usePageOccupy.mjs';
+import '../../../hooks/design-view/usePropEditor.mjs';
+import '../../../hooks/design-view/useScope.mjs';
+import '../../../hooks/design-view/useSelectedWidget.mjs';
+import '@gct-paas/schema';
+import '../../../hooks/design-view/useToolkit.mjs';
+import '../../../hooks/design-view/useWidget.mjs';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import 'qx-util';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import { isCanCrop } from '../../../utils/can-drop/can-drop.mjs';
+import '../../../provider/design-editor-node/design-editor-node.provider.mjs';
+import '../../../utils/find-deep-types/find-deep-types.mjs';
+import '../../../utils/field-attrs/basicAttrs.mjs';
+import './design-drop-container.css';/* empty css                            */
+
+const DesignDropContainer = /* @__PURE__ */ defineComponent({
+  name: 'DesignDropContainer',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    parent: {
+      type: Object
+    },
+    showInfo: {
+      type: Boolean,
+      default: true
+    },
+    infoMsg: {
+      type: String,
+      default: 'sys.designView.drop.info'
+    },
+    direction: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-drop-container');
+    const rootRef = ref(null);
+    const c = useDesignViewController();
+    const group = computed(() => {
+      return props.node.id;
+    });
+    const store = c.store;
+    const provider = NodeRegister.get(props.node.type, store.prefix);
+
+    // 容器展开钩子实现
+    {
+      function onTapExpansion(keys) {
+        if (collect.value.isOver) {
+          keys.push(props.node.id);
+        }
+      }
+      c.hooks.expansion.tap(onTapExpansion);
+      onUnmounted(() => {
+        c.hooks.expansion.removeTap(onTapExpansion);
+      });
+    }
+    const isExpansion = ref(false);
+    watch(() => store.count, () => {
+      isExpansion.value = store.isDragging && store.expansions.has(props.node.id);
+    });
+    const isDropMask = computed(() => {
+      return provider.isDrop && collect.value && (collect.value.isShallowOver && collect.value.canDrop || collect.value.isOver && store.dropContainer && props.node.id === store.dropContainer.id);
+    });
+    const [collect, drop] = useDrop({
+      accept: DesignViewPrefix.CUSTOM_HOME,
+      collect(monitor) {
+        return {
+          handlerId: monitor.getHandlerId(),
+          canDrop: monitor.canDrop(),
+          isShallowOver: monitor.isOver({
+            shallow: true
+          }),
+          isOver: monitor.isOver()
+        };
+      },
+      canDrop(item) {
+        return isCanCrop(props.node, store, item);
+      },
+      drop(item, monitor) {
+        if (monitor.canDrop() === false || monitor.isOver({
+          shallow: true
+        }) === false) {
+          return;
+        }
+        const asyncDrop = async () => {
+          let data = clone(item.data);
+          const p = NodeRegister.get(data.type, c.store.prefix);
+          if (p.beforeDrop) {
+            const _data = await p.beforeDrop(c, item);
+            if (!data) {
+              return {
+                group: group.value,
+                success: false
+              };
+            }
+            data = _data;
+          }
+          const oldPKey = c.store.getParentKey(data.id, null);
+          const newPKey = props.node ? props.node.id : null;
+          c.store.disableCache();
+          const isNew = !c.store.map.has(data.id);
+          const node = c.store.setNode(newPKey, data);
+          if (node) {
+            if (isNew === false) {
+              c.store.moveTreeItem(oldPKey, newPKey, node.id);
+            }
+            c.store.enableCache();
+            c.store.cacheHistory();
+            if (p.afterDrop) {
+              const bol = await p.afterDrop(c, item);
+              if (bol === false) {
+                return {
+                  group: group.value,
+                  success: false
+                };
+              }
+            }
+            nextTick(() => {
+              c.store.setActive(node);
+            });
+          }
+          return {
+            group: group.value,
+            success: true
+          };
+        };
+        return {
+          asyncDrop: asyncDrop()
+        };
+      }
+    });
+    drop(rootRef);
+    watch(collect, _ => {
+      if (_.canDrop && _.isShallowOver) {
+        store.dropContainer = props.node;
+        c.setExpansion([props.node.id]);
+      }
+    });
+    const count = ref(0);
+    function force() {
+      count.value += 1;
+    }
+    useResizeObserver(rootRef, () => {
+      force();
+    });
+    function onScroll() {
+      force();
+    }
+    onMounted(() => {
+      if (rootRef.value) {
+        rootRef.value.onscrollend = () => {
+          force();
+        };
+      }
+    });
+    watch(() => store.expansions.size, () => {
+      if (rootRef.value) {
+        if (store.expansions.size === 0) {
+          rootRef.value.removeEventListener('scroll', onScroll);
+        } else {
+          rootRef.value.addEventListener('scroll', onScroll);
+        }
+      }
+    });
+    const getMaskStyle = () => {
+      if (rootRef.value) {
+        const s = {
+          count: count.value,
+          width: rootRef.value.scrollWidth + 'px',
+          height: rootRef.value.scrollHeight + 'px'
+        };
+        return s;
+      }
+      return {};
+    };
+    return {
+      ns,
+      isExpansion,
+      rootRef,
+      collect,
+      isDropMask,
+      getMaskStyle
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": [this.ns.b(), this.ns.m(this.direction), this.ns.is('over', this.collect.isShallowOver && this.collect.canDrop), this.ns.is('expansion', this.isExpansion), this.ns.is('not-children', this.items.length === 0)]
+    }, [this.items.length === 0 && this.showInfo !== false ? createVNode("div", {
+      "class": this.ns.e('drag-info')
+    }, [createVNode("span", null, [t(this.infoMsg)])]) : null, this.$slots.default?.(), withDirectives(createVNode("div", {
+      "style": this.getMaskStyle(),
+      "class": this.ns.e('drop-mask')
+    }, null), [[vShow, this.isDropMask]])]);
+  }
+});
+
+export { DesignDropContainer };

package/es/components/design/design-drop-line/design-drop-line.css

@@ -0,0 +1,165 @@
+@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-design-drop-line {
+  transition: all 0.3s ease-in-out;
+}
+.gct-design-drop-line__vertical {
+  vertical-align: top;
+  display: inline-block;
+  height: auto;
+  padding: 0;
+}
+.gct-design-drop-line__vertical.is-show {
+  padding: 0 4px;
+}
+
+.gct-design-drop-line__horizontal {
+  width: 100%;
+  min-width: inherit;
+  padding: 0;
+}
+.gct-design-drop-line__horizontal.is-show {
+  padding: 4px 0;
+}
+
+.gct-design-drop-line-drop-container {
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  --bg-color: transparent;
+}
+.gct-design-drop-line-drop-container.is-can-drop {
+  --bg-color: var(--ant-primary-color);
+}
+
+.gct-design-drop-line-drop-container__vertical {
+  width: 0;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+}
+.gct-design-drop-line-drop-container__vertical.is-show {
+  width: var(--design-drop-line-width, 4px);
+}
+
+.gct-design-drop-line-drop-container__vertical--line {
+  height: 100%;
+  width: 2px;
+  min-height: inherit;
+  background-color: var(--bg-color);
+  margin-left: 1px;
+}
+
+.gct-design-drop-line-drop-container__vertical--start-line {
+  background-color: var(--bg-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.gct-design-drop-line-drop-container__vertical--end-line {
+  background-color: var(--bg-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.gct-design-drop-line-drop-container__horizontal {
+  height: 0;
+  width: 100%;
+  min-width: inherit;
+  overflow: hidden;
+}
+.gct-design-drop-line-drop-container__horizontal.is-show {
+  height: var(--design-drop-line-width, 4px);
+}
+
+.gct-design-drop-line-drop-container__horizontal--line {
+  height: 2px;
+  width: 100%;
+  background-color: var(--bg-color);
+  margin-top: 1px;
+}
+
+.gct-design-drop-line-drop-container__horizontal--start-line {
+  background-color: var(--bg-color);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+}
+
+.gct-design-drop-line-drop-container__horizontal--end-line {
+  background-color: var(--bg-color);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+}

package/es/components/design/design-drop-line/design-drop-line.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue';
+import { IDesignNode, IDropCollect } from '../../../interface';
+export declare const DesignDropLine: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    item: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    beforeItem: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    isBefore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    getStyleObj: () => {
+        height: string;
+    } | {
+        height?: undefined;
+    };
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    collect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    item: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    beforeItem: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    isBefore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    direction: "vertical" | "horizontal";
+    isBefore: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;