yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: expose the formApi for a login form (#4806)

pull/48/MERGE
Vben 2024-11-04 22:46:16 +08:00 committed by GitHub
parent d31535cd98
commit 5999a862b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 589 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/@core/base/shared/package.json
View File

@ -81,10 +81,12 @@
"dependencies": { "dependencies": {
"@ctrl/tinycolor": "catalog:", "@ctrl/tinycolor": "catalog:",
"@tanstack/vue-store": "catalog:", "@tanstack/vue-store": "catalog:",
"@types/lodash.get": "catalog:",
"@vue/shared": "catalog:", "@vue/shared": "catalog:",
"clsx": "catalog:", "clsx": "catalog:",
"defu": "catalog:", "defu": "catalog:",
"lodash.clonedeep": "catalog:", "lodash.clonedeep": "catalog:",
"lodash.get": "catalog:",
"nprogress": "catalog:", "nprogress": "catalog:",
"tailwind-merge": "catalog:", "tailwind-merge": "catalog:",
"theme-colors": "catalog:" "theme-colors": "catalog:"

10
packages/effects/common-ui/src/ui/authentication/code-login.vue
View File

@ -53,7 +53,7 @@ const emit = defineEmits<{
const router = useRouter(); const router = useRouter();
const [Form, { validate, getValues }] = useVbenForm( const [Form, formApi] = useVbenForm(
reactive({ reactive({
commonConfig: { commonConfig: {
hideLabel: true, hideLabel: true,
@ -65,8 +65,8 @@ const [Form, { validate, getValues }] = useVbenForm(
); );
async function handleSubmit() { async function handleSubmit() {
const { valid } = await validate(); const { valid } = await formApi.validate();
const values = await getValues(); const values = await formApi.getValues();
if (valid) { if (valid) {
emit('submit', { emit('submit', {
code: values?.code, code: values?.code,
@ -78,6 +78,10 @@ async function handleSubmit() {
function goToLogin() { function goToLogin() {
router.push(props.loginPath); router.push(props.loginPath);
} }
defineExpose({
getFormApi: () => formApi,
});
</script> </script>
<template> <template>

10
packages/effects/common-ui/src/ui/authentication/forget-password.vue
View File

@ -50,7 +50,7 @@ const emit = defineEmits<{
submit: [Record<string, any>]; submit: [Record<string, any>];
}>(); }>();
const [Form, { validate, getValues }] = useVbenForm( const [Form, formApi] = useVbenForm(
reactive({ reactive({
commonConfig: { commonConfig: {
hideLabel: true, hideLabel: true,
@ -64,8 +64,8 @@ const [Form, { validate, getValues }] = useVbenForm(
const router = useRouter(); const router = useRouter();
async function handleSubmit() { async function handleSubmit() {
const { valid } = await validate(); const { valid } = await formApi.validate();
const values = await getValues(); const values = await formApi.getValues();
if (valid) { if (valid) {
emit('submit', values); emit('submit', values);
} }
@ -74,6 +74,10 @@ async function handleSubmit() {
function goToLogin() { function goToLogin() {
router.push(props.loginPath); router.push(props.loginPath);
} }
defineExpose({
getFormApi: () => formApi,
});
</script> </script>
<template> <template>

12
packages/effects/common-ui/src/ui/authentication/login.vue
View File

@ -44,7 +44,7 @@ const emit = defineEmits<{
submit: [Recordable<any>]; submit: [Recordable<any>];
}>(); }>();
const [Form, { setFieldValue, validate, getValues }] = useVbenForm( const [Form, formApi] = useVbenForm(
reactive({ reactive({
commonConfig: { commonConfig: {
hideLabel: true, hideLabel: true,
@ -63,8 +63,8 @@ const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
const rememberMe = ref(!!localUsername); const rememberMe = ref(!!localUsername);
async function handleSubmit() { async function handleSubmit() {
const { valid } = await validate(); const { valid } = await formApi.validate();
const values = await getValues(); const values = await formApi.getValues();
if (valid) { if (valid) {
localStorage.setItem( localStorage.setItem(
REMEMBER_ME_KEY, REMEMBER_ME_KEY,
@ -80,9 +80,13 @@ function handleGo(path: string) {
onMounted(() => { onMounted(() => {
if (localUsername) { if (localUsername) {
setFieldValue('username', localUsername); formApi.setFieldValue('username', localUsername);
} }
}); });
defineExpose({
getFormApi: () => formApi,
});
</script> </script>
<template> <template>

10
packages/effects/common-ui/src/ui/authentication/register.vue
View File

@ -52,7 +52,7 @@ const emit = defineEmits<{
submit: [Recordable<any>]; submit: [Recordable<any>];
}>(); }>();
const [Form, { validate, getValues }] = useVbenForm( const [Form, formApi] = useVbenForm(
reactive({ reactive({
commonConfig: { commonConfig: {
hideLabel: true, hideLabel: true,
@ -66,8 +66,8 @@ const [Form, { validate, getValues }] = useVbenForm(
const router = useRouter(); const router = useRouter();
async function handleSubmit() { async function handleSubmit() {
const { valid } = await validate(); const { valid } = await formApi.validate();
const values = await getValues(); const values = await formApi.getValues();
if (valid) { if (valid) {
emit('submit', values as { password: string; username: string }); emit('submit', values as { password: string; username: string });
} }
@ -76,6 +76,10 @@ async function handleSubmit() {
function goToLogin() { function goToLogin() {
router.push(props.loginPath); router.push(props.loginPath);
} }
defineExpose({
getFormApi: () => formApi,
});
</script> </script>
<template> <template>

23
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
View File

@ -41,6 +41,9 @@ const props = withDefaults(defineProps<Props>(), {});
const FORM_SLOT_PREFIX = 'form-'; const FORM_SLOT_PREFIX = 'form-';
const TOOLBAR_ACTIONS = 'toolbar-actions';
const TOOLBAR_TOOLS = 'toolbar-tools';
const gridRef = useTemplateRef<VxeGridInstance>('gridRef'); const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
const state = props.api?.useStore?.(); const state = props.api?.useStore?.();
@ -87,15 +90,16 @@ const showTableTitle = computed(() => {
const showToolbar = computed(() => { const showToolbar = computed(() => {
return ( return (
!!slots['toolbar-actions']?.() || !!slots[TOOLBAR_ACTIONS]?.() ||
!!slots['toolbar-tools']?.() || !!slots[TOOLBAR_TOOLS]?.() ||
showTableTitle.value showTableTitle.value
); );
}); });
const toolbarOptions = computed(() => { const toolbarOptions = computed(() => {
const slotActions = slots['toolbar-actions']?.(); const slotActions = slots[TOOLBAR_ACTIONS]?.();
const slotTools = slots['toolbar-tools']?.(); const slotTools = slots[TOOLBAR_TOOLS]?.();
if (!showToolbar.value) { if (!showToolbar.value) {
return {}; return {};
} }
@ -105,9 +109,9 @@ const toolbarOptions = computed(() => {
toolbarConfig: { toolbarConfig: {
slots: { slots: {
...(slotActions || showTableTitle.value ...(slotActions || showTableTitle.value
? { buttons: 'toolbar-actions' } ? { buttons: TOOLBAR_ACTIONS }
: {}), : {}),
...(slotTools ? { tools: 'toolbar-tools' } : {}), ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
}, },
}, },
}; };
@ -122,11 +126,6 @@ const options = computed(() => {
toolbarOptions.value, toolbarOptions.value,
toRaw(gridOptions.value), toRaw(gridOptions.value),
globalGridConfig, globalGridConfig,
{
// toolbarConfig: {
// tools: [],
// },
} as VxeTableGridProps,
), ),
); );
@ -185,7 +184,7 @@ const delegatedSlots = computed(() => {
const resultSlots: string[] = []; const resultSlots: string[] = [];
for (const key of Object.keys(slots)) { for (const key of Object.keys(slots)) {
if (!['empty', 'form', 'loading', 'toolbar-actions'].includes(key)) { if (!['empty', 'form', 'loading', TOOLBAR_ACTIONS].includes(key)) {
resultSlots.push(key); resultSlots.push(key);
} }
} }

817
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

26
pnpm-workspace.yaml
View File

@ -22,8 +22,8 @@ catalog:
'@commitlint/config-conventional': ^19.5.0 '@commitlint/config-conventional': ^19.5.0
'@ctrl/tinycolor': ^4.1.0 '@ctrl/tinycolor': ^4.1.0
'@eslint/js': ^9.14.0 '@eslint/js': ^9.14.0
'@faker-js/faker': ^9.1.0 '@faker-js/faker': ^9.2.0
'@iconify/json': ^2.2.266 '@iconify/json': ^2.2.267
'@iconify/tailwind': ^1.1.3 '@iconify/tailwind': ^1.1.3
'@iconify/vue': ^4.1.2 '@iconify/vue': ^4.1.2
'@intlify/core-base': ^10.0.4 '@intlify/core-base': ^10.0.4
@ -36,14 +36,15 @@ catalog:
'@stylistic/stylelint-plugin': ^3.1.1 '@stylistic/stylelint-plugin': ^3.1.1
'@tailwindcss/nesting': 0.0.0-insiders.565cd3e '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
'@tailwindcss/typography': ^0.5.15 '@tailwindcss/typography': ^0.5.15
'@tanstack/vue-query': ^5.59.16 '@tanstack/vue-query': ^5.59.17
'@tanstack/vue-store': ^0.5.6 '@tanstack/vue-store': ^0.5.6
'@types/archiver': ^6.0.3 '@types/archiver': ^6.0.3
'@types/eslint': ^9.6.1 '@types/eslint': ^9.6.1
'@types/html-minifier-terser': ^7.0.2 '@types/html-minifier-terser': ^7.0.2
'@types/jsonwebtoken': ^9.0.7 '@types/jsonwebtoken': ^9.0.7
'@types/lodash.clonedeep': ^4.5.9 '@types/lodash.clonedeep': ^4.5.9
'@types/node': ^22.8.6 '@types/lodash.get': ^4.4.9
'@types/node': ^22.8.7
'@types/nprogress': ^0.2.3 '@types/nprogress': ^0.2.3
'@types/postcss-import': ^14.0.3 '@types/postcss-import': ^14.0.3
'@types/qrcode': ^1.5.5 '@types/qrcode': ^1.5.5
@ -73,7 +74,7 @@ catalog:
commitlint-plugin-function-rules: ^4.0.0 commitlint-plugin-function-rules: ^4.0.0
consola: ^3.2.3 consola: ^3.2.3
cross-env: ^7.0.3 cross-env: ^7.0.3
cspell: ^8.15.5 cspell: ^8.15.7
cssnano: ^7.0.6 cssnano: ^7.0.6
cz-git: ^1.10.1 cz-git: ^1.10.1
czg: ^1.10.1 czg: ^1.10.1
@ -102,9 +103,9 @@ catalog:
execa: ^9.5.1 execa: ^9.5.1
find-up: ^7.0.0 find-up: ^7.0.0
get-port: ^7.1.0 get-port: ^7.1.0
globals: ^15.11.0 globals: ^15.12.0
h3: ^1.13.0 h3: ^1.13.0
happy-dom: ^15.8.0 happy-dom: ^15.8.3
html-minifier-terser: ^7.2.0 html-minifier-terser: ^7.2.0
husky: ^9.1.6 husky: ^9.1.6
is-ci: ^3.0.1 is-ci: ^3.0.1
@ -112,10 +113,11 @@ catalog:
jsonwebtoken: ^9.0.2 jsonwebtoken: ^9.0.2
lint-staged: ^15.2.10 lint-staged: ^15.2.10
lodash.clonedeep: ^4.5.0 lodash.clonedeep: ^4.5.0
lodash.get: ^4.4.2
lucide-vue-next: ^0.454.0 lucide-vue-next: ^0.454.0
medium-zoom: ^1.1.0 medium-zoom: ^1.1.0
naive-ui: ^2.40.1 naive-ui: ^2.40.1
nitropack: ^2.10.0 nitropack: ^2.10.2
nprogress: ^0.2.0 nprogress: ^0.2.0
ora: ^8.1.1 ora: ^8.1.1
pinia: 2.2.2 pinia: 2.2.2
@ -135,7 +137,7 @@ catalog:
radix-vue: ^1.9.8 radix-vue: ^1.9.8
resolve.exports: ^2.0.2 resolve.exports: ^2.0.2
rimraf: ^6.0.1 rimraf: ^6.0.1
rollup: ^4.24.3 rollup: ^4.24.4
rollup-plugin-visualizer: ^5.12.0 rollup-plugin-visualizer: ^5.12.0
sass: 1.79.5 sass: 1.79.5
sortablejs: ^1.15.3 sortablejs: ^1.15.3
@ -164,7 +166,7 @@ catalog:
vite-plugin-lazy-import: ^1.0.7 vite-plugin-lazy-import: ^1.0.7
vite-plugin-pwa: ^0.20.5 vite-plugin-pwa: ^0.20.5
vite-plugin-vue-devtools: ^7.6.2 vite-plugin-vue-devtools: ^7.6.2
vitepress: ^1.4.3 vitepress: ^1.4.5
vitepress-plugin-group-icons: ^1.3.0 vitepress-plugin-group-icons: ^1.3.0
vitest: ^2.1.4 vitest: ^2.1.4
vue: ^3.5.12 vue: ^3.5.12
@ -172,8 +174,8 @@ catalog:
vue-i18n: ^10.0.4 vue-i18n: ^10.0.4
vue-router: ^4.4.5 vue-router: ^4.4.5
vue-tsc: ^2.1.10 vue-tsc: ^2.1.10
vxe-pc-ui: ^4.2.37 vxe-pc-ui: ^4.2.40
vxe-table: ^4.7.97 vxe-table: ^4.8.0
watermark-js-plus: ^1.5.7 watermark-js-plus: ^1.5.7
zod: ^3.23.8 zod: ^3.23.8
zod-defaults: ^0.1.3 zod-defaults: ^0.1.3