75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
import { defineComponent, computed, unref, toRefs, reactive, getCurrentInstance, onBeforeUnmount, nextTick } from 'vue';
|
|
import { useOption } from './useOption.mjs';
|
|
import { optionProps, COMPONENT_NAME } from './option.mjs';
|
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
import { useId } from '../../../hooks/use-id/index.mjs';
|
|
|
|
var _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
|
|
};
|
|
}
|
|
});
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=option.vue2.mjs.map
|