@opentiny/vue-search-box 0.0.1

package/lib/composables/use-datepicker.cjs.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dropdown = require("../utils/dropdown.cjs.js");
+const validate = require("../utils/validate.cjs.js");
+const tag = require("../utils/tag.cjs.js");
+function useDatePicker({ props, state, emits }) {
+  const { instance } = state;
+  const onConfirmDate = async (confirm, isDateTimeType = false) => {
+    if (!confirm) {
+      state.propItem.label = "";
+      return;
+    }
+    const newTag = await validate.getVerifyDateTag(instance, state, props, isDateTimeType);
+    if (newTag) {
+      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);
+    }
+  };
+  const handleDateShow = () => dropdown.showDropdown(state);
+  const pickerOptions = (startDate, endName = "") => ({
+    disabledDate(time) {
+      const { maxTimeLength = 0, min, max } = state.prevItem;
+      const endDate = state[endName];
+      const curTime = time.getTime();
+      if (maxTimeLength > 0) {
+        if (min || max) {
+          if (endName && endDate) {
+            const end = new Date(endDate).getTime();
+            const start = !min && max ? end - maxTimeLength : Math.max(min.getTime(), end - maxTimeLength);
+            return curTime < start || curTime > end;
+          } else if (!endName && startDate) {
+            const start = new Date(startDate).getTime();
+            const end = min && !max ? start + maxTimeLength : Math.min(max.getTime(), start + maxTimeLength);
+            return curTime < start || curTime > end;
+          } else {
+            return min && curTime < min.getTime() || max && curTime > max.getTime();
+          }
+        } else {
+          if (endName && endDate) {
+            const end = new Date(endDate).getTime();
+            const start = end - maxTimeLength;
+            return curTime < start || curTime > end;
+          } else if (!endName && startDate) {
+            const start = new Date(startDate).getTime();
+            const end = start + maxTimeLength;
+            return curTime < start || curTime > end;
+          } else {
+            return false;
+          }
+        }
+      } else {
+        if (min || max) {
+          if (endName && endDate) {
+            const end = new Date(endDate).getTime();
+            return min && curTime < min.getTime() || curTime > end;
+          } else if (!endName && startDate) {
+            const start = new Date(startDate).getTime();
+            return curTime < start || max && curTime > max.getTime();
+          } else {
+            return curTime < min || curTime > max;
+          }
+        } else {
+          if (endName && endDate) {
+            const end = new Date(endDate).getTime();
+            return curTime > end;
+          } else if (!endName && startDate) {
+            const start = new Date(startDate).getTime();
+            return curTime < start;
+          } else {
+            return false;
+          }
+        }
+      }
+    }
+  });
+  return {
+    onConfirmDate,
+    handleDateShow,
+    pickerOptions
+  };
+}
+exports.useDatePicker = useDatePicker;

package/lib/composables/use-dropdown.cjs.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tag = require("../utils/tag.cjs.js");
+const dropdown = require("../utils/dropdown.cjs.js");
+const validate = require("../utils/validate.cjs.js");
+const clone = require("../utils/clone.cjs.js");
+function useDropdown({ props, emits, state, t, format }) {
+  const { instance } = state;
+  const showValueItem = (item) => {
+    var _a;
+    const { start, end, type } = item;
+    state.backupList = ((_a = item.options) == null ? void 0 : _a.length) ? item.options : [];
+    if (type === "numRange") {
+      validate.setStateNumRange(state, item, t);
+      state.hiden = false;
+    } else if (type === "dateRange") {
+      const { dateRangeFormat } = state;
+      if (!state.startDate && start) {
+        const newStart = format(start, dateRangeFormat);
+        state.startDate = state.endDate < newStart ? null : newStart;
+      }
+      if (!state.endDate && end) {
+        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) {
+        const newStart = format(start, datetimeRangeFormat);
+        state.startDateTime = state.endDateTime < newStart ? null : newStart;
+      }
+      if (!state.endDateTime && end) {
+        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) => {
+        if (tag.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) => {
+        option.isFilter = false;
+        option.isChecked = tag.hasTagItem(state, option.label);
+      });
+    }
+    state.currentOperators = null;
+    if (!((type === "radio" || !type) && !state.backupList.length)) {
+      dropdown.showDropdown(state);
+    }
+  };
+  const selectPropItem = (item) => {
+    const { field, label } = item;
+    state.propItem.label = label;
+    emits("first-level-select", field);
+    const inputRef = instance.refs.inputRef;
+    state.prevItem = item;
+    state.backupPrevItem = item;
+    const { operators } = item;
+    if (operators == null ? void 0 : operators.length) {
+      state.operatorValue = "";
+      state.currentOperators = operators;
+      state.isResetFlag = true;
+      dropdown.showDropdown(state);
+    } else {
+      state.operatorValue = ":";
+      showValueItem(item);
+    }
+    state.inputValue = "";
+    inputRef.focus();
+  };
+  const setOperator = (operator) => {
+    state.operatorValue = operator;
+    showValueItem(state.prevItem);
+  };
+  const updateModelValue = (prevItem, item, label, value) => {
+    const { replace, operators, mergeTag } = prevItem;
+    const rest = clone.omitObj(prevItem);
+    const { indexMap } = state;
+    const index = indexMap.get(label);
+    const id = tag.getTagId(props, prevItem, item);
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    let newTag = null;
+    if (mergeTag) {
+      const options = { label: value, ...id };
+      if (index >= 0) {
+        const newValue2 = `${state.innerModelValue[index].value} | ${value}`;
+        const newOptions = [...state.innerModelValue[index].options, options];
+        newTag = tag.createNewTag({ ...state.innerModelValue[index], value: newValue2, options: newOptions });
+      } else {
+        newTag = tag.createNewTag({ ...rest, label, value, options: [options] });
+      }
+    } else {
+      newTag = tag.createNewTag({ ...rest, label, value, ...id, ...operator });
+    }
+    if (tag.hasTagItem(state, value, label)) {
+      tag.resetInput(state);
+      return;
+    }
+    const oldValue = clone.deepClone(state.innerModelValue);
+    if ((replace || mergeTag) && index >= 0) {
+      state.innerModelValue.splice(index, 1);
+    }
+    state.innerModelValue.push(newTag);
+    const newValue = state.innerModelValue;
+    tag.emitChangeModelEvent({ emits, state, newValue, oldValue });
+  };
+  const selectRadioItem = (item, isPotential = false) => {
+    if (isPotential) {
+      state.prevItem = item;
+      state.backupPrevItem = item;
+    }
+    const { prevItem } = state;
+    const value = item.value || item.label;
+    const inputRef = instance.refs.inputRef;
+    if (!tag.hasTagItem(state, value)) {
+      const tagLabel = state.propItem.label || item.label;
+      updateModelValue(prevItem, item, tagLabel, value);
+    }
+    inputRef.focus();
+  };
+  const hasNotInputValueCreateTag = (propItem, prevItem) => {
+    if (propItem.label) {
+      if (!prevItem.options) {
+        return;
+      }
+      const hasTag = props.modelValue.find((item) => item.value === prevItem.options[0].label);
+      if (!hasTag) {
+        const label = prevItem.label;
+        const value = prevItem.options && prevItem.options[0].label;
+        updateModelValue(prevItem, prevItem.options[0], label, value);
+        return;
+      }
+    } else {
+      emits("search", state.innerModelValue);
+    }
+  };
+  const newTagUpdateModelValue = (prevItem, propItem, tag2) => {
+    const item = state.backupList.find((subItem) => subItem.label === tag2);
+    updateModelValue(prevItem, item, propItem.label, tag2);
+  };
+  const hasInputValueCreateTag = (inputValue, propItem, prevItem) => {
+    var _a;
+    if (propItem.label) {
+      const { regexp, replace, type, mergeTag } = prevItem;
+      const tagList = type !== "checkbox" && replace || type === "checkbox" && mergeTag ? [inputValue] : inputValue.split(props.splitInputValue);
+      if (regexp) {
+        for (const tag2 of tagList) {
+          if (regexp.test(tag2)) {
+            newTagUpdateModelValue(prevItem, propItem, tag2);
+          }
+        }
+      } else {
+        for (const tag2 of tagList) {
+          newTagUpdateModelValue(prevItem, propItem, tag2);
+        }
+      }
+    } else {
+      const { items, defaultField } = props;
+      const currentItem = 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) => {
+          const label2 = item.value || item.label;
+          if (tagList.includes(label2)) {
+            item.isChecked = true;
+          }
+        });
+      }
+      const label = currentItem.label;
+      for (const tag2 of tagList) {
+        updateModelValue(currentItem, {}, label, tag2);
+      }
+    }
+  };
+  const createTag = () => {
+    const { inputValue, propItem, prevItem } = state;
+    dropdown.showDropdown(state, false);
+    if (!inputValue) {
+      hasNotInputValueCreateTag(propItem, prevItem);
+    } else {
+      const { maxlength } = props;
+      if (maxlength && maxlength < inputValue.length) {
+        emits("exceed", maxlength);
+        return;
+      }
+      hasInputValueCreateTag(inputValue, propItem, prevItem);
+    }
+  };
+  const helpClick = () => {
+    emits("help");
+  };
+  return { selectPropItem, selectRadioItem, createTag, helpClick, setOperator };
+}
+exports.useDropdown = useDropdown;

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tag = require("../utils/tag.cjs.js");
+const validate = require("../utils/validate.cjs.js");
+const dropdown = require("../utils/dropdown.cjs.js");
+function useEdit({ props, state, t, nextTick, format, emits }) {
+  const { instance } = state;
+  const setDropdownProps = (curTag) => {
+    var _a;
+    const { operator, value, start, end } = curTag;
+    const { options, operators, type, mergeTag } = state.prevItem;
+    if (type === "custom") {
+      return;
+    } else if (type === "numRange") {
+      validate.setStateNumRange(state, curTag, t);
+    } else if (type === "dateRange") {
+      const { dateRangeFormat } = state;
+      state.startDate = format(start, dateRangeFormat);
+      state.endDate = format(end, dateRangeFormat);
+    } else if (type === "datetimeRange") {
+      const { datetimeRangeFormat } = state;
+      state.startDateTime = format(start, datetimeRangeFormat);
+      state.endDateTime = format(end, datetimeRangeFormat);
+    } else {
+      if (mergeTag) {
+        state.inputEditValue = (_a = curTag.options) == null ? void 0 : _a.flatMap((item) => item.label);
+        state.currentEditSelectTags = state.inputEditValue;
+      } else {
+        state.inputEditValue = value;
+      }
+      state.currentEditValue = options;
+    }
+    state.operatorValue = operator;
+    state.currentOperators = operators;
+  };
+  const editTag = (tag2, index, e) => {
+    if (!props.editable || tag2.type && tag2.type === "map") {
+      return;
+    }
+    dropdown.showDropdown(state, false);
+    state.popoverVisible = false;
+    const dom = e.target.classList.contains("tiny-tag") ? e.target : e.srcElement.parentElement;
+    nextTick(() => {
+      const { popoverRef } = instance.refs;
+      popoverRef.state.referenceElm = dom;
+      popoverRef.state.popperElm && (popoverRef.state.popperElm.style.display = "none");
+      popoverRef.doDestroy();
+      state.popoverVisible = true;
+    });
+    state.prevItem = state.recordItems.find((item) => item.field === tag2.field);
+    !state.prevItem && (state.prevItem = tag2);
+    state.selectValue = tag2.label;
+    state.currentModelValueIndex = index;
+    setDropdownProps(tag2);
+  };
+  const selectPropChange = (item, disabled) => {
+    if (disabled) return;
+    state.prevItem = item;
+    setDropdownProps(item);
+  };
+  const confirmEditTag = async (isConfirm) => {
+    if (!isConfirm) {
+      state.popoverVisible = false;
+      return;
+    }
+    const { prevItem, currentModelValueIndex: index } = state;
+    let newTag = null;
+    if (prevItem.type === "numRange") {
+      newTag = await validate.getVerifyNumTag(instance, state, props);
+    } else if (prevItem.type === "dateRange") {
+      newTag = await validate.getVerifyDateTag(instance, state, props, false);
+    } else if (prevItem.type === "datetimeRange") {
+      newTag = await validate.getVerifyDateTag(instance, state, props, true);
+    } else {
+      newTag = await validate.getVerifyTag(instance, state, props);
+    }
+    if (newTag) {
+      tag.emitChangeModelEvent({ emits, state, index, newTag, isEdit: true });
+      state.popoverVisible = false;
+    } else {
+      state.popoverVisible = true;
+    }
+    state.currentEditValue = [];
+  };
+  const selectItemIsDisable = (item) => {
+    var _a, _b, _c, _d;
+    if (item.type && item.type === "map") {
+      return true;
+    }
+    if (((_a = state.prevItem) == null ? void 0 : _a.operators) || item.operators) {
+      return ((_b = state.prevItem.operators) == null ? void 0 : _b.length) !== ((_c = item.operators) == null ? void 0 : _c.length);
+    }
+    const typeArr = ["radio", "checkbox"];
+    if (state.prevItem.type && typeArr.includes(state.prevItem.type)) {
+      return !item.type ? false : !typeArr.includes(item.type);
+    }
+    return ((_d = state.prevItem) == null ? void 0 : _d.type) !== item.type;
+  };
+  return {
+    editTag,
+    confirmEditTag,
+    selectPropChange,
+    selectItemIsDisable
+  };
+}
+exports.useEdit = useEdit;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dropdown = require("../utils/dropdown.cjs.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) {
+      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);
+    }
+  };
+  const watchMouseDown = () => {
+    state.isMouseDown = true;
+  };
+  const watchMouseMove = () => {
+    if (state.isMouseDown) {
+      state.isMouseDown = false;
+    }
+  };
+  return {
+    initItems,
+    watchOutsideClick,
+    watchMouseDown,
+    watchMouseMove,
+    handleClick
+  };
+}
+exports.useInit = useInit;

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

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const Loading = require("@opentiny/vue-loading");
+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 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 = 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")
+    }));
+    state.potentialOptions = await props.potentialOptions.getMatchList(keyword);
+    loadingInstance.value && loadingInstance.value.close();
+    if (state.potentialOptions.length) {
+      state.isShowDropdown = true;
+    }
+    dropdown.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 (tag.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 {
+      dropdown.showDropdown(state, state.isShowDropdown);
+    }
+  };
+  const handleInput = index.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 = tag.hasTagItem(state, value);
+      });
+    } else {
+      if (item.isChecked) {
+        return;
+      }
+      state.isShowTagKey = true;
+      resetBackupList();
+      const { field, type } = prevItem;
+      const value = propItem.value + item.label;
+      const id = tag.getTagId(props, prevItem, item);
+      const newTag = tag.createNewTag({ type, field, label: propItem.label, value, ...id });
+      const tagList = [newTag];
+      tag.emitChangeModelEvent({ emits, state, tagList });
+    }
+    if (isFirst) {
+      dropdown.showDropdown(state);
+    }
+  };
+  return {
+    handleInput,
+    selectFirstMap
+  };
+}
+exports.useMatch = useMatch;