added utilities based on bsv-2 logic

Author: devhus

packages/bootstrap-vue-3/src/constants/env.ts

@@ -0,0 +1,63 @@
+declare var WebKitMutationObserver: any
+declare var MozMutationObserver: any
+
+export const HAS_WINDOW_SUPPORT = typeof window !== 'undefined'
+export const HAS_DOCUMENT_SUPPORT = typeof document !== 'undefined'
+export const HAS_NAVIGATOR_SUPPORT = typeof navigator !== 'undefined'
+export const HAS_PROMISE_SUPPORT = typeof Promise !== 'undefined'
+
+/* istanbul ignore next: JSDOM always returns false */
+export const HAS_MUTATION_OBSERVER_SUPPORT =
+  typeof MutationObserver !== 'undefined' ||
+  typeof WebKitMutationObserver !== 'undefined' ||
+  typeof MozMutationObserver !== 'undefined'
+
+export const IS_BROWSER = HAS_WINDOW_SUPPORT && HAS_DOCUMENT_SUPPORT && HAS_NAVIGATOR_SUPPORT
+
+export const WINDOW = HAS_WINDOW_SUPPORT ? window : ({} as Record<string, any>)
+export const DOCUMENT = HAS_DOCUMENT_SUPPORT ? document : ({} as Record<string, any>)
+export const NAVIGATOR = HAS_NAVIGATOR_SUPPORT ? navigator : ({} as Record<string, any>)
+export const USER_AGENT = (NAVIGATOR.userAgent || '').toLowerCase()
+
+export const IS_JSDOM = USER_AGENT.indexOf('jsdom') > 0
+export const IS_IE = /msie|trident/.test(USER_AGENT)
+
+// Determine if the browser supports the option passive for events
+export const HAS_PASSIVE_EVENT_SUPPORT = (() => {
+  let passiveEventSupported = false
+  if (IS_BROWSER) {
+    try {
+      const options = {
+        // This function will be called when the browser
+        // attempts to access the passive property
+        get passive() {
+          /* istanbul ignore next: will never be called in JSDOM */
+          passiveEventSupported = true
+          return passiveEventSupported
+        },
+      }
+      WINDOW.addEventListener('test', options, options)
+      WINDOW.removeEventListener('test', options, options)
+    } catch {
+      /* istanbul ignore next: will never be called in JSDOM */
+      passiveEventSupported = false
+    }
+  }
+  return passiveEventSupported
+})()
+
+export const HAS_TOUCH_SUPPORT =
+  IS_BROWSER && ('ontouchstart' in DOCUMENT.documentElement || NAVIGATOR.maxTouchPoints > 0)
+
+export const HAS_POINTER_EVENT_SUPPORT =
+  IS_BROWSER && Boolean(WINDOW.PointerEvent || WINDOW.MSPointerEvent)
+
+/* istanbul ignore next: JSDOM only checks for 'IntersectionObserver' */
+export const HAS_INTERACTION_OBSERVER_SUPPORT =
+  IS_BROWSER &&
+  'IntersectionObserver' in WINDOW &&
+  'IntersectionObserverEntry' in WINDOW &&
+  // Edge 15 and UC Browser lack support for `isIntersecting`
+  // but we an use `intersectionRatio > 0` instead
+  // 'isIntersecting' in window.IntersectionObserverEntry.prototype &&
+  'intersectionRatio' in WINDOW.IntersectionObserverEntry.prototype

packages/bootstrap-vue-3/src/utils/dom.ts

@@ -1,13 +1,24 @@
-import {AnimationFrame, DOCUMENT} from '../types/safeTypes'
+import {Comment, Slot, VNode} from 'vue'
+import {DOCUMENT} from '../constants/env'
+import {AnimationFrame} from '../types/safeTypes'
 import {HAS_WINDOW_SUPPORT} from './env'
 import {toString} from './stringUtils'
-import {Comment, Slot, VNode} from 'vue'
+
+const ELEMENT_PROTO = Element.prototype
+
+// See: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+/* istanbul ignore next */
+export const matchesEl =
+  ELEMENT_PROTO.matches ||
+  (ELEMENT_PROTO as any).msMatchesSelector ||
+  ELEMENT_PROTO.webkitMatchesSelector
 
 /**
  * @param el
  * @returns
  */
-export const isElement = (el: HTMLElement): boolean => !!(el && el.nodeType === Node.ELEMENT_NODE)
+export const isElement = (el: HTMLElement | Element): boolean =>
+  !!(el && el.nodeType === Node.ELEMENT_NODE)
 
 /**
  * @param el
@@ -148,9 +159,13 @@ export const selectAll = (selector: any, root: any) =>
  * @param attr
  * @returns
  */
-export const getAttr = (el: HTMLElement, attr: string): string | null =>
+export const getAttr = (el: HTMLElement | Element, attr: string): string | null =>
   attr && isElement(el) ? el.getAttribute(attr) : null
 
+// Get an element given an ID
+export const getById = (id: string) =>
+  DOCUMENT.getElementById(/^#/.test(id) ? id.slice(1) : id) || null
+
 /**
  * @param el
  * @param attr
@@ -192,3 +207,37 @@ export const requestAF: AnimationFrame = HAS_WINDOW_SUPPORT
     // Only needed for Opera Mini
     ((cb) => setTimeout(cb, 16))
   : (cb) => setTimeout(cb, 0)
+
+// Determine if an element matches a selector
+export const matches = (el: Element, selector: string) =>
+  isElement(el) ? matchesEl.call(el, selector) : false
+
+// See: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+/* istanbul ignore next */
+export const closestEl =
+  ELEMENT_PROTO.closest ||
+  function (this: Element, sel: string) {
+    let el = this
+    if (!el) return null
+    do {
+      // Use our "patched" matches function
+      if (matches(el, sel)) {
+        return el
+      }
+      el = el.parentElement || (el.parentNode as any)
+    } while (el !== null && el.nodeType === Node.ELEMENT_NODE)
+    return null
+  }
+
+// Finds closest element matching selector. Returns `null` if not found
+export const closest = (selector: string, root: Element, includeRoot = false) => {
+  if (!isElement(root)) {
+    return null
+  }
+  const el = closestEl.call(root, selector)
+
+  // Native closest behaviour when `includeRoot` is truthy,
+  // else emulate jQuery closest and return `null` if match is
+  // the passed in root element when `includeRoot` is falsey
+  return includeRoot ? el : el === root ? null : el
+}