@splendidlabz/utils 1.11.2 → 1.11.4

package/CHANGELOG.md

@@ -1,231 +0,0 @@
-# @splendidlabz/utils
-
-## 1.11.2
-
-### Patch Changes
-
-- - Add `updateMasonryLayout` method to `masonry` nodes.
-
-## 1.11.1
-
-### Patch Changes
-
-- Fix auth jwt secret
-
-## 1.11.0
-
-### Minor Changes
-
-- Utils: Add isFunction
-
-## 1.10.7
-
-### Patch Changes
-
-- Allow fileCache to accept absolute urls
-
-## 1.10.6
-
-### Patch Changes
-
-- Bump
-
-## 1.10.5
-
-### Patch Changes
-
-- Fixed `env` in node
-
-## 1.10.4
-
-### Patch Changes
-
-- - Add env to utils/node.
-  - Allow JWT_SECRET to be retrieved from both import.meta.env and process.env
-
-## 1.10.3
-
-### Patch Changes
-
-- Prevent tsup from bundling — allows tree shaking
-
-## 1.10.2
-
-### Patch Changes
-
-- Built
-
-## 1.10.1
-
-### Patch Changes
-
-- Fix circular references and typescript errors
-
-## 1.10.0
-
-### Minor Changes
-
-- 4efacb3: - 6c636877 fix scroll observer
-  - 54effb06 add rlh
-
-## 1.9.1
-
-### Patch Changes
-
-- Replace Markdown with Markdown-it
-
-## 1.9.0
-
-### Minor Changes
-
-- 8f2cb34: - 48406c69 Add JSDocs for events
-  - 304b5310 Utils: Add runCallback
-
-## 1.8.2
-
-### Patch Changes
-
-- - abd0770c Add pipeAsync and composeAsync along with tests
-
-## 1.8.1
-
-### Patch Changes
-
-- Build
-
-## 1.8.0
-
-### Minor Changes
-
-- Several updates
-
-## 1.7.0
-
-### Minor Changes
-
-- 2c149fc: Now supports CJS
-- Many changes! Woo
-
-## 1.6.0
-
-### Minor Changes
-
-- Many many upgrades which I didn't document properly 😅. The details are in Github history, but too many details to talk about now.
-
-## 1.5.1
-
-### Patch Changes
-
-- - Utils: Added getFocusableElements as alias of Focusables
-  - Styles: Adjusted `grid-with-breakout` children classes and CSS properties. Wrote docs for it.
-
-## 1.5.0
-
-### Minor Changes
-
-- 859a2b0: Add utilities for SSE
-- acf9faf: Improve sort function
-- 8b17adc: Ready for next release
-- 5fe7c51: - Just bumping
-  - Fix bug with `mix` erroring when a `null` or `undefined` source is passed to it. `mix` now ignores `null` and `undefined`.
-  - Adds `toDegrees`
-  - Adds `toRadians`
-  - Adds `getCSSValue` and `setCSSValue`. They're aliases for `getCSSVar` and `setCSSVar` but they're more descriptive for standard properties.
-  - Renamed `hasLabel` to `checkForAccessibleName`
-  - Add `getParentElement` to get the parent element of a DOM node. If it encounters an `ASTRO-ISLAND` and `ASTRO-SLOT`, it goes one level up.
-
-### Patch Changes
-
-- df4f2d6: Simplified Markdown — so utils now contain a markdown function
-- Include typescript checks!
-- bb06596: Updates
-
-## 1.5.0-beta.6
-
-### Minor Changes
-
-- Add utilities for SSE
-
-## 1.5.0-beta.5
-
-### Minor Changes
-
-- Ready for next release
-
-## 1.5.0-alpha.4
-
-### Patch Changes
-
-- Updates
-
-## 1.5.0-alpha.3
-
-### Minor Changes
-
-- 5fe7c51: - Just bumping
-  - Fix bug with `mix` erroring when a `null` or `undefined` source is passed to it. `mix` now ignores `null` and `undefined`.
-  - Adds `toDegrees`
-  - Adds `toRadians`
-  - Adds `getCSSValue` and `setCSSValue`. They're aliases for `getCSSVar` and `setCSSVar` but they're more descriptive for standard properties.
-  - Renamed `hasLabel` to `checkForAccessibleName`
-  - Add `getParentElement` to get the parent element of a DOM node. If it encounters an `ASTRO-ISLAND` and `ASTRO-SLOT`, it goes one level up.
-
-## 1.5.0-alpha.2
-
-### Minor Changes
-
-- acf9faf: Improve sort function
-
-## 1.5.0-alpha.1
-
-### Patch Changes
-
-- df4f2d6: Simplified Markdown — so utils now contain a markdown function
-
-## 1.5.0-alpha.0
-
-### Minor Changes
-
-- Just bumping
-
-## 1.4.0
-
-### Minor Changes
-
-- Added a couple of improvements
-
-## 1.3.0
-
-### Minor Changes
-
-- a9128f4: Add Debounce and Throttle functions
-
-## 1.2.0
-
-### Minor Changes
-
-- a9128f4: - Add `uuid` to `utils/node`
-  - Add `uuid` to `utils/dom`
-  - Add `MONTHS` constant to `utils`
-
-### Patch Changes
-
-- a9128f4: - Change `randomString` in `utils/dom` to produce a HTML-usable string
-
-## 1.1.2
-
-### Patch Changes
-
-- Add query params path
-
-## 1.1.1
-
-### Patch Changes
-
-- Fix session store path
-
-## 1.1.0
-
-### Minor Changes
-
-- 2d5789f: New and better cache utility

package/eslint.config.js

@@ -1,2 +0,0 @@
-import config from '@splendidlabz/eslint-config'
-export default config

package/src/dom/accessibility.js

@@ -1,58 +0,0 @@
-// export function stopBodyScroll(element) {
-//   if (!element) element = document.body
-//   const top = document.documentElement.scrollTop
-//   element.style.top = -1 * top + 'px'
-//   element.style.overflow = 'hidden'
-// }
-
-// export function allowBodyScroll() {
-//   const top = parseFloat(document.body.style.top) * -1
-//   document.body.style.top = null
-//   document.body.style.overflow = null
-//   document.documentElement.scrollTop = top
-// }
-
-/**
- * Checks if an element has an accessible name through label or aria-labelledby
- * @param {string} [label] - The label text
- * @param {string} [labelledBy] - The aria-labelledby value
- * @returns {boolean} True if the element has an accessible name
- */
-export function hasAccessibleName(label, labelledBy) {
-  if (label || labelledBy) return true
-  return false
-}
-
-/**
- * Checks if an element has an accessible name and logs a warning/error if it doesn't
- * @param {Object} [options] - Options for checking accessible name
- * @param {string} [options.name] - The name of the element being checked
- * @param {string} [options.ariaLabel] - The aria-label value
- * @param {string} [options.ariaLabelledBy] - The aria-labelledby value
- * @param {'warn'|'error'} [options.severity='warn'] - Severity level for the message
- * @returns {boolean} True if the element has an accessible name
- */
-export function checkForAccessibleName({
-  name,
-  ariaLabel,
-  ariaLabelledBy,
-  severity = 'warn',
-} = {}) {
-  if (ariaLabel || ariaLabelledBy) return true
-
-  const message = `${name} is missing an accessible name. Please provide an accessible name with 'aria-label' or 'aria-labelledby'.`
-  if (severity === 'warn') console.warn(message)
-  if (severity === 'error') console.error(message)
-  return false
-}
-
-/**
- * Checks if an ARIA popup value is valid
- * @param {string} value - The ARIA popup value to check
- * @returns {boolean} True if the value is invalid
- */
-export function isInvalidAriaPopup(value) {
-  const allowedPopoupValues = ['dialog', 'menu', 'listbox', 'grid', 'tree']
-  if (!allowedPopoupValues.includes(value)) return true
-  return false
-}

package/src/dom/actions/index.js

@@ -1,3 +0,0 @@
-export * from './masonry.js'
-export * from './prefer-horizontal-scroll.js'
-export * from './sticky.js'

package/src/dom/actions/masonry.js

@@ -1,43 +0,0 @@
-import { getChildrenElements } from '../get-element.js'
-import { mediaLoaded } from '../media.js'
-import { resizeObserver } from '../observers/resize-observer.js'
-
-export async function masonry(node) {
-  if (nativeMasonrySupport(node)) return
-
-  const colGap = parseFloat(getComputedStyle(node).columnGap)
-  const items = getChildrenElements(node)
-
-  node.style.setProperty('row-gap', '1px', 'important')
-  node.style.gridAutoRows = '0px'
-  node.updateMasonryLayout = _ => layout({ colGap, items })
-
-  try {
-    await mediaLoaded(node)
-  } catch (e) {}
-
-  layout({ colGap, items })
-
-  const obs = resizeObserver(node, {
-    async callback(opts) {
-      layout({ colGap, items })
-    },
-  })
-
-  async function layout({ colGap, items }) {
-    items.forEach(item => {
-      const ib = item.getBoundingClientRect()
-      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap)}`
-    })
-  }
-
-  return {
-    destroy() {
-      obs.disconnect()
-    },
-  }
-}
-
-function nativeMasonrySupport(node) {
-  return getComputedStyle(node).gridTemplateRows === 'masonry'
-}

package/src/dom/actions/prefer-horizontal-scroll.js

@@ -1,121 +0,0 @@
-import { omitEmpty } from '../../lib/objects/omit-empty.js'
-import { getCSSVar, setCSSVar } from '../css-vars.js'
-import { addListeners, removeListeners } from '../events.js'
-
-const DEFAULT_OPTIONS = {
-  scrollSnapDelay: 1000,
-}
-
-export function preferHorizontalScroll(node, props = {}) {
-  if (!node.classList.contains('scrollable-prefer-horizontal')) return
-
-  const state = {
-    origSnapType: null,
-    currentSnapType: null,
-    snapTimeoutID: null,
-  }
-
-  const options = {
-    ...DEFAULT_OPTIONS,
-    ...omitEmpty({
-      scrollSnapDelay: getCSSVar(node, '--scroll-snap-delay'),
-    }),
-    ...omitEmpty(props),
-  }
-
-  const listeners = [
-    {
-      event: 'wheel',
-      node,
-      handler: handleWheel,
-    },
-
-    {
-      event: 'pointerenter',
-      node,
-      handler: handlePointerEnter,
-    },
-
-    {
-      event: 'pointerleave',
-      node,
-      handler: handlePointerLeave,
-    },
-  ]
-
-  addListeners(listeners)
-
-  function handleWheel(event) {
-    const direction = event.deltaY > 0 ? 'down' : 'up'
-    const updatedDelta = event.deltaY
-
-    // Only handle mouse wheel
-    // Trackpad users can scroll horizontally themselves
-    if (isTrackpad(event)) return false
-
-    setCSSVar(node, '--snap-type', 'none')
-
-    const scrolledAmount = node.scrollLeft
-    const scrollWidth = node.scrollWidth
-    const clientWidth = node.clientWidth
-    const scrollableAmount = scrollWidth - clientWidth // Maximum scrollable width to the right
-
-    // Hijack downwards scroll
-    if (direction === 'down' && scrolledAmount < scrollableAmount) {
-      node.scrollLeft += updatedDelta
-      event.preventDefault()
-    }
-
-    // Hijack upwards scroll
-    if (direction === 'up' && scrolledAmount > 0) {
-      node.scrollLeft += updatedDelta
-      event.preventDefault()
-    }
-
-    // Restore snap type after a delay
-    const { snapTimeoutID } = state
-    if (snapTimeoutID) clearTimeout(snapTimeoutID)
-    state.snapTimeoutID = setTimeout(_ => {
-      restoreHijackedState(node, state)
-    }, options.scrollSnapDelay)
-  }
-
-  function handlePointerEnter(event) {
-    state.origSnapType = getCSSVar(node, '--snap-type') || 'proximity'
-  }
-
-  function handlePointerLeave(event) {
-    restoreHijackedState(node, state)
-  }
-
-  return {
-    destroy() {
-      removeListeners(listeners)
-    },
-  }
-}
-
-function restoreHijackedState(node, state) {
-  const scrollLeft = node.scrollLeft
-
-  // Get the final scroll position
-  setCSSVar(node, '--snap-type', state.origSnapType)
-  const finalScrollLeft = node.scrollLeft
-
-  // Scroll back to original position before replacing snap
-  setCSSVar(node, '--snap-type', 'none')
-  node.scrollTo({ left: scrollLeft, behavior: 'instant' })
-
-  // Scroll back to the final position smoothly
-  node.scrollTo({ left: finalScrollLeft, behavior: 'smooth' })
-
-  setTimeout(_ => {
-    setCSSVar(node, '--snap-type', state.origSnapType)
-  }, 250)
-}
-
-// https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript/62415754#62415754
-function isTrackpad(event) {
-  // if (event.deltaMode === 0) return true // Deltamode no longer works in Chrome
-  if (event.wheelDeltaY === event.deltaY * -3) return true
-}

package/src/dom/actions/sticky.js

@@ -1,85 +0,0 @@
-import { boundingBoxRelativeToAncestor } from '../bounding-box.js'
-import { resizeObserver } from '../observers/resize-observer.js'
-import { findScrollContainer } from '../ui/scroll-container.js'
-
-export function sticky(node, props = {}) {
-  const scrollContainer = findScrollContainer(node)
-  let stickyTBLR = getComputedTBLR(node)
-
-  const obs = resizeObserver(node, {
-    callback: ({ entry }) => {
-      stickyTBLR = getComputedTBLR(node)
-      isSticking()
-
-      // Arguably, one can use a single container to check for all Sticky elements, but that is unnecessarily complicated to code. This adds more listeners to the scroll containers (assuming many), but it shouldn't be have enough listeners to break performance in any way.
-      scrollContainer === document.documentElement
-        ? window.addEventListener('scroll', scrollEventListener)
-        : scrollContainer.addEventListener('scroll', scrollEventListener)
-    },
-  })
-
-  function scrollEventListener(event) {
-    isSticking()
-  }
-
-  function isSticking() {
-    const { top, bottom, left, right } = stickyTBLR
-    const relativeRect = boundingBoxRelativeToAncestor({
-      element: node,
-      ancestorElement: scrollContainer,
-    })
-
-    // Sticky Top
-    if (!isNaN(top)) {
-      if (relativeRect.top - top <= 1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Bottom
-    if (!isNaN(bottom)) {
-      if (relativeRect.bottom + bottom >= -1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Left
-    if (!isNaN(left)) {
-      if (relativeRect.left - left <= 1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Right
-    if (!isNaN(right)) {
-      if (relativeRect.right + right >= -1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-  }
-
-  return {
-    destroy() {
-      obs.disconnect()
-      scrollContainer.removeEventListener('scroll', scrollEventListener)
-    },
-  }
-}
-
-function getComputedTBLR(element) {
-  const style = getComputedStyle(element)
-  return {
-    top: parseFloat(style.top),
-    bottom: parseFloat(style.bottom),
-    left: parseFloat(style.left),
-    right: parseFloat(style.right),
-  }
-}

package/src/dom/bounding-box.js

@@ -1,82 +0,0 @@
-/**
- * Advanced boundingClientRect that contains information vertical and horizontal centers.
- * @param {HTMLElement} element - The element to get the bounding box for
- * @param {Object} [options] - Options for the bounding box calculation
- * @param {boolean} [options.containsPadding=true] - Whether to include padding in the calculations
- * @returns {Object} The bounding box object with additional center coordinates
- * @property {number} x - The x coordinate
- * @property {number} y - The y coordinate
- * @property {number} width - The width
- * @property {number} height - The height
- * @property {number} top - The top coordinate
- * @property {number} right - The right coordinate
- * @property {number} bottom - The bottom coordinate
- * @property {number} left - The left coordinate
- * @property {number} xCenter - The horizontal center coordinate
- * @property {number} yCenter - The vertical center coordinate
- */
-export function boundingBox(element, { containsPadding = true } = {}) {
-  const box = element.getBoundingClientRect()
-
-  // Spread original properties into the return object
-  const ret = {}
-  for (const prop in box) ret[prop] = box[prop]
-
-  // Gets boundingClientRect value without padding
-  if (!containsPadding) {
-    const style = getComputedStyle(element)
-    // Parse padding values immediately to numbers
-    const paddingTop = parseFloat(style.paddingTop)
-    const paddingRight = parseFloat(style.paddingRight)
-    const paddingBottom = parseFloat(style.paddingBottom)
-    const paddingLeft = parseFloat(style.paddingLeft)
-
-    ret.x = ret.x + paddingLeft
-    ret.y = ret.y + paddingTop
-    ret.width = ret.width - paddingLeft - paddingRight
-    ret.height = ret.height - paddingTop - paddingBottom
-    ret.top = ret.top + paddingTop
-    ret.bottom = ret.bottom - paddingBottom
-    ret.right = ret.right - paddingRight
-    ret.left = ret.left + paddingLeft
-  }
-
-  ret.xCenter = (ret.left + ret.right) / 2
-  ret.yCenter = (ret.top + ret.bottom) / 2
-  return ret
-}
-
-/**
- * Gets the bounding box of an element relative to its ancestor
- * @param {Object} params - Parameters for the calculation
- * @param {HTMLElement} params.element - The element to get the bounding box for
- * @param {HTMLElement} [params.ancestorElement] - The ancestor element to calculate position relative to. Defaults to parent element
- * @returns {Object} The relative bounding box with center coordinates
- * @property {number} top - Distance from ancestor's top
- * @property {number} right - Distance from ancestor's right
- * @property {number} bottom - Distance from ancestor's bottom
- * @property {number} left - Distance from ancestor's left
- * @property {number} width - The width
- * @property {number} height - The height
- * @property {number} xCenter - The horizontal center coordinate relative to ancestor
- * @property {number} yCenter - The vertical center coordinate relative to ancestor
- */
-export function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
-  ancestorElement = ancestorElement || element.parentElement
-
-  const box = boundingBox(element)
-  const ancestorBox = boundingBox(ancestorElement, {
-    containsPadding: false,
-  })
-
-  return {
-    top: box.top - ancestorBox.top,
-    right: box.right - ancestorBox.right,
-    bottom: box.bottom - ancestorBox.bottom,
-    left: box.left - ancestorBox.left,
-    width: box.width,
-    height: box.height,
-    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
-    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top,
-  }
-}

package/src/dom/clipboard.js

@@ -1,14 +0,0 @@
-/**
- * Copies rich text from an element to the clipboard
- * @param HTMLElement element - Element to copy
- */
-export function copyRichText(element) {
-  const range = document.createRange()
-  range.selectNode(element)
-
-  const selection = window.getSelection()
-  selection.removeAllRanges()
-  selection.addRange(range)
-  document.execCommand('copy')
-  selection.removeAllRanges()
-}

package/src/dom/cookie.js

@@ -1,32 +0,0 @@
-export const cookies = {
-  get(name) {
-    return getCookie(name)
-  },
-
-  set(name, value, days) {
-    setCookie(name, value, days)
-  },
-}
-
-export function getCookie(name) {
-  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'))
-  if (!match) return null
-  const decoded = decodeURIComponent(match[2])
-
-  try {
-    return JSON.parse(decoded)
-  } catch (e) {
-    return decoded
-  }
-}
-
-// By Copilot. Needs testing before confirmation.
-function setCookie(name, value, days) {
-  let expires = ''
-  if (days) {
-    const date = new Date()
-    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
-    expires = '; expires=' + date.toUTCString()
-  }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
-}

package/src/dom/css-vars.js

@@ -1,19 +0,0 @@
-import { getElement } from './get-element.js'
-
-export function getCSSValue(element, prop) {
-  return getCSSVar(element, prop)
-}
-
-export function setCSSValue(element, prop, value) {
-  setCSSVar(element, prop, value)
-}
-
-export function getCSSVar(element, prop) {
-  element = getElement(element)
-  return getComputedStyle(element).getPropertyValue(prop)
-}
-
-export function setCSSVar(element, prop, value) {
-  element = getElement(element)
-  element.style.setProperty(prop, value)
-}