cnhis-design-vue 3.1.17-beta.2 → 3.1.17-beta.3

package/es/packages/form-config/src/components/FormConfigCreator.js

@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       await formRef.validate();
       const formData = formRef.getFormValues();
-      emit("submit", { layoutWidthEnum: "ALL_LINE", ...formData, type, key: formData.name });
+      emit("submit", { layoutWidthEnum: "ALL_LINE", ...formData, type, key: formData.name, __new: true });
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NButtonGroup), { size: "small" }, {
@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             default: withCtx(() => [
               createVNode(unref(FormRender), {
-                column: "12",
+                column: 12,
                 ref_key: "lineBreakFormRef",
                 ref: lineBreakFormRef,
                 "initial-data": unref(pick)(initialData, ["layoutWidthEnum"]),
@@ -78,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             default: withCtx(() => [
               createVNode(unref(FormRender), {
-                column: "12",
+                column: 12,
                 ref_key: "linebarFormRef",
                 ref: linebarFormRef,
                 "initial-data": initialData,

package/es/packages/form-config/src/components/FormConfigDragDisplay.js

@@ -0,0 +1,43 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeStyle, resolveDynamicComponent } from 'vue';
+import Draggable from 'vuedraggable';
+import { useSortable } from '../../../../packages/form-config/src/hooks';
+import { layoutWidthEnum2Column } from '../../../../packages/form-config/src/utils';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormConfigDragDisplay",
+  props: {
+    fieldItem: { type: Object },
+    getRenderer: { type: Function, require: true },
+    textFormatter: { type: Function, required: true }
+  },
+  setup(__props) {
+    function getItemColumnStyle(fieldItem) {
+      return { "--item-column": fieldItem ? layoutWidthEnum2Column(fieldItem.layoutWidthEnum) : 24 };
+    }
+    const { commonConfig } = useSortable();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Draggable), mergeProps(unref(commonConfig), {
+        style: getItemColumnStyle(__props.fieldItem),
+        group: "__display"
+      }), {
+        item: withCtx(({ element }) => [
+          createElementVNode("div", {
+            class: "form-config__displayContentItem",
+            style: normalizeStyle(getItemColumnStyle(element))
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(__props.getRenderer(element)), {
+              "get-renderer": __props.getRenderer,
+              "field-item": element,
+              textFormatter: __props.textFormatter
+            }, null, 8, ["get-renderer", "field-item", "textFormatter"]))
+          ], 4)
+        ]),
+        _: 1
+      }, 16, ["style"]);
+    };
+  }
+});
+var FormConfigDragDisplay = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FormConfigDragDisplay.vue"]]);
+
+export { FormConfigDragDisplay as default };

package/es/packages/form-config/src/components/FormConfigDragDisplay.vue.d.ts

@@ -0,0 +1,114 @@
+import { Func } from '../../../../../es/src/types';
+import { PropType } from 'vue';
+import { FormConfigItem, FormConfigTextFormatter } from '../../../../../es/packages/form-config';
+declare const _default: import("vue").DefineComponent<{
+    fieldItem: {
+        type: PropType<FormConfigItem>;
+    };
+    getRenderer: {
+        type: Func<any[], any>;
+        require: boolean;
+    };
+    textFormatter: {
+        type: PropType<FormConfigTextFormatter>;
+        required: true;
+    };
+}, {
+    getItemColumnStyle: (fieldItem?: FormConfigItem) => {
+        '--item-column': number;
+    };
+    commonConfig: {
+        onMove: ({ to, from }: import("sortablejs").SortableEvent) => void;
+        onChoose: ({ target, item }: import("sortablejs").SortableEvent) => void;
+        onUnchoose: ({ from, to, target, item }: import("sortablejs").SortableEvent) => void;
+        tag: string;
+        animation: string;
+        'item-key': string;
+    };
+    Draggable: import("vue").DefineComponent<{
+        list: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        modelValue: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        itemKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            required: boolean;
+        };
+        clone: {
+            type: FunctionConstructor;
+            default: (original: any) => any;
+        };
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        move: {
+            type: FunctionConstructor;
+            default: any;
+        };
+        componentData: {
+            type: ObjectConstructor;
+            required: boolean;
+            default: any;
+        };
+    }, unknown, {
+        error: boolean;
+    }, {
+        realList(): any;
+        getKey(): any;
+    }, {
+        getUnderlyingVm(domElement: any): any;
+        getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+        emitChanges(evt: any): void;
+        alterList(onList: any): void;
+        spliceList(): void;
+        updatePosition(oldIndex: any, newIndex: any): void;
+        getRelatedContextFromMoveEvent({ to, related }: {
+            to: any;
+            related: any;
+        }): any;
+        getVmIndexFromDomIndex(domIndex: any): any;
+        onDragStart(evt: any): void;
+        onDragAdd(evt: any): void;
+        onDragRemove(evt: any): void;
+        onDragUpdate(evt: any): void;
+        computeFutureIndex(relatedContext: any, evt: any): any;
+        onDragMove(evt: any, originalEvent: any): any;
+        onDragEnd(): void;
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    } & {
+        itemKey?: string | Function | undefined;
+    }>, {
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    fieldItem: {
+        type: PropType<FormConfigItem>;
+    };
+    getRenderer: {
+        type: Func<any[], any>;
+        require: boolean;
+    };
+    textFormatter: {
+        type: PropType<FormConfigTextFormatter>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/packages/form-config/src/components/FormConfigEdit.js

@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         (openBlock(), createBlock(unref(CFormRender), {
           key: key.value,
-          column: "12",
+          column: 12,
           ref_key: "formRenderRef",
           ref: formRenderRef,
           size: "small",

package/es/packages/form-config/src/components/FormConfigEdit.vue.d.ts

@@ -1687,7 +1687,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             notes?: string | undefined;
             desc?: string | undefined;
             children?: any[] | undefined;
+            __new?: boolean | undefined;
         }[] | undefined;
+        __new?: boolean | undefined;
     }>;
     generateFieldListByFieldItem: (fieldItem: FormConfigItem) => FieldItem[];
     showModal: import("vue").Ref<boolean>;

package/es/packages/form-config/src/constants/index.d.ts

@@ -59,4 +59,6 @@ export declare function isNullOptionConfig(): {
         value: boolean;
     };
 };
+export declare const InjectionFieldList: InjectionKey<Ref<FormConfigItem[]>>;
+export declare const InjectionMaterialList: InjectionKey<Ref<FormConfigItem[]>>;
 export declare const InjectionActiveFieldItem: InjectionKey<Ref<UndefinedAble<FormConfigItem>>>;

package/es/packages/form-config/src/constants/index.js

@@ -24,7 +24,8 @@ function widgetWidthOptionConfig() {
       { text: "1/3", value: "ONE_THREE" },
       { text: "3/4", value: "THREE_FOUR" },
       { text: "1/4", value: "ONE_FOUR" },
-      { text: "1/6", value: "ONE_SIX" }
+      { text: "1/6", value: "ONE_SIX" },
+      { text: "1/8", value: "ONE_EIGHT" }
     ]
   };
 }
@@ -52,6 +53,8 @@ function isNullOptionConfig() {
     close: { describe: "\u4E0D\u5FC5\u586B", value: false }
   };
 }
+const InjectionFieldList = Symbol("InjectionFieldList");
+const InjectionMaterialList = Symbol("InjectionMaterialList");
 const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
 
-export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };
+export { EditAbleField, InjectionActiveFieldItem, InjectionFieldList, InjectionMaterialList, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };

package/es/packages/form-config/src/hooks/usePresetRenderer.d.ts

@@ -1,4 +1,4 @@
-import { FormConfigItem, FormConfigTextFormatter } from '../types';
-export declare function usePresetRenderer(textFormatter: FormConfigTextFormatter): {
+import { FormConfigItem } from '../types';
+export declare function usePresetRenderer(): {
     getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
 };

package/es/packages/form-config/src/hooks/usePresetRenderer.js

@@ -1,94 +1,16 @@
-import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue';
 import { isString, isArray, isFunction } from 'lodash-es';
-import Draggable from 'vuedraggable';
-import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
-import { useSortable } from '../../../../packages/form-config/src/hooks/useSortable';
-import { layoutWidthEnum2Column } from '../../../../packages/form-config/src/utils';
-import { NEllipsis } from 'naive-ui';
+import { computed } from 'vue';
+import DefaultNode from '../components/DefaultNode.js';
+import ComplexNode from '../components/ComplexNode.js';
 
-function usePresetRenderer(textFormatter) {
+function usePresetRenderer() {
   const renderDefaultNode = {
     matcher: () => true,
-    renderer({
-      fieldItem
-    }) {
-      const currentActiveEditField = inject(InjectionActiveFieldItem);
-      return createVNode("section", {
-        "onClick": () => currentActiveEditField.value = fieldItem,
-        "class": {
-          "is-active": currentActiveEditField.value === fieldItem
-        }
-      }, [createVNode(NEllipsis, {
-        "class": ["form-config__renderer--default", {
-          "is-required": fieldItem.required,
-          "is-disabled": fieldItem.editable === false
-        }]
-      }, {
-        default: () => getDisplayText()
-      })]);
-      function getDisplayText() {
-        const type = WidgetTextMap.get(fieldItem.type);
-        return textFormatter(fieldItem, `${fieldItem.name}${type ? `(${type})` : ""}`);
-      }
-    }
+    renderer: DefaultNode
   };
   const renderComplexNode = {
     matcher: ["COMPLEX", "COMBINATION"],
-    renderer: defineComponent({
-      props: {
-        fieldItem: {
-          type: Object,
-          required: true
-        }
-      },
-      setup(props) {
-        function fieldFor(key) {
-          return props.fieldItem[key];
-        }
-        const classList = computed(() => {
-          return "form-config__renderer--complex form-config__renderer--complex--grid";
-        });
-        const style = computed(() => {
-          return {
-            "--item-column": layoutWidthEnum2Column(fieldFor("layoutWidthEnum"))
-          };
-        });
-        function renderField(fieldItem) {
-          const Renderer = getRenderer(fieldItem);
-          return createVNode("div", {
-            "class": "form-config__displayContentItem",
-            "style": {
-              "--item-column": layoutWidthEnum2Column(fieldItem.layoutWidthEnum)
-            }
-          }, [createVNode(Renderer, {
-            "fieldItem": fieldItem
-          }, null)]);
-        }
-        const childrenList = computed({
-          get() {
-            return fieldFor("children");
-          },
-          set(v) {
-            props.fieldItem.children = v;
-          }
-        });
-        const {
-          commonConfig
-        } = useSortable();
-        const DraggableComponent = Draggable;
-        return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
-          "class": classList.value,
-          "style": style.value,
-          "group": fieldFor("key"),
-          "modelValue": childrenList.value,
-          "onUpdate:modelValue": ($event) => childrenList.value = $event
-        }), {
-          item: ({
-            element
-          }) => renderField(element)
-        });
-      }
-    })
+    renderer: ComplexNode
   };
   const rendererWithPreset = computed(() => {
     return [renderComplexNode, renderDefaultNode];

package/es/packages/form-config/src/hooks/useSortable.js

@@ -15,13 +15,9 @@ function useSortable() {
   }
   let prevTo;
   function onMove({ to, from }) {
-    if (to === from) {
-      prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
-      prevTo = null;
-    } else {
-      from.classList.remove("is-choosing-area");
-      prevTo = to;
-    }
+    prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
+    prevTo = to;
+    from.classList.remove("is-choosing-area");
     to.classList.add("is-choosing-area");
   }
   const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" };

package/es/packages/form-config/src/types/index.d.ts

@@ -8,7 +8,7 @@ export declare type FormConfigRenderer = {
     renderer: Component | FunctionalComponent;
 };
 export declare type FormConfigType = 'NEWLINE' | 'LINE_BAR' | 'OTHER' | string;
-export declare type FormConfigWidth = 'ALL_LINE' | 'HALF_LINE' | 'FIVE_SIX' | 'TWO_THREE' | 'ONE_THREE' | 'THREE_FOUR' | 'ONE_FOUR' | 'ONE_SIX';
+export declare type FormConfigWidth = 'ALL_LINE' | 'HALF_LINE' | 'FIVE_SIX' | 'TWO_THREE' | 'ONE_THREE' | 'THREE_FOUR' | 'ONE_FOUR' | 'ONE_SIX' | 'ONE_EIGHT';
 export declare type FormConfigItem = {
     key: string;
     layoutWidthEnum: FormConfigWidth;
@@ -24,6 +24,7 @@ export declare type FormConfigItem = {
     notes: string;
     desc: string;
     children: FormConfigItem[];
+    __new: boolean;
 }>;
 export interface FormConfigTextFormatter {
     (fieldItem: FormConfigItem, parsedText: string): string;

package/es/packages/form-config/src/utils/index.d.ts

@@ -1,2 +1,9 @@
-import { FormConfigWidth } from '../../../../../es/packages/form-config';
+import { Func } from '../../../../../es/src/types';
+import { FormConfigItem, FormConfigWidth } from '../../../../../es/packages/form-config';
 export declare function layoutWidthEnum2Column(layoutWidthEnum: FormConfigWidth): number;
+export declare function stopModifier(fn: Func): (event: Event, ...args: unknown[]) => any;
+export declare function bindHover(fieldItem: FormConfigItem): {
+    onMouseenter: () => FormConfigItem;
+    onMouseleave: () => undefined;
+    'is-hovering': boolean;
+};

package/es/packages/form-config/src/utils/index.js

@@ -1,15 +1,29 @@
+import { ref, withModifiers } from 'vue';
+
 function layoutWidthEnum2Column(layoutWidthEnum) {
   const transferMap = {
-    ALL_LINE: 12,
-    HALF_LINE: 6,
-    FIVE_SIX: 10,
-    TWO_THREE: 8,
-    ONE_THREE: 4,
-    THREE_FOUR: 9,
-    ONE_FOUR: 3,
-    ONE_SIX: 2
+    ALL_LINE: 24,
+    HALF_LINE: 12,
+    FIVE_SIX: 20,
+    TWO_THREE: 16,
+    ONE_THREE: 8,
+    THREE_FOUR: 18,
+    ONE_FOUR: 6,
+    ONE_SIX: 4,
+    ONE_EIGHT: 3
   };
   return transferMap[layoutWidthEnum] || 12;
 }
+function stopModifier(fn) {
+  return withModifiers(fn, ["stop"]);
+}
+const hovering = ref();
+function bindHover(fieldItem) {
+  return {
+    onMouseenter: () => hovering.value = fieldItem,
+    onMouseleave: () => hovering.value = void 0,
+    "is-hovering": hovering.value === fieldItem
+  };
+}
 
-export { layoutWidthEnum2Column };
+export { bindHover, layoutWidthEnum2Column, stopModifier };

package/es/packages/form-config/style/index.css

@@ -30,6 +30,7 @@
   display: flex;
   align-items: center;
   padding: 8px;
+  cursor: move;
   border: 1px dashed #d9d9d9;
   box-sizing: border-box;
   background-color: #fafafa;
@@ -58,8 +59,8 @@
   height: fit-content;
   background: #eeeeee;
   display: grid !important;
-  grid-template-columns: repeat(12, minmax(0px, 1fr));
-  gap: 8px 16px;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
 }
 .form-config__displayContentItem {
   grid-column: span var(--item-column) / span var(--item-column);
@@ -85,6 +86,9 @@
   overflow-y: auto;
   max-height: var(--max-height);
 }
+.form-config__renderer {
+  cursor: move;
+}
 .form-config__renderer--default {
   display: flex;
   align-items: center;
@@ -97,13 +101,21 @@
   width: 100%;
 }
 .form-config__renderer--complex {
-  border: 1px dashed lightblue;
+  border: 1px dashed skyblue;
+  border-radius: 8px;
+  padding: 8px;
+}
+.form-config__renderer--complexHeader {
+  display: flex;
+  justify-content: center;
   padding: 8px;
+  margin-top: -8px;
+  position: relative;
 }
 .form-config__renderer--complex--grid {
   display: grid !important;
-  grid-template-columns: repeat(12, minmax(0px, 1fr));
-  gap: 8px 16px;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
   grid-column: span var(--item-column) / span var(--item-column);
 }
 .form-config__renderer--complex--flex {
@@ -130,3 +142,12 @@
 .form-config .is-choosing-area {
   background: #f0f7ff;
 }
+.form-config [is-hovering='true'] > .form-config__renderer--closeButton {
+  visibility: visible;
+}
+.form-config .form-config__renderer--closeButton {
+  position: absolute;
+  visibility: hidden;
+  top: 12px;
+  right: 5px;
+}

package/es/packages/index.css

@@ -3212,6 +3212,7 @@ body > .vxe-table--tooltip-wrapper {
   display: flex;
   align-items: center;
   padding: 8px;
+  cursor: move;
   border: 1px dashed #d9d9d9;
   box-sizing: border-box;
   background-color: #fafafa;
@@ -3240,8 +3241,8 @@ body > .vxe-table--tooltip-wrapper {
   height: fit-content;
   background: #eeeeee;
   display: grid !important;
-  grid-template-columns: repeat(12, minmax(0px, 1fr));
-  gap: 8px 16px;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
 }
 .form-config__displayContentItem {
   grid-column: span var(--item-column) / span var(--item-column);
@@ -3267,6 +3268,9 @@ body > .vxe-table--tooltip-wrapper {
   overflow-y: auto;
   max-height: var(--max-height);
 }
+.form-config__renderer {
+  cursor: move;
+}
 .form-config__renderer--default {
   display: flex;
   align-items: center;
@@ -3279,13 +3283,21 @@ body > .vxe-table--tooltip-wrapper {
   width: 100%;
 }
 .form-config__renderer--complex {
-  border: 1px dashed lightblue;
+  border: 1px dashed skyblue;
+  border-radius: 8px;
   padding: 8px;
 }
+.form-config__renderer--complexHeader {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  margin-top: -8px;
+  position: relative;
+}
 .form-config__renderer--complex--grid {
   display: grid !important;
-  grid-template-columns: repeat(12, minmax(0px, 1fr));
-  gap: 8px 16px;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
   grid-column: span var(--item-column) / span var(--item-column);
 }
 .form-config__renderer--complex--flex {
@@ -3312,3 +3324,12 @@ body > .vxe-table--tooltip-wrapper {
 .form-config .is-choosing-area {
   background: #f0f7ff;
 }
+.form-config [is-hovering='true'] > .form-config__renderer--closeButton {
+  visibility: visible;
+}
+.form-config .form-config__renderer--closeButton {
+  position: absolute;
+  visibility: hidden;
+  top: 12px;
+  right: 5px;
+}

package/global.d.ts

@@ -1,8 +1,8 @@
-import * as NaiveUI from 'naive-ui';
-
-declare module 'naive-ui' {
-  // @ts-ignore
-  export const NTree: any;
-}
-
-export {};
+import * as NaiveUI from 'naive-ui';
+
+declare module 'naive-ui' {
+  // @ts-ignore
+  export const NTree: any;
+}
+
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "3.1.17-beta.2",
+  "version": "3.1.17-beta.3",
   "license": "ISC",
   "module": "es/packages/index.js",
   "main": "es/packages/index.js",