@hina-ui/vue 1.3.1 → 1.4.0

package/src/components/hover-card/composables/useHoverCardAnchor.ts

@@ -0,0 +1,160 @@
+import { computed, onScopeDispose, shallowRef, watch, type ComponentPublicInstance } from 'vue'
+import { useEventListener, useRafFn } from '@vueuse/core'
+import { injectHoverCardRootContext } from 'reka-ui'
+import { useOverlayPortal } from '../../../lib/overlay-portal'
+import { useOverlayPositionerClass } from '../../../lib/overlay-positioner'
+import { inPointerCorridor } from '../../../lib/pointer-corridor'
+
+interface HoverCardAnchorOptions {
+  anchor?: HTMLElement | null
+  external: boolean
+  closeDelay: number
+  positionerClass?: string
+}
+
+export function useHoverCardAnchor(props: HoverCardAnchorOptions) {
+  const root = injectHoverCardRootContext()
+  const original = { onOpen: root.onOpen, onClose: root.onClose, onDismiss: root.onDismiss }
+  const anchor = computed(() => (props.external ? (props.anchor ?? undefined) : undefined))
+  const { content, present } = useOverlayPortal(root.open)
+  useOverlayPositionerClass(content, () => props.positionerClass)
+  const panel = computed(() =>
+    props.external ? (content.value?.$el as HTMLElement | undefined) : undefined,
+  )
+  const liveAnchor = shallowRef<HTMLElement>()
+  const retained = shallowRef<{
+    getBoundingClientRect: () => DOMRect
+    contextElement: HTMLElement
+  }>()
+  const reference = computed(() =>
+    props.external ? (liveAnchor.value ?? retained.value) : undefined,
+  )
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let tracking = false
+
+  function cancel() {
+    clearTimeout(timer)
+    timer = undefined
+  }
+
+  function dismiss() {
+    cancel()
+    tracking = false
+    root.onOpenChange(false)
+  }
+
+  function close() {
+    if (
+      timer !== undefined ||
+      !root.open.value ||
+      root.hasSelectionRef.value ||
+      root.isPointerDownOnContentRef.value
+    )
+      return
+    timer = setTimeout(dismiss, props.closeDelay)
+  }
+
+  function keep() {
+    tracking = false
+    cancel()
+  }
+
+  function track(event: Event) {
+    const pointer = event as PointerEvent
+    if (!root.open.value || !tracking || pointer.pointerType === 'touch') return
+    const target = pointer.target as Node | null
+    if (target && (anchor.value?.contains(target) || panel.value?.contains(target))) return keep()
+    const a = anchor.value?.getBoundingClientRect()
+    const b = panel.value?.getBoundingClientRect()
+    if (a && b && inPointerCorridor({ x: pointer.clientX, y: pointer.clientY }, a, b)) cancel()
+    else close()
+  }
+
+  function leave(event: Event) {
+    const pointer = event as PointerEvent
+    if (pointer.pointerType === 'touch' || !root.open.value) return
+    tracking = true
+    const a = anchor.value?.getBoundingClientRect()
+    const b = panel.value?.getBoundingClientRect()
+    if (a && b && inPointerCorridor({ x: pointer.clientX, y: pointer.clientY }, a, b)) cancel()
+    else close()
+  }
+
+  function measure() {
+    const element = anchor.value
+    if (!element?.isConnected) {
+      liveAnchor.value = undefined
+      if (root.open.value) dismiss()
+      return
+    }
+    liveAnchor.value = element
+    const rect = element.getBoundingClientRect()
+    const previous = retained.value?.getBoundingClientRect()
+    if (
+      !previous ||
+      retained.value?.contextElement !== element ||
+      rect.x !== previous.x ||
+      rect.y !== previous.y ||
+      rect.width !== previous.width ||
+      rect.height !== previous.height
+    )
+      retained.value = { getBoundingClientRect: () => rect, contextElement: element }
+  }
+
+  const { pause, resume } = useRafFn(measure, { immediate: false })
+  root.onOpen = () => (props.external ? keep() : original.onOpen())
+  root.onClose = () => (props.external ? close() : original.onClose())
+  root.onDismiss = () => (props.external ? dismiss() : original.onDismiss())
+
+  watch(
+    [anchor, root.open, present],
+    ([element, , mounted], previous) => {
+      cancel()
+      tracking = false
+      pause()
+      if (!props.external || !mounted) {
+        liveAnchor.value = undefined
+        return
+      }
+      if (element !== previous?.[0]) {
+        root.hasSelectionRef.value = false
+        root.isPointerDownOnContentRef.value = false
+      }
+      measure()
+      resume()
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  useEventListener(anchor, 'pointerenter', keep)
+  useEventListener(anchor, 'pointerleave', leave)
+  useEventListener(anchor, 'focusin', keep)
+  useEventListener(anchor, 'focusout', event => {
+    const target = (event as FocusEvent).relatedTarget as Node | null
+    if (!target || (!anchor.value?.contains(target) && !panel.value?.contains(target))) close()
+  })
+  useEventListener(panel, 'pointerenter', keep)
+  useEventListener(panel, 'pointerleave', leave)
+  useEventListener(() => anchor.value?.ownerDocument, 'pointermove', track)
+  useEventListener(
+    () => anchor.value?.ownerDocument,
+    'scroll',
+    event => {
+      if (root.open.value && (event.target as Node | null)?.contains(anchor.value ?? null))
+        dismiss()
+    },
+    { capture: true, passive: true },
+  )
+
+  onScopeDispose(() => {
+    cancel()
+    Object.assign(root, original)
+  })
+
+  function contentRef(value: Element | ComponentPublicInstance | null) {
+    content.value = value as ComponentPublicInstance | null
+    if (!value && !root.open.value) retained.value = undefined
+  }
+
+  return { reference, contentRef, present }
+}

package/src/components/image/Image.vue

@@ -25,6 +25,7 @@
       skeleton?: boolean
       eager?: boolean
       preview?: boolean | string
+      previewSize?: LightboxItem['previewSize']
       draggable?: boolean
       class?: string
       style?: StyleValue
@@ -64,6 +65,7 @@
       typeof props.preview === 'string' ? props.preview : (props.src ?? ''),
       'preview',
     ),
+    previewSize: props.previewSize,
     alt: props.alt,
     fit: props.fit,
     source: () => imageEl.value,

package/src/components/image/composables/useImageGroupState.ts

@@ -10,7 +10,15 @@ export function useImageGroupState() {
   function byDom(a: LightboxItem, b: LightboxItem): number {
     const first = a.source?.()
     const second = b.source?.()
-    if (!first || !second || first === second) return 0
+    if (
+      !first ||
+      !second ||
+      first === second ||
+      !('compareDocumentPosition' in first) ||
+      !('compareDocumentPosition' in second)
+    ) {
+      return 0
+    }
     return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
   }
 

package/src/components/image/image.variants.ts

@@ -1,7 +1,7 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
 export const imageRoot = tv({
-  base: 'relative block w-full overflow-hidden',
+  base: 'relative isolate block w-full overflow-hidden',
   variants: {
     preview: {
       true: 'hn-focus-ring cursor-zoom-in',

package/src/components/lightbox/Lightbox.vue

@@ -2,7 +2,6 @@
   import { computed, onMounted, shallowRef, watch } from 'vue'
   import { DialogRoot, DialogPortal, DialogContent, DialogTitle, useBodyScrollLock } from 'reka-ui'
   import { Motion } from 'motion-v'
-  import { useEventListener } from '@vueuse/core'
   import { cn } from '../../lib/cn'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import LightboxStrip from './LightboxStrip.vue'
@@ -17,6 +16,8 @@
   import { useLightboxPhase } from './composables/useLightboxPhase'
   import { useLightboxHint } from './composables/useLightboxHint'
   import { useLightboxSlides } from './composables/useLightboxSlides'
+  import { lightboxStage } from './lightbox.variants'
+  import { useLightboxLayout } from './composables/useLightboxLayout'
   import { useLightboxRotation } from './composables/useLightboxRotation'
   import { clampIndex } from './utils/paging'
   import { saveImage } from './utils/download'
@@ -57,9 +58,10 @@
     loop: () => !!props.loop,
   })
 
-  function measure() {
+  function measure(force = false) {
+    const width = frames.stage.value.width
     frames.measure(stageEl.value)
-    paging.sync()
+    if (force || width !== frames.stage.value.width) paging.sync()
   }
 
   const phase = useLightboxPhase({
@@ -70,9 +72,9 @@
     pose: pose.fromSource,
     prepare: () => {
       rotation.clear()
-      frames.read()
+      return frames.read(() => current.value)
     },
-    layout: measure,
+    layout: () => measure(true),
   })
 
   const close = phase.close
@@ -94,6 +96,16 @@
     () => mounted.value,
   )
 
+  const layout = useLightboxLayout({
+    stage: () => stageEl.value,
+    current: () => current.value,
+    frames,
+    large,
+    phase,
+    zoom,
+    measure,
+  })
+
   const hint = useLightboxHint({ motion, frames, paging, current: () => current.value })
 
   const looping = computed(() => !!props.loop && count.value > 1)
@@ -137,10 +149,6 @@
     if (open.value) void phase.show()
   })
 
-  useEventListener('resize', () => {
-    if (mounted.value) measure()
-  })
-
   function onEscape(event: Event) {
     event.preventDefault()
     void close()
@@ -173,7 +181,7 @@
   const currentClass = computed(() =>
     cn(
       'absolute will-change-transform',
-      !zoom.zoomed.value && 'cursor-zoom-in',
+      !zoom.zoomed.value && (zoom.canToggle.value ? 'cursor-zoom-in' : 'cursor-default'),
       zoom.zoomed.value && (gesture.mode.value === 'pan' ? 'cursor-grabbing' : 'cursor-grab'),
     ),
   )
@@ -191,12 +199,7 @@
         <div
           ref="stageEl"
           :data-hn-phase="phase.current()"
-          :class="
-            cn(
-              'dark fixed inset-0 z-(--hn-z-overlay) touch-none outline-none select-none',
-              props.class,
-            )
-          "
+          :class="cn(lightboxStage(), props.class)"
           @pointerdown="gesture.onPointerdown"
           @pointermove="gesture.onPointermove"
           @pointerup="gesture.onPointerup"
@@ -220,7 +223,7 @@
             :transition="motion.transition('base')"
             :large-src="large.src.value"
             :large-ready="large.ready.value"
-            @learn="frames.learn"
+            @learn="layout.learn"
           />
           <DialogTitle as-child>
             <VisuallyHidden>{{ current?.alt }}</VisuallyHidden>
@@ -229,6 +232,8 @@
             :items="props.items"
             :index="index"
             :zoomed="zoom.zoomed.value"
+            :can-zoom-in="zoom.canZoomIn.value"
+            :at-original="zoom.atOriginal.value"
             :waiting="large.waiting.value"
             :loop="looping"
             :hint="hint"
@@ -239,6 +244,7 @@
             @zoom-in="zoom.step(1)"
             @zoom-out="zoom.step(-1)"
             @reset="zoom.reset()"
+            @original="zoom.original()"
             @rotate="rotate"
             @download="download"
           />

package/src/components/lightbox/LightboxChrome.vue

@@ -16,6 +16,8 @@
     items: LightboxItem[]
     index: number
     zoomed: boolean
+    canZoomIn: boolean
+    atOriginal: boolean
     waiting: boolean
     loop: boolean
     presence: MotionValue<number>
@@ -29,6 +31,7 @@
     zoomIn: []
     zoomOut: []
     reset: []
+    original: []
     rotate: []
     download: []
   }>()
@@ -88,7 +91,7 @@
       <ChevronRight />
     </IconButton>
   </Motion>
-  <Motion class="absolute end-4 top-4" :style="{ opacity: props.presence }">
+  <Motion data-hn-close class="absolute end-4 top-4" :style="{ opacity: props.presence }">
     <DialogClose as-child>
       <CloseButton size="md" />
     </DialogClose>
@@ -102,10 +105,13 @@
       :items="props.items"
       :index="props.index"
       :zoomed="props.zoomed"
+      :can-zoom-in="props.canZoomIn"
+      :at-original="props.atOriginal"
       @select="emit('select', $event)"
       @zoom-in="emit('zoomIn')"
       @zoom-out="emit('zoomOut')"
       @reset="emit('reset')"
+      @original="emit('original')"
       @rotate="emit('rotate')"
       @download="emit('download')"
     />

package/src/components/lightbox/LightboxToolbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Download, RotateCw, Shrink, ZoomIn, ZoomOut } from '@lucide/vue'
+  import { Download, RotateCw, Scan, Shrink, ZoomIn, ZoomOut } from '@lucide/vue'
   import { useUiLocale } from '../../locale'
   import IconButton from '../icon-button/IconButton.vue'
   import LightboxThumbs from './LightboxThumbs.vue'
@@ -11,6 +11,8 @@
     items: LightboxItem[]
     index: number
     zoomed: boolean
+    canZoomIn: boolean
+    atOriginal: boolean
   }>()
 
   const emit = defineEmits<{
@@ -18,6 +20,7 @@
     zoomIn: []
     zoomOut: []
     reset: []
+    original: []
     rotate: []
     download: []
   }>()
@@ -26,7 +29,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-1 pb-3">
+  <div class="flex flex-col items-center gap-1 pb-[max(--spacing(3),env(safe-area-inset-bottom))]">
     <LightboxThumbs
       v-if="props.items.length > 1"
       :items="props.items"
@@ -36,6 +39,7 @@
     <div class="flex items-center gap-1">
       <IconButton
         :label="t.lightbox.zoomOut"
+        :disabled="!props.zoomed"
         variant="soft"
         pill
         class="hidden pointer-fine:inline-flex"
@@ -45,6 +49,7 @@
       </IconButton>
       <IconButton
         :label="t.lightbox.zoomIn"
+        :disabled="!props.canZoomIn"
         variant="soft"
         pill
         class="hidden pointer-fine:inline-flex"
@@ -52,6 +57,15 @@
       >
         <ZoomIn />
       </IconButton>
+      <IconButton
+        :label="t.lightbox.actualSize"
+        variant="soft"
+        pill
+        :disabled="props.atOriginal"
+        @click="emit('original')"
+      >
+        <Scan />
+      </IconButton>
       <IconButton
         :label="t.lightbox.resetZoom"
         variant="soft"

package/src/components/lightbox/composables/useLightboxFrames.ts

@@ -1,38 +1,134 @@
-import { reactive, shallowRef } from 'vue'
+import { onScopeDispose, reactive, shallowRef } from 'vue'
 import type { LightboxItem } from '../types'
 import { fitRect, type Rect } from '../utils/pose'
 import type { Size } from '../utils/zoom'
 
+function previewSizeOf(item: LightboxItem | undefined): Size | undefined {
+  const size = item?.previewSize
+  if (
+    size &&
+    Number.isFinite(size.width) &&
+    size.width > 0 &&
+    Number.isFinite(size.height) &&
+    size.height > 0
+  )
+    return size
+}
+
 export function useLightboxFrames(items: () => LightboxItem[]) {
   const stage = shallowRef<Size>({ width: 0, height: 0 })
-  const naturals = reactive(new Map<string, Size>())
+  const naturals = reactive(new Map<string, Size & { src: string }>())
+  const previews = reactive(new Map<string, Size & { src: string; preview: string }>())
+  const area = shallowRef<Rect>({ x: 0, y: 0, width: 0, height: 0 })
+  let loader: HTMLImageElement | undefined
 
   function measure(el: HTMLElement | undefined) {
-    stage.value = { width: el?.clientWidth ?? 0, height: el?.clientHeight ?? 0 }
+    if (!el) return
+    const width = el.clientWidth
+    const height = el.clientHeight
+    const style = getComputedStyle(el)
+    const rect = el.getBoundingClientRect()
+    const chrome = el.querySelector('[data-hn-chrome]')?.getBoundingClientRect()
+    const close = el.querySelector('[data-hn-close]')?.getBoundingClientRect()
+    const x = Math.min(
+      width / 2,
+      Math.max(parseFloat(style.paddingLeft), parseFloat(style.paddingRight)),
+    )
+    const y = Math.min(
+      height / 2,
+      Math.max(
+        parseFloat(style.paddingTop) + (close ? close.bottom - rect.top : 0),
+        parseFloat(style.paddingBottom) + (chrome ? rect.bottom - chrome.top : 0),
+      ),
+    )
+    stage.value = { width, height }
+    area.value = { x, y, width: width - x * 2, height: height - y * 2 }
   }
 
-  function read() {
+  function read(current?: () => LightboxItem | undefined): Promise<void> | undefined {
+    loader?.removeAttribute('src')
+    loader = undefined
     for (const item of items()) {
       const el = item.source?.()
-      if (el?.naturalWidth && el.naturalHeight) {
-        naturals.set(item.id, { width: el.naturalWidth, height: el.naturalHeight })
+      if (
+        el &&
+        'naturalWidth' in el &&
+        el.naturalWidth &&
+        el.naturalHeight &&
+        !el.srcset &&
+        (el.currentSrc || el.src) === new URL(item.src, el.ownerDocument.baseURI).href
+      ) {
+        naturals.set(item.id, { src: item.src, width: el.naturalWidth, height: el.naturalHeight })
       }
     }
+    const item = current?.()
+    if (!item || previewSizeOf(item) || naturalOf(item)) return
+    const img = new Image()
+    loader = img
+    const { id, src } = item
+    img.src = src
+    return img
+      .decode()
+      .catch(() => {})
+      .then(() => {
+        if (loader !== img) return
+        learn(id, img)
+        loader = undefined
+        const latest = current?.()
+        if (latest?.id !== id || latest?.src !== src) return read(current)
+      })
   }
 
   function learn(id: string, img: HTMLImageElement) {
-    if (naturals.has(id) || !img.naturalWidth || !img.naturalHeight) return
-    naturals.set(id, { width: img.naturalWidth, height: img.naturalHeight })
+    const item = items().find(item => item.id === id)
+    if (
+      !item ||
+      naturalOf(item) ||
+      !img.naturalWidth ||
+      !img.naturalHeight ||
+      img.src !== new URL(item.src, img.ownerDocument.baseURI).href
+    ) {
+      return
+    }
+    naturals.set(id, { src: item.src, width: img.naturalWidth, height: img.naturalHeight })
   }
 
   function naturalOf(item: LightboxItem | undefined): Size | undefined {
-    return item ? naturals.get(item.id) : undefined
+    if (!item) return
+    const natural = naturals.get(item.id)
+    return natural?.src === item.src ? natural : undefined
+  }
+
+  function learnPreview(item: LightboxItem | undefined, img: HTMLImageElement | undefined) {
+    if (!item?.preview || !img?.naturalWidth || !img.naturalHeight) return
+    if (img.src !== new URL(item.preview, img.ownerDocument.baseURI).href) return
+    const previous = previews.get(item.id)
+    if (previous?.src === item.src && previous.preview === item.preview) return
+    previews.set(item.id, {
+      src: item.src,
+      preview: item.preview,
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+    })
+  }
+
+  function displayOf(item: LightboxItem | undefined): Size | undefined {
+    if (!item) return
+    const size = previewSizeOf(item)
+    if (size) return size
+    const preview = previews.get(item.id)
+    return preview?.src === item.src && preview.preview === item.preview ? preview : naturalOf(item)
   }
 
   function frameOf(item: LightboxItem | undefined): Rect {
-    const natural = naturalOf(item)
-    return natural ? fitRect(natural, stage.value) : { x: 0, y: 0, ...stage.value }
+    const natural = displayOf(item)
+    return natural ? fitRect(natural, area.value) : area.value
   }
 
-  return { stage, measure, read, learn, naturalOf, frameOf }
+  onScopeDispose(() => {
+    loader?.removeAttribute('src')
+    loader = undefined
+  })
+
+  return { stage, area, measure, read, learn, learnPreview, naturalOf, displayOf, frameOf }
 }

package/src/components/lightbox/composables/useLightboxLarge.ts

@@ -6,6 +6,7 @@ export const LARGE_HINT_DELAY_MS = 800
 export function useLightboxLarge(item: () => LightboxItem | undefined, active: () => boolean) {
   const src = shallowRef<string>()
   const ready = shallowRef(false)
+  const image = shallowRef<HTMLImageElement>()
   const waiting = shallowRef(false)
   let loader: HTMLImageElement | null = null
   let timer: ReturnType<typeof setTimeout> | null = null
@@ -17,6 +18,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
     timer = null
     src.value = undefined
     ready.value = false
+    image.value = undefined
     waiting.value = false
   }
 
@@ -36,6 +38,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
       if (timer) clearTimeout(timer)
       timer = null
       waiting.value = false
+      image.value = img
       ready.value = true
     }
     const decode = typeof img.decode === 'function' ? img.decode() : Promise.resolve()
@@ -58,5 +61,5 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
 
   onBeforeUnmount(reset)
 
-  return { src, ready, waiting }
+  return { src, ready, waiting, image }
 }

package/src/components/lightbox/composables/useLightboxLayout.ts

@@ -0,0 +1,44 @@
+import { watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import type { LightboxItem } from '../types'
+import type { useLightboxFrames } from './useLightboxFrames'
+import type { useLightboxLarge } from './useLightboxLarge'
+import type { useLightboxPhase } from './useLightboxPhase'
+import type { useLightboxZoom } from './useLightboxZoom'
+
+export function useLightboxLayout(options: {
+  stage: () => HTMLElement | undefined
+  current: () => LightboxItem | undefined
+  frames: ReturnType<typeof useLightboxFrames>
+  large: ReturnType<typeof useLightboxLarge>
+  phase: ReturnType<typeof useLightboxPhase>
+  zoom: ReturnType<typeof useLightboxZoom>
+  measure: () => void
+}) {
+  function sync() {
+    if (options.phase.current() !== 'open') return
+    options.zoom.reflow(() => {
+      options.measure()
+      options.frames.learnPreview(options.current(), options.large.image.value)
+    })
+  }
+
+  function learn(id: string, img: HTMLImageElement) {
+    const update = () => options.frames.learn(id, img)
+    if (options.phase.current() === 'open' && options.current()?.id === id)
+      options.zoom.reflow(update)
+    else update()
+  }
+
+  watch(() => [options.phase.current(), options.current(), options.large.image.value], sync, {
+    flush: 'post',
+  })
+  useResizeObserver(() => {
+    const stage = options.stage()
+    if (!stage) return []
+    const chrome = stage.querySelector<HTMLElement>('[data-hn-chrome]')
+    return chrome ? [stage, chrome] : [stage]
+  }, sync)
+
+  return { learn }
+}