index.mjs 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { isClient } from "../../utils/browser.mjs";
  2. import { isBoolean, isFunction } from "../../utils/types.mjs";
  3. import { buildProp, definePropType } from "../../utils/vue/props/runtime.mjs";
  4. import { computed, getCurrentInstance, onMounted, watch } from "vue";
  5. //#region ../../packages/hooks/use-model-toggle/index.ts
  6. const _prop = buildProp({
  7. type: definePropType(Boolean),
  8. default: null
  9. });
  10. const _event = buildProp({ type: definePropType(Function) });
  11. const createModelToggleComposable = (name) => {
  12. const updateEventKey = `update:${name}`;
  13. const updateEventKeyRaw = `onUpdate:${name}`;
  14. const useModelToggleEmits = [updateEventKey];
  15. const useModelToggleProps = {
  16. [name]: _prop,
  17. [updateEventKeyRaw]: _event
  18. };
  19. const useModelToggle = ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide }) => {
  20. const instance = getCurrentInstance();
  21. const { emit } = instance;
  22. const props = instance.props;
  23. const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
  24. const isModelBindingAbsent = computed(() => props[name] === null);
  25. const doShow = (event) => {
  26. if (indicator.value === true) return;
  27. indicator.value = true;
  28. if (toggleReason) toggleReason.value = event;
  29. if (isFunction(onShow)) onShow(event);
  30. };
  31. const doHide = (event) => {
  32. if (indicator.value === false) return;
  33. indicator.value = false;
  34. if (toggleReason) toggleReason.value = event;
  35. if (isFunction(onHide)) onHide(event);
  36. };
  37. const show = (event) => {
  38. if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed()) return;
  39. const shouldEmit = hasUpdateHandler.value && isClient;
  40. if (shouldEmit) emit(updateEventKey, true);
  41. if (isModelBindingAbsent.value || !shouldEmit) doShow(event);
  42. };
  43. const hide = (event) => {
  44. if (props.disabled === true || !isClient) return;
  45. const shouldEmit = hasUpdateHandler.value && isClient;
  46. if (shouldEmit) emit(updateEventKey, false);
  47. if (isModelBindingAbsent.value || !shouldEmit) doHide(event);
  48. };
  49. const onChange = (val) => {
  50. if (!isBoolean(val)) return;
  51. if (props.disabled && val) {
  52. if (hasUpdateHandler.value) emit(updateEventKey, false);
  53. } else if (indicator.value !== val) if (val) doShow();
  54. else doHide();
  55. };
  56. const toggle = () => {
  57. if (indicator.value) hide();
  58. else show();
  59. };
  60. watch(() => props[name], onChange);
  61. if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) watch(() => ({ ...instance.proxy.$route }), () => {
  62. if (shouldHideWhenRouteChanges.value && indicator.value) hide();
  63. });
  64. onMounted(() => {
  65. onChange(props[name]);
  66. });
  67. return {
  68. hide,
  69. show,
  70. toggle,
  71. hasUpdateHandler
  72. };
  73. };
  74. return {
  75. useModelToggle,
  76. useModelToggleProps,
  77. useModelToggleEmits
  78. };
  79. };
  80. const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
  81. //#endregion
  82. export { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
  83. //# sourceMappingURL=index.mjs.map