@gct-paas/core-web 0.1.4-dev.6 → 0.1.4-dev.8

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

@@ -0,0 +1,195 @@
+import { defineComponent, createVNode, ref, reactive, provide, toRef, watch } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useDrop } from 'vue3-dnd';
+import { cloneDeep } from 'lodash-es';
+import { GctDndItem } from '../gct-dnd-item/gct-dnd-item.mjs';
+import { GctDndDropLine } from '../gct-dnd-drop-line/gct-dnd-drop-line.mjs';
+import { GCT_DND_INSERT_POS } from '../../constants/index.mjs';
+import './gct-dnd-container.css';/* empty css                        */
+
+const GctDndContainer = /* @__PURE__ */ defineComponent({
+  name: 'GctDndContainer',
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          group: 'GctDnd',
+          insertPos: GCT_DND_INSERT_POS.LAST
+        };
+      }
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:items'],
+  setup(props, {
+    emit
+  }) {
+    const {
+      config
+    } = props;
+    const ns = useNamespace('dnd-container');
+    const rootRef = ref(null);
+    // 拖拽线状态
+    const dropLineState = reactive({
+      activeKey: '',
+      isBeforeHover: false
+    });
+    provide('vue3-dnd-drop-line-state', dropLineState);
+    const items = toRef(props.items);
+    const [collect, drop] = useDrop({
+      accept: 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,
+                success: false,
+                cfg: cloneDeep(props.config)
+              };
+            }
+          }
+          const i = items.value.findIndex(_ => _.id === item.data.id);
+          // 数据不存在才可以从容器拖入
+          if (i === -1) {
+            onDrop(props.config.insertPos, data);
+          }
+          emit('update:items', items.value);
+          return {
+            group: config.group,
+            success: true,
+            cfg: cloneDeep(props.config),
+            data
+          };
+        };
+        return {
+          asyncDrop: callback
+        };
+      }
+    });
+    if (config.isDrop !== false) {
+      drop(rootRef);
+    }
+    watch(collect, () => {
+      if (collect.value.isOver !== true) {
+        dropLineState.activeKey = '';
+      }
+    });
+
+    /**
+     * 拖拽结束放置逻辑
+     *
+     * @param {GCT_DND_INSERT_POS} insertPos
+     * @param {IGctDndData} data
+     * @param {number} [insertIndex=-1] 指定放置前后时，需要指定插入谁的前后
+     */
+    function onDrop(insertPos, data, insertIndex = -1) {
+      if (!data) {
+        console.error('data is required');
+        return;
+      }
+      if (insertPos === GCT_DND_INSERT_POS.FIRST) {
+        items.value.unshift(data);
+      } else if (insertPos === GCT_DND_INSERT_POS.LAST) {
+        items.value.push(data);
+      } else {
+        if (insertIndex === -1) {
+          console.error('insertIndex is required');
+          return;
+        }
+        const i = items.value.findIndex(item => item.id === data.id);
+        // 在原本位置不做任何操作
+        if (i === insertIndex) {
+          return;
+        }
+        // 新位置在前，先删除，再插入
+        if (i !== -1 && insertIndex < i) {
+          items.value.splice(i, 1);
+        }
+        if (insertPos === GCT_DND_INSERT_POS.AFTER) {
+          // 插入后，在指定位置 + 1
+          items.value.splice(insertIndex + 1, 0, data);
+        } else {
+          // 插入前，在指定位置
+          items.value.splice(insertIndex, 0, data);
+        }
+        // 新位置在后，先插入，再删除
+        if (i !== -1 && insertIndex > i) {
+          items.value.splice(i, 1);
+        }
+      }
+      emit('update:items', items.value);
+    }
+    return {
+      ns,
+      rootRef,
+      dropLineState,
+      collect,
+      onDrop
+    };
+  },
+  render() {
+    const last = this.items[this.items.length - 1];
+    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('not-drop', this.collect.canDrop === false && this.collect.isOver), this.ns.is('shallow-over', this.collect.isShallowOver && this.collect.canDrop)]
+    }, [this.$slots.before?.(), this.items.map((item, i) => {
+      const before = this.items[i - 1];
+      const contents = [];
+      if (this.config.isDrop !== false) {
+        contents.push(createVNode(GctDndDropLine, {
+          "key": item.id + '___line',
+          "config": this.config,
+          "active": this.dropLineState.isBeforeHover === true && this.dropLineState.activeKey === item.id || before && this.dropLineState.activeKey === before.id && this.dropLineState.isBeforeHover === false,
+          "onDrop": data => this.onDrop(GCT_DND_INSERT_POS.BEFORE, data, i)
+        }, null));
+      }
+      contents.push(createVNode(GctDndItem, {
+        "key": item.id,
+        "config": this.config,
+        "index": i,
+        "data": item,
+        "last": i === this.items.length - 1,
+        "onDrop": (pos, data) => this.onDrop(pos, data, i)
+      }, {
+        default: this.$slots.default
+      }));
+      return contents;
+    }), last ? createVNode(GctDndDropLine, {
+      "key": last.id + '___last-line',
+      "config": this.config,
+      "active": this.dropLineState.activeKey === last.id && this.dropLineState.isBeforeHover === false,
+      "onDrop": data => this.onDrop(GCT_DND_INSERT_POS.AFTER, data, this.items.length - 1)
+    }, null) : null, this.$slots.after?.()]);
+  }
+});
+
+export { GctDndContainer };

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;