cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.9

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/editSeparate.js

@@ -0,0 +1,103 @@
+import { defineComponent, inject, ref, watch, computed, onDeactivated, openBlock, createBlock, unref, withCtx, createElementVNode, withModifiers, normalizeStyle, toDisplayString, renderSlot, createVNode } from 'vue';
+import { cloneDeep, isObject, isArray } from 'lodash-es';
+import { NPopover, NInput } from 'naive-ui';
+import { InjectionIhoTableEmits, InjectionIhoTableHandler } from '../../../../constants/index.js';
+import _export_sfc from '../../../../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "editSeparate",
+  props: {
+    value: {},
+    height: { type: Number, default: 48 },
+    column: { type: Object, required: true },
+    row: { type: Object, required: true },
+    displayContent: { type: String, default: "" },
+    dataIndex: { type: Number, required: true }
+  },
+  emits: ["update:value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const globEmit = inject(InjectionIhoTableEmits);
+    const tableHandler = inject(InjectionIhoTableHandler);
+    const popoverRef = ref();
+    const editContent = ref();
+    function setEditContent(value) {
+      editContent.value = value;
+    }
+    const show = ref(false);
+    function setShow(v) {
+      show.value = v;
+    }
+    watch(show, updateShow);
+    async function onShow() {
+      var _a;
+      editContent.value = cloneDeep(props.value);
+      await new Promise((resolve) => setTimeout(resolve));
+      (_a = popoverRef.value) == null ? void 0 : _a.syncPosition();
+      return;
+    }
+    async function onClose() {
+      if (!isObject(editContent.value) && !isArray(editContent.value)) {
+        if (props.value === editContent.value)
+          return;
+      }
+      emit("update:value", editContent.value);
+      globEmit("formChange", {
+        value: editContent.value,
+        row: props.row,
+        column: props.column,
+        index: props.dataIndex
+      });
+      tableHandler.updateTableDataRef();
+    }
+    function updateShow(show2) {
+      show2 ? onShow() : onClose();
+    }
+    const style = computed(() => ({
+      border: "1px solid #f5f5f5",
+      height: props.height - 16 + "px",
+      padding: "4px 0 4px 0",
+      background: "white",
+      wordBreak: "keep-all",
+      boxSizing: "border-box",
+      "border-radius": "4px"
+    }));
+    onDeactivated(onClose);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NPopover), {
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        trigger: "manual",
+        show: show.value,
+        "onUpdate:show": _cache[2] || (_cache[2] = ($event) => show.value = $event),
+        "show-arrow": false
+      }, {
+        trigger: withCtx(() => [
+          createElementVNode("div", {
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => show.value = !show.value, ["stop"])),
+            style: normalizeStyle(unref(style))
+          }, toDisplayString(__props.displayContent || " "), 5)
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "menu", {
+            value: editContent.value,
+            "onUpdate:value": setEditContent,
+            "onUpdate:show": setShow,
+            col: __props.column,
+            row: __props.row
+          }, () => [
+            createVNode(unref(NInput), {
+              value: editContent.value,
+              "onUpdate:value": _cache[1] || (_cache[1] = ($event) => editContent.value = $event),
+              type: "textarea"
+            }, null, 8, ["value"])
+          ])
+        ]),
+        _: 3
+      }, 8, ["show"]);
+    };
+  }
+});
+var EditSeparate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "editSeparate.vue"]]);
+
+export { EditSeparate as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/editSeparate.vue.d.ts

@@ -0,0 +1,94 @@
+import { AnyObject } from '../../../../../../../../es/shared/types';
+import { CSSProperties, PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+declare const _default: import("vue").DefineComponent<{
+    value: {};
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    displayContent: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        value: {};
+        height: {
+            type: NumberConstructor;
+            default: number;
+        };
+        column: {
+            type: PropType<IhoTableFieldItem>;
+            required: true;
+        };
+        row: {
+            type: PropType<AnyObject>;
+            required: true;
+        };
+        displayContent: {
+            type: StringConstructor;
+            default: string;
+        };
+        dataIndex: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>> & {
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    }>>;
+    globEmit: (event: string, ...args: unknown[]) => void;
+    tableHandler: import("../../../../../../../../es/components/iho-table").IhoTableHandler;
+    popoverRef: import("vue").Ref<any>;
+    editContent: import("vue").Ref<any>;
+    setEditContent: (value: any) => void;
+    show: import("vue").Ref<boolean>;
+    setShow: (v: boolean) => void;
+    emit: (event: "update:value", ...args: any[]) => void;
+    onShow: () => Promise<void>;
+    onClose: () => Promise<void>;
+    updateShow: (show: boolean) => void;
+    style: import("vue").ComputedRef<CSSProperties>;
+    NPopover: any;
+    NInput: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {};
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    displayContent: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    height: number;
+    displayContent: string;
+}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function separateRendererPlugins(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/index.js

@@ -0,0 +1,162 @@
+import { reactive, inject, unref, createVNode, onBeforeUnmount } from 'vue';
+import { traverse } from '../../../../../../../shared/utils/index.js';
+import { isFunction } from 'lodash-es';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE, InjectionIhoTableUUID } from '../../../../constants/index.js';
+import { getRowHeight } from '../../../../utils/index.js';
+import { isSeparateColumn, getColumnRenderWidth, contentSeparate, getColumnInfoMaxLength, generateSeparateRowData } from './separateUtils.js';
+import EditSeparate from './editSeparate.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
+
+function separateRendererPlugins() {
+  const pluginName = "separateRendererPlugins";
+  const separateRowMap = reactive(/* @__PURE__ */ new Map());
+  function getSeparateRowData(uuid, rowData) {
+    var _a;
+    return (_a = separateRowMap.get(uuid)) == null ? void 0 : _a.get(rowData);
+  }
+  function setSeparateRowData(uuid, rowData, data) {
+    const map = separateRowMap.get(uuid) || /* @__PURE__ */ new WeakMap();
+    separateRowMap.set(uuid, map);
+    map.set(rowData, data);
+  }
+  const separateColumnMap = reactive(/* @__PURE__ */ new Map());
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.SEPARATE, {
+        renderCell(renderOpts, {
+          column,
+          row
+        }) {
+          var _a;
+          const uuid = inject(InjectionIhoTableUUID);
+          const separateRow = getSeparateRowData(unref(uuid), row);
+          return createVNode("section", null, [(_a = separateRow == null ? void 0 : separateRow.separateData) == null ? void 0 : _a[column.field]]);
+        },
+        renderEdit(renderOpts, {
+          column,
+          row
+        }) {
+          var _a, _b;
+          const uuid = inject(InjectionIhoTableUUID);
+          const separateRow = getSeparateRowData(unref(uuid), row);
+          const height = getRowHeight();
+          const slots = {};
+          if (isFunction((_a = renderOpts.props) == null ? void 0 : _a.separateSlot)) {
+            slots.menu = renderOpts.props.separateSlot;
+          }
+          return [createVNode(EditSeparate, {
+            "value": row[column.field],
+            "onUpdate:value": ($event) => row[column.field] = $event,
+            "dataIndex": separateRow == null ? void 0 : separateRow.index,
+            "height": height,
+            "column": column,
+            "row": row,
+            "displayContent": (_b = separateRow == null ? void 0 : separateRow.separateData) == null ? void 0 : _b[column.field]
+          }, slots)];
+        }
+      });
+    },
+    apply(hooks) {
+      hooks.fieldHooks.fieldList.tap(pluginName, (fieldList, {
+        uuid
+      }) => {
+        uuid && separateColumnMap.set(uuid, getSeparateColumn(fieldList));
+        return fieldList;
+        function getSeparateColumn(fieldList2) {
+          return fieldList2.reduce((res, field) => {
+            traverse(field, (item) => {
+              isSeparateColumn(item) && res.push(item);
+            });
+            return res;
+          }, []);
+        }
+      });
+      hooks.dataHooks.data.tapPromise(pluginName, async (rowData, {
+        insertAfter,
+        index: dataIndex,
+        $table
+      }, config) => {
+        if (!config.uuid)
+          return;
+        const separateColumns = separateColumnMap.get(config.uuid);
+        if (!separateColumns || !separateColumns.length)
+          return;
+        const parsedRowDataInfo = [];
+        for (const column of separateColumns) {
+          if (!column.field)
+            continue;
+          const width = await getColumnRenderWidth(column, $table);
+          parsedRowDataInfo.push({
+            field: column.field,
+            data: contentSeparate(rowData[column.field], column, width)
+          });
+        }
+        Array.from({
+          length: getColumnInfoMaxLength(parsedRowDataInfo)
+        }).forEach((_, index) => {
+          const separateData = generateSeparateRowData(parsedRowDataInfo, index);
+          if (index === 0) {
+            setSeparateRowData(config.uuid, rowData, {
+              index: dataIndex,
+              separateData
+            });
+            rowData.$__SEPARATE_DATA = [separateData];
+            return;
+          }
+          const data = {
+            $__SEPARATE: true
+          };
+          setSeparateRowData(config.uuid, data, {
+            index: dataIndex,
+            separateData
+          });
+          rowData.$__SEPARATE_DATA.push(separateData);
+          insertAfter(data);
+        });
+      });
+      hooks.eventHooks.onResizableChange.tap(pluginName, async ({
+        column
+      }, context) => {
+        if (!isSeparateColumn(column))
+          return;
+        context.updateTableDataRef();
+      });
+      hooks.configHooks.editConfig.tap(pluginName, (editConfig = {}, config) => {
+        editConfig.activeMethod = avoidOperationDecorator(editConfig.activeMethod);
+        return editConfig;
+      });
+      hooks.configHooks.checkboxConfig.tap(pluginName, (checkboxConfig = {}, config) => {
+        checkboxConfig.checkMethod = avoidOperationDecorator(checkboxConfig.checkMethod);
+        checkboxConfig.visibleMethod = avoidOperationDecorator(checkboxConfig.visibleMethod);
+        return checkboxConfig;
+      });
+      function avoidOperationDecorator(oldFn) {
+        return (...args) => {
+          var _a;
+          if ((_a = args[0].row) == null ? void 0 : _a.$__SEPARATE)
+            return false;
+          if (isFunction(oldFn)) {
+            return oldFn(...args);
+          }
+          return true;
+        };
+      }
+      hooks.setupHooks.setup.tap(pluginName, (config) => {
+        if (config.value.uuid) {
+          separateRowMap.set(config.value.uuid, /* @__PURE__ */ new WeakMap());
+          separateColumnMap.set(config.value.uuid, []);
+        }
+        onBeforeUnmount(() => {
+          if (config.value.uuid) {
+            separateRowMap.delete(config.value.uuid);
+            separateColumnMap.delete(config.value.uuid);
+          }
+        });
+      });
+    }
+  });
+}
+
+export { separateRendererPlugins };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/separateUtils.d.ts

@@ -0,0 +1,14 @@
+import { AnyObject, Nullable } from '../../../../../../../../es/shared/types';
+import { MaybeRef } from '@vueuse/core';
+import { VxeTableDefines, VxeTableInstance } from 'vxe-table';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+declare type ParsedRowDataInfo = {
+    field: string;
+    data: string[];
+};
+export declare function getColumnInfoMaxLength(parsedRowDataInfo: ParsedRowDataInfo[]): number;
+export declare function getColumnRenderWidth(column: AnyObject, $table: MaybeRef<Nullable<VxeTableInstance>>): Promise<number>;
+export declare function generateSeparateRowData(parsedRowDataInfo: ParsedRowDataInfo[], index: number): AnyObject;
+export declare function contentSeparate(value: unknown, field: IhoTableFieldItem, width: number): any[];
+export declare function isSeparateColumn(field: IhoTableFieldItem | VxeTableDefines.ColumnInfo): boolean | "" | undefined;
+export {};

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/separateUtils.js

@@ -0,0 +1,57 @@
+import { getStringWidth } from '../../../../../../../shared/utils/index.js';
+import { isNumber, isArray, cloneDeep, isString } from 'lodash-es';
+import { nextTick, unref } from 'vue';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
+
+function getColumnInfoMaxLength(parsedRowDataInfo) {
+  return Math.max(...parsedRowDataInfo.map((r) => r.data.length), 1);
+}
+async function getColumnRenderWidth(column, $table) {
+  const prev = getRenderWidth();
+  if (!prev) {
+    await nextTick();
+  }
+  return getRenderWidth() || getColumnWidth();
+  function getRenderWidth() {
+    var _a, _b;
+    return (_b = (_a = unref($table)) == null ? void 0 : _a.getColumnByField(column.field)) == null ? void 0 : _b.renderWidth;
+  }
+  function getColumnWidth() {
+    return isNumber(column.width) ? column.width : 64;
+  }
+}
+function generateSeparateRowData(parsedRowDataInfo, index) {
+  return parsedRowDataInfo.reduce((res, info) => {
+    res[info.field] = info.data[index];
+    return res;
+  }, {});
+}
+function contentSeparate(value, field, width) {
+  if (isArray(value)) {
+    return value.map((row) => {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_b = (_a = field.editRender) == null ? void 0 : _a.props) == null ? void 0 : _b.separateFormatter) == null ? void 0 : _c.call(_b, cloneDeep(row))) != null ? _d : row;
+    });
+  }
+  if (!isString(value) || !isNumber(width))
+    return [value];
+  width -= 24;
+  return [...value].reduce(
+    (res, char) => {
+      const latestString = res[res.length - 1];
+      if (getStringWidth(latestString + char) > width) {
+        res.push(char);
+      } else {
+        res[res.length - 1] = latestString + char;
+      }
+      return res;
+    },
+    [""]
+  );
+}
+function isSeparateColumn(field) {
+  var _a;
+  return field.field && ((_a = field.editRender) == null ? void 0 : _a.name) === EDITABLE_WIDGET_TYPE.SEPARATE;
+}
+
+export { contentSeparate, generateSeparateRowData, getColumnInfoMaxLength, getColumnRenderWidth, isSeparateColumn };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/editTime.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/editTime.js

@@ -0,0 +1,60 @@
+import { defineComponent, inject, createVNode, mergeProps } from 'vue';
+import { NTimePicker } from 'naive-ui';
+import { InjectionIhoTableEmits } from '../../../../constants/index.js';
+import { useCommon } from '../hooks/useCommon.js';
+
+var EditTime = defineComponent({
+  name: "EditTime",
+  inheritAttrs: false,
+  components: {
+    NTimePicker
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const globEmit = inject(InjectionIhoTableEmits);
+    const {
+      formRef,
+      isShow
+    } = useCommon();
+    const onUpdateValue = (value) => {
+      globEmit("formChange", {
+        value,
+        row: props.row,
+        column: props.column,
+        index: props.index
+      });
+    };
+    const timeConfig = {
+      placeholder: attrs.placeholder || "\u8BF7\u9009\u62E9",
+      valueFormat: attrs.valueFormat || "HH:mm",
+      format: attrs.valueFormat || "yyyy-MM-dd HH:mm:ss",
+      ...attrs,
+      onUpdateFormattedValue: onUpdateValue
+    };
+    return () => createVNode(NTimePicker, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event,
+      "formattedValue": props.row[props.column.field],
+      "onUpdate:formattedValue": ($event) => props.row[props.column.field] = $event
+    }, timeConfig), null);
+  }
+});
+
+export { EditTime as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function timeRendererPlugin(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/index.js

@@ -0,0 +1,39 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
+import EditTime from './editTime.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
+
+function timeRendererPlugin() {
+  const pluginName = "timeRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.TIME, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [row[column.field]])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditTime, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { timeRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/checkRendererPlugin.d.ts

@@ -0,0 +1 @@
+export declare function checkRendererPlugin(): import("../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/checkRendererPlugin.js

@@ -0,0 +1,30 @@
+import '../../../../index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
+
+function checkRendererPlugin() {
+  const pluginName = "checkRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    apply(hooks) {
+      hooks.fieldHooks.field.tap({
+        name: pluginName,
+        before: "seqRendererPlugin"
+      }, (field, {
+        index,
+        insertBefore
+      }, config) => {
+        if (index === 0 && config.selectType) {
+          insertBefore({
+            field: pluginName,
+            width: 50,
+            align: "center",
+            type: config.selectType
+          });
+        }
+        return field;
+      });
+    }
+  });
+}
+
+export { checkRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/colorRendererPlugin.d.ts

@@ -0,0 +1 @@
+export declare function colorRendererPlugin(): import("../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/colorRendererPlugin.js

@@ -0,0 +1,46 @@
+import { createVNode } from 'vue';
+import '../../../../index.js';
+import { WIDGET_TYPE } from '../../../constants/index.js';
+import { getRowHeight } from '../../../utils/index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
+
+function colorRendererPlugin() {
+  const pluginName = "checkRendererPlugin";
+  const colorMap = {
+    blue: "blue",
+    sky: "skyblue",
+    azure: "azure",
+    palegreen: "palegreen",
+    yellow: "yellow",
+    darkorange: "darkorange",
+    magenta: "magenta",
+    purple: "purple",
+    maroon: "maroon",
+    orange: "orange",
+    green: "green",
+    red: "red",
+    grey: "grey"
+  };
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(WIDGET_TYPE.COLOR, {
+        renderCell(renderOpts, {
+          row,
+          column
+        }) {
+          const value = row[column.field];
+          const [color, alias] = value.split("-");
+          return [createVNode("div", {
+            "style": {
+              background: colorMap[alias] || color,
+              height: getRowHeight() - 8 + "px"
+            }
+          }, null)];
+        }
+      });
+    }
+  });
+}
+
+export { colorRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/defaultRendererPlugin.d.ts

@@ -0,0 +1 @@
+export declare function defaultRendererPlugin(): import("../../../../../../../es/components/iho-table").TablePlugin;