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

packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts

@@ -109,7 +109,7 @@ describe('formApi', () => {
   });
 
   it('should unmount form and reset state', () => {
-    formApi.unmounted();
+    formApi.unmount();
     expect(formApi.isMounted).toBe(false);
   });
 

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, toRaw, unref } from 'vue';
+import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
-import { cn, isFunction } from '@vben-core/shared/utils';
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
@@ -65,6 +65,16 @@ async function handleReset(e: Event) {
     form.resetForm();
   }
 }
+
+watch(
+  () => collapsed.value,
+  () => {
+    const props = unref(rootProps);
+    if (props.collapseTriggerResize) {
+      triggerWindowResize();
+    }
+  },
+);
 </script>
 <template>
   <div

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

@@ -24,9 +24,11 @@ function getDefaultState(): VbenFormProps {
     actionWrapperClass: '',
     collapsed: false,
     collapsedRows: 1,
+    collapseTriggerResize: false,
     commonConfig: {},
     handleReset: undefined,
     handleSubmit: undefined,
+    handleValuesChange: undefined,
     layout: 'horizontal',
     resetButtonOptions: {},
     schema: [],
@@ -249,7 +251,7 @@ export class FormApi {
     return rawValues;
   }
 
-  unmounted() {
+  unmount() {
     // this.state = null;
     this.isMounted = false;
     this.stateHandler.reset();

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

@@ -244,6 +244,11 @@ export interface FormRenderProps<
    * @default 1
    */
   collapsedRows?: number;
+  /**
+   * 是否触发resize事件
+   * @default false
+   */
+  collapseTriggerResize?: boolean;
   /**
    * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
    */
@@ -302,6 +307,10 @@ export interface VbenFormProps<
    * 表单提交回调
    */
   handleSubmit?: HandleSubmitFn;
+  /**
+   * 表单值变化回调
+   */
+  handleValuesChange?: (values: Record<string, any>) => void;
   /**
    * 重置按钮参数
    */

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

@@ -24,7 +24,7 @@ export function useVbenForm<
   const Form = defineComponent(
     (props: VbenFormProps, { attrs, slots }) => {
       onBeforeUnmount(() => {
-        api.unmounted();
+        api.unmount();
       });
       return () =>
         h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
+// import { toRaw, watch } from 'vue';
+
 import { useForwardPriorityValues } from '@vben-core/composables';
+// import { isFunction } from '@vben-core/shared/utils';
 
 import FormActions from './components/form-actions.vue';
 import {
@@ -31,6 +34,18 @@ 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>

packages/@core/ui-kit/layout-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/layout-ui/src/components/layout-content.vue

@@ -4,7 +4,7 @@ import type { ContentCompactType } from '@vben-core/typings';
 import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 
-import { useContentStyle } from '@vben-core/composables';
+import { useLayoutContentStyle } from '@vben-core/composables';
 import { Slot } from '@vben-core/shadcn-ui';
 
 interface Props {
@@ -25,7 +25,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {});
 
-const { contentElement, overlayStyle } = useContentStyle();
+const { contentElement, overlayStyle } = useLayoutContentStyle();
 
 const style = computed((): CSSProperties => {
   const {

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -4,7 +4,11 @@ import type { VbenLayoutProps } from './vben-layout';
 import type { CSSProperties } from 'vue';
 import { computed, ref, watch } from 'vue';
 
-import { SCROLL_FIXED_CLASS } from '@vben-core/composables';
+import {
+  SCROLL_FIXED_CLASS,
+  useLayoutFooterStyle,
+  useLayoutHeaderStyle,
+} from '@vben-core/composables';
 import { Menu } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
@@ -74,6 +78,9 @@ const {
   y: scrollY,
 } = useScroll(document);
 
+const { setLayoutHeaderHeight } = useLayoutHeaderStyle();
+const { setLayoutFooterHeight } = useLayoutFooterStyle();
+
 const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 
 const {
@@ -356,6 +363,26 @@ watch(
   },
 );
 
+watch(
+  [() => headerWrapperHeight.value, () => isFullContent.value],
+  ([height]) => {
+    setLayoutHeaderHeight(isFullContent.value ? 0 : height);
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  () => props.footerHeight,
+  (height: number) => {
+    setLayoutFooterHeight(height);
+  },
+  {
+    immediate: true,
+  },
+);
+
 {
   const mouseMove = () => {
     mouseY.value > headerWrapperHeight.value

packages/@core/ui-kit/menu-ui/build.config.ts

@@ -15,13 +15,6 @@ export default defineBuildConfig({
       loaders: ['vue'],
       pattern: ['**/*.vue'],
     },
-    // {
-    //   builder: 'mkdist',
-    //   format: 'cjs',
-    //   input: './src',
-    //   loaders: ['js'],
-    //   pattern: ['**/*.ts'],
-    // },
     {
       builder: 'mkdist',
       format: 'esm',

packages/@core/ui-kit/menu-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/shadcn-ui/build.config.ts

@@ -16,13 +16,6 @@ export default defineBuildConfig({
       loaders: ['vue'],
       pattern: ['**/*.vue'],
     },
-    // {
-    //   builder: 'mkdist',
-    //   format: 'cjs',
-    //   input: './src',
-    //   loaders: ['js'],
-    //   pattern: ['**/*.ts'],
-    // },
     {
       builder: 'mkdist',
       format: 'esm',

packages/@core/ui-kit/shadcn-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",

packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
@@ -32,10 +32,13 @@ const {
   showRowsPerPage = true,
   showTotalText = true,
   siblingCount = 1,
-  size = 'default',
+  size = 'small',
   total = 500,
 } = defineProps<Props>();
 
+const emit = defineEmits<{
+  pageChange: [currentPage: number, pageSize: number];
+}>();
 const currentPage = defineModel<number>('currentPage', { default: 1 });
 const itemPerPage = defineModel<number>('itemPerPage', { default: 20 });
 
@@ -53,6 +56,13 @@ const options = computed(() => {
 function handleUpdateModelValue(value: string) {
   itemPerPage.value = Number(value);
 }
+
+watch(
+  [() => itemPerPage.value, () => currentPage.value],
+  ([itemPerPage, currentPage]) => {
+    emit('pageChange', currentPage, itemPerPage);
+  },
+);
 </script>
 
 <template>

packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue

@@ -69,7 +69,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'z-100 dark:bg-overlay pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center bg-[hsl(var(--overlay-light))] transition-all duration-500',
+        'z-100 dark:bg-overlay bg-overlay-content pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },

packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue

@@ -63,7 +63,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'flex-center z-100 dark:bg-overlay absolute left-0 top-0 size-full bg-[hsl(var(--overlay-light))] backdrop-blur-sm transition-all duration-500',
+        'flex-center z-100 bg-overlay-content absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },

packages/@core/ui-kit/tabs-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {