Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
commit
7e7e23fc09
@ -311,6 +311,7 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单
|
||||
| collapsedRows | 折叠时保持的行数 | `number` | `1` |
|
||||
| commonConfig | 表单项的通用配置,每个配置都会传递到每个表单项,表单项可覆盖 | `FormCommonConfig` | - |
|
||||
| schema | 表单项的每一项配置 | `FormSchema` | - |
|
||||
| submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
|
||||
|
||||
### TS 类型说明
|
||||
|
||||
|
@ -16,7 +16,7 @@ function defineConfig(
|
||||
let projectType = type;
|
||||
|
||||
// 根据包是否存在 index.html,自动判断类型
|
||||
if (type === 'auto') {
|
||||
if (projectType === 'auto') {
|
||||
const htmlPath = join(process.cwd(), 'index.html');
|
||||
projectType = existsSync(htmlPath) ? 'application' : 'library';
|
||||
}
|
||||
|
@ -75,6 +75,11 @@ watch(
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
handleReset,
|
||||
handleSubmit,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
|
@ -35,6 +35,7 @@ function getDefaultState(): VbenFormProps {
|
||||
showCollapseButton: false,
|
||||
showDefaultActions: true,
|
||||
submitButtonOptions: {},
|
||||
submitOnEnter: false,
|
||||
wrapperClass: 'grid-cols-1',
|
||||
};
|
||||
}
|
||||
|
@ -278,7 +278,7 @@ function autofocus() {
|
||||
cn(
|
||||
'flex leading-6',
|
||||
{
|
||||
'mr-2 flex-shrink-0': !isVertical,
|
||||
'mr-2 flex-shrink-0 justify-end': !isVertical,
|
||||
'flex-row': isVertical,
|
||||
},
|
||||
!isVertical && labelClass,
|
||||
|
@ -1,20 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui';
|
||||
import { cn } from '@vben-core/shared/utils';
|
||||
|
||||
interface Props {
|
||||
class?: string;
|
||||
help?: string;
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormLabel class="flex flex-row-reverse items-center">
|
||||
<FormLabel :class="cn('mb-1 flex items-center', props.class)">
|
||||
<span v-if="required" class="text-destructive mr-[2px]">*</span>
|
||||
<slot></slot>
|
||||
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
|
||||
{{ help }}
|
||||
</VbenHelpTooltip>
|
||||
<slot></slot>
|
||||
<span v-if="required" class="text-destructive mr-[2px]">*</span>
|
||||
</FormLabel>
|
||||
</template>
|
||||
|
@ -321,7 +321,6 @@ export interface VbenFormProps<
|
||||
* 重置按钮参数
|
||||
*/
|
||||
resetButtonOptions?: ActionButtonOptions;
|
||||
|
||||
/**
|
||||
* 是否显示默认操作按钮
|
||||
* @default true
|
||||
@ -332,6 +331,12 @@ export interface VbenFormProps<
|
||||
* 提交按钮参数
|
||||
*/
|
||||
submitButtonOptions?: ActionButtonOptions;
|
||||
|
||||
/**
|
||||
* 是否在回车时提交表单
|
||||
* @default false
|
||||
*/
|
||||
submitOnEnter?: boolean;
|
||||
}
|
||||
|
||||
export type ExtendedFormApi = {
|
||||
|
@ -6,6 +6,8 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
|
||||
import { useForwardPriorityValues } from '@vben-core/composables';
|
||||
// import { isFunction } from '@vben-core/shared/utils';
|
||||
|
||||
import { useTemplateRef } from 'vue';
|
||||
|
||||
import FormActions from './components/form-actions.vue';
|
||||
import {
|
||||
COMPONENT_BIND_EVENT_MAP,
|
||||
@ -21,6 +23,8 @@ interface Props extends VbenFormProps {
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const formActionsRef = useTemplateRef<typeof FormActions>('formActionsRef');
|
||||
|
||||
const state = props.formApi?.useStore?.();
|
||||
|
||||
const forward = useForwardPriorityValues(props, state);
|
||||
@ -34,10 +38,18 @@ props.formApi?.mount?.(form);
|
||||
const handleUpdateCollapsed = (value: boolean) => {
|
||||
props.formApi?.setState({ collapsed: !!value });
|
||||
};
|
||||
|
||||
function handleKeyDownEnter() {
|
||||
if (!state.value.submitOnEnter || !formActionsRef.value) {
|
||||
return;
|
||||
}
|
||||
formActionsRef.value?.handleSubmit?.();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
@keydown.enter.prevent="handleKeyDownEnter"
|
||||
v-bind="forward"
|
||||
:collapsed="state.collapsed"
|
||||
:component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
|
||||
@ -56,6 +68,7 @@ const handleUpdateCollapsed = (value: boolean) => {
|
||||
<slot v-bind="slotProps">
|
||||
<FormActions
|
||||
v-if="forward.showDefaultActions"
|
||||
ref="formActionsRef"
|
||||
:model-value="state.collapsed"
|
||||
@update:model-value="handleUpdateCollapsed"
|
||||
>
|
||||
|
@ -69,7 +69,13 @@ const tabsView = computed((): TabConfig[] => {
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
ref="tabRef"
|
||||
:class="[{ 'is-active': tab.key === active, draggable: !tab.affixTab }]"
|
||||
:class="[
|
||||
{
|
||||
'is-active': tab.key === active,
|
||||
draggable: !tab.affixTab,
|
||||
'affix-tab': tab.affixTab,
|
||||
},
|
||||
]"
|
||||
:data-active-tab="active"
|
||||
:data-index="i"
|
||||
class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
|
||||
|
@ -76,6 +76,7 @@ const tabsView = computed((): TabConfig[] => {
|
||||
{
|
||||
'is-active dark:bg-accent bg-primary/15': tab.key === active,
|
||||
draggable: !tab.affixTab,
|
||||
'affix-tab': tab.affixTab,
|
||||
},
|
||||
typeWithClass.content,
|
||||
]"
|
||||
|
@ -81,7 +81,14 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
|
||||
},
|
||||
onMove(evt) {
|
||||
const parent = findParentElement(evt.related);
|
||||
return parent?.classList.contains('draggable') && props.draggable;
|
||||
if (parent?.classList.contains('draggable') && props.draggable) {
|
||||
const isCurrentAffix = evt.dragged.classList.contains('affix-tab');
|
||||
const isRelatedAffix = evt.related.classList.contains('affix-tab');
|
||||
// 不允许在固定的tab和非固定的tab之间互相拖拽
|
||||
return isCurrentAffix === isRelatedAffix;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onStart: () => {
|
||||
el.style.cursor = 'grabbing';
|
||||
|
@ -61,12 +61,12 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
</AuthenticationFormView>
|
||||
|
||||
<!-- 头部 Logo 和应用名称 -->
|
||||
<div class="absolute left-0 top-0 z-10 flex flex-1">
|
||||
<div v-if="logo || appName" class="absolute left-0 top-0 z-10 flex flex-1">
|
||||
<div
|
||||
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
|
||||
>
|
||||
<img :alt="appName" :src="logo" class="mr-2" width="42" />
|
||||
<p class="text-xl font-medium">
|
||||
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
|
||||
<p v-if="appName" class="text-xl font-medium">
|
||||
{{ appName }}
|
||||
</p>
|
||||
</div>
|
||||
|
@ -16,6 +16,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
|
||||
// 提交函数
|
||||
handleSubmit: onSubmit,
|
||||
// 垂直布局,label和input在不同行,值为vertical
|
||||
|
@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
|
||||
],
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps<RowType> = {
|
||||
|
Loading…
Reference in New Issue
Block a user