@asd20/ui-next 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.2...ui-next-v2.0.3) (2026-03-27)
+
+## [2.0.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.1...ui-next-v2.0.2) (2026-03-27)
+
+
+### Bug Fixes
+
+* replace basicscroll scroll-track runtime ([c0fe361](https://github.com/academydistrict20/asd20-ui-next/commit/c0fe361c301bbf1d132eac7876c5e02cabe4a5b0))
+
 ## [2.0.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.0...ui-next-v2.0.1) (2026-03-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",
@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "axios": "^1.13.6",
-    "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.1.7",

package/src/directives/scroll-track.js

@@ -1,32 +1,190 @@
-import * as basicScroll from 'basicscroll'
+const DEFAULT_VARIABLE_NAME = 'scroll-progress'
 
-function mountScrollTrack(el, { modifiers = {}, expression } = {}) {
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getScrollTop() {
+  const scrollingElement =
+    document.scrollingElement || document.documentElement || document.body
+
+  return scrollingElement ? scrollingElement.scrollTop : 0
+}
+
+function getViewportHeight() {
+  return (
+    window.innerHeight ||
+    window.outerHeight ||
+    document.documentElement?.clientHeight ||
+    1
+  )
+}
+
+function parseAbsoluteValue(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+
+  if (typeof value !== 'string') {
+    return null
+  }
+
+  const parsedValue = Number.parseFloat(value)
+
+  return Number.isFinite(parsedValue) ? parsedValue : null
+}
+
+function resolveKeywordValue(value, el, scrollTop, viewportHeight) {
+  if (!el || typeof value !== 'string') {
+    return null
+  }
+
+  const match = value.match(/^(top|middle|bottom)-(top|middle|bottom)$/)
+
+  if (!match) {
+    return null
+  }
+
+  const [, elementEdge, viewportEdge] = match
+  const rect = el.getBoundingClientRect()
+  let absoluteOffset = scrollTop + rect.top
+
+  if (elementEdge === 'middle') {
+    absoluteOffset += rect.height / 2
+  } else if (elementEdge === 'bottom') {
+    absoluteOffset += rect.height
+  }
+
+  if (viewportEdge === 'middle') {
+    absoluteOffset -= viewportHeight / 2
+  } else if (viewportEdge === 'bottom') {
+    absoluteOffset -= viewportHeight
+  }
+
+  return absoluteOffset
+}
+
+function resolveBoundary(value, el, scrollTop, viewportHeight) {
+  const absoluteValue = parseAbsoluteValue(value)
+
+  if (absoluteValue !== null) {
+    return absoluteValue
+  }
+
+  return resolveKeywordValue(value, el, scrollTop, viewportHeight)
+}
+
+function getBindingConfig(el, { modifiers = {}, expression } = {}) {
+  const viewportHeight = getViewportHeight()
+  const scrollTop = getScrollTop()
+  const from = modifiers.window
+    ? 0
+    : resolveBoundary('middle-top', el, scrollTop, viewportHeight)
+  const to = modifiers.window
+    ? window.outerHeight || viewportHeight
+    : resolveBoundary('middle-bottom', el, scrollTop, viewportHeight)
+
+  return {
+    cssVariable: `--${expression || DEFAULT_VARIABLE_NAME}`,
+    from,
+    to,
+  }
+}
+
+function setProgress(el, cssVariable, progress) {
+  const normalizedProgress = Number.isFinite(progress)
+    ? Math.round(progress * 10000) / 10000
+    : 0
+
+  el.style.setProperty(cssVariable, String(normalizedProgress))
+}
+
+function updateScrollTrack(el) {
+  if (typeof window === 'undefined' || !el.__scrollTrackState) {
+    return
+  }
+
+  const scrollTop = getScrollTop()
+  const { cssVariable, from, to } = getBindingConfig(
+    el,
+    el.__scrollTrackState.binding
+  )
+
+  if (from === null || to === null) {
+    setProgress(el, cssVariable, 0)
+    return
+  }
+
+  if (from === to) {
+    setProgress(el, cssVariable, scrollTop >= to ? 1 : 0)
+    return
+  }
+
+  const progress = clamp((scrollTop - from) / (to - from), 0, 1)
+
+  setProgress(el, cssVariable, progress)
+}
+
+function mountScrollTrack(el, binding = {}) {
   if (typeof window === 'undefined') return
 
-  el.__scroll = basicScroll.create({
-    elem: el,
-    from: modifiers.window ? 0 : 'middle-top',
-    to: modifiers.window ? window.outerHeight : 'middle-bottom',
-    direct: true,
-    props: {
-      [`--${expression || 'scroll-progress'}`]: {
-        from: '0',
-        to: '1',
-      },
+  unmountScrollTrack(el)
+
+  const state = {
+    binding,
+    frameId: null,
+    handleUpdate() {
+      updateScrollTrack(el)
+    },
+    scheduleUpdate() {
+      if (state.frameId !== null) {
+        return
+      }
+
+      state.frameId = window.requestAnimationFrame(() => {
+        state.frameId = null
+        state.handleUpdate()
+      })
     },
-  })
-  el.__scroll.start()
+  }
+
+  el.__scrollTrackState = state
+  updateScrollTrack(el)
+
+  window.addEventListener('scroll', state.scheduleUpdate, { passive: true })
+  window.addEventListener('resize', state.scheduleUpdate)
+}
+
+function updateBinding(el, binding = {}) {
+  if (!el.__scrollTrackState) {
+    mountScrollTrack(el, binding)
+    return
+  }
+
+  el.__scrollTrackState.binding = binding
+  updateScrollTrack(el)
 }
 
 function unmountScrollTrack(el) {
-  if (!el.__scroll) return
-  el.__scroll.stop()
-  delete el.__scroll
+  const state = el.__scrollTrackState
+
+  if (!state || typeof window === 'undefined') return
+
+  window.removeEventListener('scroll', state.scheduleUpdate)
+  window.removeEventListener('resize', state.scheduleUpdate)
+
+  if (state.frameId !== null) {
+    window.cancelAnimationFrame(state.frameId)
+  }
+
+  delete el.__scrollTrackState
 }
 
 export default {
   inserted: mountScrollTrack,
   mounted: mountScrollTrack,
+  update: updateBinding,
+  updated: updateBinding,
   unbind: unmountScrollTrack,
   unmounted: unmountScrollTrack,
 }

package/src/helpers/linkPolicy.js

@@ -50,20 +50,14 @@ export function shouldOpenInNewWindow(href, options) {
   return !isAsd20Hostname(url.hostname, options)
 }
 
-export function resolveCurrentHostname(vm, options) {
+export function resolveCurrentHostname(_vm, options = {}) {
   if (typeof window !== 'undefined' && window.location) {
     return normalizeHostname(window.location.hostname, options)
   }
 
-  const requestHost =
-    vm &&
-    vm.$ssrContext &&
-    vm.$ssrContext.req &&
-    vm.$ssrContext.req.headers &&
-    (vm.$ssrContext.req.headers['x-forwarded-host'] ||
-      vm.$ssrContext.req.headers.host)
-
-  return normalizeHostname(requestHost, options)
+  // Server renders should stay deterministic and avoid reaching through the
+  // component proxy for SSR internals that are not part of the Vue 3 public API.
+  return normalizeHostname(options.currentHostname || '', options)
 }
 
 export function shouldShowExternalIcon(href, currentHostname, options) {

package/src/mixins/inputComponentMixin.js

@@ -1,6 +1,12 @@
 import kebabCase from 'lodash/kebabCase'
+import createComponentInstanceId from '../utils/createComponentInstanceId'
 
 const INPUT_MODEL_LISTENER_KEYS = ['onInput', 'onUpdate:modelValue']
+const DEFAULT_INPUT_COMPONENT_NAME = 'asd20-input'
+
+function resolveKebabComponentName(componentName = DEFAULT_INPUT_COMPONENT_NAME) {
+  return kebabCase(componentName).replace(/-([0-9])/g, '$1')
+}
 
 function omitKeys(source, keys) {
   const target = { ...(source || {}) }
@@ -46,18 +52,23 @@ export default {
     reversed: { type: Boolean, default: false },
     taggable: { type: Boolean, default: true },
   },
-  data: () => ({
-    isDirty: false,
-    isActive: false,
-    validationErrors: [],
-  }),
+  data() {
+    return {
+      isDirty: false,
+      isActive: false,
+      validationErrors: [],
+      generatedInputId: createComponentInstanceId(
+        resolveKebabComponentName(this.$options.name)
+      ),
+    }
+  },
   mounted() {
     this.validate(this.resolvedValue)
   },
 
   computed: {
     kebabComponentName() {
-      return kebabCase(this.$options.name).replace(/-([0-9])/g, '$1')
+      return resolveKebabComponentName(this.$options.name)
     },
     classes() {
       let classes = {}
@@ -92,11 +103,7 @@ export default {
     },
 
     computedId() {
-      return this.$attrs.id
-        ? this.$attrs.id
-        : `${this.kebabComponentName}_${Math.round(
-            Math.random() * 10000000000000000
-          )}`
+      return this.$attrs.id ? this.$attrs.id : this.generatedInputId
     },
 
     selectedItem() {

package/src/utils/createComponentInstanceId.js

@@ -1,6 +1,9 @@
-let nextComponentInstanceId = 0
+import { getCurrentInstance, useId } from 'vue'
 
 export default function createComponentInstanceId(prefix = 'asd20-component') {
-  nextComponentInstanceId += 1
-  return `${prefix}-${nextComponentInstanceId}`
+  if (getCurrentInstance()) {
+    return `${prefix}-${useId()}`
+  }
+
+  return `${prefix}-detached`
 }