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

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-button-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);
@@ -21929,6 +21948,7 @@ var Confirm = defineComponent({
     };
   },
   render() {
+    var _a, _b, _c;
     return createVNode("div", {
       "class": "bk-picker-confirm",
       "ref": "elRef",
@@ -21940,7 +21960,9 @@ var Confirm = defineComponent({
       "onClick": this.handleToggleTime
     }, {
       default: () => [this.labels.time]
-    }) : "", this.clearable ? createVNode("a", {
+    }) : "", (_c = (_b = (_a = this.$slots).confirm) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode("div", {
+      "class": "bk-picker-confirm-action"
+    }, [this.clearable ? createVNode("a", {
       "href": "javascript: void(0);",
       "onClick": this.handleClear,
       "onKeydown": this.handleClear
@@ -21949,7 +21971,7 @@ var Confirm = defineComponent({
       "class": "confirm",
       "onClick": this.handleSuccess,
       "onKeydown_enter": this.handleSuccess
-    }, [this.labels.ok])]);
+    }, [this.labels.ok])])]);
   }
 });
 var oneDay = 1e3 * 60 * 60 * 24;
@@ -24119,15 +24141,6 @@ const formatDate = (val, type, multiple, format2) => {
 };
 const datePickerKey = Symbol("date-picker");
 const timePickerKey = Symbol("time-picker");
-function findChildComponents(context, componentName) {
-  return (context.$children || []).reduce((components2, child) => {
-    if (child.$options.name === componentName) {
-      components2.push(child);
-    }
-    const foundChilds = findChildComponents(child, componentName);
-    return components2.concat(foundChilds);
-  }, []);
-}
 function iconBtnCls(direction, type = "") {
   return [
     "bk-picker-panel-icon-btn",
@@ -25713,6 +25726,25 @@ var DateRangePanel = defineComponent({
       };
       setPanelDates(props2.startDate || state.dates[0] || new Date());
     });
+    watch(() => state.currentView, (v2) => {
+      const leftMonth = state.leftPanelDate.getMonth();
+      const rightMonth = state.rightPanelDate.getMonth();
+      const isSameYear = state.leftPanelDate.getFullYear() === state.rightPanelDate.getFullYear();
+      if (v2 === "date" && isSameYear && leftMonth === rightMonth) {
+        changePanelDate("right", "Month", 1);
+      }
+      if (v2 === "month" && isSameYear) {
+        changePanelDate("right", "FullYear", 1);
+      }
+      if (v2 === "year" && isSameYear) {
+        changePanelDate("right", "FullYear", 10);
+      }
+      if (state.currentView === "time") {
+        nextTick(() => {
+          timePickerRef.value.updateScroll();
+        });
+      }
+    });
     const isTime = computed(() => state.currentView === "time");
     const leftDatePanelLabel = computed(() => panelLabelConfig("left"));
     const rightDatePanelLabel = computed(() => panelLabelConfig("right"));
@@ -25757,6 +25789,7 @@ var DateRangePanel = defineComponent({
       emit("pick-click");
     }
     const timeDisabled = computed(() => !(state.dates[0] && state.dates[1]));
+    const timePickerRef = ref(null);
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       isTime,
       hasShortcuts,
@@ -25783,7 +25816,8 @@ var DateRangePanel = defineComponent({
       handleToggleTime,
       handlePickSuccess,
       handlePickClear,
-      handlePickClick
+      handlePickClick,
+      timePickerRef
     });
   },
   render() {
@@ -25960,7 +25994,7 @@ var DateRangePanel = defineComponent({
       "onPick-toggle-time": this.handleToggleTime,
       "onPick-clear": this.handlePickClear,
       "onPick-success": this.handlePickSuccess
-    }, null) : ""]), shortcuts]);
+    }, this.$slots) : ""]), shortcuts]);
   }
 });
 var Component$a = defineComponent({
@@ -26053,6 +26087,7 @@ var Component$a = defineComponent({
     const hasHeader = computed(() => !!slots.header);
     const hasFooter = computed(() => !!slots.footer);
     const hasShortcuts = computed(() => !!slots.shortcuts);
+    const hasConfirm = computed(() => !!slots.confirm);
     const fontSizeCls = computed(() => {
       let cls = "";
       if (props2.fontSize === "medium") {
@@ -26322,6 +26357,10 @@ var Component$a = defineComponent({
       emit("shortcut-change", state.shortcut, shortcutIndex);
     };
     const triggerRef = ref(null);
+    const handleToggleTime = () => {
+      var _a, _b;
+      (_b = (_a = pickerPanelRef.value).handleToggleTime) == null ? void 0 : _b.call(_a);
+    };
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       panel,
       publicStringValue,
@@ -26332,6 +26371,7 @@ var Component$a = defineComponent({
       hasHeader,
       hasFooter,
       hasShortcuts,
+      hasConfirm,
       fontSizeCls,
       longWidthCls,
       localReadonly,
@@ -26351,7 +26391,8 @@ var Component$a = defineComponent({
       handleInputChange,
       handleClear,
       onPick,
-      onPickSuccess
+      onPickSuccess,
+      handleToggleTime
     });
   },
   render() {
@@ -26429,6 +26470,10 @@ var Component$a = defineComponent({
         })) || null;
       }
     } : {};
+    const confirmSlot = this.hasConfirm ? {
+      confirm: this.$slots.confirm
+    } : {};
+    const slots = __spreadValues(__spreadValues({}, shortcutsSlot), confirmSlot);
     return withDirectives(createVNode("div", {
       "class": ["bk-date-picker", this.type === "datetimerange" ? "long" : "", this.longWidthCls]
     }, [createVNode("div", {
@@ -26472,7 +26517,7 @@ var Component$a = defineComponent({
               "onPick-clear": this.handleClear,
               "onPick-success": this.onPickSuccess,
               "onSelection-mode-change": this.onSelectionModeChange
-            }, shortcutsSlot) : createVNode(DatePanel, {
+            }, slots) : createVNode(DatePanel, {
               "ref": "pickerPanelRef",
               "clearable": this.clearable,
               "showTime": this.type === "datetime" || this.type === "datetimerange",
@@ -26490,7 +26535,7 @@ var Component$a = defineComponent({
               "onPick-clear": this.handleClear,
               "onPick-success": this.onPickSuccess,
               "onSelection-mode-change": this.onSelectionModeChange
-            }, shortcutsSlot), this.hasFooter ? createVNode("div", {
+            }, slots), this.hasFooter ? createVNode("div", {
               "class": ["bk-date-picker-footer-wrapper", this.footerSlotCls]
             }, [(_f = (_e = (_d = this.$slots).footer) == null ? void 0 : _e.call(_d)) != null ? _f : null]) : null];
           }
@@ -26631,8 +26676,8 @@ var TimePicker = defineComponent({
     watch(() => state.visible, (visible) => {
       if (visible) {
         nextTick(() => {
-          const spinners = findChildComponents(proxy, "TimeSpinner");
-          spinners.forEach((instance) => instance.updateScroll());
+          var _a, _b;
+          (_b = (_a = proxy.pickerPanelRef) == null ? void 0 : _a.timeSpinnerRef) == null ? void 0 : _b.updateScroll();
         });
       }
     });
@@ -28758,8 +28803,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 +28819,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 +28852,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 +28894,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 +28919,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);
@@ -28929,18 +28994,18 @@ var FormItem = defineComponent({
             if (typeof result !== "boolean" && typeof result.then === "function") {
               return result.then((data2) => {
                 if (data2 === false) {
-                  return Promise.reject(rule.message);
+                  return Promise.reject(getRuleMessage(rule));
                 }
               }).then(() => doValidate(), () => {
                 state.isError = true;
-                state.errorMessage = rule.message;
-                return Promise.reject(rule.message);
+                state.errorMessage = getRuleMessage(rule);
+                return Promise.reject(state.errorMessage);
               });
             }
             if (!result) {
               state.isError = true;
-              state.errorMessage = rule.message;
-              return Promise.reject(rule.message);
+              state.errorMessage = getRuleMessage(rule);
+              return Promise.reject(state.errorMessage);
             }
             return doValidate();
           });
@@ -28967,7 +29032,9 @@ var FormItem = defineComponent({
       }
     });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
+      isShowLabel,
       labelStyles,
+      contentStyles,
       isFormTypeVertical,
       validate,
       clearValidate
@@ -29008,11 +29075,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()])]);
   }
 });