b28f631844f305ae45bdacaf972ff4616ada8d066ed2c4fb7456ffd53479a8d1ad15ea44dd1b1f20beff3b487fd491846105f4294724926fb844cfbdd24056 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { defineComponent, computed, unref, reactive, toRefs, getCurrentInstance, onBeforeUnmount, nextTick, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createElementVNode, toDisplayString, vShow } from 'vue';
  2. import { useOption } from './useOption.mjs';
  3. import { COMPONENT_NAME, optionProps } from './option.mjs';
  4. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  5. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  6. import { useId } from '../../../hooks/use-id/index.mjs';
  7. const _sfc_main = defineComponent({
  8. name: COMPONENT_NAME,
  9. componentName: COMPONENT_NAME,
  10. props: optionProps,
  11. setup(props) {
  12. const ns = useNamespace("select");
  13. const id = useId();
  14. const containerKls = computed(() => [
  15. ns.be("dropdown", "item"),
  16. ns.is("disabled", unref(isDisabled)),
  17. ns.is("selected", unref(itemSelected)),
  18. ns.is("hovering", unref(hover))
  19. ]);
  20. const states = reactive({
  21. index: -1,
  22. groupDisabled: false,
  23. visible: true,
  24. hover: false
  25. });
  26. const {
  27. currentLabel,
  28. itemSelected,
  29. isDisabled,
  30. select,
  31. hoverItem,
  32. updateOption
  33. } = useOption(props, states);
  34. const { visible, hover } = toRefs(states);
  35. const vm = getCurrentInstance().proxy;
  36. select.onOptionCreate(vm);
  37. onBeforeUnmount(() => {
  38. const key = vm.value;
  39. nextTick(() => {
  40. const { selected: selectedOptions } = select.states;
  41. const doesSelected = selectedOptions.some((item) => {
  42. return item.value === vm.value;
  43. });
  44. if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
  45. select.states.cachedOptions.delete(key);
  46. }
  47. });
  48. select.onOptionDestroy(key, vm);
  49. });
  50. function selectOptionClick() {
  51. if (!isDisabled.value) {
  52. select.handleOptionSelect(vm);
  53. }
  54. }
  55. return {
  56. ns,
  57. id,
  58. containerKls,
  59. currentLabel,
  60. itemSelected,
  61. isDisabled,
  62. select,
  63. visible,
  64. hover,
  65. states,
  66. hoverItem,
  67. updateOption,
  68. selectOptionClick
  69. };
  70. }
  71. });
  72. function _sfc_render(_ctx, _cache) {
  73. return withDirectives((openBlock(), createElementBlock("li", {
  74. id: _ctx.id,
  75. class: normalizeClass(_ctx.containerKls),
  76. role: "option",
  77. "aria-disabled": _ctx.isDisabled || void 0,
  78. "aria-selected": _ctx.itemSelected,
  79. onMousemove: _ctx.hoverItem,
  80. onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
  81. }, [
  82. renderSlot(_ctx.$slots, "default", {}, () => [
  83. createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
  84. ])
  85. ], 42, ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"])), [
  86. [vShow, _ctx.visible]
  87. ]);
  88. }
  89. var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "option.vue"]]);
  90. export { Option as default };
  91. //# sourceMappingURL=option2.mjs.map