@alikhalilll/a-responsive-popover 1.0.1

package/src/components/AResponsivePopover.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { APopover } from '@alikhalilll/a-popover';
+import { ADrawer } from '@alikhalilll/a-drawer';
+import { provideResponsivePopoverContext } from '../composables/useResponsivePopoverContext';
+import type { AResponsivePopoverProps, AResponsivePopoverSlots } from '../types';
+
+const props = withDefaults(defineProps<AResponsivePopoverProps>(), {
+  breakpoint: '(min-width: 768px)',
+  modal: true,
+  scrollLock: 'events',
+});
+
+defineSlots<AResponsivePopoverSlots>();
+
+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));
+
+/**
+ * Per-branch `modal` resolution — the two roots interpret the prop differently:
+ *
+ *   APopover (desktop, reka-ui): `modal=true` triggers `PopoverContentModal` + its
+ *   `useBodyScrollLock`. We only want that when the caller explicitly opted into the
+ *   body-level scroll lock; for `'events'`/`'none'` we install our own lock in
+ *   `AResponsivePopoverContent`. Legacy `modal=false` still forces non-modal.
+ *
+ *   ADrawer (mobile, vaul-vue): `modal=false` SUPPRESSES THE OVERLAY entirely. Drawers
+ *   are modal by convention (a dimmed backdrop is the affordance), so default to modal
+ *   unless the caller explicitly turned the whole thing off.
+ */
+const rekaModal = computed(() => {
+  if (props.modal === false) return false;
+  return props.scrollLock === 'body';
+});
+const drawerModal = computed(() => props.modal !== false);
+const rootModal = computed(() => (isDesktop.value ? rekaModal.value : drawerModal.value));
+
+provideResponsivePopoverContext({
+  open: computed(() => open.value ?? false),
+  isDesktop: computed(() => isDesktop.value),
+  scrollLock: computed(() => props.scrollLock),
+});
+</script>
+
+<template>
+  <component :is="Root" v-model:open="open" :modal="rootModal" data-slot="responsive-popover">
+    <slot :is-desktop="isDesktop" />
+  </component>
+</template>

package/src/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 '@alikhalilll/a-popover';
+import { ADrawerContent } from '@alikhalilll/a-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/src/components/AResponsivePopoverTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { APopoverTrigger } from '@alikhalilll/a-popover';
+import { ADrawerTrigger } from '@alikhalilll/a-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/src/composables/useResponsivePopoverContext.ts

@@ -0,0 +1,20 @@
+import { inject, provide, type ComputedRef, type InjectionKey } from 'vue';
+import type { ScrollLockMode } from '../types';
+
+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/src/index.ts

@@ -0,0 +1,10 @@
+export { default as AResponsivePopover } from './components/AResponsivePopover.vue';
+export { default as AResponsivePopoverTrigger } from './components/AResponsivePopoverTrigger.vue';
+export { default as AResponsivePopoverContent } from './components/AResponsivePopoverContent.vue';
+
+export type {
+  AResponsivePopoverProps,
+  AResponsivePopoverEmits,
+  AResponsivePopoverSlots,
+  ScrollLockMode,
+} from './types';

package/src/nuxt/index.ts

@@ -0,0 +1,37 @@
+import { defineNuxtModule, addComponent } from '@nuxt/kit';
+import type { NuxtModule } from '@nuxt/schema';
+
+/**
+ * `@alikhalilll/a-responsive-popover/nuxt` — registers the responsive-popover
+ * components for Nuxt auto-import. Also import the a-popover and a-drawer
+ * stylesheets (this component renders them), plus a-ui-base tokens.
+ */
+
+export interface ModuleOptions {
+  prefix?: string;
+}
+
+const COMPONENTS: Record<string, string> = {
+  AResponsivePopover: '@alikhalilll/a-responsive-popover',
+  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',
+  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',
+};
+
+const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@alikhalilll/a-responsive-popover',
+    configKey: 'aResponsivePopover',
+    compatibility: { nuxt: '>=3.0.0' },
+  },
+  defaults: { prefix: '' },
+  setup(opts) {
+    const prefix = opts.prefix ?? '';
+    for (const [exportName, from] of Object.entries(COMPONENTS)) {
+      const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;
+      const registeredName = `${prefix}${prefix ? baseName : exportName}`;
+      addComponent({ name: registeredName, export: exportName, filePath: from });
+    }
+  },
+});
+
+export default module;

package/src/resolver/index.ts

@@ -0,0 +1,29 @@
+import type { ComponentResolver } from 'unplugin-vue-components';
+
+/**
+ * `@alikhalilll/a-responsive-popover/resolver` — auto-import resolver for
+ * non-Nuxt Vite/Webpack consumers via `unplugin-vue-components`.
+ */
+
+export interface ResolverOptions {
+  prefix?: string;
+}
+
+const COMPONENT_TO_ENTRY: Record<string, string> = {
+  AResponsivePopover: '@alikhalilll/a-responsive-popover',
+  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',
+  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',
+};
+
+export default function AResponsivePopoverResolver(opts: ResolverOptions = {}): ComponentResolver {
+  const prefix = opts.prefix ?? '';
+  return {
+    type: 'component',
+    resolve(name) {
+      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+      const from = COMPONENT_TO_ENTRY[bare];
+      if (!from) return;
+      return { name: bare, from };
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,39 @@
+export type ScrollLockMode = 'events' | 'body' | 'none';
+
+export interface AResponsivePopoverProps {
+  /** 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;
+}
+
+/**
+ * Emit map for {@link AResponsivePopover}. `update:open` is the `v-model:open`.
+ */
+export type AResponsivePopoverEmits = {
+  'update:open': [value: boolean | undefined];
+};
+
+/**
+ * Slot prop shape for {@link AResponsivePopover}. The default slot receives
+ * `isDesktop` so consumers can branch content on the active breakpoint without
+ * a separate `useMediaQuery` call.
+ */
+export interface AResponsivePopoverSlots {
+  default?: (props: { isDesktop: boolean }) => unknown;
+}

package/web-types.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@alikhalilll/a-responsive-popover",
+  "version": "1.0.1",
+  "js-types-syntax": "typescript",
+  "description-markup": "markdown",
+  "framework": "vue",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "vue"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "vue-components": [
+        {
+          "name": "AResponsivePopover",
+          "source": {
+            "module": "@alikhalilll/a-responsive-popover",
+            "symbol": "AResponsivePopover"
+          },
+          "props": [
+            {
+              "name": "breakpoint",
+              "type": "string",
+              "required": false,
+              "description": "CSS media query for the desktop break. Below this width we render a vaul drawer."
+            },
+            {
+              "name": "modal",
+              "type": "boolean",
+              "required": false,
+              "deprecated": true
+            },
+            {
+              "name": "scrollLock",
+              "type": "ScrollLockMode",
+              "required": false,
+              "description": "How desktop page scroll is blocked while the popover is open:\n- `'events'` (default) — wheel/touch/keyboard intercepted at document level.\n  Page scrollbar stays visible; `position: sticky` keeps working.\n- `'body'` — legacy `document.body.style.overflow='hidden'` lock. Use when the\n  page must reflow as the scrollbar goes away.\n- `'none'` — no page-scroll lock at all.\n\nDrawer (mobile) branch is unaffected — vaul-vue owns its own lock."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "update:open"
+              }
+            ]
+          }
+        },
+        {
+          "name": "AResponsivePopoverTrigger",
+          "source": {
+            "module": "@alikhalilll/a-responsive-popover",
+            "symbol": "AResponsivePopoverTrigger"
+          }
+        },
+        {
+          "name": "AResponsivePopoverContent",
+          "source": {
+            "module": "@alikhalilll/a-responsive-popover",
+            "symbol": "AResponsivePopoverContent"
+          }
+        }
+      ]
+    }
+  }
+}