feat( headless): add component p-popover

Author: adenvt

.nvmrc

@@ -1 +1 @@
-20
+18

src/.vitepress/config.ts

@@ -396,6 +396,10 @@ export default defineConfig({
               text: 'Dropzone',
               link: '/components/dropzone/',
             },
+            {
+              text: 'Popover',
+              link: '/components/popover/',
+            },
             {
               text: 'Spread',
               link: '/components/spread/',

src/.vitepress/theme/components/NuxtLink.vue

@@ -27,6 +27,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue-demi'
+import { hasProtocol } from 'ufo'
 import {
   computed,
   defineComponent,
@@ -50,7 +51,7 @@ export default defineComponent({
   setup (props) {
     const isExternalLink = computed(() => {
       return typeof props.href === 'string'
-        && (props.href.startsWith('http') || props.href.startsWith('#'))
+        && (hasProtocol(props.href) || props.href.startsWith('#'))
     })
 
     return { isExternalLink }

src/components/popover/Popover.spec.ts

@@ -0,0 +1,46 @@
+import { fireEvent, render } from '@testing-library/vue'
+import pPopover from './Popover.vue'
+
+it('should able to show tooltip over activator element', async () => {
+  const screen = render({
+    components: { pPopover },
+    template  : `
+        <p-popover>
+          <template #activator="{ toggle }">
+            <a href="javascript:void" data-testid="activator" @click="toggle">
+              Remove?
+            </a>
+          </template>
+          <template #default>
+            <div class="flex items-center space-x-2">
+              <span>Are you sure?</span>
+              <p-button data-testid="confirm" @click="popoverPromise.finish(true)">
+                Yes
+              </p-button>
+              <p-button data-testid="cancel" @click="popoverPromise.finish(false)">
+                Cancel
+              </p-button>
+            </div>
+          </template>
+        </p-popover>
+      `,
+    setup () {
+      return {}
+    },
+  })
+
+  const popover   = screen.queryByTestId('popover')
+  const tooltip   = screen.queryByTestId('popover-tooltip')
+  const activator = screen.queryByTestId('activator')
+
+  expect(popover).toBeInTheDocument()
+  expect(tooltip).not.toBeVisible()
+
+  await fireEvent.click(activator)
+
+  expect(tooltip).toBeVisible()
+
+  await fireEvent.click(activator)
+
+  expect(tooltip).not.toBeVisible()
+})

src/components/popover/Popover.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    ref="root"
+    data-testid="popover"
+    class="popover">
+    <slot
+      name="activator"
+      :is-show="isShow"
+      :toggle="toggle"
+      :show="show"
+      :hide="hide" />
+
+    <p-tooltip
+      ref="tooltip"
+      v-model="isShow"
+      class="popover__tooltip"
+      data-testid="popover-tooltip"
+      :color="color"
+      :placement="placement"
+      :target="root"
+      @show="$emit('show')"
+      @hide="$emit('hide')">
+      <slot
+        :is-show="isShow"
+        :toggle="toggle"
+        :show="show"
+        :hide="hide" />
+    </p-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType, VNode } from 'vue-demi'
+import type { Placement } from '@floating-ui/dom'
+import type { ColorVariant } from '../tooltip'
+import {
+  ref,
+  provide,
+  computed,
+} from 'vue-demi'
+import pTooltip from '../tooltip/Tooltip.vue'
+import { useVModel } from '../input'
+import { onClickOutside } from '@vueuse/core'
+import { POPOVER_CONTEXT } from '.'
+
+const props = defineProps({
+  modelValue: {
+    type   : Boolean,
+    default: false,
+  },
+  color: {
+    type   : String as PropType<ColorVariant>,
+    default: 'white',
+  },
+  placement: {
+    type   : String as PropType<Placement>,
+    default: 'top',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const root    = ref<HTMLDivElement>()
+const tooltip = ref<InstanceType<typeof pTooltip>>()
+const isShow  = useVModel(props)
+
+const tooltipEl = computed<HTMLElement>(() => tooltip.value.$el)
+
+onClickOutside(tooltipEl, () => {
+  if (isShow.value) {
+    // Add little delay too prevent race condition with v-model changing
+    setTimeout(() => {
+      hide()
+    })
+  }
+}, { ignore: [root] })
+
+function toggle () {
+  if (!props.disabled) {
+    if (isShow.value)
+      hide()
+    else
+      show()
+  }
+}
+
+function show () {
+  if (!props.disabled)
+    isShow.value = true
+}
+
+function hide () {
+  if (!props.disabled)
+    isShow.value = false
+}
+
+defineEmits<{
+  'show': [],
+  'hide': [],
+  'update:modelValue': [boolean],
+}>()
+
+defineSlots<{
+  'activator'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+  'default'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+}>()
+
+defineExpose({
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+
+provide(POPOVER_CONTEXT, {
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+</script>
+
+<style lang="postcss">
+.popover {
+  & > &__tooltip.tooltip {
+    @apply text-base;
+  }
+}
+</style>