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
56 KiB
1 line
56 KiB
2 years ago
|
{"version":3,"file":"useSelect.mjs","sources":["../../../../../../packages/components/select/src/useSelect.ts"],"sourcesContent":["// @ts-nocheck\nimport {\n computed,\n nextTick,\n reactive,\n ref,\n shallowRef,\n toRaw,\n triggerRef,\n watch,\n} from 'vue'\nimport { isObject, toRawType } from '@vue/shared'\nimport { get, isEqual, debounce as lodashDebounce } from 'lodash-unified'\nimport {\n CHANGE_EVENT,\n EVENT_CODE,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport {\n debugWarn,\n getComponentSize,\n isClient,\n isFunction,\n isKorean,\n isNumber,\n isString,\n scrollIntoView,\n} from '@element-plus/utils'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { useFormItem, useFormSize } from '@element-plus/components/form'\n\nimport type { ComponentPublicInstance } from 'vue'\nimport type ElTooltip from '@element-plus/components/tooltip'\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 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') as string | (() => string),\n menuVisibleOnFocus: false,\n isOnComposition: false,\n isSilentBlur: false,\n prefixWidth: 11,\n tagInMultiLine: false,\n mouseEnter: false,\n })\n}\n\ntype States = ReturnType<typeof useSelectStates>\n\nexport const useSelect = (props, states: States, ctx) => {\n const { t } = useLocale()\n const ns = useNamespace('select')\n\n useDeprecated(\n {\n from: 'suffixTransition',\n replacement: 'override style scheme',\n version: '2.3.0',\n scope: 'props',\n ref: 'https://element-plus.org/en-US/component/select.html#select-attributes',\n },\n computed(() => props.suffixTransition === false)\n )\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 iOSInput = 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 const optionList = ref<string[]>([])\n let originClientHeight = 0\n\n const { form, formItem } = useFormItem()\n\n const readonly = computed(\n () => !props.filterable || props.multiple || !states.visible\n )\n\n const selectDisabled = computed(() => props.disabled || form?.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.remoteShowSuffix\n ? ''\n : props.suffixIcon\n )\n const iconReverse = computed(() =>\n ns.is(\n 'reverse',\n iconComponent.value && states.visible && props.suffixTransition\n )\n )\n\n const debounce = computed(() => (props.remote ? 300 : 0))\n\n const emptyText = computed(() => {\n if (props.loading) {\n return props.loadingText |
|