This commit is contained in:
dap 2024-10-18 07:45:53 +08:00
commit 7e7e23fc09
14 changed files with 56 additions and 12 deletions

View File

@ -311,6 +311,7 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单
| collapsedRows | 折叠时保持的行数 | `number` | `1` |
| commonConfig | 表单项的通用配置,每个配置都会传递到每个表单项,表单项可覆盖 | `FormCommonConfig` | - |
| schema | 表单项的每一项配置 | `FormSchema` | - |
| submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
### TS 类型说明

View File

@ -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';
}

View File

@ -75,6 +75,11 @@ watch(
}
},
);
defineExpose({
handleReset,
handleSubmit,
});
</script>
<template>
<div

View File

@ -35,6 +35,7 @@ function getDefaultState(): VbenFormProps {
showCollapseButton: false,
showDefaultActions: true,
submitButtonOptions: {},
submitOnEnter: false,
wrapperClass: 'grid-cols-1',
};
}

View File

@ -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,

View File

@ -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>

View File

@ -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 = {

View File

@ -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"
>

View File

@ -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"

View File

@ -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,
]"

View File

@ -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';

View File

@ -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>

View File

@ -16,6 +16,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
class: 'w-full',
},
},
//
handleSubmit: onSubmit,
// labelinputvertical

View File

@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
],
//
showCollapseButton: true,
//
submitOnEnter: false,
};
const gridOptions: VxeGridProps<RowType> = {