Modal Escape Hanlding

Modal.js

// in setup() ..

//  bind listeners on mount/unmount
useEscapeKeydownWhenMounted(() => {
  emit('close');
});

//  bind listeners based on condition
useEscapeKeydownWhen(toRef(props, 'open'), () => {
  emit('close');
});

onEscapeKeydown.js

import { onMounted, onUnmounted, watch } from 'vue';

export const onAfterEscapeKeydown = (callback) => (e) => {
  if (e.key !== 'Escape') {
    return;
  }
  callback(e);
};

export const addEscapeEventKeydownListener = (handler) =>
  document.addEventListener('keydown', handler);

export const removeEscapeEventKeydownListener = (handler) =>
  document.removeEventListener('keydown', handler);

export function useEscapeKeydownWhen (condition, callback) {
  const handler = onAfterEscapeKeydown(callback);

  watch(condition, (condition) => condition
    ? addEscapeEventKeydownListener(handler)
    : removeEscapeEventKeydownListener(handler));

  onUnmounted(() => removeEscapeEventKeydownListener(handler));
}

export function useEscapeKeydownWhenMounted (callback) {
  const handler = onAfterEscapeKeydown(callback);

  onMounted(() => addEscapeEventKeydownListener(handler));
  onUnmounted(() => removeEscapeEventKeydownListener(handler));
}

Not crazy about the naming of onAfterEscapeKeydown. Maybe handlerFactory?