xdesign-vue-next/es/auto-complete/option-list.mjs.map

XDesign Component for vue-next

{"version":3,"file":"option-list.mjs","sources":["../../src/auto-complete/option-list.tsx"],"sourcesContent":["import { ref, computed, defineComponent, PropType, h, watch, onBeforeUnmount } from 'vue';\nimport isFunction from 'lodash/isFunction';\nimport HighlightOption from './highlight-option';\nimport { CommonClassNameType } from '../hooks/useCommonClassName';\nimport { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';\nimport log from '../_common/js/log';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { on, off } from '../utils/dom';\nimport isString from 'lodash/isString';\n\nexport default defineComponent({\n  name: 'AutoCompleteOptionList',\n\n  props: {\n    sizeClassNames: Object as PropType<CommonClassNameType['sizeClassNames']>,\n    value: String,\n    size: String as PropType<TdAutoCompleteProps['size']>,\n    options: Array as PropType<TdAutoCompleteProps['options']>,\n    popupVisible: Boolean,\n    highlightKeyword: Boolean,\n    filterable: Boolean,\n    filter: Function as PropType<TdAutoCompleteProps['filter']>,\n  },\n\n  emits: ['select'],\n\n  setup(props, { emit, slots, expose }) {\n    const active = ref('');\n    const classPrefix = usePrefixClass();\n\n    const classes = computed(() => `${classPrefix.value}-select__list`);\n    const optionClasses = computed(() => [\n      `${classPrefix.value}-select-option`,\n      {\n        [props.sizeClassNames[props.size]]: props.size,\n      },\n    ]);\n\n    // 整理数据格式\n    const tOptions = computed<AutoCompleteOptionObj[]>(() => {\n      let options = (props.options || []).map((item) => {\n        let option: AutoCompleteOptionObj = {};\n        if (isString(item)) {\n          option = { text: item, label: item };\n        } else {\n          if (item.text && !isString(item.text)) {\n            log.warn('AutoComplete', '`text` must be a string.');\n          }\n          if (!item.text) {\n            if (isString(item.label)) {\n              option = { ...item, text: item.label };\n            } else {\n              log.warn('AutoComplete', 'one of `label` and `text` must be a existed string.');\n            }\n          } else {\n            option = item;\n          }\n        }\n        return option;\n      });\n      // 自定义过滤规则\n      if (props.filter) {\n        options = options.filter((option) => props.filter(props.value, option));\n      } else if (props.filterable) {\n        // 默认过滤规则\n        const regExp = new RegExp(props.value, 'i');\n        options = options.filter((item) => regExp.test(item.text));\n      }\n      return options;\n    });\n\n    const onOptionClick = (e: MouseEvent) => {\n      let liNode = e.target as HTMLElement;\n      while (liNode && liNode.tagName !== 'LI') {\n        liNode = liNode.parentNode as HTMLElement;\n      }\n      const keyword = liNode.getAttribute('title');\n      active.value = keyword;\n      emit('select', keyword, { e });\n    };\n\n    // 键盘事件，上下选择\n    const onKeyInnerPress = (e: KeyboardEvent) => {\n      if (e.code === 'ArrowUp' || e.key === 'ArrowUp') {\n        const index = tOptions.value.findIndex((item) => item.text === active.value);\n        const newIndex = index - 1 < 0 ? tOptions.value.length - 1 : index - 1;\n        active.value = tOptions.value[newIndex]?.text;\n      } else if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {\n        const index = tOptions.value.findIndex((item) => item.text === active.value);\n        const newIndex = index + 1 >= tOptions.value.length ? 0 : index + 1;\n        active.value = tOptions.value[newIndex]?.text;\n      } else if (e.code === 'Enter' || e.key === 'Enter') {\n        emit('select', active.value, { e });\n      }\n    };\n\n    const addKeyboardListener = () => {\n      on(document, 'keydown', onKeyInnerPress);\n    };\n\n    const removeKeyboardListener = () => {\n      off(document, 'keydown', onKeyInnerPress);\n    };\n\n    expose({\n      addKeyboardListener,\n      removeKeyboardListener,\n    });\n\n    watch(\n      () => props.popupVisible,\n      () => {\n        if (props.popupVisible) {\n          addKeyboardListener();\n        } else {\n          removeKeyboardListener();\n        }\n      },\n      { immediate: true },\n    );\n\n    watch(\n      () => props.value,\n      () => {\n        if (!props.value) {\n          active.value = '';\n        }\n      },\n      { immediate: true },\n    );\n\n    onBeforeUnmount(() => {\n      removeKeyboardListener();\n    });\n\n    return () => {\n      if (!tOptions.value.length) return null;\n      return (\n        <ul class={classes.value}>\n          {tOptions.value.map((item) => {\n            const cls = [...optionClasses.value];\n            if (item.text === active.value) {\n              cls.push(`${classPrefix.value}-select-option--hover`);\n            }\n            let labelNode: any = item.label;\n            if (isFunction(item.label)) {\n              labelNode = item.label(h);\n            } else if (slots.option) {\n              labelNode = slots.option?.({ option: item });\n            }\n            const content = labelNode || item.text;\n            return (\n              <li key={item.text} class={cls} title={item.text} onClick={onOptionClick}>\n                {isString(content) && props.highlightKeyword ? (\n                  <HighlightOption content={content} keyword={props.value} />\n                ) : (\n                  content\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      );\n    };\n  },\n});\n"],"names":["name","props","sizeClassNames","value","size","options","popupVisible","highlightKeyword","filterable","filter","setup","isString","option","text","label","log","emit","e","active","on","off","expose","addKeyboardListener","removeKeyboardListener","watch","immediate","onBeforeUnmount","_createVNode","isFunction","labelNode"],"mappings":"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"}