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

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

@@ -1,179 +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-drag-item {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-}
-.gct-design-drag-item__item-mask {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-}
-
-.gct-design-drag-item.is-dragging .gct-design-drag-item__dragging-mask {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(82, 82, 82, 0.2);
-}
-
-.gct-design-drag-item.is-expansion {
-  border: 1px dashed var(--ant-primary-color);
-}
-.gct-design-drag-item.is-expansion .gct-design-drag-item__indicator {
-  display: none;
-}
-
-.gct-design-drag-item[is-action-dragging=true] .gct-design-drag-item__dragging-mask {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(82, 82, 82, 0.2);
-}
-
-.gct-design-drag-item-indicator {
-  position: absolute;
-  background-color: white;
-  z-index: 1;
-  display: none;
-}
-.gct-design-drag-item-indicator__horizontal {
-  width: 100%;
-  height: 4px;
-  left: 0;
-}
-.gct-design-drag-item-indicator__horizontal.is-before {
-  top: -2px;
-}
-
-.gct-design-drag-item-indicator__horizontal.is-after {
-  bottom: -2px;
-}
-
-.gct-design-drag-item-indicator__horizontal--line {
-  height: 2px;
-  width: 100%;
-  background-color: var(--ant-primary-color);
-  margin-top: 1px;
-}
-
-.gct-design-drag-item-indicator__horizontal--start-line {
-  background-color: var(--ant-primary-color);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 2px;
-  height: 100%;
-}
-
-.gct-design-drag-item-indicator__horizontal--end-line {
-  background-color: var(--ant-primary-color);
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 2px;
-  height: 100%;
-}
-
-.gct-design-drag-item-indicator__vertical {
-  height: 100%;
-  width: 4px;
-  top: 0;
-}
-.gct-design-drag-item-indicator__vertical.is-before {
-  left: -2px;
-}
-
-.gct-design-drag-item-indicator__vertical.is-after {
-  right: -2px;
-}
-
-.gct-design-drag-item-indicator__vertical--line {
-  height: 100%;
-  width: 2px;
-  background-color: var(--ant-primary-color);
-  margin-left: 1px;
-}
-
-.gct-design-drag-item-indicator__vertical--start-line {
-  background-color: var(--ant-primary-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}
-
-.gct-design-drag-item-indicator__vertical--end-line {
-  background-color: var(--ant-primary-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}
-
-.gct-design-drag-item-indicator.is-shallow-over {
-  display: block;
-}

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

@@ -1,55 +0,0 @@
-import { PropType } from 'vue';
-import { IDesignNode, IDesignNodeData, IDragCollect, IDropCollect, INodeProvider } from '../../../interface';
-export declare const DesignDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    group: {
-        type: StringConstructor;
-        required: true;
-    };
-    parent: {
-        type: PropType<IDesignNode>;
-    };
-    direction: {
-        type: PropType<"vertical" | "horizontal">;
-        required: true;
-    };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-    data: {
-        type: PropType<IDesignNode>;
-        required: true;
-    };
-}>, {
-    ns: import('@gct-paas/core').Namespace;
-    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
-    provider: INodeProvider<IDesignNode<IDesignNodeData>>;
-    isActive: import('vue').ComputedRef<boolean>;
-    isHover: import('vue').ComputedRef<boolean>;
-    isExpansion: import('vue').Ref<boolean, boolean>;
-    style: import('vue').ComputedRef<IObject | null>;
-    dragCollect: import('vue').Ref<IDragCollect, IDragCollect>;
-    dropCollect: import('vue').Ref<IDropCollect, IDropCollect>;
-    isBeforeHover: import('vue').Ref<boolean, boolean>;
-    onActive: (e: MouseEvent) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    group: {
-        type: StringConstructor;
-        required: true;
-    };
-    parent: {
-        type: PropType<IDesignNode>;
-    };
-    direction: {
-        type: PropType<"vertical" | "horizontal">;
-        required: true;
-    };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-    data: {
-        type: PropType<IDesignNode>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -1,293 +0,0 @@
-import { defineComponent, createVNode, mergeProps, ref, computed, watch, onMounted, nextTick } from 'vue';
-import { useDrag, useDrop } from 'vue3-dnd';
-import { clone } from 'lodash-es';
-import { toRefs } from '@vueuse/core';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { useNamespace, calcStyle } from '@gct-paas/core';
-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 { DesignItemAttribute, DesignViewPrefix, InsertNodeMode } from '../../../constant/index.mjs';
-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-drag-item.css';/* empty css                       */
-
-const DesignDragItem = /* @__PURE__ */ defineComponent({
-  name: 'DesignDragItem',
-  props: {
-    group: {
-      type: String,
-      required: true
-    },
-    parent: {
-      type: Object
-    },
-    direction: {
-      type: String,
-      required: true
-    },
-    index: {
-      type: Number,
-      required: true
-    },
-    data: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('design-drag-item');
-    const c = useDesignViewController();
-    const store = c.store;
-    const elRef = ref(null);
-    const isBeforeHover = ref(false);
-    const provider = NodeRegister.get(props.data.type, store.prefix);
-    const isActive = computed(() => {
-      return store.selected?.id === props.data.id;
-    });
-    const isHover = computed(() => {
-      return store.hoverId === props.data.id;
-    });
-    const isExpansion = ref(false);
-    if (props.parent) {
-      watch(() => store.count, () => {
-        // 父展开时子项也需同步 UI 展开模式呈现
-        isExpansion.value = store.isDragging && store.expansions.has(props.parent.id);
-      });
-    }
-    const {
-      data
-    } = toRefs(props.data);
-    const style = computed(() => {
-      if (provider.isCustomStyle === true) {
-        return null;
-      }
-      return calcStyle(data.value);
-    });
-    const [dragCollect, drag, preview] = useDrag({
-      type: DesignViewPrefix.CUSTOM_HOME,
-      item: () => {
-        // 开启正在拖拽状态
-        store.setDragging(true);
-        return {
-          id: props.data.id,
-          group: props.group,
-          index: props.index,
-          data: clone(props.data),
-          mode: 'move',
-          types: c.types(props.data)
-        };
-      },
-      collect: monitor => {
-        return {
-          canDrag: monitor.canDrag(),
-          isDragging: monitor.isDragging()
-        };
-      },
-      end: async (_, monitor) => {
-        store.setDragging(false);
-        const r = monitor.getDropResult();
-        if (r && r.asyncDrop) {
-          const result = await r.asyncDrop;
-          if (result && result.success && result.group !== props.group) ;
-        }
-        c.dropEnd();
-      },
-      options: {
-        dropEffect: 'move'
-      }
-    });
-    const [dropCollect, drop] = useDrop({
-      accept: DesignViewPrefix.CUSTOM_HOME,
-      collect(monitor) {
-        return {
-          handlerId: monitor.getHandlerId(),
-          canDrop: monitor.canDrop(),
-          isShallowOver: monitor.isOver({
-            shallow: true
-          }),
-          isOver: monitor.isOver()
-        };
-      },
-      hover(item, monitor) {
-        if (monitor.canDrop() === false || dragCollect.value.isDragging === true) {
-          return;
-        }
-        const isOver = monitor.isOver({
-          shallow: true
-        });
-        if (props.data.id === item.id) {
-          return;
-        }
-        if (isOver) {
-          const rect = elRef.value.getBoundingClientRect();
-          const offset = monitor.getClientOffset();
-          let difference = 0;
-          if (props.direction === 'vertical') {
-            const {
-              top,
-              height
-            } = rect;
-            const {
-              y
-            } = offset;
-            const half = height / 2;
-            difference = y - top - half;
-            if (difference < 0) {
-              isBeforeHover.value = true;
-            } else {
-              isBeforeHover.value = false;
-            }
-          }
-          if (props.direction === 'horizontal') {
-            const {
-              left,
-              width
-            } = rect;
-            const {
-              x
-            } = offset;
-            const half = width / 2;
-            difference = x - left - half;
-            if (difference < 0) {
-              isBeforeHover.value = true;
-            } else {
-              isBeforeHover.value = false;
-            }
-          }
-        }
-      },
-      canDrop(item, _monitor) {
-        if (dragCollect.value.isDragging === true) {
-          return false;
-        }
-        return isCanCrop(props.parent, store, item);
-      },
-      drop(item, monitor) {
-        if (monitor.canDrop() === false || monitor.isOver({
-          shallow: true
-        }) === false || dragCollect.value.isDragging === true) {
-          return;
-        }
-        const asyncDrop = async () => {
-          let _data = item.data;
-          const p = NodeRegister.get(_data.type, store.prefix);
-          if (p.beforeDrop) {
-            const data = await p.beforeDrop(c, item);
-            if (!data) {
-              return {
-                group: props.group,
-                success: false
-              };
-            }
-            _data = data;
-          }
-          const success = store.insertNode(isBeforeHover.value ? InsertNodeMode.BEFORE : InsertNodeMode.AFTER, props.data, _data);
-          if (success) {
-            if (p.afterDrop) {
-              const flag = await p.afterDrop(c, item);
-              if (!flag) {
-                return {
-                  group: props.group,
-                  success: false
-                };
-              }
-            }
-            const data = store.getNode(item.id);
-            if (data) {
-              nextTick(() => {
-                store.setActive(data);
-              });
-            }
-            return {
-              group: props.group,
-              success: true
-            };
-          }
-          return {
-            group: props.group,
-            success: false
-          };
-        };
-        return {
-          asyncDrop: asyncDrop()
-        };
-      }
-    });
-    drag(elRef);
-    drop(elRef);
-    onMounted(() => {
-      if (preview) {
-        preview(getEmptyImage(), {
-          captureDraggingState: true
-        });
-      }
-    });
-    const onActive = e => {
-      e.stopPropagation();
-      store.setActive(props.data);
-    };
-    watch(dropCollect, _ => {
-      if (_.canDrop && _.isShallowOver) {
-        store.dropContainer = props.parent || null;
-        c.setExpansion([props.data.id]);
-      }
-    });
-    return {
-      ns,
-      elRef,
-      provider,
-      isActive,
-      isHover,
-      isExpansion,
-      style,
-      dragCollect,
-      dropCollect,
-      isBeforeHover,
-      onActive
-    };
-  },
-  render() {
-    return createVNode("div", mergeProps({
-      "ref": "elRef",
-      "id": this.data.id
-    }, {
-      [DesignItemAttribute.NODE_ID_TAG]: this.data.id,
-      [DesignItemAttribute.ACTIVE_TAG]: true,
-      [DesignItemAttribute.DESIGN_NAME]: this.data.label,
-      [DesignItemAttribute.DRAG_GROUP_TYPE]: this.provider.type,
-      [DesignItemAttribute.GROUP_TAG]: this.group,
-      [DesignItemAttribute.INDEX_TAG]: this.index,
-      [DesignItemAttribute.SELECTOR_INDEX]: this.provider.selectorIndex ?? 0
-    }, {
-      "class": [this.ns.b(), this.ns.is('dragging', this.dragCollect.isDragging), this.ns.is('can-drop', this.dropCollect.canDrop), this.ns.is('shallow-over', this.dropCollect.isShallowOver), this.ns.is('active', this.isActive), this.ns.is('hover', this.isHover), this.ns.is('expansion', this.isExpansion)],
-      "style": this.style,
-      "onClick": this.onActive
-    }), [this.$slots.default?.(), this.provider.isDrag ? createVNode("div", {
-      "class": this.ns.e('dragging-mask')
-    }, null) : null, this.provider.isDrop && this.isExpansion !== true ? createVNode("div", {
-      "class": [this.ns.b('indicator'), this.ns.be('indicator', this.direction), this.ns.is('shallow-over', !this.dragCollect?.isDragging && this.dropCollect.isShallowOver && this.dropCollect.canDrop), this.ns.is('before', this.dropCollect.isShallowOver && this.isBeforeHover), this.ns.is('after', this.dropCollect.isShallowOver && !this.isBeforeHover)]
-    }, [createVNode("div", {
-      "class": [this.ns.bem('indicator', this.direction, 'start-line')]
-    }, null), createVNode("div", {
-      "class": [this.ns.bem('indicator', this.direction, 'line')]
-    }, null), createVNode("div", {
-      "class": [this.ns.bem('indicator', this.direction, 'end-line')]
-    }, null)]) : null]);
-  }
-});
-
-export { DesignDragItem };

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

@@ -1,103 +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-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: 1px solid transparent;
-  overflow-y: auto;
-}
-.gct-design-drop-container.is-over {
-  background-color: #ccc;
-}
-
-.gct-design-drop-container.is-expansion {
-  border: 1px dashed var(--ant-primary-color);
-  padding: 4px;
-}
-
-.gct-design-drop-container.is-not-children {
-  background-color: #FCFCFD;
-  border: 2px dashed #DBDBDB;
-}
-
-.gct-design-drop-container__drag-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  width: 100%;
-  font-size: 14px;
-  color: #C3C3C3;
-}
-
-.gct-design-drop-container__drop-mask {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  color: rgb(93, 100, 116);
-  background-color: rgba(49, 104, 236, 0.24);
-  pointer-events: none;
-}