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

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/formula-editor/constants/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 公式编辑器 wujie 事件常量
+ */
+export declare const WUJIE_FORMULA_EVENTS: {
+    CONFIRM: string;
+    CANCEL: string;
+};

package/es/modules/formula-editor/constants/index.mjs

@@ -0,0 +1,8 @@
+const WUJIE_FORMULA_EVENTS = {
+  // 公式编辑完成，确认并关闭事件
+  CONFIRM: "wujie-formula___confirm",
+  // 公式编辑取消事件，直接关闭编辑器
+  CANCEL: "wujie-formula___cancel"
+};
+
+export { WUJIE_FORMULA_EVENTS };

package/es/modules/formula-editor/formula-editor.d.ts

@@ -0,0 +1,10 @@
+import { IFormulaEditorOptions } from './interface/i-formula-editor-options/i-formula-editor-options';
+import { IFormulaResult } from './interface/i-formula-result/i-formula-result';
+/**
+ * 打开公式编辑器
+ *
+ * @export
+ * @param {IFormulaEditorOptions} opts
+ * @return {*}  {(Promise<IFormulaResult | undefined>)}
+ */
+export declare function openFormulaEditor(opts: IFormulaEditorOptions): Promise<IFormulaResult | undefined>;

package/es/modules/formula-editor/formula-editor.mjs

@@ -0,0 +1,55 @@
+import { createApp, h } from 'vue';
+import WujieVue3 from 'wujie-vue3';
+import '@gct-paas/core';
+import '../../components/layout/view-container/view-container.css';import '../../components/layout/flex-container/flex-container.css';import '../../components/code-editor/code-editor.css';import '../../components/copy-module-key/copy-module-key.css';import '../../components/basic-button/basic-button.css';import '../../components/base-button/base-button.css';import '../../components/assets-svg-icon/assets-svg-icon.css';import '../../components/svg-icon/svg-icon.css';/* empty css                                       */
+/* empty css                                                     */
+import 'ant-design-vue';
+import 'lodash-es';
+/* empty css                                             */
+/* empty css                                               */
+import { WuJieContainer } from '../../components/wujie-container/wujie-container.mjs';
+import 'bignumber.js';
+/* empty css                                                     */
+import '@monaco-editor/loader';
+/* empty css                                             */
+/* empty css                                                          */
+/* empty css                                                          */
+
+function openFormulaEditor(opts) {
+  return new Promise((resolve) => {
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    const app = createApp({
+      setup() {
+        function destroy() {
+          app.unmount();
+          document.body.removeChild(div);
+        }
+        return () => {
+          return h(
+            "div",
+            {},
+            h(WuJieContainer, {
+              wuJieName: `gct-formula-editor`,
+              // TODO: localhost:9000 需要替换成实际的地址
+              url: "http://localhost:9000",
+              props: opts,
+              onWujieFormula___confirm: (data) => {
+                resolve(data);
+                destroy();
+              },
+              onWujieFormula___cancel: () => {
+                resolve(void 0);
+                destroy();
+              }
+            })
+          );
+        };
+      }
+    });
+    app.use(WujieVue3);
+    app.mount(div);
+  });
+}
+
+export { openFormulaEditor };

package/es/modules/formula-editor/index.d.ts

@@ -0,0 +1,4 @@
+export { WUJIE_FORMULA_EVENTS } from './constants';
+export type { IFormulaEditorOptions, IFieldProps, } from './interface/i-formula-editor-options/i-formula-editor-options';
+export type { IFormulaResult } from './interface/i-formula-result/i-formula-result';
+export { openFormulaEditor } from './formula-editor';

package/es/modules/formula-editor/interface/i-formula-editor-options/i-formula-editor-options.d.ts

@@ -0,0 +1,47 @@
+import { ExpressionModeEnum, IdentifiersInterface, ReturnTypeEnum, EntityFormulaReturnTypeEnum, DataSetReturnTypeEnum } from '@gct-paas/core';
+/**
+ * 公式字段属性配置
+ */
+export interface IFieldProps {
+    /** 小数位数 */
+    digits?: number;
+    /** 布尔值为真时的文本 */
+    trueText?: string;
+    /** 布尔值为假时的文本 */
+    falseText?: string;
+}
+/**
+ * 公式编辑器配置选项
+ *
+ * 替代原 ExpressionInterface，去掉 callback 回调（改为 Promise 返回）
+ */
+export interface IFormulaEditorOptions {
+    /** 编辑器使用场景 */
+    mode: ExpressionModeEnum;
+    /** 初始表达式（ID 形式，用于保存和回显） */
+    expr?: string;
+    /** 初始表达式显示内容（名称形式） */
+    exprEcho?: string;
+    /** 表达式名称（如 GATEWAY_RULE / BI_FORMULA 模式下的名称） */
+    exprName?: string;
+    /** 期望返回值类型 */
+    returnType?: ReturnTypeEnum | EntityFormulaReturnTypeEnum | DataSetReturnTypeEnum;
+    /**
+     * 全局变量
+     */
+    globalVars?: IObject[];
+    /**
+     * 页面变量
+     */
+    pageVars?: IObject[];
+    /** 是否禁止修改返回值类型 */
+    disabledReturnType?: boolean;
+    /** 弹窗标题，默认为系统文案 */
+    modalTitle?: string;
+    /** 标识符集合（字段、变量、函数、运算符等） */
+    identifiers: IdentifiersInterface;
+    /** 默认模型 key，用于 RUN_FORMULA 模式 */
+    modelKey?: string;
+    /** 字段属性（精度、布尔文本等） */
+    fieldProps?: IFieldProps;
+}

package/es/modules/formula-editor/interface/i-formula-result/i-formula-result.d.ts

@@ -0,0 +1,20 @@
+import { IFieldProps } from '../i-formula-editor-options/i-formula-editor-options';
+/**
+ * 公式编辑器确认结果
+ *
+ * 通过 openFormulaEditor 返回的 Promise resolve 时的值
+ */
+export interface IFormulaResult {
+    /** 表达式（ID 形式，用于保存至数据库） */
+    expr: string;
+    /** 表达式显示内容（名称形式，用于界面回显） */
+    exprEcho: string;
+    /** 实际选择的返回值类型 */
+    returnType?: string;
+    /** 表达式名称（GATEWAY_RULE / BI_FORMULA 等模式填写） */
+    exprName?: string;
+    /** 模型 key（RUN_FORMULA 模式下选择的模型） */
+    modelKey?: string;
+    /** 字段属性（精度、布尔文本等） */
+    fieldProps?: IFieldProps;
+}

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