feat(Popover): manual mode & horizontal offset

docs/components/content/examples/PopoverExampleOpen.vue

@@ -0,0 +1,18 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex gap-4 items-center">
+    <UToggle v-model="open" />
+    <UPopover :open="open">
+      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+      <template #panel>
+        <div class="p-4">
+          <Placeholder class="h-20 w-48" />
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

docs/components/content/examples/PopoverExampleSlot.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel="{ close }">
+      <div class="p-8">
+        <UButton label="Close" @click="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/content/1.getting-started/3.theming.md

@@ -93,7 +93,7 @@ export default defineAppConfig({
 
 Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
 
-You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`:
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -146,7 +146,7 @@ To change the font of the `label`, you only need to write:
 
 This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
 
-You can change this behaviour by setting `strategy` to `override` inside the `ui` prop: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+You can change this behaviour by setting `strategy` to `override` inside the `ui` prop:
 
 ```vue
 <UButton

docs/content/1.getting-started/4.shortcuts.md

@@ -7,7 +7,7 @@ description: 'Learn how to display and define keyboard shortcuts in your app.'
 Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
 
 ```vue
-<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />
+<UDropdown :items="[[{ label: 'Edit', shortcuts: ['E'] }]]" />
 ```
 
 Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.

docs/content/3.forms/9.form-group.md

@@ -192,7 +192,7 @@ code: >-
 
 ## Slots
 
-### `label` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+### `label`
 
 Use the `#label` slot to set the custom content for label.
 
@@ -210,7 +210,7 @@ slots:
   :u-input{model-value="benjamincanac" placeholder="[email protected]"}
 ::
 
-### `description` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+### `description`
 
 Use the `#description` slot to set the custom content for description.
 
@@ -230,7 +230,7 @@ props:
   :u-input{model-value="benjamincanac" placeholder="[email protected]"}
 ::
 
-### `hint` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+### `hint`
 
 Use the `#hint` slot to set the custom content for hint.
 
@@ -250,7 +250,7 @@ props:
   :u-input{model-value="benjamincanac" placeholder="[email protected]"}
 ::
 
-### `help` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+### `help`
 
 Use the `#help` slot to set the custom content for help.
 
@@ -270,7 +270,7 @@ props:
   :u-input{model-value="benjamincanac" placeholder="[email protected]"}
 ::
 
-### `error` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+### `error`
 
 Use the `#error` slot to set the custom content for error.
 

docs/content/4.data/1.table.md

@@ -524,7 +524,7 @@ excludedProps:
 ---
 ::
 
-## Styling :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+## Styling
 
 You can apply styles to `tr` and `td` elements by passing a `class` to rows.
 

docs/content/6.overlays/3.popover.md

@@ -14,6 +14,7 @@ links:
 ::component-example
 #default
 :popover-example
+
 #code
 ```vue
 <template>
@@ -35,6 +36,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 ::component-example
 #default
 :popover-example-mode
+
 #code
 ```vue
 <template>
@@ -49,11 +51,58 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 ```
 ::
 
+### Manual
+
+Use the `open` prop to manually control showing the panel.
+
+::component-example
+#default
+:popover-example-open
+
+#code
+```vue
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="open" />
+  <UPopover :open="open">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <!-- Content -->
+    </template>
+  </UPopover>
+</template>
+```
+::
+
 ## Slots
 
 ### `panel`
 
-Use the `#panel` slot to fill the content of the panel.
+Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
+
+::component-example
+#default
+:popover-example-slot
+
+#code
+```vue
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel="{ close }">
+      <div class="p-8">
+        <UButton label="Close" @click="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+```
+::
 
 ## Props
 

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "^2.8.5",
     "@nuxt/devtools": "^0.8.5",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/ui-pro": "npm:@nuxt/[email protected]",
+    "@nuxt/ui-pro": "^0.1.0",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",

src/runtime/components/overlays/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,17 +8,17 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-          <slot name="panel" :open="open" :close="close" />
+          <slot name="panel" :open="headlessOpen" :close="close" />
         </HPopoverPanel>
       </Transition>
     </div>
@@ -53,6 +53,10 @@ export default defineComponent({
       default: 'click',
       validator: (value: string) => ['click', 'hover'].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: undefined
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -103,8 +107,14 @@ export default defineComponent({
 
     const containerStyle = computed(() => {
       const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
-
-      return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
+      const padding = `${offsetDistance}px`
+
+      return props.mode === 'hover' ? {
+        paddingTop: padding,
+        paddingBottom: padding,
+        paddingLeft: padding,
+        paddingRight: padding
+      } : {}
     })
 
     function onMouseOver () {