@gct-paas/core-web 0.1.4-dev.7 → 0.1.4-dev.9

package/es/modules/color-picker/src/ColorPicker2.css

@@ -0,0 +1,156 @@
+.color-picker__popover .ant-popover-inner-content {
+  padding: 0;
+}
+.color-picker__popover .color-picker {
+  z-index: 9;
+  width: var(--w);
+  padding: 10px;
+  background: #fff;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  user-select: none;
+  /* 饱和度和亮度 */
+  /* 色调 透明度 */
+  /* 颜色方块 */
+  /* 颜色的值 hex rgba */
+}
+.color-picker__popover .color-picker-saturation {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  margin-bottom: 10px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  /* 圆圈 */
+}
+.color-picker__popover .color-picker-saturation div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.color-picker__popover .color-picker-saturation .point {
+  position: absolute;
+  z-index: 9;
+  box-sizing: border-box;
+  width: 6px;
+  height: 6px;
+  transform: translate(-50%, -50%);
+  border: 2px solid #ccc;
+  border-radius: 50%;
+  background-color: transparent;
+}
+.color-picker__popover .color-picker-saturation-t {
+  background: linear-gradient(to right, white, #fff0);
+}
+.color-picker__popover .color-picker-saturation-h {
+  background: linear-gradient(to top, black, #fff0);
+}
+.color-picker__popover .color-picker-middle {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+  /* 色调滑块条 */
+  /* 透明度滑块条 */
+  /* 滑块 */
+}
+.color-picker__popover .color-picker-middle .hue-slider {
+  position: relative;
+  height: 10px;
+  margin-bottom: 6px;
+  background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+.color-picker__popover .color-picker-middle .alpha-slider {
+  position: relative;
+  height: 10px;
+  background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==');
+  background-size: 10px 10px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+.color-picker__popover .color-picker-middle .slider {
+  position: absolute;
+  box-sizing: border-box;
+  width: 6px;
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+}
+.color-picker__popover .color-picker-diamond {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  margin-left: 5px;
+  overflow: hidden;
+  border-radius: 3px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==');
+  background-size: 10px 10px;
+}
+.color-picker__popover .color-picker-value {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.color-picker__popover .color-picker-value div {
+  padding: 0 3px;
+  text-align: center;
+}
+.color-picker__popover .color-picker-value input {
+  box-sizing: border-box;
+  width: 34px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+  font-size: 12px;
+  text-align: center;
+}
+.color-picker__popover .color-picker-value p {
+  margin: 3px 0 0;
+  font-size: 12px;
+}
+.color-picker__popover .color-picker-value .rgba-a {
+  padding-right: 0;
+}
+.color-picker__popover .color-picker-value .hex {
+  flex: 1;
+  padding-left: 0;
+}
+.color-picker__popover .color-picker-value .hex input {
+  width: 100%;
+  height: 24px;
+}
+.color-picker__popover .color-picker .presetColor {
+  /* 预设颜色  */
+}
+.color-picker__popover .color-picker .presetColor .title {
+  margin-bottom: 10px;
+  padding-top: 8px;
+  border-top: 1px solid #eaeaea;
+  font-size: 12px;
+}
+.color-picker__popover .color-picker .presetColor .preset {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.color-picker__popover .color-picker .presetColor .preset li {
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.color-picker__popover .color-value .color-value .color-value .hex input {
+  width: 100%;
+  height: 24px;
+}

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

@@ -0,0 +1,72 @@
+@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-container {
+  border: 1px dashed transparent;
+  border-radius: var(--gct-border-radius-s);
+}
+.gct-dnd-container.is-over {
+  border-color: var(--gct-color-border-hover);
+  background-color: var(--gct-color-primary-light);
+}

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

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { IGctDndConfig, IGctDndData, IGctDropCollect } from '../../interface';
+import { GCT_DND_INSERT_POS } from '../../constants';
+export declare const GctDndContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        default: () => IGctDndConfig;
+    };
+    items: {
+        type: PropType<IGctDndData[]>;
+        default: () => never[];
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    dropLineState: {
+        activeKey: string;
+        isBeforeHover: boolean;
+    };
+    collect: import('vue').Ref<IGctDropCollect, IGctDropCollect>;
+    onDrop: (insertPos: GCT_DND_INSERT_POS, data: IGctDndData, insertIndex?: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:items"[], "update:items", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IGctDndConfig>;
+        default: () => IGctDndConfig;
+    };
+    items: {
+        type: PropType<IGctDndData[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
+}>, {
+    config: IGctDndConfig;
+    items: IGctDndData[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctDndContainer;

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 };