element-plus/es/components/select-v2/src/select-dropdown.mjs.map

A Component Library for Vue 3

{"version":3,"file":"select-dropdown.mjs","names":["computed","defineComponent","inject","ref","toRaw","unref","watch","createVNode","_createVNode","mergeProps","_mergeProps","get","getEventCode","isIOS","isObject","isUndefined","DynamicSizeList","FixedSizeList","useNamespace","EVENT_CODE","GroupItem","OptionItem","useProps","selectV2InjectionKey","scrollbarEmits","props","loading","Boolean","data","type","Array","required","hoveringIndex","Number","width","id","String","ariaLabel","name","emits","setup","slots","expose","emit","select","ns","getLabel","getValue","getDisabled","cachedHeights","listRef","size","length","value","tooltipRef","updatePopper","isSized","estimatedOptionHeight","listProps","itemSize","itemHeight","estimatedSize","idx","contains","arr","target","valueKey","includes","some","item","isEqual","selected","isItemSelected","modelValue","multiple","isItemDisabled","disabled","multipleLimit","isItemHovering","scrollToItem","index","list","resetScrollTop","exposed","Item","itemProps","style","sized","onSelect","onHover","isSelected","isDisabled","isHovering","created","default","onKeyboardNavigate","onKeyboardSelect","onForward","onBackward","onEscOrTab","onKeydown","e","code","tab","esc","down","up","enter","numpadEnter","preventDefault","stopPropagation","onEndReached","direction","height","scrollbarAlwaysOn","isScrollbarAlwaysOn","List","b","is","header","empty","be","role","footer"],"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 { getEventCode, isIOS, 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'\nimport { useProps } from './useProps'\nimport { selectV2InjectionKey } from './token'\nimport { scrollbarEmits } from '@element-plus/components/scrollbar'\n\nimport type { ScrollbarDirection } from '@element-plus/components/scrollbar'\nimport type {\n  DynamicSizeListInstance,\n  FixedSizeListInstance,\n  ItemProps,\n} from '@element-plus/components/virtual-list'\nimport type { Option, OptionItemProps } from './select.types'\nimport type {\n  ComponentPublicInstance,\n  ComputedRef,\n  ExtractPropTypes,\n  Ref,\n} from 'vue'\n\nconst props = {\n  loading: Boolean,\n  data: {\n    type: Array,\n    required: true as const,\n  },\n  hoveringIndex: Number,\n  width: Number,\n  id: String,\n  ariaLabel: String,\n}\ninterface SelectDropdownExposed {\n  listRef: Ref<FixedSizeListInstance | DynamicSizeListInstance | undefined>\n  isSized: ComputedRef<boolean>\n  isItemDisabled: (modelValue: any[] | any, selected: boolean) => boolean\n  isItemHovering: (target: number) => boolean\n  isItemSelected: (modelValue: any[] | any, target: Option) => boolean\n  scrollToItem: (index: number) => void\n  resetScrollTop: () => void\n}\nexport type SelectDropdownInstance = ComponentPublicInstance<\n  ExtractPropTypes<typeof props>,\n  SelectDropdownExposed\n>\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n  props,\n  emits: {\n    'end-reached': scrollbarEmits['end-reached'],\n  },\n  setup(props, { slots, expose, emit }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { getLabel, getValue, getDisabled } = useProps(select.props)\n\n    const cachedHeights = ref<Array<number>>([])\n\n    const listRef = ref<FixedSizeListInstance | DynamicSizeListInstance>()\n\n    const size = computed(() => props.data.length)\n    watch(\n      () => size.value,\n      () => {\n        select.tooltipRef.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: SelectDropdownExposed['isItemSelected'] = (\n      modelValue,\n      target\n    ) => {\n      if (select.props.multiple) {\n        return contains(modelValue, getValue(target))\n      }\n      return isEqual(modelValue, getValue(target))\n    }\n\n    const isItemDisabled: SelectDropdownExposed['isItemDisabled'] = (\n      modelValue,\n      selected\n    ) => {\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: SelectDropdownExposed['isItemHovering'] = (target) =>\n      props.hoveringIndex === target\n\n    const scrollToItem: SelectDropdownExposed['scrollToItem'] = (index) => {\n      const list = listRef.value\n      if (list) {\n        list.scrollToItem(index)\n      }\n    }\n\n    const resetScrollTop: SelectDropdownExposed['resetScrollTop'] = () => {\n      const list = listRef.value\n      if (list) {\n        list.resetScrollTop()\n      }\n    }\n    const exposed: SelectDropdownExposed = {\n      listRef,\n      isSized,\n\n      isItemDisabled,\n      isItemHovering,\n      isItemSelected,\n      scrollToItem,\n      resetScrollTop,\n    }\n    expose(exposed)\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 as number) : estimatedSize}\n          />\n        )\n      }\n\n      const isSelected = isItemSelected(modelValue, item)\n      const isDisabled = isItemDisabled(modelValue, isSelected)\n      const isHovering = isItemHovering(index)\n      return (\n        <OptionItem\n          {...itemProps}\n          selected={isSelected}\n          disabled={getDisabled(item) || isDisabled}\n          created={!!item.created}\n          hovering={isHovering}\n          item={item}\n          onSelect={onSelect}\n          onHover={onHover}\n        >\n          {{\n            default: (props: OptionItemProps) =>\n              slots.default?.(props) || <span>{getLabel(item)}</span>,\n          }}\n        </OptionItem>\n      )\n    }\n\n    // computed\n    const { onKeyboardNavigate, onKeyboardSelect } = select\n\n    const onForward = () => {\n      onKeyboardNavigate('forward')\n    }\n\n    const onBackward = () => {\n      onKeyboardNavigate('backward')\n    }\n\n    const onEscOrTab = () => {\n      // The following line actually doesn't work. Fixing it may introduce a small breaking change for some users, so just comment it out for now.\n      // select.expanded = false\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      const code = getEventCode(e)\n      const { tab, esc, down, up, enter, numpadEnter } = EVENT_CODE\n      if ([esc, down, up, enter, numpadEnter].includes(code)) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n\n      switch (code) {\n        case tab:\n        case esc:\n          onEscOrTab()\n          break\n        case down:\n          onForward()\n          break\n        case up:\n          onBackward()\n          break\n        case enter:\n        case numpadEnter:\n          onKeyboardSelect()\n          break\n      }\n    }\n\n    const onEndReached = (direction: ScrollbarDirection) => {\n      emit('end-reached', direction)\n    }\n\n    return () => {\n      const { data, width } = props\n      const { height, multiple, scrollbarAlwaysOn } = select.props\n\n      // fix https://github.com/element-plus/element-plus/issues/19127\n      const isScrollbarAlwaysOn = isIOS ? true : scrollbarAlwaysOn\n\n      const List = unref(isSized) ? FixedSizeList : DynamicSizeList\n\n      return (\n        <div\n          class={[ns.b('dropdown'), ns.is('multiple', multiple)]}\n          style={{\n            width: `${width}px`,\n          }}\n        >\n          {slots.header?.()}\n          {slots.loading?.() || slots.empty?.() || (\n            <List\n              ref={listRef}\n              {...unref(listProps)}\n              className={ns.be('dropdown', 'list')}\n              scrollbarAlwaysOn={isScrollbarAlwaysOn}\n              data={data}\n              height={height}\n              width={width}\n              total={data.length}\n              innerElement=\"ul\"\n              innerProps={{\n                id: props.id,\n                role: 'listbox',\n                'aria-label': props.ariaLabel,\n                'aria-orientation': 'vertical',\n              }}\n              // @ts-ignore - dts problem\n              onEndReached={onEndReached}\n              // @ts-ignore - dts problem\n              onKeydown={onKeydown}\n            >\n              {{\n                default: (props: ItemProps<any>) => <Item {...props} />,\n              }}\n            </List>\n          )}\n          {slots.footer?.()}\n        </div>\n      )\n    }\n  },\n})\n"],"mappings":"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"}