npm - @alikhalilll/ui - Versions diffs - 1.1.1 → 1.2.1 - Mend

@alikhalilll/ui 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/tell-input.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ size: ATellInputSize;
 placeholder: string;
 ipEndpoint: string;
 defaultCountry: string;
+showValidationIcon: boolean;
 detectCountry: DetectionStrategy;
 detectFromInput: boolean;
 detectDebounceMs: number;
@@ -49,6 +50,8 @@ emptyText: string;
 loadingText: string;
 suggestedLabel: string;
 allCountriesLabel: string;
+countryLabel: string;
+selectCountryLabel: string;
 suggestedLimit: number;
 maxResults: number;
 kbdOpen: string | null;
@@ -96,6 +99,12 @@ declare type __VLS_Props_2 = {
     /** Override the right-side kbd hints. Pass `null` to hide. */
     kbdOpen?: string | null;
     kbdClose?: string | null;
+    /** BCP-47 locale — country names render localized via `Intl.DisplayNames`. */
+    locale?: string;
+    /** Prefix of the trigger's `aria-label` when a country is selected, e.g. `"Country"`. */
+    countryLabel?: string;
+    /** Trigger's `aria-label` when no country is selected. */
+    selectCountryLabel?: string;
 };
 declare type __VLS_Props_3 = {
@@ -391,19 +400,46 @@ export declare const ACountrySelect: __VLS_WithTemplateSlots_2<typeof __VLS_comp
 export declare const ATellInput: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+/** Text direction for the field. `'auto'` (or omitting the prop) inherits from the
+ *  nearest `[dir]` ancestor / `<html dir>`; `'ltr'` / `'rtl'` force it. */
+export declare type ATellInputDir = 'ltr' | 'rtl' | 'auto';
 export declare interface ATellInputProps {
     class?: HTMLAttributes['class'];
     placeholder?: string;
     disabled?: boolean;
     loading?: boolean;
     size?: ATellInputSize;
+    /**
+     * Text direction. Omit (or pass `'auto'`) to inherit from the page — RTL pages get an
+     * RTL field automatically. Pass `'ltr'` / `'rtl'` to force it.
+     */
+    dir?: ATellInputDir;
+    /**
+     * BCP-47 locale (e.g. `'ar'`, `'fr'`). When set, country names render localized via
+     * `Intl.DisplayNames` and the format hint uses the locale's numerals.
+     */
+    locale?: string;
+    /**
+     * Localized UI strings. A single bag covering the picker, validation errors, and a11y
+     * labels. Individual props (`searchPlaceholder`, `emptyText`, `loadingText`,
+     * `errorMessages`) take precedence over the matching `messages` key when both are set.
+     */
+    messages?: TellInputMessagesInput;
     /**
      * Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.
      * Countries outside this list are still shown in the picker but rendered as disabled.
      */
     allowedDialCodes?: string[];
-    /** Show validation error text beneath the input when invalid. */
+    /** Light up the field's validation styling — coloured border + ring on the input and the
+     *  error message line below — when the number is valid / invalid. Default `false`, so the
+     *  field stays neutral and validation surfacing is left to the consumer (via the
+     *  `validation` ref exposure). */
     showValidation?: boolean;
+    /** Show the green check / red alert icon at the end of the field. Default `false`; opt
+     *  in with `true`. Independent of `showValidation` — you can show the icon without the
+     *  coloured field, or vice versa. The slots `#valid-icon` / `#error-icon` still apply. */
+    showValidationIcon?: boolean;
     /**
      * Country auto-detect strategy. Defaults to `'auto'` — try IP geolocation first, then
      * timezone, then `navigator.language`, finally `defaultCountry`.
@@ -467,6 +503,9 @@ export declare interface CountryOption<T = RestCountry> {
 export declare const DEFAULT_ERROR_MESSAGES: Record<PhoneValidationReason, string>;
+/** English defaults for every {@link TellInputMessages} key. */
+export declare const DEFAULT_MESSAGES: TellInputMessages;
 /**
  * Default flag URL builder — flagcdn.com hosts PNG flags at multiple widths and is
  * generous with caching + no API key required. Swap via the `flagUrl` prop on
@@ -528,6 +567,30 @@ declare interface ExtendedProps extends ATellInputProps {
 export declare type FlagUrlBuilder = (iso2: string, width: number) => string;
+/**
+ * Base code points of contiguous decimal-digit blocks. Each block runs `base`‥`base+9`
+ * for digit `0`‥`9`, so the ASCII digit is `codePoint - base`. Add a script by appending
+ * one entry here.
+ */
+export declare const LOCALE_DIGIT_RANGES: {
+    name: string;
+    base: number;
+}[];
+/**
+ * Return a copy of the country list with display names localized to `locale` via
+ * `Intl.DisplayNames`. `search_key` is rebuilt (keeping the English name too) so search
+ * still matches either spelling. Unknown locales / regions fall back to the English name.
+ */
+export declare function localizeCountries(list: CountryOption[], locale?: string): CountryOption[];
+/**
+ * Replace any supported non-ASCII decimal digit with its ASCII equivalent. Every other
+ * character (spaces, `+`, separators, letters) is left untouched — callers still run their
+ * own `\D` cleanup afterwards.
+ */
+export declare function normalizeDigits(input: string): string;
 export declare interface PhoneRequiredInfo {
     iso2: string;
     dial_code: string;
@@ -560,6 +623,12 @@ export declare interface PhoneValidationResult {
     details?: Record<string, unknown>;
 }
+/**
+ * Merge a partial `messages` override onto the English defaults. Used internally by
+ * `ATellInput` to resolve a complete {@link TellInputMessages} object.
+ */
+export declare function resolveMessages(input?: TellInputMessagesInput): TellInputMessages;
 export declare interface RestCountry {
     name?: {
         common?: string;
@@ -587,6 +656,36 @@ declare function selectCountry(option: CountryOption): void;
  */
 declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Every user-facing string in the tell-input UI, bundled so a consumer can localize the
+ * component in one prop. Each key has an English default in {@link DEFAULT_MESSAGES}.
+ */
+export declare interface TellInputMessages {
+    /** Placeholder of the country-picker search box. */
+    searchPlaceholder: string;
+    /** Shown when a search yields no countries. */
+    emptyText: string;
+    /** Shown while the country list is loading. */
+    loadingText: string;
+    /** Header of the "Suggested" group (current + recent picks). */
+    suggestedLabel: string;
+    /** Header of the full country list. */
+    allCountriesLabel: string;
+    /** Validation error text, keyed by reason. */
+    errorMessages: Record<PhoneValidationReason, string>;
+    /** Prefix of the country trigger's `aria-label`, e.g. `"Country: Egypt"`. */
+    countryLabel: string;
+    /** `aria-label` of the country trigger when no country is selected. */
+    selectCountryLabel: string;
+    /** `aria-label` of the phone input element. */
+    phoneInputLabel: string;
+}
+/** Partial override shape for the `messages` prop — every key (and every error reason) is optional. */
+export declare type TellInputMessagesInput = Partial<Omit<TellInputMessages, 'errorMessages'>> & {
+    errorMessages?: Partial<Record<PhoneValidationReason, string>>;
+};
 /**
  * Reactive wrapper. Kicks off detection in `onMounted` so SSR renders an empty value and the
  * client patches in the real country once resolved.
@@ -616,7 +715,7 @@ export declare interface UsePhoneValidationReturn {
     getRequiredInfo(country: {
         iso2: string;
         dial_code?: string;
-    }): PhoneRequiredInfo | null;
+    }, locale?: string): PhoneRequiredInfo | null;
     validate(input: ValidateArgs): PhoneValidationResult;
 }
@@ -626,12 +725,16 @@ export declare type ValidateArgs = {
         dial_code?: string;
     } | null | undefined;
     phone?: undefined;
+    /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
+    locale?: string;
 } | {
     country: {
         iso2: string;
         dial_code?: string;
     } | null | undefined;
     phone: string | null;
+    /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
+    locale?: string;
 };
 export { }

package/dist/tell-input.mjs CHANGED Viewed

@@ -1,13 +1,18 @@
-import { _ as e, a as s, b as l, D as n, c as u, d as o, e as r, u as A, f as c } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-Clc-B8SW.mjs";
+import { _ as e, a as t, b as l, D as n, c as o, L as r, d as u, e as i, f as A, l as E, n as S, r as C, u as D, g as _ } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs";
 export {
   e as ACountryFlag,
-  s as ACountrySelect,
+  t as ACountrySelect,
   l as ATellInput,
   n as DEFAULT_ERROR_MESSAGES,
+  o as DEFAULT_MESSAGES,
+  r as LOCALE_DIGIT_RANGES,
   u as aTellInputVariants,
-  o as defaultFlagUrl,
-  r as detectCountry,
-  A as useCountryDetection,
-  c as usePhoneValidation
+  i as defaultFlagUrl,
+  A as detectCountry,
+  E as localizeCountries,
+  S as normalizeDigits,
+  C as resolveMessages,
+  D as useCountryDetection,
+  _ as usePhoneValidation
 };
 //# sourceMappingURL=tell-input.mjs.map

package/entries/tell-input/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # `@alikhalilll/ui/tell-input`
-Vue 3 phone-number input with smart country detection (libphonenumber-js + IP/timezone/locale hint), a responsive popover/drawer country picker, and a structured `PhoneValidationResult` exposed via template ref.
+Vue 3 phone-number input with smart country detection (libphonenumber-js + IP/timezone/locale hint), a responsive popover/drawer country picker, and a structured `PhoneValidationResult` exposed via template ref. RTL-aware, localisable, and accepts alternative numeral systems.
 ## Install
@@ -31,13 +31,29 @@ const country = ref<number | null>(null);
 </template>
 ```
-The default shape is a plain phone input with the country picker hidden. As the user types or pastes, detection runs (debounced) against known dial codes; on first match the picker slides in pre-filled and `phone` is normalised to the national significant number — `01066105963` becomes `1066105963`, `+447911123456` becomes `7911123456`.
+The default shape is a plain phone input with the country picker hidden. As the user types or pastes, detection runs (debounced) against known dial codes; on first match a flag-only trigger reveals at the **end** of the field, the dial code shows as a static prefix inside the input, and `phone` is normalised to the national significant number — `01066105963` becomes `1066105963`, `+447911123456` becomes `7911123456`.
+## Internationalization
+- **RTL** — direction inherits from the page (`<div dir="rtl">` / `<html dir="rtl">`), or force it with `dir="ltr"` / `dir="rtl"`. The phone field row stays LTR (dial prefix → digits → flag); only the helper/error text and the country popover follow the page direction.
+- **`locale`** — localises country names (`Intl.DisplayNames`) and the format-hint numerals.
+- **`messages`** — one bag for every UI string (picker labels, validation errors, a11y labels).
+- **Alternative numerals** — digits typed as Arabic-Indic (`٠-٩`), Persian (`۰-۹`), Devanagari, or Bengali are normalised to ASCII. `normalizeDigits` is exported for standalone use.
+```vue
+<template>
+  <div dir="rtl">
+    <ATellInput v-model:phone="phone" v-model:country="country" locale="ar" :messages="ar" />
+  </div>
+</template>
+```
 ## Variants
 - **Picker pre-filled** — pass `default-country="…"` or seed `v-model:country` so the picker renders visible at mount.
 - **Restricted countries** — pass `allowed-dial-codes` (array of dial-digit strings, no `+`). Whitelisted countries surface in the Suggested group at the top; disallowed countries render below as disabled.
 - **Always-visible picker (legacy)** — `:detect-from-input="false"` reverts to the IP/timezone/locale chain auto-filling the picker on mount.
+- **Validation visuals** — both off by default. `:show-validation="true"` lights up the field (coloured border + ring + error text); `:show-validation-icon="true"` adds the trailing green check / red alert icon. They're independent — combine as needed.
 ## Exposed via template ref

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@alikhalilll/ui",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Headless, shadcn-vue style Vue 3 component library — every component is its own importable subpath (`@alikhalilll/ui/tell-input`, `@alikhalilll/ui/popover`, …) so users pay only for what they actually use.",
   "license": "MIT",
   "author": "alikhalilll",

package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs","sources":["../../entries/drawer/components/ADrawer.vue","../../entries/drawer/components/ADrawerTrigger.vue","../../entries/drawer/components/ADrawerOverlay.vue","../../entries/drawer/components/ADrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DrawerRoot, type DrawerRootEmits, type DrawerRootProps } from 'vaul-vue';\nimport { useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n shouldScaleBackground: true,\n});\nconst emits = defineEmits<DrawerRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DrawerRoot data-slot=\"drawer\" v-bind=\"forwarded\">\n <slot />\n </DrawerRoot>\n</template>\n","<script setup lang=\"ts\">\nimport { DrawerTrigger, type DrawerTriggerProps } from 'vaul-vue';\nimport { useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DrawerTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <DrawerTrigger data-slot=\"drawer-trigger\" v-bind=\"forwarded\">\n <slot />\n </DrawerTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerOverlay } from 'vaul-vue';\nimport type { DialogOverlayProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardProps } from 'reka-ui';\nimport { cn } from '@/utils';\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardProps(delegated);\n</script>\n\n<template>\n <DrawerOverlay\n data-slot=\"drawer-overlay\"\n v-bind=\"forwarded\"\n :class=\"\n cn(\n '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/60 backdrop-blur-sm',\n props.class\n )\n \"\n />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerContent, DrawerPortal } from 'vaul-vue';\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@/utils';\nimport ADrawerOverlay from './ADrawerOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();\nconst emits = defineEmits<DialogContentEmits>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n <DrawerPortal>\n <ADrawerOverlay />\n <DrawerContent\n data-slot=\"drawer-content\"\n v-bind=\"{ ...$attrs, ...forwarded }\"\n :class=\"\n cn(\n 'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border outline-none',\n props.class\n )\n \"\n >\n <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n <slot />\n </DrawerContent>\n </DrawerPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_renderSlot","_ctx","useForwardProps","props","delegated","reactiveOmit","cn","emits","DrawerPortal","_createVNode","ADrawerOverlay","DrawerContent","$attrs","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAYC,EAJJC,GAGAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEaC,MAFbC,EAEa,EAFD,aAAU,SAAA,GAAiBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC9C,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACRZ,UAAMT,IAAYU,EADJR,CACyB;sBAIrCE,EAAA,GAAAC,EAEgBC,MAFhBC,EAEgB,EAFD,aAAU,iBAAA,GAAyBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBACzD,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;ACFZ,UAAME,IAAQT,GACRU,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYU,EAAgBE,CAAS;sBAIzCR,EAAA,GAAAC,EASEC,MATFC,EASE,EARA,aAAU,iBAAA,GACFD,EAAAN,CAAA,GAAS;AAAA,MAChB,OAAcM,EAAAQ,CAAA;AAAA;QAA+LH,EAAM;AAAA,MAAA;AAAA;;;;;;;;;;;;;;ACNxN,UAAMA,IAAQT,GACRa,IAAQZ,GACRS,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYC,EAAqBW,GAAWG,CAAK;2BAIrDV,EAeeC,EAAAU,CAAA,GAAA,MAAA;AAAA,iBAdb,MAAkB;AAAA,QAAlBC,EAAkBC,CAAA;AAAA,QAClBD,EAYgBX,EAAAa,CAAA,GAZhBZ,EAYgB,EAXd,aAAU,iBAAA,GAAgB,EAAA,GACba,EAAAA,QAAM,GAAKd,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAQ,CAAA;AAAA;YAAuIH,EAAM;AAAA,UAAA;AAAA;qBAO9J,MAAgE;AAAA,4BAAhEU,EAAgE,OAAA,EAA3D,OAAM,mDAAA,GAAkD,MAAA,EAAA;AAAA,YAC7Db,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs","sources":["../../entries/popover/components/APopover.vue","../../entries/popover/components/APopoverTrigger.vue","../../entries/popover/components/APopoverOverlay.vue","../../entries/popover/components/APopoverContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui';\n\n/**\n * Defaults `modal` to `true` so the popover locks page scroll, traps focus, and an overlay\n * (rendered by APopoverContent when `overlay` is set) actually dims the page.\n * Pass `:modal=\"false\"` for tooltip-style non-modal popovers.\n */\nconst props = withDefaults(defineProps<PopoverRootProps>(), { modal: true });\nconst emits = defineEmits<PopoverRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <PopoverRoot v-slot=\"slotProps\" data-slot=\"popover\" v-bind=\"forwarded\">\n <slot v-bind=\"slotProps\" />\n </PopoverRoot>\n</template>\n","<script setup lang=\"ts\">\nimport type { PopoverTriggerProps } from 'reka-ui';\nimport { PopoverTrigger, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PopoverTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <PopoverTrigger data-slot=\"popover-trigger\" v-bind=\"forwarded\">\n <slot />\n </PopoverTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport { cn } from '@/utils';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>();\n\n// Body-scroll-lock for the lifetime of the overlay. Mounted = lock; unmounted = restore.\n// Because this component is only rendered when `<APopoverContent :overlay=\"true\">` is\n// inside the open popover portal, mount/unmount tracks visibility 1:1.\nlet prevBodyOverflow = '';\nlet prevBodyTouchAction = '';\nlet prevPaddingRight = '';\n\nfunction getScrollbarWidth() {\n if (typeof window === 'undefined') return 0;\n return window.innerWidth - document.documentElement.clientWidth;\n}\n\nonMounted(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n const sbw = getScrollbarWidth();\n prevBodyOverflow = body.style.overflow;\n prevBodyTouchAction = body.style.touchAction;\n prevPaddingRight = body.style.paddingRight;\n body.style.overflow = 'hidden';\n body.style.touchAction = 'none';\n // Compensate for the missing scrollbar so the layout doesn't jump.\n if (sbw > 0) body.style.paddingRight = `${sbw}px`;\n});\n\nonBeforeUnmount(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n body.style.overflow = prevBodyOverflow;\n body.style.touchAction = prevBodyTouchAction;\n body.style.paddingRight = prevPaddingRight;\n});\n</script>\n\n<template>\n <div\n data-slot=\"popover-overlay\"\n aria-hidden=\"true\"\n :class=\"\n cn(\n // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every\n // click so it can never reach the page underneath. `z-50` keeps us above any normal\n // page chrome; the popover content sits at `z-[60]`.\n 'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm 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',\n props.class\n )\n \"\n />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@/utils';\nimport APopoverOverlay from './APopoverOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n defineProps<\n PopoverContentProps & {\n class?: HTMLAttributes['class'];\n /** Dim the entire viewport behind the popover and block all interaction with the\n * page (clicks are captured by the overlay; body scroll is locked while open).\n * Pair with `<APopover :modal=\"true\">` (the default) for the full modal behaviour. */\n overlay?: boolean;\n overlayClass?: HTMLAttributes['class'];\n }\n >(),\n { align: 'center', sideOffset: 4, overlay: false }\n);\nconst emits = defineEmits<PopoverContentEmits>();\nconst delegated = reactiveOmit(props, 'class', 'overlay', 'overlayClass');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n <PopoverPortal>\n \n <APopoverOverlay v-if=\"props.overlay\" :class=\"props.overlayClass\" />\n <PopoverContent\n data-slot=\"popover-content\"\n v-bind=\"{ ...$attrs, ...forwarded }\"\n :class=\"\n cn(\n '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 p-4 shadow-md outline-none',\n props.class\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_withCtx","slotProps","_renderSlot","_ctx","useForwardProps","props","prevBodyOverflow","prevBodyTouchAction","prevPaddingRight","getScrollbarWidth","onMounted","body","sbw","onBeforeUnmount","_createElementBlock","_normalizeClass","cn","emits","delegated","reactiveOmit","PopoverPortal","APopoverOverlay","_createVNode","PopoverContent","$attrs"],"mappings":";;;;;;;;;;;;;AAWA,UAAMA,IAAYC,EAFJC,GACAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEcC,MAFdC,EAEc,EAFkB,aAAU,UAAA,GAAkBD,EAAAN,CAAA,CAAS,GAAA;AAAA,MACnE,SAAAQ,EAAA,CADmBC,MAAS;AAAA,QAC5BC,EAA2BC,yBAAbF,CAAS,CAAA,CAAA;AAAA,MAAA;;;;;;;;;;;ACX3B,UAAMT,IAAYY,EADJV,CACyB;sBAIrCE,EAAA,GAAAC,EAEiBC,MAFjBC,EAEiB,EAFD,aAAU,kBAAA,GAA0BD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC3D,MAAQ;AAAA,QAARU,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACHZ,UAAME,IAAQX;AAKd,QAAIY,IAAmB,IACnBC,IAAsB,IACtBC,IAAmB;AAEvB,aAASC,IAAoB;AAC3B,aAAI,OAAO,SAAW,MAAoB,IACnC,OAAO,aAAa,SAAS,gBAAgB;AAAA,IACtD;AAEA,WAAAC,EAAU,MAAM;AACd,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMC,IAAO,SAAS,MAChBC,IAAMH,EAAA;AACZ,MAAAH,IAAmBK,EAAK,MAAM,UAC9BJ,IAAsBI,EAAK,MAAM,aACjCH,IAAmBG,EAAK,MAAM,cAC9BA,EAAK,MAAM,WAAW,UACtBA,EAAK,MAAM,cAAc,QAErBC,IAAM,MAAGD,EAAK,MAAM,eAAe,GAAGC,CAAG;AAAA,IAC/C,CAAC,GAEDC,EAAgB,MAAM;AACpB,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMF,IAAO,SAAS;AACtB,MAAAA,EAAK,MAAM,WAAWL,GACtBK,EAAK,MAAM,cAAcJ,GACzBI,EAAK,MAAM,eAAeH;AAAA,IAC5B,CAAC,mBAICM,EAYE,OAAA;AAAA,MAXA,aAAU;AAAA,MACV,eAAY;AAAA,MACX,OAAKC;AAAAA,QAASjB,EAAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;UAA0cX,EAAM;AAAA,QAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChCne,UAAMA,IAAQX,GAaRuB,IAAQtB,GACRuB,IAAYC,EAAad,GAAO,SAAS,WAAW,cAAc,GAClEb,IAAYC,EAAqByB,GAAWD,CAAK;2BAIrDpB,EAoBgBC,EAAAsB,CAAA,GAAA,MAAA;AAAA,iBAbd,MAAoE;AAAA,QAA7Cf,EAAM,gBAA7BR,EAAoEwB,GAAA;AAAA;UAA7B,OAAKN,EAAEV,EAAM,YAAY;AAAA,QAAA;QAChEiB,EAWiBxB,EAAAyB,CAAA,GAXjBxB,EAWiB,EAVf,aAAU,kBAAA,GAAiB,EAAA,GACdyB,EAAAA,QAAM,GAAK1B,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAkB,CAAA;AAAA;YAAwcX,EAAM;AAAA,UAAA;AAAA;qBAO/d,MAAQ;AAAA,YAARH,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}