From d42daf9ce014b6ca8474957abaa566f0d5ef400c Mon Sep 17 00:00:00 2001 From: Netfan Date: Sat, 7 Dec 2024 11:00:53 +0800 Subject: [PATCH 01/21] fix: modal radius not follow preferences (#5063) --- packages/@core/ui-kit/popup-ui/src/modal/modal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index e701f565d..80a657fa7 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/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, From 03f166f8a4c38ff9cce7d8cdf89fa43e01db8b7e Mon Sep 17 00:00:00 2001 From: Netfan Date: Sat, 7 Dec 2024 11:02:14 +0800 Subject: [PATCH 02/21] fix: `form` prop `handleValuesChange` no effect (#5060) --- packages/@core/ui-kit/form-ui/src/vben-use-form.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index 107bb4bf3..a13953284 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue @@ -6,7 +6,7 @@ import type { ExtendedFormApi, VbenFormProps } from './types'; import { useForwardPriorityValues } from '@vben-core/composables'; // import { isFunction } from '@vben-core/shared/utils'; -import { useTemplateRef, watch } from 'vue'; +import { toRaw, useTemplateRef, watch } from 'vue'; import { useDebounceFn } from '@vueuse/core'; @@ -62,6 +62,9 @@ function handleKeyDownEnter(event: KeyboardEvent) { watch( () => form.values, useDebounceFn(() => { + (props.handleValuesChange ?? state.value.handleValuesChange)?.( + toRaw(form.values), + ); state.value.submitOnChange && props.formApi?.submitForm(); }, 300), { deep: true }, From 4c1fc4a11eee5d6c6f7c6f85286203c9eae6a260 Mon Sep 17 00:00:00 2001 From: Netfan Date: Sat, 7 Dec 2024 11:02:59 +0800 Subject: [PATCH 03/21] fix: validate message not display, fix #5034 (#5038) --- .../@core/ui-kit/form-ui/src/form-render/form-field.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index ba14d8948..e9ee8f876 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -298,11 +298,7 @@ function autofocus() { > {{ label }} -
+
-import { - computed, - nextTick, - onMounted, - ref, - type StyleValue, - useTemplateRef, -} from 'vue'; +import { computed, nextTick, onMounted, ref, 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 { - contentClass = '', - description = '', - autoContentHeight = false, - title = '', - fixedHeader = false, -} = defineProps(); +const { autoContentHeight = false } = defineProps(); const headerHeight = ref(0); const footerHeight = ref(0); @@ -44,22 +29,11 @@ const shouldAutoHeight = ref(false); const headerRef = useTemplateRef('headerRef'); const footerRef = useTemplateRef('footerRef'); -const headerStyle = computed(() => { - 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" > - -
- {{ title }} -
- +
+ +
+ {{ title }} +
+ - -

- {{ description }} -

- + +

+ {{ description }} +

+ +
-
+
@@ -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, ) " > diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 09a8c74d7..c995fe263 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -362,7 +362,6 @@ function handleSetFormValue() { diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue index 22e9ed8c8..d6db2fba2 100644 --- a/playground/src/views/examples/modal/index.vue +++ b/playground/src/views/examples/modal/index.vue @@ -77,7 +77,6 @@ function openFormModal() {