@opentiny/vue-search-box 0.1.1 → 0.1.2

package/dist/es/index.vue.es2.js

@@ -1,11 +1,8 @@
-import { defineComponent, reactive, getCurrentInstance, computed, nextTick, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, unref, createVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, withCtx, createElementVNode, toDisplayString, withDirectives, vShow, withKeys, normalizeStyle, createTextVNode, isRef, renderSlot, mergeProps } from "vue";
+import { defineComponent, reactive, computed, getCurrentInstance, nextTick, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, unref, createVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, withCtx, createElementVNode, toDisplayString, withDirectives, vShow, withKeys, normalizeStyle, renderSlot, mergeProps, createTextVNode } from "vue";
 import TinyTag from "@opentiny/vue-tag";
 import TinyInput from "@opentiny/vue-input";
 import TinyDropdown from "@opentiny/vue-dropdown";
 import TinyDropdownMenu from "@opentiny/vue-dropdown-menu";
-import TinyDropdownItem from "@opentiny/vue-dropdown-item";
-import TinyCheckbox from "@opentiny/vue-checkbox";
-import TinyCheckboxGroup from "@opentiny/vue-checkbox-group";
 import TinyButton from "@opentiny/vue-button";
 import TinyTooltip from "@opentiny/vue-tooltip";
 import TinyDatePicker from "@opentiny/vue-date-picker";
@@ -15,6 +12,7 @@ import TinyPopover from "@opentiny/vue-popover";
 import TinySelect from "@opentiny/vue-select";
 import TinyOption from "@opentiny/vue-option";
 import { iconSearch, iconClose, iconHelpQuery } from "@opentiny/vue-icon";
+import { format } from "./utils/date.es.js";
 import { t } from "./index.es.js";
 import { useTag } from "./composables/use-tag.es.js";
 import { useDropdown } from "./composables/use-dropdown.es.js";
@@ -27,9 +25,13 @@ import { useCustom } from "./composables/use-custom.es.js";
 import { useInit } from "./composables/use-init.es.js";
 import { usePlaceholder } from "./composables/use-placeholder.es.js";
 import { showPopover, showDropdown } from "./utils/dropdown.es.js";
+import "./components/first-level-panel.vue.es.js";
+import "./components/second-level-panel.vue.es.js";
 /* empty css              */
 import { deepClone } from "./utils/clone.es.js";
-import { format } from "./utils/date.es.js";
+import { resetInput } from "./utils/tag.es.js";
+import _sfc_main$1 from "./components/first-level-panel.vue.es2.js";
+import _sfc_main$2 from "./components/second-level-panel.vue.es2.js";
 const _hoisted_1 = { class: "tvp-search-box__tag-value" };
 const _hoisted_2 = {
   key: 0,
@@ -38,113 +40,38 @@ const _hoisted_2 = {
 const _hoisted_3 = { class: "tvp-search-box__input-wrapper" };
 const _hoisted_4 = { class: "tvp-search-box__prop" };
 const _hoisted_5 = { class: "tvp-search-box__input-separator" };
-const _hoisted_6 = { class: "tvp-search-box__filter-type" };
-const _hoisted_7 = {
-  key: 0,
-  class: "tvp-search-box__text-highlight"
-};
-const _hoisted_8 = { class: "tvp-search-box__filter-type" };
-const _hoisted_9 = {
-  key: 0,
-  class: "tvp-search-box__text-highlight"
-};
-const _hoisted_10 = { class: "tvp-search-box__filter-type" };
-const _hoisted_11 = {
-  id: "potential-loading",
-  class: "tvp-search-box__potential-box"
-};
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = { class: "tvp-search-box__text-highlight" };
-const _hoisted_14 = { class: "tvp-search-box__first-panel" };
-const _hoisted_15 = {
-  key: 0,
-  class: "tvp-search-box__filter-type"
-};
-const _hoisted_16 = ["title"];
-const _hoisted_17 = { key: 0 };
-const _hoisted_18 = { class: "tvp-search-box__filter-type" };
-const _hoisted_19 = {
-  key: 1,
-  class: "tvp-search-box__radio-wrap"
-};
-const _hoisted_20 = ["title"];
-const _hoisted_21 = {
-  key: 0,
-  class: "tvp-search-box__text-highlight"
-};
-const _hoisted_22 = ["title"];
-const _hoisted_23 = { key: 2 };
-const _hoisted_24 = { class: "tvp-search-box__checkbox-wrap" };
-const _hoisted_25 = { class: "tvp-search-box__checkbox-btn" };
-const _hoisted_26 = {
-  key: 3,
-  class: "tvp-search-box__panel-box"
-};
-const _hoisted_27 = { class: "tvp-search-box__number" };
-const _hoisted_28 = { class: "tvp-search-box__dropdown-title" };
-const _hoisted_29 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_30 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_31 = { class: "tvp-search-box__bottom-btn" };
-const _hoisted_32 = {
-  key: 4,
-  class: "tvp-search-box__panel-box"
-};
-const _hoisted_33 = { class: "tvp-search-box__date-wrap" };
-const _hoisted_34 = { class: "tvp-search-box__dropdown-title" };
-const _hoisted_35 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_36 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_37 = { class: "tvp-search-box__bottom-btn" };
-const _hoisted_38 = {
-  key: 5,
-  class: "tvp-search-box__panel-box"
-};
-const _hoisted_39 = { class: "tvp-search-box__date-wrap" };
-const _hoisted_40 = { class: "tvp-search-box__dropdown-title" };
-const _hoisted_41 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_42 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_43 = { class: "tvp-search-box__bottom-btn" };
-const _hoisted_44 = { key: 6 };
-const _hoisted_45 = {
-  key: 0,
-  class: "tvp-search-box__filter-type"
-};
-const _hoisted_46 = {
-  key: 1,
-  class: "tvp-search-box__filter-type"
-};
-const _hoisted_47 = ["title"];
-const _hoisted_48 = { class: "tvp-search-box__date-wrap" };
-const _hoisted_49 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_50 = {
+const _hoisted_6 = { class: "tvp-search-box__date-wrap" };
+const _hoisted_7 = { class: "tvp-search-box__dropdown-start" };
+const _hoisted_8 = {
   key: 0,
   class: "tvp-search-box__dropdown-end"
 };
-const _hoisted_51 = {
+const _hoisted_9 = {
   key: 2,
   class: "tvp-search-box__dropdown-end"
 };
-const _hoisted_52 = {
+const _hoisted_10 = {
   key: 4,
   class: "tvp-search-box__number"
 };
-const _hoisted_53 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_54 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_55 = {
+const _hoisted_11 = { class: "tvp-search-box__dropdown-start" };
+const _hoisted_12 = { class: "tvp-search-box__dropdown-end" };
+const _hoisted_13 = {
   key: 5,
   class: "tvp-search-box__date-wrap"
 };
-const _hoisted_56 = { class: "tvp-search-box__dropdown-title" };
-const _hoisted_57 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_58 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_59 = {
+const _hoisted_14 = { class: "tvp-search-box__dropdown-title" };
+const _hoisted_15 = { class: "tvp-search-box__dropdown-start" };
+const _hoisted_16 = { class: "tvp-search-box__dropdown-end" };
+const _hoisted_17 = {
   key: 6,
   class: "tvp-search-box__date-wrap"
 };
-const _hoisted_60 = { class: "tvp-search-box__dropdown-title" };
-const _hoisted_61 = { class: "tvp-search-box__dropdown-start" };
-const _hoisted_62 = { class: "tvp-search-box__dropdown-end" };
-const _hoisted_63 = { class: "tvp-search-box__bottom-btn" };
-const _hoisted_64 = {
+const _hoisted_18 = { class: "tvp-search-box__dropdown-title" };
+const _hoisted_19 = { class: "tvp-search-box__dropdown-start" };
+const _hoisted_20 = { class: "tvp-search-box__dropdown-end" };
+const _hoisted_21 = { class: "tvp-search-box__bottom-btn" };
+const _hoisted_22 = {
   key: 1,
   class: "tvp-search-box__panel-box"
 };
@@ -205,14 +132,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     splitInputValue: {
       type: String,
       default: ","
-    },
-    // 3.18.0新增
-    showNoDataTip: {
-      type: Boolean,
-      default: true
     }
   },
-  emits: ["update:modelValue", "change", "search", "exceed", "first-level-select"],
+  emits: ["update:modelValue", "change", "search", "exceed", "first-level-select", "clear"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -237,27 +159,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       endDateTime: null,
       isShowTagKey: true,
       potentialOptions: null,
-      hiden: true,
       dateRangeFormat: "yyyy/MM/dd",
       datetimeRangeFormat: "yyyy/MM/dd HH:mm:ss",
       indexMap: /* @__PURE__ */ new Map(),
       valueMap: /* @__PURE__ */ new Map(),
       popoverVisible: false,
       selectValue: "",
-      allTypeAttri: {
-        label: t("tvp.tvpSearchbox.rulekeyword1"),
-        field: "tvpKeyword",
-        type: "radio"
-      },
+      allTypeAttri: { label: t("tvp.tvpSearchbox.rulekeyword1"), field: "tvpKeyword", type: "radio" },
       operatorValue: ":",
       // 当前操作符值
       inputEditValue: "",
       currentOperators: "",
       currentEditValue: "",
-      isShowDropdown: true,
-      // 控制有匹配数据展示开关
-      isShowPanel: true,
-      // 控制面板显隐
       currentModelValueIndex: -1,
       // 当前编辑的标签索引
       curMinNumVar: "",
@@ -266,21 +179,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       // numRange最大值变量
       instance: getCurrentInstance(),
       isMouseDown: false,
-      isResetFlag: true,
-      // 输入框触发源重置
-      currentEditSelectTags: []
+      currentEditSelectTags: [],
       // 当前编辑多选的标签值
+      visible: false,
+      visibleTimer: null,
+      hasBackupList: computed(
+        () => state.propItem.label && [void 0, "radio", "checkbox", "map"].includes(state.prevItem.type)
+      ),
+      isIndeterminate: computed(
+        () => state.checkboxGroup.length > 0 && state.checkboxGroup.length !== state.filterList.length
+      ),
+      checkAll: computed({
+        get: () => state.checkboxGroup.length && state.checkboxGroup.length === state.filterList.length,
+        set: (val) => {
+          if (val) {
+            state.checkboxGroup = state.filterList.flatMap((item) => `${state.prevItem.label}${item.label}`);
+          } else {
+            state.checkboxGroup = [];
+          }
+        }
+      })
     });
-    state.isShowPanel = computed(
-      () => {
-        var _a;
-        return state.isResetFlag && (props.showNoDataTip || !props.showNoDataTip && state.isShowDropdown) && (state.prevItem.type || !state.propItem.label || state.backupList.length || ((_a = state.currentOperators) == null ? void 0 : _a.length));
-      }
-    );
     const TinyIconSearch = iconSearch();
     const TinyIconClose = iconClose();
     const TinyIconHelpQuery = iconHelpQuery();
-    const { selectPropItem, selectRadioItem, createTag, helpClick, setOperator } = useDropdown({
+    const { selectPropItem, selectRadioItem, selectInputValue, createTag, helpClick, setOperator } = useDropdown({
       props,
       emits,
       state,
@@ -306,7 +229,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits
     });
     const { placeholder, setPlaceholder } = usePlaceholder({ props, state, t });
-    const { selectCheckbox, isIndeterminate, checkAll, isShowClose } = useCheckbox({
+    const { selectCheckbox, isShowClose } = useCheckbox({
       props,
       state,
       emits
@@ -370,7 +293,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           });
           showPopover(state, false);
           if (newVal.length === 0) {
-            setPlaceholder(props.emptyPlaceholder || t("tvp.tvpSearchbox.defaultPlaceholder"));
+            setPlaceholder(props.emptyPlaceholder);
           }
           if (props.editable && !state.inputEditValue.length && newVal[0]) {
             state.inputEditValue = newVal[0].value;
@@ -384,22 +307,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     onMounted(() => {
-      document.addEventListener("click", watchOutsideClick);
-      document.addEventListener("mousedown", watchMouseDown);
-      document.addEventListener("mousemove", watchMouseMove);
+      if (typeof document !== "undefined") {
+        document.addEventListener("click", watchOutsideClick);
+        document.addEventListener("mousedown", watchMouseDown);
+        document.addEventListener("mousemove", watchMouseMove);
+      }
     });
     onBeforeUnmount(() => {
-      document.removeEventListener("click", watchOutsideClick);
-      document.removeEventListener("mousedown", watchMouseDown);
-      document.removeEventListener("mousemove", watchMouseMove);
+      if (typeof document !== "undefined") {
+        document.removeEventListener("click", watchOutsideClick);
+        document.removeEventListener("mousedown", watchMouseDown);
+        document.removeEventListener("mousemove", watchMouseMove);
+      }
     });
+    const eventsMap = {
+      selectInputValue,
+      selectPropItem,
+      selectRadioItem,
+      setOperator,
+      selectCheckbox,
+      sizeChange,
+      onConfirmDate,
+      selectFirstMap,
+      handleDateShow
+    };
+    const handleEvents = (eventName, p1, p2) => {
+      eventsMap[eventName](p1, p2);
+    };
     __expose({
-      state
+      state,
+      handleEvents
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "tvp-search-box",
-        onClick: _cache[36] || (_cache[36] = withModifiers(($event) => unref(showPopover)(state, false), ["stop"]))
+        onClick: _cache[21] || (_cache[21] = withModifiers(($event) => unref(showPopover)(state, false), ["stop"]))
       }, [
         createVNode(unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (tag, index) => {
@@ -439,11 +381,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               createVNode(unref(TinyDropdown), {
                 ref: "dropdownRef",
+                visible: state.visible,
+                "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => state.visible = $event),
                 trigger: "click",
                 class: "tvp-search-box__dropdown",
-                "hide-on-click": state.hiden,
                 "show-icon": false,
-                "lazy-show-popper": ""
+                "lazy-show-popper": "",
+                "close-on-click-outside": true
               }, {
                 dropdown: withCtx(() => [
                   createVNode(unref(TinyDropdownMenu), {
@@ -454,468 +398,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, ["stop"])
                   }, {
                     default: withCtx(() => {
-                      var _a;
+                      var _a, _b;
                       return [
                         withDirectives(createElementVNode("div", null, [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(state.matchItems, (value, key) => {
-                            return openBlock(), createElementBlock(Fragment, { key }, [
-                              value["attr"].length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                                createElementVNode("span", _hoisted_6, toDisplayString(key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key), 1),
-                                (openBlock(true), createElementBlock(Fragment, null, renderList(value["attr"], (item, index) => {
-                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
-                                    key: item.label + index,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => unref(selectPropItem)(item)
-                                  }, {
-                                    default: withCtx(() => [
-                                      createElementVNode("span", null, [
-                                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
-                                          return openBlock(), createElementBlock(Fragment, { key: text }, [
-                                            Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                              createTextVNode(toDisplayString(text), 1)
-                                            ], 64))
-                                          ], 64);
-                                        }), 128))
-                                      ])
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["onClick"]);
-                                }), 128))
-                              ], 64)) : createCommentVNode("", true),
-                              value["attrValue"].length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("tvp.tvpSearchbox.propertyValue", [key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key])), 1),
-                                (openBlock(true), createElementBlock(Fragment, null, renderList(value["attrValue"], (item, index) => {
-                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
-                                    key: item.label + index,
-                                    disabled: item.isChecked,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => unref(selectRadioItem)(item, true)
-                                  }, {
-                                    default: withCtx(() => [
-                                      createElementVNode("span", null, [
-                                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
-                                          return openBlock(), createElementBlock(Fragment, { key: text }, [
-                                            Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                              createTextVNode(toDisplayString(text), 1)
-                                            ], 64))
-                                          ], 64);
-                                        }), 128))
-                                      ])
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["disabled", "onClick"]);
-                                }), 128))
-                              ], 64)) : createCommentVNode("", true)
-                            ], 64);
-                          }), 128)),
-                          __props.showNoDataTip && !state.isShowDropdown ? (openBlock(), createBlock(unref(TinyDropdownItem), { key: 0 }, {
-                            default: withCtx(() => [
-                              createElementVNode("div", null, toDisplayString(unref(t)("tvp.tvpSearchbox.noData")), 1)
-                            ]),
-                            _: 1
-                          })) : createCommentVNode("", true),
-                          withDirectives(createElementVNode("div", null, [
-                            createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("tvp.tvpSearchbox.matched")), 1),
-                            createElementVNode("div", _hoisted_11, [
-                              state.potentialOptions ? (openBlock(), createElementBlock("div", _hoisted_12, [
-                                (openBlock(true), createElementBlock(Fragment, null, renderList(state.potentialOptions, (item, index) => {
-                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
-                                    key: item.label + index,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => unref(selectRadioItem)(item, true)
-                                  }, {
-                                    default: withCtx(() => [
-                                      createTextVNode(toDisplayString(item.label) + "： ", 1),
-                                      createElementVNode("span", _hoisted_13, toDisplayString(item.value), 1)
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["onClick"]);
-                                }), 128))
-                              ])) : createCommentVNode("", true)
-                            ])
-                          ], 512), [
-                            [vShow, props.potentialOptions]
-                          ])
-                        ], 512), [
-                          [vShow, state.isResetFlag && !state.propItem.label && state.inputValue.trim()]
-                        ]),
-                        withDirectives(createElementVNode("div", _hoisted_14, [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(state.groupItems, (group, key) => {
-                            return openBlock(), createElementBlock(Fragment, { key }, [
-                              group.length ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key), 1)) : createCommentVNode("", true),
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item, index) => {
-                                return openBlock(), createBlock(unref(TinyDropdownItem), {
-                                  key: (item.field || item.label) + index,
-                                  class: "tvp-search-box__dropdown-item",
-                                  onClick: ($event) => unref(selectPropItem)(item)
-                                }, {
-                                  default: withCtx(() => [
-                                    createElementVNode("span", {
-                                      title: item.label
-                                    }, toDisplayString(item.label), 9, _hoisted_16)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["onClick"]);
-                              }), 128))
-                            ], 64);
-                          }), 128))
+                          ((_a = state.instance) == null ? void 0 : _a.slots["first-panel"]) ? renderSlot(_ctx.$slots, "first-panel", mergeProps({ key: 0 }, {
+                            state,
+                            handleEvents
+                          }, {
+                            onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                            }, ["stop"]))
+                          })) : (openBlock(), createBlock(_sfc_main$1, {
+                            key: 1,
+                            state,
+                            onEvents: handleEvents
+                          }, null, 8, ["state"]))
                         ], 512), [
-                          [vShow, state.isResetFlag && !state.propItem.label && !state.inputValue.trim()]
+                          [vShow, !state.propItem.label || state.inputValue.trim()]
                         ]),
                         withDirectives(createElementVNode("div", null, [
-                          ((_a = state.currentOperators) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_17, [
-                            createElementVNode("span", _hoisted_18, toDisplayString(unref(t)("tvp.tvpSearchbox.operator")), 1),
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.currentOperators, (item, index) => {
-                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
-                                key: item + index,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => unref(setOperator)(item)
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(item), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["onClick"])), [
-                                [vShow, item.includes(state.inputValue)]
-                              ]);
-                            }), 128))
-                          ])) : !state.prevItem.type || state.prevItem.type === "radio" ? (openBlock(), createElementBlock("div", _hoisted_19, [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
-                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
-                                key: index + (item.field || item.label),
-                                disabled: item.isChecked,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => unref(selectRadioItem)(item)
-                              }, {
-                                default: withCtx(() => [
-                                  item.match ? (openBlock(), createElementBlock("span", {
-                                    key: 0,
-                                    title: item.label
-                                  }, [
-                                    (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
-                                      return openBlock(), createElementBlock(Fragment, { key: text }, [
-                                        Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                          createTextVNode(toDisplayString(text), 1)
-                                        ], 64))
-                                      ], 64);
-                                    }), 128))
-                                  ], 8, _hoisted_20)) : (openBlock(), createElementBlock("span", {
-                                    key: 1,
-                                    title: item.label
-                                  }, toDisplayString(item.label), 9, _hoisted_22))
-                                ]),
-                                _: 2
-                              }, 1032, ["disabled", "onClick"])), [
-                                [vShow, !item.isFilter || !state.inputValue]
-                              ]);
-                            }), 128))
-                          ])) : state.isResetFlag && state.prevItem.type === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_23, [
-                            createElementVNode("div", _hoisted_24, [
-                              createVNode(unref(TinyCheckboxGroup), {
-                                modelValue: unref(checkAll),
-                                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(checkAll) ? checkAll.value = $event : null),
-                                class: "tvp-search-box__checkbox"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyDropdownItem), { class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item" }, {
-                                    default: withCtx(() => [
-                                      createVNode(unref(TinyCheckbox), {
-                                        modelValue: unref(checkAll),
-                                        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(checkAll) ? checkAll.value = $event : null),
-                                        indeterminate: unref(isIndeterminate)
-                                      }, {
-                                        default: withCtx(() => [
-                                          createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.selectAll")), 1)
-                                        ]),
-                                        _: 1
-                                      }, 8, ["modelValue", "indeterminate"])
-                                    ]),
-                                    _: 1
-                                  })
-                                ]),
-                                _: 1
-                              }, 8, ["modelValue"]),
-                              createVNode(unref(TinyCheckboxGroup), {
-                                modelValue: state.checkboxGroup,
-                                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.checkboxGroup = $event),
-                                class: "tvp-search-box__checkbox"
-                              }, {
-                                default: withCtx(() => [
-                                  (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
-                                    return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
-                                      key: (item.field || item.label) + index,
-                                      class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item"
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(TinyCheckbox), {
-                                          label: state.prevItem.label + item.label,
-                                          title: item.label,
-                                          class: "tvp-search-box__checkbox-item-label"
-                                        }, {
-                                          default: withCtx(() => [
-                                            createTextVNode(toDisplayString(item.label), 1)
-                                          ]),
-                                          _: 2
-                                        }, 1032, ["label", "title"])
-                                      ]),
-                                      _: 2
-                                    }, 1024)), [
-                                      [vShow, !item.isFilter]
-                                    ]);
-                                  }), 128))
-                                ]),
-                                _: 1
-                              }, 8, ["modelValue"])
-                            ]),
-                            createElementVNode("div", _hoisted_25, [
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[5] || (_cache[5] = ($event) => unref(selectCheckbox)(true))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[6] || (_cache[6] = ($event) => unref(selectCheckbox)(false))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "numRange" ? (openBlock(), createElementBlock("div", _hoisted_26, [
-                            createElementVNode("div", _hoisted_27, [
-                              createElementVNode("div", _hoisted_28, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeNumberTitle")), 1),
-                              createElementVNode("div", _hoisted_29, toDisplayString(unref(t)("tvp.tvpSearchbox.minValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: state.curMinNumVar,
-                                class: "tvp-search-box__number-item",
-                                "show-message": state.numberShowMessage
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyInput), {
-                                    modelValue: state[state.curMinNumVar],
-                                    "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => state[state.curMinNumVar] = $event),
-                                    type: "number",
-                                    class: "tvp-search-box__number-input"
-                                  }, null, 8, ["modelValue"])
-                                ]),
-                                _: 1
-                              }, 8, ["prop", "show-message"]),
-                              createElementVNode("div", _hoisted_30, toDisplayString(unref(t)("tvp.tvpSearchbox.maxValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: state.curMaxNumVar,
-                                class: "tvp-search-box__number-item"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyInput), {
-                                    modelValue: state[state.curMaxNumVar],
-                                    "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => state[state.curMaxNumVar] = $event),
-                                    type: "number",
-                                    class: "tvp-search-box__number-input"
-                                  }, null, 8, ["modelValue"])
-                                ]),
-                                _: 1
-                              }, 8, ["prop"])
-                            ]),
-                            createElementVNode("div", _hoisted_31, [
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[9] || (_cache[9] = withModifiers(($event) => unref(sizeChange)(true), ["stop"]))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[10] || (_cache[10] = ($event) => unref(sizeChange)(false))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "dateRange" ? (openBlock(), createElementBlock("div", _hoisted_32, [
-                            createElementVNode("div", _hoisted_33, [
-                              createElementVNode("div", _hoisted_34, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
-                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
-                              }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                              createElementVNode("div", _hoisted_35, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: "startDate",
-                                "show-message": Boolean(state.prevItem.maxTimeLength),
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyDatePicker), {
-                                    modelValue: state.startDate,
-                                    "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => state.startDate = $event),
-                                    format: state.prevItem.format || state.dateRangeFormat,
-                                    "value-format": state.prevItem.format || state.dateRangeFormat,
-                                    "picker-options": unref(pickerOptions)(state.startDate, "endDate"),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: unref(handleDateShow),
-                                    onBlur: unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              }, 8, ["show-message"]),
-                              createElementVNode("div", _hoisted_36, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: "endDate",
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyDatePicker), {
-                                    modelValue: state.endDate,
-                                    "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => state.endDate = $event),
-                                    format: state.prevItem.format || state.dateRangeFormat,
-                                    "value-format": state.prevItem.format || state.dateRangeFormat,
-                                    "picker-options": unref(pickerOptions)(state.startDate),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: unref(handleDateShow),
-                                    onBlur: unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            createElementVNode("div", _hoisted_37, [
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[13] || (_cache[13] = ($event) => unref(onConfirmDate)(true))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[14] || (_cache[14] = ($event) => unref(onConfirmDate)(false))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "datetimeRange" ? (openBlock(), createElementBlock("div", _hoisted_38, [
-                            createElementVNode("div", _hoisted_39, [
-                              createElementVNode("div", _hoisted_40, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
-                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
-                              }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                              createElementVNode("div", _hoisted_41, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: "startDateTime",
-                                "show-message": Boolean(state.prevItem.maxTimeLength),
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyDatePicker), {
-                                    modelValue: state.startDateTime,
-                                    "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => state.startDateTime = $event),
-                                    type: "datetime",
-                                    isutc8: true,
-                                    format: state.prevItem.format || state.datetimeRangeFormat,
-                                    "value-format": state.prevItem.format || state.datetimeRangeFormat,
-                                    "picker-options": unref(pickerOptions)(state.startDateTime, "endDateTime"),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: unref(handleDateShow),
-                                    onBlur: unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              }, 8, ["show-message"]),
-                              createElementVNode("div", _hoisted_42, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
-                              createVNode(unref(TinyFormItem), {
-                                prop: "endDateTime",
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(TinyDatePicker), {
-                                    modelValue: state.endDateTime,
-                                    "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => state.endDateTime = $event),
-                                    type: "datetime",
-                                    isutc8: true,
-                                    format: state.prevItem.format || state.datetimeRangeFormat,
-                                    "value-format": state.prevItem.format || state.datetimeRangeFormat,
-                                    "picker-options": unref(pickerOptions)(state.startDateTime),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: unref(handleDateShow),
-                                    onBlur: unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            createElementVNode("div", _hoisted_43, [
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[17] || (_cache[17] = ($event) => unref(onConfirmDate)(true, true))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[18] || (_cache[18] = ($event) => unref(onConfirmDate)(false, true))
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "map" ? (openBlock(), createElementBlock("div", _hoisted_44, [
-                            state.isShowTagKey ? (openBlock(), createElementBlock("span", _hoisted_45, toDisplayString(unref(t)("tvp.tvpSearchbox.tagKey")), 1)) : (openBlock(), createElementBlock("span", _hoisted_46, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)),
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
-                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
-                                key: item.label + item.value + index,
-                                disabled: item.isChecked,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => unref(selectFirstMap)(item, state.isShowTagKey)
-                              }, {
-                                default: withCtx(() => [
-                                  createElementVNode("span", {
-                                    title: item.label
-                                  }, toDisplayString(item.label), 9, _hoisted_47)
-                                ]),
-                                _: 2
-                              }, 1032, ["disabled", "onClick"])), [
-                                [vShow, !item.isFilter]
-                              ]);
-                            }), 128))
-                          ])) : state.prevItem.type === "custom" ? (openBlock(), createElementBlock("div", {
-                            key: 7,
+                          ((_b = state.instance) == null ? void 0 : _b.slots["second-panel"]) ? renderSlot(_ctx.$slots, "second-panel", mergeProps({ key: 0 }, {
+                            state,
+                            pickerOptions: unref(pickerOptions),
+                            handleEvents,
+                            back: () => unref(resetInput)(state)
+                          }, {
+                            onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                            }, ["stop"]))
+                          })) : state.prevItem.type !== "custom" ? (openBlock(), createBlock(_sfc_main$2, {
+                            key: 1,
+                            state,
+                            "picker-options": unref(pickerOptions),
+                            onEvents: handleEvents
+                          }, null, 8, ["state", "picker-options"])) : (openBlock(), createElementBlock("div", {
+                            key: 2,
                             class: "tvp-search-box__panel-box",
-                            onClick: _cache[20] || (_cache[20] = ($event) => unref(showDropdown)(state))
+                            onClick: _cache[4] || (_cache[4] = ($event) => unref(showDropdown)(state))
                           }, [
                             renderSlot(_ctx.$slots, state.prevItem.slotName, mergeProps({
                               showDropdown: () => unref(showDropdown)(state),
                               onConfirm: unref(handleConfirm)
                             }, {
-                              onClick: _cache[19] || (_cache[19] = withModifiers(() => {
+                              onClick: _cache[3] || (_cache[3] = withModifiers(() => {
                               }, ["stop"]))
                             }))
-                          ])) : createCommentVNode("", true),
-                          __props.showNoDataTip && !state.isShowDropdown ? (openBlock(), createBlock(unref(TinyDropdownItem), { key: 8 }, {
-                            default: withCtx(() => [
-                              createElementVNode("div", null, toDisplayString(unref(t)("tvp.tvpSearchbox.noData")), 1)
-                            ]),
-                            _: 1
-                          })) : createCommentVNode("", true)
+                          ]))
                         ], 512), [
-                          [vShow, state.isResetFlag && state.propItem.label]
+                          [vShow, state.propItem.label]
                         ])
                       ];
                     }),
@@ -935,7 +463,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       withKeys(withModifiers(unref(createTag), ["stop"]), ["enter"])
                     ],
                     onInput: unref(handleInput),
-                    onFocus: _cache[1] || (_cache[1] = ($event) => unref(showPopover)(state, false)),
                     onClick: unref(handleClick)
                   }, {
                     suffix: withCtx(() => [
@@ -950,7 +477,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       __props.showHelp ? (openBlock(), createBlock(unref(TinyTooltip), {
                         key: 0,
-                        effect: "dark",
+                        effect: "light",
                         content: unref(t)("tvp.tvpSearchbox.help"),
                         placement: "top"
                       }, {
@@ -971,13 +498,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
                 ]),
                 _: 3
-              }, 8, ["hide-on-click"])
+              }, 8, ["visible"])
             ]),
             __props.editable ? (openBlock(), createBlock(unref(TinyPopover), {
               key: 0,
               ref: "popoverRef",
               modelValue: state.popoverVisible,
-              "onUpdate:modelValue": _cache[35] || (_cache[35] = ($event) => state.popoverVisible = $event),
+              "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => state.popoverVisible = $event),
               placement: "bottom-start",
               "visible-arrow": false,
               trigger: "manual",
@@ -986,13 +513,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 state.prevItem.type !== "custom" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createElementVNode("div", _hoisted_48, [
-                    createElementVNode("div", _hoisted_49, toDisplayString(unref(t)("tvp.tvpSearchbox.attributeType")), 1),
+                  createElementVNode("div", _hoisted_6, [
+                    createElementVNode("div", _hoisted_7, toDisplayString(unref(t)("tvp.tvpSearchbox.attributeType")), 1),
                     createVNode(unref(TinyFormItem), { class: "tvp-search-box__number-item" }, {
                       default: withCtx(() => [
                         createVNode(unref(TinySelect), {
                           modelValue: state.selectValue,
-                          "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => state.selectValue = $event),
+                          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => state.selectValue = $event),
                           searchable: "",
                           disabled: state.prevItem.editAttrDisabled
                         }, {
@@ -1002,7 +529,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               label: unref(t)("tvp.tvpSearchbox.allProperty"),
                               value: state.allTypeAttri.label,
                               disabled: unref(selectItemIsDisable)(state.allTypeAttri),
-                              onClick: _cache[21] || (_cache[21] = ($event) => unref(selectPropChange)(state.allTypeAttri, unref(selectItemIsDisable)(state.allTypeAttri)))
+                              onClick: _cache[6] || (_cache[6] = ($event) => unref(selectPropChange)(state.allTypeAttri, unref(selectItemIsDisable)(state.allTypeAttri)))
                             }, null, 8, ["label", "value", "disabled"])),
                             (openBlock(true), createElementBlock(Fragment, null, renderList(state.recordItems, (item) => {
                               return openBlock(), createBlock(unref(TinyOption), {
@@ -1019,7 +546,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }),
-                    state.prevItem.operators ? (openBlock(), createElementBlock("div", _hoisted_50, toDisplayString(unref(t)("tvp.tvpSearchbox.operator")), 1)) : createCommentVNode("", true),
+                    state.prevItem.operators ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(unref(t)("tvp.tvpSearchbox.operator")), 1)) : createCommentVNode("", true),
                     state.prevItem.operators ? (openBlock(), createBlock(unref(TinyFormItem), {
                       key: 1,
                       class: "tvp-search-box__number-item"
@@ -1027,7 +554,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       default: withCtx(() => [
                         createVNode(unref(TinySelect), {
                           modelValue: state.operatorValue,
-                          "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => state.operatorValue = $event)
+                          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => state.operatorValue = $event)
                         }, {
                           default: withCtx(() => [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(state.currentOperators, (item) => {
@@ -1043,22 +570,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     })) : createCommentVNode("", true),
-                    state.prevItem.type !== "numRange" ? (openBlock(), createElementBlock("div", _hoisted_51, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)) : createCommentVNode("", true),
+                    state.prevItem.type !== "numRange" ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)) : createCommentVNode("", true),
                     !["numRange", "dateRange", "datetimeRange", "custom"].includes(state.prevItem.type) ? (openBlock(), createBlock(unref(TinyFormItem), {
                       key: 3,
                       prop: "inputEditValue",
                       class: "tvp-search-box__number-item"
                     }, {
                       default: withCtx(() => {
-                        var _a;
+                        var _a, _b;
                         return [
                           ((_a = state.currentEditValue) == null ? void 0 : _a.length) > 0 ? (openBlock(), createBlock(unref(TinySelect), {
                             key: 0,
                             modelValue: state.inputEditValue,
-                            "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => state.inputEditValue = $event),
+                            "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => state.inputEditValue = $event),
                             class: "tvp-search-box-select",
                             multiple: Boolean(state.prevItem.mergeTag),
-                            "allow-create": "",
+                            "allow-create": (_b = state.prevItem) == null ? void 0 : _b.allowCreate,
                             filterable: "",
                             "default-first-option": "",
                             clearable: ""
@@ -1073,18 +600,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               }), 128))
                             ]),
                             _: 1
-                          }, 8, ["modelValue", "multiple"])) : (openBlock(), createBlock(unref(TinyInput), {
+                          }, 8, ["modelValue", "multiple", "allow-create"])) : (openBlock(), createBlock(unref(TinyInput), {
                             key: 1,
                             modelValue: state.inputEditValue,
-                            "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => state.inputEditValue = $event),
+                            "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => state.inputEditValue = $event),
                             clearable: ""
                           }, null, 8, ["modelValue"]))
                         ];
                       }),
                       _: 1
                     })) : createCommentVNode("", true),
-                    state.prevItem.type === "numRange" ? (openBlock(), createElementBlock("div", _hoisted_52, [
-                      createElementVNode("div", _hoisted_53, toDisplayString(unref(t)("tvp.tvpSearchbox.minValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                    state.prevItem.type === "numRange" ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                      createElementVNode("div", _hoisted_11, toDisplayString(unref(t)("tvp.tvpSearchbox.minValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
                       createVNode(unref(TinyFormItem), {
                         prop: state.curMinNumVar,
                         class: "tvp-search-box__number-item",
@@ -1093,14 +620,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyInput), {
                             modelValue: state[state.curMinNumVar],
-                            "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => state[state.curMinNumVar] = $event),
+                            "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => state[state.curMinNumVar] = $event),
                             type: "number",
                             class: "tvp-search-box__number-input"
                           }, null, 8, ["modelValue"])
                         ]),
                         _: 1
                       }, 8, ["prop", "show-message"]),
-                      createElementVNode("div", _hoisted_54, toDisplayString(unref(t)("tvp.tvpSearchbox.maxValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                      createElementVNode("div", _hoisted_12, toDisplayString(unref(t)("tvp.tvpSearchbox.maxValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
                       createVNode(unref(TinyFormItem), {
                         prop: state.curMaxNumVar,
                         class: "tvp-search-box__number-item"
@@ -1108,7 +635,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyInput), {
                             modelValue: state[state.curMaxNumVar],
-                            "onUpdate:modelValue": _cache[27] || (_cache[27] = ($event) => state[state.curMaxNumVar] = $event),
+                            "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => state[state.curMaxNumVar] = $event),
                             type: "number",
                             class: "tvp-search-box__number-input"
                           }, null, 8, ["modelValue"])
@@ -1116,11 +643,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _: 1
                       }, 8, ["prop"])
                     ])) : createCommentVNode("", true),
-                    state.prevItem.type === "dateRange" ? (openBlock(), createElementBlock("div", _hoisted_55, [
-                      createElementVNode("div", _hoisted_56, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                    state.prevItem.type === "dateRange" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                      createElementVNode("div", _hoisted_14, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
                         value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
                       }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                      createElementVNode("div", _hoisted_57, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      createElementVNode("div", _hoisted_15, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
                       createVNode(unref(TinyFormItem), {
                         prop: "startDate",
                         "show-message": Boolean(state.prevItem.maxTimeLength),
@@ -1129,7 +656,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyDatePicker), {
                             modelValue: state.startDate,
-                            "onUpdate:modelValue": _cache[28] || (_cache[28] = ($event) => state.startDate = $event),
+                            "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => state.startDate = $event),
                             format: state.prevItem.format || state.dateRangeFormat,
                             "value-format": state.prevItem.format || state.dateRangeFormat,
                             "picker-options": unref(pickerOptions)(state.startDate, "endDate"),
@@ -1138,7 +665,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 1
                       }, 8, ["show-message"]),
-                      createElementVNode("div", _hoisted_58, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      createElementVNode("div", _hoisted_16, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
                       createVNode(unref(TinyFormItem), {
                         prop: "endDate",
                         class: "tvp-search-box__date-item"
@@ -1146,7 +673,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyDatePicker), {
                             modelValue: state.endDate,
-                            "onUpdate:modelValue": _cache[29] || (_cache[29] = ($event) => state.endDate = $event),
+                            "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => state.endDate = $event),
                             format: state.prevItem.format || state.dateRangeFormat,
                             "value-format": state.prevItem.format || state.dateRangeFormat,
                             "picker-options": unref(pickerOptions)(state.startDate),
@@ -1156,11 +683,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _: 1
                       })
                     ])) : createCommentVNode("", true),
-                    state.prevItem.type === "datetimeRange" ? (openBlock(), createElementBlock("div", _hoisted_59, [
-                      createElementVNode("div", _hoisted_60, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                    state.prevItem.type === "datetimeRange" ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                      createElementVNode("div", _hoisted_18, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
                         value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
                       }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                      createElementVNode("div", _hoisted_61, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      createElementVNode("div", _hoisted_19, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
                       createVNode(unref(TinyFormItem), {
                         prop: "startDateTime",
                         "show-message": Boolean(state.prevItem.maxTimeLength),
@@ -1169,7 +696,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyDatePicker), {
                             modelValue: state.startDateTime,
-                            "onUpdate:modelValue": _cache[30] || (_cache[30] = ($event) => state.startDateTime = $event),
+                            "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => state.startDateTime = $event),
                             type: "datetime",
                             isutc8: true,
                             format: state.prevItem.format || state.datetimeRangeFormat,
@@ -1180,7 +707,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 1
                       }, 8, ["show-message"]),
-                      createElementVNode("div", _hoisted_62, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      createElementVNode("div", _hoisted_20, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
                       createVNode(unref(TinyFormItem), {
                         prop: "endDateTime",
                         class: "tvp-search-box__date-item"
@@ -1188,7 +715,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         default: withCtx(() => [
                           createVNode(unref(TinyDatePicker), {
                             modelValue: state.endDateTime,
-                            "onUpdate:modelValue": _cache[31] || (_cache[31] = ($event) => state.endDateTime = $event),
+                            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => state.endDateTime = $event),
                             type: "datetime",
                             isutc8: true,
                             format: state.prevItem.format || state.datetimeRangeFormat,
@@ -1201,32 +728,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       })
                     ])) : createCommentVNode("", true)
                   ]),
-                  createElementVNode("div", _hoisted_63, [
+                  createElementVNode("div", _hoisted_21, [
                     createVNode(unref(TinyButton), {
                       size: "mini",
-                      onClick: _cache[32] || (_cache[32] = ($event) => unref(confirmEditTag)(true))
+                      onClick: _cache[17] || (_cache[17] = ($event) => unref(confirmEditTag)(false))
                     }, {
                       default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
                       ]),
                       _: 1
                     }),
                     createVNode(unref(TinyButton), {
                       size: "mini",
-                      onClick: _cache[33] || (_cache[33] = ($event) => unref(confirmEditTag)(false))
+                      onClick: _cache[18] || (_cache[18] = ($event) => unref(confirmEditTag)(true))
                     }, {
                       default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
                       ]),
                       _: 1
                     })
                   ])
-                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_64, [
+                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_22, [
                   renderSlot(_ctx.$slots, `${state.prevItem.slotName}-edit`, mergeProps({
                     showDropdown: () => unref(showPopover)(state),
                     onConfirm: unref(handleEditConfirm)
                   }, {
-                    onClick: _cache[34] || (_cache[34] = withModifiers(() => {
+                    onClick: _cache[19] || (_cache[19] = withModifiers(() => {
                     }, ["stop"]))
                   }))
                 ]))