数通智联化工云平台
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
13 KiB

2 years ago
{"version":3,"file":"select-dropdown.mjs","sources":["../../../../../../packages/components/select-v2/src/select-dropdown.tsx"],"sourcesContent":["import {\n computed,\n defineComponent,\n inject,\n ref,\n toRaw,\n unref,\n watch,\n} from 'vue'\nimport { get } from 'lodash-unified'\nimport { isObject, isUndefined } from '@element-plus/utils'\nimport {\n DynamicSizeList,\n FixedSizeList,\n} from '@element-plus/components/virtual-list'\nimport { useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport GroupItem from './group-item.vue'\nimport OptionItem from './option-item.vue'\n\nimport { selectV2InjectionKey } from './token'\n\nimport type { ItemProps } from '@element-plus/components/virtual-list'\nimport type { Option, OptionItemProps } from './select.types'\n\nexport default defineComponent({\n name: 'ElSelectDropdown',\n\n props: {\n data: {\n type: Array,\n required: true,\n },\n hoveringIndex: Number,\n width: Number,\n },\n setup(props, { slots, expose }) {\n const select = inject(selectV2InjectionKey)!\n const ns = useNamespace('select')\n const cachedHeights = ref<Array<number>>([])\n\n const listRef = ref()\n\n const size = computed(() => props.data.length)\n watch(\n () => size.value,\n () => {\n select.popper.value.updatePopper?.()\n }\n )\n\n const isSized = computed(() =>\n isUndefined(select.props.estimatedOptionHeight)\n )\n const listProps = computed(() => {\n if (isSized.value) {\n return {\n itemSize: select.props.itemHeight,\n }\n }\n\n return {\n estimatedSize: select.props.estimatedOptionHeight,\n itemSize: (idx: number) => cachedHeights.value[idx],\n }\n })\n\n const contains = (arr: Array<any> = [], target: any) => {\n const {\n props: { valueKey },\n } = select\n\n if (!isObject(target)) {\n return arr.includes(target)\n }\n\n return (\n arr &&\n arr.some((item) => {\n return toRaw(get(item, valueKey)) === get(target, valueKey)\n })\n )\n }\n const isEqual = (selected: unknown, target: unknown) => {\n if (!isObject(target)) {\n return selected === target\n } else {\n const { valueKey } = select.props\n return get(selected, valueKey) === get(target, valueKey)\n }\n }\n\n const isItemSelected = (modelValue: any[] | any, target: Option) => {\n if (select.props.multiple) {\n return contains(modelValue, target.value)\n }\n return isEqual(modelValue, target.value)\n }\n\n const isItemDisabled = (modelValue: any[] | any, selected: boolean) => {\n const { disabled, multiple, multipleLimit } = select.props\n return (\n disabled ||\n (!selected &&\n (multiple\n ? multipleLimit > 0 && modelValue.length >= multipleLimit\n : false))\n )\n }\n\n const isItemHovering = (target: number) => props.hoveringIndex === target\n\n const scrollToItem = (index: number) => {\n const list = listRef.value as any\n if (list) {\n list.scrollToItem(index)\n }\n }\n\n const resetScrollTop = () => {\n const list = listRef.value as any\n if (list) {\n list.resetScrollTop()\n }\n }\n\n expose({\n listRef,\n isSized,\n\n isItemDisabled,\n isItemHovering,\n isItemSelected,\n scrollToItem,\n resetScrollTop,\n })\n\n const Item = (itemProps: ItemProps<any>) => {\n const { index, data, style } = itemProps\n const sized = unref(isSized)\n const { itemSize, estimatedSize } = unref(listProps)\n const { modelValue } = select.props\n const { onSelect, onHover } = select\n const item = data[index]\n if (item.type === 'Group') {\n return (\n <GroupItem\n item={item}\n style={style}\n height={(sized ? itemSize : estimatedSize) as number}\n />\n