@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

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

@@ -1,174 +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/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 'lodash-es';
-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-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 };

package/es/components/design/design-item-actions/design-item-actions.css

@@ -1,97 +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-item-actions {
-  z-index: 1;
-  height: 30px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 5px 8px;
-  background-color: var(--ant-primary-color);
-  color: #fff;
-  display: flex;
-  align-items: center;
-}
-.gct-design-item-actions__mask {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.16);
-}
-
-.gct-design-item-actions__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding-top: 2px;
-  border-radius: 2px;
-  cursor: pointer;
-  z-index: 1;
-}
-.gct-design-item-actions__item:hover {
-  background-color: rgba(255, 255, 255, 0.48);
-}

package/es/components/design/design-item-actions/design-item-actions.d.ts

@@ -1,42 +0,0 @@
-export declare const DesignItemActions: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    top: {
-        type: NumberConstructor;
-        default: number;
-    };
-    left: {
-        type: NumberConstructor;
-        default: number;
-    };
-    selectEl: {
-        type: {
-            new (): HTMLDivElement;
-            prototype: HTMLDivElement;
-        };
-    };
-    halfRect: {
-        type: ObjectConstructor;
-        required: true;
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    top: {
-        type: NumberConstructor;
-        default: number;
-    };
-    left: {
-        type: NumberConstructor;
-        default: number;
-    };
-    selectEl: {
-        type: {
-            new (): HTMLDivElement;
-            prototype: HTMLDivElement;
-        };
-    };
-    halfRect: {
-        type: ObjectConstructor;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    top: number;
-    left: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-actions/design-item-actions.mjs

@@ -1,195 +0,0 @@
-import { defineComponent, ref, toRefs, computed, watch, createVNode, withDirectives, vShow, resolveComponent } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { useElementBounding } from '@vueuse/core';
-import { useDrag } from 'vue3-dnd';
-import { clone } from 'lodash-es';
-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 { DesignViewPrefix, DesignItemAttribute, DesignItemActionTag } from '../../../constant/index.mjs';
-import { NodeRegister } from '../../../register/node/node.register.mjs';
-import './design-item-actions.css';/* empty css                          */
-
-const DesignItemActions = /* @__PURE__ */ defineComponent({
-  name: 'DesignItemActions',
-  props: {
-    top: {
-      type: Number,
-      default: 0
-    },
-    left: {
-      type: Number,
-      default: 0
-    },
-    selectEl: {
-      type: HTMLDivElement
-    },
-    halfRect: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('design-item-actions');
-    const c = useDesignViewController();
-    const elRef = ref(null);
-    const dragRef = ref(null);
-    const {
-      width,
-      height
-    } = useElementBounding(elRef);
-    const {
-      selectEl
-    } = toRefs(props);
-    const selectRef = computed(() => {
-      return props.selectEl;
-    });
-    const isShow = computed(() => {
-      if (!selectEl.value) {
-        return true;
-      }
-      const {
-        top,
-        right,
-        bottom,
-        left
-      } = props.halfRect;
-      return !(top > 0 || right > 0 || bottom - selectEl.value.clientHeight > 0 || left - selectEl.value.clientWidth > 0);
-    });
-    const style = computed(() => {
-      return {
-        opacity: c.store.isDragging || isShow.value !== true ? 0 : 1,
-        top: `${props.top - height.value}px`,
-        left: `${props.left - width.value}px`
-      };
-    });
-    const provider = ref(null);
-    watch(() => c.store.selected, () => {
-      if (c.store.selected) {
-        provider.value = NodeRegister.get(c.store.selected.type, c.store.prefix);
-      } else {
-        provider.value = null;
-      }
-    });
-    const actions = computed(() => {
-      if (provider.value) {
-        return provider.value.actions || [];
-      }
-      return [];
-    });
-    const onAction = (e, action) => {
-      if (c.store.selected) {
-        e.stopPropagation();
-        if (provider.value && provider.value.onClick) {
-          if (provider.value.onClick(c, c.store.selected, action)) {
-            return;
-          }
-        }
-        const pKey = c.store.getParentKey(c.store.selected.id);
-        switch (action.tag) {
-          case DesignItemActionTag.DELETE:
-            c.store.deleteNode(c.store.selected);
-            if (pKey) {
-              c.store.setActive(c.store.getNode(pKey));
-            } else {
-              c.store.setActive(c.store.pageNode);
-            }
-            break;
-          case DesignItemActionTag.SELECT_PARENT:
-            if (pKey) {
-              c.store.setActive(c.store.getNode(pKey));
-            } else {
-              c.store.setActive(c.store.pageNode);
-            }
-            break;
-        }
-      }
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_collect, drag, _preview] = useDrag({
-      type: DesignViewPrefix.CUSTOM_HOME,
-      item: () => {
-        // 开启正在拖拽状态
-        c.store.setDragging(true);
-        const el = document.getElementById(c.store.selected.id);
-        const data = {
-          data: clone(c.store.selected),
-          group: el.getAttribute(DesignItemAttribute.GROUP_TAG),
-          id: c.store.selected.id,
-          index: Number(el.getAttribute(DesignItemAttribute.INDEX_TAG)),
-          mode: 'move',
-          types: c.types(c.store.selected)
-        };
-        return data;
-      },
-      collect: monitor => {
-        const isDragging = monitor.isDragging();
-        if (selectRef.value) {
-          if (isDragging) {
-            selectRef.value.setAttribute('is-action-dragging', 'true');
-          }
-        }
-        return {
-          canDrag: monitor.canDrag(),
-          isDragging
-        };
-      },
-      end: async (_, monitor) => {
-        c.store.setDragging(false);
-        const r = monitor.getDropResult();
-        if (r && r.asyncDrop) {
-          const result = await r.asyncDrop;
-          if (result && result.success) ;
-        }
-        selectRef.value.removeAttribute('is-action-dragging');
-        c.dropEnd();
-      },
-      options: {
-        dropEffect: 'move'
-      }
-    });
-    drag(dragRef);
-    return () => {
-      return createVNode("div", {
-        "ref": elRef,
-        "class": ns.b(),
-        "style": style.value,
-        "onClick": e => e.stopPropagation()
-      }, [createVNode("div", {
-        "class": ns.e('mask')
-      }, null), withDirectives(createVNode("span", {
-        "ref": dragRef,
-        "class": [ns.e('item'), ns.em('item', 'drag')]
-      }, [createVNode("i", {
-        "class": "iconfont icon-yidong"
-      }, null)]), [[vShow, provider.value?.isDrag === true]]), actions.value.map(action => {
-        const content = createVNode("i", {
-          "title": action.tooltip,
-          "class": `iconfont ${action.icon}`,
-          "onClick": e => onAction(e, action)
-        }, null);
-        return createVNode("span", {
-          "class": ns.e('item')
-        }, [action.tooltip ? createVNode(resolveComponent("a-tooltip"), {
-          "placement": "top"
-        }, {
-          title: () => action.tooltip,
-          default: () => content
-        }) : content]);
-      })]);
-    };
-  }
-});
-
-export { DesignItemActions };

package/es/components/design/design-item-highlighter/design-item-highlighter.css

@@ -1,70 +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-item-highlighter {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 9999;
-}