@gct-paas/design 0.1.4-dev.10 → 0.1.4-dev.11

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

@@ -1,221 +0,0 @@
-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/design-state.mjs';
-import '@gct-paas/schema';
-import '../../../hooks/design-view/layout/useScope.mjs';
-import '../../../hooks/design-view/global/useGlobal.mjs';
-import '../../../hooks/develop/useCacheHistory.mjs';
-import 'ant-design-vue';
-import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
-import '../../../hooks/design-view/widget/useWidget.mjs';
-import '../../../hooks/design-view/page/usePage.mjs';
-import '../../../hooks/design-view/page/usePageOccupy.mjs';
-import '../../../hooks/design-view/layout/useToolkit.mjs';
-import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
-import '../../../hooks/use-model-field/use-model-field.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 'axios';
-import '../../../utils/field-attrs/basicAttrs.mjs';
-import '../../../utils/field-filter/index.mjs';
-import '@gct-paas/core-web';
-import '../../../utils/find-deep-types/find-deep-types.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

@@ -1,165 +0,0 @@
-@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

@@ -1,72 +0,0 @@
-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>;

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

@@ -1,179 +0,0 @@
-import { defineComponent, createVNode, ref, watch, nextTick } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { useDrop } from 'vue3-dnd';
-import { DesignViewPrefix, InsertNodeMode } from '../../../constant/index.mjs';
-import '../../../hooks/design-view/design-state.mjs';
-import '@gct-paas/schema';
-import 'lodash-es';
-import '../../../hooks/design-view/layout/useScope.mjs';
-import '../../../hooks/design-view/global/useGlobal.mjs';
-import '@vueuse/core';
-import '../../../hooks/develop/useCacheHistory.mjs';
-import 'ant-design-vue';
-import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
-import '../../../hooks/design-view/widget/useWidget.mjs';
-import '../../../hooks/design-view/page/usePage.mjs';
-import '../../../hooks/design-view/page/usePageOccupy.mjs';
-import '../../../hooks/design-view/layout/useToolkit.mjs';
-import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
-import '../../../hooks/use-model-field/use-model-field.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 'axios';
-import '../../../utils/field-attrs/basicAttrs.mjs';
-import '../../../utils/field-filter/index.mjs';
-import '@gct-paas/core-web';
-import '../../../utils/find-deep-types/find-deep-types.mjs';
-import './design-drop-line.css';/* empty css                       */
-
-const DesignDropLine = /* @__PURE__ */ defineComponent({
-  name: 'DesignDropLine',
-  props: {
-    // 分组标识
-    group: {
-      type: String,
-      required: true
-    },
-    // 当前项下标
-    index: {
-      type: Number,
-      required: true
-    },
-    parent: {
-      type: Object,
-      required: true
-    },
-    // 当前项数据
-    item: {
-      type: Object,
-      required: true
-    },
-    // 当前项前一项数据
-    beforeItem: {
-      type: Object
-    },
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    // 放置位置是否在数据之前，true 为之前 false 为之后
-    isBefore: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('design-drop-line');
-    const elRef = ref(null);
-    const c = useDesignViewController();
-    const getStyleObj = () => {
-      if (isExpansion.value === false && props.direction === 'vertical') {
-        return {
-          height: 'auto'
-        };
-      }
-      return {};
-    };
-    const isExpansion = ref(false);
-    if (props.parent) {
-      watch(() => c.store.count, () => {
-        // 父展开时子项也需同步 UI 展开模式呈现
-        isExpansion.value = c.store.isDragging && c.store.expansions.has(props.parent.id);
-      });
-    }
-    const [collect, drop] = useDrop({
-      accept: DesignViewPrefix.CUSTOM_HOME,
-      collect(monitor) {
-        const isShallowOver = monitor.isOver({
-          shallow: true
-        });
-        return {
-          handlerId: monitor.getHandlerId(),
-          canDrop: monitor.canDrop(),
-          isShallowOver,
-          isOver: monitor.isOver()
-        };
-      },
-      canDrop(item) {
-        return isCanCrop(props.parent, c.store, item);
-      },
-      drop(item, monitor) {
-        if (!monitor.isOver({
-          shallow: true
-        })) {
-          return;
-        }
-        const asyncDrop = async () => {
-          let _data = 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: props.group,
-                success: false
-              };
-            }
-            _data = data;
-          }
-          const success = c.store.insertNode(props.isBefore ? InsertNodeMode.BEFORE : InsertNodeMode.AFTER, props.item, _data);
-          if (success) {
-            if (p.afterDrop) {
-              const flag = await p.afterDrop(c, item);
-              if (!flag) {
-                return {
-                  group: props.group,
-                  success: false
-                };
-              }
-            }
-            const data = c.store.getNode(item.id);
-            if (data) {
-              nextTick(() => {
-                c.store.setActive(data);
-              });
-            }
-            return {
-              group: props.group,
-              success: true
-            };
-          }
-          return {
-            group: props.group,
-            success: false
-          };
-        };
-        return {
-          asyncDrop: asyncDrop()
-        };
-      }
-    });
-    drop(elRef);
-    return {
-      ns,
-      getStyleObj,
-      elRef,
-      collect,
-      isExpansion
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "ref": "elRef",
-      "style": this.getStyleObj(),
-      "class": [this.ns.b(), this.ns.e(this.direction), this.ns.is('show', this.isExpansion)]
-    }, [createVNode("div", {
-      "class": [this.ns.b('drop-container'), this.ns.be('drop-container', this.direction), this.ns.is('show', this.isExpansion), this.ns.is('can-drop', this.collect.canDrop && this.collect.isShallowOver)]
-    }, [createVNode("div", {
-      "class": this.ns.bem('drop-container', this.direction, 'start-line')
-    }, null), createVNode("div", {
-      "class": [this.ns.bem('drop-container', this.direction, 'line')]
-    }, null), createVNode("div", {
-      "class": this.ns.bem('drop-container', this.direction, 'end-line')
-    }, null)])]);
-  }
-});
-
-export { DesignDropLine };