@deot/vc 1.0.48 → 1.0.49

package/dist/index.d.ts

@@ -3609,6 +3609,12 @@ export declare const Components: {
     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<    {
@@ -3651,6 +3657,12 @@ export declare const Components: {
     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;
@@ -3707,6 +3719,12 @@ export declare const Components: {
     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<    {
@@ -3757,6 +3775,12 @@ export declare const Components: {
     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;

package/dist/index.iife.js

@@ -19929,7 +19929,14 @@ var Vc = (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 = {}) => {
     const instance = vue.getCurrentInstance();
@@ -20145,31 +20152,32 @@ var Vc = (function (exports, vue) {
     });
     const classes = vue.computed(() => {
       return {
-        "is-require": isRequired.value && props2.asterisk,
+        "is-required": isRequired.value && props2.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": !props2.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 !!props2.label || slots.label;
     });
     const labelStyle = vue.computed(() => {
-      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.labelStyle
       ];
     });
@@ -20177,24 +20185,25 @@ var Vc = (function (exports, vue) {
       const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.contentStyle
       ];
     });
     const errorStyle = vue.computed(() => {
-      return [form.props.errorStyle, props2.errorStyle];
+      return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props2.errorStyle];
     });
     const labelClass = vue.computed(() => {
-      return [form.props.labelClass, props2.labelClass];
+      return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props2.labelClass];
     });
     const contentClass = vue.computed(() => {
-      return [form.props.contentClass, props2.contentClass];
+      return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props2.contentClass];
     });
     const errorClass = vue.computed(() => {
-      return [form.props.errorClass, props2.errorClass];
+      return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props2.errorClass];
     });
     const isStyleless = vue.computed(() => {
       return props2.styleless || form.props.styleless;
@@ -20331,7 +20340,7 @@ var Vc = (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) => {
@@ -20342,7 +20351,7 @@ var Vc = (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({
@@ -20351,9 +20360,9 @@ var Vc = (function (exports, vue) {
       getPosition
     });
     return {
-      isNest,
+      isNested,
       isStyleless,
-      isNestLast,
+      isNestedLast,
       validateMessage,
       classes,
       labelStyle,
@@ -20377,7 +20386,7 @@ var Vc = (function (exports, vue) {
       const it = useFormItem(expose);
       const {
         isStyleless,
-        isNest,
+        isNested,
         classes,
         labelStyle,
         contentStyle,
@@ -20388,39 +20397,35 @@ var Vc = (function (exports, vue) {
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor
-      } = props2;
       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", {
+        }, [(props2.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": props2.labelFor
+        }, [vue.createVNode("label", null, [props2.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]])]
         })])])]);
@@ -20485,41 +20490,36 @@ var Vc = (function (exports, vue) {
         labelClass,
         contentClass,
         errorClass,
-        isNest,
+        isNested,
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor,
-        showMessage
-      } = props2;
       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 : props2.indent}px`
+            paddingLeft: `${isNested.value ? 0 : props2.indent}px`
           },
           "class": [classes.value, "vcm-form-item"]
         }, [vue.createVNode("div", {
           "class": "vcm-form-item__wrapper"
         }, [(props2.label || slots.label) && vue.createVNode("label", {
-          "for": labelFor,
+          "for": props2.labelFor,
           "style": labelStyle.value,
           "class": ["vcm-form-item__label", ...labelClass.value]
-        }, [label || slots.label?.()]), vue.createVNode("div", {
+        }, [props2.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?.(), props2.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.umd.cjs

@@ -19932,7 +19932,14 @@
     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 = {}) => {
     const instance = vue.getCurrentInstance();
@@ -20148,31 +20155,32 @@
     });
     const classes = vue.computed(() => {
       return {
-        "is-require": isRequired.value && props2.asterisk,
+        "is-required": isRequired.value && props2.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": !props2.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 !!props2.label || slots.label;
     });
     const labelStyle = vue.computed(() => {
-      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.labelStyle
       ];
     });
@@ -20180,24 +20188,25 @@
       const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.contentStyle
       ];
     });
     const errorStyle = vue.computed(() => {
-      return [form.props.errorStyle, props2.errorStyle];
+      return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props2.errorStyle];
     });
     const labelClass = vue.computed(() => {
-      return [form.props.labelClass, props2.labelClass];
+      return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props2.labelClass];
     });
     const contentClass = vue.computed(() => {
-      return [form.props.contentClass, props2.contentClass];
+      return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props2.contentClass];
     });
     const errorClass = vue.computed(() => {
-      return [form.props.errorClass, props2.errorClass];
+      return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props2.errorClass];
     });
     const isStyleless = vue.computed(() => {
       return props2.styleless || form.props.styleless;
@@ -20334,7 +20343,7 @@
     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) => {
@@ -20345,7 +20354,7 @@
           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({
@@ -20354,9 +20363,9 @@
       getPosition
     });
     return {
-      isNest,
+      isNested,
       isStyleless,
-      isNestLast,
+      isNestedLast,
       validateMessage,
       classes,
       labelStyle,
@@ -20380,7 +20389,7 @@
       const it = useFormItem(expose);
       const {
         isStyleless,
-        isNest,
+        isNested,
         classes,
         labelStyle,
         contentStyle,
@@ -20391,39 +20400,35 @@
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor
-      } = props2;
       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", {
+        }, [(props2.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": props2.labelFor
+        }, [vue.createVNode("label", null, [props2.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]])]
         })])])]);
@@ -20488,41 +20493,36 @@
         labelClass,
         contentClass,
         errorClass,
-        isNest,
+        isNested,
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor,
-        showMessage
-      } = props2;
       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 : props2.indent}px`
+            paddingLeft: `${isNested.value ? 0 : props2.indent}px`
           },
           "class": [classes.value, "vcm-form-item"]
         }, [vue.createVNode("div", {
           "class": "vcm-form-item__wrapper"
         }, [(props2.label || slots.label) && vue.createVNode("label", {
-          "for": labelFor,
+          "for": props2.labelFor,
           "style": labelStyle.value,
           "class": ["vcm-form-item__label", ...labelClass.value]
-        }, [label || slots.label?.()]), vue.createVNode("div", {
+        }, [props2.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?.(), props2.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.48",
-    "@deot/vc-hooks": "^1.0.48",
-    "@deot/vc-shared": "^1.0.48"
+    "@deot/vc-components": "^1.0.49",
+    "@deot/vc-hooks": "^1.0.49",
+    "@deot/vc-shared": "^1.0.49"
   },
   "peerDependencies": {
     "vue": "*"