@hina-ui/vue 1.2.0 → 1.3.1

package/src/lib/anchored-overlay.ts

@@ -0,0 +1,107 @@
+import { computed, nextTick, shallowRef, watch, type Ref } from 'vue'
+import { useForwardExpose, type DropdownMenuContentEmits } from 'reka-ui'
+
+export function useAnchoredOverlay(
+  props: { anchor?: HTMLElement | null; modal: boolean },
+  open: Ref<boolean | undefined>,
+  emit: <K extends keyof DropdownMenuContentEmits>(
+    event: K,
+    ...args: DropdownMenuContentEmits[K]
+  ) => void,
+  openAutoFocus?: (event: Event) => void,
+) {
+  const { forwardRef: trigger, currentElement: triggerElement } = useForwardExpose()
+  const retainedAnchor = shallowRef<HTMLElement>()
+  const reference = computed(
+    () =>
+      props.anchor ??
+      (open.value
+        ? (triggerElement.value ?? retainedAnchor.value)
+        : (retainedAnchor.value ?? triggerElement.value)),
+  )
+  const visible = computed({
+    get: () => !!open.value && !!(props.anchor || triggerElement.value),
+    set: value => {
+      open.value = value
+    },
+  })
+
+  watch(
+    () => props.anchor,
+    anchor => {
+      if (anchor) retainedAnchor.value = anchor
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  let previousFocus: HTMLElement | null = null
+  let interactedOutside = false
+
+  function once<E extends Event>(handler: (event: E) => void) {
+    const handled = new WeakSet<E>()
+    return (event: E) => {
+      if (handled.has(event)) return
+      handled.add(event)
+      handler(event)
+    }
+  }
+
+  watch(
+    visible,
+    active => {
+      if (!active) return
+      const document = props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument
+      previousFocus = document?.activeElement as HTMLElement | null
+      interactedOutside = false
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  const onCloseAutoFocus = once((event: Event) => {
+    emit('closeAutoFocus', event)
+    const cancelled = event.defaultPrevented
+    event.preventDefault()
+    const panel = event.target as HTMLElement
+    const target = triggerElement.value ?? previousFocus
+    const restore = !cancelled && !interactedOutside
+    nextTick(() => {
+      const active = panel.ownerDocument.activeElement
+      if (
+        restore &&
+        !visible.value &&
+        target?.isConnected &&
+        (active === panel.ownerDocument.body || panel.contains(active))
+      )
+        target.focus({ preventScroll: true })
+      if (!visible.value) retainedAnchor.value = undefined
+    })
+  })
+
+  const onInteractOutside = once((event: DropdownMenuContentEmits['interactOutside'][0]) => {
+    if (!triggerElement.value && props.anchor?.contains(event.target as Node))
+      event.preventDefault()
+    emit('interactOutside', event)
+    const original = event.detail.originalEvent
+    const rightClick =
+      'button' in original && (original.button === 2 || (original.button === 0 && original.ctrlKey))
+    if (!event.defaultPrevented && (!props.modal || rightClick)) interactedOutside = true
+  })
+
+  return {
+    trigger,
+    reference,
+    visible,
+    events: {
+      ...(openAutoFocus ? { onOpenAutoFocus: once(openAutoFocus) } : {}),
+      onCloseAutoFocus,
+      onInteractOutside,
+      onPointerDownOutside: once((event: DropdownMenuContentEmits['pointerDownOutside'][0]) =>
+        emit('pointerDownOutside', event),
+      ),
+      onFocusOutside: once((event: DropdownMenuContentEmits['focusOutside'][0]) =>
+        emit('focusOutside', event),
+      ),
+      onEscapeKeyDown: once((event: KeyboardEvent) => emit('escapeKeyDown', event)),
+    },
+  }
+}

package/src/lib/dialog-focus.ts

@@ -0,0 +1,13 @@
+import { injectDialogRootContext } from 'reka-ui'
+
+export function useDialogCloseFocus(onCloseAutoFocus: (event: Event) => void) {
+  const context = injectDialogRootContext()
+
+  return (event: Event) => {
+    onCloseAutoFocus(event)
+    if (event.defaultPrevented) return
+    event.preventDefault()
+    const target = context.triggerElement.value
+    if (target?.isConnected) target.focus({ preventScroll: true })
+  }
+}

package/src/lib/overlay-portal.ts

@@ -0,0 +1,8 @@
+import { computed, shallowRef, type ComponentPublicInstance, type Ref } from 'vue'
+
+export function useOverlayPortal(open: Ref<boolean | undefined>) {
+  const content = shallowRef<ComponentPublicInstance | null>(null)
+  const present = computed(() => !!open.value || !!content.value)
+
+  return { content, present }
+}

package/src/styles/interaction.css

@@ -266,20 +266,43 @@
 }
 
 @utility hn-skeleton {
-  background-color: var(--hn-bg-subtle);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--hn-skeleton-bg);
   border-radius: var(--hn-radius-md);
   color: transparent;
   cursor: default;
   pointer-events: none;
   user-select: none;
-  animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      rgb(255 255 255 / 0),
+      var(--hn-skeleton-wave),
+      rgb(255 255 255 / 0)
+    );
+    animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+  }
+
+  &:dir(rtl)::after {
+    animation-name: hn-skeleton-rtl;
+  }
 
   & * {
     visibility: hidden;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    animation: none;
+    &::after,
+    &:dir(rtl)::after {
+      animation: none;
+    }
   }
 }
 

package/src/styles/motion.css

@@ -5,8 +5,20 @@
 }
 
 @keyframes hn-skeleton {
-  50% {
-    background-color: var(--hn-bg-inset);
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hn-skeleton-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
   }
 }
 

package/src/styles/semantic.css

@@ -72,6 +72,8 @@
     0 40px 80px -24px rgb(0 0 0 / 0.16);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.1);
+  --hn-skeleton-bg: var(--color-neutral-200);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.4);
 
   --hn-z-overlay: 100;
   --hn-z-toast: 110;
@@ -146,6 +148,8 @@
     0 32px 64px -16px rgb(0 0 0 / 0.55);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.5);
+  --hn-skeleton-bg: rgb(255 255 255 / 0.06);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.04);
 }
 
 :root {
@@ -202,7 +206,7 @@
   --hn-travel-md: 10px;
   --hn-stagger: 24ms;
   --hn-spin-duration: 700ms;
-  --hn-skeleton-duration: 2200ms;
+  --hn-skeleton-duration: 1200ms;
   --hn-ripple-in: 75ms;
   --hn-ripple-out: 375ms;
   --hn-pulse-duration: 1500ms;

package/src/styles/typography.css

@@ -74,14 +74,19 @@
   }
 }
 
+@utility hn-pre-content {
+  padding: 1em 1.25em;
+}
+
 @utility hn-pre {
+  @apply hn-pre-content;
   font-family: var(--hn-font-mono);
   background-color: var(--hn-bg-inset);
   border-radius: var(--hn-radius-lg);
-  padding: 1em 1.25em;
 
   &:focus-visible,
-  &:has(> [data-overlayscrollbars-initialize]:focus-visible) {
+  &:has(> [data-overlayscrollbars-initialize]:focus-visible),
+  &:has(> [data-overlayscrollbars-initialize] > [data-overlayscrollbars-contents]:focus-visible) {
     outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
     outline-offset: var(--hn-focus-ring-offset);
   }
@@ -144,7 +149,7 @@
   & ol,
   & dl,
   & blockquote,
-  & pre,
+  & pre:not(:where(.hn-pre-content)),
   & table,
   & figure {
     margin-block: 0.75em 0;
@@ -228,7 +233,7 @@
     @apply hn-code;
   }
 
-  & pre {
+  & pre:not(:where(.hn-pre-content)) {
     @apply hn-pre;
     overflow-x: auto;
   }