element-plus/es/components/select/src/option.vue.mjs.map

A Component Library for Vue 3

{"version":3,"file":"option.vue.mjs","sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    :id=\"id\"\n    :class=\"containerKls\"\n    role=\"option\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-selected=\"itemSelected\"\n    @mousemove=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  reactive,\n  toRefs,\n  unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\n\nimport type {\n  OptionExposed,\n  OptionInternalInstance,\n  OptionStates,\n} from './type'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  componentName: COMPONENT_NAME,\n\n  props: optionProps,\n\n  setup(props) {\n    const ns = useNamespace('select')\n    const id = useId()\n\n    const containerKls = computed(() => [\n      ns.be('dropdown', 'item'),\n      ns.is('disabled', unref(isDisabled)),\n      ns.is('selected', unref(itemSelected)),\n      ns.is('hovering', unref(hover)),\n    ])\n\n    const states = reactive<OptionStates>({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hover: false,\n    })\n\n    const {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      updateOption,\n    } = useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n    select.onOptionCreate(vm)\n\n    onBeforeUnmount(() => {\n      const key = vm.value\n\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        const { selected: selectedOptions } = select.states\n        const doesSelected = selectedOptions.some((item) => {\n          return item.value === vm.value\n        })\n        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n          select.states.cachedOptions.delete(key)\n        }\n      })\n      select.onOptionDestroy(key, vm)\n    })\n\n    function selectOptionClick() {\n      if (!isDisabled.value) {\n        select.handleOptionSelect(vm)\n      }\n    }\n\n    return {\n      ns,\n      id,\n      containerKls,\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      visible,\n      hover,\n      states,\n\n      hoverItem,\n      updateOption,\n      selectOptionClick,\n    } satisfies OptionExposed\n  },\n})\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createElementVNode","_toDisplayString"],"mappings":";;;;;;sCACEA,kBAAA,CAaK,IAAA,EAAA;AAAA,IAXF,IAAI,IAAA,CAAA,EAAA;AAAA,IACJ,KAAA,EAAKC,cAAA,CAAE,IAAA,CAAA,YAAY,CAAA;AAAA,IACpB,IAAA,EAAK,QAAA;AAAA,IACJ,eAAA,EAAe,KAAA,UAAA,IAAc,MAAA;AAAA,IAC7B,iBAAe,IAAA,CAAA,YAAA;AAAA,IACf,WAAA,EAAS,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACX,SAAK,MAAA,+CAAO,IAAA,CAAA,iBAAA,IAAA,KAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,EAAiB,CAAA,MAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAAA,IAE9BC,WAEO,IAAA,wBAFP,MAEO;AAAA,MADLC,kBAAA;AAAA,QAA+B,MAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,eAAA,CAAtB,KAAA,YAAY,CAAA;AAAA,QAAA;AAAA;AAAA;AAAA,KAAA;AAAA;YAVf,IAAA,CAAA,OAAO;AAAA,GAAA,CAAA;;;;;;"}