94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
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;
|
|
nextTick(() => {
|
|
const { selected: selectedOptions } = select.states;
|
|
const doesSelected = selectedOptions.some((item) => {
|
|
return item.value === vm.value;
|
|
});
|
|
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
|