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

playground/src/adapter/component/index.ts

@@ -103,7 +103,13 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),

playground/src/views/demos/features/icons/index.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { IconPicker, Page } from '@vben/common-ui';
 import {
-  IconifyIcon,
   MdiGithub,
   MdiGoogle,
   MdiKeyboardEsc,
@@ -22,6 +21,8 @@ import {
 import { Card, Input } from 'ant-design-vue';
 
 const iconValue = ref('ant-design:trademark-outlined');
+
+const inputComponent = h(Input);
 </script>
 
 <template>
@@ -84,23 +85,8 @@ const iconValue = ref('ant-design:trademark-outlined');
         <IconPicker class="w-[200px]" prefix="svg" />
       </div>
       <div class="mb-5 flex items-center gap-5">
-        <span>完整替换触发组件:</span>
-        <IconPicker class="w-[200px]">
-          <template #trigger="{ icon }">
-            <Input
-              :value="icon"
-              placeholder="点击这里选择图标"
-              style="width: 300px"
-            >
-              <template #addonAfter>
-                <IconifyIcon
-                  :icon="icon || 'ant-design:appstore-filled'"
-                  class="text-2xl"
-                />
-              </template>
-            </Input>
-          </template>
-        </IconPicker>
+        <span>使用Input:</span>
+        <IconPicker :input-component="inputComponent" icon-slot="addonAfter" />
       </div>
       <div class="flex items-center gap-5">
         <span>可手动输入，只能点击图标打开弹窗:</span>
@@ -111,14 +97,7 @@ const iconValue = ref('ant-design:trademark-outlined');
           style="width: 300px"
         >
           <template #addonAfter>
-            <IconPicker v-model="iconValue" class="w-[200px]">
-              <template #trigger="{ icon }">
-                <IconifyIcon
-                  :icon="icon || 'ant-design:appstore-filled'"
-                  class="text-2xl"
-                />
-              </template>
-            </IconPicker>
+            <IconPicker v-model="iconValue" class="w-[200px]" />
           </template>
         </Input>
       </div>

playground/src/views/examples/form/basic.vue

@@ -362,7 +362,6 @@ function handleSetFormValue() {
   <Page
     content-class="flex flex-col gap-4"
     description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
-    fixed-header
     header-class="pb-0"
     title="表单组件"
   >

playground/src/views/examples/modal/index.vue

@@ -77,7 +77,6 @@ function openFormModal() {
 <template>
   <Page
     description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
-    fixed-header
     title="弹窗组件示例"
   >
     <template #extra>

playground/src/views/examples/vxe-table/form.vue

@@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };