bkui-vue 0.0.1-beta.411 → 0.0.1-beta.413

package/dist/index.esm.js

@@ -55,6 +55,7 @@ var loading = "";
 var modal = "";
 var progress = "";
 var radio = "";
+var radioButton = "";
 var rate = "";
 var star$1 = "";
 var swiper = "";
@@ -8075,34 +8076,6 @@ const formKey = Symbol("form");
 const formItemKey = Symbol("formItem");
 const useForm = () => inject(formKey);
 const useFormItem = () => inject(formItemKey, void 0);
-const on$2 = (() => {
-  if (document.addEventListener) {
-    return (element, event, handler) => {
-      if (element && event && handler) {
-        element.addEventListener(event, handler, true);
-      }
-    };
-  }
-  return (element, event, handler) => {
-    if (element && event && handler) {
-      element.attachEvent(`on${event}`, handler);
-    }
-  };
-})();
-const off$2 = (() => {
-  if (document.removeEventListener) {
-    return (element, event, handler) => {
-      if (element && event) {
-        element.removeEventListener(event, handler, true);
-      }
-    };
-  }
-  return (element, event, handler) => {
-    if (element && event) {
-      element.detachEvent(`on${event}`, handler);
-    }
-  };
-})();
 function scrollTop(el, from = 0, to, duration = 500, endCallback) {
   const difference = Math.abs(from - to);
   const step = Math.ceil(difference / duration * 50);
@@ -13842,7 +13815,7 @@ var RadioButton = defineComponent({
   },
   render() {
     const radioClass = classes({
-      "bk-radio-button": true,
+      "bk-radio-item": true,
       "is-focused": this.isFocused,
       "is-disabled": this.isDisabled,
       "is-checked": this.isChecked
@@ -13852,14 +13825,14 @@ var RadioButton = defineComponent({
         return null;
       }
       return createVNode("div", {
-        "class": "bk-radio-button-label"
+        "class": "bk-radio-item-label"
       }, [this.$slots.default ? this.$slots.default() : this.label]);
     };
     return createVNode("label", {
       "class": radioClass,
       "tabindex": "0"
     }, [createVNode("input", {
-      "class": "bk-radio-button-input",
+      "class": "bk-radio-item-input",
       "type": "radio",
       "tabindex": "0",
       "value": this.label,
@@ -13875,7 +13848,8 @@ const radioGroupProps = {
   name: PropTypes.string.def(""),
   modelValue: PropTypes.oneOfType([String, Number, Boolean]),
   disabled: PropTypes.bool,
-  withValidate: PropTypes.bool.def(true)
+  withValidate: PropTypes.bool.def(true),
+  type: PropTypes.oneOf(["button", "capsule"]).def("button")
 };
 var RadioGroup = defineComponent({
   name: "RadioGroup",
@@ -13928,7 +13902,7 @@ var RadioGroup = defineComponent({
   render() {
     var _a;
     return createVNode("div", {
-      "class": "bk-radio-group"
+      "class": ["bk-radio-group", `bk-radio-${this.type}`]
     }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
@@ -15520,7 +15494,7 @@ var SelectTagInput = defineComponent({
     modelValue: PropTypes.any,
     collapseTags: PropTypes.bool.def(false)
   },
-  emits: ["update:modelValue", "remove", "enter"],
+  emits: ["update:modelValue", "remove", "enter", "keydown"],
   setup(props2, {
     emit
   }) {
@@ -15561,6 +15535,7 @@ var SelectTagInput = defineComponent({
           break;
         }
       }
+      emit("keydown", e.target.value, e);
     };
     const getTagDOM = (index2) => {
       const tags = [...proxy.$el.querySelectorAll(".bk-tag")];
@@ -15829,7 +15804,8 @@ var Component$j = defineComponent({
       isShow: isPopoverShow.value,
       reference: selectTagInputRef.value,
       offset: 6,
-      popoverDelay: 0
+      popoverDelay: 0,
+      renderType: RenderType.AUTO
     }, popoverOptions.value));
     const {
       register,
@@ -15879,7 +15855,7 @@ var Component$j = defineComponent({
         setTimeout(() => {
           focusInput();
           initActiveOptionValue();
-        }, 0);
+        }, 10);
       }
     });
     const initActiveOptionValue = () => {
@@ -16059,8 +16035,8 @@ var Component$j = defineComponent({
       }
     };
     const handleKeydown = (e) => {
-      var _a, _b, _c, _d;
-      if (!((_a = triggerRef.value) == null ? void 0 : _a.contains(e.target)) && !((_b = contentRef.value) == null ? void 0 : _b.contains(e.target)) && !customContent.value)
+      var _a, _b;
+      if (!isPopoverShow.value)
         return;
       const availableOptions = options.value.filter((option) => !option.disabled && option.visible);
       const index2 = availableOptions.findIndex((option) => option.value === activeOptionValue.value);
@@ -16070,13 +16046,13 @@ var Component$j = defineComponent({
         case "ArrowDown": {
           e.preventDefault();
           const nextIndex = index2 >= availableOptions.length - 1 ? 0 : index2 + 1;
-          activeOptionValue.value = (_c = availableOptions[nextIndex]) == null ? void 0 : _c.value;
+          activeOptionValue.value = (_a = availableOptions[nextIndex]) == null ? void 0 : _a.value;
           break;
         }
         case "ArrowUp": {
           e.preventDefault();
           const preIndex = index2 === 0 ? availableOptions.length - 1 : index2 - 1;
-          activeOptionValue.value = (_d = availableOptions[preIndex]) == null ? void 0 : _d.value;
+          activeOptionValue.value = (_b = availableOptions[preIndex]) == null ? void 0 : _b.value;
           break;
         }
         case "Backspace": {
@@ -16087,12 +16063,8 @@ var Component$j = defineComponent({
           break;
         }
         case "Enter": {
-          if (!isPopoverShow.value) {
-            isPopoverShow.value = true;
-          } else {
-            const option = optionsMap.value.get(activeOptionValue.value);
-            handleOptionSelected(option);
-          }
+          const option = optionsMap.value.get(activeOptionValue.value);
+          handleOptionSelected(option);
           break;
         }
       }
@@ -16133,10 +16105,6 @@ var Component$j = defineComponent({
         showOnInit.value && showPopover();
         autoFocus.value && focusInput();
       });
-      on$2(document, "keydown", handleKeydown);
-    });
-    onBeforeMount(() => {
-      off$2(document, "keydown", handleKeydown);
     });
     return {
       selected,
@@ -16235,7 +16203,8 @@ var Component$j = defineComponent({
           "disabled": this.isDisabled,
           "onRemove": this.handleDeleteTag,
           "collapseTags": this.isCollapseTags,
-          "onEnter": this.handleInputEnter
+          "onEnter": this.handleInputEnter,
+          "onKeydown": (_v, e) => this.handleKeydown(e)
         }, {
           prefix: () => {
             var _a, _b;
@@ -16259,7 +16228,8 @@ var Component$j = defineComponent({
         "size": this.size,
         "withValidate": false,
         "onInput": this.handleInputChange,
-        "onEnter": this.handleInputEnter
+        "onEnter": this.handleInputEnter,
+        "onKeydown": (_v, e) => this.handleKeydown(e)
       }, {
         prefix: () => {
           var _a, _b;
@@ -21701,6 +21671,7 @@ var TabTypeEnum = /* @__PURE__ */ ((TabTypeEnum2) => {
   TabTypeEnum2["BORDER_CARD"] = "border-card";
   TabTypeEnum2["UNBORDER_CARD"] = "unborder-card";
   TabTypeEnum2["CARD_TAB"] = "card-tab";
+  TabTypeEnum2["CARD_GRID"] = "card-grid";
   return TabTypeEnum2;
 })(TabTypeEnum || {});
 var PositionEnum = /* @__PURE__ */ ((PositionEnum2) => {
@@ -21995,12 +21966,12 @@ var TabNav = defineComponent({
           drop(index2, sortType);
         },
         "class": getNavItemClass()
-      }, [createVNode("div", null, [tabLabel]), getValue(item.closable, closable) && createVNode(close$1, {
-        "class": resolveClassName("tab-header-item-close"),
+      }, [createVNode("div", null, [tabLabel]), getValue(item.closable, closable) ? createVNode("span", {
+        "class": resolveClassName("tab-header--close"),
         "onClick": () => this.handleTabRemove(index2, item)
-      }, null)]);
+      }, [createVNode(close$1, null, null)]) : ""]);
     });
-    const renderSlot2 = () => {
+    const renderOperation = () => {
       var _a, _b;
       const list = [];
       if (typeof this.$slots.add === "function") {
@@ -22033,19 +22004,18 @@ var TabNav = defineComponent({
       }
       return "";
     };
+    const setting = typeof this.$slots.setting === "function" ? createVNode("div", {
+      "class": resolveClassName("tab-header-setting")
+    }, [this.$slots.setting()]) : null;
+    const operations = renderOperation();
     return createVNode("div", {
       "style": {
         lineHeight: `${labelHeight}px`
       },
       "class": resolveClassName("tab-header")
     }, [createVNode("div", {
-      "class": resolveClassName("tab-header-nav")
-    }, [renderNavs(), renderActiveBar(), createVNode("div", {
-      "style": this.activeBarStyle,
-      "class": resolveClassName("tab-header-active-bar")
-    }, null)]), renderSlot2(), typeof this.$slots.setting === "function" && createVNode("div", {
-      "class": resolveClassName("tab-header-setting")
-    }, [this.$slots.setting()])]);
+      "class": [resolveClassName("tab-header-nav"), operations || setting ? "tab-header-auto" : ""]
+    }, [renderActiveBar(), renderNavs()]), operations, setting]);
   }
 });
 var Tab = defineComponent({
@@ -28884,14 +28854,14 @@ const treeProps = {
   ]).def(void 0),
   emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
   draggable: PropTypes.bool.def(false),
-  disableDrag: PropTypes.func.def(null),
-  disableDrop: PropTypes.func.def(null),
+  disableDrag: PropTypes.func,
+  disableDrop: PropTypes.func,
   dragSort: PropTypes.bool.def(false),
   selectable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]).def(true),
   disabledFolderSelectable: PropTypes.bool.def(false),
   showCheckbox: PropTypes.bool.def(false),
   showNodeTypeIcon: PropTypes.bool.def(true),
-  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).def(null),
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
   autoCheckChildren: PropTypes.bool.def(true),
   autoOpenParentNode: PropTypes.bool.def(true),
   expandAll: PropTypes.bool.def(false),
@@ -39238,7 +39208,7 @@ var SearchSelectInput = defineComponent({
       e && setMenuList();
     }
     function handleInputChange(event) {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       clearInput();
       let text = event.target.innerText;
       if (/(\r|\n)/gm.test(text) || /\s{2}/gm.test(text)) {
@@ -39250,13 +39220,20 @@ var SearchSelectInput = defineComponent({
         debounceSetMenuList();
       } else if (!keyword.value && text.length < (((_c = (_b = usingItem.value) == null ? void 0 : _b.inputInnerText) == null ? void 0 : _c.length) || 1)) {
         const outerText = text.replace("\xA0", " ").replace(((_d = usingItem.value) == null ? void 0 : _d.keyInnerText.replace("\xA0", " ").trim()) || "", "").trim();
+        const hasKeyword = text && ((_e = usingItem.value) == null ? void 0 : _e.keyInnerText) && text.replace("\xA0", " ").includes(usingItem.value.keyInnerText.replace("\xA0", " ").trim());
+        if (hasKeyword && outerText && ((_f = usingItem.value.values) == null ? void 0 : _f.length)) {
+          keyword.value = outerText;
+          console.info("outerText", outerText);
+          debounceSetMenuList();
+          return;
+        }
         if (outerText || !(text == null ? void 0 : text.length)) {
           usingItem.value = null;
         }
         keyword.value = outerText ? text : "";
         debounceSetMenuList();
-      } else if (!((_f = (_e = usingItem.value) == null ? void 0 : _e.values) == null ? void 0 : _f.length)) {
-        keyword.value = text.replace("\xA0", " ").replace(((_g = usingItem.value) == null ? void 0 : _g.keyInnerText.replace("\xA0", " ")) || "", "").trim();
+      } else if (!((_h = (_g = usingItem.value) == null ? void 0 : _g.values) == null ? void 0 : _h.length)) {
+        keyword.value = text.replace("\xA0", " ").replace(((_i = usingItem.value) == null ? void 0 : _i.keyInnerText.replace("\xA0", " ")) || "", "").trim();
         setInputFocus();
         debounceSetMenuList();
       }
@@ -39331,6 +39308,21 @@ var SearchSelectInput = defineComponent({
         showNoSelectValueError.value = true;
         return;
       }
+      if (keyword.value) {
+        const value = {
+          id: keyword.value,
+          name: keyword.value
+        };
+        const res2 = await validateUsingItemValues(value);
+        if (!res2)
+          return;
+        usingItem.value.addValue(value);
+        emit("add", usingItem.value);
+        keyword.value = "";
+        usingItem.value = null;
+        setInputFocus(true);
+        return;
+      }
       const res = await validateUsingItemValues();
       if (!res)
         return;
@@ -39344,7 +39336,7 @@ var SearchSelectInput = defineComponent({
         return;
       }
       if ((_a = usingItem.value) == null ? void 0 : _a.values.length) {
-        if (((_b = usingItem.value) == null ? void 0 : _b.multiple) || usingItem.value.isInValueList(usingItem.value.values[0])) {
+        if (((_b = usingItem.value) == null ? void 0 : _b.multiple) || usingItem.value.isInValueList(usingItem.value.values[0]) || props2.mode === SearchInputMode.EDIT && !keyword.value) {
           usingItem.value.values.splice(-1, 1);
           keyword.value = "";
           setInputFocus();
@@ -39358,7 +39350,7 @@ var SearchSelectInput = defineComponent({
       onValidate("");
     }
     async function handleSelectItem(item, type) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       if ((_a = item.value) == null ? void 0 : _a.id) {
         if (props2.valueBehavior === ValueBehavior.NEEDKEY && item.value || !props2.validateValues) {
           const seleted = new SelectedItem(__spreadProps(__spreadValues({}, item), {
@@ -39393,7 +39385,7 @@ var SearchSelectInput = defineComponent({
         return;
       if (!usingItem.value.multiple)
         setSelectedItem();
-      if (props2.valueBehavior === ValueBehavior.NEEDKEY && usingItem.value.multiple) {
+      if (props2.valueBehavior === ValueBehavior.NEEDKEY && ((_e = usingItem.value) == null ? void 0 : _e.multiple)) {
         setInputFocus();
       }
     }