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:
@@ -109,7 +109,7 @@ describe('formApi', () => {
|
||||
});
|
||||
|
||||
it('should unmount form and reset state', () => {
|
||||
formApi.unmounted();
|
||||
formApi.unmount();
|
||||
expect(formApi.isMounted).toBe(false);
|
||||
});
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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();
|
||||
|
@@ -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;
|
||||
/**
|
||||
* 重置按钮参数
|
||||
*/
|
||||
|
@@ -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);
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user