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

package/dist/es/composables/use-checkbox.es.js

@@ -1,11 +1,13 @@
 import { computed } from "vue";
 import { getTagId, hasTagItem, createNewTag, emitChangeModelEvent } from "../utils/tag.es.js";
 import { omitObj, deepClone } from "../utils/clone.es.js";
+import { showDropdown } from "../utils/dropdown.es.js";
 function useCheckbox({ props, state, emits }) {
   const selectCheckbox = (confirm) => {
+    var _a, _b;
+    showDropdown(state, false);
     const { checkboxGroup, prevItem, propItem } = state;
     const rest = omitObj(prevItem);
-    state.hiden = true;
     if (confirm) {
       const tagList = [];
       const oldValue = deepClone(state.innerModelValue);
@@ -16,7 +18,7 @@ function useCheckbox({ props, state, emits }) {
         const { indexMap } = state;
         const hasTagIndex = indexMap.get(prevLabel);
         hasTagIndex !== void 0 && state.innerModelValue.splice(hasTagIndex, 1);
-        state.backupList.forEach((item) => {
+        (_a = state.backupList) == null ? void 0 : _a.forEach((item) => {
           const { label } = item;
           const checkboxLabel = `${prevLabel}${label}`;
           const hasItem = checkboxGroup.includes(checkboxLabel);
@@ -35,7 +37,7 @@ function useCheckbox({ props, state, emits }) {
       } else {
         const { valueMap } = state;
         const indexList = [];
-        state.backupList.forEach((item) => {
+        (_b = state.backupList) == null ? void 0 : _b.forEach((item) => {
           const { label } = item;
           const value = `${prevLabel}${label}`;
           const hasItem = checkboxGroup.includes(value);
@@ -61,24 +63,9 @@ function useCheckbox({ props, state, emits }) {
       state.inputValue = "";
     }
   };
-  const isIndeterminate = computed(
-    () => state.checkboxGroup.length > 0 && state.checkboxGroup.length !== state.filterList.length
-  );
-  const checkAll = computed({
-    get: () => state.checkboxGroup.length && state.checkboxGroup.length === state.filterList.length,
-    set: (val) => {
-      if (val) {
-        state.checkboxGroup = state.filterList.flatMap((item) => `${state.prevItem.label}${item.label}`);
-      } else {
-        state.checkboxGroup = [];
-      }
-    }
-  });
   const isShowClose = computed(() => props.modelValue.length || state.propItem.label || state.inputValue);
   return {
     selectCheckbox,
-    isIndeterminate,
-    checkAll,
     isShowClose
   };
 }

package/dist/es/composables/use-custom.es.js

@@ -2,6 +2,7 @@ import { emitChangeModelEvent, hasTagItem, resetInput } from "../utils/tag.es.js
 import { showDropdown, showPopover } from "../utils/dropdown.es.js";
 function useCustom({ state, emits }) {
   const updateCustomValue = (customTag) => {
+    showDropdown(state, false);
     const { prevItem, indexMap } = state;
     const { replace, label } = prevItem;
     const tagList = [];

package/dist/es/composables/use-datepicker.es.js

@@ -10,10 +10,10 @@ function useDatePicker({ props, state, emits }) {
     }
     const newTag = await getVerifyDateTag(instance, state, props, isDateTimeType);
     if (newTag) {
+      showDropdown(state, false);
       const newValue = props.modelValue.filter((prev) => prev.type !== newTag.type || prev.field !== newTag.field);
       newValue.push(newTag);
       emitChangeModelEvent({ emits, state, newValue });
-      showDropdown(state, false);
     } else {
       showDropdown(state);
     }

package/dist/es/composables/use-dropdown.es.js

@@ -5,12 +5,11 @@ import { omitObj, deepClone } from "../utils/clone.es.js";
 function useDropdown({ props, emits, state, t, format }) {
   const { instance } = state;
   const showValueItem = (item) => {
-    var _a;
+    var _a, _b, _c;
     const { start, end, type } = item;
-    state.backupList = ((_a = item.options) == null ? void 0 : _a.length) ? item.options : [];
+    state.backupList = item.options;
     if (type === "numRange") {
       setStateNumRange(state, item, t);
-      state.hiden = false;
     } else if (type === "dateRange") {
       const { dateRangeFormat } = state;
       if (!state.startDate && start) {
@@ -21,7 +20,6 @@ function useDropdown({ props, emits, state, t, format }) {
         const newEnd = format(end, dateRangeFormat);
         state.endDate = newEnd < state.startDate ? null : newEnd;
       }
-      state.hiden = false;
     } else if (type === "datetimeRange") {
       const { datetimeRangeFormat } = state;
       if (!state.startDateTime && start) {
@@ -32,28 +30,26 @@ function useDropdown({ props, emits, state, t, format }) {
         const newEnd = format(end, datetimeRangeFormat);
         state.endDateTime = newEnd < state.startDateTime ? null : newEnd;
       }
-      state.hiden = false;
     } else if (state.backupList && type === "checkbox") {
       state.filterList = state.backupList;
       state.checkboxGroup = [];
-      state.backupList.forEach((subItem) => {
+      (_a = state.backupList) == null ? void 0 : _a.forEach((subItem) => {
         if (hasTagItem(state, subItem.label)) {
           state.checkboxGroup.push(`${item.label}${subItem.label}`);
         }
         subItem.isFilter = false;
       });
-      state.hiden = false;
-    } else if (type === "custom") {
-      state.hiden = false;
     }
-    if (state.backupList.length && type !== "checkbox") {
-      state.backupList.forEach((option) => {
+    if (type !== "checkbox" && ((_b = state.backupList) == null ? void 0 : _b.length)) {
+      (_c = state.backupList) == null ? void 0 : _c.forEach((option) => {
         option.isFilter = false;
         option.isChecked = hasTagItem(state, option.label);
       });
     }
     state.currentOperators = null;
-    if (!((type === "radio" || !type) && !state.backupList.length)) {
+    if (!state.backupList && !["dateRange", "datetimeRange", "numRange", "custom"].includes(type)) {
+      showDropdown(state, false);
+    } else {
       showDropdown(state);
     }
   };
@@ -68,7 +64,6 @@ function useDropdown({ props, emits, state, t, format }) {
     if (operators == null ? void 0 : operators.length) {
       state.operatorValue = "";
       state.currentOperators = operators;
-      state.isResetFlag = true;
       showDropdown(state);
     } else {
       state.operatorValue = ":";
@@ -105,6 +100,7 @@ function useDropdown({ props, emits, state, t, format }) {
       resetInput(state);
       return;
     }
+    showDropdown(state, false);
     const oldValue = deepClone(state.innerModelValue);
     if ((replace || mergeTag) && index >= 0) {
       state.innerModelValue.splice(index, 1);
@@ -113,7 +109,16 @@ function useDropdown({ props, emits, state, t, format }) {
     const newValue = state.innerModelValue;
     emitChangeModelEvent({ emits, state, newValue, oldValue });
   };
+  const selectInputValue = (val) => {
+    var _a;
+    if ((_a = state.propItem) == null ? void 0 : _a.label) {
+      selectRadioItem({ label: val });
+    } else {
+      createTag();
+    }
+  };
   const selectRadioItem = (item, isPotential = false) => {
+    showDropdown(state, false);
     if (isPotential) {
       state.prevItem = item;
       state.backupPrevItem = item;
@@ -144,11 +149,12 @@ function useDropdown({ props, emits, state, t, format }) {
     }
   };
   const newTagUpdateModelValue = (prevItem, propItem, tag) => {
-    const item = state.backupList.find((subItem) => subItem.label === tag);
+    var _a;
+    const item = (_a = state.backupList) == null ? void 0 : _a.find((subItem) => subItem.label === tag);
     updateModelValue(prevItem, item, propItem.label, tag);
   };
   const hasInputValueCreateTag = (inputValue, propItem, prevItem) => {
-    var _a;
+    var _a, _b;
     if (propItem.label) {
       const { regexp, replace, type, mergeTag } = prevItem;
       const tagList = type !== "checkbox" && replace || type === "checkbox" && mergeTag ? [inputValue] : inputValue.split(props.splitInputValue);
@@ -165,12 +171,15 @@ function useDropdown({ props, emits, state, t, format }) {
       }
     } else {
       const { items, defaultField } = props;
-      const currentItem = defaultField ? items.find((item) => item.field === defaultField) : state.allTypeAttri;
+      const currentItem = items.find((item) => {
+        const { regexp } = item;
+        return regexp && regexp.test(state.inputValue);
+      }) || (defaultField ? items.find((item) => item.field === defaultField) : state.allTypeAttri);
       const { replace, type, mergeTag } = currentItem;
       const tagList = type !== "checkbox" && replace || type === "checkbox" && mergeTag ? [inputValue] : inputValue.split(props.splitInputValue);
       if ((_a = currentItem == null ? void 0 : currentItem.options) == null ? void 0 : _a.length) {
         state.backupList = [...currentItem.options];
-        state.backupList.forEach((item) => {
+        (_b = state.backupList) == null ? void 0 : _b.forEach((item) => {
           const label2 = item.value || item.label;
           if (tagList.includes(label2)) {
             item.isChecked = true;
@@ -200,7 +209,7 @@ function useDropdown({ props, emits, state, t, format }) {
   const helpClick = () => {
     emits("help");
   };
-  return { selectPropItem, selectRadioItem, createTag, helpClick, setOperator };
+  return { selectPropItem, selectRadioItem, selectInputValue, createTag, helpClick, setOperator };
 }
 export {
   useDropdown

package/dist/es/composables/use-edit.es.js

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

package/dist/es/composables/use-init.es.js

@@ -1,9 +1,10 @@
 import { showDropdown, showPopover } from "../utils/dropdown.es.js";
+import { hasTagItem } from "../utils/tag.es.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 });
@@ -11,12 +12,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 (hasTagItem(state, label)) {
+              state.checkboxGroup.push(`${item.label}${label}`);
+            }
+            subItem.isFilter = false;
+          });
+        }
+        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 = [];
@@ -24,24 +44,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) {
       showDropdown(state, false);
     } else {
       showDropdown(state);
     }
   };
   const watchOutsideClick = () => {
-    var _a, _b, _c;
-    if (!state.isMouseDown) {
-      return;
-    }
     if (props.editable) {
       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) {
-      showDropdown(state, false);
-    }
+    showDropdown(state, false);
   };
   const watchMouseDown = () => {
     state.isMouseDown = true;

package/dist/es/composables/use-match.es.js

@@ -1,19 +1,21 @@
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import Loading from "@opentiny/vue-loading";
 import { debounce } from "../utils/index.es.js";
 import { hasTagItem, getTagId, createNewTag, emitChangeModelEvent } from "../utils/tag.es.js";
 import { showDropdown } from "../utils/dropdown.es.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));
@@ -22,29 +24,18 @@ const getHighlightMatch = (labelRegex, label, valueLength) => {
 };
 function useMatch({ props, state, emits }) {
   const loadingInstance = ref(null);
-  watch(
-    () => state.inputValue,
-    (newInput) => {
-      if (!newInput.trim()) {
-        state.isShowDropdown = true;
-      } else {
-        state.isShowDropdown = false;
-      }
-      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;
-    }
-    showDropdown(state, state.isShowDropdown);
+    showDropdown(state, true);
   };
   const handleSearch = (e) => {
+    var _a, _b, _c;
     const { recordItems, propItem } = state;
     const inputValue = e.target.value.trim();
     const { maxlength } = props;
@@ -53,13 +44,13 @@ function useMatch({ props, state, emits }) {
       return;
     }
     if (inputValue.length === 0) {
+      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));
@@ -71,7 +62,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 (hasTagItem(state, item.label)) {
@@ -84,62 +75,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) {
+        showDropdown(state);
+      } else {
+        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 {
-      showDropdown(state, state.isShowDropdown);
+      showDropdown(state);
     }
   };
   const handleInput = 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) {
+      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 = hasTagItem(state, value);
       });
@@ -147,6 +146,7 @@ function useMatch({ props, state, emits }) {
       if (item.isChecked) {
         return;
       }
+      showDropdown(state, false);
       state.isShowTagKey = true;
       resetBackupList();
       const { field, type } = prevItem;

package/dist/es/composables/use-num-range.es.js

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

package/dist/es/composables/use-placeholder.es.js

@@ -10,13 +10,14 @@ function usePlaceholder({ props, state, t }) {
   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"));
@@ -27,7 +28,6 @@ function usePlaceholder({ props, state, t }) {
         } else {
           setPlaceholder(props.emptyPlaceholder);
         }
-        !state.hiden && (state.hiden = true);
       }
     }
   );

package/dist/es/composables/use-tag.es.js

@@ -13,18 +13,21 @@ function useTag({ props, state, emits }) {
     }
   };
   const deleteTag = (tag) => {
+    showDropdown(state, false);
     changeIsChecked(tag);
     const newValue = props.modelValue.filter((item) => item !== tag);
     emitChangeModelEvent({ emits, state, newValue });
   };
   const clearTag = () => {
+    showDropdown(state, false);
     props.modelValue.forEach((item) => changeIsChecked(item));
     state.propItem = {};
     state.inputValue = "";
     emitChangeModelEvent({ emits, state, newValue: [] });
-    showDropdown(state, false);
+    emits("clear");
   };
   const backspaceDeleteTag = () => {
+    var _a, _b;
     if (state.inputValue) {
       return;
     }
@@ -33,12 +36,14 @@ function useTag({ props, state, emits }) {
       return;
     }
     if (lastInputValue.value === "" && state.inputValue === "") {
+      showDropdown(state, false);
       const lastIndex = props.modelValue.length - 1;
       changeIsChecked(props.modelValue[lastIndex]);
       const newValue = state.innerModelValue.slice(0, props.modelValue.length - 1);
       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,