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

package/es/packages/form-config/src/FormConfig.js

@@ -1,11 +1,11 @@
-import { defineComponent, ref, provide, toRaw, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, mergeProps, withCtx, toDisplayString, createBlock, resolveDynamicComponent, createTextVNode } from 'vue';
+import { defineComponent, ref, provide, toRaw, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, mergeProps, withCtx, createTextVNode, toDisplayString } from 'vue';
 import { cloneDeep, isFunction } from 'lodash-es';
+import { NButton } from 'naive-ui';
 import Draggable from 'vuedraggable';
+import { FormConfigCreator, FormConfigDragDisplay, FormConfigEdit } from '../../../packages/form-config/src/components';
 import { layoutWidthEnum2Column } from '../../../packages/form-config/src/utils';
-import FormConfigEdit from './components/FormConfigEdit.js';
-import FormConfigCreator from './components/FormConfigCreator.js';
-import { InjectionActiveFieldItem } from '../../../packages/form-config/src/constants';
-import { useSortable, usePresetRenderer } from '../../../packages/form-config/src/hooks';
+import { InjectionFieldList, InjectionMaterialList, InjectionActiveFieldItem } from '../../../packages/form-config/src/constants';
+import { useSortableConfig } from '../../../packages/form-config/src/hooks';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "form-config__material" };
@@ -24,20 +24,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose }) {
     const props = __props;
-    const { commonConfig } = useSortable();
+    const { getCommonConfig } = useSortableConfig();
     const fieldListRef = ref([]);
+    provide(InjectionFieldList, fieldListRef);
     const materialListRef = ref([]);
+    provide(InjectionMaterialList, materialListRef);
     function addItem(fieldItem) {
       if (fieldListRef.value.some((field) => field.key === fieldItem.key))
         return;
       fieldListRef.value.push(fieldItem);
     }
-    const textFormatter = (fieldItem, parsedText) => {
+    const parsedTextFormatter = (fieldItem, parsedText) => {
       if (!isFunction(props.textFormatter))
         return parsedText;
       return props.textFormatter(fieldItem, parsedText);
     };
-    const { getRenderer } = usePresetRenderer(textFormatter);
     const currentEditField = ref();
     provide(InjectionActiveFieldItem, currentEditField);
     const formConfigEditRef = ref();
@@ -66,17 +67,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("section", _hoisted_1, [
           _hoisted_2,
-          createVNode(unref(Draggable), mergeProps(unref(commonConfig), {
+          createVNode(unref(Draggable), mergeProps(unref(getCommonConfig)(), {
             class: "form-config__materialContent",
             group: "__display",
             modelValue: materialListRef.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => materialListRef.value = $event)
           }), {
             item: withCtx(({ element }) => [
-              createElementVNode("div", {
+              createVNode(unref(NButton), {
+                secondary: "",
                 style: normalizeStyle({ "--item-column": unref(layoutWidthEnum2Column)(element.layoutWidthEnum) }),
                 class: "form-config__materialContentItem"
-              }, toDisplayString(element.name), 5)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(element.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["style"])
             ]),
             _: 1
           }, 16, ["modelValue"])
@@ -84,29 +91,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("section", _hoisted_3, [
           createElementVNode("header", _hoisted_4, [
             _hoisted_5,
-            createVNode(FormConfigCreator, { onSubmit: addItem })
+            createVNode(unref(FormConfigCreator), { onSubmit: addItem })
           ]),
-          createVNode(unref(Draggable), mergeProps(unref(commonConfig), {
-            group: "__display",
+          createVNode(unref(FormConfigDragDisplay), {
             class: "form-config__displayContent",
+            "text-formatter": parsedTextFormatter,
             modelValue: fieldListRef.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => fieldListRef.value = $event)
-          }), {
-            item: withCtx(({ element }) => [
-              createElementVNode("section", {
-                class: "form-config__displayContentItem",
-                style: normalizeStyle({ "--item-column": unref(layoutWidthEnum2Column)(element.layoutWidthEnum) })
-              }, [
-                (openBlock(), createBlock(resolveDynamicComponent(unref(getRenderer)(element)), { fieldItem: element }, null, 8, ["fieldItem"]))
-              ], 4)
-            ]),
-            _: 1
-          }, 16, ["modelValue"])
+          }, null, 8, ["modelValue"])
         ]),
         createElementVNode("section", _hoisted_6, [
           _hoisted_7,
           createElementVNode("section", _hoisted_8, [
-            createVNode(FormConfigEdit, {
+            createVNode(unref(FormConfigEdit), {
               ref_key: "formConfigEditRef",
               ref: formConfigEditRef
             }, null, 512)