@opentiny/vue-search-box 0.0.1

package/lib/index.vue.cjs2.js

@@ -0,0 +1,1287 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+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");
+const TinyForm = require("@opentiny/vue-form");
+const TinyFormItem = require("@opentiny/vue-form-item");
+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 locale = require("@opentiny/vue-locale");
+const useTag = require("./composables/use-tag.cjs.js");
+const useDropdown = require("./composables/use-dropdown.cjs.js");
+const useMatch = require("./composables/use-match.cjs.js");
+const useCheckbox = require("./composables/use-checkbox.cjs.js");
+const useDatepicker = require("./composables/use-datepicker.cjs.js");
+const useNumRange = require("./composables/use-num-range.cjs.js");
+const useEdit = require("./composables/use-edit.cjs.js");
+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");
+;/* empty css                */
+const clone = require("./utils/clone.cjs.js");
+const date = require("./utils/date.cjs.js");
+const zh_CN = require("./utils/zh_CN.cjs.js");
+const en_US = require("./utils/en_US.cjs.js");
+const vueI18n = require("vue-i18n");
+const _hoisted_1 = { class: "tvp-search-box__tag-value" };
+const _hoisted_2 = {
+  key: 0,
+  class: "tvp-search-box__placeholder"
+};
+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 = {
+  key: 0,
+  class: "tvp-search-box__dropdown-end"
+};
+const _hoisted_51 = {
+  key: 2,
+  class: "tvp-search-box__dropdown-end"
+};
+const _hoisted_52 = {
+  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 = {
+  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 = {
+  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 = {
+  key: 1,
+  class: "tvp-search-box__panel-box"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "VueSearchBox"
+  },
+  __name: "index",
+  props: {
+    modelValue: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    emptyPlaceholder: {
+      type: String,
+      default: locale.t("tvp.tvpSearchbox.defaultPlaceholder")
+    },
+    potentialOptions: {
+      type: Object,
+      default() {
+        return null;
+      }
+    },
+    // 是否显示帮助图标，新规范默认显示
+    showHelp: {
+      type: Boolean,
+      default: true
+    },
+    // 标签标识键
+    idMapKey: {
+      type: String,
+      default: "id"
+    },
+    // 自定义默认搜索项
+    defaultField: {
+      type: String,
+      default: ""
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number
+    },
+    // 3.18.0新增
+    panelMaxHeight: {
+      type: String,
+      default: "999px"
+    },
+    // 3.18.0新增
+    splitInputValue: {
+      type: String,
+      default: ","
+    },
+    // 3.18.0新增
+    showNoDataTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "change",
+    "search",
+    "exceed",
+    "first-level-select"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    locale.initI18n({
+      i18n: "zhCN",
+      createI18n: vueI18n.createI18n,
+      messages: {
+        zhCN: { ...zh_CN.zhCN },
+        enUS: { ...en_US.enUS }
+      }
+    });
+    const props = __props;
+    const emits = __emit;
+    const state = vue.reactive({
+      innerModelValue: [...props.modelValue],
+      recordItems: [],
+      groupItems: {},
+      inputValue: "",
+      matchItems: {},
+      propItem: {},
+      backupList: [],
+      filterList: [],
+      checkboxGroup: [],
+      prevItem: {},
+      backupPrevItem: "",
+      formRules: null,
+      validType: "text",
+      numberShowMessage: true,
+      startDate: null,
+      startDateTime: null,
+      endDate: null,
+      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: locale.t("tvp.tvpSearchbox.rulekeyword1"),
+        field: "tvpKeyword",
+        type: "radio"
+      },
+      operatorValue: ":",
+      // 当前操作符值
+      inputEditValue: "",
+      currentOperators: "",
+      currentEditValue: "",
+      isShowDropdown: true,
+      // 控制有匹配数据展示开关
+      isShowPanel: true,
+      // 控制面板显隐
+      currentModelValueIndex: -1,
+      // 当前编辑的标签索引
+      curMinNumVar: "",
+      // numRange最小值变量
+      curMaxNumVar: "",
+      // numRange最大值变量
+      instance: vue.getCurrentInstance(),
+      isMouseDown: false,
+      isResetFlag: true,
+      // 输入框触发源重置
+      currentEditSelectTags: []
+      // 当前编辑多选的标签值
+    });
+    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({
+      props,
+      emits,
+      state,
+      t: locale.t,
+      format: date.format
+    });
+    const { deleteTag, clearTag, backspaceDeleteTag } = useTag.useTag({
+      props,
+      state,
+      emits
+    });
+    const { editTag, confirmEditTag, selectPropChange, selectItemIsDisable } = useEdit.useEdit({
+      props,
+      state,
+      t: locale.t,
+      nextTick: vue.nextTick,
+      format: date.format,
+      emits
+    });
+    const { handleInput, selectFirstMap } = useMatch.useMatch({
+      props,
+      state,
+      emits
+    });
+    const { placeholder, setPlaceholder } = usePlaceholder.usePlaceholder({ props, state, t: locale.t });
+    const { selectCheckbox, isIndeterminate, checkAll, isShowClose } = useCheckbox.useCheckbox({
+      props,
+      state,
+      emits
+    });
+    const { onConfirmDate, handleDateShow, pickerOptions } = useDatepicker.useDatePicker({
+      props,
+      state,
+      emits
+    });
+    const { sizeChange, initFormRule } = useNumRange.useNumRange({
+      props,
+      state,
+      t: locale.t,
+      emits
+    });
+    const { handleConfirm, handleEditConfirm } = useCustom.useCustom({ state, emits });
+    const {
+      initItems,
+      watchOutsideClick,
+      watchMouseDown,
+      watchMouseMove,
+      handleClick
+    } = useInit.useInit({
+      props,
+      state
+    });
+    vue.watch(
+      () => props.items,
+      (newVal) => {
+        state.recordItems = clone.deepClone(newVal);
+        initItems();
+        initFormRule();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => state.popoverVisible,
+      (newVal) => {
+        if (!newVal && !state.inputEditValue.length) {
+          state.inputEditValue = state.currentEditSelectTags;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal) {
+          state.indexMap.clear();
+          state.valueMap.clear();
+          newVal.forEach((item, index) => {
+            var _a;
+            const value = `${item.label}${item.value}`;
+            state.indexMap.set(item.label, index);
+            state.valueMap.set(value, index);
+            if (((_a = item.options) == null ? void 0 : _a.length) > 0) {
+              item.options.forEach((option) => {
+                const optionValue = `${item.label}${option.label}`;
+                state.valueMap.set(optionValue, index);
+              });
+            }
+          });
+          dropdown.showPopover(state, false);
+          if (newVal.length === 0) {
+            setPlaceholder(props.emptyPlaceholder);
+          }
+          if (props.editable && !state.inputEditValue.length && newVal[0]) {
+            state.inputEditValue = newVal[0].value;
+          }
+        }
+        state.innerModelValue = [...newVal];
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    vue.onMounted(() => {
+      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);
+    });
+    __expose({
+      state
+    });
+    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"]))
+      }, [
+        vue.createVNode(vue.unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.modelValue, (tag, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(TinyTag), {
+            key: tag.field + index,
+            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, index, $event), ["stop"])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(tag.label) + " " + vue.toDisplayString(tag.operator || ":") + " " + vue.toDisplayString(tag.value), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "title", "onClose", "onClick"]);
+        }), 128)),
+        __props.modelValue.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2)) : vue.createCommentVNode("", true),
+        vue.createVNode(vue.unref(TinyForm), {
+          ref: "formRef",
+          model: state,
+          rules: state.formRules,
+          "validate-type": state.validType,
+          "label-width": "0px",
+          "message-type": "block",
+          class: "tvp-search-box__form"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("section", _hoisted_4, [
+                vue.withDirectives(vue.createElementVNode("span", null, vue.toDisplayString(state.propItem.label) + " " + vue.toDisplayString(`${state.operatorValue ? state.operatorValue : ""} `), 513), [
+                  [vue.vShow, state.propItem.label]
+                ]),
+                vue.withDirectives(vue.createElementVNode("span", null, vue.toDisplayString(state.propItem.value), 513), [
+                  [vue.vShow, state.propItem.value]
+                ])
+              ]),
+              vue.createVNode(vue.unref(TinyDropdown), {
+                ref: "dropdownRef",
+                trigger: "click",
+                class: "tvp-search-box__dropdown",
+                "hide-on-click": state.hiden,
+                "show-icon": false,
+                "lazy-show-popper": ""
+              }, {
+                dropdown: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(TinyDropdownMenu), {
+                    placement: "bottom-start",
+                    "popper-class": "tvp-search-box__dropdown-menu",
+                    style: vue.normalizeStyle({ "max-height": __props.panelMaxHeight }),
+                    onMouseup: vue.withModifiers(() => {
+                    }, ["stop"])
+                  }, {
+                    default: vue.withCtx(() => {
+                      var _a;
+                      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(locale.t)("tvp.tvpSearchbox.attributeType") : key), 1),
+                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attr"], (item, index) => {
+                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    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(locale.t)("tvp.tvpSearchbox.propertyValue", [
+                                  key === "0" ? vue.unref(locale.t)("tvp.tvpSearchbox.attributeType") : key
+                                ])), 1),
+                                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attrValue"], (item, index) => {
+                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    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(locale.t)("tvp.tvpSearchbox.noData")), 1)
+                            ]),
+                            _: 1
+                          })) : vue.createCommentVNode("", true),
+                          vue.withDirectives(vue.createElementVNode("div", null, [
+                            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(vue.unref(locale.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, index) => {
+                                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    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(locale.t)("tvp.tvpSearchbox.attributeType") : key), 1)) : vue.createCommentVNode("", true),
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group, (item, index) => {
+                                return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                  key: (item.field || item.label) + index,
+                                  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))
+                        ], 512), [
+                          [
+                            vue.vShow,
+                            state.isResetFlag && !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(locale.t)("tvp.tvpSearchbox.operator")), 1),
+                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.currentOperators, (item, index) => {
+                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                key: item + index,
+                                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, index) => {
+                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                key: index + (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(locale.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, index) => {
+                                    return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                      key: (item.field || item.label) + index,
+                                      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(locale.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(locale.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(locale.t)("tvp.tvpSearchbox.rangeNumberTitle")), 1),
+                              vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(vue.unref(locale.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(locale.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(locale.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(locale.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(locale.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                              }) : vue.unref(locale.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                              vue.createElementVNode("div", _hoisted_35, vue.toDisplayString(vue.unref(locale.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(locale.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(locale.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(locale.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(locale.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                              }) : vue.unref(locale.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                              vue.createElementVNode("div", _hoisted_41, vue.toDisplayString(vue.unref(locale.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(locale.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(locale.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(locale.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(locale.t)("tvp.tvpSearchbox.tagKey")), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_46, vue.toDisplayString(vue.unref(locale.t)("tvp.tvpSearchbox.tagValue")), 1)),
+                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.backupList, (item, index) => {
+                              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                                key: item.label + item.value + index,
+                                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,
+                            class: "tvp-search-box__panel-box",
+                            onClick: _cache[20] || (_cache[20] = ($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(() => {
+                              }, ["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(locale.t)("tvp.tvpSearchbox.noData")), 1)
+                            ]),
+                            _: 1
+                          })) : vue.createCommentVNode("", true)
+                        ], 512), [
+                          [vue.vShow, state.isResetFlag && state.propItem.label]
+                        ])
+                      ];
+                    }),
+                    _: 3
+                  }, 8, ["style"])
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(TinyInput), {
+                    ref: "inputRef",
+                    modelValue: state.inputValue,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.inputValue = $event),
+                    class: "tvp-search-box__input",
+                    placeholder: vue.unref(placeholder),
+                    maxlength: __props.maxlength && __props.maxlength + 1,
+                    onKeydown: [
+                      vue.withKeys(vue.withModifiers(vue.unref(backspaceDeleteTag), ["stop"]), ["delete"]),
+                      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(() => [
+                      vue.withDirectives(vue.createVNode(vue.unref(TinyIconClose), {
+                        class: "tvp-search-box__input-close",
+                        onClick: vue.withModifiers(vue.unref(clearTag), ["stop"])
+                      }, null, 8, ["onClick"]), [
+                        [vue.vShow, vue.unref(isShowClose)]
+                      ]),
+                      vue.withDirectives(vue.createElementVNode("span", _hoisted_5, null, 512), [
+                        [vue.vShow, vue.unref(isShowClose)]
+                      ]),
+                      __props.showHelp ? (vue.openBlock(), vue.createBlock(vue.unref(TinyTooltip), {
+                        key: 0,
+                        effect: "dark",
+                        content: vue.unref(locale.t)("tvp.tvpSearchbox.help"),
+                        placement: "top"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(TinyIconHelpQuery), {
+                            class: "tvp-search-box__input-help",
+                            onClick: vue.withModifiers(vue.unref(helpClick), ["stop"])
+                          }, null, 8, ["onClick"])
+                        ]),
+                        _: 1
+                      }, 8, ["content"])) : vue.createCommentVNode("", true),
+                      vue.createVNode(vue.unref(TinyIconSearch), {
+                        class: "tvp-search-box__input-search",
+                        onClick: vue.withModifiers(vue.unref(createTag), ["stop"])
+                      }, null, 8, ["onClick"])
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
+                ]),
+                _: 3
+              }, 8, ["hide-on-click"])
+            ]),
+            __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),
+              placement: "bottom-start",
+              "visible-arrow": false,
+              trigger: "manual",
+              "popper-class": "tvp-search-box__popover",
+              class: "tvp-search-box__form-popover"
+            }, {
+              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(locale.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),
+                          searchable: "",
+                          disabled: state.prevItem.editAttrDisabled
+                        }, {
+                          default: vue.withCtx(() => [
+                            (vue.openBlock(), vue.createBlock(vue.unref(TinyOption), {
+                              key: state.allTypeAttri.label,
+                              label: vue.unref(locale.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)
+                              ))
+                            }, 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), {
+                                key: item.label,
+                                label: item.label,
+                                value: item.label,
+                                disabled: vue.unref(selectItemIsDisable)(item),
+                                onClick: ($event) => vue.unref(selectPropChange)(item, vue.unref(selectItemIsDisable)(item))
+                              }, null, 8, ["label", "value", "disabled", "onClick"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "disabled"])
+                      ]),
+                      _: 1
+                    }),
+                    state.prevItem.operators ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, vue.toDisplayString(vue.unref(locale.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"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(TinySelect), {
+                          modelValue: state.operatorValue,
+                          "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => state.operatorValue = $event)
+                        }, {
+                          default: vue.withCtx(() => [
+                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.currentOperators, (item) => {
+                              return vue.openBlock(), vue.createBlock(vue.unref(TinyOption), {
+                                key: item,
+                                label: item,
+                                value: item
+                              }, null, 8, ["label", "value"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue"])
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    state.prevItem.type !== "numRange" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, vue.toDisplayString(vue.unref(locale.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;
+                        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),
+                            class: "tvp-search-box-select",
+                            multiple: Boolean(state.prevItem.mergeTag),
+                            "allow-create": "",
+                            filterable: "",
+                            "default-first-option": "",
+                            clearable: ""
+                          }, {
+                            default: vue.withCtx(() => [
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.currentEditValue, (item) => {
+                                return vue.openBlock(), vue.createBlock(vue.unref(TinyOption), {
+                                  key: item.label,
+                                  label: item.label,
+                                  value: item.label
+                                }, null, 8, ["label", "value"]);
+                              }), 128))
+                            ]),
+                            _: 1
+                          }, 8, ["modelValue", "multiple"])) : (vue.openBlock(), vue.createBlock(vue.unref(TinyInput), {
+                            key: 1,
+                            modelValue: state.inputEditValue,
+                            "onUpdate:modelValue": _cache[25] || (_cache[25] = ($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(locale.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[26] || (_cache[26] = ($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(locale.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[27] || (_cache[27] = ($event) => state[state.curMaxNumVar] = $event),
+                            type: "number",
+                            class: "tvp-search-box__number-input"
+                          }, null, 8, ["modelValue"])
+                        ]),
+                        _: 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(locale.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                        value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                      }) : vue.unref(locale.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                      vue.createElementVNode("div", _hoisted_57, vue.toDisplayString(vue.unref(locale.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[28] || (_cache[28] = ($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"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      }, 8, ["show-message"]),
+                      vue.createElementVNode("div", _hoisted_58, vue.toDisplayString(vue.unref(locale.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[29] || (_cache[29] = ($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"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 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(locale.t)("tvp.tvpSearchbox.timeLengthTitle", {
+                        value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                      }) : vue.unref(locale.t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                      vue.createElementVNode("div", _hoisted_61, vue.toDisplayString(vue.unref(locale.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[30] || (_cache[30] = ($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"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      }, 8, ["show-message"]),
+                      vue.createElementVNode("div", _hoisted_62, vue.toDisplayString(vue.unref(locale.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[31] || (_cache[31] = ($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"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      })
+                    ])) : vue.createCommentVNode("", true)
+                  ]),
+                  vue.createElementVNode("div", _hoisted_63, [
+                    vue.createVNode(vue.unref(TinyButton), {
+                      size: "mini",
+                      onClick: _cache[32] || (_cache[32] = ($event) => vue.unref(confirmEditTag)(true))
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(vue.unref(locale.t)("tvp.tvpSearchbox.confirm")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(TinyButton), {
+                      size: "mini",
+                      onClick: _cache[33] || (_cache[33] = ($event) => vue.unref(confirmEditTag)(false))
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(vue.unref(locale.t)("tvp.tvpSearchbox.cancel")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
+                  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(() => {
+                    }, ["stop"]))
+                  }))
+                ]))
+              ]),
+              _: 3
+            }, 8, ["modelValue"])) : vue.createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["model", "rules", "validate-type"])
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;