@gct-paas/core-web 0.1.4-dev.0 → 0.1.4-dev.10

package/es/modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.css

@@ -0,0 +1,79 @@
+@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-dnd-drop-line {
+  background-color: transparent;
+  padding: var(--gct-padding-1) 0;
+}
+.gct-dnd-drop-line__line {
+  border-top: 1px solid transparent;
+}
+
+.gct-dnd-drop-line.is-shallow-over .gct-dnd-drop-line__line {
+  border-color: var(--gct-color-primary);
+}
+
+.gct-dnd-drop-line.is-active .gct-dnd-drop-line__line {
+  border-color: var(--gct-color-primary);
+}

package/es/modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { IGctDndConfig, IGctDropCollect } from '../../interface';
+export declare const GctDndDropLine: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    collect: import('vue').Ref<IGctDropCollect, IGctDropCollect>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "drop"[], "drop", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDrop?: ((...args: any[]) => any) | undefined;
+}>, {
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.mjs

@@ -0,0 +1,98 @@
+import { defineComponent, createVNode, ref } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useDrop } from 'vue3-dnd';
+import { cloneDeep } from 'lodash-es';
+import './gct-dnd-drop-line.css';/* empty css                        */
+
+const GctDndDropLine = /* @__PURE__ */ defineComponent({
+  name: 'GctDndDropLine',
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    // 特殊指定当前线激活
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['drop'],
+  setup(props, {
+    emit
+  }) {
+    const {
+      config
+    } = props;
+    const ns = useNamespace('dnd-drop-line');
+    const rootRef = ref(null);
+    const [collect, drop] = useDrop({
+      accept: props.config.group,
+      collect: monitor => {
+        return {
+          handlerId: monitor.getHandlerId(),
+          isOver: monitor.isOver(),
+          canDrop: monitor.canDrop(),
+          isShallowOver: monitor.isOver({
+            shallow: true
+          })
+        };
+      },
+      canDrop(item) {
+        if (config.isDrop === false) {
+          return false;
+        }
+        if (config.canDrop) {
+          return config.canDrop(item);
+        }
+        return true;
+      },
+      drop: (item, monitor) => {
+        if (collect.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
+              };
+            }
+          }
+          emit('drop', data);
+          return {
+            group: config.group,
+            success: true,
+            cfg: cloneDeep(props.config),
+            data
+          };
+        };
+        return {
+          asyncDrop: callback
+        };
+      }
+    });
+    if (config.isDrop !== false) {
+      drop(rootRef);
+    }
+    return {
+      ns,
+      rootRef,
+      collect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": [this.collect.handlerId, this.ns.b(), this.ns.is('over', this.collect.isOver && this.collect.canDrop), this.ns.is('shallow-over', this.collect.isShallowOver && this.collect.canDrop), this.ns.is('not-drop', this.collect.canDrop === false && this.collect.isShallowOver), this.ns.is('active', this.active)]
+    }, [createVNode("div", {
+      "class": this.ns.e('line')
+    }, null)]);
+  }
+});
+
+export { GctDndDropLine };

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

@@ -0,0 +1,70 @@
+@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-dnd-item {
+  background-color: rgb(var(--gct-gray-2));
+}
+.gct-dnd-item.is-dragging {
+  background-color: var(--gct-color-bg-3) !important;
+}

package/es/modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.d.ts

@@ -0,0 +1,50 @@
+import { PropType } from 'vue';
+import { IGctDragCollect, IGctDndData, IGctDndConfig } from '../../interface';
+import { GCT_DND_INSERT_POS } from '../../constants';
+export declare const GctDndItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IGctDndData>;
+        required: true;
+    };
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    posState: import('vue').Ref<0 | 1 | -1, 0 | 1 | -1>;
+    collect: import('vue').Ref<IGctDragCollect, IGctDragCollect>;
+    onDrop: (insertPos: GCT_DND_INSERT_POS, data: IGctDndData) => void;
+    drag: import('vue3-dnd').ConnectDragSource<import('vue3-dnd').DragSourceOptions>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "drop"[], "drop", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IGctDndData>;
+        required: true;
+    };
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDrop?: ((...args: any[]) => any) | undefined;
+}>, {
+    last: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctDndItem;

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

@@ -0,0 +1,239 @@
+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-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)]);
+  }
+});
+
+export { GctDndItem };

package/es/modules/gct-dnd/constants/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 拖拽放置时的插入位置
+ */
+export declare const GCT_DND_INSERT_POS: {
+    /**
+     * 插入第一个
+     */
+    readonly FIRST: "first";
+    /**
+     * 插入前
+     */
+    readonly BEFORE: "before";
+    /**
+     * 插入后
+     */
+    readonly AFTER: "after";
+    /**
+     * 插入最后
+     */
+    readonly LAST: "last";
+};
+export type GCT_DND_INSERT_POS = (typeof GCT_DND_INSERT_POS)[keyof typeof GCT_DND_INSERT_POS];

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

@@ -0,0 +1,20 @@
+const GCT_DND_INSERT_POS = {
+  /**
+   * 插入第一个
+   */
+  FIRST: "first",
+  /**
+   * 插入前
+   */
+  BEFORE: "before",
+  /**
+   * 插入后
+   */
+  AFTER: "after",
+  /**
+   * 插入最后
+   */
+  LAST: "last"
+};
+
+export { GCT_DND_INSERT_POS };

package/es/modules/gct-dnd/index.d.ts

@@ -0,0 +1,5 @@
+export { GctDndContainer } from './components/gct-dnd-container/gct-dnd-container';
+export { GctDndDropLine } from './components/gct-dnd-drop-line/gct-dnd-drop-line';
+export { GctDndItem } from './components/gct-dnd-item/gct-dnd-item';
+export { GCT_DND_INSERT_POS } from './constants';
+export type * from './interface';