feat: add vxe-table component (#4563)

* chore: wip vxe-table

* feat: add table demo

* chore: follow ci recommendations to adjust details

* chore: add custom-cell demo

* feat: add custom-cell table demo

* feat: add table from demo
This commit is contained in:
Vben
2024-10-04 23:05:28 +08:00
committed by GitHub
parent 46540a7329
commit 4173264805
80 changed files with 2426 additions and 80 deletions

View File

@@ -109,7 +109,7 @@ describe('formApi', () => {
});
it('should unmount form and reset state', () => {
formApi.unmounted();
formApi.unmount();
expect(formApi.isMounted).toBe(false);
});

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, toRaw, unref } from 'vue';
import { computed, toRaw, unref, watch } from 'vue';
import { useSimpleLocale } from '@vben-core/composables';
import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
import { cn, isFunction } from '@vben-core/shared/utils';
import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
import { COMPONENT_MAP } from '../config';
import { injectFormProps } from '../use-form-context';
@@ -65,6 +65,16 @@ async function handleReset(e: Event) {
form.resetForm();
}
}
watch(
() => collapsed.value,
() => {
const props = unref(rootProps);
if (props.collapseTriggerResize) {
triggerWindowResize();
}
},
);
</script>
<template>
<div

View File

@@ -24,9 +24,11 @@ function getDefaultState(): VbenFormProps {
actionWrapperClass: '',
collapsed: false,
collapsedRows: 1,
collapseTriggerResize: false,
commonConfig: {},
handleReset: undefined,
handleSubmit: undefined,
handleValuesChange: undefined,
layout: 'horizontal',
resetButtonOptions: {},
schema: [],
@@ -249,7 +251,7 @@ export class FormApi {
return rawValues;
}
unmounted() {
unmount() {
// this.state = null;
this.isMounted = false;
this.stateHandler.reset();

View File

@@ -244,6 +244,11 @@ export interface FormRenderProps<
* @default 1
*/
collapsedRows?: number;
/**
* 是否触发resize事件
* @default false
*/
collapseTriggerResize?: boolean;
/**
* 表单项通用后备配置,当子项目没配置时使用这里的配置,子项目配置优先级高于此配置
*/
@@ -302,6 +307,10 @@ export interface VbenFormProps<
* 表单提交回调
*/
handleSubmit?: HandleSubmitFn;
/**
* 表单值变化回调
*/
handleValuesChange?: (values: Record<string, any>) => void;
/**
* 重置按钮参数
*/

View File

@@ -24,7 +24,7 @@ export function useVbenForm<
const Form = defineComponent(
(props: VbenFormProps, { attrs, slots }) => {
onBeforeUnmount(() => {
api.unmounted();
api.unmount();
});
return () =>
h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);

View File

@@ -1,7 +1,10 @@
<script setup lang="ts">
import type { ExtendedFormApi, VbenFormProps } from './types';
// import { toRaw, watch } from 'vue';
import { useForwardPriorityValues } from '@vben-core/composables';
// import { isFunction } from '@vben-core/shared/utils';
import FormActions from './components/form-actions.vue';
import {
@@ -31,6 +34,18 @@ props.formApi?.mount?.(form);
const handleUpdateCollapsed = (value: boolean) => {
props.formApi?.setState({ collapsed: !!value });
};
// if (isFunction(forward.value.handleValuesChange)) {
// watch(
// () => form.values,
// (val) => {
// forward.value.handleValuesChange?.(toRaw(val));
// },
// {
// deep: true,
// immediate: true,
// },
// );
// }
</script>
<template>