index.mjs 3.6 KB

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