Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

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,
   };
 });
@@ -78,7 +78,9 @@ watch(
 </script>
 <template>
   <div
-    :class="cn('col-span-full w-full text-right', rootProps.actionWrapperClass)"
+    :class="
+      cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
+    "
     :style="queryFormStyle"
   >
     <component
@@ -89,7 +91,7 @@ watch(
       @click="handleReset"
       v-bind="resetButtonOptions"
     >
-      {{ resetButtonOptions.text }}
+      {{ resetButtonOptions.content }}
     </component>
 
     <component
@@ -99,7 +101,7 @@ watch(
       @click="handleSubmit"
       v-bind="submitButtonOptions"
     >
-      {{ submitButtonOptions.text }}
+      {{ submitButtonOptions.content }}
     </component>
 
     <VbenExpandableArrow

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<

packages/@core/ui-kit/form-ui/src/use-vben-form.ts

@@ -26,6 +26,7 @@ export function useVbenForm<
       onBeforeUnmount(() => {
         api.unmount();
       });
+      api.setState({ ...props, ...attrs });
       return () =>
         h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
     },

packages/@core/ui-kit/form-ui/src/vben-use-form.vue

@@ -34,23 +34,12 @@ props.formApi?.mount?.(form);
 const handleUpdateCollapsed = (value: boolean) => {
   props.formApi?.setState({ collapsed: !!value });
 };
-// if (isFunction(forward.value.handleValuesChange)) {
-//   watch(
-//     () => form.values,
-//     (val) => {
-//       forward.value.handleValuesChange?.(toRaw(val));
-//     },
-//     {
-//       deep: true,
-//       immediate: true,
-//     },
-//   );
-// }
 </script>
 
 <template>
   <Form
     v-bind="forward"
+    :collapsed="state.collapsed"
     :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
     :component-map="COMPONENT_MAP"
     :form="form"