@hina-ui/vue 1.7.5 → 1.7.6

package/src/components/ripple/useRipple.ts

@@ -1,22 +1,5 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
-import { prefersReducedMotion } from '../../motion'
-
-const INITIAL_ORIGIN_SCALE = 0.2
-const PADDING = 12
-const SOFT_EDGE_MINIMUM_SIZE = 75
-const SOFT_EDGE_CONTAINER_RATIO = 0.35
-const GROW_MS = 150
-const MINIMUM_PRESS_MS = 225
-const TOUCH_DELAY_MS = 150
-
-const STATE = {
-  inactive: 0,
-  touchDelay: 1,
-  holding: 2,
-  waitingForClick: 3,
-} as const
-
-type RippleState = (typeof STATE)[keyof typeof STATE]
+import { createRipple } from '../../../../shared/src/behavior/ripple'
 
 export function useRipple(
   container: Ref<HTMLElement | null>,
@@ -24,188 +7,17 @@ export function useRipple(
   isDisabled: () => boolean,
 ) {
   const pressed = ref(false)
-
-  let host: HTMLElement | null = null
-  let state: RippleState = STATE.inactive
-  let startEvent: PointerEvent | undefined
-  let checkBoundsAfterContextMenu = false
-  let growAnimation: Animation | undefined
-  let initialSize = 0
-  let rippleScale = ''
-  let rippleSize = ''
-
-  const isTouch = ({ pointerType }: PointerEvent) => pointerType === 'touch'
-
-  function shouldReact(event: PointerEvent) {
-    if (isDisabled() || !event.isPrimary) return false
-    if (startEvent && startEvent.pointerId !== event.pointerId) return false
-    if (event.type === 'pointerenter' || event.type === 'pointerleave') return !isTouch(event)
-    return isTouch(event) || event.buttons === 1
-  }
-
-  function inBounds({ x, y }: PointerEvent) {
-    const rect = container.value?.getBoundingClientRect()
-    if (!rect) return false
-    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-  }
-
-  function determineRippleSize() {
-    const rect = container.value?.getBoundingClientRect()
-    if (!rect) return
-    const maxDim = Math.max(rect.height, rect.width)
-    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)
-    initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
-    const maxRadius = Math.hypot(rect.width, rect.height) + PADDING
-    rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
-    rippleSize = `${initialSize}px`
-  }
-
-  function normalizedCoords(event: PointerEvent) {
-    const rect = container.value?.getBoundingClientRect()
-    if (!rect) return { x: 0, y: 0 }
-    return {
-      x: event.pageX - (window.scrollX + rect.left),
-      y: event.pageY - (window.scrollY + rect.top),
-    }
-  }
-
-  function translationCoords(positionEvent?: PointerEvent) {
-    const rect = container.value?.getBoundingClientRect()
-    if (!rect) return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } }
-    const endPoint = {
-      x: (rect.width - initialSize) / 2,
-      y: (rect.height - initialSize) / 2,
-    }
-    return {
-      startPoint: positionEvent ? normalizedCoords(positionEvent) : endPoint,
-      endPoint,
-    }
-  }
-
-  function startPress(positionEvent?: PointerEvent) {
-    const el = surface.value
-    if (!el) return
-    pressed.value = true
-    growAnimation?.cancel()
-    growAnimation = undefined
-    determineRippleSize()
-    const { startPoint, endPoint } = translationCoords(positionEvent)
-    if (typeof el.animate !== 'function') return
-    if (prefersReducedMotion()) return
-    growAnimation = el.animate(
-      {
-        height: [rippleSize, rippleSize],
-        width: [rippleSize, rippleSize],
-        transform: [
-          `translate(${startPoint.x}px,${startPoint.y}px) scale(1)`,
-          `translate(${endPoint.x}px,${endPoint.y}px) scale(${rippleScale})`,
-        ],
-      },
-      {
-        pseudoElement: '::after',
-        duration: GROW_MS,
-        easing: 'linear',
-        fill: 'forwards',
-      },
-    )
-    growAnimation.finished.catch(() => {})
-  }
-
-  function endPress() {
-    startEvent = undefined
-    state = STATE.inactive
-    const animation = growAnimation
-    let playedMs = Infinity
-    if (typeof animation?.currentTime === 'number') playedMs = animation.currentTime
-    else if (animation?.currentTime) playedMs = animation.currentTime.to('ms').value
-    if (playedMs >= MINIMUM_PRESS_MS) {
-      pressed.value = false
-      return
-    }
-    window.setTimeout(() => {
-      if (growAnimation !== animation) return
-      pressed.value = false
-    }, MINIMUM_PRESS_MS - playedMs)
-  }
-
-  function onPointerDown(event: PointerEvent) {
-    if (!shouldReact(event)) return
-    startEvent = event
-    if (!isTouch(event)) {
-      state = STATE.waitingForClick
-      startPress(event)
-      return
-    }
-    if (checkBoundsAfterContextMenu && !inBounds(event)) return
-    checkBoundsAfterContextMenu = false
-    state = STATE.touchDelay
-    window.setTimeout(() => {
-      if (state !== STATE.touchDelay) return
-      state = STATE.holding
-      startPress(event)
-    }, TOUCH_DELAY_MS)
-  }
-
-  function onPointerUp(event: PointerEvent) {
-    if (!shouldReact(event)) return
-    if (state === STATE.holding) {
-      state = STATE.waitingForClick
-      return
-    }
-    if (state === STATE.touchDelay) {
-      state = STATE.waitingForClick
-      startPress(startEvent)
-    }
-  }
-
-  function onPointerLeave(event: PointerEvent) {
-    if (!shouldReact(event)) return
-    if (state !== STATE.inactive) endPress()
-  }
-
-  function onPointerCancel(event: PointerEvent) {
-    if (!shouldReact(event)) return
-    endPress()
-  }
-
-  function onClick() {
-    if (isDisabled()) return
-    if (state === STATE.waitingForClick) {
-      endPress()
-      return
-    }
-    if (state === STATE.inactive) {
-      startPress()
-      endPress()
-    }
-  }
-
-  function onContextMenu() {
-    if (isDisabled()) return
-    checkBoundsAfterContextMenu = true
-    endPress()
-  }
-
-  const listeners: [string, EventListener][] = [
-    ['click', onClick as EventListener],
-    ['contextmenu', onContextMenu as EventListener],
-    ['pointercancel', onPointerCancel as EventListener],
-    ['pointerdown', onPointerDown as EventListener],
-    ['pointerleave', onPointerLeave as EventListener],
-    ['pointerup', onPointerUp as EventListener],
-  ]
-
-  onMounted(() => {
-    host = container.value?.parentElement ?? null
-    if (!host) return
-    for (const [name, fn] of listeners) host.addEventListener(name, fn, true)
+  const ripple = createRipple({
+    container: () => container.value,
+    surface: () => surface.value,
+    disabled: isDisabled,
+    onPressedChange: value => {
+      pressed.value = value
+    },
   })
 
-  onBeforeUnmount(() => {
-    if (!host) return
-    for (const [name, fn] of listeners) host.removeEventListener(name, fn, true)
-    host = null
-  })
+  onMounted(ripple.connect)
+  onBeforeUnmount(ripple.disconnect)
 
   return { pressed }
 }

package/src/components/scroll-area/ScrollArea.vue

@@ -7,6 +7,7 @@
   import { useWheelRedirect } from './composables/useWheelRedirect'
   import { useLayerLock } from './composables/useLayerLock'
   import { useScrollFocus } from './composables/useScrollFocus'
+  import { scrollAreaOptions } from '../../../../shared/src/lib/scroll-area'
 
   defineOptions({ name: 'HnScrollArea', inheritAttrs: false })
 
@@ -36,25 +37,12 @@
   const host = shallowRef<HTMLElement>()
   const content = shallowRef<HTMLElement>()
 
-  const overflow = {
-    vertical: { x: 'hidden', y: 'scroll' },
-    horizontal: { x: 'scroll', y: 'hidden' },
-    both: { x: 'scroll', y: 'scroll' },
-  } as const
-
   function options() {
-    return {
-      scrollbars: {
-        theme: 'os-theme-dark',
-        visibility: props.scrollbar ? ('auto' as const) : ('hidden' as const),
-        autoHide: props.autoHide,
-        autoHideDelay: 800,
-      },
-      overflow: overflow[props.direction],
-      update: {
-        elementEvents: [['img', 'load']] as Array<[string, string]>,
-      },
-    }
+    return scrollAreaOptions({
+      direction: props.direction,
+      autoHide: props.autoHide,
+      scrollbar: props.scrollbar,
+    })
   }
 
   const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options)

package/src/components/scroll-area/composables/useEdgeShadow.ts

@@ -1,8 +1,9 @@
 import { shallowRef, type ShallowRef } from 'vue'
+import { scrollEdges, type ScrollDirection } from '../../../../../shared/src/lib/scroll-area'
 
 export function useEdgeShadow(
   viewport: ShallowRef<HTMLElement | undefined>,
-  opts: () => { direction: 'vertical' | 'horizontal' | 'both'; shadow: boolean },
+  opts: () => { direction: ScrollDirection; shadow: boolean },
 ) {
   const showXStart = shallowRef(false)
   const showXEnd = shallowRef(false)
@@ -10,22 +11,12 @@ export function useEdgeShadow(
   const showYEnd = shallowRef(false)
 
   function updateEdges() {
-    const el = viewport.value
     const { direction, shadow } = opts()
-    if (!el || !shadow) {
-      showXStart.value = false
-      showXEnd.value = false
-      showYStart.value = false
-      showYEnd.value = false
-      return
-    }
-    const room = 1
-    const x = direction !== 'vertical'
-    const y = direction !== 'horizontal'
-    showXStart.value = x && Math.abs(el.scrollLeft) > room
-    showXEnd.value = x && Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - room
-    showYStart.value = y && el.scrollTop > room
-    showYEnd.value = y && el.scrollTop + el.clientHeight < el.scrollHeight - room
+    const edges = scrollEdges(viewport.value, direction, shadow)
+    showXStart.value = edges.xStart
+    showXEnd.value = edges.xEnd
+    showYStart.value = edges.yStart
+    showYEnd.value = edges.yEnd
   }
 
   return { showXStart, showXEnd, showYStart, showYEnd, updateEdges }

package/src/components/scroll-area/composables/useLayerLock.ts

@@ -1,5 +1,6 @@
 import { createSharedComposable, useMutationObserver } from '@vueuse/core'
 import { onBeforeUnmount, ref, watch, type ShallowRef } from 'vue'
+import { blockWhenInert } from '../../../../../shared/src/lib/scroll-area'
 
 const useBodyPointerLock = createSharedComposable(() => {
   const locked = ref(false)
@@ -22,15 +23,7 @@ export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
     release = undefined
     const el = viewport.value
     if (!el || !locked.value) return
-    const block = (event: Event) => {
-      if (getComputedStyle(el).pointerEvents === 'none') event.preventDefault()
-    }
-    el.addEventListener('wheel', block, { passive: false, capture: true })
-    el.addEventListener('touchmove', block, { passive: false, capture: true })
-    release = () => {
-      el.removeEventListener('wheel', block, true)
-      el.removeEventListener('touchmove', block, true)
-    }
+    release = blockWhenInert(el)
   }
 
   watch([locked, viewport], apply, { flush: 'post' })

package/src/components/scroll-area/composables/useWheelRedirect.ts

@@ -1,4 +1,5 @@
 import { watch, type ShallowRef } from 'vue'
+import { redirectWheel } from '../../../../../shared/src/lib/scroll-area'
 
 export function useWheelRedirect(
   viewport: ShallowRef<HTMLElement | undefined>,
@@ -8,16 +9,7 @@ export function useWheelRedirect(
     if (event.defaultPrevented || !enabled()) return
     const el = viewport.value
     if (!el) return
-    if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
-    const max = el.scrollWidth - el.clientWidth
-    if (max <= 0) return
-    const sign = getComputedStyle(el).direction === 'rtl' ? -1 : 1
-    const offset = Math.max(0, Math.min(max, el.scrollLeft * sign))
-    const atStart = offset <= 1 && event.deltaY < 0
-    const atEnd = offset >= max - 1 && event.deltaY > 0
-    if (atStart || atEnd) return
-    event.preventDefault()
-    el.scrollLeft = (offset + event.deltaY) * sign
+    redirectWheel(el, event)
   }
 
   watch(

package/src/components/scroll-area/scroll-restore.ts

@@ -1,148 +1 @@
-export const SCROLL_STATE_FIELD = 'hnScroll'
-export const RESTORE_DEADLINE_MS = 3000
-export const SAVE_THROTTLE_MS = 500
-export const SCROLL_RESTORE_ATTR = 'data-scroll-restore'
-export const SCROLL_ATOP_ATTR = 'data-scroll-atop'
-export const SCROLL_AT_ATTR = 'data-scroll-at'
-export const SCROLL_ATOP_HIDE_PX = 8
-
-export function atopOff(top: number, off: boolean) {
-  if (top > SCROLL_ATOP_HIDE_PX) return true
-  if (top <= 0) return false
-  return off
-}
-
-export function firstPaintRestoreScript() {
-  return `(function(){try{if(document.readyState!=="loading")return;
-var r=(history.state&&history.state.${SCROLL_STATE_FIELD})||{};
-var coarse=!!(window.matchMedia&&matchMedia("(pointer: coarse)").matches);
-var cs=
-document.querySelectorAll('[${SCROLL_ATOP_ATTR}]');
-var mark=function(c,t){if(!coarse){c.style.marginTop=-Math.round(Math.max(0,t))+"px";return;}
-if(t>${SCROLL_ATOP_HIDE_PX})c.setAttribute("data-off","true");else if(t<=0)c.setAttribute("data-off","false");};
-for(var i=0;i<cs.length;i++){mark(cs[i],Math.max(0,r[cs[i].getAttribute("${SCROLL_ATOP_ATTR}")]||0));}
-for(var k in r){var t=Math.max(0,r[k]);var e=
-document.querySelector('[${SCROLL_RESTORE_ATTR}="'+k+'"]');if(e){e.scrollTop=t;e.setAttribute("${SCROLL_AT_ATTR}",String(e.scrollTop));}}
-for(var i=0;i<cs.length;i++){(function(c){
-var e=
-document.querySelector('[${SCROLL_RESTORE_ATTR}="'+c.getAttribute("${SCROLL_ATOP_ATTR}")+'"]');
-if(!e)return;
-var sync=function(){if(e.scrollHeight<=e.clientHeight){e.removeEventListener("scroll",sync);return;}mark(c,e.scrollTop);};
-e.addEventListener("scroll",sync,{passive:true});
-})(cs[i]);}
-}catch{}})()`.replace(/\n/g, '')
-}
-
-export type ScrollRecord = Record<string, number>
-
-export interface ScrollRestorerPorts {
-  getViewport: () => HTMLElement | null
-  takeFirstPaintTop: () => number | undefined
-  readState: () => unknown
-  writeState: (state: Record<string, unknown>) => void
-  setTimer: (fn: () => void, ms: number) => () => void
-}
-
-export interface ScrollRestorer {
-  restore: (initial?: boolean) => void
-  settle: () => void
-  abandon: () => void
-  save: () => void
-  saveSoon: () => void
-  dispose: () => void
-  isPending: () => boolean
-}
-
-export function readScrollRecord(state: unknown): ScrollRecord {
-  if (!state || typeof state !== 'object') return {}
-  const record = (state as Record<string, unknown>)[SCROLL_STATE_FIELD]
-  if (!record || typeof record !== 'object') return {}
-  return record as ScrollRecord
-}
-
-export function writeScrollRecord(state: unknown, key: string, top: number) {
-  const base = state && typeof state === 'object' ? (state as Record<string, unknown>) : {}
-  return {
-    ...base,
-    [SCROLL_STATE_FIELD]: { ...readScrollRecord(base), [key]: top },
-  }
-}
-
-function readEntryId(state: unknown) {
-  if (!state || typeof state !== 'object') return undefined
-  return (state as Record<string, unknown>).position
-}
-
-export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): ScrollRestorer {
-  let pending: number | null = null
-  let clearDeadline: (() => void) | null = null
-  let clearThrottle: (() => void) | null = null
-  let entry: unknown
-
-  function stopWaiting() {
-    pending = null
-    clearDeadline?.()
-    clearDeadline = null
-  }
-
-  function apply(top: number) {
-    const el = ports.getViewport()
-    if (!el) return false
-    el.scrollTop = top
-    return el.scrollHeight - el.clientHeight + 1 >= top
-  }
-
-  function save() {
-    if (pending !== null) return
-    if (readEntryId(ports.readState()) !== entry) return
-    const el = ports.getViewport()
-    if (!el) return
-    ports.writeState(writeScrollRecord(ports.readState(), key, el.scrollTop))
-  }
-
-  return {
-    restore(initial) {
-      stopWaiting()
-      entry = readEntryId(ports.readState())
-
-      const saved = readScrollRecord(ports.readState())[key]
-      const firstPaintTop = ports.takeFirstPaintTop()
-
-      if (initial) {
-        if (saved === undefined) return
-        const el = ports.getViewport()
-        if (firstPaintTop !== undefined && el && el.scrollTop !== firstPaintTop) return
-      }
-
-      const top = saved ?? 0
-      if (apply(top)) return
-      pending = top
-      clearDeadline = ports.setTimer(stopWaiting, RESTORE_DEADLINE_MS)
-    },
-
-    settle() {
-      if (pending === null) return
-      if (apply(pending)) stopWaiting()
-    },
-
-    abandon: stopWaiting,
-
-    isPending: () => pending !== null,
-
-    save,
-
-    saveSoon() {
-      if (clearThrottle) return
-      clearThrottle = ports.setTimer(() => {
-        clearThrottle = null
-        save()
-      }, SAVE_THROTTLE_MS)
-    },
-
-    dispose() {
-      stopWaiting()
-      clearThrottle?.()
-      clearThrottle = null
-    },
-  }
-}
+export * from '../../../../shared/src/lib/scroll-restore'

package/src/components/search-input/SearchInput.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { shallowRef } from 'vue'
   import { Search } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import InputBase from '../input/InputBase.vue'
@@ -27,10 +28,15 @@
     model.value = ''
     emit('clear')
   }
+
+  const base = shallowRef<InstanceType<typeof InputBase> | null>(null)
+
+  defineExpose({ clear: () => base.value?.clear(), focus: () => base.value?.focus() })
 </script>
 
 <template>
   <InputBase
+    ref="base"
     type="search"
     enterkeyhint="search"
     v-bind="$attrs"

package/src/components/select/types.ts

@@ -1,23 +1 @@
-export type SelectOption<T extends object = object> = {
-  value: string | number
-  label: string
-  description?: string
-  disabled?: boolean
-} & T
-
-export interface SelectOptionGroup<T extends SelectOption = SelectOption> {
-  label: string
-  options: T[]
-}
-
-export type SelectItems<T extends SelectOption = SelectOption> = Array<T | SelectOptionGroup<T>>
-
-export function isOptionGroup<T extends SelectOption>(
-  item: T | SelectOptionGroup<T>,
-): item is SelectOptionGroup<T> {
-  return !('value' in item) && 'options' in item
-}
-
-export function flattenOptions<T extends SelectOption>(items: SelectItems<T>): T[] {
-  return items.flatMap(item => (isOptionGroup(item) ? item.options : [item]))
-}
+export * from '../../../../shared/src/types/select'

package/src/components/split-button/split-button.variants.ts

@@ -1 +1 @@
-export * from '@hina-ui/shared/variants/split-button'
+export * from '../../../../shared/src/variants/split-button'