@muban/muban/dist/esm/lib/bindings/dom/hasFocusBinding.js

Writing components for server-rendered HTML

import { unref, watchEffect } from '@vue/runtime-core';
export function hasFocusBinding(target, valueAccessor) {
    const unwatch = watchEffect(() => {
        const focusValue = unref(valueAccessor);
        if (focusValue) {
            if (document.activeElement !== target) {
                target.focus();
            }
        }
        else if (document.activeElement === target) {
            target.blur();
        }
    });
    function onFocusChange() {
        valueAccessor.value = document.activeElement === target;
    }
    // Nice: https://hiddedevries.nl/en/blog/2019-01-30-console-logging-the-focused-element-as-it-changes
    target.addEventListener('focus', onFocusChange);
    target.addEventListener('blur', onFocusChange);
    return () => {
        unwatch();
        target.removeEventListener('focus', onFocusChange);
        target.removeEventListener('blur', onFocusChange);
    };
}