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
44 KiB
1 line
44 KiB
11 months ago
|
{"version":3,"file":"useSelect.mjs","sources":["../../../../../../packages/components/select-v2/src/useSelect.ts"],"sourcesContent":["import {\n computed,\n watch,\n ref,\n reactive,\n nextTick,\n onMounted,\n onBeforeMount,\n} from 'vue'\nimport { isArray, isFunction, isObject } from '@vue/shared'\nimport isEqual from 'lodash/isEqual'\nimport lodashDebounce from 'lodash/debounce'\nimport { useFormItem, useLocale, useSize } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n addResizeListener,\n removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { getValueByPath } from '@element-plus/utils/util'\nimport { Effect } from '@element-plus/components/popper'\n\nimport { ArrowUp } from '@element-plus/icons-vue'\nimport { useAllowCreate } from './useAllowCreate'\n\nimport { flattenOptions } from './util'\n\nimport { useInput } from './useInput'\nimport type ElTooltip from '@element-plus/components/tooltip'\nimport type { SelectProps } from './defaults'\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\nimport type { OptionType, Option } from './select.types'\n\nconst DEFAULT_INPUT_PLACEHOLDER = ''\nconst MINIMUM_INPUT_WIDTH = 11\nconst TAG_BASE_WIDTH = {\n larget: 51,\n default: 42,\n small: 33,\n}\n\nconst useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {\n // inject\n const { t } = useLocale()\n const { form: elForm, formItem: elFormItem } = useFormItem()\n\n const states = reactive({\n inputValue: DEFAULT_INPUT_PLACEHOLDER,\n displayInputValue: DEFAULT_INPUT_PLACEHOLDER,\n calculatedWidth: 0,\n cachedPlaceholder: '',\n cachedOptions: [] as Option[],\n createdOptions: [] as Option[],\n createdLabel: '',\n createdSelected: false,\n currentPlaceholder: '',\n hoveringIndex: -1,\n comboBoxHovering: false,\n isOnComposition: false,\n isSilentBlur: false,\n isComposing: false,\n inputLength: 20,\n selectWidth: 200,\n initialInputHeight: 0,\n previousQuery: null,\n previousValue: '',\n query: '',\n selectedLabel: '',\n softFocus: false,\n tagInMultiLine: false,\n })\n\n // data refs\n const selectedIndex = ref(-1)\n const popperSize = ref(-1)\n\n // DOM & Component refs\n const controlRef = ref(null)\n const inputRef = ref(null) // el-input ref\n const menuRef = ref(null)\n const popper = ref<InstanceType<typeof ElTooltip> | null>(null)\n const selectRef = ref(null)\n const selectionRef = ref(null) // tags ref\n const calculatorRef = ref<HTMLElement>(null)\n\n // the controller of the expanded popup\n const expanded = ref(false)\n\n const selectDisabled = computed(() => props.disabled || elForm?.disabled)\n\n const popupHeight = computed(() => {\n const totalHeight = filteredOptions.value.length * 34\n return totalHeight > props.height ? props.height : totalHeight\n })\n\n const hasModelValue = computed(() => {\n return (\n props.modelValue !== undefined &&\n props.modelValue !== null &&\n props.modelValue !== ''\n )\n })\n\n const showClearBtn = computed(() => {\n const hasValue = props.multiple\n ? Array.isArray(props.modelValue) && props.modelValue.length > 0\n : hasModelValue.value\n\n const criteria =\n props.clearable &&\n !selectDisabled.value &&\n states.comboBoxHovering &&\n hasValue\n return criteria\n })\n\n const iconComponent = computed(() =>\n props.remote && props.filterable ? '' : ArrowUp\n )\n\n const iconReverse = computed(() =>\n iconComponent.value && expanded.value ? 'is-reverse' : ''\n )\n\n const validateState = computed(() => elFormItem?.validateState || '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n\n const debounce = computed(() => (props.remote ? 300 : 0))\n\n // filteredOptions includes flatten the data into one dimensional array.\n const emptyText = computed(() => {\n const options = f
|