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

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

@@ -0,0 +1,4 @@
+import CloseButton from './CloseButton.vue';
+import ComplexNode from './ComplexNode.vue';
+import DefaultNode from './DefaultNode.vue';
+export { CloseButton, ComplexNode, DefaultNode };

package/es/packages/form-config/src/components/renderer/index.js

@@ -0,0 +1,3 @@
+export { default as CloseButton } from './CloseButton.js';
+export { default as ComplexNode } from './ComplexNode.js';
+export { default as DefaultNode } from './DefaultNode.js';

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

@@ -1,3 +1,3 @@
 export * from './usePresetRenderer';
-export * from './useSortable';
+export * from './useSortalbeConfig';
 export * from './useConfigurationField';

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

@@ -1,3 +1,3 @@
 export { usePresetRenderer } from './usePresetRenderer.js';
-export { useSortable } from './useSortable.js';
+export { useSortableConfig } from './useSortalbeConfig.js';
 export { useConfigurationField } from './useConfigurationField.js';

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,15 @@
-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, ComplexNode } from '../../../../packages/form-config/src/components';
 
-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.d.ts → useSortalbeConfig.d.ts}

@@ -1,6 +1,6 @@
 import Sortable from 'sortablejs';
-export declare function useSortable(): {
-    commonConfig: {
+export declare function useSortableConfig(): {
+    getCommonConfig: () => {
         onMove: ({ to, from }: Sortable.SortableEvent) => void;
         onChoose: ({ target, item }: Sortable.SortableEvent) => void;
         onUnchoose: ({ from, to, target, item }: Sortable.SortableEvent) => void;

package/es/packages/form-config/src/hooks/{useSortable.js → useSortalbeConfig.js}

@@ -1,4 +1,4 @@
-function useSortable() {
+function useSortableConfig() {
   let timer = null;
   function onChoose({ target, item }) {
     timer = setTimeout(() => {
@@ -15,17 +15,13 @@ 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;
+    to !== from && from.classList.remove("is-choosing-area");
     to.classList.add("is-choosing-area");
   }
-  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" };
-  return { commonConfig };
+  const getCommonConfig = () => ({ onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" });
+  return { getCommonConfig };
 }
 
-export { useSortable };
+export { useSortableConfig };

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,7 @@
-import { FormConfigWidth } from '../../../../../es/packages/form-config';
+import { FormConfigItem, FormConfigWidth } from '../../../../../es/packages/form-config';
 export declare function layoutWidthEnum2Column(layoutWidthEnum: FormConfigWidth): number;
+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,26 @@
+import { ref } 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;
 }
+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 };

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

@@ -7,7 +7,6 @@
   box-sizing: border-box;
   flex-shrink: 0;
   width: 200px;
-  background: white;
 }
 .form-config__materialHeader {
   display: flex;
@@ -27,12 +26,7 @@
   gap: 8px;
 }
 .form-config__materialContentItem {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border: 1px dashed #d9d9d9;
-  box-sizing: border-box;
-  background-color: #fafafa;
+  cursor: move;
   grid-column: span var(--item-column) / span var(--item-column);
 }
 .form-config__displayWrapper {
@@ -56,10 +50,9 @@
   overflow-y: auto;
   max-height: var(--max-height);
   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);
@@ -70,7 +63,6 @@
   box-sizing: border-box;
   flex-shrink: 0;
   width: 240px;
-  background: white;
 }
 .form-config__configHeader {
   display: flex;
@@ -85,32 +77,44 @@
   overflow-y: auto;
   max-height: var(--max-height);
 }
+.form-config__renderer {
+  cursor: move;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
 .form-config__renderer--default {
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 8px;
-  border: 1px dashed #d9d9d9;
   box-sizing: border-box;
-  background-color: #fafafa;
   user-select: none;
   position: relative;
-  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 {
   display: flex;
 }
 .form-config .is-disabled {
-  background: #e5e5e5;
+  background: #e5e5e5 !important;
 }
 .form-config .is-required {
   padding-left: 16px !important;
@@ -122,11 +126,22 @@
   color: red;
 }
 .form-config .is-active {
-  color: #5585f5;
+  color: #5585f5 !important;
 }
 .form-config .is-choosing {
   box-shadow: #5585f5 0 0 0 2px !important;
+  opacity: 0.7;
 }
 .form-config .is-choosing-area {
-  background: #f0f7ff;
+  background: rgba(128, 128, 128, 0.1);
+}
+.form-config [is-hovering='true'] .form-config__renderer--closeButton {
+  visibility: visible;
+}
+.form-config .form-config__renderer--closeButton {
+  position: absolute;
+  visibility: hidden;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 5px;
 }

package/es/packages/form-render/src/FormRender.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, isRef, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, nextTick } from 'vue';
+import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, isRef, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, toDisplayString, nextTick } from 'vue';
 import { createForm, onFieldValueChange, isField } from '@formily/core';
 import { FormProvider, FormConsumer } from '@formily/vue';
 import { isObject } from '@vue/shared';
@@ -183,9 +183,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createVNode(unref(FormProvider), { form: unref(formModel) }, {
                   default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "default", { schemaFiled: unref(SchemaField) }, () => [
-                      createVNode(unref(SchemaField), { schema: unref(parsedSchema) }, null, 8, ["schema"])
-                    ]),
+                    createVNode(unref(SchemaField), { schema: unref(parsedSchema) }, null, 8, ["schema"]),
                     __props.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
                       default: withCtx(({ form }) => [
                         createElementVNode("div", _hoisted_2, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
@@ -193,14 +191,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _: 1
                     })) : createCommentVNode("v-if", true)
                   ]),
-                  _: 3
+                  _: 1
                 }, 8, ["form"])
               ], 36)
             ]),
-            _: 3
+            _: 1
           }, 8, ["theme-overrides"])
         ]),
-        _: 3
+        _: 1
       });
     };
   }

package/es/packages/form-render/src/hooks/useFieldListAdaptor.js

@@ -228,8 +228,7 @@ function useFieldListAdaptor(collector) {
       return fin;
     }, {});
     function bindIndex(schema, idx) {
-      schema["x-index"] = idx;
-      return schema;
+      return { ...schema, "x-index": idx };
     }
     function createFieldName(fieldItem) {
       if (fieldItem.suffixConfig) {

package/es/packages/form-render/src/hooks/useFormContext.js

@@ -28,10 +28,7 @@ function useFormContext(props, formModel) {
     }
   }));
   const SchemaField = injectOrProvide(InjectionSchemaField, () => createSchemaField({
-    components: {
-      ...components,
-      ...props.components
-    },
+    components: { ...components, ...props.components },
     scope: Object.assign({}, usePresetScope(), props.scope)
   }).SchemaField);
   const businessCollector = useBusinessBinding().create(formModel, props.businessFormatter);

package/es/packages/form-render/src/hooks/useFormItemDeps.d.ts

@@ -3,6 +3,7 @@ import { DependKeyType } from '../../../../../es/packages/form-render';
 export declare class FormItemDepsCollector {
     private readonly collector;
     setDeps(key: string, dependKeys: DependKeyType, callback: Func): void;
+    getDeps(dependKey: string): Map<string, Func<any[], any>> | undefined;
     trigger(dependKey: string, payload?: unknown): void;
 }
 export declare function useFormItemDeps(): {

package/es/packages/form-render/src/hooks/useFormItemDeps.js

@@ -12,9 +12,12 @@ class FormItemDepsCollector {
       this.collector.set(dependKey, map);
     });
   }
+  getDeps(dependKey) {
+    return this.collector.get(dependKey);
+  }
   trigger(dependKey, payload) {
-    const map = this.collector.get(dependKey);
-    map && map.forEach((cb) => isFunction(cb) && cb(payload));
+    var _a;
+    (_a = this.getDeps(dependKey)) == null ? void 0 : _a.forEach((cb) => isFunction(cb) && cb(payload));
   }
 }
 function useFormItemDeps() {

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

@@ -4,7 +4,7 @@ import { isObject } from '@vue/shared';
 import { isNumber, isString, isFunction } from 'lodash-es';
 export { isIdCard, isMobile, parseAge2Birthday, parseAge2FromContext, parseBirthday, parseIdCard, transformDateFormat } from './business.js';
 export { queryDecorator, queryInput } from './dom.js';
-export { assignUpdateValue, createLinebarId, createObjSchema, elementIdEscape, fieldKeyEscape, getParentLinebar, traverseDependKey, traverseFieldList, traverseSchema } from './schema.js';
+export { assignUpdateValue, createLinebarId, createObjSchema, elementIdEscape, fieldKeyEscape, getParentLinebar, traverseDependKey, traverseSchema } from './schema.js';
 
 function formRenderLog(message, type = "log") {
   console[type](`[FormRender]: ${message}`);

package/es/packages/form-render/src/utils/schema.d.ts

@@ -13,7 +13,6 @@ export declare function getParentLinebar(key: string, fieldList: FieldItem[]): s
 export declare function assignUpdateValue(props: AnyObject, field: GeneralField): {
     [x: string]: any;
 };
-export declare function traverseFieldList(fieldList: FieldItem[], handler: (field: FieldItem) => void): void;
 export declare function createObjSchema(properties: Record<string, ISchema>): {
     type: string;
     properties: Record<string, import("@formily/json-schema/esm/types").Stringify<{

package/es/packages/form-render/src/utils/schema.js

@@ -79,19 +79,8 @@ function assignUpdateValue(props, field) {
   }
   return _props;
 }
-function traverseFieldList(fieldList, handler) {
-  function traverse(fieldList2) {
-    if (!isArray(fieldList2))
-      return;
-    fieldList2.forEach((field) => {
-      handler(field);
-      traverse(field.properties);
-    });
-  }
-  traverse(fieldList);
-}
 function createObjSchema(properties) {
   return { type: "object", properties };
 }
 
-export { assignUpdateValue, createLinebarId, createObjSchema, elementIdEscape, fieldKeyEscape, getParentLinebar, traverseDependKey, traverseFieldList, traverseSchema };
+export { assignUpdateValue, createLinebarId, createObjSchema, elementIdEscape, fieldKeyEscape, getParentLinebar, traverseDependKey, traverseSchema };

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

@@ -115,7 +115,7 @@
 }
 .form-render__combinationClose {
   position: absolute;
-  right: 0;
+  right: 5px;
   top: 5px;
   width: 14px;
   height: 14px;

package/es/packages/index.css

@@ -2936,7 +2936,7 @@ body > .vxe-table--tooltip-wrapper {
 }
 .form-render__combinationClose {
   position: absolute;
-  right: 0;
+  right: 5px;
   top: 5px;
   width: 14px;
   height: 14px;
@@ -3189,7 +3189,6 @@ body > .vxe-table--tooltip-wrapper {
   box-sizing: border-box;
   flex-shrink: 0;
   width: 200px;
-  background: white;
 }
 .form-config__materialHeader {
   display: flex;
@@ -3209,12 +3208,7 @@ body > .vxe-table--tooltip-wrapper {
   gap: 8px;
 }
 .form-config__materialContentItem {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border: 1px dashed #d9d9d9;
-  box-sizing: border-box;
-  background-color: #fafafa;
+  cursor: move;
   grid-column: span var(--item-column) / span var(--item-column);
 }
 .form-config__displayWrapper {
@@ -3238,10 +3232,9 @@ body > .vxe-table--tooltip-wrapper {
   overflow-y: auto;
   max-height: var(--max-height);
   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);
@@ -3252,7 +3245,6 @@ body > .vxe-table--tooltip-wrapper {
   box-sizing: border-box;
   flex-shrink: 0;
   width: 240px;
-  background: white;
 }
 .form-config__configHeader {
   display: flex;
@@ -3267,32 +3259,44 @@ body > .vxe-table--tooltip-wrapper {
   overflow-y: auto;
   max-height: var(--max-height);
 }
+.form-config__renderer {
+  cursor: move;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
 .form-config__renderer--default {
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 8px;
-  border: 1px dashed #d9d9d9;
   box-sizing: border-box;
-  background-color: #fafafa;
   user-select: none;
   position: relative;
-  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 {
   display: flex;
 }
 .form-config .is-disabled {
-  background: #e5e5e5;
+  background: #e5e5e5 !important;
 }
 .form-config .is-required {
   padding-left: 16px !important;
@@ -3304,11 +3308,22 @@ body > .vxe-table--tooltip-wrapper {
   color: red;
 }
 .form-config .is-active {
-  color: #5585f5;
+  color: #5585f5 !important;
 }
 .form-config .is-choosing {
   box-shadow: #5585f5 0 0 0 2px !important;
+  opacity: 0.7;
 }
 .form-config .is-choosing-area {
-  background: #f0f7ff;
+  background: rgba(128, 128, 128, 0.1);
+}
+.form-config [is-hovering='true'] .form-config__renderer--closeButton {
+  visibility: visible;
+}
+.form-config .form-config__renderer--closeButton {
+  position: absolute;
+  visibility: hidden;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 5px;
 }

package/es/packages/shortcut-setter/src/ShortcutSetter.js

@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             placeholder: shortcut.placeholder,
             operation: shortcut.operation
           },
-          elem_width: 12
+          elem_width: 6
         };
       });
       key.value++;
@@ -83,6 +83,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(FormRender), {
+        column: 12,
         key: key.value,
         "label-placement": "left",
         "field-list": fieldList.value,