Merge branch 'dev' into pr/162

nuxt · Jul 27, 2023 · d5c0259 · d5c0259
2 parents 5fb527d + 10890e6
commit d5c0259
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 18 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/docs/components/content/examples/PopoverExampleMode.vue b/docs/components/content/examples/PopoverExampleMode.vue
@@ -0,0 +1,11 @@
+<template>
+  <UPopover mode="hover">
+    <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>
+</template>
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/6.overlays/3.popover.md
@@ -28,6 +28,27 @@ links:
 ```
 ::
 
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+::component-example
+#default
+:popover-example-mode
+#code
+```vue
+<template>
+  <UPopover mode="hover">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <!-- Content -->
+    </template>
+  </UPopover>
+</template>
+```
+::
+
 ## Props
 
 :component-props

diff --git a/docs/content/7.layout/3.skeleton.md b/docs/content/7.layout/3.skeleton.md
@@ -18,7 +18,7 @@ Use to show a placeholder while content is loading.
 ```vue
 <template>
   <div class="flex items-center space-x-4">
-    <USkeleton class="h-12 w-12 rounded-full" />
+    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
     <div class="space-y-2">
       <USkeleton class="h-4 w-[250px]" />
       <USkeleton class="h-4 w-[200px]" />

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -420,7 +420,8 @@ const formGroup = {
   label: {
     wrapper: 'flex content-center items-center justify-between',
     base: 'block font-medium text-gray-700 dark:text-gray-200',
-    required: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+    // eslint-disable-next-line quotes
+    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
   },
   size: {
     '2xs': 'text-xs',

diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <HPopover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -85,21 +85,19 @@ export default defineComponent({
     const [trigger, container] = usePopper(popper.value)
 
     // https://github.com/tailwindlabs/headlessui/blob/f66f4926c489fc15289d528294c23a3dc2aee7b1/packages/%40headlessui-vue/src/components/popover/popover.ts#L151
+    const popover = ref<any>(null)
     const popoverApi = ref<any>(null)
 
     let openTimeout: NodeJS.Timeout | null = null
     let closeTimeout: NodeJS.Timeout | null = null
 
     onMounted(() => {
-      setTimeout(() => {
-        // @ts-expect-error internals
-        const popoverProvides = trigger.value?.$.provides
-        if (!popoverProvides) {
-          return
-        }
-        const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
-        popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
-      }, 200)
+      const popoverProvides = popover.value?.$.provides
+      if (!popoverProvides) {
+        return
+      }
+      const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
+      popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
     })
 
     function onMouseOver () {
@@ -145,6 +143,7 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      popover,
       trigger,
       container,
       onMouseOver,