020bed0887ab3697540377f24a5d7a4eaccc3f54389cd48c8c3aa5faa445ca4677c2b79740087d8f8e3ce8678f0e8d7b4762ffcd4c118f50dae8cbc3db33d4 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { inject, ref, computed, unref } from 'vue';
  2. import { collapseContextKey } from './constants.mjs';
  3. import { useIdInjection } from '../../../hooks/use-id/index.mjs';
  4. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  5. const useCollapseItem = (props) => {
  6. const collapse = inject(collapseContextKey);
  7. const { namespace } = useNamespace("collapse");
  8. const focusing = ref(false);
  9. const isClick = ref(false);
  10. const idInjection = useIdInjection();
  11. const id = computed(() => idInjection.current++);
  12. const name = computed(() => {
  13. var _a;
  14. return (_a = props.name) != null ? _a : `${namespace.value}-id-${idInjection.prefix}-${unref(id)}`;
  15. });
  16. const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(unref(name)));
  17. const handleFocus = () => {
  18. setTimeout(() => {
  19. if (!isClick.value) {
  20. focusing.value = true;
  21. } else {
  22. isClick.value = false;
  23. }
  24. }, 50);
  25. };
  26. const handleHeaderClick = (e) => {
  27. if (props.disabled)
  28. return;
  29. const target = e.target;
  30. if (target == null ? void 0 : target.closest("input, textarea, select"))
  31. return;
  32. collapse == null ? void 0 : collapse.handleItemClick(unref(name));
  33. focusing.value = false;
  34. isClick.value = true;
  35. };
  36. const handleEnterClick = (e) => {
  37. const target = e.target;
  38. if (target == null ? void 0 : target.closest("input, textarea, select"))
  39. return;
  40. e.preventDefault();
  41. collapse == null ? void 0 : collapse.handleItemClick(unref(name));
  42. };
  43. return {
  44. focusing,
  45. id,
  46. isActive,
  47. handleFocus,
  48. handleHeaderClick,
  49. handleEnterClick
  50. };
  51. };
  52. const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
  53. const ns = useNamespace("collapse");
  54. const rootKls = computed(() => [
  55. ns.b("item"),
  56. ns.is("active", unref(isActive)),
  57. ns.is("disabled", props.disabled)
  58. ]);
  59. const headKls = computed(() => [
  60. ns.be("item", "header"),
  61. ns.is("active", unref(isActive)),
  62. { focusing: unref(focusing) && !props.disabled }
  63. ]);
  64. const arrowKls = computed(() => [
  65. ns.be("item", "arrow"),
  66. ns.is("active", unref(isActive))
  67. ]);
  68. const itemTitleKls = computed(() => [ns.be("item", "title")]);
  69. const itemWrapperKls = computed(() => ns.be("item", "wrap"));
  70. const itemContentKls = computed(() => ns.be("item", "content"));
  71. const scopedContentId = computed(() => ns.b(`content-${unref(id)}`));
  72. const scopedHeadId = computed(() => ns.b(`head-${unref(id)}`));
  73. return {
  74. itemTitleKls,
  75. arrowKls,
  76. headKls,
  77. rootKls,
  78. itemWrapperKls,
  79. itemContentKls,
  80. scopedContentId,
  81. scopedHeadId
  82. };
  83. };
  84. export { useCollapseItem, useCollapseItemDOM };
  85. //# sourceMappingURL=use-collapse-item.mjs.map