bkui-vue 0.0.1-beta.46 → 0.0.1-beta.47

package/dist/index.esm.js

@@ -93,7 +93,7 @@ const BKLAYERD_INDEX_EFAULT_VALUE = {
 };
 class BKZIndexManager {
   constructor() {
-    this.storageLayerIndexValue = {};
+    __publicField(this, "storageLayerIndexValue", {});
     this.copyDefaultValue();
   }
   getNextIndex(type) {
@@ -204,20 +204,20 @@ function isShadowRoot(node) {
 }
 function applyStyles(_ref) {
   var state = _ref.state;
-  Object.keys(state.elements).forEach(function(name) {
-    var style = state.styles[name] || {};
-    var attributes = state.attributes[name] || {};
-    var element = state.elements[name];
+  Object.keys(state.elements).forEach(function(name2) {
+    var style = state.styles[name2] || {};
+    var attributes = state.attributes[name2] || {};
+    var element = state.elements[name2];
     if (!isHTMLElement(element) || !getNodeName(element)) {
       return;
     }
     Object.assign(element.style, style);
-    Object.keys(attributes).forEach(function(name2) {
-      var value = attributes[name2];
+    Object.keys(attributes).forEach(function(name3) {
+      var value = attributes[name3];
       if (value === false) {
-        element.removeAttribute(name2);
+        element.removeAttribute(name3);
       } else {
-        element.setAttribute(name2, value === true ? "" : value);
+        element.setAttribute(name3, value === true ? "" : value);
       }
     });
   });
@@ -242,10 +242,10 @@ function effect$2(_ref2) {
     Object.assign(state.elements.arrow.style, initialStyles.arrow);
   }
   return function() {
-    Object.keys(state.elements).forEach(function(name) {
-      var element = state.elements[name];
-      var attributes = state.attributes[name] || {};
-      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]);
+    Object.keys(state.elements).forEach(function(name2) {
+      var element = state.elements[name2];
+      var attributes = state.attributes[name2] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name2) ? state.styles[name2] : initialStyles[name2]);
       var style = styleProperties.reduce(function(style2, property) {
         style2[property] = "";
         return style2;
@@ -424,7 +424,7 @@ var toPaddingObject = function toPaddingObject2(padding, state) {
 };
 function arrow(_ref) {
   var _state$modifiersData$;
-  var state = _ref.state, name = _ref.name, options = _ref.options;
+  var state = _ref.state, name2 = _ref.name, options = _ref.options;
   var arrowElement = state.elements.arrow;
   var popperOffsets2 = state.modifiersData.popperOffsets;
   var basePlacement = getBasePlacement(state.placement);
@@ -448,7 +448,7 @@ function arrow(_ref) {
   var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
   var offset2 = within(min2, center, max2);
   var axisProp = axis;
-  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset2, _state$modifiersData$.centerOffset = offset2 - center, _state$modifiersData$);
+  state.modifiersData[name2] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset2, _state$modifiersData$.centerOffset = offset2 - center, _state$modifiersData$);
 }
 function effect$1(_ref2) {
   var state = _ref2.state, options = _ref2.options;
@@ -904,8 +904,8 @@ function getExpandedFallbackPlacements(placement) {
   return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
 }
 function flip(_ref) {
-  var state = _ref.state, options = _ref.options, name = _ref.name;
-  if (state.modifiersData[name]._skip) {
+  var state = _ref.state, options = _ref.options, name2 = _ref.name;
+  if (state.modifiersData[name2]._skip) {
     return;
   }
   var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, specifiedFallbackPlacements = options.fallbackPlacements, padding = options.padding, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, _options$flipVariatio = options.flipVariations, flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, allowedAutoPlacements = options.allowedAutoPlacements;
@@ -985,7 +985,7 @@ function flip(_ref) {
     }
   }
   if (state.placement !== firstFittingPlacement) {
-    state.modifiersData[name]._skip = true;
+    state.modifiersData[name2]._skip = true;
     state.placement = firstFittingPlacement;
     state.reset = true;
   }
@@ -1020,7 +1020,7 @@ function isAnySideFullyClipped(overflow) {
   });
 }
 function hide(_ref) {
-  var state = _ref.state, name = _ref.name;
+  var state = _ref.state, name2 = _ref.name;
   var referenceRect = state.rects.reference;
   var popperRect = state.rects.popper;
   var preventedOffsets = state.modifiersData.preventOverflow;
@@ -1034,7 +1034,7 @@ function hide(_ref) {
   var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
   var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
   var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
-  state.modifiersData[name] = {
+  state.modifiersData[name2] = {
     referenceClippingOffsets,
     popperEscapeOffsets,
     isReferenceHidden,
@@ -1069,7 +1069,7 @@ function distanceAndSkiddingToXY(placement, rects, offset2) {
   };
 }
 function offset(_ref2) {
-  var state = _ref2.state, options = _ref2.options, name = _ref2.name;
+  var state = _ref2.state, options = _ref2.options, name2 = _ref2.name;
   var _options$offset = options.offset, offset2 = _options$offset === void 0 ? [0, 0] : _options$offset;
   var data2 = placements$1.reduce(function(acc, placement) {
     acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset2);
@@ -1080,7 +1080,7 @@ function offset(_ref2) {
     state.modifiersData.popperOffsets.x += x2;
     state.modifiersData.popperOffsets.y += y2;
   }
-  state.modifiersData[name] = data2;
+  state.modifiersData[name2] = data2;
 }
 var offset$1 = {
   name: "offset",
@@ -1090,8 +1090,8 @@ var offset$1 = {
   fn: offset
 };
 function popperOffsets(_ref) {
-  var state = _ref.state, name = _ref.name;
-  state.modifiersData[name] = computeOffsets({
+  var state = _ref.state, name2 = _ref.name;
+  state.modifiersData[name2] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
     strategy: "absolute",
@@ -1109,7 +1109,7 @@ function getAltAxis(axis) {
   return axis === "x" ? "y" : "x";
 }
 function preventOverflow(_ref) {
-  var state = _ref.state, options = _ref.options, name = _ref.name;
+  var state = _ref.state, options = _ref.options, name2 = _ref.name;
   var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, padding = options.padding, _options$tether = options.tether, tether = _options$tether === void 0 ? true : _options$tether, _options$tetherOffset = options.tetherOffset, tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
   var overflow = detectOverflow(state, {
     boundary,
@@ -1190,7 +1190,7 @@ function preventOverflow(_ref) {
     popperOffsets2[altAxis] = _preventedOffset;
     data2[altAxis] = _preventedOffset - _offset;
   }
-  state.modifiersData[name] = data2;
+  state.modifiersData[name2] = data2;
 }
 var preventOverflow$1 = {
   name: "preventOverflow",
@@ -1391,12 +1391,12 @@ function popperGenerator(generatorOptions) {
             index = -1;
             continue;
           }
-          var _state$orderedModifie = state.orderedModifiers[index], fn2 = _state$orderedModifie.fn, _state$orderedModifie2 = _state$orderedModifie.options, _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, name = _state$orderedModifie.name;
+          var _state$orderedModifie = state.orderedModifiers[index], fn2 = _state$orderedModifie.fn, _state$orderedModifie2 = _state$orderedModifie.options, _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, name2 = _state$orderedModifie.name;
           if (typeof fn2 === "function") {
             state = fn2({
               state,
               options: _options,
-              name,
+              name: name2,
               instance
             }) || state;
           }
@@ -1423,11 +1423,11 @@ function popperGenerator(generatorOptions) {
     });
     function runModifierEffects() {
       state.orderedModifiers.forEach(function(_ref3) {
-        var name = _ref3.name, _ref3$options = _ref3.options, options2 = _ref3$options === void 0 ? {} : _ref3$options, effect2 = _ref3.effect;
+        var name2 = _ref3.name, _ref3$options = _ref3.options, options2 = _ref3$options === void 0 ? {} : _ref3$options, effect2 = _ref3.effect;
         if (typeof effect2 === "function") {
           var cleanupFn = effect2({
             state,
-            name,
+            name: name2,
             instance,
             options: options2
           });
@@ -1529,21 +1529,22 @@ function isElement$1(obj) {
 }
 class BKPopover {
   constructor(reference2, popperRefer, options) {
+    __publicField(this, "isShow", false);
+    __publicField(this, "trigger");
+    __publicField(this, "instance");
+    __publicField(this, "reference");
+    __publicField(this, "referenceTarget");
+    __publicField(this, "popperRefer");
+    __publicField(this, "instanceOptions");
+    __publicField(this, "delay", 50);
+    __publicField(this, "isInnerPopper", false);
+    __publicField(this, "disabled", false);
+    __publicField(this, "afterShow", null);
+    __publicField(this, "afterHidden", null);
+    __publicField(this, "appendTo", "parent");
+    __publicField(this, "container", null);
+    __publicField(this, "fixOnBoundary", false);
     var _a, _b;
-    this.isShow = false;
-    this.trigger = void 0;
-    this.instance = void 0;
-    this.reference = void 0;
-    this.referenceTarget = void 0;
-    this.popperRefer = void 0;
-    this.delay = 50;
-    this.isInnerPopper = false;
-    this.disabled = false;
-    this.afterShow = null;
-    this.afterHidden = null;
-    this.appendTo = "parent";
-    this.container = null;
-    this.fixOnBoundary = false;
     this.instanceOptions = this.initDefaultOptions(options);
     this.reference = this.resolveInputSelectorToHtmlElement(reference2);
     this.popperRefer = this.resolveInputSelectorToHtmlElement(popperRefer);
@@ -1773,13 +1774,15 @@ const random = (n2, str = lowerStr) => {
 };
 class BkMaskManager {
   constructor(config) {
-    this.multiInstance = false;
-    this.uniqueMaskAttrTag = "";
-    this.parentNode = document.body;
-    this.activeInstance = void 0;
-    this.zIndexStore = /* @__PURE__ */ new Map();
-    this.lastUUID = null;
-    this.maskStyle = {
+    __publicField(this, "mask");
+    __publicField(this, "backupMask");
+    __publicField(this, "multiInstance", false);
+    __publicField(this, "uniqueMaskAttrTag", "");
+    __publicField(this, "parentNode", document.body);
+    __publicField(this, "activeInstance");
+    __publicField(this, "zIndexStore", /* @__PURE__ */ new Map());
+    __publicField(this, "lastUUID", null);
+    __publicField(this, "maskStyle", {
       position: "absolute",
       left: 0,
       top: 0,
@@ -1787,7 +1790,7 @@ class BkMaskManager {
       right: 0,
       display: "none",
       "background-color": "rgba(0,0,0,.6)"
-    };
+    });
     const { multiInstance = false, maskAttrTag = "auto", parentNode = document.body, maskStyle = {} } = config || {};
     this.activeInstance = void 0;
     this.multiInstance = multiInstance;
@@ -1890,6 +1893,8 @@ class BkMaskManager {
 const bKMaskManager = new BkMaskManager({});
 class BKPopIndexManager {
   constructor() {
+    __publicField(this, "popInstanceList");
+    __publicField(this, "uuidAttrName");
     this.popInstanceList = [];
     this.uuidAttrName = "data-bk-pop-uuid";
   }
@@ -2282,13 +2287,13 @@ class PropTypes extends propTypesNS {
       default: "top"
     });
   }
-  static commonType(types = [], name = "commonType") {
-    return j(name.replace(/^\S/, (s2) => s2.toUpperCase()), {
+  static commonType(types = [], name2 = "commonType") {
+    return j(name2.replace(/^\S/, (s2) => s2.toUpperCase()), {
       type: String,
       validator: (val) => {
         const valid = types.includes(val);
         if (!valid) {
-          console.error(`invalid ${name}, ${val}, the ${name} must be one of \u3010${types.join(" | ")}\u3011`);
+          console.error(`invalid ${name2}, ${val}, the ${name2} must be one of \u3010${types.join(" | ")}\u3011`);
         }
         return valid;
       },
@@ -2352,7 +2357,7 @@ function generate(node, key, rootAttrs) {
 const bkIcon = (props, context) => {
   const _a = __spreadValues(__spreadValues({}, context.attrs), props), {
     data: data2,
-    name,
+    name: name2,
     width,
     height,
     fill
@@ -2364,7 +2369,7 @@ const bkIcon = (props, context) => {
     "fill"
   ]);
   const rootAttrs = `width: ${width}; height: ${height}; fill: ${fill}`;
-  return createVNode("span", restProps, [generate(data2, name, rootAttrs)]);
+  return createVNode("span", restProps, [generate(data2, name2, rootAttrs)]);
 };
 bkIcon.inheritAttrs = false;
 bkIcon.displayName = "bkIcon";
@@ -8678,10 +8683,10 @@ const checkboxGroupKey = Symbol("CheckboxGroup");
 function useFocus$2() {
   const isFocus = ref(false);
   const blur = () => {
-    isFocus.value = true;
+    isFocus.value = false;
   };
   const focus = () => {
-    isFocus.value = false;
+    isFocus.value = true;
   };
   return [
     isFocus,
@@ -8699,50 +8704,44 @@ const useCheckbox = () => {
   } = currentInstance;
   const checkboxGroup = inject(checkboxGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(checkboxGroup);
-  const state = reactive({
-    isLocalChecked: props.checked
-  });
-  const isChecked = computed(() => {
-    if (isGroup) {
-      return checkboxGroup.state.localValue.includes(props.label);
-    }
-    if (props.modelValue !== void 0) {
-      if (props.modelValue === props.label || props.modelValue === props.trueLabel) {
-        return true;
-      }
-    }
-    return state.isLocalChecked;
-  });
-  state.isLocalChecked = isChecked.value;
-  const value = computed(() => {
-    if (isGroup) {
-      return isChecked.value ? props.label : "";
-    }
-    if (isChecked.value) {
-      return props.trueLabel !== "" ? props.trueLabel : props.label;
-    }
-    return props.falseLabel !== "" ? props.falseLabel : "";
-  });
+  const isChecked = ref(props.checked);
   const isDisabled = computed(() => {
     if (isGroup && checkboxGroup.props.disabled) {
       return true;
     }
     return props.disabled;
   });
+  if (isGroup) {
+    watch(() => checkboxGroup.props.modelValue, (modelValue) => {
+      isChecked.value = modelValue.includes(props.label);
+    });
+  } else {
+    watch(() => props.modelValue, (modelValue) => {
+      if (modelValue === "") {
+        return;
+      }
+      isChecked.value = modelValue === props.trueLabel;
+    }, {
+      immediate: true
+    });
+  }
+  const setChecked = (value = true) => {
+    isChecked.value = value;
+  };
   const handleChange = (event) => {
     if (isDisabled.value) {
       return;
     }
     const $targetInput = event.target;
-    state.isLocalChecked = $targetInput.checked;
-    emit("change", value.value);
-    emit("update:modelValue", value.value);
+    isChecked.value = $targetInput.checked;
+    const nextValue = isChecked.value ? props.trueLabel : props.falseLabel;
+    emit("change", nextValue);
+    emit("update:modelValue", nextValue);
     if (isGroup) {
-      checkboxGroup.handleChange(state.isLocalChecked, props.label);
+      checkboxGroup.handleChange();
     }
     nextTick(() => {
       if ($targetInput.checked !== isChecked.value) {
-        state.isLocalChecked = isChecked.value;
         $targetInput.checked = isChecked.value;
       }
     });
@@ -8758,16 +8757,16 @@ const useCheckbox = () => {
     }
   });
   return {
-    value,
     isChecked,
     isDisabled,
+    setChecked,
     handleChange
   };
 };
 const checkboxProps = {
-  modelValue: PropTypes.oneOfType([String, Number, Boolean]).def(void 0),
-  label: PropTypes.oneOfType([String, Number, Boolean]).isRequired,
-  trueLabel: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  modelValue: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  label: PropTypes.oneOfType([String, Number, Boolean]),
+  trueLabel: PropTypes.oneOfType([String, Number, Boolean]).def(true),
   falseLabel: PropTypes.oneOfType([String, Number, Boolean]).def(""),
   disabled: PropTypes.bool.def(false),
   checked: PropTypes.bool.def(false),
@@ -8785,16 +8784,16 @@ var Component$o = defineComponent({
       focus: handleFocus
     }] = useFocus$2();
     const {
-      value,
       isChecked,
       isDisabled,
+      setChecked,
       handleChange
     } = useCheckbox();
     return {
-      currentValue: value,
       isFocus,
       isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
       handleChange
@@ -8803,9 +8802,10 @@ var Component$o = defineComponent({
   render() {
     const checkboxClass = classes({
       "bk-checkbox": true,
-      "is-focus": this.isFocus,
+      "is-focused": this.isFocus,
       "is-checked": this.isChecked,
-      "is-disabled": this.isDisabled
+      "is-disabled": this.isDisabled,
+      "is-indeterminated": this.indeterminate
     });
     return createVNode("label", {
       "class": checkboxClass
@@ -8815,11 +8815,10 @@ var Component$o = defineComponent({
       "role": "checkbox",
       "type": "checkbox",
       "class": "bk-checkbox-original",
-      "value": this.currentValue,
       "disabled": this.isDisabled,
       "checked": this.isChecked,
       "onChange": this.handleChange
-    }, null)]), createVNode("span", {
+    }, null)]), this.$slots.default ? this.$slots.default() : createVNode("span", {
       "class": "bk-checkbox-label"
     }, [this.label])]);
   }
@@ -8834,12 +8833,6 @@ var CheckboxGroup = defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, context) {
-    const state = reactive({
-      localValue: props.modelValue ? [...props.modelValue] : []
-    });
-    watch(() => props.modelValue, (modelValue = []) => {
-      state.localValue = [...modelValue];
-    });
     const checkboxInstanceList = [];
     const register = (checkboxContext) => {
       checkboxInstanceList.push(checkboxContext);
@@ -8850,45 +8843,38 @@ var CheckboxGroup = defineComponent({
         checkboxInstanceList.splice(index, 1);
       }
     };
-    const handleChange = (nextChecked, value) => {
-      let nextValue = [...state.localValue];
-      if (nextChecked) {
-        nextValue = [...state.localValue, value];
-      } else {
-        nextValue = state.localValue.reduce((result, item) => {
-          if (item !== value) {
-            result.push(item);
-          }
-          return result;
-        }, []);
-      }
-      if (!props.modelValue) {
-        state.localValue = nextValue;
-      }
+    const handleChange = () => {
+      const nextValue = checkboxInstanceList.reduce((result, checkboxInstance) => {
+        if (checkboxInstance.isChecked) {
+          result.push(checkboxInstance.label);
+        }
+        return result;
+      }, []);
       context.emit("update:modelValue", nextValue);
       context.emit("change", nextValue);
     };
     provide(checkboxGroupKey, {
       name: "CheckboxGroup",
       props,
-      state,
       register,
       unregister,
       handleChange
     });
     onMounted(() => {
-      checkboxInstanceList.forEach((checkboxContext) => {
-        if (checkboxContext.isChecked || checkboxContext.checked) {
-          state.localValue.push(checkboxContext.label);
+      const modelValue = props.modelValue || [];
+      checkboxInstanceList.forEach((checkboxInstance) => {
+        if (modelValue.includes(checkboxInstance.label)) {
+          checkboxInstance.setChecked(true);
         }
       });
     });
     return {};
   },
   render() {
+    var _a;
     return createVNode("div", {
       "class": "bk-checkbox-group"
-    }, [this.$slots.default()]);
+    }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
 const BkCheckbox = withInstallProps(Component$o, { Group: CheckboxGroup });
@@ -8928,7 +8914,7 @@ var Component$n = defineComponent({
       }
       if (props.activeName !== null && props.activeName !== void 0 && props.activeName !== "") {
         const activeNames = resolvePropsActiveValue(props.activeName);
-        return activeNames.map((name) => collapseData.value.findIndex((item) => item[props.idFiled] === name));
+        return activeNames.map((name2) => collapseData.value.findIndex((item) => item[props.idFiled] === name2));
       }
       return resolvePropsActiveValue((_a = props.activeIndex) != null ? _a : 0);
     });
@@ -9478,8 +9464,8 @@ var Component$i = defineComponent({
       const newVal = handleNumber(props.step, false);
       ctx.emit(EventEnum["update:modelValue"], newVal);
     }
-    function getCls(name) {
-      return `${inputClsPrefix.value}--${name}`;
+    function getCls(name2) {
+      return `${inputClsPrefix.value}--${name2}`;
     }
     function handleVisibleChange() {
       pwdVisible.value = !pwdVisible.value;
@@ -9961,70 +9947,88 @@ var Component$f = defineComponent({
 const BkProgress = withInstall(Component$f);
 const radioGroupKey = Symbol("RadioGroup");
 function useFocus$1() {
-  const isFocus = ref(false);
+  const isFocused = ref(false);
   const blur = () => {
-    isFocus.value = false;
+    isFocused.value = false;
   };
   const focus = () => {
-    isFocus.value = true;
+    isFocused.value = true;
   };
   return [
-    isFocus,
+    isFocused,
     {
       blur,
       focus
     }
   ];
 }
-function useRadio() {
+const useRadio = () => {
+  const currentInstance = getCurrentInstance();
   const {
     props,
     emit
-  } = getCurrentInstance();
+  } = currentInstance;
   const radioGroup = inject(radioGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(radioGroup);
-  const state = reactive({
-    isLocalChecked: props.checked
-  });
-  const isCheck = computed(() => {
-    if (isGroup) {
-      return radioGroup.state.localValue === props.label;
-    }
-    if (props.modelValue !== "") {
-      return props.modelValue === props.label;
-    }
-    return state.isLocalChecked;
-  });
-  state.isLocalChecked = isCheck.value;
+  const isChecked = ref(props.checked);
   const isDisabled = computed(() => {
     if (isGroup && radioGroup.props.disabled) {
       return true;
     }
     return props.disabled;
   });
-  const name = computed(() => {
-    if (isGroup && radioGroup.props.name) {
-      return radioGroup.props.name;
-    }
-    return props.name;
-  });
-  const handlerChange = () => {
+  if (isGroup) {
+    watch(() => radioGroup.props.modelValue, (modelValue) => {
+      isChecked.value = modelValue === props.label;
+    });
+  } else {
+    watch(() => props.modelValue, (modelValue) => {
+      if (modelValue === "") {
+        return;
+      }
+      isChecked.value = modelValue === props.label;
+    }, {
+      immediate: true
+    });
+  }
+  const setChecked = (value = true) => {
+    isChecked.value = value;
+  };
+  const handleChange = (event) => {
     if (isDisabled.value) {
       return;
     }
-    emit("change", props.label);
-    emit("update:modelValue", props.label);
+    const $targetInput = event.target;
+    isChecked.value = $targetInput.checked;
+    const nextValue = isChecked.value ? props.label : "";
+    emit("change", nextValue);
+    emit("update:modelValue", nextValue);
     if (isGroup) {
-      radioGroup.handleChange(props.label);
+      radioGroup.handleChange(currentInstance.proxy);
     }
+    nextTick(() => {
+      if ($targetInput.checked !== isChecked.value) {
+        $targetInput.checked = isChecked.value;
+      }
+    });
   };
+  onMounted(() => {
+    if (isGroup) {
+      radioGroup.register(currentInstance.proxy);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (isGroup) {
+      radioGroup.unregister(currentInstance.proxy);
+    }
+  });
   return {
-    name,
-    isCheck,
+    isChecked,
     isDisabled,
-    handlerChange
+    setChecked,
+    handleChange
   };
-}
+};
 const radioProps = {
   name: PropTypes.string.def(""),
   label: PropTypes.oneOfType([String, Number, Boolean]).isRequired,
@@ -10037,32 +10041,32 @@ var Component$e = defineComponent({
   props: radioProps,
   emits: ["change", "update:modelValue"],
   setup() {
-    const [isFocus, {
+    const [isFocused, {
       blur: handleBlur,
       focus: handleFocus
     }] = useFocus$1();
     const {
-      name,
-      isCheck,
+      isChecked,
       isDisabled,
-      handlerChange
+      setChecked,
+      handleChange
     } = useRadio();
     return {
-      isFocus,
-      realName: name,
-      isCheck,
+      isFocused,
+      isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
-      handlerChange
+      handleChange
     };
   },
   render() {
     const radioClass = classes({
       "bk-radio": true,
-      "is-focusd": this.isFocus,
+      "is-focused": this.isFocused,
       "is-disabled": this.isDisabled,
-      "is-checked": this.isCheck
+      "is-checked": this.isChecked
     });
     return createVNode("label", {
       "class": radioClass,
@@ -10071,13 +10075,12 @@ var Component$e = defineComponent({
       "class": "bk-radio-input",
       "type": "radio",
       "tabindex": "0",
-      "name": this.realName,
       "value": this.label,
-      "checked": this.isCheck,
+      "checked": this.isChecked,
       "disabled": this.isDisabled,
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
-      "onChange": this.handlerChange
+      "onChange": this.handleChange
     }, null), createVNode("span", {
       "class": "bk-radio-text"
     }, [this.$slots.default ? this.$slots.default() : this.label])]);
@@ -10096,32 +10099,33 @@ var RadioButton = defineComponent({
   props: radioButtonProps,
   emits: ["change", "update:modelValue"],
   setup() {
-    const [isFocus, {
+    const [isFocused, {
       blur: handleBlur,
       focus: handleFocus
     }] = useFocus$1();
     const {
-      name,
-      isCheck,
+      isChecked,
       isDisabled,
-      handlerChange
+      setChecked,
+      handleChange
     } = useRadio();
     return {
-      isFocus,
+      isFocused,
       realName: name,
-      isCheck,
+      isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
-      handlerChange
+      handleChange
     };
   },
   render() {
     const radioClass = classes({
       "bk-radio-button": true,
-      "is-focusd": this.isFocus,
+      "is-focused": this.isFocused,
       "is-disabled": this.isDisabled,
-      "is-checked": this.isCheck
+      "is-checked": this.isChecked
     });
     return createVNode("label", {
       "class": radioClass,
@@ -10130,13 +10134,12 @@ var RadioButton = defineComponent({
       "class": "bk-radio-button-input",
       "type": "radio",
       "tabindex": "0",
-      "name": this.realName,
       "value": this.label,
-      "checked": this.isCheck,
+      "checked": this.isChecked,
       "disabled": this.isDisabled,
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
-      "onChange": this.handlerChange
+      "onChange": this.handleChange
     }, null), createVNode("div", {
       "class": "bk-radio-button-text"
     }, [this.$slots.default ? this.$slots.default() : this.label])]);
@@ -10152,21 +10155,40 @@ var RadioGroup = defineComponent({
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, context) {
-    const state = reactive({
-      localValue: props.modelValue
-    });
-    watch(() => props.modelValue, () => {
-      state.localValue = props.modelValue;
-    });
-    const handleChange = (value) => {
-      context.emit("update:modelValue", value);
-      context.emit("change", value);
+    const radioInstanceList = [];
+    const register = (radioContext) => {
+      radioInstanceList.push(radioContext);
+    };
+    const unregister = (radioContext) => {
+      const index = radioInstanceList.indexOf(radioContext);
+      if (index > -1) {
+        radioInstanceList.splice(index, 1);
+      }
+    };
+    const handleChange = (checkedRadioInstance) => {
+      const nextValue = checkedRadioInstance.label;
+      radioInstanceList.forEach((radioInstance) => {
+        if (radioInstance !== checkedRadioInstance) {
+          radioInstance.setChecked(false);
+        }
+      });
+      context.emit("update:modelValue", nextValue);
+      context.emit("change", nextValue);
     };
     provide(radioGroupKey, {
       props,
-      state,
+      register,
+      unregister,
       handleChange
     });
+    onMounted(() => {
+      if (props.modelValue === "") {
+        return;
+      }
+      radioInstanceList.forEach((radioInstance) => {
+        radioInstance.setChecked(radioInstance.label === props.modelValue);
+      });
+    });
     return {};
   },
   render() {
@@ -12853,7 +12875,6 @@ var SortType = /* @__PURE__ */ ((SortType2) => {
   SortType2["DESC"] = "desc";
   return SortType2;
 })(SortType || {});
-var headSort = "";
 var HeadSort = defineComponent({
   name: "HeadSort",
   props: {
@@ -13112,7 +13133,6 @@ class TableRender {
     })]);
   }
 }
-var headFilter = "";
 var Component$4 = defineComponent({
   name: "Table",
   props: tableProps,
@@ -14253,11 +14273,11 @@ const tabNavEventProps = {
   },
   tabChange: {
     type: Function,
-    default: (name) => name
+    default: (name2) => name2
   },
   tabRemove: {
     type: Function,
-    default: (name) => name
+    default: (name2) => name2
   },
   tabSort: {
     type: Function,
@@ -14325,7 +14345,7 @@ var TabNav = defineComponent({
           return null;
         }
         const {
-          name,
+          name: name2,
           label,
           closable,
           visible,
@@ -14335,7 +14355,7 @@ var TabNav = defineComponent({
         if (!visible) {
           return false;
         }
-        if (props.active === name) {
+        if (props.active === name2) {
           hasFindActive = true;
         }
         const renderLabel = (label2) => {
@@ -14354,7 +14374,7 @@ var TabNav = defineComponent({
           return label2;
         };
         list.push({
-          name,
+          name: name2,
           closable,
           visible,
           disabled,
@@ -14410,8 +14430,8 @@ var TabNav = defineComponent({
       }
       this.tabSort(this.dragStartIndex, index, sortType);
     },
-    handleTabChange(name) {
-      this.tabChange(name);
+    handleTabChange(name2) {
+      this.tabChange(name2);
     },
     handleTabRemove(index, panel) {
       this.tabRemove(index, panel);
@@ -14435,7 +14455,7 @@ var TabNav = defineComponent({
         return null;
       }
       const {
-        name,
+        name: name2,
         disabled,
         tabLabel
       } = item;
@@ -14444,15 +14464,15 @@ var TabNav = defineComponent({
         if (disabled) {
           classNames.push("bk-tab-header--disabled");
         }
-        if (active === name) {
+        if (active === name2) {
           classNames.push("bk-tab-header--active");
         }
         return classNames.join(" ");
       };
       const getValue = (curentValue, parentValue) => curentValue || parentValue;
       return createVNode("div", {
-        "key": name,
-        "onClick": () => this.handleTabChange(name),
+        "key": name2,
+        "onClick": () => this.handleTabChange(name2),
         "draggable": getValue(item.sortable, sortable),
         "onDragstart": (e) => dragstart(index, e),
         "onDragenter": (e) => {
@@ -14599,10 +14619,10 @@ var Tab = defineComponent({
         e
       });
     },
-    tabChange(name) {
-      this.$emit("change", name);
-      this.$emit("tab-change", name);
-      this.$emit("update:active", name);
+    tabChange(name2) {
+      this.$emit("change", name2);
+      this.$emit("tab-change", name2);
+      this.$emit("update:active", name2);
     },
     tabRemove(index, panel) {
       this.$emit("remove", index, panel);
@@ -20250,6 +20270,76 @@ var Component = defineComponent({
   }
 });
 const BkTree = withInstall(Component);
+const isCustomComponent = (node) => node.__v_isVNode;
+var ComposeFormItem = defineComponent({
+  name: "ComposeFormItem",
+  props: {
+    headBackgroundColor: {
+      type: String,
+      default: "#FAFBFD"
+    },
+    tailBackgroundColor: String
+  },
+  render() {
+    if (!this.$slots.default) {
+      return null;
+    }
+    const childrenArr = this.$slots.default();
+    console.log("from render = ", childrenArr);
+    if (childrenArr.length > 1) {
+      const childrenLength = childrenArr.length;
+      let startIndex = 0;
+      let headChildren = null;
+      while (startIndex < childrenLength) {
+        if (isCustomComponent(childrenArr[startIndex])) {
+          headChildren = childrenArr[startIndex];
+          break;
+        }
+        startIndex = startIndex + 1;
+      }
+      let tailIndex = childrenLength - 1;
+      let tailChildren = null;
+      while (tailIndex >= 0 && tailIndex > startIndex) {
+        if (isCustomComponent(childrenArr[tailIndex])) {
+          tailChildren = childrenArr[tailIndex];
+          break;
+        }
+        tailIndex = tailIndex - 1;
+      }
+      if (headChildren && tailChildren) {
+        if (!headChildren.props) {
+          headChildren.props = {};
+        }
+        let headChildClass = "bk-compose-form-item-head";
+        if (headChildren.props.class) {
+          headChildClass += ` ${headChildren.props.class}`;
+        }
+        if (this.headBackgroundColor) {
+          headChildren.props.style = Object.assign(headChildren.props.style || {}, {
+            "background-color": this.headBackgroundColor
+          });
+        }
+        headChildren.props.class = headChildClass;
+        if (!tailChildren.props) {
+          tailChildren.props = {};
+        }
+        let tailChildStaticClass = "bk-compose-form-item-tail";
+        if (tailChildren.props.class) {
+          tailChildStaticClass += ` ${tailChildren.props.class}`;
+        }
+        if (this.tailBackgroundColor) {
+          tailChildren.props.style = Object.assign(tailChildren.props.style || {}, {
+            "background-color": this.tailBackgroundColor
+          });
+        }
+        tailChildren.props.class = tailChildStaticClass;
+      }
+    }
+    return h$1("div", {
+      class: "bk-compose-form-item"
+    }, childrenArr);
+  }
+});
 const formKey$1 = Symbol("form");
 const getFormKey = () => formKey$1;
 const formKey = getFormKey();
@@ -20544,7 +20634,7 @@ var FormItem = defineComponent({
     }, [this.$slots.error ? this.$slots.error(this.errorMessage) : this.errorMessage])])]);
   }
 });
-const BkForm = withInstallProps(Form, { FormItem });
+const BkForm = withInstallProps(Form, { FormItem, ComposeFormItem });
 var Dropdown = defineComponent({
   name: "BkDropdown",
   props: {