@alikhalilll/ui 1.2.2 → 1.2.4

package/entries/popover/composables/useEventScrollLock.ts

@@ -0,0 +1,193 @@
+import { onBeforeUnmount, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue';
+
+export interface UseEventScrollLockOptions {
+  /**
+   * Element(s) inside the popover whose internal scroll should be preserved.
+   * Events whose target is inside one of these are allowed to scroll the
+   * element (subject to boundary clamping); everything else is preventDefault'd.
+   */
+  allowedScrollContainer: MaybeRefOrGetter<HTMLElement | HTMLElement[] | null | undefined>;
+  /** Lock activates when this becomes true and tears down when false. */
+  active: Ref<boolean> | (() => boolean);
+}
+
+// Module-level so multiple popovers stacking share one listener set.
+let refCount = 0;
+const allowedContainers = new Set<HTMLElement>();
+
+const SCROLL_KEYS = new Set([
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'PageUp',
+  'PageDown',
+  'Home',
+  'End',
+  'Space',
+  ' ',
+]);
+
+function insideAllowed(target: EventTarget | null): boolean {
+  if (!(target instanceof Node)) return false;
+  for (const el of allowedContainers) if (el.contains(target)) return true;
+  return false;
+}
+
+// Walk up from the event target; if any ancestor (up to and including the
+// allowed container) is a scroller that can absorb the delta in this direction
+// without overshooting its boundary, allow the event.
+function canConsume(el: HTMLElement, dx: number, dy: number): boolean {
+  let node: HTMLElement | null = el;
+  while (node) {
+    const s = getComputedStyle(node);
+    const scrollsY =
+      (s.overflowY === 'auto' || s.overflowY === 'scroll') && node.scrollHeight > node.clientHeight;
+    if (scrollsY && dy !== 0) {
+      const atTop = node.scrollTop <= 0;
+      const atBottom = node.scrollTop + node.clientHeight >= node.scrollHeight - 1;
+      if (!(dy < 0 && atTop) && !(dy > 0 && atBottom)) return true;
+    }
+    const scrollsX =
+      (s.overflowX === 'auto' || s.overflowX === 'scroll') && node.scrollWidth > node.clientWidth;
+    if (scrollsX && dx !== 0) {
+      const atLeft = node.scrollLeft <= 0;
+      const atRight = node.scrollLeft + node.clientWidth >= node.scrollWidth - 1;
+      if (!(dx < 0 && atLeft) && !(dx > 0 && atRight)) return true;
+    }
+    if (allowedContainers.has(node)) break;
+    node = node.parentElement;
+  }
+  return false;
+}
+
+function onWheel(e: WheelEvent) {
+  const t = (e.composedPath()[0] ?? e.target) as HTMLElement | null;
+  if (!t || !insideAllowed(t)) {
+    e.preventDefault();
+    return;
+  }
+  if (!canConsume(t, e.deltaX, e.deltaY)) e.preventDefault();
+}
+
+let touchStartY = 0;
+let touchStartX = 0;
+function onTouchStart(e: TouchEvent) {
+  if (e.touches.length === 1) {
+    touchStartY = e.touches[0]!.clientY;
+    touchStartX = e.touches[0]!.clientX;
+  }
+}
+function onTouchMove(e: TouchEvent) {
+  const t = (e.composedPath()[0] ?? e.target) as HTMLElement | null;
+  if (!t || !insideAllowed(t)) {
+    e.preventDefault();
+    return;
+  }
+  if (e.touches.length !== 1) {
+    e.preventDefault();
+    return;
+  }
+  const dy = touchStartY - e.touches[0]!.clientY;
+  const dx = touchStartX - e.touches[0]!.clientX;
+  if (!canConsume(t, dx, dy)) e.preventDefault();
+}
+
+function onKeyDown(e: KeyboardEvent) {
+  if (!SCROLL_KEYS.has(e.key)) return;
+  // Popover owns its own keyboard model (search input, list navigation).
+  if (insideAllowed(e.target)) return;
+  e.preventDefault();
+}
+
+function activate() {
+  if (refCount === 0) {
+    document.addEventListener('wheel', onWheel, {
+      passive: false,
+      capture: true,
+    });
+    document.addEventListener('touchstart', onTouchStart, {
+      passive: true,
+      capture: true,
+    });
+    document.addEventListener('touchmove', onTouchMove, {
+      passive: false,
+      capture: true,
+    });
+    document.addEventListener('keydown', onKeyDown, { capture: true });
+  }
+  refCount++;
+}
+
+function deactivate() {
+  refCount = Math.max(0, refCount - 1);
+  if (refCount === 0) {
+    document.removeEventListener('wheel', onWheel, { capture: true });
+    document.removeEventListener('touchstart', onTouchStart, { capture: true });
+    document.removeEventListener('touchmove', onTouchMove, { capture: true });
+    document.removeEventListener('keydown', onKeyDown, { capture: true });
+  }
+}
+
+/**
+ * Sticky-safe scroll lock: prevents page scroll by intercepting wheel/touch/key
+ * events at `document` capture phase, instead of mutating `body { overflow }`.
+ * The page scrollbar stays visible and `position: sticky` keeps working.
+ *
+ * Pass the element(s) whose own scroll should still work (e.g. a popover's
+ * inner search list) as `allowedScrollContainer`.
+ */
+export function useEventScrollLock(opts: UseEventScrollLockOptions): void {
+  if (typeof document === 'undefined') return;
+
+  let registered: HTMLElement[] = [];
+  let activeNow = false;
+
+  const register = () => {
+    const raw = toValue(opts.allowedScrollContainer);
+    const list = Array.isArray(raw) ? (raw.filter(Boolean) as HTMLElement[]) : raw ? [raw] : [];
+    for (const el of list) allowedContainers.add(el);
+    registered = list;
+  };
+  const unregister = () => {
+    for (const el of registered) allowedContainers.delete(el);
+    registered = [];
+  };
+
+  const stopActive = watch(
+    () => (typeof opts.active === 'function' ? opts.active() : opts.active.value),
+    (v) => {
+      if (v && !activeNow) {
+        register();
+        activate();
+        activeNow = true;
+      } else if (!v && activeNow) {
+        deactivate();
+        unregister();
+        activeNow = false;
+      }
+    },
+    { immediate: true, flush: 'post' }
+  );
+
+  const stopContainer = watch(
+    () => toValue(opts.allowedScrollContainer),
+    () => {
+      if (activeNow) {
+        unregister();
+        register();
+      }
+    },
+    { flush: 'post' }
+  );
+
+  onBeforeUnmount(() => {
+    stopActive();
+    stopContainer();
+    if (activeNow) {
+      deactivate();
+      unregister();
+      activeNow = false;
+    }
+  });
+}

package/entries/popover/index.ts

@@ -0,0 +1,8 @@
+export { default as APopover } from './components/APopover.vue';
+export { default as APopoverTrigger } from './components/APopoverTrigger.vue';
+export { default as APopoverContent } from './components/APopoverContent.vue';
+export { default as APopoverOverlay } from './components/APopoverOverlay.vue';
+export {
+  useEventScrollLock,
+  type UseEventScrollLockOptions,
+} from './composables/useEventScrollLock';

package/entries/responsive-popover/components/AResponsivePopover.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { APopover } from '@/entries/popover';
+import { ADrawer } from '@/entries/drawer';
+import { provideResponsivePopoverContext } from '../composables/useResponsivePopoverContext';
+
+export type ScrollLockMode = 'events' | 'body' | 'none';
+
+const props = withDefaults(
+  defineProps<{
+    /** CSS media query for the desktop break. Below this width we render a vaul drawer. */
+    breakpoint?: string;
+    /**
+     * @deprecated prefer `scrollLock`. Kept for back-compat: `modal=false` is a shorthand
+     * for `scrollLock="none"` (tooltip-style popover). `modal=true` (default) defers to
+     * `scrollLock`, which controls how page scroll is blocked.
+     */
+    modal?: boolean;
+    /**
+     * How desktop page scroll is blocked while the popover is open:
+     * - `'events'` (default) — wheel/touch/keyboard intercepted at document level.
+     *   Page scrollbar stays visible; `position: sticky` keeps working.
+     * - `'body'` — legacy `document.body.style.overflow='hidden'` lock. Use when the
+     *   page must reflow as the scrollbar goes away.
+     * - `'none'` — no page-scroll lock at all.
+     *
+     * Drawer (mobile) branch is unaffected — vaul-vue owns its own lock.
+     */
+    scrollLock?: ScrollLockMode;
+  }>(),
+  { breakpoint: '(min-width: 768px)', modal: true, scrollLock: 'events' }
+);
+
+const open = defineModel<boolean>('open');
+
+const isDesktop = useMediaQuery(() => props.breakpoint);
+
+/**
+ * Pre-imported on both branches — do NOT lazy-load. Switching the component identity at runtime
+ * means we still hydrate the right tree client-side.
+ */
+const Root = computed(() => (isDesktop.value ? APopover : ADrawer));
+
+/**
+ * Only `scrollLock='body'` triggers reka-ui's `PopoverContentModal` (and its
+ * `useBodyScrollLock`). For `'events'` we install our own document-level event lock in
+ * `AResponsivePopoverContent`. For `'none'` nothing locks. Legacy `modal=false` still
+ * forces non-modal regardless of `scrollLock`.
+ */
+const rekaModal = computed(() => {
+  if (props.modal === false) return false;
+  return props.scrollLock === 'body';
+});
+
+provideResponsivePopoverContext({
+  open: computed(() => open.value ?? false),
+  isDesktop: computed(() => isDesktop.value),
+  scrollLock: computed(() => props.scrollLock),
+});
+</script>
+
+<template>
+  <component :is="Root" v-model:open="open" :modal="rekaModal" data-slot="responsive-popover">
+    <slot :is-desktop="isDesktop" />
+  </component>
+</template>

package/entries/responsive-popover/components/AResponsivePopoverContent.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { APopoverContent, useEventScrollLock } from '@/entries/popover';
+import { ADrawerContent } from '@/entries/drawer';
+import { useResponsivePopoverContext } from '../composables/useResponsivePopoverContext';
+
+const props = withDefaults(
+  defineProps<{
+    breakpoint?: string;
+    /** Classes applied on both branches. Avoid width / inset classes here. */
+    class?: HTMLAttributes['class'];
+    /** Classes applied only when the popover (desktop) branch is rendered. */
+    popoverClass?: HTMLAttributes['class'];
+    /** Classes applied only when the drawer (mobile) branch is rendered. */
+    drawerClass?: HTMLAttributes['class'];
+    /**
+     * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers
+     * on desktop are non-modal-looking by convention. The mobile drawer always has its own
+     * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.
+     */
+    overlay?: boolean;
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+  }>(),
+  {
+    breakpoint: '(min-width: 768px)',
+    align: 'start',
+    sideOffset: 4,
+    overlay: false,
+  }
+);
+
+const ctx = useResponsivePopoverContext();
+
+// Prefer the root's media query (so both layers agree). Fall back to a local one when this
+// component is used outside `AResponsivePopover` (unusual but supported).
+const fallbackIsDesktop = useMediaQuery(() => props.breakpoint);
+const isDesktop = computed(() => ctx?.isDesktop.value ?? fallbackIsDesktop.value);
+
+const scrollLockMode = computed(() => ctx?.scrollLock.value ?? 'events');
+const overlayLockScroll = computed(() => scrollLockMode.value === 'body');
+
+const mergedClass = computed(() => [
+  props.class,
+  isDesktop.value ? props.popoverClass : props.drawerClass,
+]);
+
+// Sticky-safe scroll lock — only active while the popover is open on desktop and the root
+// asked for the event-based strategy. The getter resolves every responsive popover content
+// element currently in the DOM, which lets stacked popovers share the lock cleanly.
+useEventScrollLock({
+  allowedScrollContainer: () => {
+    if (typeof document === 'undefined') return [];
+    return Array.from(
+      document.querySelectorAll<HTMLElement>('[data-responsive-popover-scroll-container="true"]')
+    );
+  },
+  active: computed(() => !!ctx?.open.value && isDesktop.value && scrollLockMode.value === 'events'),
+});
+</script>
+
+<template>
+  <APopoverContent
+    v-if="isDesktop"
+    :overlay="props.overlay"
+    :overlay-lock-scroll="overlayLockScroll"
+    :align="props.align"
+    :side-offset="props.sideOffset"
+    :class="mergedClass"
+    data-slot="responsive-popover-content"
+    data-responsive-popover-scroll-container="true"
+  >
+    <slot />
+  </APopoverContent>
+  <ADrawerContent v-else :class="mergedClass" data-slot="responsive-popover-content">
+    <slot />
+  </ADrawerContent>
+</template>

package/entries/responsive-popover/components/AResponsivePopoverTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { APopoverTrigger } from '@/entries/popover';
+import { ADrawerTrigger } from '@/entries/drawer';
+
+const props = withDefaults(
+  defineProps<{
+    breakpoint?: string;
+    asChild?: boolean;
+  }>(),
+  { breakpoint: '(min-width: 768px)' }
+);
+
+const isDesktop = useMediaQuery(() => props.breakpoint);
+const Trigger = computed(() => (isDesktop.value ? APopoverTrigger : ADrawerTrigger));
+</script>
+
+<template>
+  <component :is="Trigger" :as-child="props.asChild" data-slot="responsive-popover-trigger">
+    <slot />
+  </component>
+</template>

package/entries/responsive-popover/composables/useResponsivePopoverContext.ts

@@ -0,0 +1,20 @@
+import { inject, provide, type ComputedRef, type InjectionKey } from 'vue';
+import type { ScrollLockMode } from '../components/AResponsivePopover.vue';
+
+export interface ResponsivePopoverContext {
+  open: ComputedRef<boolean>;
+  isDesktop: ComputedRef<boolean>;
+  scrollLock: ComputedRef<ScrollLockMode>;
+}
+
+const RESPONSIVE_POPOVER_CONTEXT: InjectionKey<ResponsivePopoverContext> = Symbol(
+  'AResponsivePopoverContext'
+);
+
+export function provideResponsivePopoverContext(ctx: ResponsivePopoverContext) {
+  provide(RESPONSIVE_POPOVER_CONTEXT, ctx);
+}
+
+export function useResponsivePopoverContext(): ResponsivePopoverContext | null {
+  return inject(RESPONSIVE_POPOVER_CONTEXT, null);
+}

package/entries/responsive-popover/index.ts

@@ -0,0 +1,3 @@
+export { default as AResponsivePopover } from './components/AResponsivePopover.vue';
+export { default as AResponsivePopoverTrigger } from './components/AResponsivePopoverTrigger.vue';
+export { default as AResponsivePopoverContent } from './components/AResponsivePopoverContent.vue';

package/entries/tell-input/components/ACountryFlag.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { cn } from '@/utils';
+import { defaultFlagUrl, type FlagUrlBuilder } from '../utils/flag-url';
+
+const props = withDefaults(
+  defineProps<{
+    /** ISO 3166-1 alpha-2 country code, case-insensitive. */
+    iso2: string;
+    /** Pixel width served by flagcdn. 40 is crisp at retina up to ~24px wide. */
+    width?: number;
+    /** Optional explicit URL override. When set, `iso2` / `width` / `flagUrl` are ignored. */
+    src?: string | null;
+    /** Function `(iso2, width) => string` — fully replace the URL builder. */
+    flagUrl?: FlagUrlBuilder;
+    alt?: string;
+    class?: HTMLAttributes['class'];
+  }>(),
+  { width: 40 }
+);
+
+const url = computed(() => {
+  if (props.src) return props.src;
+  if (!props.iso2) return null;
+  return (props.flagUrl ?? defaultFlagUrl)(props.iso2, props.width);
+});
+
+// Image load failure → fall back to the ISO2 text badge. The flag URL can change as the
+// user switches country, so reset the error flag whenever the URL changes.
+const failed = ref(false);
+watch(url, () => {
+  failed.value = false;
+});
+
+const iso2Label = computed(() => (props.iso2 ?? '').slice(0, 2).toUpperCase());
+</script>
+
+<template>
+  <img
+    v-if="url && !failed"
+    :src="url"
+    :alt="props.alt ?? `${props.iso2} flag`"
+    loading="lazy"
+    data-slot="country-flag"
+    :class="cn('ring-border/40 inline-block h-4 w-6 rounded-sm object-cover ring-1', props.class)"
+    @error="failed = true"
+  />
+  <span
+    v-else-if="iso2Label"
+    data-slot="country-flag-fallback"
+    :aria-label="props.alt ?? `${props.iso2} flag`"
+    :class="
+      cn(
+        'ring-border/40 bg-muted text-muted-foreground inline-flex h-4 w-6 items-center justify-center rounded-sm text-[8px] font-semibold leading-none tracking-tight ring-1',
+        props.class
+      )
+    "
+  >
+    {{ iso2Label }}
+  </span>
+  <slot v-else name="empty">
+    <span
+      data-slot="country-flag-empty"
+      :class="cn('bg-muted inline-block h-4 w-6 rounded-sm', props.class)"
+    />
+  </slot>
+</template>