@carefrees/form-utils-vue 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -6
- package/esm/form/form.js +12 -7
- package/esm/formItem/form.Item.base.js +1 -6
- package/esm/formItem/form.Item.base.vue.d.ts +1 -0
- package/esm/formItem/form.hide.item.js +1 -5
- package/esm/formItem/form.hide.item.vue.d.ts +1 -0
- package/esm/formItem/formItem.js +0 -4
- package/esm/formItem/index.d.ts +2 -0
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/interface/index.d.ts +4 -11
- package/esm/interface/layout.d.ts +1 -1
- package/esm/interface/layout.formItem.d.ts +1 -1
- package/esm/layout/layout.formItem.js +1 -1
- package/esm/layout/layout.js +1 -1
- package/package.json +3 -2
- package/src/form/form.vue +13 -6
- package/src/formItem/form.Item.base.vue +5 -5
- package/src/formItem/form.hide.item.vue +3 -1
- package/src/formItem/formItem.vue +2 -1
- package/src/index.ts +1 -1
- package/src/interface/index.ts +4 -13
- package/src/interface/layout.formItem.ts +1 -2
- package/src/interface/layout.ts +2 -1
- package/src/layout/layout.formItem.vue +2 -1
- package/src/layout/layout.vue +2 -1
- package/esm/hooks/attr/attr.FormItem.d.ts +0 -97
- package/esm/hooks/attr/attr.FormItem.js +0 -97
- package/esm/hooks/index.d.ts +0 -13
- package/esm/hooks/index.js +0 -13
- package/esm/hooks/register/register.FormHideItem.d.ts +0 -9
- package/esm/hooks/register/register.FormHideItem.js +0 -42
- package/esm/hooks/register/register.FormItem.d.ts +0 -26
- package/esm/hooks/register/register.FormItem.js +0 -67
- package/esm/hooks/register/register.FormList.d.ts +0 -9
- package/esm/hooks/register/register.FormList.js +0 -42
- package/esm/hooks/register/register.form.d.ts +0 -3
- package/esm/hooks/register/register.form.js +0 -10
- package/esm/hooks/useAttrs.d.ts +0 -25
- package/esm/hooks/useAttrs.js +0 -26
- package/esm/hooks/useEffect.d.ts +0 -2
- package/esm/hooks/useEffect.js +0 -12
- package/esm/hooks/useForm.d.ts +0 -8
- package/esm/hooks/useForm.js +0 -17
- package/esm/hooks/useFormItem.d.ts +0 -7
- package/esm/hooks/useFormItem.js +0 -17
- package/esm/hooks/useFormItemParentName.d.ts +0 -18
- package/esm/hooks/useFormItemParentName.js +0 -47
- package/esm/hooks/useFormList.d.ts +0 -7
- package/esm/hooks/useFormList.js +0 -17
- package/esm/hooks/useHtmlFor.d.ts +0 -2
- package/esm/hooks/useHtmlFor.js +0 -7
- package/esm/hooks/useMultipleForm.d.ts +0 -7
- package/esm/hooks/useMultipleForm.js +0 -18
- package/esm/instance/ruleIntsnace.d.ts +0 -49
- package/esm/instance/ruleIntsnace.js +0 -65
- package/src/hooks/attr/attr.FormItem.tsx +0 -174
- package/src/hooks/index.ts +0 -13
- package/src/hooks/register/register.FormHideItem.ts +0 -45
- package/src/hooks/register/register.FormItem.ts +0 -80
- package/src/hooks/register/register.FormList.ts +0 -49
- package/src/hooks/register/register.form.ts +0 -12
- package/src/hooks/useAttrs.ts +0 -64
- package/src/hooks/useEffect.ts +0 -13
- package/src/hooks/useForm.ts +0 -28
- package/src/hooks/useFormItem.ts +0 -28
- package/src/hooks/useFormItemParentName.ts +0 -49
- package/src/hooks/useFormList.ts +0 -28
- package/src/hooks/useHtmlFor.ts +0 -9
- package/src/hooks/useMultipleForm.ts +0 -29
- package/src/instance/ruleIntsnace.ts +0 -105
package/README.md
CHANGED
|
@@ -12,10 +12,15 @@ npm install @carefrees/form-utils-vue # yarn add @carefrees/form-utils-vue # pnp
|
|
|
12
12
|
|
|
13
13
|
```vue
|
|
14
14
|
<script lang="ts" setup>
|
|
15
|
-
import {
|
|
15
|
+
import { ref } from "vue";
|
|
16
16
|
import { Form, useForm, FormItem } from "@carefrees/form-utils-vue";
|
|
17
17
|
import "@carefrees/form-utils-vue/assets/index.css"
|
|
18
|
-
|
|
18
|
+
import Input from './Input.vue';
|
|
19
|
+
const formData = ref<{ a: string, b: string }>({
|
|
20
|
+
a: '',
|
|
21
|
+
b: ''
|
|
22
|
+
})
|
|
23
|
+
|
|
19
24
|
const form = useForm();
|
|
20
25
|
const onSubmit = async () => {
|
|
21
26
|
try {
|
|
@@ -29,16 +34,41 @@ const onSubmit = async () => {
|
|
|
29
34
|
}
|
|
30
35
|
}
|
|
31
36
|
const onSetValue = () => {
|
|
32
|
-
|
|
37
|
+
formData.value.a = '123'
|
|
38
|
+
formData.value.b = '456'
|
|
39
|
+
// form.value.updatedFieldValue('b', '123')
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const onSetValue2 = () => {
|
|
43
|
+
// formData.value.a = ''
|
|
44
|
+
// formData.value.b = ''
|
|
45
|
+
formData.value = {
|
|
46
|
+
a: "21",
|
|
47
|
+
b: "22"
|
|
48
|
+
}
|
|
49
|
+
// form.value.updatedFieldValue('b', '123')
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const onSetValue3 = () => {
|
|
53
|
+
form.value.updatedFieldValue('b', '')
|
|
33
54
|
}
|
|
55
|
+
|
|
56
|
+
const rules1 = ref([{ required: true, message: "必填" }])
|
|
57
|
+
const rules2 = ref([{ required: true, message: "必填" }])
|
|
58
|
+
|
|
59
|
+
const onUpdateRules = () => {
|
|
60
|
+
rules1.value = [{ required: true, message: "必填2" }]
|
|
61
|
+
rules2.value = [{ required: false, message: "不必填" }]
|
|
62
|
+
}
|
|
63
|
+
|
|
34
64
|
const onValuesChange = (...rest: any[]) => {
|
|
35
65
|
console.log(rest)
|
|
36
66
|
}
|
|
37
67
|
</script>
|
|
38
68
|
<template>
|
|
39
69
|
<Form @valuesChange='onValuesChange' :formData='formData' :form='form'>
|
|
40
|
-
<FormItem label='内容' input='input' name='a' :rules='
|
|
41
|
-
<FormItem input='
|
|
70
|
+
<FormItem label='内容' input='input' name='a' :rules='rules1' />
|
|
71
|
+
<FormItem :input='Input' name='b' :rules='rules2'>
|
|
42
72
|
<template #label>
|
|
43
73
|
<span>s内容2</span>
|
|
44
74
|
</template>
|
|
@@ -50,8 +80,26 @@ const onValuesChange = (...rest: any[]) => {
|
|
|
50
80
|
</template>
|
|
51
81
|
</FormItem>
|
|
52
82
|
<FormItem label='Input' input='input' name='c' />
|
|
53
|
-
<
|
|
83
|
+
<FormItem name='d'>
|
|
84
|
+
<template #label>
|
|
85
|
+
<span>d</span>
|
|
86
|
+
</template>
|
|
87
|
+
<template #helpText>
|
|
88
|
+
<span>helpText</span>
|
|
89
|
+
</template>
|
|
90
|
+
<template #default>
|
|
91
|
+
<input placeholder='输入内容' v-model='formData.a' />
|
|
92
|
+
</template>
|
|
93
|
+
<template #extra>
|
|
94
|
+
<span>extra</span>
|
|
95
|
+
</template>
|
|
96
|
+
</FormItem>
|
|
97
|
+
<button type='button' @click='onSubmit'>验证</button>
|
|
54
98
|
<button type='button' @click='onSetValue'>设置值</button>
|
|
99
|
+
<button type='button' @click='onSetValue2'>设置值2</button>
|
|
100
|
+
<button type='button' @click='onSetValue3'>设置值3</button>
|
|
101
|
+
<button type='button' @click='onUpdateRules'>更新规则</button>
|
|
55
102
|
</Form>
|
|
56
103
|
</template>
|
|
104
|
+
<style scoped></style>
|
|
57
105
|
```
|
package/esm/form/form.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock,
|
|
2
|
-
import { useRegisterForm } from "../hooks/register/register.form.js";
|
|
3
|
-
import { useForm, useFormProvide } from "../hooks/useForm.js";
|
|
1
|
+
import { computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
|
|
4
2
|
import layout from "../layout/layout.js";
|
|
5
3
|
import classnames from "classnames";
|
|
4
|
+
import { useForm, useFormProvide, useRegisterForm } from "@carefrees/form-utils-vue-hooks";
|
|
6
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
6
|
name: "Form",
|
|
8
7
|
inheritAttrs: false,
|
|
@@ -35,7 +34,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
35
34
|
onFinishFailed: {},
|
|
36
35
|
hideData: {},
|
|
37
36
|
name: {},
|
|
38
|
-
hideRuleData: {},
|
|
39
37
|
bgcolor: {},
|
|
40
38
|
title: {
|
|
41
39
|
type: [
|
|
@@ -100,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
100
98
|
],
|
|
101
99
|
setup (__props, { emit: __emit }) {
|
|
102
100
|
const props = __props;
|
|
103
|
-
const { form, style, formData, hideData,
|
|
101
|
+
const { form, style, formData, hideData, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, layoutClass, bgcolor, ...rest } = props;
|
|
104
102
|
const cls = computed(()=>classnames("carefrees-form", props.class));
|
|
105
103
|
const formStyle = computed(()=>{
|
|
106
104
|
if (bgcolor) return [
|
|
@@ -114,7 +112,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
114
112
|
];
|
|
115
113
|
});
|
|
116
114
|
const formInstance = useForm(props.form);
|
|
117
|
-
formInstance.value.
|
|
115
|
+
formInstance.value.formData = ref(props.formData || {});
|
|
116
|
+
formInstance.value.hideState = ref(props.hideData || {});
|
|
117
|
+
watch(()=>props.formData, (newVal)=>{
|
|
118
|
+
formInstance.value.formData = ref(newVal || {});
|
|
119
|
+
});
|
|
120
|
+
watch(()=>props.hideData, (newVal)=>{
|
|
121
|
+
formInstance.value.hideState = ref(newVal || {});
|
|
122
|
+
});
|
|
118
123
|
const emits = __emit;
|
|
119
124
|
formInstance.value.onFinish = (...rest2)=>{
|
|
120
125
|
emits("finish", ...rest2);
|
|
@@ -125,7 +130,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
125
130
|
formInstance.value.onFinishFailed = (...rest2)=>{
|
|
126
131
|
emits("finishFailed", ...rest2);
|
|
127
132
|
};
|
|
128
|
-
useRegisterForm(formInstance
|
|
133
|
+
useRegisterForm(formInstance, props.name);
|
|
129
134
|
const onSubmit = (event)=>{
|
|
130
135
|
event?.preventDefault?.();
|
|
131
136
|
event?.stopPropagation?.();
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toValue, unref, useSlots, withCtx } from "vue";
|
|
2
|
-
import { useFormItemAttr } from "../hooks/attr/attr.FormItem.js";
|
|
3
2
|
import layout_formItem from "../layout/layout.formItem.js";
|
|
4
|
-
import { useFormItemParentNameProvide } from "
|
|
3
|
+
import { useFormItemAttr, useFormItemParentNameProvide } from "@carefrees/form-utils-vue-hooks";
|
|
5
4
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
5
|
name: "FormItemBase",
|
|
7
6
|
inheritAttrs: false,
|
|
@@ -13,10 +12,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
13
12
|
input: {},
|
|
14
13
|
dependencies: {},
|
|
15
14
|
noticeOnlyRuleDataField: {},
|
|
16
|
-
isNoticeParentField: {
|
|
17
|
-
type: Boolean
|
|
18
|
-
},
|
|
19
|
-
noticeWatchField: {},
|
|
20
15
|
preserve: {
|
|
21
16
|
type: Boolean
|
|
22
17
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createBlock, createCommentVNode, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderList, renderSlot, unref, useSlots, withCtx } from "vue";
|
|
2
2
|
import form_Item_base from "./form.Item.base.js";
|
|
3
|
-
import { useRegisterFormHideItem } from "
|
|
3
|
+
import { useRegisterFormHideItem } from "@carefrees/form-utils-vue-hooks";
|
|
4
4
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
5
5
|
name: "FormHideItem",
|
|
6
6
|
inheritAttrs: false,
|
|
@@ -12,10 +12,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
12
12
|
input: {},
|
|
13
13
|
dependencies: {},
|
|
14
14
|
noticeOnlyRuleDataField: {},
|
|
15
|
-
isNoticeParentField: {
|
|
16
|
-
type: Boolean
|
|
17
|
-
},
|
|
18
|
-
noticeWatchField: {},
|
|
19
15
|
preserve: {
|
|
20
16
|
type: Boolean
|
|
21
17
|
},
|
package/esm/formItem/formItem.js
CHANGED
package/esm/formItem/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export declare const FormItemBase: import("../utils").SFCWithInstall<{
|
|
|
13
13
|
} & import("vue").ComponentOptionsBase<Readonly<import("../index.js").FormItemProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
14
14
|
$slots: {
|
|
15
15
|
label: (params: any) => any;
|
|
16
|
+
default: (params: any) => any;
|
|
16
17
|
helpText: (params: any) => any;
|
|
17
18
|
extra: (params: any) => any;
|
|
18
19
|
};
|
|
@@ -52,6 +53,7 @@ export declare const FormHideItem: import("../utils").SFCWithInstall<{
|
|
|
52
53
|
} & import("vue").ComponentOptionsBase<Readonly<import("../index.js").FormItemProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
53
54
|
$slots: {
|
|
54
55
|
label: (params: any) => any;
|
|
56
|
+
default: (params: any) => any;
|
|
55
57
|
helpText: (params: any) => any;
|
|
56
58
|
extra: (params: any) => any;
|
|
57
59
|
};
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
package/esm/interface/index.d.ts
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
|
|
1
|
+
import { Component, StyleValue, UnwrapNestedRefs } from 'vue';
|
|
3
2
|
import { LayoutFormItemProps } from './layout.formItem';
|
|
4
3
|
import { FormLayoutProps } from './layout';
|
|
5
|
-
import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
|
|
6
|
-
export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
|
|
7
|
-
export type PartialComputedRefs<T> = {
|
|
8
|
-
[K in keyof T]: ComputedRefBase<T[K]>;
|
|
9
|
-
};
|
|
4
|
+
import type { FormInstanceBase, ValidateErrorEntity, FormItemAttrOptions } from '@carefrees/form-utils-vue-hooks';
|
|
10
5
|
export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
|
|
11
6
|
/**不进行样式渲染*/
|
|
12
7
|
noStyle?: boolean;
|
|
@@ -14,13 +9,13 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
|
|
|
14
9
|
input?: Component | string;
|
|
15
10
|
}
|
|
16
11
|
export interface FormProps<T = any> extends FormLayoutProps {
|
|
17
|
-
form?: FormInstanceBase
|
|
12
|
+
form?: FormInstanceBase<T>;
|
|
18
13
|
style?: StyleValue;
|
|
19
14
|
class?: string;
|
|
20
15
|
layoutClass?: string;
|
|
21
16
|
layoutStyle?: StyleValue;
|
|
22
17
|
/**表单数据*/
|
|
23
|
-
formData?:
|
|
18
|
+
formData?: Object;
|
|
24
19
|
/**值更新触发*/
|
|
25
20
|
onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
|
|
26
21
|
/**提交保存 验证成功*/
|
|
@@ -31,8 +26,6 @@ export interface FormProps<T = any> extends FormLayoutProps {
|
|
|
31
26
|
hideData?: Record<string, boolean>;
|
|
32
27
|
/**表单名称*/
|
|
33
28
|
name?: string;
|
|
34
|
-
/**隐藏规则校验*/
|
|
35
|
-
hideRuleData?: Record<string, boolean>;
|
|
36
29
|
/**背景颜色*/
|
|
37
30
|
bgcolor?: string;
|
|
38
31
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VNodeChild, StyleValue } from 'vue';
|
|
2
|
-
import { ComputedRefBase } from '
|
|
2
|
+
import type { ComputedRefBase } from '@carefrees/form-utils-vue-hooks';
|
|
3
3
|
export interface LayoutFormItemProps {
|
|
4
4
|
/**规则校验失败错误提示位置*/
|
|
5
5
|
errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { useAttrsInject } from "
|
|
3
|
+
import { useAttrsInject } from "@carefrees/form-utils-vue-hooks";
|
|
4
4
|
const _hoisted_1 = [
|
|
5
5
|
"for"
|
|
6
6
|
];
|
package/esm/layout/layout.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { useAttrsInject, useAttrsProvide } from "
|
|
3
|
+
import { useAttrsInject, useAttrsProvide } from "@carefrees/form-utils-vue-hooks";
|
|
4
4
|
const preCls = "carefrees-form-layout";
|
|
5
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
6
|
name: "Layout",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carefrees/form-utils-vue",
|
|
3
3
|
"author": "SunLxy <1011771396@qq.com>",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.13",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "esm/index.js",
|
|
7
7
|
"module": "esm/index.js",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"vue": "^3.5.13"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@carefrees/form-utils": "^0.0.
|
|
27
|
+
"@carefrees/form-utils": "^0.0.13",
|
|
28
|
+
"@carefrees/form-utils-vue-hooks": "^0.0.13",
|
|
28
29
|
"async-validator": "~4.2.5",
|
|
29
30
|
"classnames": "2.5.1"
|
|
30
31
|
}
|
package/src/form/form.vue
CHANGED
|
@@ -8,12 +8,11 @@
|
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script lang="ts" setup>
|
|
11
|
-
import { computed, defineProps, withDefaults,
|
|
11
|
+
import { computed, defineProps, withDefaults, defineEmits, ref, watch } from "vue"
|
|
12
12
|
import type { FormProps } from "../interface/index"
|
|
13
|
-
import { useRegisterForm } from "../hooks/register/register.form"
|
|
14
|
-
import { useForm, useFormProvide } from "../hooks/useForm"
|
|
15
13
|
import FormLayout from "../layout/layout.vue"
|
|
16
14
|
import clx from 'classnames';
|
|
15
|
+
import { useRegisterForm, useForm, useFormProvide } from "@carefrees/form-utils-vue-hooks"
|
|
17
16
|
|
|
18
17
|
defineOptions({
|
|
19
18
|
name: 'Form',
|
|
@@ -27,7 +26,6 @@ const {
|
|
|
27
26
|
style,
|
|
28
27
|
formData,
|
|
29
28
|
hideData,
|
|
30
|
-
hideRuleData,
|
|
31
29
|
name,
|
|
32
30
|
onFinish,
|
|
33
31
|
onFinishFailed,
|
|
@@ -47,7 +45,16 @@ const formStyle = computed(() => {
|
|
|
47
45
|
});
|
|
48
46
|
|
|
49
47
|
const formInstance = useForm(props.form);
|
|
50
|
-
formInstance.value.
|
|
48
|
+
formInstance.value.formData = ref(props.formData || {});
|
|
49
|
+
formInstance.value.hideState = ref(props.hideData || {});
|
|
50
|
+
|
|
51
|
+
watch(() => props.formData, (newVal) => {
|
|
52
|
+
formInstance.value.formData = ref(newVal || {});
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
watch(() => props.hideData, (newVal) => {
|
|
56
|
+
formInstance.value.hideState = ref(newVal || {});
|
|
57
|
+
})
|
|
51
58
|
|
|
52
59
|
const emits = defineEmits(["finish", 'valuesChange', 'finishFailed'])
|
|
53
60
|
|
|
@@ -60,7 +67,7 @@ formInstance.value.onValuesChange = (...rest) => {
|
|
|
60
67
|
formInstance.value.onFinishFailed = (...rest) => {
|
|
61
68
|
emits("finishFailed", ...rest)
|
|
62
69
|
};
|
|
63
|
-
useRegisterForm(formInstance
|
|
70
|
+
useRegisterForm(formInstance, props.name)
|
|
64
71
|
|
|
65
72
|
const onSubmit = (event: Event) => {
|
|
66
73
|
event?.preventDefault?.();
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
:col-span='props.colSpan' :row-span='props.rowSpan' :html-for='formAttrs.htmlFor' :style='props.style'
|
|
9
9
|
:class='props.class' :label-style='props.labelStyle' :label-class='props.labelClass'
|
|
10
10
|
:validate-result='formAttrs.validateResult'>
|
|
11
|
-
<template v-for="(item, name) in slots" #[name]="slotProps">
|
|
12
|
-
<slot :name="name" v-bind="slotProps"></slot>
|
|
13
|
-
</template>
|
|
14
11
|
<template v-slot:default>
|
|
15
12
|
<component :is="props.input" v-bind='toValue(formAttrs.attrsLastData)' />
|
|
16
13
|
</template>
|
|
14
|
+
<template v-for="(item, name) in slots" #[name]="slotProps">
|
|
15
|
+
<slot :name="name" v-bind="slotProps"></slot>
|
|
16
|
+
</template>
|
|
17
17
|
</LayoutFormItem>
|
|
18
18
|
</template>
|
|
19
19
|
</template>
|
|
@@ -21,9 +21,8 @@
|
|
|
21
21
|
<script lang="ts" setup>
|
|
22
22
|
import { defineProps, withDefaults, computed, toValue } from "vue"
|
|
23
23
|
import type { FormItemProps } from "../interface/index"
|
|
24
|
-
import { useFormItemAttr } from "../hooks/attr/attr.FormItem"
|
|
25
24
|
import LayoutFormItem from "../layout/layout.formItem.vue";
|
|
26
|
-
import { useFormItemParentNameProvide } from "
|
|
25
|
+
import { useFormItemParentNameProvide, useFormItemAttr } from "@carefrees/form-utils-vue-hooks"
|
|
27
26
|
|
|
28
27
|
defineOptions({
|
|
29
28
|
name: 'FormItemBase',
|
|
@@ -42,6 +41,7 @@ useFormItemParentNameProvide({
|
|
|
42
41
|
|
|
43
42
|
const slots = defineSlots<{
|
|
44
43
|
label: (params: any) => any,
|
|
44
|
+
default: (params: any) => any,
|
|
45
45
|
helpText: (params: any) => any,
|
|
46
46
|
extra: (params: any) => any,
|
|
47
47
|
}>()
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
import { defineProps, withDefaults, } from "vue"
|
|
13
13
|
import type { FormItemProps } from "../interface/index"
|
|
14
14
|
import FormItemBase from "./form.Item.base.vue"
|
|
15
|
-
import { useRegisterFormHideItem } from "
|
|
15
|
+
import { useRegisterFormHideItem } from "@carefrees/form-utils-vue-hooks"
|
|
16
|
+
|
|
16
17
|
defineOptions({
|
|
17
18
|
name: 'FormHideItem',
|
|
18
19
|
inheritAttrs: false, // 可选,防止属性自动应用到根元素
|
|
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<FormItemProps>(), {
|
|
|
21
22
|
})
|
|
22
23
|
const slots = defineSlots<{
|
|
23
24
|
label: (params: any) => any,
|
|
25
|
+
default: (params: any) => any,
|
|
24
26
|
helpText: (params: any) => any,
|
|
25
27
|
extra: (params: any) => any,
|
|
26
28
|
}>()
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
</template>
|
|
20
20
|
|
|
21
21
|
<script lang="ts" setup>
|
|
22
|
-
import { defineProps, withDefaults } from "vue"
|
|
22
|
+
import { defineProps, withDefaults, } from "vue"
|
|
23
23
|
import type { FormItemProps } from "../interface/index"
|
|
24
24
|
import LayoutFormItem from "../layout/layout.formItem.vue";
|
|
25
25
|
import FormItemBase from "./form.Item.base.vue"
|
|
@@ -29,6 +29,7 @@ defineOptions({
|
|
|
29
29
|
});
|
|
30
30
|
const props = withDefaults(defineProps<Partial<FormItemProps>>(), {
|
|
31
31
|
})
|
|
32
|
+
|
|
32
33
|
const slots = defineSlots<{
|
|
33
34
|
default: (params: any) => any,
|
|
34
35
|
label: (params: any) => any,
|
package/src/index.ts
CHANGED
package/src/interface/index.ts
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
|
|
1
|
+
import { Component, StyleValue, UnwrapNestedRefs } from 'vue';
|
|
3
2
|
import { LayoutFormItemProps } from './layout.formItem';
|
|
4
3
|
import { FormLayoutProps } from './layout';
|
|
5
|
-
import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
|
|
6
|
-
|
|
7
|
-
export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
|
|
8
|
-
|
|
9
|
-
export type PartialComputedRefs<T> = {
|
|
10
|
-
[K in keyof T]: ComputedRefBase<T[K]>;
|
|
11
|
-
};
|
|
4
|
+
import type { FormInstanceBase, ValidateErrorEntity, FormItemAttrOptions } from '@carefrees/form-utils-vue-hooks';
|
|
12
5
|
|
|
13
6
|
export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
|
|
14
7
|
/**不进行样式渲染*/
|
|
@@ -18,13 +11,13 @@ export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps
|
|
|
18
11
|
}
|
|
19
12
|
|
|
20
13
|
export interface FormProps<T = any> extends FormLayoutProps {
|
|
21
|
-
form?: FormInstanceBase
|
|
14
|
+
form?: FormInstanceBase<T>;
|
|
22
15
|
style?: StyleValue;
|
|
23
16
|
class?: string;
|
|
24
17
|
layoutClass?: string;
|
|
25
18
|
layoutStyle?: StyleValue;
|
|
26
19
|
/**表单数据*/
|
|
27
|
-
formData?:
|
|
20
|
+
formData?: Object;
|
|
28
21
|
/**值更新触发*/
|
|
29
22
|
onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
|
|
30
23
|
/**提交保存 验证成功*/
|
|
@@ -35,8 +28,6 @@ export interface FormProps<T = any> extends FormLayoutProps {
|
|
|
35
28
|
hideData?: Record<string, boolean>;
|
|
36
29
|
/**表单名称*/
|
|
37
30
|
name?: string;
|
|
38
|
-
/**隐藏规则校验*/
|
|
39
|
-
hideRuleData?: Record<string, boolean>;
|
|
40
31
|
/**背景颜色*/
|
|
41
32
|
bgcolor?: string;
|
|
42
33
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { VNodeChild, StyleValue } from 'vue';
|
|
2
|
-
import { ComputedRefBase } from '
|
|
3
|
-
|
|
2
|
+
import type { ComputedRefBase } from '@carefrees/form-utils-vue-hooks';
|
|
4
3
|
export interface LayoutFormItemProps {
|
|
5
4
|
/**规则校验失败错误提示位置*/
|
|
6
5
|
errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
|
package/src/interface/layout.ts
CHANGED
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
import clx from 'classnames';
|
|
50
50
|
import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
|
|
51
51
|
import type { LayoutFormItemProps } from "../interface/layout.formItem"
|
|
52
|
-
import { useAttrsInject } from "
|
|
52
|
+
import { useAttrsInject } from "@carefrees/form-utils-vue-hooks"
|
|
53
|
+
|
|
53
54
|
const preCls = 'carefrees-form-item';
|
|
54
55
|
defineOptions({
|
|
55
56
|
name: 'LayoutFormItem',
|
package/src/layout/layout.vue
CHANGED
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
import clx from 'classnames';
|
|
31
31
|
import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
|
|
32
32
|
import type { FormLayoutProps } from "../interface/layout"
|
|
33
|
-
import { useAttrsInject, useAttrsProvide } from "
|
|
33
|
+
import { useAttrsInject, useAttrsProvide } from "@carefrees/form-utils-vue-hooks"
|
|
34
|
+
|
|
34
35
|
const preCls = 'carefrees-form-layout';
|
|
35
36
|
|
|
36
37
|
const attrs = useAttrsInject();
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { FormInstanceBase, FormItemInstanceBase } from '@carefrees/form-utils';
|
|
2
|
-
import { RegisterFormItemOptions } from './../register/register.FormItem';
|
|
3
|
-
import { Ref } from 'vue';
|
|
4
|
-
import type { RuleInstanceBase2 } from '../../instance/ruleIntsnace';
|
|
5
|
-
export interface FormItemAttrOptions extends RegisterFormItemOptions {
|
|
6
|
-
/**依赖更新项*/
|
|
7
|
-
dependencies?: string[];
|
|
8
|
-
/**通知 只用于校验规则提示 字段 */
|
|
9
|
-
noticeOnlyRuleDataField?: string[];
|
|
10
|
-
/**通知父级字段监听方法更新*/
|
|
11
|
-
isNoticeParentField?: boolean;
|
|
12
|
-
/**通知watch监听方法更新*/
|
|
13
|
-
noticeWatchField?: string[];
|
|
14
|
-
/**是否保护值(不进行表单项组件卸载重置初始值)*/
|
|
15
|
-
preserve?: boolean;
|
|
16
|
-
/**重写规则*/
|
|
17
|
-
useRules?: (ruleInstance: Ref<RuleInstanceBase2>, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => void;
|
|
18
|
-
/**输入框属性重写*/
|
|
19
|
-
useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
|
|
20
|
-
/**输入框属性*/
|
|
21
|
-
inputAttrs?: Object;
|
|
22
|
-
/**传递组件字段*/
|
|
23
|
-
valuePropName?: string;
|
|
24
|
-
/**取值字段(默认和valuePropName值相同)*/
|
|
25
|
-
getValuePath?: string;
|
|
26
|
-
/**自定义获取值*/
|
|
27
|
-
getValueFromEvent?: (event: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
|
|
28
|
-
/**值格式化*/
|
|
29
|
-
formatValue?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => any;
|
|
30
|
-
/**触发数据更新之后触发(用于数据联动之类的)*/
|
|
31
|
-
onAfterUpdate?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => void;
|
|
32
|
-
/**事件名称*/
|
|
33
|
-
trigger?: string;
|
|
34
|
-
}
|
|
35
|
-
/**表单项参数*/
|
|
36
|
-
export declare const useFormItemAttr: (options: FormItemAttrOptions) => {
|
|
37
|
-
valuePropName: string;
|
|
38
|
-
htmlFor: import("vue").ComputedRef<string>;
|
|
39
|
-
onChange: (event: any) => void;
|
|
40
|
-
formItemInstance: FormItemInstanceBase;
|
|
41
|
-
form: FormInstanceBase<any>;
|
|
42
|
-
ruleInstance: Ref<RuleInstanceBase2, RuleInstanceBase2>;
|
|
43
|
-
newAttrs: import("vue").ComputedRef<{
|
|
44
|
-
name: string;
|
|
45
|
-
id: string;
|
|
46
|
-
constructor: Function;
|
|
47
|
-
toString(): string;
|
|
48
|
-
toLocaleString(): string;
|
|
49
|
-
valueOf(): Object;
|
|
50
|
-
hasOwnProperty(v: PropertyKey): boolean;
|
|
51
|
-
isPrototypeOf(v: Object): boolean;
|
|
52
|
-
propertyIsEnumerable(v: PropertyKey): boolean;
|
|
53
|
-
}>;
|
|
54
|
-
attrsLastData: Ref<{
|
|
55
|
-
name: string;
|
|
56
|
-
id: string;
|
|
57
|
-
constructor: Function;
|
|
58
|
-
toString: () => string;
|
|
59
|
-
toLocaleString: () => string;
|
|
60
|
-
valueOf: () => Object;
|
|
61
|
-
hasOwnProperty: (v: PropertyKey) => boolean;
|
|
62
|
-
isPrototypeOf: (v: Object) => boolean;
|
|
63
|
-
propertyIsEnumerable: (v: PropertyKey) => boolean;
|
|
64
|
-
}, {
|
|
65
|
-
name: string;
|
|
66
|
-
id: string;
|
|
67
|
-
constructor: Function;
|
|
68
|
-
toString(): string;
|
|
69
|
-
toLocaleString(): string;
|
|
70
|
-
valueOf(): Object;
|
|
71
|
-
hasOwnProperty(v: PropertyKey): boolean;
|
|
72
|
-
isPrototypeOf(v: Object): boolean;
|
|
73
|
-
propertyIsEnumerable(v: PropertyKey): boolean;
|
|
74
|
-
} | {
|
|
75
|
-
name: string;
|
|
76
|
-
id: string;
|
|
77
|
-
constructor: Function;
|
|
78
|
-
toString: () => string;
|
|
79
|
-
toLocaleString: () => string;
|
|
80
|
-
valueOf: () => Object;
|
|
81
|
-
hasOwnProperty: (v: PropertyKey) => boolean;
|
|
82
|
-
isPrototypeOf: (v: Object) => boolean;
|
|
83
|
-
propertyIsEnumerable: (v: PropertyKey) => boolean;
|
|
84
|
-
}>;
|
|
85
|
-
validateResult: Ref<{
|
|
86
|
-
tip: string | (string | undefined)[];
|
|
87
|
-
isInvalid: boolean;
|
|
88
|
-
}, {
|
|
89
|
-
tip: string | (string | undefined)[];
|
|
90
|
-
isInvalid: boolean;
|
|
91
|
-
} | {
|
|
92
|
-
tip: string | (string | undefined)[];
|
|
93
|
-
isInvalid: boolean;
|
|
94
|
-
}>;
|
|
95
|
-
newSort: import("vue").ComputedRef<string>;
|
|
96
|
-
newName: import("vue").ComputedRef<string>;
|
|
97
|
-
};
|