@chancestv/tv-focus 0.1.0

package/dist/index.js

@@ -0,0 +1,1351 @@
+import { inject, onMounted, onUnmounted, provide, shallowRef, ref, getCurrentInstance, onActivated, onDeactivated, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, renderSlot } from "vue";
+var $ = null;
+var GlobalConfig = {
+  selector: "",
+  // can be a valid <extSelector> except "@" syntax.
+  straightOnly: false,
+  straightOverlapThreshold: 0.5,
+  rememberSource: false,
+  disabled: false,
+  defaultElement: "",
+  // <extSelector> except "@" syntax.
+  enterTo: "",
+  // '', 'last-focused', 'default-element'
+  leaveFor: null,
+  // {left: <extSelector>, right: <extSelector>,
+  //  up: <extSelector>, down: <extSelector>}
+  restrict: "self-first",
+  // 'self-first', 'self-only', 'none'
+  tabIndexIgnoreList: "a, input, select, textarea, button, iframe, [contentEditable=true]",
+  navigableFilter: null
+};
+var KEYMAPPING = {
+  "37": "left",
+  "38": "up",
+  "39": "right",
+  "40": "down"
+};
+var REVERSE = {
+  "left": "right",
+  "up": "down",
+  "right": "left",
+  "down": "up"
+};
+var EVENT_PREFIX = "sn:";
+var ID_POOL_PREFIX = "section-";
+var _idPool = 0;
+var _ready = false;
+var _pause = false;
+var _sections = {};
+var _sectionCount = 0;
+var _defaultSectionId = "";
+var _lastSectionId = "";
+var _duringFocusChange = false;
+var elementMatchesSelector = Element.prototype.matches || Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || function(selector) {
+  var matchedNodes = (this.parentNode || this.document).querySelectorAll(selector);
+  return [].slice.call(matchedNodes).indexOf(this) >= 0;
+};
+function getRect(elem) {
+  var cr = elem.getBoundingClientRect();
+  var rect = {
+    left: cr.left,
+    top: cr.top,
+    right: cr.right,
+    bottom: cr.bottom,
+    width: cr.width,
+    height: cr.height
+  };
+  rect.element = elem;
+  rect.center = {
+    x: rect.left + Math.floor(rect.width / 2),
+    y: rect.top + Math.floor(rect.height / 2)
+  };
+  rect.center.left = rect.center.right = rect.center.x;
+  rect.center.top = rect.center.bottom = rect.center.y;
+  return rect;
+}
+function partition(rects, targetRect, straightOverlapThreshold) {
+  var groups = [[], [], [], [], [], [], [], [], []];
+  for (var i = 0; i < rects.length; i++) {
+    var rect = rects[i];
+    var center = rect.center;
+    var x, y, groupId;
+    if (center.x < targetRect.left) {
+      x = 0;
+    } else if (center.x <= targetRect.right) {
+      x = 1;
+    } else {
+      x = 2;
+    }
+    if (center.y < targetRect.top) {
+      y = 0;
+    } else if (center.y <= targetRect.bottom) {
+      y = 1;
+    } else {
+      y = 2;
+    }
+    groupId = y * 3 + x;
+    groups[groupId].push(rect);
+    if ([0, 2, 6, 8].indexOf(groupId) !== -1) {
+      var threshold = straightOverlapThreshold;
+      if (rect.left <= targetRect.right - targetRect.width * threshold) {
+        if (groupId === 2) {
+          groups[1].push(rect);
+        } else if (groupId === 8) {
+          groups[7].push(rect);
+        }
+      }
+      if (rect.right >= targetRect.left + targetRect.width * threshold) {
+        if (groupId === 0) {
+          groups[1].push(rect);
+        } else if (groupId === 6) {
+          groups[7].push(rect);
+        }
+      }
+      if (rect.top <= targetRect.bottom - targetRect.height * threshold) {
+        if (groupId === 6) {
+          groups[3].push(rect);
+        } else if (groupId === 8) {
+          groups[5].push(rect);
+        }
+      }
+      if (rect.bottom >= targetRect.top + targetRect.height * threshold) {
+        if (groupId === 0) {
+          groups[3].push(rect);
+        } else if (groupId === 2) {
+          groups[5].push(rect);
+        }
+      }
+    }
+  }
+  return groups;
+}
+function generateDistanceFunction(targetRect) {
+  return {
+    nearPlumbLineIsBetter: function(rect) {
+      var d;
+      if (rect.center.x < targetRect.center.x) {
+        d = targetRect.center.x - rect.right;
+      } else {
+        d = rect.left - targetRect.center.x;
+      }
+      return d < 0 ? 0 : d;
+    },
+    nearHorizonIsBetter: function(rect) {
+      var d;
+      if (rect.center.y < targetRect.center.y) {
+        d = targetRect.center.y - rect.bottom;
+      } else {
+        d = rect.top - targetRect.center.y;
+      }
+      return d < 0 ? 0 : d;
+    },
+    nearTargetLeftIsBetter: function(rect) {
+      var d;
+      if (rect.center.x < targetRect.center.x) {
+        d = targetRect.left - rect.right;
+      } else {
+        d = rect.left - targetRect.left;
+      }
+      return d < 0 ? 0 : d;
+    },
+    nearTargetTopIsBetter: function(rect) {
+      var d;
+      if (rect.center.y < targetRect.center.y) {
+        d = targetRect.top - rect.bottom;
+      } else {
+        d = rect.top - targetRect.top;
+      }
+      return d < 0 ? 0 : d;
+    },
+    topIsBetter: function(rect) {
+      return rect.top;
+    },
+    bottomIsBetter: function(rect) {
+      return -1 * rect.bottom;
+    },
+    leftIsBetter: function(rect) {
+      return rect.left;
+    },
+    rightIsBetter: function(rect) {
+      return -1 * rect.right;
+    }
+  };
+}
+function prioritize(priorities) {
+  var destPriority = null;
+  for (var i = 0; i < priorities.length; i++) {
+    if (priorities[i].group.length) {
+      destPriority = priorities[i];
+      break;
+    }
+  }
+  if (!destPriority) {
+    return null;
+  }
+  var destDistance = destPriority.distance;
+  destPriority.group.sort(function(a, b) {
+    for (var i2 = 0; i2 < destDistance.length; i2++) {
+      var distance = destDistance[i2];
+      var delta = distance(a) - distance(b);
+      if (delta) {
+        return delta;
+      }
+    }
+    return 0;
+  });
+  return destPriority.group;
+}
+function navigate(target, direction, candidates, config, preferNearest) {
+  if (!target || !direction || !candidates || !candidates.length) {
+    return null;
+  }
+  var rects = [];
+  for (var i = 0; i < candidates.length; i++) {
+    var rect = getRect(candidates[i]);
+    if (rect) {
+      rects.push(rect);
+    }
+  }
+  if (!rects.length) {
+    return null;
+  }
+  var targetRect = getRect(target);
+  if (!targetRect) {
+    return null;
+  }
+  var distanceFunction = generateDistanceFunction(targetRect);
+  var groups = partition(
+    rects,
+    targetRect,
+    config.straightOverlapThreshold
+  );
+  var internalGroups = partition(
+    groups[4],
+    targetRect.center,
+    config.straightOverlapThreshold
+  );
+  var priorities;
+  var df = distanceFunction;
+  var internalGroup, straightGroup, diagonalGroups;
+  var internalDist, straightDist, diagonalDist, mergedDist;
+  switch (direction) {
+    case "left":
+      internalGroup = internalGroups[0].concat(internalGroups[3]).concat(internalGroups[6]);
+      straightGroup = groups[3];
+      diagonalGroups = groups[0].concat(groups[6]);
+      internalDist = [df.nearPlumbLineIsBetter, df.topIsBetter];
+      straightDist = [df.nearPlumbLineIsBetter, df.topIsBetter];
+      diagonalDist = [
+        df.nearHorizonIsBetter,
+        df.rightIsBetter,
+        df.nearTargetTopIsBetter
+      ];
+      mergedDist = [
+        df.nearPlumbLineIsBetter,
+        df.nearHorizonIsBetter,
+        df.topIsBetter
+      ];
+      break;
+    case "right":
+      internalGroup = internalGroups[2].concat(internalGroups[5]).concat(internalGroups[8]);
+      straightGroup = groups[5];
+      diagonalGroups = groups[2].concat(groups[8]);
+      internalDist = [df.nearPlumbLineIsBetter, df.topIsBetter];
+      straightDist = [df.nearPlumbLineIsBetter, df.topIsBetter];
+      diagonalDist = [
+        df.nearHorizonIsBetter,
+        df.leftIsBetter,
+        df.nearTargetTopIsBetter
+      ];
+      mergedDist = [
+        df.nearPlumbLineIsBetter,
+        df.nearHorizonIsBetter,
+        df.topIsBetter
+      ];
+      break;
+    case "up":
+      internalGroup = internalGroups[0].concat(internalGroups[1]).concat(internalGroups[2]);
+      straightGroup = groups[1];
+      diagonalGroups = groups[0].concat(groups[2]);
+      internalDist = [df.nearHorizonIsBetter, df.leftIsBetter];
+      straightDist = [df.nearHorizonIsBetter, df.leftIsBetter];
+      diagonalDist = [
+        df.nearPlumbLineIsBetter,
+        df.bottomIsBetter,
+        df.nearTargetLeftIsBetter
+      ];
+      mergedDist = [
+        df.nearHorizonIsBetter,
+        df.nearPlumbLineIsBetter,
+        df.leftIsBetter
+      ];
+      break;
+    case "down":
+      internalGroup = internalGroups[6].concat(internalGroups[7]).concat(internalGroups[8]);
+      straightGroup = groups[7];
+      diagonalGroups = groups[6].concat(groups[8]);
+      internalDist = [df.nearHorizonIsBetter, df.leftIsBetter];
+      straightDist = [df.nearHorizonIsBetter, df.leftIsBetter];
+      diagonalDist = [
+        df.nearPlumbLineIsBetter,
+        df.topIsBetter,
+        df.nearTargetLeftIsBetter
+      ];
+      mergedDist = [
+        df.nearHorizonIsBetter,
+        df.nearPlumbLineIsBetter,
+        df.leftIsBetter
+      ];
+      break;
+    default:
+      return null;
+  }
+  if (preferNearest) {
+    priorities = [
+      { group: internalGroup, distance: internalDist },
+      {
+        group: config.straightOnly ? straightGroup : straightGroup.concat(diagonalGroups),
+        distance: mergedDist
+      }
+    ];
+  } else {
+    priorities = [
+      { group: internalGroup, distance: internalDist },
+      { group: straightGroup, distance: straightDist },
+      { group: diagonalGroups, distance: diagonalDist }
+    ];
+    if (config.straightOnly) {
+      priorities.pop();
+    }
+  }
+  var destGroup = prioritize(priorities);
+  if (!destGroup) {
+    return null;
+  }
+  var dest = null;
+  if (config.rememberSource && config.previous && config.previous.destination === target && config.previous.reverse === direction) {
+    for (var j = 0; j < destGroup.length; j++) {
+      if (destGroup[j].element === config.previous.target) {
+        dest = destGroup[j].element;
+        break;
+      }
+    }
+  }
+  if (!dest) {
+    dest = destGroup[0].element;
+  }
+  return dest;
+}
+function generateId() {
+  var id;
+  while (true) {
+    id = ID_POOL_PREFIX + String(++_idPool);
+    if (!_sections[id]) {
+      break;
+    }
+  }
+  return id;
+}
+function parseSelector(selector) {
+  var result = [];
+  try {
+    if (selector) {
+      if ($) ;
+      else if (typeof selector === "string") {
+        result = [].slice.call(document.querySelectorAll(selector));
+      } else if (typeof selector === "object" && selector.length) {
+        result = [].slice.call(selector);
+      } else if (typeof selector === "object" && selector.nodeType === 1) {
+        result = [selector];
+      }
+    }
+  } catch (err) {
+    console.error(err);
+  }
+  return result;
+}
+function matchSelector(elem, selector) {
+  if (typeof selector === "string") {
+    return elementMatchesSelector.call(elem, selector);
+  } else if (typeof selector === "object" && selector.length) {
+    return selector.indexOf(elem) >= 0;
+  } else if (typeof selector === "object" && selector.nodeType === 1) {
+    return elem === selector;
+  }
+  return false;
+}
+function getCurrentFocusedElement() {
+  var activeElement = document.activeElement;
+  if (activeElement && activeElement !== document.body) {
+    return activeElement;
+  }
+}
+function extend(out) {
+  out = out || {};
+  for (var i = 1; i < arguments.length; i++) {
+    if (!arguments[i]) {
+      continue;
+    }
+    for (var key in arguments[i]) {
+      if (arguments[i].hasOwnProperty(key) && arguments[i][key] !== void 0) {
+        out[key] = arguments[i][key];
+      }
+    }
+  }
+  return out;
+}
+function exclude(elemList, excludedElem) {
+  if (!Array.isArray(excludedElem)) {
+    excludedElem = [excludedElem];
+  }
+  for (var i = 0, index; i < excludedElem.length; i++) {
+    index = elemList.indexOf(excludedElem[i]);
+    if (index >= 0) {
+      elemList.splice(index, 1);
+    }
+  }
+  return elemList;
+}
+function isNavigable(elem, sectionId, verifySectionSelector) {
+  if (!elem || !sectionId || !_sections[sectionId] || _sections[sectionId].disabled) {
+    return false;
+  }
+  if (elem.offsetWidth <= 0 && elem.offsetHeight <= 0 || elem.hasAttribute("disabled")) {
+    return false;
+  }
+  if (verifySectionSelector && !matchSelector(elem, _sections[sectionId].selector)) {
+    return false;
+  }
+  if (typeof _sections[sectionId].navigableFilter === "function") {
+    if (_sections[sectionId].navigableFilter(elem, sectionId) === false) {
+      return false;
+    }
+  } else if (typeof GlobalConfig.navigableFilter === "function") {
+    if (GlobalConfig.navigableFilter(elem, sectionId) === false) {
+      return false;
+    }
+  }
+  return true;
+}
+function getSectionId(elem) {
+  for (var id in _sections) {
+    if (!_sections[id].disabled && matchSelector(elem, _sections[id].selector)) {
+      return id;
+    }
+  }
+}
+function getSectionNavigableElements(sectionId) {
+  return parseSelector(_sections[sectionId].selector).filter(function(elem) {
+    return isNavigable(elem, sectionId);
+  });
+}
+function getSectionDefaultElement(sectionId) {
+  var defaultElement = parseSelector(_sections[sectionId].defaultElement).find(function(elem) {
+    return isNavigable(elem, sectionId, true);
+  });
+  if (!defaultElement) {
+    return null;
+  }
+  return defaultElement;
+}
+function getSectionLastFocusedElement(sectionId) {
+  var lastFocusedElement = _sections[sectionId].lastFocusedElement;
+  if (!isNavigable(lastFocusedElement, sectionId, true)) {
+    return null;
+  }
+  return lastFocusedElement;
+}
+function fireEvent(elem, type, details, cancelable) {
+  if (arguments.length < 4) {
+    cancelable = true;
+  }
+  var evt = document.createEvent("CustomEvent");
+  evt.initCustomEvent(EVENT_PREFIX + type, true, cancelable, details);
+  return elem.dispatchEvent(evt);
+}
+function focusElement(elem, sectionId, direction) {
+  if (!elem) {
+    return false;
+  }
+  var currentFocusedElement = getCurrentFocusedElement();
+  var silentFocus = function() {
+    if (currentFocusedElement) {
+      currentFocusedElement.blur();
+    }
+    elem.focus();
+    focusChanged(elem, sectionId);
+  };
+  if (_duringFocusChange) {
+    silentFocus();
+    return true;
+  }
+  _duringFocusChange = true;
+  if (_pause) {
+    silentFocus();
+    _duringFocusChange = false;
+    return true;
+  }
+  if (currentFocusedElement) {
+    var unfocusProperties = {
+      nextElement: elem,
+      nextSectionId: sectionId,
+      direction,
+      native: false
+    };
+    if (!fireEvent(currentFocusedElement, "willunfocus", unfocusProperties)) {
+      _duringFocusChange = false;
+      return false;
+    }
+    currentFocusedElement.blur();
+    fireEvent(currentFocusedElement, "unfocused", unfocusProperties, false);
+  }
+  var focusProperties = {
+    previousElement: currentFocusedElement,
+    sectionId,
+    direction,
+    native: false
+  };
+  if (!fireEvent(elem, "willfocus", focusProperties)) {
+    _duringFocusChange = false;
+    return false;
+  }
+  elem.focus();
+  fireEvent(elem, "focused", focusProperties, false);
+  _duringFocusChange = false;
+  focusChanged(elem, sectionId);
+  return true;
+}
+function focusChanged(elem, sectionId) {
+  if (!sectionId) {
+    sectionId = getSectionId(elem);
+  }
+  if (sectionId) {
+    _sections[sectionId].lastFocusedElement = elem;
+    _lastSectionId = sectionId;
+  }
+}
+function focusExtendedSelector(selector, direction) {
+  if (selector.charAt(0) == "@") {
+    if (selector.length == 1) {
+      return focusSection();
+    } else {
+      var sectionId = selector.substr(1);
+      return focusSection(sectionId);
+    }
+  } else {
+    var next = parseSelector(selector)[0];
+    if (next) {
+      var nextSectionId = getSectionId(next);
+      if (isNavigable(next, nextSectionId)) {
+        return focusElement(next, nextSectionId, direction);
+      }
+    }
+  }
+  return false;
+}
+function focusSection(sectionId) {
+  var range = [];
+  var addRange = function(id2) {
+    if (id2 && range.indexOf(id2) < 0 && _sections[id2] && !_sections[id2].disabled) {
+      range.push(id2);
+    }
+  };
+  if (sectionId) {
+    addRange(sectionId);
+  } else {
+    addRange(_defaultSectionId);
+    addRange(_lastSectionId);
+    Object.keys(_sections).map(addRange);
+  }
+  for (var i = 0; i < range.length; i++) {
+    var id = range[i];
+    var next;
+    if (_sections[id].enterTo == "last-focused") {
+      next = getSectionLastFocusedElement(id) || getSectionDefaultElement(id) || getSectionNavigableElements(id)[0];
+    } else {
+      next = getSectionDefaultElement(id) || getSectionLastFocusedElement(id) || getSectionNavigableElements(id)[0];
+    }
+    if (next) {
+      return focusElement(next, id);
+    }
+  }
+  return false;
+}
+function fireNavigatefailed(elem, direction) {
+  fireEvent(elem, "navigatefailed", {
+    direction
+  }, false);
+}
+function gotoLeaveFor(sectionId, direction) {
+  if (_sections[sectionId].leaveFor && _sections[sectionId].leaveFor[direction] !== void 0) {
+    var next = _sections[sectionId].leaveFor[direction];
+    if (typeof next === "string") {
+      if (next === "") {
+        return null;
+      }
+      return focusExtendedSelector(next, direction);
+    }
+    var nextSectionId = getSectionId(next);
+    if (isNavigable(next, nextSectionId)) {
+      return focusElement(next, nextSectionId, direction);
+    }
+  }
+  return false;
+}
+var _scrollScopeCache = /* @__PURE__ */ new WeakMap();
+function getScrollScope(elem) {
+  if (_scrollScopeCache.has(elem)) {
+    return _scrollScopeCache.get(elem);
+  }
+  var scope = null;
+  var node = elem.parentElement;
+  while (node && node !== document.documentElement) {
+    var style = window.getComputedStyle(node);
+    var ox = style.overflowX;
+    var oy = style.overflowY;
+    if (ox === "auto" || ox === "scroll" || ox === "hidden" || ox === "clip" || oy === "auto" || oy === "scroll" || oy === "hidden" || oy === "clip") {
+      scope = node;
+      break;
+    }
+    node = node.parentElement;
+  }
+  _scrollScopeCache.set(elem, scope);
+  return scope;
+}
+function navigateWithinScrollScope(target, direction, candidates, config, preferNearest) {
+  if (!candidates || candidates.length < 2) {
+    return navigate(target, direction, candidates, config, preferNearest);
+  }
+  var targetScope = getScrollScope(target);
+  var inScope = [];
+  var outScope = [];
+  for (var i = 0; i < candidates.length; i++) {
+    if (getScrollScope(candidates[i]) === targetScope) {
+      inScope.push(candidates[i]);
+    } else {
+      outScope.push(candidates[i]);
+    }
+  }
+  if (inScope.length && outScope.length) {
+    return navigate(target, direction, inScope, config, preferNearest) || navigate(target, direction, outScope, config, preferNearest);
+  }
+  return navigate(target, direction, candidates, config, preferNearest);
+}
+function focusNext(direction, currentFocusedElement, currentSectionId) {
+  var extSelector = currentFocusedElement.getAttribute("data-sn-" + direction);
+  if (typeof extSelector === "string") {
+    if (extSelector === "" || !focusExtendedSelector(extSelector, direction)) {
+      fireNavigatefailed(currentFocusedElement, direction);
+      return false;
+    }
+    return true;
+  }
+  var sectionNavigableElements = {};
+  var allNavigableElements = [];
+  for (var id in _sections) {
+    sectionNavigableElements[id] = getSectionNavigableElements(id);
+    allNavigableElements = allNavigableElements.concat(sectionNavigableElements[id]);
+  }
+  var config = extend({}, GlobalConfig, _sections[currentSectionId]);
+  var next;
+  if (config.restrict == "self-only" || config.restrict == "self-first") {
+    var currentSectionNavigableElements = sectionNavigableElements[currentSectionId];
+    next = navigate(
+      currentFocusedElement,
+      direction,
+      exclude(currentSectionNavigableElements, currentFocusedElement),
+      config
+    );
+    if (!next && config.restrict == "self-first") {
+      next = navigateWithinScrollScope(
+        currentFocusedElement,
+        direction,
+        exclude(allNavigableElements, currentSectionNavigableElements),
+        config,
+        true
+      );
+    }
+  } else {
+    next = navigateWithinScrollScope(
+      currentFocusedElement,
+      direction,
+      exclude(allNavigableElements, currentFocusedElement),
+      config,
+      false
+    );
+  }
+  if (next) {
+    _sections[currentSectionId].previous = {
+      target: currentFocusedElement,
+      destination: next,
+      reverse: REVERSE[direction]
+    };
+    var nextSectionId = getSectionId(next);
+    if (currentSectionId != nextSectionId) {
+      var result = gotoLeaveFor(currentSectionId, direction);
+      if (result) {
+        return true;
+      } else if (result === null) {
+        fireNavigatefailed(currentFocusedElement, direction);
+        return false;
+      }
+      var enterToElement;
+      switch (_sections[nextSectionId].enterTo) {
+        case "last-focused":
+          enterToElement = getSectionLastFocusedElement(nextSectionId) || getSectionDefaultElement(nextSectionId);
+          break;
+        case "default-element":
+          enterToElement = getSectionDefaultElement(nextSectionId);
+          break;
+      }
+      if (enterToElement) {
+        next = enterToElement;
+      }
+    }
+    return focusElement(next, nextSectionId, direction);
+  } else if (gotoLeaveFor(currentSectionId, direction)) {
+    return true;
+  }
+  fireNavigatefailed(currentFocusedElement, direction);
+  return false;
+}
+function onKeyDown(evt) {
+  if (!_sectionCount || _pause || evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
+    return;
+  }
+  var currentFocusedElement;
+  var preventDefault = function() {
+    evt.preventDefault();
+    evt.stopPropagation();
+    return false;
+  };
+  var direction = KEYMAPPING[evt.keyCode];
+  if (!direction) {
+    if (evt.keyCode == 13) {
+      currentFocusedElement = getCurrentFocusedElement();
+      if (currentFocusedElement && getSectionId(currentFocusedElement)) {
+        if (!fireEvent(currentFocusedElement, "enter-down")) {
+          return preventDefault();
+        }
+      }
+    }
+    return;
+  }
+  currentFocusedElement = getCurrentFocusedElement();
+  if (!currentFocusedElement) {
+    if (_lastSectionId) {
+      currentFocusedElement = getSectionLastFocusedElement(_lastSectionId);
+    }
+    if (!currentFocusedElement) {
+      focusSection();
+      return preventDefault();
+    }
+  }
+  var currentSectionId = getSectionId(currentFocusedElement);
+  if (!currentSectionId) {
+    return;
+  }
+  var willmoveProperties = {
+    direction,
+    sectionId: currentSectionId,
+    cause: "keydown"
+  };
+  if (fireEvent(currentFocusedElement, "willmove", willmoveProperties)) {
+    focusNext(direction, currentFocusedElement, currentSectionId);
+  }
+  return preventDefault();
+}
+function onKeyUp(evt) {
+  if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
+    return;
+  }
+  if (!_pause && _sectionCount && evt.keyCode == 13) {
+    var currentFocusedElement = getCurrentFocusedElement();
+    if (currentFocusedElement && getSectionId(currentFocusedElement)) {
+      if (!fireEvent(currentFocusedElement, "enter-up")) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    }
+  }
+}
+function onFocus(evt) {
+  var target = evt.target;
+  if (target !== window && target !== document && _sectionCount && !_duringFocusChange) {
+    var sectionId = getSectionId(target);
+    if (sectionId) {
+      if (_pause) {
+        focusChanged(target, sectionId);
+        return;
+      }
+      var focusProperties = {
+        sectionId,
+        native: true
+      };
+      if (!fireEvent(target, "willfocus", focusProperties)) {
+        _duringFocusChange = true;
+        target.blur();
+        _duringFocusChange = false;
+      } else {
+        fireEvent(target, "focused", focusProperties, false);
+        focusChanged(target, sectionId);
+      }
+    }
+  }
+}
+function onBlur(evt) {
+  var target = evt.target;
+  if (target !== window && target !== document && !_pause && _sectionCount && !_duringFocusChange && getSectionId(target)) {
+    var unfocusProperties = {
+      native: true
+    };
+    if (!fireEvent(target, "willunfocus", unfocusProperties)) {
+      _duringFocusChange = true;
+      setTimeout(function() {
+        target.focus();
+        _duringFocusChange = false;
+      });
+    } else {
+      fireEvent(target, "unfocused", unfocusProperties, false);
+    }
+  }
+}
+var SpatialNavigation$1 = {
+  init: function() {
+    if (!_ready) {
+      window.addEventListener("keydown", onKeyDown);
+      window.addEventListener("keyup", onKeyUp);
+      window.addEventListener("focus", onFocus, true);
+      window.addEventListener("blur", onBlur, true);
+      _ready = true;
+    }
+  },
+  uninit: function() {
+    window.removeEventListener("blur", onBlur, true);
+    window.removeEventListener("focus", onFocus, true);
+    window.removeEventListener("keyup", onKeyUp);
+    window.removeEventListener("keydown", onKeyDown);
+    SpatialNavigation$1.clear();
+    _idPool = 0;
+    _ready = false;
+  },
+  clear: function() {
+    _sections = {};
+    _sectionCount = 0;
+    _defaultSectionId = "";
+    _lastSectionId = "";
+    _duringFocusChange = false;
+  },
+  // set(<config>);
+  // set(<sectionId>, <config>);
+  set: function() {
+    var sectionId, config;
+    if (typeof arguments[0] === "object") {
+      config = arguments[0];
+    } else if (typeof arguments[0] === "string" && typeof arguments[1] === "object") {
+      sectionId = arguments[0];
+      config = arguments[1];
+      if (!_sections[sectionId]) {
+        throw new Error('Section "' + sectionId + `" doesn't exist!`);
+      }
+    } else {
+      return;
+    }
+    for (var key in config) {
+      if (GlobalConfig[key] !== void 0) {
+        if (sectionId) {
+          _sections[sectionId][key] = config[key];
+        } else if (config[key] !== void 0) {
+          GlobalConfig[key] = config[key];
+        }
+      }
+    }
+    if (sectionId) {
+      _sections[sectionId] = extend({}, _sections[sectionId]);
+    }
+  },
+  // add(<config>);
+  // add(<sectionId>, <config>);
+  add: function() {
+    var sectionId;
+    var config = {};
+    if (typeof arguments[0] === "object") {
+      config = arguments[0];
+    } else if (typeof arguments[0] === "string" && typeof arguments[1] === "object") {
+      sectionId = arguments[0];
+      config = arguments[1];
+    }
+    if (!sectionId) {
+      sectionId = typeof config.id === "string" ? config.id : generateId();
+    }
+    if (_sections[sectionId]) {
+      throw new Error('Section "' + sectionId + '" has already existed!');
+    }
+    _sections[sectionId] = {};
+    _sectionCount++;
+    SpatialNavigation$1.set(sectionId, config);
+    return sectionId;
+  },
+  remove: function(sectionId) {
+    if (!sectionId || typeof sectionId !== "string") {
+      throw new Error('Please assign the "sectionId"!');
+    }
+    if (_sections[sectionId]) {
+      _sections[sectionId] = void 0;
+      _sections = extend({}, _sections);
+      _sectionCount--;
+      if (_lastSectionId === sectionId) {
+        _lastSectionId = "";
+      }
+      return true;
+    }
+    return false;
+  },
+  disable: function(sectionId) {
+    if (_sections[sectionId]) {
+      _sections[sectionId].disabled = true;
+      return true;
+    }
+    return false;
+  },
+  enable: function(sectionId) {
+    if (_sections[sectionId]) {
+      _sections[sectionId].disabled = false;
+      return true;
+    }
+    return false;
+  },
+  pause: function() {
+    _pause = true;
+  },
+  resume: function() {
+    _pause = false;
+  },
+  // focus([silent])
+  // focus(<sectionId>, [silent])
+  // focus(<extSelector>, [silent])
+  // Note: "silent" is optional and default to false
+  focus: function(elem, silent) {
+    var result = false;
+    if (silent === void 0 && typeof elem === "boolean") {
+      silent = elem;
+      elem = void 0;
+    }
+    var autoPause = !_pause && silent;
+    if (autoPause) {
+      SpatialNavigation$1.pause();
+    }
+    if (!elem) {
+      result = focusSection();
+    } else {
+      if (typeof elem === "string") {
+        if (_sections[elem]) {
+          result = focusSection(elem);
+        } else {
+          result = focusExtendedSelector(elem);
+        }
+      } else {
+        var nextSectionId = getSectionId(elem);
+        if (isNavigable(elem, nextSectionId)) {
+          result = focusElement(elem, nextSectionId);
+        }
+      }
+    }
+    if (autoPause) {
+      SpatialNavigation$1.resume();
+    }
+    return result;
+  },
+  // move(<direction>)
+  // move(<direction>, <selector>)
+  move: function(direction, selector) {
+    direction = direction.toLowerCase();
+    if (!REVERSE[direction]) {
+      return false;
+    }
+    var elem = selector ? parseSelector(selector)[0] : getCurrentFocusedElement();
+    if (!elem) {
+      return false;
+    }
+    var sectionId = getSectionId(elem);
+    if (!sectionId) {
+      return false;
+    }
+    var willmoveProperties = {
+      direction,
+      sectionId,
+      cause: "api"
+    };
+    if (!fireEvent(elem, "willmove", willmoveProperties)) {
+      return false;
+    }
+    return focusNext(direction, elem, sectionId);
+  },
+  // makeFocusable()
+  // makeFocusable(<sectionId>)
+  makeFocusable: function(sectionId) {
+    var doMakeFocusable = function(section) {
+      var tabIndexIgnoreList = section.tabIndexIgnoreList !== void 0 ? section.tabIndexIgnoreList : GlobalConfig.tabIndexIgnoreList;
+      parseSelector(section.selector).forEach(function(elem) {
+        if (!matchSelector(elem, tabIndexIgnoreList)) {
+          if (!elem.getAttribute("tabindex")) {
+            elem.setAttribute("tabindex", "-1");
+          }
+        }
+      });
+    };
+    if (sectionId) {
+      if (_sections[sectionId]) {
+        doMakeFocusable(_sections[sectionId]);
+      } else {
+        throw new Error('Section "' + sectionId + `" doesn't exist!`);
+      }
+    } else {
+      for (var id in _sections) {
+        doMakeFocusable(_sections[id]);
+      }
+    }
+  },
+  setDefaultSection: function(sectionId) {
+    if (!sectionId) {
+      _defaultSectionId = "";
+    } else if (!_sections[sectionId]) {
+      throw new Error('Section "' + sectionId + `" doesn't exist!`);
+    } else {
+      _defaultSectionId = sectionId;
+    }
+  }
+};
+if (typeof window !== "undefined") {
+  window.SpatialNavigation = SpatialNavigation$1;
+}
+const SpatialNavigation = SpatialNavigation$1;
+let initialized = false;
+function setupFocus(options = {}) {
+  if (initialized) return;
+  SpatialNavigation.init();
+  if (options.defaults) {
+    SpatialNavigation.set(options.defaults);
+  }
+  initialized = true;
+}
+const ANDROID_TO_KEY = {
+  19: "ArrowUp",
+  20: "ArrowDown",
+  21: "ArrowLeft",
+  22: "ArrowRight",
+  23: "Enter",
+  66: "Enter",
+  4: "Escape",
+  67: "Backspace"
+};
+const KEY_STR_TO_KEY = {
+  KEYCODE_DPAD_UP: "ArrowUp",
+  KEYCODE_DPAD_DOWN: "ArrowDown",
+  KEYCODE_DPAD_LEFT: "ArrowLeft",
+  KEYCODE_DPAD_RIGHT: "ArrowRight",
+  KEYCODE_DPAD_CENTER: "Enter",
+  KEYCODE_ENTER: "Enter",
+  KEYCODE_BACK: "Escape",
+  KEYCODE_DEL: "Backspace"
+};
+const KEY_TO_CODE = {
+  ArrowUp: 38,
+  ArrowDown: 40,
+  ArrowLeft: 37,
+  ArrowRight: 39,
+  Enter: 13,
+  Escape: 27,
+  Backspace: 8
+};
+function normalize(detail) {
+  var _a;
+  let key = detail.key;
+  if (!key && typeof detail.keyCodeString === "string") {
+    key = KEY_STR_TO_KEY[detail.keyCodeString];
+  }
+  if (!key && typeof detail.keyCode === "number") {
+    key = ANDROID_TO_KEY[detail.keyCode];
+  }
+  if (!key) return null;
+  const keyCode = (_a = KEY_TO_CODE[key]) != null ? _a : 0;
+  return { key, keyCode };
+}
+let attachedEventName = null;
+let handler = null;
+function makeKbEvent(type, key, keyCode) {
+  let evt;
+  try {
+    evt = new KeyboardEvent(type, { key, bubbles: true, cancelable: true });
+  } catch (e) {
+    evt = document.createEvent("Event");
+    evt.initEvent(type, true, true);
+    Object.defineProperty(evt, "key", { value: key, configurable: true });
+  }
+  Object.defineProperty(evt, "keyCode", { value: keyCode, configurable: true });
+  Object.defineProperty(evt, "which", { value: keyCode, configurable: true });
+  return evt;
+}
+function nativeKeyAdapter(eventName) {
+  if (typeof window === "undefined") return () => void 0;
+  if (attachedEventName && handler) {
+    window.removeEventListener(attachedEventName, handler);
+  }
+  attachedEventName = eventName;
+  handler = (e) => {
+    const detail = e.detail || {};
+    const n = normalize(detail);
+    if (!n) return;
+    window.dispatchEvent(makeKbEvent("keydown", n.key, n.keyCode));
+    window.dispatchEvent(makeKbEvent("keyup", n.key, n.keyCode));
+  };
+  window.addEventListener(eventName, handler);
+  return () => {
+    if (attachedEventName && handler) {
+      window.removeEventListener(attachedEventName, handler);
+      attachedEventName = null;
+      handler = null;
+    }
+  };
+}
+const activeSectionIds = /* @__PURE__ */ new Set();
+function registerSection(id) {
+  activeSectionIds.add(id);
+}
+function unregisterSection(id) {
+  activeSectionIds.delete(id);
+}
+function listSections() {
+  const out = [];
+  activeSectionIds.forEach((id) => out.push(id));
+  return out;
+}
+const FOCUS_LAYER_KEY = Symbol("dwy:focus-layer");
+let sectionCounter = 0;
+const FOCUS_SECTION_KEY = Symbol("dwy:focus-section");
+function useFocusSection(options = {}) {
+  var _a;
+  const sectionId = (_a = options.id) != null ? _a : `dwy-section-${++sectionCounter}`;
+  const selectorAttr = sectionId;
+  const enclosingLayer = inject(FOCUS_LAYER_KEY, null);
+  onMounted(() => {
+    var _a2, _b, _c, _d, _e;
+    SpatialNavigation.add(sectionId, {
+      selector: `[data-sn-section="${selectorAttr}"]`,
+      restrict: (_a2 = options.restrict) != null ? _a2 : "self-first",
+      enterTo: (_b = options.enterTo) != null ? _b : "last-focused",
+      leaveFor: (_c = options.leaveFor) != null ? _c : null,
+      straightOnly: (_d = options.straightOnly) != null ? _d : false,
+      rememberSource: (_e = options.rememberSource) != null ? _e : true,
+      defaultElement: options.defaultElement
+    });
+    registerSection(sectionId);
+    if (enclosingLayer) enclosingLayer.registerInnerSection(sectionId);
+  });
+  onUnmounted(() => {
+    SpatialNavigation.remove(sectionId);
+    unregisterSection(sectionId);
+  });
+  const ctx = { sectionId, selectorAttr };
+  provide(FOCUS_SECTION_KEY, ctx);
+  return ctx;
+}
+function useFocusable(options = {}) {
+  const elRef = shallowRef(null);
+  const focused = ref(false);
+  const ctx = inject(FOCUS_SECTION_KEY, null);
+  function handleFocused() {
+    focused.value = true;
+    if (options.onFocus) options.onFocus();
+  }
+  function handleUnfocused() {
+    focused.value = false;
+    if (options.onBlur) options.onBlur();
+  }
+  function handleEnter() {
+    if (options.onEnter) options.onEnter();
+  }
+  onMounted(() => {
+    const el = elRef.value;
+    if (!el) {
+      if (getCurrentInstance()) {
+        console.warn("[dwy:focus] useFocusable 的 elRef 未绑定到任何元素");
+      }
+      return;
+    }
+    if (ctx) {
+      el.setAttribute("data-sn-section", ctx.selectorAttr);
+    } else {
+      console.warn("[dwy:focus] useFocusable 未找到外层 FocusSection；当前元素不会被纳入任何导航区域");
+    }
+    if (options.focusKey) {
+      el.setAttribute("data-focus-key", options.focusKey);
+    }
+    if (el.tabIndex < 0 && !el.getAttribute("tabindex")) {
+      el.setAttribute("tabindex", "-1");
+    }
+    el.addEventListener("sn:focused", handleFocused);
+    el.addEventListener("sn:unfocused", handleUnfocused);
+    el.addEventListener("sn:enter-up", handleEnter);
+  });
+  onUnmounted(() => {
+    const el = elRef.value;
+    if (!el) return;
+    el.removeEventListener("sn:focused", handleFocused);
+    el.removeEventListener("sn:unfocused", handleUnfocused);
+    el.removeEventListener("sn:enter-up", handleEnter);
+  });
+  return { elRef, focused };
+}
+function useKeepAliveFocus() {
+  if (!getCurrentInstance()) return;
+  onActivated(() => {
+    SpatialNavigation.resume();
+  });
+  onDeactivated(() => {
+    SpatialNavigation.pause();
+  });
+}
+let openCount = 0;
+function pushLayer() {
+  openCount += 1;
+}
+function popLayer() {
+  openCount = Math.max(0, openCount - 1);
+}
+function hasOpenLayer() {
+  return openCount > 0;
+}
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Focusable",
+  props: {
+    focusKey: {},
+    tag: { default: "div" }
+  },
+  emits: ["enter", "focus", "blur"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { elRef, focused } = useFocusable({
+      focusKey: props.focusKey,
+      onEnter: () => emit("enter"),
+      onFocus: () => emit("focus"),
+      onBlur: () => emit("blur")
+    });
+    __expose({ elRef, focused });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        ref_key: "elRef",
+        ref: elRef,
+        class: normalizeClass(["dwy-focusable", { "is-focused": unref(focused) }]),
+        tabindex: "-1"
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { focused: unref(focused) })
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "FocusSection",
+  props: {
+    id: {},
+    restrict: { default: "self-first" },
+    enterTo: { default: "last-focused" },
+    leaveFor: { default: null },
+    straightOnly: { type: Boolean, default: false },
+    rememberSource: { type: Boolean, default: true },
+    tag: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { sectionId } = useFocusSection({
+      id: props.id,
+      restrict: props.restrict,
+      enterTo: props.enterTo,
+      leaveFor: props.leaveFor,
+      straightOnly: props.straightOnly,
+      rememberSource: props.rememberSource
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        class: "dwy-focus-section",
+        "data-sn-section-root": unref(sectionId)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { sectionId: unref(sectionId) })
+        ]),
+        _: 3
+      }, 8, ["data-sn-section-root"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FocusLayer",
+  props: {
+    id: {},
+    tag: { default: "div" }
+  },
+  setup(__props) {
+    var _a;
+    const props = __props;
+    const innerSectionIds = /* @__PURE__ */ new Set();
+    const layerCtx = {
+      layerId: (_a = props.id) != null ? _a : "dwy-focus-layer",
+      registerInnerSection(id) {
+        innerSectionIds.add(id);
+      }
+    };
+    provide(FOCUS_LAYER_KEY, layerCtx);
+    let outerSections = [];
+    let previousActiveElement = null;
+    onMounted(() => {
+      var _a2;
+      pushLayer();
+      previousActiveElement = (_a2 = document.activeElement) != null ? _a2 : null;
+      outerSections = listSections().filter((id) => !innerSectionIds.has(id));
+      outerSections.forEach((id) => {
+        SpatialNavigation.disable(id);
+      });
+    });
+    onUnmounted(() => {
+      popLayer();
+      outerSections.forEach((id) => {
+        SpatialNavigation.enable(id);
+      });
+      outerSections = [];
+      if (previousActiveElement && typeof previousActiveElement.focus === "function") {
+        try {
+          previousActiveElement.focus();
+        } catch (e) {
+        }
+      }
+      previousActiveElement = null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), { class: "dwy-focus-layer" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  FOCUS_SECTION_KEY,
+  _sfc_main as FocusLayer,
+  _sfc_main$1 as FocusSection,
+  _sfc_main$2 as Focusable,
+  SpatialNavigation,
+  hasOpenLayer,
+  nativeKeyAdapter,
+  setupFocus,
+  useFocusSection,
+  useFocusable,
+  useKeepAliveFocus
+};
+//# sourceMappingURL=index.js.map