@indielayer/ui 1.16.0 → 1.17.0

package/src/virtual/test-utils/mockResizeObserver.ts

@@ -0,0 +1,162 @@
+import EventEmitter from 'node:events'
+
+type GetDOMRect = (element: HTMLElement) => DOMRectReadOnly | undefined | void;
+
+const emitter = new EventEmitter()
+
+emitter.setMaxListeners(100)
+
+const elementToDOMRect = new Map<HTMLElement, DOMRect>()
+
+let defaultDomRect: DOMRectReadOnly = new DOMRect(0, 0, 0, 0)
+let disabled: boolean = false
+let getDOMRect: GetDOMRect | undefined = undefined
+
+export function disableResizeObserverForCurrentTest() {
+  disabled = true
+}
+
+export function setDefaultElementSize({
+  height,
+  width,
+}: {
+  height: number;
+  width: number;
+}) {
+  defaultDomRect = new DOMRect(0, 0, width, height)
+
+  emitter.emit('change')
+}
+
+export function setElementSizeFunction(value: GetDOMRect) {
+  getDOMRect = value
+
+  emitter.emit('change')
+}
+
+export function setElementSize({
+  element,
+  height,
+  width,
+}: {
+  element: HTMLElement;
+  height: number;
+  width: number;
+}) {
+  elementToDOMRect.set(element, new DOMRect(0, 0, width, height))
+
+  emitter.emit('change', element)
+}
+
+export function simulateUnsupportedEnvironmentForTest() {
+  // @ts-expect-error Simulate API being unsupported
+  window.ResizeObserver = null
+}
+
+export function mockResizeObserver() {
+  disabled = false
+
+  const originalResizeObserver = window.ResizeObserver
+
+  window.ResizeObserver = MockResizeObserver
+
+  return function unmockResizeObserver() {
+    window.ResizeObserver = originalResizeObserver
+
+    defaultDomRect = new DOMRect(0, 0, 0, 0)
+    disabled = false
+    getDOMRect = undefined
+
+    elementToDOMRect.clear()
+  }
+}
+
+class MockResizeObserver implements ResizeObserver {
+  readonly #callback: ResizeObserverCallback
+  #disconnected: boolean = false
+  #elements: Set<HTMLElement> = new Set()
+
+  constructor(callback: ResizeObserverCallback) {
+    this.#callback = callback
+
+    emitter.addListener('change', this.#onChange)
+  }
+
+  observe(element: HTMLElement) {
+    if (this.#disconnected) {
+      return
+    }
+
+    this.#elements.add(element)
+    this.#notify([element])
+  }
+
+  unobserve(element: HTMLElement) {
+    this.#elements.delete(element)
+  }
+
+  disconnect() {
+    this.#disconnected = true
+    this.#elements.clear()
+
+    emitter.removeListener('change', this.#onChange)
+  }
+
+  #notify(elements: HTMLElement[]) {
+    if (disabled) {
+      return
+    }
+
+    const entries = elements.map((element) => {
+      const computedStyle = window.getComputedStyle(element)
+      const writingMode = computedStyle.writingMode
+
+      let contentRect: DOMRectReadOnly =
+        elementToDOMRect.get(element) ?? defaultDomRect
+
+      if (getDOMRect) {
+        const contentRectOverride = getDOMRect(element)
+
+        if (contentRectOverride) {
+          contentRect = contentRectOverride
+        }
+      }
+
+      let blockSize = 0
+      let inlineSize = 0
+
+      if (writingMode.includes('vertical')) {
+        blockSize = contentRect.width
+        inlineSize = contentRect.height
+      } else {
+        blockSize = contentRect.height
+        inlineSize = contentRect.width
+      }
+
+      return {
+        borderBoxSize: [
+          {
+            blockSize,
+            inlineSize,
+          },
+        ],
+        contentBoxSize: [],
+        contentRect,
+        devicePixelContentBoxSize: [],
+        target: element,
+      }
+    })
+
+    this.#callback(entries, this)
+  }
+
+  #onChange = (target?: HTMLElement) => {
+    if (target) {
+      if (this.#elements.has(target)) {
+        this.#notify([target])
+      }
+    } else {
+      this.#notify(Array.from(this.#elements))
+    }
+  }
+}

package/src/virtual/types.ts

@@ -0,0 +1,3 @@
+export type Align = 'auto' | 'center' | 'end' | 'smart' | 'start';
+
+export type TagNames = keyof HTMLElementTagNameMap;

package/src/virtual/utils/adjustScrollOffsetForRtl.ts

@@ -0,0 +1,37 @@
+import type { Direction } from '../core/types'
+import { getRTLOffsetType } from './getRTLOffsetType'
+
+export function adjustScrollOffsetForRtl({
+  containerElement,
+  direction,
+  isRtl,
+  scrollOffset,
+}: {
+  containerElement: HTMLElement | null;
+  direction: Direction;
+  isRtl: boolean;
+  scrollOffset: number;
+}) {
+  // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+  // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+  // So we need to determine which browser behavior we're dealing with, and mimic it.
+  if (direction === 'horizontal') {
+    if (isRtl) {
+      switch (getRTLOffsetType()) {
+        case 'negative': {
+          return -scrollOffset
+        }
+        case 'positive-descending': {
+          if (containerElement) {
+            const { clientWidth, scrollLeft, scrollWidth } = containerElement
+
+            return scrollWidth - clientWidth - scrollLeft
+          }
+          break
+        }
+      }
+    }
+  }
+
+  return scrollOffset
+}

package/src/virtual/utils/areArraysEqual.ts

@@ -0,0 +1,13 @@
+export function areArraysEqual(a: unknown[], b: unknown[]) {
+  if (a.length !== b.length) {
+    return false
+  }
+
+  for (let index = 0; index < a.length; index++) {
+    if (!Object.is(a[index], b[index])) {
+      return false
+    }
+  }
+
+  return true
+}

package/src/virtual/utils/assert.ts

@@ -0,0 +1,10 @@
+export function assert(
+  expectedCondition: unknown,
+  message: string = 'Assertion error',
+): asserts expectedCondition {
+  if (!expectedCondition) {
+    console.error(message)
+
+    throw Error(message)
+  }
+}

package/src/virtual/utils/getRTLOffsetType.ts

@@ -0,0 +1,51 @@
+export type RTLOffsetType =
+  | 'negative'
+  | 'positive-descending'
+  | 'positive-ascending';
+
+let cachedRTLResult: RTLOffsetType | null = null
+
+// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+export function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {
+  if (cachedRTLResult === null || recalculate) {
+    const outerDiv = document.createElement('div')
+    const outerStyle = outerDiv.style
+
+    outerStyle.width = '50px'
+    outerStyle.height = '50px'
+    outerStyle.overflow = 'scroll'
+    outerStyle.direction = 'rtl'
+
+    const innerDiv = document.createElement('div')
+    const innerStyle = innerDiv.style
+
+    innerStyle.width = '100px'
+    innerStyle.height = '100px'
+
+    outerDiv.appendChild(innerDiv)
+
+    document.body.appendChild(outerDiv)
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending'
+    } else {
+      outerDiv.scrollLeft = 1
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative'
+      } else {
+        cachedRTLResult = 'positive-ascending'
+      }
+    }
+
+    document.body.removeChild(outerDiv)
+
+    return cachedRTLResult
+  }
+
+  return cachedRTLResult
+}

package/src/virtual/utils/getScrollbarSize.ts

@@ -0,0 +1,24 @@
+let size: number = -1
+
+export function getScrollbarSize(recalculate: boolean = false): number {
+  if (size === -1 || recalculate) {
+    const div = document.createElement('div')
+    const style = div.style
+
+    style.width = '50px'
+    style.height = '50px'
+    style.overflow = 'scroll'
+
+    document.body.appendChild(div)
+
+    size = div.offsetWidth - div.clientWidth
+
+    document.body.removeChild(div)
+  }
+
+  return size
+}
+
+export function setScrollbarSizeForTests(value: number) {
+  size = value
+}

package/src/virtual/utils/isRtl.ts

@@ -0,0 +1,13 @@
+export function isRtl(element: HTMLElement) {
+  let currentElement: HTMLElement | null = element
+
+  while (currentElement) {
+    if (currentElement.dir) {
+      return currentElement.dir === 'rtl'
+    }
+
+    currentElement = currentElement.parentElement
+  }
+
+  return false
+}

package/src/virtual/utils/parseNumericStyleValue.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'vue'
+
+export function parseNumericStyleValue(
+  value: CSSProperties['height'],
+): number | undefined {
+  if (value !== undefined) {
+    switch (typeof value) {
+      case 'number': {
+        return value
+      }
+      case 'string': {
+        if (value.endsWith('px')) {
+          return parseFloat(value)
+        }
+        break
+      }
+    }
+  }
+}

package/src/virtual/utils/shallowCompare.ts

@@ -0,0 +1,29 @@
+import { assert } from './assert'
+
+export function shallowCompare<Type extends object>(
+  a: Type | undefined,
+  b: Type | undefined,
+) {
+  if (a === b) {
+    return true
+  }
+
+  if (!!a !== !!b) {
+    return false
+  }
+
+  assert(a !== undefined)
+  assert(b !== undefined)
+
+  if (Object.keys(a).length !== Object.keys(b).length) {
+    return false
+  }
+
+  for (const key in a) {
+    if (!Object.is(b[key], a[key])) {
+      return false
+    }
+  }
+
+  return true
+}

package/volar.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     XFormGroup: typeof import('@indielayer/ui')['XFormGroup']
     XIcon: typeof import('@indielayer/ui')['XIcon']
     XImage: typeof import('@indielayer/ui')['XImage']
+    XInfiniteLoader: typeof import('@indielayer/ui')['XInfiniteLoader']
     XInput: typeof import('@indielayer/ui')['XInput']
     XInputFooter: typeof import('@indielayer/ui')['XInputFooter']
     XLabel: typeof import('@indielayer/ui')['XLabel']
@@ -58,6 +59,8 @@ declare module 'vue' {
     XToggleTip: typeof import('@indielayer/ui')['XToggleTip']
     XTooltip: typeof import('@indielayer/ui')['XTooltip']
     XUpload: typeof import('@indielayer/ui')['XUpload']
+    XVirtualGrid: typeof import('@indielayer/ui')['XVirtualGrid']
+    XVirtualList: typeof import('@indielayer/ui')['XVirtualList']
   }
 }