@opentiny/vue-search-box 0.0.1

package/es/index.vue.es2.js

@@ -0,0 +1,1287 @@
+import { defineComponent, reactive, getCurrentInstance, computed, nextTick, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, unref, createVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, withCtx, createElementVNode, toDisplayString, withDirectives, vShow, withKeys, normalizeStyle, createTextVNode, isRef, renderSlot, mergeProps } from "vue";
+import TinyTag from "@opentiny/vue-tag";
+import TinyInput from "@opentiny/vue-input";
+import TinyDropdown from "@opentiny/vue-dropdown";
+import TinyDropdownMenu from "@opentiny/vue-dropdown-menu";
+import TinyDropdownItem from "@opentiny/vue-dropdown-item";
+import TinyCheckbox from "@opentiny/vue-checkbox";
+import TinyCheckboxGroup from "@opentiny/vue-checkbox-group";
+import TinyButton from "@opentiny/vue-button";
+import TinyTooltip from "@opentiny/vue-tooltip";
+import TinyDatePicker from "@opentiny/vue-date-picker";
+import TinyForm from "@opentiny/vue-form";
+import TinyFormItem from "@opentiny/vue-form-item";
+import TinyPopover from "@opentiny/vue-popover";
+import TinySelect from "@opentiny/vue-select";
+import TinyOption from "@opentiny/vue-option";
+import { iconSearch, iconClose, iconHelpQuery } from "@opentiny/vue-icon";
+import locale, { t } from "@opentiny/vue-locale";
+import { useTag } from "./composables/use-tag.es.js";
+import { useDropdown } from "./composables/use-dropdown.es.js";
+import { useMatch } from "./composables/use-match.es.js";
+import { useCheckbox } from "./composables/use-checkbox.es.js";
+import { useDatePicker } from "./composables/use-datepicker.es.js";
+import { useNumRange } from "./composables/use-num-range.es.js";
+import { useEdit } from "./composables/use-edit.es.js";
+import { useCustom } from "./composables/use-custom.es.js";
+import { useInit } from "./composables/use-init.es.js";
+import { usePlaceholder } from "./composables/use-placeholder.es.js";
+import { showPopover, showDropdown } from "./utils/dropdown.es.js";
+/* empty css              */
+import { deepClone } from "./utils/clone.es.js";
+import { format } from "./utils/date.es.js";
+import { zhCN } from "./utils/zh_CN.es.js";
+import { enUS } from "./utils/en_US.es.js";
+import { createI18n } from "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__ */ defineComponent({
+  ...{
+    name: "VueSearchBox"
+  },
+  __name: "index",
+  props: {
+    modelValue: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    emptyPlaceholder: {
+      type: String,
+      default: 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,
+      messages: {
+        zhCN: { ...zhCN },
+        enUS: { ...enUS }
+      }
+    });
+    const props = __props;
+    const emits = __emit;
+    const state = 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: t("tvp.tvpSearchbox.rulekeyword1"),
+        field: "tvpKeyword",
+        type: "radio"
+      },
+      operatorValue: ":",
+      // 当前操作符值
+      inputEditValue: "",
+      currentOperators: "",
+      currentEditValue: "",
+      isShowDropdown: true,
+      // 控制有匹配数据展示开关
+      isShowPanel: true,
+      // 控制面板显隐
+      currentModelValueIndex: -1,
+      // 当前编辑的标签索引
+      curMinNumVar: "",
+      // numRange最小值变量
+      curMaxNumVar: "",
+      // numRange最大值变量
+      instance: getCurrentInstance(),
+      isMouseDown: false,
+      isResetFlag: true,
+      // 输入框触发源重置
+      currentEditSelectTags: []
+      // 当前编辑多选的标签值
+    });
+    state.isShowPanel = computed(
+      () => {
+        var _a;
+        return state.isResetFlag && (props.showNoDataTip || !props.showNoDataTip && state.isShowDropdown) && (state.prevItem.type || !state.propItem.label || state.backupList.length || ((_a = state.currentOperators) == null ? void 0 : _a.length));
+      }
+    );
+    const TinyIconSearch = iconSearch();
+    const TinyIconClose = iconClose();
+    const TinyIconHelpQuery = iconHelpQuery();
+    const { selectPropItem, selectRadioItem, createTag, helpClick, setOperator } = useDropdown({
+      props,
+      emits,
+      state,
+      t,
+      format
+    });
+    const { deleteTag, clearTag, backspaceDeleteTag } = useTag({
+      props,
+      state,
+      emits
+    });
+    const { editTag, confirmEditTag, selectPropChange, selectItemIsDisable } = useEdit({
+      props,
+      state,
+      t,
+      nextTick,
+      format,
+      emits
+    });
+    const { handleInput, selectFirstMap } = useMatch({
+      props,
+      state,
+      emits
+    });
+    const { placeholder, setPlaceholder } = usePlaceholder({ props, state, t });
+    const { selectCheckbox, isIndeterminate, checkAll, isShowClose } = useCheckbox({
+      props,
+      state,
+      emits
+    });
+    const { onConfirmDate, handleDateShow, pickerOptions } = useDatePicker({
+      props,
+      state,
+      emits
+    });
+    const { sizeChange, initFormRule } = useNumRange({
+      props,
+      state,
+      t,
+      emits
+    });
+    const { handleConfirm, handleEditConfirm } = useCustom({ state, emits });
+    const {
+      initItems,
+      watchOutsideClick,
+      watchMouseDown,
+      watchMouseMove,
+      handleClick
+    } = useInit({
+      props,
+      state
+    });
+    watch(
+      () => props.items,
+      (newVal) => {
+        state.recordItems = deepClone(newVal);
+        initItems();
+        initFormRule();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    watch(
+      () => state.popoverVisible,
+      (newVal) => {
+        if (!newVal && !state.inputEditValue.length) {
+          state.inputEditValue = state.currentEditSelectTags;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    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);
+              });
+            }
+          });
+          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
+      }
+    );
+    onMounted(() => {
+      document.addEventListener("click", watchOutsideClick);
+      document.addEventListener("mousedown", watchMouseDown);
+      document.addEventListener("mousemove", watchMouseMove);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", watchOutsideClick);
+      document.removeEventListener("mousedown", watchMouseDown);
+      document.removeEventListener("mousemove", watchMouseMove);
+    });
+    __expose({
+      state
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "tvp-search-box",
+        onClick: _cache[36] || (_cache[36] = withModifiers(($event) => unref(showPopover)(state, false), ["stop"]))
+      }, [
+        createVNode(unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (tag, index) => {
+          return openBlock(), createBlock(unref(TinyTag), {
+            key: tag.field + index,
+            closable: "",
+            class: normalizeClass([
+              "tvp-search-box__tag",
+              __props.editable && tag.type !== "map" ? "tvp-search-box__tag-editor" : ""
+            ]),
+            title: `${tag.label} ${tag.operator || ":"} ${tag.value}`,
+            onClose: ($event) => unref(deleteTag)(tag),
+            onClick: withModifiers(($event) => unref(editTag)(tag, index, $event), ["stop"])
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_1, toDisplayString(tag.label) + " " + toDisplayString(tag.operator || ":") + " " + toDisplayString(tag.value), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "title", "onClose", "onClick"]);
+        }), 128)),
+        __props.modelValue.length ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+        createVNode(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: withCtx(() => [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("section", _hoisted_4, [
+                withDirectives(createElementVNode("span", null, toDisplayString(state.propItem.label) + " " + toDisplayString(`${state.operatorValue ? state.operatorValue : ""} `), 513), [
+                  [vShow, state.propItem.label]
+                ]),
+                withDirectives(createElementVNode("span", null, toDisplayString(state.propItem.value), 513), [
+                  [vShow, state.propItem.value]
+                ])
+              ]),
+              createVNode(unref(TinyDropdown), {
+                ref: "dropdownRef",
+                trigger: "click",
+                class: "tvp-search-box__dropdown",
+                "hide-on-click": state.hiden,
+                "show-icon": false,
+                "lazy-show-popper": ""
+              }, {
+                dropdown: withCtx(() => [
+                  createVNode(unref(TinyDropdownMenu), {
+                    placement: "bottom-start",
+                    "popper-class": "tvp-search-box__dropdown-menu",
+                    style: normalizeStyle({ "max-height": __props.panelMaxHeight }),
+                    onMouseup: withModifiers(() => {
+                    }, ["stop"])
+                  }, {
+                    default: withCtx(() => {
+                      var _a;
+                      return [
+                        withDirectives(createElementVNode("div", null, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(state.matchItems, (value, key) => {
+                            return openBlock(), createElementBlock(Fragment, { key }, [
+                              value["attr"].length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                createElementVNode("span", _hoisted_6, toDisplayString(key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key), 1),
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(value["attr"], (item, index) => {
+                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                                    onClick: ($event) => unref(selectPropItem)(item)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createElementVNode("span", null, [
+                                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
+                                          return openBlock(), createElementBlock(Fragment, { key: text }, [
+                                            Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                              createTextVNode(toDisplayString(text), 1)
+                                            ], 64))
+                                          ], 64);
+                                        }), 128))
+                                      ])
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["onClick"]);
+                                }), 128))
+                              ], 64)) : createCommentVNode("", true),
+                              value["attrValue"].length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("tvp.tvpSearchbox.propertyValue", [
+                                  key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key
+                                ])), 1),
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(value["attrValue"], (item, index) => {
+                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    disabled: item.isChecked,
+                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                                    onClick: ($event) => unref(selectRadioItem)(item, true)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createElementVNode("span", null, [
+                                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
+                                          return openBlock(), createElementBlock(Fragment, { key: text }, [
+                                            Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                              createTextVNode(toDisplayString(text), 1)
+                                            ], 64))
+                                          ], 64);
+                                        }), 128))
+                                      ])
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["disabled", "onClick"]);
+                                }), 128))
+                              ], 64)) : createCommentVNode("", true)
+                            ], 64);
+                          }), 128)),
+                          __props.showNoDataTip && !state.isShowDropdown ? (openBlock(), createBlock(unref(TinyDropdownItem), { key: 0 }, {
+                            default: withCtx(() => [
+                              createElementVNode("div", null, toDisplayString(unref(t)("tvp.tvpSearchbox.noData")), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          withDirectives(createElementVNode("div", null, [
+                            createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("tvp.tvpSearchbox.matched")), 1),
+                            createElementVNode("div", _hoisted_11, [
+                              state.potentialOptions ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(state.potentialOptions, (item, index) => {
+                                  return openBlock(), createBlock(unref(TinyDropdownItem), {
+                                    key: item.label + index,
+                                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                                    onClick: ($event) => unref(selectRadioItem)(item, true)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createTextVNode(toDisplayString(item.label) + "： ", 1),
+                                      createElementVNode("span", _hoisted_13, toDisplayString(item.value), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["onClick"]);
+                                }), 128))
+                              ])) : createCommentVNode("", true)
+                            ])
+                          ], 512), [
+                            [vShow, props.potentialOptions]
+                          ])
+                        ], 512), [
+                          [
+                            vShow,
+                            state.isResetFlag && !state.propItem.label && state.inputValue.trim()
+                          ]
+                        ]),
+                        withDirectives(createElementVNode("div", _hoisted_14, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(state.groupItems, (group, key) => {
+                            return openBlock(), createElementBlock(Fragment, { key }, [
+                              group.length ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key), 1)) : createCommentVNode("", true),
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item, index) => {
+                                return openBlock(), createBlock(unref(TinyDropdownItem), {
+                                  key: (item.field || item.label) + index,
+                                  class: "tvp-search-box__dropdown-item",
+                                  onClick: ($event) => unref(selectPropItem)(item)
+                                }, {
+                                  default: withCtx(() => [
+                                    createElementVNode("span", {
+                                      title: item.label
+                                    }, toDisplayString(item.label), 9, _hoisted_16)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"]);
+                              }), 128))
+                            ], 64);
+                          }), 128))
+                        ], 512), [
+                          [
+                            vShow,
+                            state.isResetFlag && !state.propItem.label && !state.inputValue.trim()
+                          ]
+                        ]),
+                        withDirectives(createElementVNode("div", null, [
+                          ((_a = state.currentOperators) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                            createElementVNode("span", _hoisted_18, toDisplayString(unref(t)("tvp.tvpSearchbox.operator")), 1),
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.currentOperators, (item, index) => {
+                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
+                                key: item + index,
+                                class: "tvp-search-box__dropdown-item",
+                                onClick: ($event) => unref(setOperator)(item)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(item), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"])), [
+                                [vShow, item.includes(state.inputValue)]
+                              ]);
+                            }), 128))
+                          ])) : !state.prevItem.type || state.prevItem.type === "radio" ? (openBlock(), createElementBlock("div", _hoisted_19, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
+                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
+                                key: index + (item.field || item.label),
+                                disabled: item.isChecked,
+                                class: "tvp-search-box__dropdown-item",
+                                onClick: ($event) => unref(selectRadioItem)(item)
+                              }, {
+                                default: withCtx(() => [
+                                  item.match ? (openBlock(), createElementBlock("span", {
+                                    key: 0,
+                                    title: item.label
+                                  }, [
+                                    (openBlock(true), createElementBlock(Fragment, null, renderList(item.match, (text) => {
+                                      return openBlock(), createElementBlock(Fragment, { key: text }, [
+                                        Array.isArray(text) ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(text[0]), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                          createTextVNode(toDisplayString(text), 1)
+                                        ], 64))
+                                      ], 64);
+                                    }), 128))
+                                  ], 8, _hoisted_20)) : (openBlock(), createElementBlock("span", {
+                                    key: 1,
+                                    title: item.label
+                                  }, toDisplayString(item.label), 9, _hoisted_22))
+                                ]),
+                                _: 2
+                              }, 1032, ["disabled", "onClick"])), [
+                                [vShow, !item.isFilter || !state.inputValue]
+                              ]);
+                            }), 128))
+                          ])) : state.isResetFlag && state.prevItem.type === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_23, [
+                            createElementVNode("div", _hoisted_24, [
+                              createVNode(unref(TinyCheckboxGroup), {
+                                modelValue: unref(checkAll),
+                                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(checkAll) ? checkAll.value = $event : null),
+                                class: "tvp-search-box__checkbox"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyDropdownItem), { class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item" }, {
+                                    default: withCtx(() => [
+                                      createVNode(unref(TinyCheckbox), {
+                                        modelValue: unref(checkAll),
+                                        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(checkAll) ? checkAll.value = $event : null),
+                                        indeterminate: unref(isIndeterminate)
+                                      }, {
+                                        default: withCtx(() => [
+                                          createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.selectAll")), 1)
+                                        ]),
+                                        _: 1
+                                      }, 8, ["modelValue", "indeterminate"])
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 1
+                              }, 8, ["modelValue"]),
+                              createVNode(unref(TinyCheckboxGroup), {
+                                modelValue: state.checkboxGroup,
+                                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.checkboxGroup = $event),
+                                class: "tvp-search-box__checkbox"
+                              }, {
+                                default: withCtx(() => [
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
+                                    return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
+                                      key: (item.field || item.label) + index,
+                                      class: "tvp-search-box__dropdown-item tvp-search-box__checkbox-item"
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(unref(TinyCheckbox), {
+                                          label: state.prevItem.label + item.label,
+                                          title: item.label,
+                                          class: "tvp-search-box__checkbox-item-label"
+                                        }, {
+                                          default: withCtx(() => [
+                                            createTextVNode(toDisplayString(item.label), 1)
+                                          ]),
+                                          _: 2
+                                        }, 1032, ["label", "title"])
+                                      ]),
+                                      _: 2
+                                    }, 1024)), [
+                                      [vShow, !item.isFilter]
+                                    ]);
+                                  }), 128))
+                                ]),
+                                _: 1
+                              }, 8, ["modelValue"])
+                            ]),
+                            createElementVNode("div", _hoisted_25, [
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[5] || (_cache[5] = ($event) => unref(selectCheckbox)(true))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[6] || (_cache[6] = ($event) => unref(selectCheckbox)(false))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ])) : state.prevItem.type === "numRange" ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                            createElementVNode("div", _hoisted_27, [
+                              createElementVNode("div", _hoisted_28, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeNumberTitle")), 1),
+                              createElementVNode("div", _hoisted_29, toDisplayString(unref(t)("tvp.tvpSearchbox.minValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: state.curMinNumVar,
+                                class: "tvp-search-box__number-item",
+                                "show-message": state.numberShowMessage
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyInput), {
+                                    modelValue: state[state.curMinNumVar],
+                                    "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => state[state.curMinNumVar] = $event),
+                                    type: "number",
+                                    class: "tvp-search-box__number-input"
+                                  }, null, 8, ["modelValue"])
+                                ]),
+                                _: 1
+                              }, 8, ["prop", "show-message"]),
+                              createElementVNode("div", _hoisted_30, toDisplayString(unref(t)("tvp.tvpSearchbox.maxValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: state.curMaxNumVar,
+                                class: "tvp-search-box__number-item"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyInput), {
+                                    modelValue: state[state.curMaxNumVar],
+                                    "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => state[state.curMaxNumVar] = $event),
+                                    type: "number",
+                                    class: "tvp-search-box__number-input"
+                                  }, null, 8, ["modelValue"])
+                                ]),
+                                _: 1
+                              }, 8, ["prop"])
+                            ]),
+                            createElementVNode("div", _hoisted_31, [
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[9] || (_cache[9] = withModifiers(($event) => unref(sizeChange)(true), ["stop"]))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[10] || (_cache[10] = ($event) => unref(sizeChange)(false))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ])) : state.prevItem.type === "dateRange" ? (openBlock(), createElementBlock("div", _hoisted_32, [
+                            createElementVNode("div", _hoisted_33, [
+                              createElementVNode("div", _hoisted_34, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                              }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                              createElementVNode("div", _hoisted_35, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: "startDate",
+                                "show-message": Boolean(state.prevItem.maxTimeLength),
+                                class: "tvp-search-box__date-item"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyDatePicker), {
+                                    modelValue: state.startDate,
+                                    "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => state.startDate = $event),
+                                    format: state.prevItem.format || state.dateRangeFormat,
+                                    "value-format": state.prevItem.format || state.dateRangeFormat,
+                                    "picker-options": unref(pickerOptions)(state.startDate, "endDate"),
+                                    class: "tvp-search-box__date-picker",
+                                    onChange: unref(handleDateShow),
+                                    onBlur: unref(handleDateShow)
+                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
+                                ]),
+                                _: 1
+                              }, 8, ["show-message"]),
+                              createElementVNode("div", _hoisted_36, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: "endDate",
+                                class: "tvp-search-box__date-item"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyDatePicker), {
+                                    modelValue: state.endDate,
+                                    "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => state.endDate = $event),
+                                    format: state.prevItem.format || state.dateRangeFormat,
+                                    "value-format": state.prevItem.format || state.dateRangeFormat,
+                                    "picker-options": unref(pickerOptions)(state.startDate),
+                                    class: "tvp-search-box__date-picker",
+                                    onChange: unref(handleDateShow),
+                                    onBlur: unref(handleDateShow)
+                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            createElementVNode("div", _hoisted_37, [
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[13] || (_cache[13] = ($event) => unref(onConfirmDate)(true))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[14] || (_cache[14] = ($event) => unref(onConfirmDate)(false))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ])) : state.prevItem.type === "datetimeRange" ? (openBlock(), createElementBlock("div", _hoisted_38, [
+                            createElementVNode("div", _hoisted_39, [
+                              createElementVNode("div", _hoisted_40, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                                value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                              }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                              createElementVNode("div", _hoisted_41, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: "startDateTime",
+                                "show-message": Boolean(state.prevItem.maxTimeLength),
+                                class: "tvp-search-box__date-item"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyDatePicker), {
+                                    modelValue: state.startDateTime,
+                                    "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => state.startDateTime = $event),
+                                    type: "datetime",
+                                    isutc8: true,
+                                    format: state.prevItem.format || state.datetimeRangeFormat,
+                                    "value-format": state.prevItem.format || state.datetimeRangeFormat,
+                                    "picker-options": unref(pickerOptions)(state.startDateTime, "endDateTime"),
+                                    class: "tvp-search-box__date-picker",
+                                    onChange: unref(handleDateShow),
+                                    onBlur: unref(handleDateShow)
+                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
+                                ]),
+                                _: 1
+                              }, 8, ["show-message"]),
+                              createElementVNode("div", _hoisted_42, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                              createVNode(unref(TinyFormItem), {
+                                prop: "endDateTime",
+                                class: "tvp-search-box__date-item"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(TinyDatePicker), {
+                                    modelValue: state.endDateTime,
+                                    "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => state.endDateTime = $event),
+                                    type: "datetime",
+                                    isutc8: true,
+                                    format: state.prevItem.format || state.datetimeRangeFormat,
+                                    "value-format": state.prevItem.format || state.datetimeRangeFormat,
+                                    "picker-options": unref(pickerOptions)(state.startDateTime),
+                                    class: "tvp-search-box__date-picker",
+                                    onChange: unref(handleDateShow),
+                                    onBlur: unref(handleDateShow)
+                                  }, null, 8, ["modelValue", "format", "value-format", "picker-options", "onChange", "onBlur"])
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            createElementVNode("div", _hoisted_43, [
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[17] || (_cache[17] = ($event) => unref(onConfirmDate)(true, true))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(unref(TinyButton), {
+                                size: "mini",
+                                onClick: _cache[18] || (_cache[18] = ($event) => unref(onConfirmDate)(false, true))
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ])) : state.prevItem.type === "map" ? (openBlock(), createElementBlock("div", _hoisted_44, [
+                            state.isShowTagKey ? (openBlock(), createElementBlock("span", _hoisted_45, toDisplayString(unref(t)("tvp.tvpSearchbox.tagKey")), 1)) : (openBlock(), createElementBlock("span", _hoisted_46, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)),
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.backupList, (item, index) => {
+                              return withDirectives((openBlock(), createBlock(unref(TinyDropdownItem), {
+                                key: item.label + item.value + index,
+                                disabled: item.isChecked,
+                                class: "tvp-search-box__dropdown-item",
+                                onClick: ($event) => unref(selectFirstMap)(item, state.isShowTagKey)
+                              }, {
+                                default: withCtx(() => [
+                                  createElementVNode("span", {
+                                    title: item.label
+                                  }, toDisplayString(item.label), 9, _hoisted_47)
+                                ]),
+                                _: 2
+                              }, 1032, ["disabled", "onClick"])), [
+                                [vShow, !item.isFilter]
+                              ]);
+                            }), 128))
+                          ])) : state.prevItem.type === "custom" ? (openBlock(), createElementBlock("div", {
+                            key: 7,
+                            class: "tvp-search-box__panel-box",
+                            onClick: _cache[20] || (_cache[20] = ($event) => unref(showDropdown)(state))
+                          }, [
+                            renderSlot(_ctx.$slots, state.prevItem.slotName, mergeProps({
+                              showDropdown: () => unref(showDropdown)(state),
+                              onConfirm: unref(handleConfirm)
+                            }, {
+                              onClick: _cache[19] || (_cache[19] = withModifiers(() => {
+                              }, ["stop"]))
+                            }))
+                          ])) : createCommentVNode("", true),
+                          __props.showNoDataTip && !state.isShowDropdown ? (openBlock(), createBlock(unref(TinyDropdownItem), { key: 8 }, {
+                            default: withCtx(() => [
+                              createElementVNode("div", null, toDisplayString(unref(t)("tvp.tvpSearchbox.noData")), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ], 512), [
+                          [vShow, state.isResetFlag && state.propItem.label]
+                        ])
+                      ];
+                    }),
+                    _: 3
+                  }, 8, ["style"])
+                ]),
+                default: withCtx(() => [
+                  createVNode(unref(TinyInput), {
+                    ref: "inputRef",
+                    modelValue: state.inputValue,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.inputValue = $event),
+                    class: "tvp-search-box__input",
+                    placeholder: unref(placeholder),
+                    maxlength: __props.maxlength && __props.maxlength + 1,
+                    onKeydown: [
+                      withKeys(withModifiers(unref(backspaceDeleteTag), ["stop"]), ["delete"]),
+                      withKeys(withModifiers(unref(createTag), ["stop"]), ["enter"])
+                    ],
+                    onInput: unref(handleInput),
+                    onFocus: _cache[1] || (_cache[1] = ($event) => unref(showPopover)(state, false)),
+                    onClick: unref(handleClick)
+                  }, {
+                    suffix: withCtx(() => [
+                      withDirectives(createVNode(unref(TinyIconClose), {
+                        class: "tvp-search-box__input-close",
+                        onClick: withModifiers(unref(clearTag), ["stop"])
+                      }, null, 8, ["onClick"]), [
+                        [vShow, unref(isShowClose)]
+                      ]),
+                      withDirectives(createElementVNode("span", _hoisted_5, null, 512), [
+                        [vShow, unref(isShowClose)]
+                      ]),
+                      __props.showHelp ? (openBlock(), createBlock(unref(TinyTooltip), {
+                        key: 0,
+                        effect: "dark",
+                        content: unref(t)("tvp.tvpSearchbox.help"),
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyIconHelpQuery), {
+                            class: "tvp-search-box__input-help",
+                            onClick: withModifiers(unref(helpClick), ["stop"])
+                          }, null, 8, ["onClick"])
+                        ]),
+                        _: 1
+                      }, 8, ["content"])) : createCommentVNode("", true),
+                      createVNode(unref(TinyIconSearch), {
+                        class: "tvp-search-box__input-search",
+                        onClick: withModifiers(unref(createTag), ["stop"])
+                      }, null, 8, ["onClick"])
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
+                ]),
+                _: 3
+              }, 8, ["hide-on-click"])
+            ]),
+            __props.editable ? (openBlock(), createBlock(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: withCtx(() => [
+                state.prevItem.type !== "custom" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createElementVNode("div", _hoisted_48, [
+                    createElementVNode("div", _hoisted_49, toDisplayString(unref(t)("tvp.tvpSearchbox.attributeType")), 1),
+                    createVNode(unref(TinyFormItem), { class: "tvp-search-box__number-item" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(TinySelect), {
+                          modelValue: state.selectValue,
+                          "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => state.selectValue = $event),
+                          searchable: "",
+                          disabled: state.prevItem.editAttrDisabled
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(unref(TinyOption), {
+                              key: state.allTypeAttri.label,
+                              label: unref(t)("tvp.tvpSearchbox.allProperty"),
+                              value: state.allTypeAttri.label,
+                              disabled: unref(selectItemIsDisable)(state.allTypeAttri),
+                              onClick: _cache[21] || (_cache[21] = ($event) => unref(selectPropChange)(
+                                state.allTypeAttri,
+                                unref(selectItemIsDisable)(state.allTypeAttri)
+                              ))
+                            }, null, 8, ["label", "value", "disabled"])),
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.recordItems, (item) => {
+                              return openBlock(), createBlock(unref(TinyOption), {
+                                key: item.label,
+                                label: item.label,
+                                value: item.label,
+                                disabled: unref(selectItemIsDisable)(item),
+                                onClick: ($event) => unref(selectPropChange)(item, unref(selectItemIsDisable)(item))
+                              }, null, 8, ["label", "value", "disabled", "onClick"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue", "disabled"])
+                      ]),
+                      _: 1
+                    }),
+                    state.prevItem.operators ? (openBlock(), createElementBlock("div", _hoisted_50, toDisplayString(unref(t)("tvp.tvpSearchbox.operator")), 1)) : createCommentVNode("", true),
+                    state.prevItem.operators ? (openBlock(), createBlock(unref(TinyFormItem), {
+                      key: 1,
+                      class: "tvp-search-box__number-item"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(TinySelect), {
+                          modelValue: state.operatorValue,
+                          "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => state.operatorValue = $event)
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(state.currentOperators, (item) => {
+                              return openBlock(), createBlock(unref(TinyOption), {
+                                key: item,
+                                label: item,
+                                value: item
+                              }, null, 8, ["label", "value"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        }, 8, ["modelValue"])
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    state.prevItem.type !== "numRange" ? (openBlock(), createElementBlock("div", _hoisted_51, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)) : createCommentVNode("", true),
+                    ![
+                      "numRange",
+                      "dateRange",
+                      "datetimeRange",
+                      "custom"
+                    ].includes(state.prevItem.type) ? (openBlock(), createBlock(unref(TinyFormItem), {
+                      key: 3,
+                      prop: "inputEditValue",
+                      class: "tvp-search-box__number-item"
+                    }, {
+                      default: withCtx(() => {
+                        var _a;
+                        return [
+                          ((_a = state.currentEditValue) == null ? void 0 : _a.length) > 0 ? (openBlock(), createBlock(unref(TinySelect), {
+                            key: 0,
+                            modelValue: state.inputEditValue,
+                            "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => state.inputEditValue = $event),
+                            class: "tvp-search-box-select",
+                            multiple: Boolean(state.prevItem.mergeTag),
+                            "allow-create": "",
+                            filterable: "",
+                            "default-first-option": "",
+                            clearable: ""
+                          }, {
+                            default: withCtx(() => [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(state.currentEditValue, (item) => {
+                                return openBlock(), createBlock(unref(TinyOption), {
+                                  key: item.label,
+                                  label: item.label,
+                                  value: item.label
+                                }, null, 8, ["label", "value"]);
+                              }), 128))
+                            ]),
+                            _: 1
+                          }, 8, ["modelValue", "multiple"])) : (openBlock(), createBlock(unref(TinyInput), {
+                            key: 1,
+                            modelValue: state.inputEditValue,
+                            "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => state.inputEditValue = $event),
+                            clearable: ""
+                          }, null, 8, ["modelValue"]))
+                        ];
+                      }),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    state.prevItem.type === "numRange" ? (openBlock(), createElementBlock("div", _hoisted_52, [
+                      createElementVNode("div", _hoisted_53, toDisplayString(unref(t)("tvp.tvpSearchbox.minValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: state.curMinNumVar,
+                        class: "tvp-search-box__number-item",
+                        "show-message": state.numberShowMessage
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyInput), {
+                            modelValue: state[state.curMinNumVar],
+                            "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => state[state.curMinNumVar] = $event),
+                            type: "number",
+                            class: "tvp-search-box__number-input"
+                          }, null, 8, ["modelValue"])
+                        ]),
+                        _: 1
+                      }, 8, ["prop", "show-message"]),
+                      createElementVNode("div", _hoisted_54, toDisplayString(unref(t)("tvp.tvpSearchbox.maxValueText")) + "(" + toDisplayString(state.prevItem.unit) + ") ", 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: state.curMaxNumVar,
+                        class: "tvp-search-box__number-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(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"])
+                    ])) : createCommentVNode("", true),
+                    state.prevItem.type === "dateRange" ? (openBlock(), createElementBlock("div", _hoisted_55, [
+                      createElementVNode("div", _hoisted_56, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                        value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                      }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                      createElementVNode("div", _hoisted_57, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: "startDate",
+                        "show-message": Boolean(state.prevItem.maxTimeLength),
+                        class: "tvp-search-box__date-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyDatePicker), {
+                            modelValue: state.startDate,
+                            "onUpdate:modelValue": _cache[28] || (_cache[28] = ($event) => state.startDate = $event),
+                            format: state.prevItem.format || state.dateRangeFormat,
+                            "value-format": state.prevItem.format || state.dateRangeFormat,
+                            "picker-options": unref(pickerOptions)(state.startDate, "endDate"),
+                            class: "tvp-search-box__date-picker"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      }, 8, ["show-message"]),
+                      createElementVNode("div", _hoisted_58, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: "endDate",
+                        class: "tvp-search-box__date-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyDatePicker), {
+                            modelValue: state.endDate,
+                            "onUpdate:modelValue": _cache[29] || (_cache[29] = ($event) => state.endDate = $event),
+                            format: state.prevItem.format || state.dateRangeFormat,
+                            "value-format": state.prevItem.format || state.dateRangeFormat,
+                            "picker-options": unref(pickerOptions)(state.startDate),
+                            class: "tvp-search-box__date-picker"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      })
+                    ])) : createCommentVNode("", true),
+                    state.prevItem.type === "datetimeRange" ? (openBlock(), createElementBlock("div", _hoisted_59, [
+                      createElementVNode("div", _hoisted_60, toDisplayString(state.prevItem.maxTimeLength > 0 ? unref(t)("tvp.tvpSearchbox.timeLengthTitle", {
+                        value: (state.prevItem.maxTimeLength / 864e5).toFixed(1)
+                      }) : unref(t)("tvp.tvpSearchbox.rangeDateTitle")), 1),
+                      createElementVNode("div", _hoisted_61, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeBeginLabel")), 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: "startDateTime",
+                        "show-message": Boolean(state.prevItem.maxTimeLength),
+                        class: "tvp-search-box__date-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyDatePicker), {
+                            modelValue: state.startDateTime,
+                            "onUpdate:modelValue": _cache[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": unref(pickerOptions)(state.startDateTime, "endDateTime"),
+                            class: "tvp-search-box__date-picker"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      }, 8, ["show-message"]),
+                      createElementVNode("div", _hoisted_62, toDisplayString(unref(t)("tvp.tvpSearchbox.rangeEndLabel")), 1),
+                      createVNode(unref(TinyFormItem), {
+                        prop: "endDateTime",
+                        class: "tvp-search-box__date-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TinyDatePicker), {
+                            modelValue: state.endDateTime,
+                            "onUpdate:modelValue": _cache[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": unref(pickerOptions)(state.startDateTime),
+                            class: "tvp-search-box__date-picker"
+                          }, null, 8, ["modelValue", "format", "value-format", "picker-options"])
+                        ]),
+                        _: 1
+                      })
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  createElementVNode("div", _hoisted_63, [
+                    createVNode(unref(TinyButton), {
+                      size: "mini",
+                      onClick: _cache[32] || (_cache[32] = ($event) => unref(confirmEditTag)(true))
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.confirm")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(TinyButton), {
+                      size: "mini",
+                      onClick: _cache[33] || (_cache[33] = ($event) => unref(confirmEditTag)(false))
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("tvp.tvpSearchbox.cancel")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_64, [
+                  renderSlot(_ctx.$slots, `${state.prevItem.slotName}-edit`, mergeProps({
+                    showDropdown: () => unref(showPopover)(state),
+                    onConfirm: unref(handleEditConfirm)
+                  }, {
+                    onClick: _cache[34] || (_cache[34] = withModifiers(() => {
+                    }, ["stop"]))
+                  }))
+                ]))
+              ]),
+              _: 3
+            }, 8, ["modelValue"])) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["model", "rules", "validate-type"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};