use-collapse-item.mjs 2.2 KB

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