128e23a19e18b5f52fa02bc888287526f6ce08a249f3a5a9a76ddb124c0e57bc80e592af876850bb26f6fb460cc3dcc2507c58c35b25a70b04194ad3031729 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import { ref, watch, provide, computed } from 'vue';
  2. import { collapseContextKey } from './constants.mjs';
  3. import { castArray } from 'lodash-unified';
  4. import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
  5. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  6. import { isPromise } from '@vue/shared';
  7. import { isBoolean } from '../../../utils/types.mjs';
  8. import { throwError } from '../../../utils/error.mjs';
  9. const SCOPE = "ElCollapse";
  10. const useCollapse = (props, emit) => {
  11. const activeNames = ref(castArray(props.modelValue));
  12. const setActiveNames = (_activeNames) => {
  13. activeNames.value = _activeNames;
  14. const value = props.accordion ? activeNames.value[0] : activeNames.value;
  15. emit(UPDATE_MODEL_EVENT, value);
  16. emit(CHANGE_EVENT, value);
  17. };
  18. const handleChange = (name) => {
  19. if (props.accordion) {
  20. setActiveNames([activeNames.value[0] === name ? "" : name]);
  21. } else {
  22. const _activeNames = [...activeNames.value];
  23. const index = _activeNames.indexOf(name);
  24. if (index > -1) {
  25. _activeNames.splice(index, 1);
  26. } else {
  27. _activeNames.push(name);
  28. }
  29. setActiveNames(_activeNames);
  30. }
  31. };
  32. const handleItemClick = async (name) => {
  33. const { beforeCollapse } = props;
  34. if (!beforeCollapse) {
  35. handleChange(name);
  36. return;
  37. }
  38. const shouldChange = beforeCollapse(name);
  39. const isPromiseOrBool = [
  40. isPromise(shouldChange),
  41. isBoolean(shouldChange)
  42. ].includes(true);
  43. if (!isPromiseOrBool) {
  44. throwError(SCOPE, "beforeCollapse must return type `Promise<boolean>` or `boolean`");
  45. }
  46. if (isPromise(shouldChange)) {
  47. shouldChange.then((result) => {
  48. if (result !== false) {
  49. handleChange(name);
  50. }
  51. }).catch((e) => {
  52. });
  53. } else if (shouldChange) {
  54. handleChange(name);
  55. }
  56. };
  57. watch(() => props.modelValue, () => activeNames.value = castArray(props.modelValue), { deep: true });
  58. provide(collapseContextKey, {
  59. activeNames,
  60. handleItemClick
  61. });
  62. return {
  63. activeNames,
  64. setActiveNames
  65. };
  66. };
  67. const useCollapseDOM = (props) => {
  68. const ns = useNamespace("collapse");
  69. const rootKls = computed(() => [
  70. ns.b(),
  71. ns.b(`icon-position-${props.expandIconPosition}`)
  72. ]);
  73. return {
  74. rootKls
  75. };
  76. };
  77. export { useCollapse, useCollapseDOM };
  78. //# sourceMappingURL=use-collapse.mjs.map