@alikhalilll/ui 1.2.3 → 1.2.4

package/entries/drawer/components/ADrawer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { DrawerRoot, type DrawerRootEmits, type DrawerRootProps } from 'vaul-vue';
+import { useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+});
+const emits = defineEmits<DrawerRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot data-slot="drawer" v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>

package/entries/drawer/components/ADrawerContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DrawerContent, DrawerPortal } from 'vaul-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/utils';
+import ADrawerOverlay from './ADrawerOverlay.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <ADrawerOverlay />
+    <DrawerContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] shadow-2xl shadow-black/30 outline-none',
+          props.class
+        )
+      "
+    >
+      <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

package/entries/drawer/components/ADrawerOverlay.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DrawerOverlay } from 'vaul-vue';
+import type { DialogOverlayProps } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardProps } from 'reka-ui';
+import { cn } from '@/utils';
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/70',
+        props.class
+      )
+    "
+  />
+</template>

package/entries/drawer/components/ADrawerTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DrawerTrigger, type DrawerTriggerProps } from 'vaul-vue';
+import { useForwardProps } from 'reka-ui';
+
+const props = defineProps<DrawerTriggerProps>();
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <DrawerTrigger data-slot="drawer-trigger" v-bind="forwarded">
+    <slot />
+  </DrawerTrigger>
+</template>

package/entries/drawer/index.ts

@@ -0,0 +1,4 @@
+export { default as ADrawer } from './components/ADrawer.vue';
+export { default as ADrawerTrigger } from './components/ADrawerTrigger.vue';
+export { default as ADrawerContent } from './components/ADrawerContent.vue';
+export { default as ADrawerOverlay } from './components/ADrawerOverlay.vue';

package/entries/input/components/AInput.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, useSlots } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/utils';
+import { controlHeight, controlPaddingX, controlTextSize, DEFAULT_SIZE, type Size } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+    /** Classes for the inner &lt;input&gt; element (useful when prefix/suffix are present). */
+    inputClass?: HTMLAttributes['class'];
+    /** Classes for the prefix wrapper. */
+    prefixClass?: HTMLAttributes['class'];
+    /** Classes for the suffix wrapper. */
+    suffixClass?: HTMLAttributes['class'];
+    size?: Size;
+  }>(),
+  { size: DEFAULT_SIZE }
+);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void;
+}>();
+
+defineSlots<{
+  /** Content rendered inside the input's border, left of the field. */
+  prefix?: () => unknown;
+  /** Content rendered inside the input's border, right of the field. */
+  suffix?: () => unknown;
+}>();
+
+const slots = useSlots();
+const hasPrefix = computed(() => !!slots.prefix);
+const hasSuffix = computed(() => !!slots.suffix);
+const hasAdornment = computed(() => hasPrefix.value || hasSuffix.value);
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+
+const sizeHeight = computed(() => controlHeight[props.size]);
+const sizePaddingX = computed(() => controlPaddingX[props.size]);
+const sizeText = computed(() => controlTextSize[props.size]);
+</script>
+
+<template>
+  <!--
+    When prefix or suffix slots are filled we render a wrapper that owns the border,
+    background and focus ring — so the visible "input" is the whole bar, not just the
+    native element. Otherwise we render the plain native input directly so consumers
+    can use AInput as a drop-in for <input>.
+  -->
+  <div
+    v-if="hasAdornment"
+    :data-size="props.size"
+    :class="
+      cn(
+        'border-input bg-background ring-offset-background focus-within:ring-ring inline-flex w-full items-center rounded-md border shadow-sm transition-colors focus-within:ring-1',
+        sizeHeight,
+        sizePaddingX,
+        sizeText,
+        props.class
+      )
+    "
+  >
+    <span
+      v-if="hasPrefix"
+      :class="cn('text-muted-foreground flex shrink-0 items-center pr-2', props.prefixClass)"
+    >
+      <slot name="prefix" />
+    </span>
+
+    <input
+      v-model="modelValue"
+      data-slot="input"
+      :class="
+        cn(
+          'placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          props.inputClass
+        )
+      "
+    />
+
+    <span
+      v-if="hasSuffix"
+      :class="cn('text-muted-foreground flex shrink-0 items-center pl-2', props.suffixClass)"
+    >
+      <slot name="suffix" />
+    </span>
+  </div>
+
+  <input
+    v-else
+    v-model="modelValue"
+    data-slot="input"
+    :data-size="props.size"
+    :class="
+      cn(
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        sizeHeight,
+        sizePaddingX,
+        sizeText,
+        props.class
+      )
+    "
+  />
+</template>

package/entries/input/index.ts

@@ -0,0 +1 @@
+export { default as AInput } from './components/AInput.vue';

package/entries/popover/components/APopover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+/**
+ * Defaults `modal` to `true` so the popover locks page scroll, traps focus, and an overlay
+ * (rendered by APopoverContent when `overlay` is set) actually dims the page.
+ * Pass `:modal="false"` for tooltip-style non-modal popovers.
+ */
+const props = withDefaults(defineProps<PopoverRootProps>(), { modal: true });
+const emits = defineEmits<PopoverRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

package/entries/popover/components/APopoverContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/utils';
+import APopoverOverlay from './APopoverOverlay.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<
+    PopoverContentProps & {
+      class?: HTMLAttributes['class'];
+      /** Dim the entire viewport behind the popover and block all interaction with the
+       *  page (clicks are captured by the overlay). Pair with `<APopover :modal="true">`
+       *  (the default) for the full modal behaviour. */
+      overlay?: boolean;
+      overlayClass?: HTMLAttributes['class'];
+      /**
+       * When true, the overlay also locks page scroll via `body { overflow: hidden }`.
+       * Off by default — `AResponsivePopover` opts in to this when `scrollLock="body"`.
+       */
+      overlayLockScroll?: boolean;
+    }
+  >(),
+  { align: 'center', sideOffset: 4, overlay: false, overlayLockScroll: false }
+);
+const emits = defineEmits<PopoverContentEmits>();
+const delegated = reactiveOmit(props, 'class', 'overlay', 'overlayClass', 'overlayLockScroll');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <!--
+      Overlay is a sibling of PopoverContent inside the same portal. Reka-ui's
+      DismissableLayer treats any pointer-down outside the content as a dismiss,
+      so clicking the overlay closes the popover for free. The overlay component
+      locks body scroll on mount and restores it on unmount.
+    -->
+    <APopoverOverlay
+      v-if="props.overlay"
+      :class="props.overlayClass"
+      :lock-scroll="props.overlayLockScroll"
+    />
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[60] w-72 rounded-md border border-border/70 p-4 shadow-xl shadow-black/15 outline-none',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/entries/popover/components/APopoverOverlay.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { cn } from '@/utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    /**
+     * When true, set `body { overflow: hidden; touchAction: none }` for the lifetime of
+     * the overlay. Off by default because it breaks `position: sticky` on the host page.
+     * Prefer the event-based lock (see `AResponsivePopover`'s `scrollLock` prop) which
+     * keeps the page scrollbar in place.
+     */
+    lockScroll?: boolean;
+  }>(),
+  { lockScroll: false }
+);
+
+let prevBodyOverflow = '';
+let prevBodyTouchAction = '';
+let prevPaddingRight = '';
+
+function getScrollbarWidth() {
+  if (typeof window === 'undefined') return 0;
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+
+onMounted(() => {
+  if (!props.lockScroll) return;
+  if (typeof document === 'undefined') return;
+  const body = document.body;
+  const sbw = getScrollbarWidth();
+  prevBodyOverflow = body.style.overflow;
+  prevBodyTouchAction = body.style.touchAction;
+  prevPaddingRight = body.style.paddingRight;
+  body.style.overflow = 'hidden';
+  body.style.touchAction = 'none';
+  // Compensate for the missing scrollbar so the layout doesn't jump.
+  if (sbw > 0) body.style.paddingRight = `${sbw}px`;
+});
+
+onBeforeUnmount(() => {
+  if (!props.lockScroll) return;
+  if (typeof document === 'undefined') return;
+  const body = document.body;
+  body.style.overflow = prevBodyOverflow;
+  body.style.touchAction = prevBodyTouchAction;
+  body.style.paddingRight = prevPaddingRight;
+});
+</script>
+
+<template>
+  <div
+    data-slot="popover-overlay"
+    aria-hidden="true"
+    :class="
+      cn(
+        // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every
+        // click so it can never reach the page underneath. `z-50` keeps us above any normal
+        // page chrome; the popover content sits at `z-[60]`.
+        'fixed inset-0 z-50 bg-black/70 pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+  />
+</template>

package/entries/popover/components/APopoverTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <PopoverTrigger data-slot="popover-trigger" v-bind="forwarded">
+    <slot />
+  </PopoverTrigger>
+</template>

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>