@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.
Files changed (71) hide show
  1. package/README.md +54 -6
  2. package/esm/form/form.js +12 -7
  3. package/esm/formItem/form.Item.base.js +1 -6
  4. package/esm/formItem/form.Item.base.vue.d.ts +1 -0
  5. package/esm/formItem/form.hide.item.js +1 -5
  6. package/esm/formItem/form.hide.item.vue.d.ts +1 -0
  7. package/esm/formItem/formItem.js +0 -4
  8. package/esm/formItem/index.d.ts +2 -0
  9. package/esm/index.d.ts +1 -1
  10. package/esm/index.js +1 -1
  11. package/esm/interface/index.d.ts +4 -11
  12. package/esm/interface/layout.d.ts +1 -1
  13. package/esm/interface/layout.formItem.d.ts +1 -1
  14. package/esm/layout/layout.formItem.js +1 -1
  15. package/esm/layout/layout.js +1 -1
  16. package/package.json +3 -2
  17. package/src/form/form.vue +13 -6
  18. package/src/formItem/form.Item.base.vue +5 -5
  19. package/src/formItem/form.hide.item.vue +3 -1
  20. package/src/formItem/formItem.vue +2 -1
  21. package/src/index.ts +1 -1
  22. package/src/interface/index.ts +4 -13
  23. package/src/interface/layout.formItem.ts +1 -2
  24. package/src/interface/layout.ts +2 -1
  25. package/src/layout/layout.formItem.vue +2 -1
  26. package/src/layout/layout.vue +2 -1
  27. package/esm/hooks/attr/attr.FormItem.d.ts +0 -97
  28. package/esm/hooks/attr/attr.FormItem.js +0 -97
  29. package/esm/hooks/index.d.ts +0 -13
  30. package/esm/hooks/index.js +0 -13
  31. package/esm/hooks/register/register.FormHideItem.d.ts +0 -9
  32. package/esm/hooks/register/register.FormHideItem.js +0 -42
  33. package/esm/hooks/register/register.FormItem.d.ts +0 -26
  34. package/esm/hooks/register/register.FormItem.js +0 -67
  35. package/esm/hooks/register/register.FormList.d.ts +0 -9
  36. package/esm/hooks/register/register.FormList.js +0 -42
  37. package/esm/hooks/register/register.form.d.ts +0 -3
  38. package/esm/hooks/register/register.form.js +0 -10
  39. package/esm/hooks/useAttrs.d.ts +0 -25
  40. package/esm/hooks/useAttrs.js +0 -26
  41. package/esm/hooks/useEffect.d.ts +0 -2
  42. package/esm/hooks/useEffect.js +0 -12
  43. package/esm/hooks/useForm.d.ts +0 -8
  44. package/esm/hooks/useForm.js +0 -17
  45. package/esm/hooks/useFormItem.d.ts +0 -7
  46. package/esm/hooks/useFormItem.js +0 -17
  47. package/esm/hooks/useFormItemParentName.d.ts +0 -18
  48. package/esm/hooks/useFormItemParentName.js +0 -47
  49. package/esm/hooks/useFormList.d.ts +0 -7
  50. package/esm/hooks/useFormList.js +0 -17
  51. package/esm/hooks/useHtmlFor.d.ts +0 -2
  52. package/esm/hooks/useHtmlFor.js +0 -7
  53. package/esm/hooks/useMultipleForm.d.ts +0 -7
  54. package/esm/hooks/useMultipleForm.js +0 -18
  55. package/esm/instance/ruleIntsnace.d.ts +0 -49
  56. package/esm/instance/ruleIntsnace.js +0 -65
  57. package/src/hooks/attr/attr.FormItem.tsx +0 -174
  58. package/src/hooks/index.ts +0 -13
  59. package/src/hooks/register/register.FormHideItem.ts +0 -45
  60. package/src/hooks/register/register.FormItem.ts +0 -80
  61. package/src/hooks/register/register.FormList.ts +0 -49
  62. package/src/hooks/register/register.form.ts +0 -12
  63. package/src/hooks/useAttrs.ts +0 -64
  64. package/src/hooks/useEffect.ts +0 -13
  65. package/src/hooks/useForm.ts +0 -28
  66. package/src/hooks/useFormItem.ts +0 -28
  67. package/src/hooks/useFormItemParentName.ts +0 -49
  68. package/src/hooks/useFormList.ts +0 -28
  69. package/src/hooks/useHtmlFor.ts +0 -9
  70. package/src/hooks/useMultipleForm.ts +0 -29
  71. 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 { reactive } from "vue";
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
- const formData = reactive({})
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
- form.value.updatedFieldValue('b', '123')
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='[{ required: true, message: "必填" }]' />
41
- <FormItem input='input' name='b'>
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
- <button type='button' @click='onSubmit'>点击</button>
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, reactive, renderSlot, unref, withCtx } from "vue";
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, hideRuleData, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, layoutClass, bgcolor, ...rest } = props;
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.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
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.value, props.name);
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 "../hooks/useFormItemParentName.js";
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,7 @@
1
1
  import type { FormItemProps } from "../interface/index";
2
2
  type __VLS_Slots = {
3
3
  label: (params: any) => any;
4
+ default: (params: any) => any;
4
5
  helpText: (params: any) => any;
5
6
  extra: (params: any) => any;
6
7
  };
@@ -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 "../hooks/register/register.FormHideItem.js";
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
  },
@@ -1,6 +1,7 @@
1
1
  import type { FormItemProps } from "../interface/index";
2
2
  type __VLS_Slots = {
3
3
  label: (params: any) => any;
4
+ default: (params: any) => any;
4
5
  helpText: (params: any) => any;
5
6
  extra: (params: any) => any;
6
7
  };
@@ -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
  },
@@ -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
@@ -1,4 +1,4 @@
1
- export * from './hooks';
1
+ export * from '@carefrees/form-utils-vue-hooks';
2
2
  export * from './component';
3
3
  export * from './utils';
4
4
  export * from './interface';
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- export * from "./hooks/index.js";
1
+ export * from "@carefrees/form-utils-vue-hooks";
2
2
  export * from "./component.js";
3
3
  export * from "./utils/index.js";
4
4
  export * from "./interface/index.js";
@@ -1,12 +1,7 @@
1
- import { ComputedRef, Ref, Component, StyleValue, UnwrapNestedRefs } from 'vue';
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?: any;
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,4 +1,4 @@
1
- import { AttrsOptions } from '../hooks/useAttrs';
1
+ import type { AttrsOptions } from '@carefrees/form-utils-vue-hooks';
2
2
  import { VNodeChild, StyleValue } from 'vue';
3
3
  export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {
4
4
  /**标题*/
@@ -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 "../hooks/useAttrs.js";
3
+ import { useAttrsInject } from "@carefrees/form-utils-vue-hooks";
4
4
  const _hoisted_1 = [
5
5
  "for"
6
6
  ];
@@ -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 "../hooks/useAttrs.js";
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.12",
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.12",
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, reactive, defineEmits } from "vue"
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.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
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.value, props.name)
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 "../hooks/useFormItemParentName"
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 "../hooks/register/register.FormHideItem"
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
@@ -1,5 +1,5 @@
1
1
  import * as components from './component';
2
- export * from './hooks';
2
+ export * from '@carefrees/form-utils-vue-hooks';
3
3
  export * from './component';
4
4
  export * from './utils';
5
5
  export * from './interface';
@@ -1,14 +1,7 @@
1
- import { ComputedRef, Ref, VNode, Component, StyleValue, UnwrapNestedRefs } from 'vue';
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?: any;
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';
@@ -1,4 +1,5 @@
1
- import { AttrsOptions } from '../hooks/useAttrs';
1
+ import type { AttrsOptions } from '@carefrees/form-utils-vue-hooks';
2
+
2
3
  import { VNodeChild, StyleValue } from 'vue';
3
4
 
4
5
  export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {
@@ -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 "../hooks/useAttrs"
52
+ import { useAttrsInject } from "@carefrees/form-utils-vue-hooks"
53
+
53
54
  const preCls = 'carefrees-form-item';
54
55
  defineOptions({
55
56
  name: 'LayoutFormItem',
@@ -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 "../hooks/useAttrs"
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
- };