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

package/dist/es/utils/dropdown.es.js

@@ -1,9 +1,13 @@
 const showDropdown = (state, isShow = true) => {
-  const { dropdownRef } = state.instance.refs;
-  clearTimeout(Number(dropdownRef.state.timeout));
-  dropdownRef.state.timeout = null;
-  dropdownRef.state.visible = isShow;
-  isShow && (state.popoverVisible = false);
+  if (isShow) {
+    state.visibleTimer = setTimeout(() => {
+      state.visible = true;
+    }, 0);
+  } else {
+    clearTimeout(state.visibleTimer);
+    state.visibleTimer = null;
+    state.visible = false;
+  }
 };
 const showPopover = (state, isShow = true) => {
   state.popoverVisible = isShow;

package/dist/es/utils/tag.es.js

@@ -1,16 +1,16 @@
 import { deepClone } from "./clone.es.js";
-import { showDropdown, showPopover } from "./dropdown.es.js";
+import { showPopover } from "./dropdown.es.js";
 const hasTagItem = (state, itemValue, itemLabel = "") => {
   const { valueMap, prevItem } = state;
   const value = (prevItem.label || itemLabel) + itemValue;
   return valueMap.has(value);
 };
 const resetInput = (state) => {
-  state.isResetFlag = false;
   state.propItem = {};
   state.inputValue = "";
 };
 const emitChangeModelEvent = ({ emits, state, ...args }) => {
+  showPopover(state, false);
   const { tagList = null, index = -1, newTag = null, newValue = null, oldValue = null, isEdit } = args;
   if (!isEdit) {
     resetInput(state);
@@ -27,8 +27,6 @@ const emitChangeModelEvent = ({ emits, state, ...args }) => {
     state.innerModelValue.push(...tagList);
   }
   const { innerModelValue } = state;
-  showDropdown(state, false);
-  showPopover(state, false);
   emits("update:modelValue", innerModelValue);
   emits("change", deepClone(state.innerModelValue), oldVal);
 };

package/dist/index.css

@@ -1,4 +1,4 @@
-.tvp-search-box__dropdown-menu,
+.tiny-popper.tvp-search-box__dropdown-menu,
 .tvp-search-box__popover {
   --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
   --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
@@ -29,17 +29,48 @@
   --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
   width: 232px;
   overflow: auto;
-  overflow-x: hidden;
 }
-.tvp-search-box__dropdown-menu .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group,
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar,
+.tvp-search-box__popover::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-corner,
+.tvp-search-box__popover::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-track,
+.tvp-search-box__popover::-webkit-scrollbar-track {
+  background: transparent;
+}
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb,
+.tvp-search-box__popover::-webkit-scrollbar-thumb {
+  background: var(--tvp-SearchBox-color-bg-scrollbar-thumb);
+  border-radius: var(--tvp-SearchBox-border-radius-scrollbar-thumb);
+}
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:hover,
+.tvp-search-box__popover::-webkit-scrollbar-thumb:hover {
+  background: var(--tv-color-bg-scrollbar-thumb-hover);
+}
+.tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:active,
+.tvp-search-box__popover::-webkit-scrollbar-thumb:active {
+  background: var(--tvp-SearchBox-color-bg-scrollbar-thumb-active);
+}
+.tiny-popper.tvp-search-box__dropdown-menu.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
+.tiny-popper.tvp-search-box__dropdown-menu.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon,
+.tvp-search-box__popover.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
+.tvp-search-box__popover.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon {
+  background-color: var(--tvp-SearchBox-date-picker-clear-icon-bg);
+}
+.tiny-popper.tvp-search-box__dropdown-menu .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group,
 .tvp-search-box__popover .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group {
   border-color: #f23030;
 }
-.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select .tiny-svg,
+.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select .tiny-svg,
 .tvp-search-box__popover .tvp-search-box-select .tiny-select .tiny-svg {
   z-index: 1000;
 }
-.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags-group,
+.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags-group,
 .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags-group {
   min-height: 32px;
   max-height: 82px;
@@ -48,7 +79,7 @@
   border: 1px solid #c2c2c2;
   border-radius: 6px;
 }
-.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags.is-show-tag,
+.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags.is-show-tag,
 .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags.is-show-tag {
   max-width: 276px !important;
   width: calc(100% - 8px) !important;
@@ -57,24 +88,24 @@
   max-height: 76px;
   overflow: auto;
 }
-.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__suffix,
+.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__suffix,
 .tvp-search-box__popover .tvp-search-box-select .tiny-input__suffix {
   z-index: 1000;
 }
-.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__inner,
+.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__inner,
 .tvp-search-box__popover .tvp-search-box-select .tiny-input__inner {
   border: 0px;
   overflow: hidden;
 }
-.tvp-search-box__dropdown-menu input[type='number'],
+.tiny-popper.tvp-search-box__dropdown-menu input[type='number'],
 .tvp-search-box__popover input[type='number'] {
   -moz-appearance: textfield;
   /* Firefox */
   appearance: textfield;
 }
-.tvp-search-box__dropdown-menu input[type='number']::-webkit-inner-spin-button,
+.tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-inner-spin-button,
 .tvp-search-box__popover input[type='number']::-webkit-inner-spin-button,
-.tvp-search-box__dropdown-menu input[type='number']::-webkit-outer-spin-button,
+.tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-outer-spin-button,
 .tvp-search-box__popover input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   /* Safari */
@@ -178,7 +209,7 @@
   margin-right: var(--tvp-SearchBox-separator-icon-margin-right);
   height: 14px;
   width: 1px;
-  background-color: #dfe1e6;
+  background-color: var(--tvp-SearchBox-color-border-divider);
 }
 .tvp-search-box__input-help {
   margin-right: 0px;
@@ -215,6 +246,9 @@
 .tvp-search-box .tiny-dropdown__trigger {
   display: block;
 }
+.tvp-search-box .tiny-dropdown__trigger:focus-visible {
+  outline: none;
+}
 .tvp-search-box .tiny-dropdown__trigger .tiny-dropdown__title {
   width: 100%;
 }
@@ -222,6 +256,9 @@
   display: block;
   flex: 1;
 }
+.tvp-search-box__loading-box {
+  min-height: 32px;
+}
 .tvp-search-box__radio-wrap {
   max-height: 240px;
   overflow: auto;
@@ -241,6 +278,8 @@
   margin-top: var(--tvp-SearchBox-dropdown-btn-group-margin-top);
   padding-top: var(--tvp-SearchBox-dropdown-btn-group-padding-top);
   padding-right: 10px;
+  gap: 5px;
+  justify-content: flex-end;
   padding-bottom: var(--tvp-SearchBox-dropdown-btn-group-padding-bottom);
 }
 .tvp-search-box__bottom-btn .tiny-button,
@@ -267,12 +306,11 @@
 }
 .tvp-search-box__filter-item {
   color: var(--tvp-SearchBox-search-filter-text-color);
-  border-bottom: 1px solid #fff;
 }
 .tvp-search-box__dropdown-item.tiny-dropdown-item {
   width: 100%;
   max-width: 100%;
-  --tv-DropdownItem-icon-color-hover: var(--tv-color-bg-active-control);
+  background: inherit;
 }
 .tvp-search-box__dropdown-item.tiny-dropdown-item > div {
   white-space: nowrap;
@@ -282,6 +320,9 @@
 .tvp-search-box__dropdown-item.tiny-dropdown-item.tvp-search-box__checkbox-item .tiny-checkbox__inner > .tiny-svg {
   margin-right: 0;
 }
+.tvp-search-box__dropdown-item-init {
+  background-color: #f5f5f5;
+}
 .tvp-search-box__checkbox-item .tvp-search-box__checkbox-item-label,
 .tvp-search-box__checkbox-item .tiny-checkbox,
 .tvp-search-box__checkbox-item .tiny-dropdown-item__label {
@@ -315,6 +356,7 @@
 .tvp-search-box__panel-box {
   width: 100%;
   padding: 0px 10px;
+  color: var(--tvp-SearchBox-dropdown-desc-text-color);
 }
 .tvp-search-box__date-item.tiny-form-item,
 .tvp-search-box__number-item.tiny-form-item {

package/dist/lib/components/first-level-panel.vue.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const firstLevelPanel_vue_vue_type_script_setup_true_lang = require("./first-level-panel.vue.cjs2.js");
+exports.default = firstLevelPanel_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/components/first-level-panel.vue.cjs2.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const TinyDropdownItem = require("@opentiny/vue-dropdown-item");
+const index = require("../index.cjs.js");
+;/* empty css                 */
+const _hoisted_1 = { class: "tvp-search-box__filter-type" };
+const _hoisted_2 = {
+  key: 0,
+  class: "tvp-search-box__text-highlight"
+};
+const _hoisted_3 = { class: "tvp-search-box__filter-type" };
+const _hoisted_4 = {
+  key: 0,
+  class: "tvp-search-box__text-highlight"
+};
+const _hoisted_5 = { class: "tvp-search-box__filter-type" };
+const _hoisted_6 = {
+  id: "potential-loading",
+  class: "tvp-search-box__potential-box"
+};
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = { class: "tvp-search-box__text-highlight" };
+const _hoisted_9 = { class: "tvp-search-box__first-panel" };
+const _hoisted_10 = {
+  key: 0,
+  class: "tvp-search-box__filter-type"
+};
+const _hoisted_11 = ["title"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "TinySearchBoxFirstLevelPanel"
+  },
+  __name: "first-level-panel",
+  props: {
+    state: {
+      type: Object,
+      default: () => ({})
+    },
+    potentialOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["events", "selectInputValue", "selectPropItem", "selectRadioItem"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const events = (eventName, p1, p2) => {
+      emits("events", eventName, p1, p2);
+    };
+    const selectInputValue = (e) => {
+      events("selectInputValue", e);
+    };
+    const selectPropItem = (e) => {
+      events("selectPropItem", e);
+    };
+    const selectRadioItem = (e, v) => {
+      events("selectRadioItem", e, v);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.withDirectives(vue.createVNode(vue.unref(TinyDropdownItem), {
+          class: "tvp-search-box__filter-item tvp-search-box__dropdown-item tvp-search-box__dropdown-item-init",
+          onClick: _cache[0] || (_cache[0] = ($event) => selectInputValue(__props.state.inputValue))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.initUse")) + "＂" + vue.toDisplayString(__props.state.inputValue) + "＂", 1)
+          ]),
+          _: 1
+        }, 512), [
+          [vue.vShow, __props.state.inputValue.trim()]
+        ]),
+        vue.withDirectives(vue.createElementVNode("div", null, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.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_1, vue.toDisplayString(key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key), 1),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attr"], (item, index2) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                    key: item.label + index2,
+                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                    onClick: ($event) => 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 }, [
+                            text.toLowerCase() === item.hightlighStr ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(text), 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_3, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.propertyValue", [key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key])), 1),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value["attrValue"], (item, index2) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                    key: item.label + index2,
+                    disabled: item.isChecked,
+                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                    onClick: ($event) => 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 }, [
+                            text.toLowerCase() === item.hightlighStr ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(text), 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)),
+          vue.withDirectives(vue.createElementVNode("div", null, [
+            vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(vue.unref(index.t)("tvp.tvpSearchbox.matched")), 1),
+            vue.createElementVNode("div", _hoisted_6, [
+              __props.state.potentialOptions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.state.potentialOptions, (item, index2) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                    key: item.label + index2,
+                    class: "tvp-search-box__filter-item tvp-search-box__dropdown-item",
+                    onClick: ($event) => selectRadioItem(item, true)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(item.label) + "： ", 1),
+                      vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(item.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"]);
+                }), 128))
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ], 512), [
+            [vue.vShow, __props.state.potentialOptions]
+          ])
+        ], 512), [
+          [vue.vShow, !__props.state.propItem.label && __props.state.inputValue.trim()]
+        ]),
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.state.groupItems, (group, key) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key }, [
+              group.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, vue.toDisplayString(key === "0" ? vue.unref(index.t)("tvp.tvpSearchbox.attributeType") : key), 1)) : vue.createCommentVNode("", true),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group, (item, index2) => {
+                return vue.openBlock(), vue.createBlock(vue.unref(TinyDropdownItem), {
+                  key: (item.field || item.label) + index2,
+                  class: "tvp-search-box__dropdown-item",
+                  onClick: ($event) => selectPropItem(item)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("span", {
+                      title: item.label
+                    }, vue.toDisplayString(item.label), 9, _hoisted_11)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]);
+              }), 128))
+            ], 64);
+          }), 128))
+        ], 512), [
+          [vue.vShow, __props.state.visible && !__props.state.propItem.label && !__props.state.inputValue.trim()]
+        ])
+      ], 64);
+    };
+  }
+});
+exports.default = _sfc_main;

package/dist/lib/components/second-level-panel.vue.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const secondLevelPanel_vue_vue_type_script_setup_true_lang = require("./second-level-panel.vue.cjs2.js");
+exports.default = secondLevelPanel_vue_vue_type_script_setup_true_lang.default;