@deot/vc-components 1.0.48 → 1.0.49

package/dist/index.cjs

@@ -11488,7 +11488,14 @@ const props$L = {
   labelStyle: [Object, String],
   labelClass: [Object, String],
   errorStyle: [Object, String],
-  errorClass: [Object, String]
+  errorClass: [Object, String],
+  // 给nestFormItem统一注入
+  nestedContentStyle: [Object, String],
+  nestedContentClass: [Object, String],
+  nestedLabelStyle: [Object, String],
+  nestedLabelClass: [Object, String],
+  nestedErrorStyle: [Object, String],
+  nestedErrorClass: [Object, String]
 };
 
 const useForm = (expose, options = {}) => {
@@ -11708,31 +11715,32 @@ const useFormItem = (expose) => {
   });
   const classes = vue.computed(() => {
     return {
-      "is-require": isRequired.value && props.asterisk,
+      "is-required": isRequired.value && props.asterisk,
       "is-error": validateState.value === "error",
       "is-validating": validateState.value === "validating",
       "is-inline": form.props.inline,
-      "is-nest": isNest.value,
+      "is-nested": isNested.value,
       "is-alone": !props.showMessage,
       // 用于单独去除form-item的默认margin_bottom
       [`is-${labelPosition.value}`]: true
     };
   });
-  const isNest = vue.computed(() => {
+  const isNested = vue.computed(() => {
     return !!formItem.change;
   });
-  const isNestLast = vue.ref(false);
+  const isNestedLast = vue.ref(false);
   const hasLabel = vue.computed(() => {
     return !!props.label || slots.label;
   });
   const labelStyle = vue.computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNested.value ? 0 : form.props.labelWidth;
     return [
       {
         width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
         textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
       },
       form.props.labelStyle,
+      isNested.value && form.props.nestedLabelStyle,
       props.labelStyle
     ];
   });
@@ -11740,24 +11748,25 @@ const useFormItem = (expose) => {
     const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
     return [
       {
-        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+        marginLeft: labelPosition.value === "top" || !hasLabel.value && isNested.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+        marginBottom: isNested.value && !isNestedLast.value ? `20px` : 0
       },
       form.props.contentStyle,
+      isNested.value && form.props.nestedContentStyle,
       props.contentStyle
     ];
   });
   const errorStyle = vue.computed(() => {
-    return [form.props.errorStyle, props.errorStyle];
+    return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props.errorStyle];
   });
   const labelClass = vue.computed(() => {
-    return [form.props.labelClass, props.labelClass];
+    return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props.labelClass];
   });
   const contentClass = vue.computed(() => {
-    return [form.props.contentClass, props.contentClass];
+    return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props.contentClass];
   });
   const errorClass = vue.computed(() => {
-    return [form.props.errorClass, props.errorClass];
+    return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props.errorClass];
   });
   const isStyleless = vue.computed(() => {
     return props.styleless || form.props.styleless;
@@ -11894,7 +11903,7 @@ const useFormItem = (expose) => {
   vue.watch(
     () => formItem.fields?.length,
     async (v) => {
-      if (!isNest.value || !v) return isNestLast.value = false;
+      if (!isNested.value || !v) return isNestedLast.value = false;
       const fields$ = [...vue.toRaw(formItem.fields)];
       const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
       const sortFields = fields$.toSorted((a, b) => {
@@ -11905,7 +11914,7 @@ const useFormItem = (expose) => {
         if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
         return aPosition.left - bPosition.left;
       });
-      isNestLast.value = sortFields[sortFields.length - 1] === instance;
+      isNestedLast.value = sortFields[sortFields.length - 1] === instance;
     }
   );
   expose({
@@ -11914,9 +11923,9 @@ const useFormItem = (expose) => {
     getPosition
   });
   return {
-    isNest,
+    isNested,
     isStyleless,
-    isNestLast,
+    isNestedLast,
     validateMessage,
     classes,
     labelStyle,
@@ -11943,7 +11952,7 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
     const it = useFormItem(expose);
     const {
       isStyleless,
-      isNest,
+      isNested,
       classes,
       labelStyle,
       contentStyle,
@@ -11954,39 +11963,35 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
       showError,
       validateMessage
     } = it;
-    const {
-      label,
-      labelFor
-    } = props;
     const errorColorClass = 'vc-form-item__error';
     return () => {
       if (isStyleless.value) return [slots.default?.(), slots.error?.({
         show: showError.value,
-        nest: isNest.value,
+        nested: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       })];
       return vue.createVNode("div", {
         "class": ['vc-form-item', classes.value]
-      }, [(label || slots.label) && vue.createVNode("div", {
+      }, [(props.label || slots.label) && vue.createVNode("div", {
         "style": labelStyle.value,
         "class": ['vc-form-item__label', ...labelClass.value],
-        "for": labelFor
-      }, [vue.createVNode("label", null, [label || slots.label?.()])]), vue.createVNode("div", {
+        "for": props.labelFor
+      }, [vue.createVNode("label", null, [props.label || slots.label?.()])]), vue.createVNode("div", {
         "class": "vc-form-item__wrapper"
       }, [vue.createVNode("div", {
         "class": ['vc-form-item__content', ...contentClass.value],
         "style": contentStyle.value
       }, [slots.default?.(), slots.error ? slots.error({
         show: showError.value,
-        nest: isNest.value,
+        nest: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       }) : vue.createVNode(TransitionFade, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass, ...errorClass.value],
+          "class": ['vc-form-item__tip', isNested.value ? 'is-nested' : '', errorColorClass, ...errorClass.value],
           "style": [errorStyle.value]
         }, [validateMessage.value]), [[vue.vShow, showError.value]])]
       })])])]);
@@ -12057,41 +12062,36 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
       labelClass,
       contentClass,
       errorClass,
-      isNest,
+      isNested,
       showError,
       validateMessage
     } = it;
-    const {
-      label,
-      labelFor,
-      showMessage
-    } = props;
     const errorColorClass = 'vcm-form-item__error';
     return () => {
       if (isStyleless.value) return [slots.default?.(), slots.error?.({
         show: showError.value,
-        nest: isNest.value,
+        nested: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       })];
       return vue.createVNode("div", {
         "style": {
-          paddingLeft: `${isNest.value ? 0 : props.indent}px`
+          paddingLeft: `${isNested.value ? 0 : props.indent}px`
         },
         "class": [classes.value, 'vcm-form-item']
       }, [vue.createVNode("div", {
         "class": "vcm-form-item__wrapper"
       }, [(props.label || slots.label) && vue.createVNode("label", {
-        "for": labelFor,
+        "for": props.labelFor,
         "style": labelStyle.value,
         "class": ['vcm-form-item__label', ...labelClass.value]
-      }, [label || slots.label?.()]), vue.createVNode("div", {
+      }, [props.label || slots.label?.()]), vue.createVNode("div", {
         "style": contentStyle.value,
         "class": ['vcm-form-item__content', ...contentClass.value]
-      }, [slots.default?.(), showMessage && showError.value && vue.createVNode("div", {
+      }, [slots.default?.(), props.showMessage && showError.value && vue.createVNode("div", {
         "class": [{
-          'is-nest': isNest.value
+          'is-nested': isNested.value
         }, errorColorClass, ...errorClass.value],
         "style": errorStyle.value
       }, [slots.error ? slots.error({

package/dist/index.d.ts

@@ -1887,6 +1887,12 @@ labelStyle: (ObjectConstructor | StringConstructor)[];
 labelClass: (ObjectConstructor | StringConstructor)[];
 errorStyle: (ObjectConstructor | StringConstructor)[];
 errorClass: (ObjectConstructor | StringConstructor)[];
+nestedContentStyle: (ObjectConstructor | StringConstructor)[];
+nestedContentClass: (ObjectConstructor | StringConstructor)[];
+nestedLabelStyle: (ObjectConstructor | StringConstructor)[];
+nestedLabelClass: (ObjectConstructor | StringConstructor)[];
+nestedErrorStyle: (ObjectConstructor | StringConstructor)[];
+nestedErrorClass: (ObjectConstructor | StringConstructor)[];
 }>, () => VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
@@ -1929,6 +1935,12 @@ labelStyle: (ObjectConstructor | StringConstructor)[];
 labelClass: (ObjectConstructor | StringConstructor)[];
 errorStyle: (ObjectConstructor | StringConstructor)[];
 errorClass: (ObjectConstructor | StringConstructor)[];
+nestedContentStyle: (ObjectConstructor | StringConstructor)[];
+nestedContentClass: (ObjectConstructor | StringConstructor)[];
+nestedLabelStyle: (ObjectConstructor | StringConstructor)[];
+nestedLabelClass: (ObjectConstructor | StringConstructor)[];
+nestedErrorStyle: (ObjectConstructor | StringConstructor)[];
+nestedErrorClass: (ObjectConstructor | StringConstructor)[];
 }>> & Readonly<{}>, {
 tag: string;
 styleless: boolean;
@@ -4753,6 +4765,12 @@ labelStyle: (ObjectConstructor | StringConstructor)[];
 labelClass: (ObjectConstructor | StringConstructor)[];
 errorStyle: (ObjectConstructor | StringConstructor)[];
 errorClass: (ObjectConstructor | StringConstructor)[];
+nestedContentStyle: (ObjectConstructor | StringConstructor)[];
+nestedContentClass: (ObjectConstructor | StringConstructor)[];
+nestedLabelStyle: (ObjectConstructor | StringConstructor)[];
+nestedLabelClass: (ObjectConstructor | StringConstructor)[];
+nestedErrorStyle: (ObjectConstructor | StringConstructor)[];
+nestedErrorClass: (ObjectConstructor | StringConstructor)[];
 }>, () => VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
@@ -4803,6 +4821,12 @@ labelStyle: (ObjectConstructor | StringConstructor)[];
 labelClass: (ObjectConstructor | StringConstructor)[];
 errorStyle: (ObjectConstructor | StringConstructor)[];
 errorClass: (ObjectConstructor | StringConstructor)[];
+nestedContentStyle: (ObjectConstructor | StringConstructor)[];
+nestedContentClass: (ObjectConstructor | StringConstructor)[];
+nestedLabelStyle: (ObjectConstructor | StringConstructor)[];
+nestedLabelClass: (ObjectConstructor | StringConstructor)[];
+nestedErrorStyle: (ObjectConstructor | StringConstructor)[];
+nestedErrorClass: (ObjectConstructor | StringConstructor)[];
 }>> & Readonly<{}>, {
 tag: string;
 border: boolean;
@@ -11916,6 +11940,12 @@ declare const props_3: {
     labelClass: (ObjectConstructor | StringConstructor)[];
     errorStyle: (ObjectConstructor | StringConstructor)[];
     errorClass: (ObjectConstructor | StringConstructor)[];
+    nestedContentStyle: (ObjectConstructor | StringConstructor)[];
+    nestedContentClass: (ObjectConstructor | StringConstructor)[];
+    nestedLabelStyle: (ObjectConstructor | StringConstructor)[];
+    nestedLabelClass: (ObjectConstructor | StringConstructor)[];
+    nestedErrorStyle: (ObjectConstructor | StringConstructor)[];
+    nestedErrorClass: (ObjectConstructor | StringConstructor)[];
 };
 
 declare type Props_4 = ExtractPropTypes<typeof props_4>;

package/dist/index.iife.js

@@ -19899,7 +19899,14 @@ var VcComponents = (function (exports, vue) {
 	  labelStyle: [Object, String],
 	  labelClass: [Object, String],
 	  errorStyle: [Object, String],
-	  errorClass: [Object, String]
+	  errorClass: [Object, String],
+	  // 给nestFormItem统一注入
+	  nestedContentStyle: [Object, String],
+	  nestedContentClass: [Object, String],
+	  nestedLabelStyle: [Object, String],
+	  nestedLabelClass: [Object, String],
+	  nestedErrorStyle: [Object, String],
+	  nestedErrorClass: [Object, String]
 	};
 
 	const useForm = (expose, options = {}) => {
@@ -20251,31 +20258,32 @@ var VcComponents = (function (exports, vue) {
 	  });
 	  const classes = vue.computed(() => {
 	    return {
-	      "is-require": isRequired.value && props.asterisk,
+	      "is-required": isRequired.value && props.asterisk,
 	      "is-error": validateState.value === "error",
 	      "is-validating": validateState.value === "validating",
 	      "is-inline": form.props.inline,
-	      "is-nest": isNest.value,
+	      "is-nested": isNested.value,
 	      "is-alone": !props.showMessage,
 	      // 用于单独去除form-item的默认margin_bottom
 	      [`is-${labelPosition.value}`]: true
 	    };
 	  });
-	  const isNest = vue.computed(() => {
+	  const isNested = vue.computed(() => {
 	    return !!formItem.change;
 	  });
-	  const isNestLast = vue.ref(false);
+	  const isNestedLast = vue.ref(false);
 	  const hasLabel = vue.computed(() => {
 	    return !!props.label || slots.label;
 	  });
 	  const labelStyle = vue.computed(() => {
-	    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+	    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNested.value ? 0 : form.props.labelWidth;
 	    return [
 	      {
 	        width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
 	        textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
 	      },
 	      form.props.labelStyle,
+	      isNested.value && form.props.nestedLabelStyle,
 	      props.labelStyle
 	    ];
 	  });
@@ -20283,24 +20291,25 @@ var VcComponents = (function (exports, vue) {
 	    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
 	    return [
 	      {
-	        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-	        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+	        marginLeft: labelPosition.value === "top" || !hasLabel.value && isNested.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+	        marginBottom: isNested.value && !isNestedLast.value ? `20px` : 0
 	      },
 	      form.props.contentStyle,
+	      isNested.value && form.props.nestedContentStyle,
 	      props.contentStyle
 	    ];
 	  });
 	  const errorStyle = vue.computed(() => {
-	    return [form.props.errorStyle, props.errorStyle];
+	    return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props.errorStyle];
 	  });
 	  const labelClass = vue.computed(() => {
-	    return [form.props.labelClass, props.labelClass];
+	    return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props.labelClass];
 	  });
 	  const contentClass = vue.computed(() => {
-	    return [form.props.contentClass, props.contentClass];
+	    return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props.contentClass];
 	  });
 	  const errorClass = vue.computed(() => {
-	    return [form.props.errorClass, props.errorClass];
+	    return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props.errorClass];
 	  });
 	  const isStyleless = vue.computed(() => {
 	    return props.styleless || form.props.styleless;
@@ -20437,7 +20446,7 @@ var VcComponents = (function (exports, vue) {
 	  vue.watch(
 	    () => formItem.fields?.length,
 	    async (v) => {
-	      if (!isNest.value || !v) return isNestLast.value = false;
+	      if (!isNested.value || !v) return isNestedLast.value = false;
 	      const fields$ = [...vue.toRaw(formItem.fields)];
 	      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
 	      const sortFields = fields$.toSorted((a, b) => {
@@ -20448,7 +20457,7 @@ var VcComponents = (function (exports, vue) {
 	        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
 	        return aPosition.left - bPosition.left;
 	      });
-	      isNestLast.value = sortFields[sortFields.length - 1] === instance;
+	      isNestedLast.value = sortFields[sortFields.length - 1] === instance;
 	    }
 	  );
 	  expose({
@@ -20457,9 +20466,9 @@ var VcComponents = (function (exports, vue) {
 	    getPosition
 	  });
 	  return {
-	    isNest,
+	    isNested,
 	    isStyleless,
-	    isNestLast,
+	    isNestedLast,
 	    validateMessage,
 	    classes,
 	    labelStyle,
@@ -20486,7 +20495,7 @@ var VcComponents = (function (exports, vue) {
 	    const it = useFormItem(expose);
 	    const {
 	      isStyleless,
-	      isNest,
+	      isNested,
 	      classes,
 	      labelStyle,
 	      contentStyle,
@@ -20497,39 +20506,35 @@ var VcComponents = (function (exports, vue) {
 	      showError,
 	      validateMessage
 	    } = it;
-	    const {
-	      label,
-	      labelFor
-	    } = props;
 	    const errorColorClass = 'vc-form-item__error';
 	    return () => {
 	      if (isStyleless.value) return [slots.default?.(), slots.error?.({
 	        show: showError.value,
-	        nest: isNest.value,
+	        nested: isNested.value,
 	        message: validateMessage.value,
 	        class: [errorColorClass, ...errorClass.value],
 	        style: errorStyle.value
 	      })];
 	      return vue.createVNode("div", {
 	        "class": ['vc-form-item', classes.value]
-	      }, [(label || slots.label) && vue.createVNode("div", {
+	      }, [(props.label || slots.label) && vue.createVNode("div", {
 	        "style": labelStyle.value,
 	        "class": ['vc-form-item__label', ...labelClass.value],
-	        "for": labelFor
-	      }, [vue.createVNode("label", null, [label || slots.label?.()])]), vue.createVNode("div", {
+	        "for": props.labelFor
+	      }, [vue.createVNode("label", null, [props.label || slots.label?.()])]), vue.createVNode("div", {
 	        "class": "vc-form-item__wrapper"
 	      }, [vue.createVNode("div", {
 	        "class": ['vc-form-item__content', ...contentClass.value],
 	        "style": contentStyle.value
 	      }, [slots.default?.(), slots.error ? slots.error({
 	        show: showError.value,
-	        nest: isNest.value,
+	        nest: isNested.value,
 	        message: validateMessage.value,
 	        class: [errorColorClass, ...errorClass.value],
 	        style: errorStyle.value
 	      }) : vue.createVNode(TransitionFade, null, {
 	        default: () => [vue.withDirectives(vue.createVNode("div", {
-	          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass, ...errorClass.value],
+	          "class": ['vc-form-item__tip', isNested.value ? 'is-nested' : '', errorColorClass, ...errorClass.value],
 	          "style": [errorStyle.value]
 	        }, [validateMessage.value]), [[vue.vShow, showError.value]])]
 	      })])])]);
@@ -20600,41 +20605,36 @@ var VcComponents = (function (exports, vue) {
 	      labelClass,
 	      contentClass,
 	      errorClass,
-	      isNest,
+	      isNested,
 	      showError,
 	      validateMessage
 	    } = it;
-	    const {
-	      label,
-	      labelFor,
-	      showMessage
-	    } = props;
 	    const errorColorClass = 'vcm-form-item__error';
 	    return () => {
 	      if (isStyleless.value) return [slots.default?.(), slots.error?.({
 	        show: showError.value,
-	        nest: isNest.value,
+	        nested: isNested.value,
 	        message: validateMessage.value,
 	        class: [errorColorClass, ...errorClass.value],
 	        style: errorStyle.value
 	      })];
 	      return vue.createVNode("div", {
 	        "style": {
-	          paddingLeft: `${isNest.value ? 0 : props.indent}px`
+	          paddingLeft: `${isNested.value ? 0 : props.indent}px`
 	        },
 	        "class": [classes.value, 'vcm-form-item']
 	      }, [vue.createVNode("div", {
 	        "class": "vcm-form-item__wrapper"
 	      }, [(props.label || slots.label) && vue.createVNode("label", {
-	        "for": labelFor,
+	        "for": props.labelFor,
 	        "style": labelStyle.value,
 	        "class": ['vcm-form-item__label', ...labelClass.value]
-	      }, [label || slots.label?.()]), vue.createVNode("div", {
+	      }, [props.label || slots.label?.()]), vue.createVNode("div", {
 	        "style": contentStyle.value,
 	        "class": ['vcm-form-item__content', ...contentClass.value]
-	      }, [slots.default?.(), showMessage && showError.value && vue.createVNode("div", {
+	      }, [slots.default?.(), props.showMessage && showError.value && vue.createVNode("div", {
 	        "class": [{
-	          'is-nest': isNest.value
+	          'is-nested': isNested.value
 	        }, errorColorClass, ...errorClass.value],
 	        "style": errorStyle.value
 	      }, [slots.error ? slots.error({