| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- 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
|