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

package/dist/lib/composables/use-edit.cjs.js

@@ -51,6 +51,7 @@ function useEdit({ props, state, t, nextTick, format, emits }) {
     !state.prevItem && (state.prevItem = tag2);
     state.selectValue = tag2.label;
     state.currentModelValueIndex = index;
+    emits("tagClick", tag2);
     setDropdownProps(tag2);
   };
   const selectPropChange = (item, disabled) => {
@@ -75,8 +76,9 @@ function useEdit({ props, state, t, nextTick, format, emits }) {
       newTag = await validate.getVerifyTag(instance, state, props);
     }
     if (newTag) {
-      tag.emitChangeModelEvent({ emits, state, index, newTag, isEdit: true });
+      dropdown.showDropdown(state, false);
       state.popoverVisible = false;
+      tag.emitChangeModelEvent({ emits, state, index, newTag, isEdit: true });
     } else {
       state.popoverVisible = true;
     }

package/dist/lib/composables/use-init.cjs.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dropdown = require("../utils/dropdown.cjs.js");
+const tag = require("../utils/tag.cjs.js");
 function useInit({ props, state }) {
-  const { instance } = state;
   const initItems = () => {
     state.groupItems = {};
     state.recordItems.forEach((item) => {
+      var _a;
       const { groupKey = "0" } = item;
       if (state.groupItems[groupKey]) {
         state.groupItems[groupKey].push({ ...item });
@@ -13,12 +14,31 @@ function useInit({ props, state }) {
         state.groupItems[groupKey] = [{ ...item }];
         state.matchItems[groupKey] = { attr: [], attrValue: [] };
       }
+      if (state.prevItem && item.field === state.prevItem.field && item !== state.prevItem) {
+        const { options, type } = item;
+        state.prevItem = item;
+        if (options == null ? void 0 : options.length) {
+          state.backupList = options;
+        }
+        if (type === "checkbox") {
+          state.filterList = state.backupList;
+          state.checkboxGroup = [];
+          (_a = state.backupList) == null ? void 0 : _a.forEach((subItem) => {
+            const { label } = subItem;
+            if (tag.hasTagItem(state, label)) {
+              state.checkboxGroup.push(`${item.label}${label}`);
+            }
+            subItem.isFilter = false;
+          });
+        }
+        dropdown.showDropdown(state, item.field === state.prevItem.field && item !== state.prevItem);
+      }
     });
   };
   const handleClick = (e) => {
+    var _a;
     const { backupPrevItem, prevItem } = state;
     e.stopPropagation();
-    state.isResetFlag = true;
     if (props.editable) {
       state.popoverVisible = false;
       state.currentEditValue = [];
@@ -26,24 +46,18 @@ function useInit({ props, state }) {
         state.prevItem = backupPrevItem;
       }
     }
-    if (!state.isShowPanel || props.items.length === 0) {
+    if (state.hasBackupList && (((_a = state.backupList) == null ? void 0 : _a.length) === 0 || !state.backupList) && !state.inputValue || props.items.length === 0) {
       dropdown.showDropdown(state, false);
     } else {
       dropdown.showDropdown(state);
     }
   };
   const watchOutsideClick = () => {
-    var _a, _b, _c;
-    if (!state.isMouseDown) {
-      return;
-    }
     if (props.editable) {
       dropdown.showPopover(state, false);
     }
     state.isMouseDown = false;
-    if ((_c = (_b = (_a = instance == null ? void 0 : instance.refs) == null ? void 0 : _a.dropdownRef) == null ? void 0 : _b.state) == null ? void 0 : _c.visible) {
-      dropdown.showDropdown(state, false);
-    }
+    dropdown.showDropdown(state, false);
   };
   const watchMouseDown = () => {
     state.isMouseDown = true;

package/dist/lib/composables/use-match.cjs.js

@@ -6,16 +6,18 @@ const index = require("../utils/index.cjs.js");
 const tag = require("../utils/tag.cjs.js");
 const dropdown = require("../utils/dropdown.cjs.js");
 const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const getHighlightMatch = (labelRegex, label, valueLength) => {
+const getHighlightMatch = (labelRegex, label) => {
   const match = [];
-  let lastIndex;
-  while (labelRegex.exec(label) !== null) {
-    lastIndex = labelRegex.lastIndex;
-    const startIndex = lastIndex - valueLength;
-    const prevMatch = label.slice(0, startIndex);
-    const currentMatch = [label.slice(startIndex, lastIndex)];
-    prevMatch && match.push(prevMatch);
-    match.push(currentMatch);
+  let lastIndex = 0;
+  let result;
+  while ((result = labelRegex.exec(label)) !== null) {
+    const startIndex = result.index;
+    const endIndex = labelRegex.lastIndex;
+    if (startIndex > lastIndex) {
+      match.push(label.slice(lastIndex, startIndex));
+    }
+    match.push(label.slice(startIndex, endIndex));
+    lastIndex = endIndex;
   }
   if (lastIndex < label.length) {
     match.push(label.slice(lastIndex));
@@ -24,29 +26,18 @@ const getHighlightMatch = (labelRegex, label, valueLength) => {
 };
 function useMatch({ props, state, emits }) {
   const loadingInstance = vue.ref(null);
-  vue.watch(
-    () => state.inputValue,
-    (newInput) => {
-      if (!newInput.trim()) {
-        state.isShowDropdown = true;
-      } else {
-        state.isShowDropdown = false;
-      }
-      dropdown.showDropdown(state, false);
-    }
-  );
   const getMatchList = async (keyword) => {
-    !loadingInstance.value && (loadingInstance.value = Loading.service({
-      target: document.getElementById("potential-loading")
-    }));
+    if (typeof document !== "undefined") {
+      !loadingInstance.value && (loadingInstance.value = Loading.service({
+        target: document.getElementById("potential-loading")
+      }));
+    }
     state.potentialOptions = await props.potentialOptions.getMatchList(keyword);
     loadingInstance.value && loadingInstance.value.close();
-    if (state.potentialOptions.length) {
-      state.isShowDropdown = true;
-    }
-    dropdown.showDropdown(state, state.isShowDropdown);
+    dropdown.showDropdown(state, true);
   };
   const handleSearch = (e) => {
+    var _a, _b, _c;
     const { recordItems, propItem } = state;
     const inputValue = e.target.value.trim();
     const { maxlength } = props;
@@ -55,13 +46,13 @@ function useMatch({ props, state, emits }) {
       return;
     }
     if (inputValue.length === 0) {
+      dropdown.showDropdown(state);
       return;
     }
     Object.keys(state.matchItems).forEach((key) => {
       state.matchItems[key].attr = [];
       state.matchItems[key].attrValue = [];
     });
-    state.isShowDropdown = false;
     const value = escapeRegExp(inputValue);
     const patt = new RegExp(value, "i");
     const hasItem = propItem.label || !value ? null : recordItems.find((item) => item.type === "map" && patt.test(item.label));
@@ -73,7 +64,7 @@ function useMatch({ props, state, emits }) {
       state.backupList = hasItem.options || [];
       return;
     }
-    state.filterList = state.backupList.filter((item) => {
+    state.filterList = (_a = state.backupList) == null ? void 0 : _a.filter((item) => {
       if (patt.test(item.label)) {
         delete item.isFilter;
         if (tag.hasTagItem(state, item.label)) {
@@ -86,62 +77,70 @@ function useMatch({ props, state, emits }) {
       }
     });
     const labelRegex = new RegExp(value, "ig");
-    const valueLength = inputValue.length;
+    const hightlighStr = inputValue.toLowerCase();
     if (state.propItem.label) {
-      state.backupList.forEach((item) => {
+      (_b = state.backupList) == null ? void 0 : _b.forEach((item) => {
+        item.hightlighStr = hightlighStr;
         const itemLabel = item.label;
         if (patt.test(itemLabel)) {
-          item.match = getHighlightMatch(labelRegex, itemLabel, valueLength);
+          item.match = getHighlightMatch(labelRegex, itemLabel);
           item.isFilter = false;
-          state.isShowDropdown = true;
         } else {
           item.isFilter = true;
         }
       });
+      if (((_c = state.backupList) == null ? void 0 : _c.length) || inputValue) {
+        dropdown.showDropdown(state);
+      } else {
+        dropdown.showDropdown(state, false);
+      }
       return;
     }
     for (const item of recordItems) {
       const { options = [], groupKey = "0", ...rest } = item;
       const itemLabel = rest.label;
       if (patt.test(itemLabel)) {
-        const match = getHighlightMatch(labelRegex, itemLabel, valueLength);
-        state.matchItems[groupKey].attr.push({ ...item, match });
-        state.isShowDropdown = true;
+        const match = getHighlightMatch(labelRegex, itemLabel);
+        state.matchItems[groupKey].attr.push({ ...item, match, hightlighStr });
       }
       for (const option of options) {
         const optionLabel = state.propItem.label ? itemLabel : `${itemLabel}：${option.label}`;
         if (patt.test(optionLabel)) {
-          const match = getHighlightMatch(labelRegex, optionLabel, valueLength);
+          const match = getHighlightMatch(labelRegex, optionLabel);
           state.matchItems[groupKey].attrValue.push({
             ...option,
             ...rest,
+            options,
+            hightlighStr,
             value: option.label,
             match
           });
-          state.isShowDropdown = true;
         }
       }
     }
     if (value && props.potentialOptions && props.potentialOptions.getMatchList) {
       getMatchList(value);
     } else {
-      dropdown.showDropdown(state, state.isShowDropdown);
+      dropdown.showDropdown(state);
     }
   };
   const handleInput = index.debounce(handleSearch, 500);
   const resetBackupList = () => {
-    state.backupList.forEach((item) => item.isFilter && delete item.isFilter);
+    var _a;
+    (_a = state.backupList) == null ? void 0 : _a.forEach((item) => item.isFilter && delete item.isFilter);
   };
   const selectFirstMap = (item, isFirst) => {
+    var _a;
     const { options } = item;
     const { prevItem, propItem } = state;
     if (options) {
+      dropdown.showDropdown(state, false);
       state.propItem.value = `${item.label}=`;
       state.isShowTagKey = false;
       state.inputValue = "";
       state.backupList = item.options || [];
       resetBackupList();
-      state.backupList.forEach((subItem) => {
+      (_a = state.backupList) == null ? void 0 : _a.forEach((subItem) => {
         const value = propItem.value + subItem.label;
         subItem.isChecked = tag.hasTagItem(state, value);
       });
@@ -149,6 +148,7 @@ function useMatch({ props, state, emits }) {
       if (item.isChecked) {
         return;
       }
+      dropdown.showDropdown(state, false);
       state.isShowTagKey = true;
       resetBackupList();
       const { field, type } = prevItem;

package/dist/lib/composables/use-num-range.cjs.js

@@ -12,10 +12,10 @@ function useNumRange({ props, state, t, emits }) {
     }
     const newTag = await validate.getVerifyNumTag(instance, state, props);
     if (newTag) {
+      dropdown.showDropdown(state, false);
       const newValue = props.modelValue.filter((prev) => prev.type !== newTag.type || prev.field !== newTag.field);
       newValue.push(newTag);
       tag.emitChangeModelEvent({ emits, state, newValue });
-      dropdown.showDropdown(state, false);
     } else {
       dropdown.showDropdown(state);
     }

package/dist/lib/composables/use-placeholder.cjs.js

@@ -12,13 +12,14 @@ function usePlaceholder({ props, state, t }) {
   vue.watch(
     () => state.propItem.label,
     (newValue) => {
+      var _a;
       if (newValue) {
         const { placeholder: placeholder2, type } = state.prevItem;
         if (placeholder2) {
           setPlaceholder(placeholder2);
         } else if (type === "map") {
           setPlaceholder(t("tvp.tvpSearchbox.tagPlaceholder"));
-        } else if (state.backupList.length) {
+        } else if ((_a = state.backupList) == null ? void 0 : _a.length) {
           setPlaceholder(t("tvp.tvpSearchbox.dynamicPlaceholder", { newValue }));
         } else {
           setPlaceholder(t("tvp.tvpSearchbox.addPlaceholder"));
@@ -29,7 +30,6 @@ function usePlaceholder({ props, state, t }) {
         } else {
           setPlaceholder(props.emptyPlaceholder);
         }
-        !state.hiden && (state.hiden = true);
       }
     }
   );

package/dist/lib/composables/use-tag.cjs.js

@@ -15,18 +15,21 @@ function useTag({ props, state, emits }) {
     }
   };
   const deleteTag = (tag$1) => {
+    dropdown.showDropdown(state, false);
     changeIsChecked(tag$1);
     const newValue = props.modelValue.filter((item) => item !== tag$1);
     tag.emitChangeModelEvent({ emits, state, newValue });
   };
   const clearTag = () => {
+    dropdown.showDropdown(state, false);
     props.modelValue.forEach((item) => changeIsChecked(item));
     state.propItem = {};
     state.inputValue = "";
     tag.emitChangeModelEvent({ emits, state, newValue: [] });
-    dropdown.showDropdown(state, false);
+    emits("clear");
   };
   const backspaceDeleteTag = () => {
+    var _a, _b;
     if (state.inputValue) {
       return;
     }
@@ -35,12 +38,14 @@ function useTag({ props, state, emits }) {
       return;
     }
     if (lastInputValue.value === "" && state.inputValue === "") {
+      dropdown.showDropdown(state, false);
       const lastIndex = props.modelValue.length - 1;
       changeIsChecked(props.modelValue[lastIndex]);
       const newValue = state.innerModelValue.slice(0, props.modelValue.length - 1);
       tag.emitChangeModelEvent({ emits, state, newValue });
     }
     lastInputValue.value = state.inputValue;
+    (_b = (_a = state == null ? void 0 : state.instance) == null ? void 0 : _a.refs) == null ? void 0 : _b.inputRef.$el.click();
   };
   return {
     deleteTag,

package/dist/lib/{index-VrLZbD8H.css → index-BYxS8gdW.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/index.cjs.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 require("./index.vue.cjs.js");
+require("./components/first-level-panel.vue.cjs.js");
+require("./components/second-level-panel.vue.cjs.js");
 const zh_CN = require("./utils/zh_CN.cjs.js");
 const en_US = require("./utils/en_US.cjs.js");
 ;/* empty css                */
 require("./index.type.cjs.js");
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue.cjs2.js");
+const firstLevelPanel_vue_vue_type_script_setup_true_lang = require("./components/first-level-panel.vue.cjs2.js");
+const secondLevelPanel_vue_vue_type_script_setup_true_lang = require("./components/second-level-panel.vue.cjs2.js");
 let apps;
 index_vue_vue_type_script_setup_true_lang.default.install = function(app) {
   apps = app;
@@ -19,4 +23,6 @@ const t = (key) => {
 exports.zhCN = zh_CN.default;
 exports.enUS = en_US.default;
 exports.default = index_vue_vue_type_script_setup_true_lang.default;
+exports.TinySearchBoxFirstLevelPanel = firstLevelPanel_vue_vue_type_script_setup_true_lang.default;
+exports.TinySearchBoxSecondLevelPanel = secondLevelPanel_vue_vue_type_script_setup_true_lang.default;
 exports.t = t;