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

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

@@ -1,6 +1,6 @@
 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 { usePresetRenderer, useSortableConfig } from '../../../../packages/form-config/src/hooks';
 import { layoutWidthEnum2Column } from '../../../../packages/form-config/src/utils';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
@@ -8,16 +8,16 @@ 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();
+    const { getRenderer } = usePresetRenderer();
+    const { getCommonConfig } = useSortableConfig();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Draggable), mergeProps(unref(commonConfig), {
+      return openBlock(), createBlock(unref(Draggable), mergeProps(unref(getCommonConfig)(), {
         style: getItemColumnStyle(__props.fieldItem),
         group: "__display"
       }), {
@@ -26,11 +26,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "form-config__displayContentItem",
             style: normalizeStyle(getItemColumnStyle(element))
           }, [
-            (openBlock(), createBlock(resolveDynamicComponent(__props.getRenderer(element)), {
-              "get-renderer": __props.getRenderer,
+            (openBlock(), createBlock(resolveDynamicComponent(unref(getRenderer)(element)), {
               "field-item": element,
               textFormatter: __props.textFormatter
-            }, null, 8, ["get-renderer", "field-item", "textFormatter"]))
+            }, null, 8, ["field-item", "textFormatter"]))
           ], 4)
         ]),
         _: 1

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

@@ -1,14 +1,9 @@
-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;
@@ -17,7 +12,8 @@ declare const _default: import("vue").DefineComponent<{
     getItemColumnStyle: (fieldItem?: FormConfigItem) => {
         '--item-column': number;
     };
-    commonConfig: {
+    getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+    getCommonConfig: () => {
         onMove: ({ to, from }: import("sortablejs").SortableEvent) => void;
         onChoose: ({ target, item }: import("sortablejs").SortableEvent) => void;
         onUnchoose: ({ from, to, target, item }: import("sortablejs").SortableEvent) => void;
@@ -102,10 +98,6 @@ declare const _default: import("vue").DefineComponent<{
     fieldItem: {
         type: PropType<FormConfigItem>;
     };
-    getRenderer: {
-        type: Func<any[], any>;
-        require: boolean;
-    };
     textFormatter: {
         type: PropType<FormConfigTextFormatter>;
         required: true;

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

@@ -0,0 +1,5 @@
+import FormConfigCreator from './FormConfigCreator.vue';
+import FormConfigEdit from './FormConfigEdit.vue';
+import FormConfigDragDisplay from './FormConfigDragDisplay.vue';
+export * from './renderer';
+export { FormConfigCreator, FormConfigEdit, FormConfigDragDisplay };

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

@@ -0,0 +1,6 @@
+export { default as FormConfigCreator } from './FormConfigCreator.js';
+export { default as FormConfigEdit } from './FormConfigEdit.js';
+export { default as FormConfigDragDisplay } from './FormConfigDragDisplay.js';
+export { default as CloseButton } from './renderer/CloseButton.js';
+export { default as ComplexNode } from './renderer/ComplexNode.js';
+export { default as DefaultNode } from './renderer/DefaultNode.js';

package/es/packages/form-config/src/components/{CloseButton.js → renderer/CloseButton.js}

@@ -2,8 +2,8 @@ import { defineComponent, inject, openBlock, createBlock, unref, withModifiers,
 import { CloseCircle } from '@vicons/ionicons5';
 import { isArray } from 'lodash-es';
 import { NButton, NIcon } from 'naive-ui';
-import { InjectionFieldList, InjectionMaterialList } from '../../../../packages/form-config/src/constants';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
+import { InjectionFieldList, InjectionMaterialList } from '../../../../../packages/form-config/src/constants';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CloseButton",

package/es/packages/form-config/src/components/{CloseButton.vue.d.ts → renderer/CloseButton.vue.d.ts}

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { FormConfigItem } from '../../../../../es/packages/form-config';
+import { FormConfigItem } from '../../../../../../es/packages/form-config';
 declare const _default: import("vue").DefineComponent<{
     fieldItem: {
         type: PropType<FormConfigItem>;

package/es/packages/form-config/src/components/{ComplexNode.js → renderer/ComplexNode.js}

@@ -1,16 +1,15 @@
-import { defineComponent, inject, computed, openBlock, createElementBlock, withModifiers, createElementVNode, mergeProps, unref, createTextVNode, toDisplayString, createVNode } from 'vue';
-import CloseButton from '../../../../packages/form-config/src/components/CloseButton';
-import FormConfigDragDisplay from '../../../../packages/form-config/src/components/FormConfigDragDisplay';
-import { InjectionActiveFieldItem } from '../../../../packages/form-config/src/constants';
-import { bindHover } from '../../../../packages/form-config/src/utils';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
+import { defineComponent, inject, computed, openBlock, createElementBlock, createElementVNode, mergeProps, unref, withModifiers, createTextVNode, toDisplayString, createVNode } from 'vue';
+import { CloseButton, FormConfigDragDisplay } from '../../../../../packages/form-config/src/components';
+import { InjectionActiveFieldItem } from '../../../../../packages/form-config/src/constants';
+import { bindHover } from '../../../../../packages/form-config/src/utils';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
 
-const _hoisted_1 = ["onClick"];
+const _hoisted_1 = { class: "form-config__renderer--complex form-config__renderer" };
+const _hoisted_2 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ComplexNode",
   props: {
     fieldItem: { type: Object, required: true },
-    getRenderer: { type: Function, require: true },
     textFormatter: { type: Function, required: true }
   },
   setup(__props) {
@@ -23,20 +22,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [{ "is-active": currentActiveEditField.value === props.fieldItem }, "form-config__renderer--complexHeader"];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", {
-        class: "form-config__renderer--complex form-config__renderer",
-        onClick: withModifiers(active, ["stop"])
-      }, [
-        createElementVNode("header", mergeProps(unref(bindHover)(__props.fieldItem), { class: unref(headerClassList) }), [
+      return openBlock(), createElementBlock("section", _hoisted_1, [
+        createElementVNode("header", mergeProps(unref(bindHover)(__props.fieldItem), {
+          class: unref(headerClassList),
+          onClick: withModifiers(active, ["stop"])
+        }), [
           createTextVNode(toDisplayString(props.fieldItem.name) + " ", 1),
-          createVNode(CloseButton, { "field-item": __props.fieldItem }, null, 8, ["field-item"])
-        ], 16),
-        createVNode(FormConfigDragDisplay, mergeProps(_ctx.$props, {
+          createVNode(unref(CloseButton), { "field-item": __props.fieldItem }, null, 8, ["field-item"])
+        ], 16, _hoisted_2),
+        createVNode(unref(FormConfigDragDisplay), mergeProps(_ctx.$props, {
           modelValue: __props.fieldItem.children,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.fieldItem.children = $event),
           class: "form-config__renderer--complex--grid"
         }), null, 16, ["modelValue"])
-      ], 8, _hoisted_1);
+      ]);
     };
   }
 });

package/es/packages/form-config/src/components/{ComplexNode.vue.d.ts → renderer/ComplexNode.vue.d.ts}

@@ -1,16 +1,11 @@
-import { Func } from '../../../../../es/src/types';
 import { PropType } from 'vue';
-import { FormConfigItem, FormConfigTextFormatter } from '../../../../../es/packages/form-config';
-import { bindHover } from '../../../../../es/packages/form-config/src/utils';
+import { FormConfigItem, FormConfigTextFormatter } from '../../../../../../es/packages/form-config';
+import { bindHover } from '../../../../../../es/packages/form-config/src/utils';
 declare const _default: import("vue").DefineComponent<{
     fieldItem: {
         type: PropType<FormConfigItem>;
         required: true;
     };
-    getRenderer: {
-        type: Func<any[], any>;
-        require: boolean;
-    };
     textFormatter: {
         type: PropType<FormConfigTextFormatter>;
         required: true;
@@ -21,10 +16,6 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<FormConfigItem>;
             required: true;
         };
-        getRenderer: {
-            type: Func<any[], any>;
-            require: boolean;
-        };
         textFormatter: {
             type: PropType<FormConfigTextFormatter>;
             required: true;
@@ -32,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     }>> & {
         [x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
-    currentActiveEditField: import("vue").Ref<import("../../../../../es/src/types").UndefinedAble<FormConfigItem>>;
+    currentActiveEditField: import("vue").Ref<import("../../../../../src/types").UndefinedAble<FormConfigItem>>;
     active: () => void;
     headerClassList: import("vue").ComputedRef<(string | {
         'is-active': boolean;
@@ -1537,10 +1528,6 @@ declare const _default: import("vue").DefineComponent<{
         fieldItem: {
             type: PropType<FormConfigItem>;
         };
-        getRenderer: {
-            type: Func<any[], any>;
-            require: boolean;
-        };
         textFormatter: {
             type: PropType<FormConfigTextFormatter>;
             required: true;
@@ -1549,7 +1536,8 @@ declare const _default: import("vue").DefineComponent<{
         getItemColumnStyle: (fieldItem?: FormConfigItem | undefined) => {
             '--item-column': number;
         };
-        commonConfig: {
+        getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+        getCommonConfig: () => {
             onMove: ({ to, from }: import("sortablejs").SortableEvent) => void;
             onChoose: ({ target, item }: import("sortablejs").SortableEvent) => void;
             onUnchoose: ({ from, to, target, item }: import("sortablejs").SortableEvent) => void;
@@ -1634,10 +1622,6 @@ declare const _default: import("vue").DefineComponent<{
         fieldItem: {
             type: PropType<FormConfigItem>;
         };
-        getRenderer: {
-            type: Func<any[], any>;
-            require: boolean;
-        };
         textFormatter: {
             type: PropType<FormConfigTextFormatter>;
             required: true;
@@ -1649,10 +1633,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<FormConfigItem>;
         required: true;
     };
-    getRenderer: {
-        type: Func<any[], any>;
-        require: boolean;
-    };
     textFormatter: {
         type: PropType<FormConfigTextFormatter>;
         required: true;

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

@@ -0,0 +1,59 @@
+import { defineComponent, inject, computed, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { NButton, NEllipsis } from 'naive-ui';
+import { CloseButton } from '../../../../../packages/form-config/src/components';
+import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../../packages/form-config/src/constants';
+import { bindHover } from '../../../../../packages/form-config/src/utils';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DefaultNode",
+  props: {
+    fieldItem: { type: Object, required: true },
+    textFormatter: { type: Function, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const currentActiveEditField = inject(InjectionActiveFieldItem);
+    function active() {
+      currentActiveEditField.value = props.fieldItem;
+    }
+    const classList = computed(() => {
+      return [{ "is-active": currentActiveEditField.value === props.fieldItem }, "form-config__renderer"];
+    });
+    const ellipsisClassList = computed(() => {
+      return ["form-config__renderer--default", { "is-required": props.fieldItem.required }];
+    });
+    const disabled = computed(() => {
+      return props.fieldItem.editable === false;
+    });
+    function getDisplayText() {
+      const type = WidgetTextMap.get(props.fieldItem.type);
+      return props.textFormatter(props.fieldItem, `${props.fieldItem.name}${type ? `(${type})` : ""}`);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NButton), mergeProps({
+        secondary: !unref(disabled),
+        dashed: unref(disabled)
+      }, unref(bindHover)(__props.fieldItem), {
+        onClick: withModifiers(active, ["stop"]),
+        class: unref(classList)
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(NEllipsis), {
+            class: normalizeClass(unref(ellipsisClassList))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(getDisplayText()), 1)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          createVNode(unref(CloseButton), { "field-item": __props.fieldItem }, null, 8, ["field-item"])
+        ]),
+        _: 1
+      }, 16, ["secondary", "dashed", "onClick", "class"]);
+    };
+  }
+});
+var DefaultNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "DefaultNode.vue"]]);
+
+export { DefaultNode as default };