use-collapse-item.js 2.6 KB

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