@opentiny/vue-search-box 0.1.1-alpha.3 → 0.1.2

package/dist/lib/index.vue.cjs2.js

@@ -5,9 +5,6 @@ const TinyTag = require("@opentiny/vue-tag");
 const TinyInput = require("@opentiny/vue-input");
 const TinyDropdown = require("@opentiny/vue-dropdown");
 const TinyDropdownMenu = require("@opentiny/vue-dropdown-menu");
-const TinyDropdownItem = require("@opentiny/vue-dropdown-item");
-const TinyCheckbox = require("@opentiny/vue-checkbox");
-const TinyCheckboxGroup = require("@opentiny/vue-checkbox-group");
 const TinyButton = require("@opentiny/vue-button");
 const TinyTooltip = require("@opentiny/vue-tooltip");
 const TinyDatePicker = require("@opentiny/vue-date-picker");
@@ -17,6 +14,7 @@ const TinyPopover = require("@opentiny/vue-popover");
 const TinySelect = require("@opentiny/vue-select");
 const TinyOption = require("@opentiny/vue-option");
 const vueIcon = require("@opentiny/vue-icon");
+const date = require("./utils/date.cjs.js");
 const index = require("./index.cjs.js");
 const useTag = require("./composables/use-tag.cjs.js");
 const useDropdown = require("./composables/use-dropdown.cjs.js");
@@ -29,9 +27,13 @@ const useCustom = require("./composables/use-custom.cjs.js");
 const useInit = require("./composables/use-init.cjs.js");
 const usePlaceholder = require("./composables/use-placeholder.cjs.js");
 const dropdown = require("./utils/dropdown.cjs.js");
+require("./components/first-level-panel.vue.cjs.js");
+require("./components/second-level-panel.vue.cjs.js");
 ;/* empty css                */
 const clone = require("./utils/clone.cjs.js");
-const date = require("./utils/date.cjs.js");
+const tag = require("./utils/tag.cjs.js");
+const firstLevelPanel_vue_vue_type_script_setup_true_lang = require("./components/first-level-panel.vue.cjs2.js");
+const secondLevelPanel_vue_vue_type_script_setup_true_lang = require("./components/second-level-panel.vue.cjs2.js");
 const _hoisted_1 = { class: "tvp-search-box__tag-value" };
 const _hoisted_2 = {
   key: 0,
@@ -40,113 +42,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"
 };
@@ -207,14 +134,9 @@ const _sfc_main = /* @__PURE__ */ vue.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;
@@ -239,27 +161,18 @@ const _sfc_main = /* @__PURE__ */ vue.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: index.t("tvp.tvpSearchbox.rulekeyword1"),
-        field: "tvpKeyword",
-        type: "radio"
-      },
+      allTypeAttri: { label: index.t("tvp.tvpSearchbox.rulekeyword1"), field: "tvpKeyword", type: "radio" },
       operatorValue: ":",
       // 当前操作符值
       inputEditValue: "",
       currentOperators: "",
       currentEditValue: "",
-      isShowDropdown: true,
-      // 控制有匹配数据展示开关
-      isShowPanel: true,
-      // 控制面板显隐
       currentModelValueIndex: -1,
       // 当前编辑的标签索引
       curMinNumVar: "",
@@ -268,21 +181,31 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       // numRange最大值变量
       instance: vue.getCurrentInstance(),
       isMouseDown: false,
-      isResetFlag: true,
-      // 输入框触发源重置
-      currentEditSelectTags: []
+      currentEditSelectTags: [],
       // 当前编辑多选的标签值
+      visible: false,
+      visibleTimer: null,
+      hasBackupList: vue.computed(
+        () => state.propItem.label && [void 0, "radio", "checkbox", "map"].includes(state.prevItem.type)
+      ),
+      isIndeterminate: vue.computed(
+        () => state.checkboxGroup.length > 0 && state.checkboxGroup.length !== state.filterList.length
+      ),
+      checkAll: vue.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 = vue.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 = vueIcon.iconSearch();
     const TinyIconClose = vueIcon.iconClose();
     const TinyIconHelpQuery = vueIcon.iconHelpQuery();
-    const { selectPropItem, selectRadioItem, createTag, helpClick, setOperator } = useDropdown.useDropdown({
+    const { selectPropItem, selectRadioItem, selectInputValue, createTag, helpClick, setOperator } = useDropdown.useDropdown({
       props,
       emits,
       state,
@@ -308,7 +231,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       emits
     });
     const { placeholder, setPlaceholder } = usePlaceholder.usePlaceholder({ props, state, t: index.t });
-    const { selectCheckbox, isIndeterminate, checkAll, isShowClose } = useCheckbox.useCheckbox({
+    const { selectCheckbox, isShowClose } = useCheckbox.useCheckbox({
       props,
       state,
       emits
@@ -372,7 +295,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           });
           dropdown.showPopover(state, false);
           if (newVal.length === 0) {
-            setPlaceholder(props.emptyPlaceholder || index.t("tvp.tvpSearchbox.defaultPlaceholder"));
+            setPlaceholder(props.emptyPlaceholder);
           }
           if (props.editable && !state.inputEditValue.length && newVal[0]) {
             state.inputEditValue = newVal[0].value;
@@ -386,35 +309,54 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     );
     vue.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);
+      }
     });
     vue.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 vue.openBlock(), vue.createElementBlock("div", {
         class: "tvp-search-box",
-        onClick: _cache[36] || (_cache[36] = vue.withModifiers(($event) => vue.unref(dropdown.showPopover)(state, false), ["stop"]))
+        onClick: _cache[21] || (_cache[21] = vue.withModifiers(($event) => vue.unref(dropdown.showPopover)(state, false), ["stop"]))
       }, [
         vue.createVNode(vue.unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.modelValue, (tag, index2) => {
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.modelValue, (tag2, index2) => {
           return vue.openBlock(), vue.createBlock(vue.unref(TinyTag), {
-            key: tag.field + index2,
+            key: tag2.field + index2,
             closable: "",
-            class: vue.normalizeClass(["tvp-search-box__tag", __props.editable && tag.type !== "map" ? "tvp-search-box__tag-editor" : ""]),
-            title: `${tag.label} ${tag.operator || ":"} ${tag.value}`,
-            onClose: ($event) => vue.unref(deleteTag)(tag),
-            onClick: vue.withModifiers(($event) => vue.unref(editTag)(tag, index2, $event), ["stop"])
+            class: vue.normalizeClass(["tvp-search-box__tag", __props.editable && tag2.type !== "map" ? "tvp-search-box__tag-editor" : ""]),
+            title: `${tag2.label} ${tag2.operator || ":"} ${tag2.value}`,
+            onClose: ($event) => vue.unref(deleteTag)(tag2),
+            onClick: vue.withModifiers(($event) => vue.unref(editTag)(tag2, index2, $event), ["stop"])
           }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(tag.label) + " " + vue.toDisplayString(tag.operator || ":") + " " + vue.toDisplayString(tag.value), 1)
+              vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(tag2.label) + " " + vue.toDisplayString(tag2.operator || ":") + " " + vue.toDisplayString(tag2.value), 1)
             ]),
             _: 2
           }, 1032, ["class", "title", "onClose", "onClick"]);
@@ -441,11 +383,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.createVNode(vue.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: vue.withCtx(() => [
                   vue.createVNode(vue.unref(TinyDropdownMenu), {
@@ -456,468 +400,52 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, ["stop"])
                   }, {
                     default: vue.withCtx(() => {
-                      var _a;
+                      var _a, _b;
                       return [
                         vue.withDirectives(vue.createElementVNode("div", null, [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.matchItems, (value, key) => {
-                            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key }, [
-                              value["attr"].length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                                vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key), 1),
-                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attr"], (item, index2) => {
-                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                    key: item.label + index2,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => vue.unref(selectPropItem)(item)
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createElementVNode("span", null, [
-                                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.match, (text) => {
-                                          return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: text }, [
-                                            Array.isArray(text) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(text[0]), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                              vue.createTextVNode(vue.toDisplayString(text), 1)
-                                            ], 64))
-                                          ], 64);
-                                        }), 128))
-                                      ])
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["onClick"]);
-                                }), 128))
-                              ], 64)) : vue.createCommentVNode("", true),
-                              value["attrValue"].length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.propertyValue", [key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key])), 1),
-                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attrValue"], (item, index2) => {
-                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                    key: item.label + index2,
-                                    disabled: item.isChecked,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => vue.unref(selectRadioItem)(item, true)
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createElementVNode("span", null, [
-                                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.match, (text) => {
-                                          return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: text }, [
-                                            Array.isArray(text) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9, vue.toDisplayString(text[0]), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                              vue.createTextVNode(vue.toDisplayString(text), 1)
-                                            ], 64))
-                                          ], 64);
-                                        }), 128))
-                                      ])
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["disabled", "onClick"]);
-                                }), 128))
-                              ], 64)) : vue.createCommentVNode("", true)
-                            ], 64);
-                          }), 128)),
-                          __props.showNoDataTip && !state.isShowDropdown ? (vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), { key: 0 }, {
-                            default: vue.withCtx(() => [
-                              vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.noData")), 1)
-                            ]),
-                            _: 1
-                          })) : vue.createCommentVNode("", true),
-                          vue.withDirectives(vue.createElementVNode("div", null, [
-                            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.matched")), 1),
-                            vue.createElementVNode("div", _hoisted_11, [
-                              state.potentialOptions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
-                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.potentialOptions, (item, index2) => {
-                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                    key: item.label + index2,
-                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
-                                    onClick: ($event) => vue.unref(selectRadioItem)(item, true)
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createTextVNode(vue.toDisplayString(item.label) + "： ", 1),
-                                      vue.createElementVNode("span", _hoisted_13, vue.toDisplayString(item.value), 1)
-                                    ]),
-                                    _: 2
-                                  }, 1032, ["onClick"]);
-                                }), 128))
-                              ])) : vue.createCommentVNode("", true)
-                            ])
-                          ], 512), [
-                            [vue.vShow, props.potentialOptions]
-                          ])
-                        ], 512), [
-                          [vue.vShow, state.isResetFlag && !state.propItem.label && state.inputValue.trim()]
-                        ]),
-                        vue.withDirectives(vue.createElementVNode("div", _hoisted_14, [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.groupItems, (group, key) => {
-                            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key }, [
-                              group.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, vue.toDisplayString(key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key), 1)) : vue.createCommentVNode("", true),
-                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group, (item, index2) => {
-                                return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                  key: (item.field || item.label) + index2,
-                                  class: "tvp-search-box__dropdown-item",
-                                  onClick: ($event) => vue.unref(selectPropItem)(item)
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createElementVNode("span", {
-                                      title: item.label
-                                    }, vue.toDisplayString(item.label), 9, _hoisted_16)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["onClick"]);
-                              }), 128))
-                            ], 64);
-                          }), 128))
+                          ((_a = state.instance) == null ? void 0 : _a.slots["first-panel"]) ? vue.renderSlot(_ctx.$slots, "first-panel", vue.mergeProps({ key: 0 }, {
+                            state,
+                            handleEvents
+                          }, {
+                            onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                            }, ["stop"]))
+                          })) : (vue.openBlock(), vue.createBlock(firstLevelPanel_vue_vue_type_script_setup_true_lang.default, {
+                            key: 1,
+                            state,
+                            onEvents: handleEvents
+                          }, null, 8, ["state"]))
                         ], 512), [
-                          [vue.vShow, state.isResetFlag && !state.propItem.label && !state.inputValue.trim()]
+                          [vue.vShow, !state.propItem.label || state.inputValue.trim()]
                         ]),
                         vue.withDirectives(vue.createElementVNode("div", null, [
-                          ((_a = state.currentOperators) == null ? void 0 : _a.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
-                            vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.operator")), 1),
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.currentOperators, (item, index2) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                key: item + index2,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => vue.unref(setOperator)(item)
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(item), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["onClick"])), [
-                                [vue.vShow, item.includes(state.inputValue)]
-                              ]);
-                            }), 128))
-                          ])) : !state.prevItem.type || state.prevItem.type === "radio" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.backupList, (item, index2) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                key: index2 + (item.field || item.label),
-                                disabled: item.isChecked,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => vue.unref(selectRadioItem)(item)
-                              }, {
-                                default: vue.withCtx(() => [
-                                  item.match ? (vue.openBlock(), vue.createElementBlock("span", {
-                                    key: 0,
-                                    title: item.label
-                                  }, [
-                                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.match, (text) => {
-                                      return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: text }, [
-                                        Array.isArray(text) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_21, vue.toDisplayString(text[0]), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                                          vue.createTextVNode(vue.toDisplayString(text), 1)
-                                        ], 64))
-                                      ], 64);
-                                    }), 128))
-                                  ], 8, _hoisted_20)) : (vue.openBlock(), vue.createElementBlock("span", {
-                                    key: 1,
-                                    title: item.label
-                                  }, vue.toDisplayString(item.label), 9, _hoisted_22))
-                                ]),
-                                _: 2
-                              }, 1032, ["disabled", "onClick"])), [
-                                [vue.vShow, !item.isFilter || !state.inputValue]
-                              ]);
-                            }), 128))
-                          ])) : state.isResetFlag && state.prevItem.type === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23, [
-                            vue.createElementVNode("div", _hoisted_24, [
-                              vue.createVNode(vue.unref(TinyCheckboxGroup), {
-                                modelValue: vue.unref(checkAll),
-                                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => vue.isRef(checkAll) ? checkAll.value = $event : null),
-                                class: "tvp-search-box__checkbox"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.unref(TinyDropdownItem), { class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item" }, {
-                                    default: vue.withCtx(() => [
-                                      vue.createVNode(vue.unref(TinyCheckbox), {
-                                        modelValue: vue.unref(checkAll),
-                                        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(checkAll) ? checkAll.value = $event : null),
-                                        indeterminate: vue.unref(isIndeterminate)
-                                      }, {
-                                        default: vue.withCtx(() => [
-                                          vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.selectAll")), 1)
-                                        ]),
-                                        _: 1
-                                      }, 8, ["modelValue", "indeterminate"])
-                                    ]),
-                                    _: 1
-                                  })
-                                ]),
-                                _: 1
-                              }, 8, ["modelValue"]),
-                              vue.createVNode(vue.unref(TinyCheckboxGroup), {
-                                modelValue: state.checkboxGroup,
-                                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.checkboxGroup = $event),
-                                class: "tvp-search-box__checkbox"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.backupList, (item, index2) => {
-                                    return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                      key: (item.field || item.label) + index2,
-                                      class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item"
-                                    }, {
-                                      default: vue.withCtx(() => [
-                                        vue.createVNode(vue.unref(TinyCheckbox), {
-                                          label: state.prevItem.label + item.label,
-                                          title: item.label,
-                                          class: "tvp-search-box__checkbox-item-label"
-                                        }, {
-                                          default: vue.withCtx(() => [
-                                            vue.createTextVNode(vue.toDisplayString(item.label), 1)
-                                          ]),
-                                          _: 2
-                                        }, 1032, ["label", "title"])
-                                      ]),
-                                      _: 2
-                                    }, 1024)), [
-                                      [vue.vShow, !item.isFilter]
-                                    ]);
-                                  }), 128))
-                                ]),
-                                _: 1
-                              }, 8, ["modelValue"])
-                            ]),
-                            vue.createElementVNode("div", _hoisted_25, [
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[5] || (_cache[5] = ($event) => vue.unref(selectCheckbox)(true))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(selectCheckbox)(false))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
-                            vue.createElementVNode("div", _hoisted_27, [
-                              vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeNumberTitle")), 1),
-                              vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.minValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: state.curMinNumVar,
-                                class: "tvp-search-box__number-item",
-                                "show-message": state.numberShowMessage
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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"]),
-                              vue.createElementVNode("div", _hoisted_30, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.maxValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: state.curMaxNumVar,
-                                class: "tvp-search-box__number-item"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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"])
-                            ]),
-                            vue.createElementVNode("div", _hoisted_31, [
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[9] || (_cache[9] = vue.withModifiers(($event) => vue.unref(sizeChange)(true), ["stop"]))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[10] || (_cache[10] = ($event) => vue.unref(sizeChange)(false))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "dateRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
-                            vue.createElementVNode("div", _hoisted_33, [
-                              vue.createElementVNode("div", _hoisted_34, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
-                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
-                              }) : vue.unref(index.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                              vue.createElementVNode("div", _hoisted_35, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: "startDate",
-                                "show-message": Boolean(state.prevItem.maxTimeLength),
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDate, "endDate"),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: vue.unref(handleDateShow),
-                                    onBlur: vue.unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              }, 8, ["show-message"]),
-                              vue.createElementVNode("div", _hoisted_36, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: "endDate",
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDate),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: vue.unref(handleDateShow),
-                                    onBlur: vue.unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            vue.createElementVNode("div", _hoisted_37, [
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[13] || (_cache[13] = ($event) => vue.unref(onConfirmDate)(true))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[14] || (_cache[14] = ($event) => vue.unref(onConfirmDate)(false))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "datetimeRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_38, [
-                            vue.createElementVNode("div", _hoisted_39, [
-                              vue.createElementVNode("div", _hoisted_40, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
-                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
-                              }) : vue.unref(index.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                              vue.createElementVNode("div", _hoisted_41, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: "startDateTime",
-                                "show-message": Boolean(state.prevItem.maxTimeLength),
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDateTime, "endDateTime"),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: vue.unref(handleDateShow),
-                                    onBlur: vue.unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              }, 8, ["show-message"]),
-                              vue.createElementVNode("div", _hoisted_42, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
-                              vue.createVNode(vue.unref(TinyFormItem), {
-                                prop: "endDateTime",
-                                class: "tvp-search-box__date-item"
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDateTime),
-                                    class: "tvp-search-box__date-picker",
-                                    onChange: vue.unref(handleDateShow),
-                                    onBlur: vue.unref(handleDateShow)
-                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            vue.createElementVNode("div", _hoisted_43, [
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[17] || (_cache[17] = ($event) => vue.unref(onConfirmDate)(true, true))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
-                                ]),
-                                _: 1
-                              }),
-                              vue.createVNode(vue.unref(TinyButton), {
-                                size: "mini",
-                                onClick: _cache[18] || (_cache[18] = ($event) => vue.unref(onConfirmDate)(false, true))
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : state.prevItem.type === "map" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_44, [
-                            state.isShowTagKey ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_45, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.tagKey")), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_46, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.tagValue")), 1)),
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.backupList, (item, index2) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
-                                key: item.label + item.value + index2,
-                                disabled: item.isChecked,
-                                class: "tvp-search-box__dropdown-item",
-                                onClick: ($event) => vue.unref(selectFirstMap)(item, state.isShowTagKey)
-                              }, {
-                                default: vue.withCtx(() => [
-                                  vue.createElementVNode("span", {
-                                    title: item.label
-                                  }, vue.toDisplayString(item.label), 9, _hoisted_47)
-                                ]),
-                                _: 2
-                              }, 1032, ["disabled", "onClick"])), [
-                                [vue.vShow, !item.isFilter]
-                              ]);
-                            }), 128))
-                          ])) : state.prevItem.type === "custom" ? (vue.openBlock(), vue.createElementBlock("div", {
-                            key: 7,
+                          ((_b = state.instance) == null ? void 0 : _b.slots["second-panel"]) ? vue.renderSlot(_ctx.$slots, "second-panel", vue.mergeProps({ key: 0 }, {
+                            state,
+                            pickerOptions: vue.unref(pickerOptions),
+                            handleEvents,
+                            back: () => vue.unref(tag.resetInput)(state)
+                          }, {
+                            onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                            }, ["stop"]))
+                          })) : state.prevItem.type !== "custom" ? (vue.openBlock(), vue.createBlock(secondLevelPanel_vue_vue_type_script_setup_true_lang.default, {
+                            key: 1,
+                            state,
+                            "picker-options": vue.unref(pickerOptions),
+                            onEvents: handleEvents
+                          }, null, 8, ["state", "picker-options"])) : (vue.openBlock(), vue.createElementBlock("div", {
+                            key: 2,
                             class: "tvp-search-box__panel-box",
-                            onClick: _cache[20] || (_cache[20] = ($event) => vue.unref(dropdown.showDropdown)(state))
+                            onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(dropdown.showDropdown)(state))
                           }, [
                             vue.renderSlot(_ctx.$slots, state.prevItem.slotName, vue.mergeProps({
                               showDropdown: () => vue.unref(dropdown.showDropdown)(state),
                               onConfirm: vue.unref(handleConfirm)
                             }, {
-                              onClick: _cache[19] || (_cache[19] = vue.withModifiers(() => {
+                              onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
                               }, ["stop"]))
                             }))
-                          ])) : vue.createCommentVNode("", true),
-                          __props.showNoDataTip && !state.isShowDropdown ? (vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), { key: 8 }, {
-                            default: vue.withCtx(() => [
-                              vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.noData")), 1)
-                            ]),
-                            _: 1
-                          })) : vue.createCommentVNode("", true)
+                          ]))
                         ], 512), [
-                          [vue.vShow, state.isResetFlag && state.propItem.label]
+                          [vue.vShow, state.propItem.label]
                         ])
                       ];
                     }),
@@ -937,7 +465,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       vue.withKeys(vue.withModifiers(vue.unref(createTag), ["stop"]), ["enter"])
                     ],
                     onInput: vue.unref(handleInput),
-                    onFocus: _cache[1] || (_cache[1] = ($event) => vue.unref(dropdown.showPopover)(state, false)),
                     onClick: vue.unref(handleClick)
                   }, {
                     suffix: vue.withCtx(() => [
@@ -952,7 +479,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ]),
                       __props.showHelp ? (vue.openBlock(), vue.createBlock(vue.unref(TinyTooltip), {
                         key: 0,
-                        effect: "dark",
+                        effect: "light",
                         content: vue.unref(index.t)("tvp.tvpSearchbox.help"),
                         placement: "top"
                       }, {
@@ -973,13 +500,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
                 ]),
                 _: 3
-              }, 8, ["hide-on-click"])
+              }, 8, ["visible"])
             ]),
             __props.editable ? (vue.openBlock(), vue.createBlock(vue.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",
@@ -988,13 +515,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, {
               default: vue.withCtx(() => [
                 state.prevItem.type !== "custom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createElementVNode("div", _hoisted_48, [
-                    vue.createElementVNode("div", _hoisted_49, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.attributeType")), 1),
+                  vue.createElementVNode("div", _hoisted_6, [
+                    vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.attributeType")), 1),
                     vue.createVNode(vue.unref(TinyFormItem), { class: "tvp-search-box__number-item" }, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.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
                         }, {
@@ -1004,7 +531,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               label: vue.unref(index.t)("tvp.tvpSearchbox.allProperty"),
                               value: state.allTypeAttri.label,
                               disabled: vue.unref(selectItemIsDisable)(state.allTypeAttri),
-                              onClick: _cache[21] || (_cache[21] = ($event) => vue.unref(selectPropChange)(state.allTypeAttri, vue.unref(selectItemIsDisable)(state.allTypeAttri)))
+                              onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(selectPropChange)(state.allTypeAttri, vue.unref(selectItemIsDisable)(state.allTypeAttri)))
                             }, null, 8, ["label", "value", "disabled"])),
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.recordItems, (item) => {
                               return vue.openBlock(), vue.createBlock(vue.unref(TinyOption), {
@@ -1021,7 +548,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ]),
                       _: 1
                     }),
-                    state.prevItem.operators ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.operator")), 1)) : vue.createCommentVNode("", true),
+                    state.prevItem.operators ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.operator")), 1)) : vue.createCommentVNode("", true),
                     state.prevItem.operators ? (vue.openBlock(), vue.createBlock(vue.unref(TinyFormItem), {
                       key: 1,
                       class: "tvp-search-box__number-item"
@@ -1029,7 +556,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.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: vue.withCtx(() => [
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.currentOperators, (item) => {
@@ -1045,22 +572,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ]),
                       _: 1
                     })) : vue.createCommentVNode("", true),
-                    state.prevItem.type !== "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.tagValue")), 1)) : vue.createCommentVNode("", true),
+                    state.prevItem.type !== "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.tagValue")), 1)) : vue.createCommentVNode("", true),
                     !["numRange", "dateRange", "datetimeRange", "custom"].includes(state.prevItem.type) ? (vue.openBlock(), vue.createBlock(vue.unref(TinyFormItem), {
                       key: 3,
                       prop: "inputEditValue",
                       class: "tvp-search-box__number-item"
                     }, {
                       default: vue.withCtx(() => {
-                        var _a;
+                        var _a, _b;
                         return [
                           ((_a = state.currentEditValue) == null ? void 0 : _a.length) > 0 ? (vue.openBlock(), vue.createBlock(vue.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: ""
@@ -1075,18 +602,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               }), 128))
                             ]),
                             _: 1
-                          }, 8, ["modelValue", "multiple"])) : (vue.openBlock(), vue.createBlock(vue.unref(TinyInput), {
+                          }, 8, ["modelValue", "multiple", "allow-create"])) : (vue.openBlock(), vue.createBlock(vue.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
                     })) : vue.createCommentVNode("", true),
-                    state.prevItem.type === "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
-                      vue.createElementVNode("div", _hoisted_53, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.minValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
+                    state.prevItem.type === "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                      vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.minValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: state.curMinNumVar,
                         class: "tvp-search-box__number-item",
@@ -1095,14 +622,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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"]),
-                      vue.createElementVNode("div", _hoisted_54, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.maxValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
+                      vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.maxValueText")) + "(" + vue.toDisplayString(state.prevItem.unit) + ") ", 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: state.curMaxNumVar,
                         class: "tvp-search-box__number-item"
@@ -1110,7 +637,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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"])
@@ -1118,11 +645,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         _: 1
                       }, 8, ["prop"])
                     ])) : vue.createCommentVNode("", true),
-                    state.prevItem.type === "dateRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_55, [
-                      vue.createElementVNode("div", _hoisted_56, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                    state.prevItem.type === "dateRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+                      vue.createElementVNode("div", _hoisted_14, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
                         value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
                       }) : vue.unref(index.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                      vue.createElementVNode("div", _hoisted_57, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      vue.createElementVNode("div", _hoisted_15, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: "startDate",
                         "show-message": Boolean(state.prevItem.maxTimeLength),
@@ -1131,7 +658,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDate, "endDate"),
@@ -1140,7 +667,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ]),
                         _: 1
                       }, 8, ["show-message"]),
-                      vue.createElementVNode("div", _hoisted_58, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: "endDate",
                         class: "tvp-search-box__date-item"
@@ -1148,7 +675,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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": vue.unref(pickerOptions)(state.startDate),
@@ -1158,11 +685,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         _: 1
                       })
                     ])) : vue.createCommentVNode("", true),
-                    state.prevItem.type === "datetimeRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_59, [
-                      vue.createElementVNode("div", _hoisted_60, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                    state.prevItem.type === "datetimeRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
+                      vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(state.prevItem.maxTimeLength > 0 ? vue.unref(index.t)("tvp.tvpSearchbox.timeLengthTitle", {
                         value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
                       }) : vue.unref(index.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
-                      vue.createElementVNode("div", _hoisted_61, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      vue.createElementVNode("div", _hoisted_19, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: "startDateTime",
                         "show-message": Boolean(state.prevItem.maxTimeLength),
@@ -1171,7 +698,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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,
@@ -1182,7 +709,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ]),
                         _: 1
                       }, 8, ["show-message"]),
-                      vue.createElementVNode("div", _hoisted_62, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      vue.createElementVNode("div", _hoisted_20, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
                       vue.createVNode(vue.unref(TinyFormItem), {
                         prop: "endDateTime",
                         class: "tvp-search-box__date-item"
@@ -1190,7 +717,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.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,
@@ -1203,32 +730,32 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       })
                     ])) : vue.createCommentVNode("", true)
                   ]),
-                  vue.createElementVNode("div", _hoisted_63, [
+                  vue.createElementVNode("div", _hoisted_21, [
                     vue.createVNode(vue.unref(TinyButton), {
                       size: "mini",
-                      onClick: _cache[32] || (_cache[32] = ($event) => vue.unref(confirmEditTag)(true))
+                      onClick: _cache[17] || (_cache[17] = ($event) => vue.unref(confirmEditTag)(false))
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
+                        vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
                       ]),
                       _: 1
                     }),
                     vue.createVNode(vue.unref(TinyButton), {
                       size: "mini",
-                      onClick: _cache[33] || (_cache[33] = ($event) => vue.unref(confirmEditTag)(false))
+                      onClick: _cache[18] || (_cache[18] = ($event) => vue.unref(confirmEditTag)(true))
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.cancel")), 1)
+                        vue.createTextVNode(vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.confirm")), 1)
                       ]),
                       _: 1
                     })
                   ])
-                ], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
+                ], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_22, [
                   vue.renderSlot(_ctx.$slots, `${state.prevItem.slotName}-edit`, vue.mergeProps({
                     showDropdown: () => vue.unref(dropdown.showPopover)(state),
                     onConfirm: vue.unref(handleEditConfirm)
                   }, {
-                    onClick: _cache[34] || (_cache[34] = vue.withModifiers(() => {
+                    onClick: _cache[19] || (_cache[19] = vue.withModifiers(() => {
                     }, ["stop"]))
                   }))
                 ]))