feat: add VbenForm component (#4352)

* feat: add form component

* fix: build error

* feat: add form adapter

* feat: add some component

* feat: add some component

* feat: add example

* feat: suppoer custom action button

* chore: update

* feat: add example

* feat: add formModel,formDrawer demo

* fix: build error

* fix: typo

* fix: ci error

---------

Co-authored-by: jinmao <jinmao88@qq.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
This commit is contained in:
Vben
2024-09-10 21:48:51 +08:00
committed by GitHub
parent 86ed732ca8
commit 524b9badf2
271 changed files with 5974 additions and 1247 deletions

View File

@@ -4,9 +4,11 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
import {
CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
CSS_VARIABLE_LAYOUT_CONTENT_WIDTH,
} from '@vben-core/shared/constants';
import {
getElementVisibleRect,
type VisibleDomRect,
} from '@vben-core/shared';
} from '@vben-core/shared/utils';
import { useCssVar, useDebounceFn } from '@vueuse/core';

View File

@@ -1,4 +1,4 @@
import { DEFAULT_NAMESPACE } from '@vben-core/shared';
import { DEFAULT_NAMESPACE } from '@vben-core/shared/constants';
/**
* @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts

View File

@@ -1,10 +1,10 @@
import type { Ref } from 'vue';
import { computed, getCurrentInstance, useAttrs, useSlots } from 'vue';
import type { ComputedRef, Ref } from 'vue';
import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
import {
getFirstNonNullOrUndefined,
kebabToCamelCase,
} from '@vben-core/shared';
} from '@vben-core/shared/utils';
/**
* 依次从插槽、attrs、props、state 中获取值
@@ -45,3 +45,49 @@ export function usePriorityValue<
return value;
}
/**
* 批量获取state中的值每个值都是ref
* @param props
* @param state
*/
export function usePriorityValues<
T extends Record<string, any>,
S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
>(props: T, state: S | undefined) {
const result: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
(Object.keys(props) as (keyof T)[]).forEach((key) => {
result[key] = usePriorityValue(key as keyof typeof props, props, state);
});
return result;
}
/**
* 批量获取state中的值集中在一个computed用于透传
* @param props
* @param state
*/
export function useForwardPriorityValues<
T extends Record<string, any>,
S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
>(props: T, state: S | undefined) {
const computedResult: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
(Object.keys(props) as (keyof T)[]).forEach((key) => {
computedResult[key] = usePriorityValue(
key as keyof typeof props,
props,
state,
);
});
return computed(() => {
const unwrapResult: Record<string, any> = {};
Object.keys(props).forEach((key) => {
unwrapResult[key] = unref(computedResult[key]);
});
return unwrapResult as { [K in keyof T]: T[K] };
});
}

View File

@@ -3,11 +3,19 @@ export type Locale = 'en-US' | 'zh-CN';
export const messages: Record<Locale, Record<string, string>> = {
'en-US': {
cancel: 'Cancel',
collapse: 'Collapse',
confirm: 'Confirm',
expand: 'Expand',
reset: 'Reset',
submit: 'Submit',
},
'zh-CN': {
cancel: '取消',
collapse: '收起',
confirm: '确认',
expand: '展开',
reset: '重置',
submit: '提交',
},
};