@opentiny/vue-search-box 0.0.2 → 0.1.1-alpha.1

package/src/composables/use-match.ts

@@ -0,0 +1,193 @@
+import { watch, ref } from 'vue'
+import Loading from '@opentiny/vue-loading'
+import { debounce } from '../utils/index'
+import { hasTagItem, createNewTag, getTagId, emitChangeModelEvent } from '../utils/tag'
+import { showDropdown } from '../utils/dropdown'
+
+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
+}
+
+export 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: string) => {
+    !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
+
+    // 有label，只在backupList搜索
+    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
+    }
+
+    // 无label，需要全局搜
+    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
+  }
+}

package/src/composables/use-num-range.ts

@@ -0,0 +1,86 @@
+import { showDropdown } from '../utils/dropdown'
+import { getVerifyNumTag } from '../utils/validate'
+import { emitChangeModelEvent } from '../utils/tag'
+
+export function useNumRange({ props, state, t, emits }) {
+  const { instance } = state
+  const sizeChange = async (confirm: boolean) => {
+    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)
+    }
+  }
+
+  /**
+   * 创建 type=dateRange 和 type = datetimeRange 的校验规则
+   * @param startKey 校验的开始日期名
+   * @param endKey 校验的结束日期名
+   */
+  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
+  }
+}

package/src/composables/use-placeholder.ts

@@ -0,0 +1,43 @@
+import { ref, watch } from 'vue'
+
+export function usePlaceholder({ props, state, t }) {
+  const placeholder = ref(props.emptyPlaceholder)
+
+  const setPlaceholder = (placeholderValue: string) => {
+    placeholder.value = placeholderValue
+  }
+
+  if (props.modelValue.length > 0) {
+    setPlaceholder(t('tvp.tvpSearchbox.addPlaceholder'))
+  }
+
+  watch(
+    () => state.propItem.label,
+    (newValue) => {
+      if (newValue) {
+        const { placeholder, type } = state.prevItem
+        if (placeholder) {
+          setPlaceholder(placeholder)
+        } 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
+  }
+}

package/src/composables/use-tag.ts

@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+import { showDropdown } from '../utils/dropdown'
+import { emitChangeModelEvent } from '../utils/tag'
+
+export 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
+  }
+}