Popover 气泡卡片 ​

<template>
  <div class="popover-base-box">
    <div class="row center">
      <u-popover
        title="Title"
        content="Top Left prompts info"
        placement="top-start"
      >
        <template #reference>
          <u-button>top-start</u-button>
        </template>
      </u-popover>
      <u-popover
        title="Title"
        content="Top Center prompts info"
        placement="top"
      >
        <template #reference>
          <u-button>top</u-button>
        </template>
      </u-popover>
      <u-popover
        title="Title"
        content="Top Right prompts info"
        placement="top-end"
      >
        <template #reference>
          <u-button>top-end</u-button>
        </template>
      </u-popover>
    </div>
    <div class="row">
      <u-popover
        title="Title"
        content="Left Top prompts info"
        placement="left-start"
      >
        <template #reference>
          <u-button>left-start</u-button>
        </template>
      </u-popover>
      <u-popover
        title="Title"
        content="Right Top prompts info"
        placement="right-start"
      >
        <template #reference>
          <u-button>right-start</u-button>
        </template>
      </u-popover>
    </div>
    <div class="row">
      <u-popover
        title="Title"
        content="Left Center prompts info"
        placement="left"
      >
        <template #reference>
          <u-button class="mt-3 mb-3">left</u-button>
        </template>
      </u-popover>
      <u-popover
        title="Title"
        content="Right Center prompts info"
        placement="right"
      >
        <template #reference>
          <u-button>right</u-button>
        </template>
      </u-popover>
    </div>
    <div class="row">
      <u-popover
        title="Title"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <template #reference>
          <u-button>left-end</u-button>
        </template>
      </u-popover>
      <u-popover
        title="Title"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <template #reference>
          <u-button>right-end</u-button>
        </template>
      </u-popover>
    </div>
    <div class="row center">
      <u-popover
        title="Title"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <template #reference> <u-button>bottom-start</u-button></template>
      </u-popover>
      <u-popover
        title="Title"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <template #reference> <u-button>bottom</u-button></template>
      </u-popover>
      <u-popover
        title="Title"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <template #reference>
          <u-button>bottom-end</u-button>
        </template>
      </u-popover>
    </div>
  </div>
</template>

<style>
.popover-base-box {
  width: 600px;
}

.popover-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover-base-box .center {
  justify-content: center;
}
</style>

<template>
  <u-popover
    placement="top-start"
    title="Title"
    :width="200"
    trigger="hover"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <u-button class="m-2">Hover to activate</u-button>
    </template>
  </u-popover>

  <u-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <u-button class="m-2">Click to activate</u-button>
    </template>
  </u-popover>

  <u-popover
    ref="popover"
    placement="right"
    title="Title"
    :width="200"
    trigger="focus"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <u-button class="m-2">Focus to activate</u-button>
    </template>
  </u-popover>

  <u-popover
    ref="popover"
    title="Title"
    :width="200"
    trigger="contextmenu"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <u-button class="m-2">contextmenu to activate</u-button>
    </template>
  </u-popover>

  <u-popover
    :visible="visible"
    placement="bottom"
    title="Title"
    :width="200"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <u-button class="m-2" @click="visible = !visible">
        Manual to activate
      </u-button>
    </template>
  </u-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<style scoped>
.u-button + .u-button {
  margin-left: 8px;
}
</style>

<template>
  <u-button ref="buttonRef" v-click-outside="onClickOutside">
    Click me
  </u-button>

  <u-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <span> Some content </span>
  </u-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ClickOutside as vClickOutside } from 'uniboot-ui'

import type { PopoverInstance } from 'uniboot-ui'

const buttonRef = ref()
const popoverRef = ref<PopoverInstance>()
const onClickOutside = () => {
  popoverRef.value?.hide()
}
</script>

<template>
  <div style="display: flex; align-items: center">
    <u-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <u-button style="margin-right: 16px">Click to activate</u-button>
      </template>
      <u-table :data="gridData">
        <u-table-column width="150" property="date" label="date" />
        <u-table-column width="100" property="name" label="name" />
        <u-table-column width="300" property="address" label="address" />
      </u-table>
    </u-popover>

    <u-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <u-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <u-avatar
            :size="60"
            src="https://avatars.githubusercontent.com/u/72015883?v=4"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Uniboot UI
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--u-color-info)"
            >
              @uniboot-ui
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            Uniboot UI, a Vue 3 based component library for developers,
            designers and product managers
          </p>
        </div>
      </template>
    </u-popover>
  </div>
</template>

<script lang="ts" setup>
const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]
</script>

<template>
  <u-popover :visible="visible" placement="top" :width="180">
    <p>Are you sure to delete this?</p>
    <div style="text-align: right; margin: 0">
      <u-button size="small" text @click="visible = false">cancel</u-button>
      <u-button size="small" type="primary" @click="visible = false">
        confirm
      </u-button>
    </div>
    <template #reference>
      <u-button @click="visible = true">Delete</u-button>
    </template>
  </u-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <u-button v-popover="popoverRef" v-click-outside="onClickOutside">
    Click me
  </u-button>

  <u-popover
    ref="popoverRef"
    trigger="click"
    title="With title"
    virtual-triggering
    persistent
  >
    <span> Some content </span>
  </u-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ClickOutside as vClickOutside } from 'uniboot-ui'

import type { PopoverInstance } from 'uniboot-ui'

const popoverRef = ref<PopoverInstance>()
const onClickOutside = () => {
  popoverRef.value?.hide()
}
</script>