index.mjs 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import { getCurrentInstance, computed, watch, onMounted } from 'vue';
  2. import { isFunction } from '@vue/shared';
  3. import '../../utils/index.mjs';
  4. import { buildProp, definePropType } from '../../utils/vue/props/runtime.mjs';
  5. import { isClient } from '@vueuse/core';
  6. import { isBoolean } from '../../utils/types.mjs';
  7. const _prop = buildProp({
  8. type: definePropType(Boolean),
  9. default: null
  10. });
  11. const _event = buildProp({
  12. type: definePropType(Function)
  13. });
  14. const createModelToggleComposable = (name) => {
  15. const updateEventKey = `update:${name}`;
  16. const updateEventKeyRaw = `onUpdate:${name}`;
  17. const useModelToggleEmits2 = [updateEventKey];
  18. const useModelToggleProps2 = {
  19. [name]: _prop,
  20. [updateEventKeyRaw]: _event
  21. };
  22. const useModelToggle2 = ({
  23. indicator,
  24. toggleReason,
  25. shouldHideWhenRouteChanges,
  26. shouldProceed,
  27. onShow,
  28. onHide
  29. }) => {
  30. const instance = getCurrentInstance();
  31. const { emit } = instance;
  32. const props = instance.props;
  33. const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
  34. const isModelBindingAbsent = computed(() => props[name] === null);
  35. const doShow = (event) => {
  36. if (indicator.value === true) {
  37. return;
  38. }
  39. indicator.value = true;
  40. if (toggleReason) {
  41. toggleReason.value = event;
  42. }
  43. if (isFunction(onShow)) {
  44. onShow(event);
  45. }
  46. };
  47. const doHide = (event) => {
  48. if (indicator.value === false) {
  49. return;
  50. }
  51. indicator.value = false;
  52. if (toggleReason) {
  53. toggleReason.value = event;
  54. }
  55. if (isFunction(onHide)) {
  56. onHide(event);
  57. }
  58. };
  59. const show = (event) => {
  60. if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed())
  61. return;
  62. const shouldEmit = hasUpdateHandler.value && isClient;
  63. if (shouldEmit) {
  64. emit(updateEventKey, true);
  65. }
  66. if (isModelBindingAbsent.value || !shouldEmit) {
  67. doShow(event);
  68. }
  69. };
  70. const hide = (event) => {
  71. if (props.disabled === true || !isClient)
  72. return;
  73. const shouldEmit = hasUpdateHandler.value && isClient;
  74. if (shouldEmit) {
  75. emit(updateEventKey, false);
  76. }
  77. if (isModelBindingAbsent.value || !shouldEmit) {
  78. doHide(event);
  79. }
  80. };
  81. const onChange = (val) => {
  82. if (!isBoolean(val))
  83. return;
  84. if (props.disabled && val) {
  85. if (hasUpdateHandler.value) {
  86. emit(updateEventKey, false);
  87. }
  88. } else if (indicator.value !== val) {
  89. if (val) {
  90. doShow();
  91. } else {
  92. doHide();
  93. }
  94. }
  95. };
  96. const toggle = () => {
  97. if (indicator.value) {
  98. hide();
  99. } else {
  100. show();
  101. }
  102. };
  103. watch(() => props[name], onChange);
  104. if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
  105. watch(() => ({
  106. ...instance.proxy.$route
  107. }), () => {
  108. if (shouldHideWhenRouteChanges.value && indicator.value) {
  109. hide();
  110. }
  111. });
  112. }
  113. onMounted(() => {
  114. onChange(props[name]);
  115. });
  116. return {
  117. hide,
  118. show,
  119. toggle,
  120. hasUpdateHandler
  121. };
  122. };
  123. return {
  124. useModelToggle: useModelToggle2,
  125. useModelToggleProps: useModelToggleProps2,
  126. useModelToggleEmits: useModelToggleEmits2
  127. };
  128. };
  129. const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
  130. export { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
  131. //# sourceMappingURL=index.mjs.map