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

.github/CODEOWNERS

@@ -1,14 +1,14 @@
 # default onwer
-* anncwb@126.com vince292007@gmail.com
+* anncwb@126.com vince292007@gmail.com netfan@foxmail.com
 
 # vben core onwer
-/.github/ anncwb@126.com vince292007@gmail.com
+/.github/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
-/.vscode/ anncwb@126.com vince292007@gmail.com
+/.vscode/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
-/packages/ anncwb@126.com vince292007@gmail.com
+/packages/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
-/packages/@core/ anncwb@126.com vince292007@gmail.com
+/packages/@core/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
-/internal/ anncwb@126.com vince292007@gmail.com
+/internal/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
-/scripts/ anncwb@126.com vince292007@gmail.com
+/scripts/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
 
 # vben team onwer
-apps/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
+apps/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5
-docs/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
+docs/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5

apps/web-antd/src/adapter/component/index.ts

@@ -108,7 +108,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'),

apps/web-ele/src/adapter/component/index.ts

@@ -4,6 +4,7 @@
  */
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
@@ -88,15 +89,67 @@ async function initComponentAdapter() {
       return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: ElDivider,
-    IconPicker,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        {
+          iconSlot: 'append',
+          modelValueProp: 'model-value',
+          inputComponent: ElInput,
+          ...props,
+          ...attrs,
+        },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(ElInput, 'input'),
     InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
     RadioGroup: ElRadioGroup,
     Select: withDefaultPlaceholder(ElSelect, 'select'),
     Space: ElSpace,
     Switch: ElSwitch,
-    TimePicker: ElTimePicker,
+    TimePicker: (props, { attrs, slots }) => {
-    DatePicker: ElDatePicker,
+      const { name, id, isRange } = props;
+      const extraProps: Recordable<any> = {};
+      if (isRange) {
+        if (name && !Array.isArray(name)) {
+          extraProps.name = [name, `${name}_end`];
+        }
+        if (id && !Array.isArray(id)) {
+          extraProps.id = [id, `${id}_end`];
+        }
+      }
+      return h(
+        ElTimePicker,
+        {
+          ...props,
+          ...attrs,
+          ...extraProps,
+        },
+        slots,
+      );
+    },
+    DatePicker: (props, { attrs, slots }) => {
+      const { name, id, type } = props;
+      const extraProps: Recordable<any> = {};
+      if (type && type.includes('range')) {
+        if (name && !Array.isArray(name)) {
+          extraProps.name = [name, `${name}_end`];
+        }
+        if (id && !Array.isArray(id)) {
+          extraProps.id = [id, `${id}_end`];
+        }
+      }
+      return h(
+        ElDatePicker,
+        {
+          ...props,
+          ...attrs,
+          ...extraProps,
+        },
+        slots,
+      );
+    },
     TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
     Upload: ElUpload,
   };

apps/web-naive/src/adapter/component/index.ts

@@ -89,7 +89,13 @@ async function initComponentAdapter() {
       return h(NButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: NDivider,
-    IconPicker,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(NInput, 'input'),
     InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
     RadioGroup: NRadioGroup,

docs/src/components/common-ui/vben-form.md

@@ -316,6 +316,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
+| submitOnChange | 字段值改变时提交表单 | `boolean` | false |
 
 ### TS 类型说明
 

docs/src/components/layout-ui/page.md

@@ -18,15 +18,14 @@ outline: deep
 
 ### Props
 
-| 属性名 | 描述 | 类型 | 默认值 |
+| 属性名 | 描述 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
-| title | 页面标题 | `string\|slot` | - |
+| title | 页面标题 | `string\|slot` | - | - |
-| description | 页面描述（标题下的内容） | `string\|slot` | - |
+| description | 页面描述（标题下的内容） | `string\|slot` | - | - |
-| contentClass | 内容区域的class | `string` | - |
+| contentClass | 内容区域的class | `string` | - | - |
-| headerClass | 头部区域的class | `string` | - |
+| headerClass | 头部区域的class | `string` | - | - |
-| footerClass | 底部区域的class | `string` | - |
+| footerClass | 底部区域的class | `string` | - | - |
-| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` |
+| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | - |
-| fixedHeader | 固定头部在页面内容区域顶部，在滚动时保持可见 | `boolean` | `false` |
 
 ::: tip 注意
 

docs/src/demos/vben-vxe-table/form/index.vue

@@ -76,6 +76,8 @@ const formOptions: VbenFormProps = {
   submitButtonOptions: {
     content: '查询',
   },
+  // 是否在字段值改变时提交表单
+  submitOnChange: false,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };

packages/@core/base/shared/src/utils/date.ts

@@ -16,3 +16,11 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
 export function formatDateTime(time: number | string) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
+
+export function isDate(value: any): value is Date {
+  return value instanceof Date;
+}
+
+export function isDayjsObject(value: any): value is dayjs.Dayjs {
+  return dayjs.isDayjs(value);
+}

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -14,6 +14,8 @@ import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
   createMerge,
+  isDate,
+  isDayjsObject,
   isFunction,
   isObject,
   mergeWithArrayOverride,
@@ -36,6 +38,7 @@ function getDefaultState(): VbenFormProps {
     showCollapseButton: false,
     showDefaultActions: true,
     submitButtonOptions: {},
+    submitOnChange: false,
     submitOnEnter: false,
     wrapperClass: 'grid-cols-1',
   };
@@ -251,10 +254,19 @@ export class FormApi {
       return;
     }
 
+    /**
+     * 合并算法有待改进，目前的算法不支持object类型的值。
+     * antd的日期时间相关组件的值类型为dayjs对象
+     * element-plus的日期时间相关组件的值类型可能为Date对象
+     * 以上两种类型需要排除深度合并
+     */
     const fieldMergeFn = createMerge((obj, key, value) => {
       if (key in obj) {
         obj[key] =
-          !Array.isArray(obj[key]) && isObject(obj[key])
+          !Array.isArray(obj[key]) &&
+          isObject(obj[key]) &&
+          !isDayjsObject(obj[key]) &&
+          !isDate(obj[key])
             ? fieldMergeFn(obj[key], value)
             : value;
       }

packages/@core/ui-kit/form-ui/src/types.ts

@@ -342,6 +342,12 @@ export interface VbenFormProps<
    */
   submitButtonOptions?: ActionButtonOptions;
 
+  /**
+   * 是否在字段值改变时提交表单
+   * @default false
+   */
+  submitOnChange?: boolean;
+
   /**
    * 是否在回车时提交表单
    * @default false

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

@@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
-import { useTemplateRef } from 'vue';
+import { toRaw, useTemplateRef, watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
 
 import FormActions from './components/form-actions.vue';
 import {
@@ -56,6 +58,17 @@ function handleKeyDownEnter(event: KeyboardEvent) {
 
   formActionsRef.value?.handleSubmit?.();
 }
+
+watch(
+  () => form.values,
+  useDebounceFn(() => {
+    (props.handleValuesChange ?? state.value.handleValuesChange)?.(
+      toRaw(form.values),
+    );
+    state.value.submitOnChange && props.formApi?.submitForm();
+  }, 300),
+  { deep: true },
+);
 </script>
 
 <template>

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -172,7 +172,7 @@ function handleFocusOutside(e: Event) {
       ref="contentRef"
       :class="
         cn(
-          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-2xl',
+          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
           modalClass,
           {
             'border-border border': bordered,

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue

@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
   <div
     :class="
-      cn(
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
     "
   >
     <slot></slot>

packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue

@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
   <div
     :class="
-      cn(
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
     "
   >
     <slot></slot>

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
 import { EmptyIcon, Grip, listIcons } from '@vben/icons';
 import { $t } from '@vben/locales';
 import {
   Button,
-  Input,
   Pagination,
   PaginationEllipsis,
   PaginationFirst,
@@ -29,12 +28,24 @@ interface Props {
    * 图标列表
    */
   icons?: string[];
+  /** Input组件 */
+  inputComponent?: VNode;
+  /** 图标插槽名，预览图标将被渲染到此插槽中 */
+  iconSlot?: string;
+  /** input组件的值属性名称 */
+  modelValueProp?: string;
+  /** 图标样式 */
+  iconClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   prefix: 'ant-design',
   pageSize: 36,
   icons: () => [],
+  inputComponent: () => h('div'),
+  iconSlot: 'default',
+  iconClass: 'size-4',
+  modelValueProp: 'value',
 });
 
 const emit = defineEmits<{
@@ -110,6 +121,19 @@ function close() {
   visible.value = false;
 }
 
+function onKeywordChange(v: string) {
+  keyword.value = v;
+}
+
+const searchInputProps = computed(() => {
+  return {
+    placeholder: $t('ui.iconPicker.search'),
+    [props.modelValueProp]: keyword.value,
+    [`onUpdate:${props.modelValueProp}`]: onKeywordChange,
+    class: 'mx-2',
+  };
+});
+
 defineExpose({ toggleOpenState, open, close });
 </script>
 <template>
@@ -119,24 +143,18 @@ defineExpose({ toggleOpenState, open, close });
     content-class="p-0 pt-3"
   >
     <template #trigger>
-      <slot :close="close" :icon="currentSelect" :open="open" name="trigger">
+      <component
-        <div class="flex items-center gap-2">
+        :is="inputComponent"
-          <Input
+        :[modelValueProp]="currentSelect"
-            :value="currentSelect"
+        :placeholder="$t('ui.iconPicker.placeholder')"
-            class="flex-1 cursor-pointer"
+      >
-            v-bind="$attrs"
+        <template #[iconSlot]>
-            :placeholder="$t('ui.iconPicker.placeholder')"
+          <VbenIcon :icon="currentSelect || Grip" class="size-4" />
-          />
+        </template>
-          <VbenIcon :icon="currentSelect || Grip" class="size-8" />
+      </component>
-        </div>
-      </slot>
     </template>
     <div class="mb-2 flex w-full">
-      <Input
+      <component :is="inputComponent" v-bind="searchInputProps" />
-        v-model="keyword"
-        :placeholder="$t('ui.iconPicker.search')"
-        class="mx-2"
-      />
     </div>
 
     <template v-if="paginationList.length > 0">

packages/effects/common-ui/src/components/page/page.vue

@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import {
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  type StyleValue,
-  useTemplateRef,
-} from 'vue';
 
-import { preferences } from '@vben-core/preferences';
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
 import { cn } from '@vben-core/shared/utils';
 
 interface Props {
@@ -19,8 +12,6 @@ interface Props {
    * 根据content可见高度自适应
    */
   autoContentHeight?: boolean;
-  /** 头部固定 */
-  fixedHeader?: boolean;
   headerClass?: string;
   footerClass?: string;
 }
@@ -29,13 +20,7 @@ defineOptions({
   name: 'Page',
 });
 
-const {
+const { autoContentHeight = false } = defineProps<Props>();
-  contentClass = '',
-  description = '',
-  autoContentHeight = false,
-  title = '',
-  fixedHeader = false,
-} = defineProps<Props>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -44,22 +29,11 @@ const shouldAutoHeight = ref(false);
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 
-const headerStyle = computed<StyleValue>(() => {
-  return fixedHeader
-    ? {
-        position: 'sticky',
-        zIndex: 200,
-        top:
-          preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0,
-      }
-    : undefined;
-});
-
 const contentStyle = computed(() => {
   if (autoContentHeight) {
     return {
       height: shouldAutoHeight.value
-        ? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
+        ? `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`
         : '0',
       // 'overflow-y': shouldAutoHeight.value?'auto':'unset',
     };
@@ -97,28 +71,26 @@ onMounted(() => {
       ref="headerRef"
       :class="
         cn(
-          'bg-card relative px-6 py-4',
+          'bg-card border-border relative flex items-end border-b px-6 py-4',
           headerClass,
-          fixedHeader
-            ? 'border-border border-b transition-all duration-200'
-            : '',
         )
       "
-      :style="headerStyle"
     >
-      <slot name="title">
+      <div class="flex-auto">
-        <div v-if="title" class="mb-2 flex text-lg font-semibold">
+        <slot name="title">
-          {{ title }}
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
-        </div>
+            {{ title }}
-      </slot>
+          </div>
+        </slot>
 
-      <slot name="description">
+        <slot name="description">
-        <p v-if="description" class="text-muted-foreground">
+          <p v-if="description" class="text-muted-foreground">
-          {{ description }}
+            {{ description }}
-        </p>
+          </p>
-      </slot>
+        </slot>
+      </div>
 
-      <div v-if="$slots.extra" class="absolute bottom-4 right-4">
+      <div v-if="$slots.extra">
         <slot name="extra"></slot>
       </div>
     </div>
@@ -132,8 +104,8 @@ onMounted(() => {
       ref="footerRef"
       :class="
         cn(
-          footerClass,
           'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+          footerClass,
         )
       "
     >

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>
+        <span>使用Input:</span>
-        <IconPicker class="w-[200px]">
+        <IconPicker :input-component="inputComponent" icon-slot="addonAfter" />
-          <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>
       </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]">
+            <IconPicker v-model="iconValue" class="w-[200px]" />
-              <template #trigger="{ icon }">
-                <IconifyIcon
-                  :icon="icon || 'ant-design:appstore-filled'"
-                  class="text-2xl"
-                />
-              </template>
-            </IconPicker>
           </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,
 };