You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
51 KiB
1 line
51 KiB
11 months ago
|
{"version":3,"file":"useSelect.mjs","sources":["../../../../../../packages/components/select/src/useSelect.ts"],"sourcesContent":["import {\n inject,\n nextTick,\n computed,\n watch,\n ref,\n reactive,\n shallowRef,\n triggerRef,\n} from 'vue'\nimport { isObject, toRawType } from '@vue/shared'\nimport lodashDebounce from 'lodash/debounce'\nimport isEqual from 'lodash/isEqual'\nimport { isClient } from '@vueuse/core'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport scrollIntoView from '@element-plus/utils/scroll-into-view'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { getValueByPath } from '@element-plus/utils/util'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\n\nimport type { ComponentPublicInstance } from 'vue'\nimport type ElTooltip from '@element-plus/components/tooltip'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { QueryChangeCtx, SelectOptionProxy } from './token'\n\nexport function useSelectStates(props) {\n const { t } = useLocale()\n return reactive({\n options: new Map(),\n cachedOptions: new Map(),\n createdLabel: null,\n createdSelected: false,\n selected: props.multiple ? [] : ({} as any),\n inputLength: 20,\n inputWidth: 0,\n initialInputHeight: 0,\n optionsCount: 0,\n filteredOptionsCount: 0,\n visible: false,\n softFocus: false,\n selectedLabel: '',\n hoverIndex: -1,\n query: '',\n previousQuery: null,\n inputHovering: false,\n cachedPlaceHolder: '',\n currentPlaceholder: t('el.select.placeholder'),\n menuVisibleOnFocus: false,\n isOnComposition: false,\n isSilentBlur: false,\n prefixWidth: 0,\n tagInMultiLine: false,\n })\n}\n\ntype States = ReturnType<typeof useSelectStates>\n\nexport const useSelect = (props, states: States, ctx) => {\n const { t } = useLocale()\n\n // template refs\n const reference = ref<ComponentPublicInstance<{\n focus: () => void\n blur: () => void\n input: HTMLInputElement\n }> | null>(null)\n const input = ref<HTMLInputElement | null>(null)\n const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const tags = ref<HTMLElement | null>(null)\n const selectWrapper = ref<HTMLElement | null>(null)\n const scrollbar = ref<{\n handleScroll: () => void\n } | null>(null)\n const hoverOption = ref(-1)\n const queryChange = shallowRef<QueryChangeCtx>({ query: '' })\n const groupQueryChange = shallowRef('')\n\n // inject\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n const readonly = computed(\n () => !props.filterable || props.multiple || !states.visible\n )\n\n const selectDisabled = computed(() => props.disabled || elForm.disabled)\n\n const showClose = computed(() => {\n const hasValue = props.multiple\n ? Array.isArray(props.modelValue) && props.modelValue.length > 0\n : props.modelValue !== undefined &&\n props.modelValue !== null &&\n props.modelValue !== ''\n\n const criteria =\n props.clearable &&\n !selectDisabled.value &&\n states.inputHovering &&\n hasValue\n return criteria\n })\n const iconComponent = computed(() =>\n props.remote && props.filterable ? '' : props.suffixIcon\n )\n const iconReverse = computed(() =>\n iconComponent.value && states.visible ? 'is-reverse' : ''\n )\n\n const debounce = computed(() => (props.remote ? 300 : 0))\n\n const emptyText = computed(() => {\n if (props.loading) {\n return props.loadingText || t('el.select.loading')\n } else {\n if (props.remote && states.query === '' && states.options.size === 0)\n return false\n if (\n props.filterable &&\n states.query &&\n states.options.size > 0 &&\n states.filteredOptionsCount === 0\n ) {\n return props.noMatchText || t('el.sele
|