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

package/src/composables/use-checkbox.ts

@@ -0,0 +1,90 @@
+import { computed } from 'vue'
+import { hasTagItem, createNewTag, getTagId, emitChangeModelEvent } from '../utils/tag'
+import { deepClone, omitObj } from '../utils/clone'
+
+export function useCheckbox({ props, state, emits }) {
+  const selectCheckbox = (confirm: boolean) => {
+    const { checkboxGroup, prevItem, propItem } = state
+    const rest = omitObj(prevItem)
+    state.hiden = true
+    if (confirm) {
+      const tagList = []
+      const oldValue = deepClone(state.innerModelValue)
+      const { mergeTag, operators, label: prevLabel } = prevItem
+      if (mergeTag) {
+        let value = ''
+        const options = []
+        const { indexMap } = state
+        const hasTagIndex = indexMap.get(prevLabel)
+        hasTagIndex !== undefined && state.innerModelValue.splice(hasTagIndex, 1)
+
+        state.backupList.forEach((item) => {
+          const { label } = item
+          const checkboxLabel = `${prevLabel}${label}`
+          const hasItem = checkboxGroup.includes(checkboxLabel)
+          if (hasItem) {
+            delete item.isFilter
+            const id = getTagId(props, prevItem, item)
+            const newOptions = { label: item.label, ...id }
+            value += !value ? label : ` | ${label}`
+            options.push(newOptions)
+          }
+        })
+        if (options.length > 0) {
+          const newTag = { ...rest, value, options }
+          tagList.push(newTag)
+        }
+      } else {
+        const { valueMap } = state
+        const indexList = []
+        state.backupList.forEach((item) => {
+          const { label } = item
+          const value = `${prevLabel}${label}`
+          const hasItem = checkboxGroup.includes(value)
+          if (hasItem && !hasTagItem(state, label)) {
+            const id = getTagId(props, prevItem, item)
+            const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null
+            const newTag = createNewTag({ ...rest, label: propItem.label, value: label, ...id, ...operator })
+            tagList.push(newTag)
+            item.isChecked = true
+          } else if (!hasItem && hasTagItem(state, label)) {
+            item.isChecked = false
+            const index = valueMap.get(value)
+            indexList.push(index)
+          }
+        })
+        if (indexList.length) {
+          state.innerModelValue = state.innerModelValue.filter((item, index) => item && !indexList.includes(index))
+        }
+      }
+      emitChangeModelEvent({ emits, state, tagList, oldValue })
+    } else {
+      propItem.label = ''
+      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/src/composables/use-custom.ts

@@ -0,0 +1,53 @@
+import { resetInput, emitChangeModelEvent, hasTagItem } from '../utils/tag'
+import { showDropdown, showPopover } from '../utils/dropdown'
+
+export function useCustom({ state, emits }) {
+  const updateCustomValue = (customTag) => {
+    const { prevItem, indexMap } = state
+    const { replace, label } = prevItem
+
+    const tagList = []
+    if (replace && indexMap.has(label)) {
+      const index = indexMap.get(label)
+      const newTag = { ...prevItem, ...customTag }
+      emitChangeModelEvent({ emits, state, newTag, index })
+
+      return
+    } else if (!replace && Array.isArray(customTag)) {
+      customTag.forEach((tag) => {
+        if (!hasTagItem(state, tag.value)) {
+          tagList.push({ ...prevItem, ...tag })
+        }
+      })
+    } else {
+      if (!hasTagItem(state, customTag.value)) {
+        tagList.push({ ...prevItem, ...customTag })
+      }
+    }
+    emitChangeModelEvent({ emits, state, tagList })
+  }
+
+  const handleConfirm = (customTag) => {
+    if (!customTag) {
+      resetInput(state)
+      showDropdown(state, false)
+      return
+    }
+
+    updateCustomValue(customTag)
+  }
+
+  const handleEditConfirm = (customTag) => {
+    if (!customTag) {
+      showPopover(state, false)
+      return
+    }
+
+    updateCustomValue(customTag)
+  }
+
+  return {
+    handleConfirm,
+    handleEditConfirm
+  }
+}

package/src/composables/use-datepicker.ts

@@ -0,0 +1,90 @@
+import { showDropdown } from '../utils/dropdown'
+import { getVerifyDateTag } from '../utils/validate'
+import { emitChangeModelEvent } from '../utils/tag'
+
+export function useDatePicker({ props, state, emits }) {
+  const { instance } = state
+  const onConfirmDate = async (confirm: boolean, isDateTimeType = false) => {
+    if (!confirm) {
+      state.propItem.label = ''
+
+      return
+    }
+    const newTag = await getVerifyDateTag(instance, state, props, isDateTimeType)
+    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 handleDateShow = () => showDropdown(state)
+
+  const pickerOptions = (startDate, endName = '') => ({
+    disabledDate(time) {
+      const { maxTimeLength = 0, min, max } = state.prevItem
+
+      const endDate = state[endName]
+      const curTime = time.getTime()
+      // 有限制时间跨度timeLength时
+      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
+  }
+}

package/src/composables/use-dropdown.ts

@@ -0,0 +1,251 @@
+import { hasTagItem, resetInput, createNewTag, getTagId, emitChangeModelEvent } from '../utils/tag'
+import { showDropdown } from '../utils/dropdown'
+import { setStateNumRange } from '../utils/validate'
+import { deepClone, omitObj } from '../utils/clone'
+
+export function useDropdown({ props, emits, state, t, format }) {
+  const { instance } = state
+  const showValueItem = (item) => {
+    const { start, end, type } = item
+    state.backupList = item.options?.length ? item.options : []
+    if (type === 'numRange') {
+      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 (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 = hasTagItem(state, option.label)
+      })
+    }
+
+    state.currentOperators = null
+
+    if (!((type === 'radio' || !type) && !state.backupList.length)) {
+      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?.length) {
+      state.operatorValue = ''
+      state.currentOperators = operators
+      state.isResetFlag = true
+      showDropdown(state)
+    } else {
+      state.operatorValue = ':'
+      showValueItem(item)
+    }
+    state.inputValue = ''
+    inputRef.focus()
+  }
+
+  const setOperator = (operator) => {
+    state.operatorValue = operator
+    showValueItem(state.prevItem)
+  }
+
+  /**
+   * 更新modelValue值
+   * @param prevItem items数组的第一层元素信息，用来识别此类型标签的某些属性作相应处理
+   * @param item 当前选中的标签值信息
+   * @param label 标签左侧的label
+   * @param value 标签右侧值的value
+   */
+  const updateModelValue = (prevItem, item, label, value) => {
+    const { replace, operators, mergeTag } = prevItem
+    const rest = omitObj(prevItem)
+    const { indexMap } = state
+    const index = indexMap.get(label)
+    const id = 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 newValue = `${state.innerModelValue[index].value} | ${value}`
+        const newOptions = [...state.innerModelValue[index].options, options]
+        newTag = createNewTag({ ...state.innerModelValue[index], value: newValue, options: newOptions })
+      } else {
+        newTag = createNewTag({ ...rest, label, value, options: [options] })
+      }
+    } else {
+      newTag = createNewTag({ ...rest, label, value, ...id, ...operator })
+    }
+    if (hasTagItem(state, value, label)) {
+      resetInput(state)
+      return
+    }
+
+    const oldValue = deepClone(state.innerModelValue)
+    if ((replace || mergeTag) && index >= 0) {
+      state.innerModelValue.splice(index, 1)
+    }
+    state.innerModelValue.push(newTag)
+    const newValue = state.innerModelValue
+    emitChangeModelEvent({ emits, state, newValue, oldValue })
+  }
+
+  /**
+   * 选中单选标签
+   * @param item 选中的标签option项
+   * @param isPotential 是否为选择潜在匹配项，默认否。参数可选
+   */
+  const selectRadioItem = (item, isPotential = false) => {
+    // 潜在匹配项没有prevItem
+    if (isPotential) {
+      state.prevItem = item
+      state.backupPrevItem = item
+    }
+
+    const { prevItem } = state
+    const value = item.value || item.label
+    const inputRef = instance.refs.inputRef
+    if (!hasTagItem(state, value)) {
+      const tagLabel = state.propItem.label || item.label
+      updateModelValue(prevItem, item, tagLabel, value)
+    }
+    inputRef.focus()
+  }
+  const hasNotInputValueCreateTag = (propItem, prevItem) => {
+    // 有label
+    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, tag) => {
+    const item = state.backupList.find((subItem) => subItem.label === tag)
+    updateModelValue(prevItem, item, propItem.label, tag)
+  }
+
+  const hasInputValueCreateTag = (inputValue, propItem, prevItem) => {
+    // 有label的情况
+    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 tag of tagList) {
+          if (regexp.test(tag)) {
+            newTagUpdateModelValue(prevItem, propItem, tag)
+          }
+        }
+        // 有输入且无正则
+      } else {
+        for (const tag of tagList) {
+          newTagUpdateModelValue(prevItem, propItem, tag)
+        }
+      }
+      // 无label的情况
+    } 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 (currentItem?.options?.length) {
+        state.backupList = [...currentItem.options]
+        state.backupList.forEach((item) => {
+          const label = item.value || item.label
+          if (tagList.includes(label)) {
+            item.isChecked = true
+          }
+        })
+      }
+      const label = currentItem.label
+      for (const tag of tagList) {
+        updateModelValue(currentItem, {}, label, tag)
+      }
+    }
+  }
+
+  const createTag = () => {
+    const { inputValue, propItem, prevItem } = state
+    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 }
+}

package/src/composables/use-edit.ts

@@ -0,0 +1,119 @@
+import { emitChangeModelEvent } from '../utils/tag'
+import { getVerifyNumTag, getVerifyDateTag, setStateNumRange, getVerifyTag } from '../utils/validate'
+import { showDropdown } from '../utils/dropdown'
+
+export function useEdit({ props, state, t, nextTick, format, emits }) {
+  const { instance } = state
+  const setDropdownProps = (curTag) => {
+    const { operator, value, start, end } = curTag
+    const { options, operators, type, mergeTag } = state.prevItem
+    if (type === 'custom') {
+      return
+    } else if (type === 'numRange') {
+      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 = curTag.options?.flatMap((item) => item.label)
+        state.currentEditSelectTags = state.inputEditValue
+      } else {
+        state.inputEditValue = value
+      }
+      state.currentEditValue = options
+    }
+    state.operatorValue = operator
+    state.currentOperators = operators
+  }
+
+  const editTag = (tag, index, e) => {
+    if (!props.editable || (tag.type && tag.type === 'map')) {
+      return
+    }
+
+    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 === tag.field)
+    !state.prevItem && (state.prevItem = tag)
+    state.selectValue = tag.label
+    state.currentModelValueIndex = index
+
+    setDropdownProps(tag)
+  }
+
+  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 getVerifyNumTag(instance, state, props)
+    } else if (prevItem.type === 'dateRange') {
+      newTag = await getVerifyDateTag(instance, state, props, false)
+    } else if (prevItem.type === 'datetimeRange') {
+      newTag = await getVerifyDateTag(instance, state, props, true)
+    } else {
+      newTag = await getVerifyTag(instance, state, props)
+    }
+
+    if (newTag) {
+      emitChangeModelEvent({ emits, state, index, newTag, isEdit: true })
+      state.popoverVisible = false
+    } else {
+      state.popoverVisible = true
+    }
+
+    state.currentEditValue = []
+  }
+
+  const selectItemIsDisable = (item) => {
+    if (item.type && item.type === 'map') {
+      return true
+    }
+
+    if (state.prevItem?.operators || item.operators) {
+      return state.prevItem.operators?.length !== item.operators?.length
+    }
+
+    const typeArr = ['radio', 'checkbox']
+    if (state.prevItem.type && typeArr.includes(state.prevItem.type)) {
+      return !item.type ? false : !typeArr.includes(item.type)
+    }
+
+    return state.prevItem?.type !== item.type
+  }
+
+  return {
+    editTag,
+    confirmEditTag,
+    selectPropChange,
+    selectItemIsDisable
+  }
+}

package/src/composables/use-init.ts

@@ -0,0 +1,69 @@
+import { showDropdown, showPopover } from '../utils/dropdown'
+
+export 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 = () => {
+    if (!state.isMouseDown) {
+      return
+    }
+
+    if (props.editable) {
+      showPopover(state, false)
+    }
+
+    state.isMouseDown = false
+    if (instance?.refs?.dropdownRef?.state?.visible) {
+      showDropdown(state, false)
+    }
+  }
+
+  const watchMouseDown = () => {
+    state.isMouseDown = true
+  }
+
+  const watchMouseMove = () => {
+    if (state.isMouseDown) {
+      state.isMouseDown = false
+    }
+  }
+
+  return {
+    initItems,
+    watchOutsideClick,
+    watchMouseDown,
+    watchMouseMove,
+    handleClick
+  }
+}