element-plus
Version:
A Component Library for Vue 3
94 lines (91 loc) • 2.97 kB
JavaScript
import { defineComponent, computed, unref, reactive, toRefs, getCurrentInstance, onBeforeUnmount, nextTick, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createElementVNode, toDisplayString, vShow } from 'vue';
import { useOption } from './useOption.mjs';
import { COMPONENT_NAME, optionProps } from './option.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
const _sfc_main = defineComponent({
name: COMPONENT_NAME,
componentName: COMPONENT_NAME,
props: optionProps,
setup(props) {
const ns = useNamespace("select");
const id = useId();
const containerKls = computed(() => [
ns.be("dropdown", "item"),
ns.is("disabled", unref(isDisabled)),
ns.is("selected", unref(itemSelected)),
ns.is("hovering", unref(hover))
]);
const states = reactive({
index: -1,
groupDisabled: false,
visible: true,
hover: false
});
const {
currentLabel,
itemSelected,
isDisabled,
select,
hoverItem,
updateOption
} = useOption(props, states);
const { visible, hover } = toRefs(states);
const vm = getCurrentInstance().proxy;
select.onOptionCreate(vm);
onBeforeUnmount(() => {
const key = vm.value;
const { selected: selectedOptions } = select.states;
const doesSelected = selectedOptions.some((item) => {
return item.value === vm.value;
});
nextTick(() => {
if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
select.states.cachedOptions.delete(key);
}
});
select.onOptionDestroy(key, vm);
});
function selectOptionClick() {
if (!isDisabled.value) {
select.handleOptionSelect(vm);
}
}
return {
ns,
id,
containerKls,
currentLabel,
itemSelected,
isDisabled,
select,
visible,
hover,
states,
hoverItem,
updateOption,
selectOptionClick
};
}
});
function _sfc_render(_ctx, _cache) {
return withDirectives((openBlock(), createElementBlock("li", {
id: _ctx.id,
class: normalizeClass(_ctx.containerKls),
role: "option",
"aria-disabled": _ctx.isDisabled || void 0,
"aria-selected": _ctx.itemSelected,
onMousemove: _ctx.hoverItem,
onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
])
], 42, ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"])), [
[vShow, _ctx.visible]
]);
}
var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "option.vue"]]);
export { Option as default };
//# sourceMappingURL=option2.mjs.map