@opentiny/vue-search-box 0.0.1

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

@@ -0,0 +1,64 @@
+import { showDropdown, showPopover } from "../utils/dropdown.es.js";
+function useInit({ props, state }) {
+  const { instance } = state;
+  const initItems = () => {
+    state.groupItems = {};
+    state.recordItems.forEach((item) => {
+      const { groupKey = "0" } = item;
+      if (state.groupItems[groupKey]) {
+        state.groupItems[groupKey].push({ ...item });
+      } else {
+        state.groupItems[groupKey] = [{ ...item }];
+        state.matchItems[groupKey] = { attr: [], attrValue: [] };
+      }
+    });
+  };
+  const handleClick = (e) => {
+    const { backupPrevItem, prevItem } = state;
+    e.stopPropagation();
+    state.isResetFlag = true;
+    if (props.editable) {
+      state.popoverVisible = false;
+      state.currentEditValue = [];
+      if (state.propItem.label && backupPrevItem && backupPrevItem !== prevItem) {
+        state.prevItem = backupPrevItem;
+      }
+    }
+    if (!state.isShowPanel || 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);
+    }
+  };
+  const watchMouseDown = () => {
+    state.isMouseDown = true;
+  };
+  const watchMouseMove = () => {
+    if (state.isMouseDown) {
+      state.isMouseDown = false;
+    }
+  };
+  return {
+    initItems,
+    watchOutsideClick,
+    watchMouseDown,
+    watchMouseMove,
+    handleClick
+  };
+}
+export {
+  useInit
+};

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

@@ -0,0 +1,170 @@
+import { ref, watch } 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 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);
+  }
+  if (lastIndex < label.length) {
+    match.push(label.slice(lastIndex));
+  }
+  return match;
+};
+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")
+    }));
+    state.potentialOptions = await props.potentialOptions.getMatchList(keyword);
+    loadingInstance.value && loadingInstance.value.close();
+    if (state.potentialOptions.length) {
+      state.isShowDropdown = true;
+    }
+    showDropdown(state, state.isShowDropdown);
+  };
+  const handleSearch = (e) => {
+    const { recordItems, propItem } = state;
+    const inputValue = e.target.value.trim();
+    const { maxlength } = props;
+    if (maxlength && maxlength < inputValue.length) {
+      emits("exceed", maxlength);
+      return;
+    }
+    if (inputValue.length === 0) {
+      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));
+    if (hasItem) {
+      state.propItem.label = hasItem.label;
+      state.inputValue = "";
+      state.prevItem = hasItem;
+      state.backupPrevItem = hasItem;
+      state.backupList = hasItem.options || [];
+      return;
+    }
+    state.filterList = state.backupList.filter((item) => {
+      if (patt.test(item.label)) {
+        delete item.isFilter;
+        if (hasTagItem(state, item.label)) {
+          state.checkboxGroup.push(`${state.prevItem.label}${item.label}`);
+        }
+        return true;
+      } else {
+        item.isFilter = true;
+        return false;
+      }
+    });
+    const labelRegex = new RegExp(value, "ig");
+    const valueLength = inputValue.length;
+    if (state.propItem.label) {
+      state.backupList.forEach((item) => {
+        const itemLabel = item.label;
+        if (patt.test(itemLabel)) {
+          item.match = getHighlightMatch(labelRegex, itemLabel, valueLength);
+          item.isFilter = false;
+          state.isShowDropdown = true;
+        } else {
+          item.isFilter = true;
+        }
+      });
+      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;
+      }
+      for (const option of options) {
+        const optionLabel = state.propItem.label ? itemLabel : `${itemLabel}：${option.label}`;
+        if (patt.test(optionLabel)) {
+          const match = getHighlightMatch(labelRegex, optionLabel, valueLength);
+          state.matchItems[groupKey].attrValue.push({
+            ...option,
+            ...rest,
+            value: option.label,
+            match
+          });
+          state.isShowDropdown = true;
+        }
+      }
+    }
+    if (value && props.potentialOptions && props.potentialOptions.getMatchList) {
+      getMatchList(value);
+    } else {
+      showDropdown(state, state.isShowDropdown);
+    }
+  };
+  const handleInput = debounce(handleSearch, 500);
+  const resetBackupList = () => {
+    state.backupList.forEach((item) => item.isFilter && delete item.isFilter);
+  };
+  const selectFirstMap = (item, isFirst) => {
+    const { options } = item;
+    const { prevItem, propItem } = state;
+    if (options) {
+      state.propItem.value = `${item.label}=`;
+      state.isShowTagKey = false;
+      state.inputValue = "";
+      state.backupList = item.options || [];
+      resetBackupList();
+      state.backupList.forEach((subItem) => {
+        const value = propItem.value + subItem.label;
+        subItem.isChecked = hasTagItem(state, value);
+      });
+    } else {
+      if (item.isChecked) {
+        return;
+      }
+      state.isShowTagKey = true;
+      resetBackupList();
+      const { field, type } = prevItem;
+      const value = propItem.value + item.label;
+      const id = getTagId(props, prevItem, item);
+      const newTag = createNewTag({ type, field, label: propItem.label, value, ...id });
+      const tagList = [newTag];
+      emitChangeModelEvent({ emits, state, tagList });
+    }
+    if (isFirst) {
+      showDropdown(state);
+    }
+  };
+  return {
+    handleInput,
+    selectFirstMap
+  };
+}
+export {
+  useMatch
+};

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

@@ -0,0 +1,77 @@
+import { showDropdown } from "../utils/dropdown.es.js";
+import { getVerifyNumTag } from "../utils/validate.es.js";
+import { emitChangeModelEvent } from "../utils/tag.es.js";
+function useNumRange({ props, state, t, emits }) {
+  const { instance } = state;
+  const sizeChange = async (confirm) => {
+    if (!confirm) {
+      state.propItem.label = "";
+      return;
+    }
+    const newTag = await getVerifyNumTag(instance, state, props);
+    if (newTag) {
+      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);
+    }
+  };
+  const createDateRules = (item, startKey, endKey) => {
+    const { maxTimeLength = 0 } = item;
+    return {
+      [startKey]: {
+        validator: (rule, value, cb) => {
+          if (maxTimeLength > 0 && !value) {
+            cb(new Error(t("tvp.tvpSearchbox.notBeNull")));
+          } else if (!value && !state[endKey]) {
+            cb(new Error(t("tvp.tvpSearchbox.rangeDateTitle")));
+          } else {
+            cb();
+          }
+        }
+      },
+      [endKey]: {
+        validator: (rule, value, cb) => {
+          if (maxTimeLength > 0 && !value) {
+            cb(new Error(t("tvp.tvpSearchbox.notBeNull")));
+          } else if (!value && !state[startKey]) {
+            cb(new Error(t("tvp.tvpSearchbox.rangeDateTitle")));
+          } else {
+            cb();
+          }
+        }
+      }
+    };
+  };
+  const initFormRule = () => {
+    let dateRules = {}, datetimeRules = {};
+    props.items.forEach((item) => {
+      if (item.type === "dateRange") {
+        dateRules = createDateRules(item, "startDate", "endDate");
+      }
+      if (item.type === "datetimeRange") {
+        datetimeRules = createDateRules(item, "startDateTime", "endDateTime");
+      }
+    });
+    state.formRules = {
+      ...dateRules,
+      ...datetimeRules
+    };
+    if (props.editable) {
+      state.formRules.inputEditValue = {
+        required: true,
+        message: t("tvp.tvpSearchbox.notBeNull"),
+        trigger: ["change", "blur"]
+      };
+    }
+  };
+  return {
+    initFormRule,
+    sizeChange
+  };
+}
+export {
+  useNumRange
+};

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

@@ -0,0 +1,41 @@
+import { ref, watch } from "vue";
+function usePlaceholder({ props, state, t }) {
+  const placeholder = ref(props.emptyPlaceholder);
+  const setPlaceholder = (placeholderValue) => {
+    placeholder.value = placeholderValue;
+  };
+  if (props.modelValue.length > 0) {
+    setPlaceholder(t("tvp.tvpSearchbox.addPlaceholder"));
+  }
+  watch(
+    () => state.propItem.label,
+    (newValue) => {
+      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) {
+          setPlaceholder(t("tvp.tvpSearchbox.dynamicPlaceholder", { newValue }));
+        } else {
+          setPlaceholder(t("tvp.tvpSearchbox.addPlaceholder"));
+        }
+      } else {
+        if (props.modelValue.length > 0) {
+          setPlaceholder(t("tvp.tvpSearchbox.addPlaceholder"));
+        } else {
+          setPlaceholder(props.emptyPlaceholder);
+        }
+        !state.hiden && (state.hiden = true);
+      }
+    }
+  );
+  return {
+    placeholder,
+    setPlaceholder
+  };
+}
+export {
+  usePlaceholder
+};

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

@@ -0,0 +1,51 @@
+import { ref } from "vue";
+import { showDropdown } from "../utils/dropdown.es.js";
+import { emitChangeModelEvent } from "../utils/tag.es.js";
+function useTag({ props, state, emits }) {
+  const lastInputValue = ref(state.inputValue);
+  const changeIsChecked = (tag) => {
+    if (tag) {
+      const parent = state.recordItems.find((item) => item.label === tag.label);
+      if (parent && parent.options) {
+        const child = parent.options.find((item) => item.label === tag.value);
+        child && (child.isChecked = false);
+      }
+    }
+  };
+  const deleteTag = (tag) => {
+    changeIsChecked(tag);
+    const newValue = props.modelValue.filter((item) => item !== tag);
+    emitChangeModelEvent({ emits, state, newValue });
+  };
+  const clearTag = () => {
+    props.modelValue.forEach((item) => changeIsChecked(item));
+    state.propItem = {};
+    state.inputValue = "";
+    emitChangeModelEvent({ emits, state, newValue: [] });
+    showDropdown(state, false);
+  };
+  const backspaceDeleteTag = () => {
+    if (state.inputValue) {
+      return;
+    }
+    if (state.propItem.label) {
+      state.propItem = {};
+      return;
+    }
+    if (lastInputValue.value === "" && state.inputValue === "") {
+      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;
+  };
+  return {
+    deleteTag,
+    clearTag,
+    backspaceDeleteTag
+  };
+}
+export {
+  useTag
+};