refactor: change the form button field from text to content to preven…

…t conflicts with the frame (#4586) * refactor: change the form button field from text to content to prevent conflicts with the frame
vbenjs · Oct 7, 2024 · 2d019b3 · 2d019b3
1 parent ab44926
commit 2d019b3
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 17 deletions.
diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts
@@ -62,15 +62,11 @@ setupVbenForm<FormComponentType>({
     DatePicker: NDatePicker,
     // 自定义默认的重置按钮
     DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
+      return h(NButton, { ...props, attrs, type: 'info' }, slots);
     },
     // 自定义默认的提交按钮
     DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(
-        NButton,
-        { ...props, attrs, text: false, type: 'primary' },
-        slots,
-      );
+      return h(NButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: NDivider,
     Input: withDefaultPlaceholder(NInput, 'input'),

diff --git a/docs/src/demos/vben-form/query/index.vue b/docs/src/demos/vben-form/query/index.vue
@@ -78,7 +78,7 @@ const [QueryForm] = useVbenForm({
   // 是否可展开
   showCollapseButton: true,
   submitButtonOptions: {
-    text: '查询',
+    content: '查询',
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2',
 });

diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -16,16 +16,16 @@ const collapsed = defineModel({ default: false });
 
 const resetButtonOptions = computed(() => {
   return {
+    content: `${$t.value('reset')}`,
     show: true,
-    text: `${$t.value('reset')}`,
     ...unref(rootProps).resetButtonOptions,
   };
 });
 
 const submitButtonOptions = computed(() => {
   return {
+    content: `${$t.value('submit')}`,
     show: true,
-    text: `${$t.value('submit')}`,
     ...unref(rootProps).submitButtonOptions,
   };
 });
@@ -91,7 +91,7 @@ watch(
       @click="handleReset"
       v-bind="resetButtonOptions"
     >
-      {{ resetButtonOptions.text }}
+      {{ resetButtonOptions.content }}
     </component>
 
     <component
@@ -101,7 +101,7 @@ watch(
       @click="handleSubmit"
       v-bind="submitButtonOptions"
     >
-      {{ submitButtonOptions.text }}
+      {{ submitButtonOptions.content }}
     </component>
 
     <VbenExpandableArrow

diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -289,8 +289,8 @@ export interface FormRenderProps<
 }
 
 export interface ActionButtonOptions extends VbenButtonProps {
+  content?: string;
   show?: boolean;
-  text?: string;
 }
 
 export interface VbenFormProps<

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -154,7 +154,7 @@ const vbenFormOptions = computed(() => {
     },
     showCollapseButton: true,
     submitButtonOptions: {
-      text: $t('common.query'),
+      content: $t('common.query'),
     },
     wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   };

diff --git a/playground/src/views/examples/form/merge.vue b/playground/src/views/examples/form/merge.vue
@@ -46,7 +46,7 @@ const [FirstForm, firstFormApi] = useVbenForm({
     },
   ],
   submitButtonOptions: {
-    text: '下一步',
+    content: '下一步',
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
 });
@@ -60,7 +60,7 @@ const [SecondForm, secondFormApi] = useVbenForm({
   handleSubmit: onSecondSubmit,
   layout: 'horizontal',
   resetButtonOptions: {
-    text: '上一步',
+    content: '上一步',
   },
   schema: [
     {

diff --git a/playground/src/views/examples/form/query.vue b/playground/src/views/examples/form/query.vue
@@ -80,7 +80,7 @@ const [QueryForm] = useVbenForm({
   // 是否可展开
   showCollapseButton: true,
   submitButtonOptions: {
-    text: '查询',
+    content: '查询',
   },
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
@@ -119,7 +119,7 @@ const [QueryForm1] = useVbenForm({
   // 是否可展开
   showCollapseButton: true,
   submitButtonOptions: {
-    text: '查询',
+    content: '查询',
   },
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',