UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 9.25 kB
{"version":3,"file":"select-dropdown.mjs","sources":["../../../../../../packages/components/select-v2/src/select-dropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n inject,\n ref,\n renderSlot,\n h,\n withCtx,\n withKeys,\n withModifiers,\n} from 'vue'\nimport { get } from 'lodash-unified'\nimport { isUndefined, isObject } from '@element-plus/utils'\nimport {\n FixedSizeList,\n DynamicSizeList,\n} from '@element-plus/components/virtual-list'\nimport { useNamespace } from '@element-plus/hooks'\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 { OptionItemProps, Option } from './select.types'\n\nexport default defineComponent({\n name: 'ElSelectDropdown',\n\n props: {\n data: Array,\n hoveringIndex: Number,\n width: Number,\n },\n setup(props) {\n const select = inject(selectV2InjectionKey) as any\n const ns = useNamespace('select')\n const cachedHeights = ref<Array<number>>([])\n\n const listRef = ref(null)\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 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 // computed\n return {\n ns,\n select,\n listProps,\n listRef,\n isSized,\n\n isItemDisabled,\n isItemHovering,\n isItemSelected,\n\n scrollToItem,\n resetScrollTop,\n }\n },\n\n render(_ctx, _cache) {\n const {\n $slots,\n\n data,\n listProps,\n select,\n isSized,\n width,\n ns,\n // methods\n isItemDisabled,\n isItemHovering,\n isItemSelected,\n } = _ctx\n\n const Comp = isSized ? FixedSizeList : DynamicSizeList\n\n const {\n props: selectProps,\n onSelect,\n onHover,\n onKeyboardNavigate,\n onKeyboardSelect,\n } = select\n const { height, modelValue, multiple } = selectProps\n\n if (data.length === 0) {\n return h(\n 'div',\n {\n class: ns.b('dropdown'),\n style: {\n width: `${width}px`,\n },\n },\n $slots.empty?.()\n )\n }\n\n const ListItem = withCtx((scoped: ItemProps<any>) => {\n const { index, data } = scoped\n const item = data[index]\n // render group item which is not selectable.\n if (data[index].type === 'Group') {\n return h(GroupItem, {\n item,\n style: scoped.style,\n height: isSized ? listProps.itemSize : listProps.estimatedSize,\n })\n }\n\n const selected = isItemSelected(modelValue, item)\n const itemDisabled = isItemDisabled(modelValue, selected)\n // render option item which is selectable\n return h(\n OptionItem,\n {\n ...scoped,\n selected,\n disabled: item.disabled || itemDisabled,\n created: !!item.created,\n hovering: isItemHovering(index),\n item,\n onSelect,\n onHover,\n },\n {\n default: withCtx((props: OptionItemProps) => {\n return renderSlot($slots, 'default', props, () => [\n h('span', item.label),\n ])\n }),\n }\n )\n })\n\n const List = h(\n Comp,\n {\n ref: 'listRef', // forwarded ref so that select can access the list directly\n className: ns.be('dropdown', 'list'),\n data,\n height,\n width,\n total: data.length,\n scrollbarAlwaysOn: selectProps.scrollbarAlwaysOn,\n onKeydown: [\n _cache[1] ||\n (_cache[1] = withKeys(\n withModifiers(\n () => onKeyboardNavigate('forward'),\n ['stop', 'prevent']\n ),\n ['down']\n )),\n _cache[2] ||\n (_cache[2] = withKeys(\n withModifiers(\n () => onKeyboardNavigate('backward'),\n ['stop', 'prevent']\n ),\n ['up']\n )),\n _cache[3] ||\n (_cache[3] = withKeys(\n withModifiers(onKeyboardSelect, ['stop', 'prevent']),\n ['enter']\n )),\n\n _cache[4] ||\n (_cache[4] = withKeys(\n withModifiers(\n () => (select.expanded = false),\n ['stop', 'prevent']\n ),\n ['esc']\n )),\n _cache[5] ||\n (_cache[5] = withKeys(() => (select.expanded = false), ['tab'])),\n // _cache[6] || (_cache[6] = () => {\n // console.log(11)\n // }),\n ],\n ...listProps,\n },\n {\n default: ListItem,\n }\n )\n return h(\n 'div',\n {\n class: [ns.b('dropdown'), ns.is('multiple', multiple)],\n },\n [List]\n )\n },\n})\n</script>\n"],"names":[],"mappings":"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"}