@alikhalilll/ui 1.2.3 → 1.2.4

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>