@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/NavigationMenu.vue

@@ -1,122 +1,176 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/navigation-menu";
-import { tv } from "../utils/tv";
-const appConfigNavigationMenu = _appConfig;
-const navigationMenu = tv({ extend: tv(theme), ...appConfigNavigationMenu.b24ui?.navigationMenu || {} });
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navigation-menu'
+import { tv } from '../utils/tv'
+import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types'
+import type {
+  ArrayOrNested,
+  DynamicSlots,
+  MergeTypes,
+  NestedItem,
+  PartialString,
+  EmitsToProps
+} from '../types/utils'
+
+const appConfigNavigationMenu = _appConfig as AppConfig & { b24ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.b24ui?.navigationMenu || {}) })
+
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+  /** Description is only used when `orientation` is `horizontal`. */
+  description?: string
+  [key: string]: any
+}
+
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+  label?: string
+  /**
+   * @IconComponent
+   */
+  icon?: IconComponent
+  avatar?: AvatarProps
+  /**
+   * Display a badge on the item.
+   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+   */
+  badge?: string | number | BadgeProps
+  /**
+   * @IconComponent
+   */
+  trailingIcon?: IconComponent
+  /**
+   * The type of the item.
+   * The `label` type only works on `vertical` orientation.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'link'
+  slot?: string
+  value?: string
+  children?: NavigationMenuChildItem[]
+  /**
+   * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
+   */
+  viewportRtl?: boolean
+  onSelect?(e: Event): void
+  [key: string]: any
+}
+
+type NavigationMenuVariants = VariantProps<typeof navigationMenu>
+
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue icons.chevronDown
+   * @IconComponent
+   */
+  trailingIcon?: IconComponent
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue icons.external
+   * @IconComponent
+   */
+  externalIcon?: boolean | IconComponent
+  items?: T
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: NavigationMenuVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
+  variant?: NavigationMenuVariants['variant']
+  /**
+   * The orientation of the menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: NavigationMenuRootProps['orientation']
+  /**
+   * Collapse the navigation menu to only show icons.
+   * Only works when `orientation` is `vertical`.
+   * @defaultValue false
+   */
+  collapsed?: boolean
+  /** Display a line next to the active item. */
+  highlight?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
+  highlightColor?: NavigationMenuVariants['highlightColor']
+  /**
+   * The content of the menu.
+   */
+  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
+  /**
+   * The orientation of the content.
+   * Only works when `orientation` is `horizontal`.
+   * @defaultValue 'vertical'
+   */
+  contentOrientation?: NavigationMenuVariants['contentOrientation']
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: keyof NestedItem<T>
+  class?: any
+  b24ui?: PartialString<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type NavigationMenuSlots<
+  A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
+  T extends NestedItem<A> = NestedItem<A>
+> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'item-content': SlotProps<T>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
+
 </script>
 
-<script setup>
-import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { createReusableTemplate } from "@vueuse/core";
-import { isArrayOfArray } from "../utils";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  externalIcon: {
-    type: [Boolean, Function, Object],
-    required: false,
-    default: true
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  variant: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  collapsed: {
-    type: Boolean,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  highlightColor: {
-    type: null,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  contentOrientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  arrow: {
-    type: Boolean,
-    required: false
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: String,
-    required: false
-  },
-  defaultValue: {
-    type: String,
-    required: false
-  },
-  delayDuration: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disableClickTrigger: {
-    type: Boolean,
-    required: false
-  },
-  disableHoverTrigger: {
-    type: Boolean,
-    required: false
-  },
-  skipDelayDuration: {
-    type: Number,
-    required: false
-  },
-  disablePointerLeaveClose: {
-    type: Boolean,
-    required: false
-  },
-  unmountOnHide: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-});
-const emits = defineEmits(["update:modelValue"]);
-const slots = defineSlots();
+<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
+import { computed, toRef } from 'vue'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
+import { createReusableTemplate } from '@vueuse/core'
+import { get, isArrayOfArray } from '../utils'
+import { pickLinkProps } from '../utils/link'
+import icons from '../dictionary/icons'
+import B24LinkBase from './LinkBase.vue'
+import B24Link from './Link.vue'
+import B24Avatar from './Avatar.vue'
+import B24Badge from './Badge.vue'
+import B24Collapsible from './Collapsible.vue'
+
+const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
+  orientation: 'horizontal',
+  contentOrientation: 'vertical',
+  externalIcon: true,
+  delayDuration: 0,
+  unmountOnHide: true,
+  labelKey: 'label'
+})
+const emits = defineEmits<NavigationMenuEmits>()
+const slots = defineSlots<NavigationMenuSlots<T>>()
+
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
   modelValue: props.modelValue,
@@ -128,10 +182,12 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disableHoverTrigger: props.disableHoverTrigger,
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
-})), emits);
-const contentProps = toRef(() => props.content);
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+})), emits)
+
+const contentProps = toRef(() => props.content)
+
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
   props: {
     item: Object,
     index: Number,
@@ -141,7 +197,12 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
       default: 0
     }
   }
-});
+})
+
+const getLabel = (item: NavigationMenuItem) => {
+  return get(item, props.labelKey as string)
+}
+
 const b24ui = computed(() => navigationMenu({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
@@ -150,31 +211,36 @@ const b24ui = computed(() => navigationMenu({
   variant: props.variant,
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
-}));
-const lists = computed(
-  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
-);
+}))
+
+const lists = computed<NavigationMenuItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index">
+    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
       <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
-        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           <Component
             :is="item.icon"
             v-if="item.icon"
             :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
           />
-          <B24Avatar v-else-if="item.avatar" :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+          <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
           :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
         >
-          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-            {{ get(item, props.labelKey) }}
+          <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+            {{ getLabel(item) }}
           </slot>
 
           <Component
@@ -184,11 +250,11 @@ const lists = computed(
           />
         </span>
       </span>
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
-        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
+        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
-            v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
+            v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)"
             :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
           />
           <Component
@@ -202,8 +268,8 @@ const lists = computed(
             color="danger"
             depth="dark"
             :use-fill="true"
-            :size="props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
-            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
             :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
           />
         </slot>
@@ -213,19 +279,19 @@ const lists = computed(
 
   <DefineItemTemplate v-slot="{ item, index, level }">
     <component
-      :is="orientation === 'vertical' && item.children?.length && !collapsed ? B24Collapsible : NavigationMenuItem"
+      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? B24Collapsible : NavigationMenuItem"
       as="li"
       :value="item.value || String(index)"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
+      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
       :open="item.open"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
+      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
         <component
-          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
@@ -237,12 +303,12 @@ const lists = computed(
         </component>
 
         <NavigationMenuContent
-          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
+          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])"
           v-bind="contentProps"
           :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
           :class="b24ui.content({ class: props.b24ui?.content })"
         >
-          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
+          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
             <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
                 <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
@@ -256,7 +322,7 @@ const lists = computed(
 
                       <div :class="b24ui.childLinkWrapper({ class: props.b24ui?.childLinkWrapper })">
                         <p :class="b24ui.childLinkLabel({ class: props.b24ui?.childLinkLabel, active: childActive })">
-                          {{ get(childItem, props.labelKey) }}
+                          {{ getLabel(childItem) }}
 
                           <Component
                             :is="typeof externalIcon === 'string' ? externalIcon : icons.external"

package/dist/runtime/components/OverlayProvider.vue

@@ -1,15 +1,19 @@
-<script setup>
-import { computed } from "vue";
-import { useOverlay } from "../composables/useOverlay";
-const { overlays, unMount, close } = useOverlay();
-const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted));
-const onAfterLeave = (id) => {
-  close(id);
-  unMount(id);
-};
-const onClose = (id, value) => {
-  close(id, value);
-};
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOverlay, type Overlay } from '../composables/useOverlay'
+
+const { overlays, unMount, close } = useOverlay()
+
+const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
+
+const onAfterLeave = (id: symbol) => {
+  close(id)
+  unMount(id)
+}
+
+const onClose = (id: symbol, value: any) => {
+  close(id, value)
+}
 </script>
 
 <template>
@@ -19,7 +23,7 @@ const onClose = (id, value) => {
     :key="overlay.id"
     v-bind="overlay.props"
     v-model:open="overlay.modelValue"
-    @close="(value) => onClose(overlay.id, value)"
+    @close="(value:any) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />
 </template>

package/dist/runtime/components/Popover.vue

@@ -1,92 +1,92 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/popover";
-import { tv } from "../utils/tv";
-const appConfigPopover = _appConfig;
-const popover = tv({ extend: tv(theme), ...appConfigPopover.b24ui?.popover || {} });
+<script lang="ts">
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/popover'
+import { tv } from '../utils/tv'
+import type { EmitsToProps } from '../types/utils'
+
+const appConfigPopover = _appConfig as AppConfig & { b24ui: { popover: Partial<typeof theme> } }
+
+const popover = tv({ extend: tv(theme), ...(appConfigPopover.b24ui?.popover || {}) })
+
+export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+  /**
+   * The display mode of the popover.
+   * @defaultValue 'click'
+   */
+  mode?: 'click' | 'hover'
+  /**
+   * The content of the popover.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>
+  /**
+   * Display an arrow alongside the popover.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the popover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * When `false`, the popover will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  class?: any
+  b24ui?: Partial<typeof popover.slots>
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed, toRef } from "vue";
-import { defu } from "defu";
-import { useForwardPropsEmits } from "reka-ui";
-import { Popover, HoverCard } from "reka-ui/namespaced";
-import { reactivePick } from "@vueuse/core";
-const props = defineProps({
-  mode: {
-    type: String,
-    required: false,
-    default: "click"
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  dismissible: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  modal: {
-    type: Boolean,
-    required: false
-  },
-  openDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  closeDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  }
-});
-const emits = defineEmits(["update:open"]);
-const slots = defineSlots();
-const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
-const rootProps = useForwardPropsEmits(pick, emits);
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Popover, HoverCard } from 'reka-ui/namespaced'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  portal: true,
+  mode: 'click',
+  openDelay: 0,
+  closeDelay: 0,
+  dismissible: true
+})
+const emits = defineEmits<PopoverEmits>()
+const slots = defineSlots<PopoverSlots>()
+
+const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
+const rootProps = useForwardPropsEmits(pick, emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
 const contentEvents = computed(() => {
   if (!props.dismissible) {
     return {
-      pointerDownOutside: (e) => e.preventDefault(),
-      interactOutside: (e) => e.preventDefault(),
-      escapeKeyDown: (e) => e.preventDefault()
-    };
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault()
+    }
   }
-  return {};
-});
-const arrowProps = toRef(() => props.arrow);
+
+  return {}
+})
+const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const b24ui = computed(() => popover({
   side: contentProps.value.side
-}));
-const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
+}))
+
+const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 </script>
 
 <template>