bkui-vue 0.0.1-beta.331 → 0.0.1-beta.332

package/dist/index.esm.js

@@ -7941,7 +7941,7 @@ class PropTypes extends propTypesNS {
 const formKey = Symbol("form");
 const formItemKey = Symbol("formItem");
 const useForm = () => inject(formKey);
-const useFormItem = () => inject(formItemKey, EMPTY_OBJ);
+const useFormItem = () => inject(formItemKey, void 0);
 const on$2 = (() => {
   if (document.addEventListener) {
     return (element, event, handler) => {
@@ -9797,6 +9797,14 @@ var Component$w = defineComponent({
       "is-disabled": this.isDisabled,
       "is-indeterminated": this.indeterminate
     });
+    const renderLabel = () => {
+      if (!this.label && !this.$slots.default) {
+        return null;
+      }
+      return createVNode("span", {
+        "class": "bk-checkbox-label"
+      }, [this.$slots.default ? this.$slots.default() : this.label]);
+    };
     return createVNode("label", {
       "class": checkboxClass
     }, [createVNode("span", {
@@ -9808,9 +9816,7 @@ var Component$w = defineComponent({
       "disabled": this.isDisabled,
       "checked": this.isChecked,
       "onChange": this.handleChange
-    }, null)]), this.$slots.default ? this.$slots.default() : createVNode("span", {
-      "class": "bk-checkbox-label"
-    }, [this.label])]);
+    }, null)]), renderLabel()]);
   }
 });
 const checkboxGroupProps = {
@@ -13964,6 +13970,14 @@ var Component$o = defineComponent({
       "is-disabled": this.isDisabled,
       "is-checked": this.isChecked
     });
+    const renderLabel = () => {
+      if (!this.label && !this.$slots.default) {
+        return null;
+      }
+      return createVNode("span", {
+        "class": "bk-radio-label"
+      }, [this.$slots.default ? this.$slots.default() : this.label]);
+    };
     return createVNode("label", {
       "class": radioClass,
       "tabindex": "0"
@@ -13977,9 +13991,7 @@ var Component$o = defineComponent({
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
       "onChange": this.handleChange
-    }, null), createVNode("span", {
-      "class": "bk-radio-text"
-    }, [this.$slots.default ? this.$slots.default() : this.label])]);
+    }, null), renderLabel()]);
   }
 });
 const radioButtonProps = {
@@ -14022,6 +14034,14 @@ var RadioButton = defineComponent({
       "is-disabled": this.isDisabled,
       "is-checked": this.isChecked
     });
+    const renderLabel = () => {
+      if (!this.label && !this.$slots.default) {
+        return null;
+      }
+      return createVNode("span", {
+        "class": "bk-radio-label"
+      }, [this.$slots.default ? this.$slots.default() : this.label]);
+    };
     return createVNode("label", {
       "class": radioClass,
       "tabindex": "0"
@@ -14035,9 +14055,7 @@ var RadioButton = defineComponent({
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
       "onChange": this.handleChange
-    }, null), createVNode("div", {
-      "class": "bk-radio-button-text"
-    }, [this.$slots.default ? this.$slots.default() : this.label])]);
+    }, null), renderLabel()]);
   }
 });
 const radioGroupProps = {
@@ -15258,7 +15276,7 @@ var Component$j = defineComponent({
       var _a;
       handleSetSelectedData();
       if (props2.withValidate) {
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
       }
     }, {
       deep: true
@@ -16457,7 +16475,8 @@ var usePagination = (props2, indexData) => {
     count: 0,
     limit: 10,
     current: 1,
-    align: "left"
+    align: "right",
+    layout: ["total", "limit", "list"]
   });
   pagination2 = resolvePaginationOption(props2.pagination, pagination2);
   const localPagination = ref(null);
@@ -28758,8 +28777,14 @@ var Form = defineComponent({
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
   }
 });
+const getRuleMessage = (rule) => {
+  if (typeof rule.message === "function") {
+    return rule.message();
+  }
+  return rule.message;
+};
 var defaultValidator = {
-  required: (value) => value !== "" && value !== void 0 && value !== null,
+  required: (value) => !_$1.isEmpty(value),
   min: (value, min2) => value >= min2,
   max: (value, max2) => max2 >= value,
   email: (value) => /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value),
@@ -28768,7 +28793,7 @@ var defaultValidator = {
 };
 const formItemProps = {
   label: PropTypes.string,
-  labelWidth: PropTypes.oneOfType([Number, String]),
+  labelWidth: PropTypes.oneOfType([Number, String]).def(150),
   labelPosition: PropTypes.oneOf(["left", "center", "right"]),
   property: PropTypes.string.def(""),
   required: PropTypes.bool.def(false),
@@ -28801,21 +28826,21 @@ const getRulesFromProps = (props2) => {
   if (Number(props2.max) > -1) {
     rules.push({
       validator: (value) => defaultValidator.max(value, props2.max),
-      message: `${props2.label}\u6700\u5927\u503C${props2.max}`,
+      message: `${props2.label}\u6700\u5927\u503C ${props2.max}`,
       trigger: "blur"
     });
   }
   if (Number(props2.min) > -1) {
     rules.push({
       validator: (value) => defaultValidator.min(value, props2.min),
-      message: `${props2.label}\u6700\u5C0F\u503C${props2.min}`,
+      message: `${props2.label}\u6700\u5C0F\u503C ${props2.min}`,
       trigger: "blur"
     });
   }
   if (Number(props2.maxlength) > -1) {
     rules.push({
       validator: (value) => defaultValidator.maxlength(value, props2.maxlength),
-      message: `${props2.label}\u6700\u5927\u957F\u5EA6${props2.maxlength}`,
+      message: `${props2.label}\u6700\u5927\u957F\u5EA6 ${props2.maxlength}`,
       trigger: "blur"
     });
   }
@@ -28843,8 +28868,8 @@ const mergeRules = (configRules, propsRules) => {
     }
     result.push({
       validator: rulevalidator,
-      message: rule.message,
-      trigger: rule.trigger
+      message: rule.message || "\u9A8C\u8BC1\u9519\u8BEF",
+      trigger: rule.trigger || "blur"
     });
     return result;
   }, []);
@@ -28868,37 +28893,51 @@ var FormItem = defineComponent({
     bkTooltips: tooltips
   },
   props: formItemProps,
-  setup(props2) {
+  setup(props2, context) {
+    const form2 = useForm();
+    const isForm = Boolean(form2);
+    const parentFormItem = useFormItem();
+    const isNested = Boolean(parentFormItem);
     const currentInstance = getCurrentInstance();
     const state = reactive({
       isError: false,
       errorMessage: ""
     });
-    const form2 = useForm();
-    const isForm = Boolean(form2);
     const isFormTypeVertical = computed(() => {
       if (!isForm) {
         return false;
       }
       return form2.props.formType === "vertical";
     });
+    const isShowLabel = computed(() => {
+      if (props2.label || context.slots.label) {
+        return true;
+      }
+      return false;
+    });
     const labelStyles = computed(() => {
       const styles = {
         width: "",
         paddingRight: "",
         textAlign: ""
       };
+      const labelPosition = props2.labelPosition || isForm && form2.props.labelPosition;
+      if (labelPosition) {
+        styles["text-align"] = labelPosition;
+      }
+      if (form2.props.formType === "vertical" || !props2.label && isNested) {
+        return styles;
+      }
       const labelWidth = isValid(props2.labelWidth) ? props2.labelWidth : isForm && form2.props.labelWidth;
       if (isValid(labelWidth)) {
         styles.width = `${labelWidth}px`;
         styles.paddingRight = labelWidth ? "" : "0px";
       }
-      const labelPosition = props2.labelPosition || isForm && form2.props.labelPosition;
-      if (labelPosition) {
-        styles["text-align"] = labelPosition;
-      }
       return styles;
     });
+    const contentStyles = computed(() => ({
+      ["margin-left"]: labelStyles.value.width
+    }));
     const validate = (trigger) => {
       if (!props2.property || isForm && !form2.props.model) {
         return Promise.resolve(true);
@@ -28926,21 +28965,22 @@ var FormItem = defineComponent({
           const rule = rules[stepIndex];
           return Promise.resolve().then(() => {
             const result = rule.validator(value);
+            const errorMessage = getRuleMessage(rule);
             if (typeof result !== "boolean" && typeof result.then === "function") {
               return result.then((data2) => {
                 if (data2 === false) {
-                  return Promise.reject(rule.message);
+                  return Promise.reject(errorMessage);
                 }
               }).then(() => doValidate(), () => {
                 state.isError = true;
-                state.errorMessage = rule.message;
-                return Promise.reject(rule.message);
+                state.errorMessage = errorMessage;
+                return Promise.reject(errorMessage);
               });
             }
             if (!result) {
               state.isError = true;
-              state.errorMessage = rule.message;
-              return Promise.reject(rule.message);
+              state.errorMessage = errorMessage;
+              return Promise.reject(errorMessage);
             }
             return doValidate();
           });
@@ -28967,7 +29007,9 @@ var FormItem = defineComponent({
       }
     });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
+      isShowLabel,
       labelStyles,
+      contentStyles,
       isFormTypeVertical,
       validate,
       clearValidate
@@ -29008,11 +29050,12 @@ var FormItem = defineComponent({
     };
     return createVNode("div", {
       "class": itemClassees
-    }, [createVNode("div", {
+    }, [this.isShowLabel && createVNode("div", {
       "class": "bk-form-label",
       "style": this.labelStyles
     }, [renderLabel(), this.isFormTypeVertical && ((_b = (_a = this.$slots).labelAppend) == null ? void 0 : _b.call(_a))]), createVNode("div", {
-      "class": "bk-form-content"
+      "class": "bk-form-content",
+      "style": this.contentStyles
     }, [(_d = (_c = this.$slots).default) == null ? void 0 : _d.call(_c), renderError()])]);
   }
 });