Popover ​

<script setup lang="ts">
import { ref } from 'vue'
import { Button, Checkbox, Popover } from 'frappe-ui'

const statuses = ['Open', 'Replied', 'Resolved', 'Closed']
const selected = ref<string[]>(['Open'])
const draft = ref<Record<string, boolean>>({})

function load() {
  draft.value = Object.fromEntries(
    statuses.map((s) => [s, selected.value.includes(s)]),
  )
}

function apply(close: () => void) {
  selected.value = statuses.filter((s) => draft.value[s])
  close()
}
</script>

<template>
  <Popover side="bottom" align="start" @open="load">
    <template #trigger>
      <Button
        icon-left="lucide-list-filter"
        :label="selected.length ? `Status: ${selected.length}` : 'Filter'"
      />
    </template>
    <template #default="{ close }">
      <div class="w-56 p-3">
        <p class="text-sm-medium text-ink-gray-5">Status</p>
        <div class="mt-2 flex flex-col gap-2">
          <Checkbox
            v-for="status in statuses"
            :key="status"
            v-model="draft[status]"
            :label="status"
          />
        </div>
        <div class="mt-3 flex justify-end gap-2">
          <Button label="Cancel" @click="close()" />
          <Button variant="solid" label="Apply" @click="apply(close)" />
        </div>
      </div>
    </template>
  </Popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Avatar, Popover } from 'frappe-ui'

const workspaces = ['Acme Inc', 'Globex', 'Initech']
const current = ref(workspaces[0])

function pick(value: string, close: () => void) {
  current.value = value
  close()
}
</script>

<template>
  <Popover match-trigger-width>
    <template #trigger>
      <button
        type="button"
        class="flex h-8 w-60 items-center gap-2 rounded-4 bg-surface-gray-2 px-2 text-base text-ink-gray-8 hover:bg-surface-gray-3"
      >
        <Avatar :label="current" size="sm" shape="square" theme="blue" />
        <span class="flex-1 truncate text-left">{{ current }}</span>
        <span
          class="lucide-chevrons-up-down size-4 text-ink-gray-5"
          aria-hidden="true"
        />
      </button>
    </template>
    <template #default="{ close }">
      <div class="p-1">
        <button
          v-for="workspace in workspaces"
          :key="workspace"
          type="button"
          class="flex w-full items-center gap-2 rounded-4 px-2 py-1.5 text-left text-base text-ink-gray-8 hover:bg-surface-gray-2"
          @click="pick(workspace, close)"
        >
          <Avatar :label="workspace" size="sm" shape="square" theme="blue" />
          <span class="flex-1">{{ workspace }}</span>
          <span
            v-if="workspace === current"
            class="lucide-check size-4 text-ink-gray-7"
            aria-hidden="true"
          />
        </button>
      </div>
    </template>
  </Popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button, Popover, TextInput } from 'frappe-ui'

const status = ref('In a meeting')
const draft = ref('')
const open = ref(false)

function save() {
  status.value = draft.value
  open.value = false
}
</script>

<template>
  <Popover v-model:open="open" :dismissible="false" @open="draft = status">
    <template #trigger>
      <Button
        icon-left="lucide-message-circle"
        :label="status || 'Set status'"
      />
    </template>
    <template #default>
      <div class="w-64 p-3">
        <TextInput v-model="draft" placeholder="What are you up to?" />
        <div class="mt-3 flex justify-end gap-2">
          <Button label="Cancel" @click="open = false" />
          <Button variant="solid" label="Save" @click="save" />
        </div>
      </div>
    </template>
  </Popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Popover } from 'frappe-ui'

const colors = [
  { name: 'Gray', class: 'bg-surface-gray-7' },
  { name: 'Blue', class: 'bg-surface-blue-7' },
  { name: 'Green', class: 'bg-surface-green-7' },
  { name: 'Amber', class: 'bg-surface-amber-7' },
  { name: 'Red', class: 'bg-surface-red-7' },
  { name: 'Violet', class: 'bg-surface-violet-7' },
]
const color = ref(colors[1])

function pick(value: typeof color.value, close: () => void) {
  color.value = value
  close()
}
</script>

<template>
  <div class="flex items-center gap-2 text-base text-ink-gray-8">
    Label color
    <Popover bare>
      <template #trigger>
        <button
          type="button"
          class="size-6 rounded-full"
          :class="color.class"
          :aria-label="`Label color: ${color.name}`"
        />
      </template>
      <template #default="{ close }">
        <div
          class="grid grid-cols-6 gap-2 rounded-5 bg-surface-gray-10 p-2 shadow-xl"
        >
          <button
            v-for="option in colors"
            :key="option.name"
            type="button"
            class="size-6 rounded-full"
            :class="option.class"
            :aria-label="option.name"
            @click="pick(option, close)"
          />
        </div>
      </template>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Popover } from 'frappe-ui'
</script>

<template>
  <div class="flex items-center gap-1.5 text-base text-ink-gray-8">
    Billing email
    <Popover side="right" arrow>
      <template #trigger>
        <button
          type="button"
          class="grid size-5 place-items-center rounded-full text-ink-gray-5 hover:bg-surface-gray-2"
          aria-label="About billing email"
        >
          <span class="lucide-circle-help size-4" aria-hidden="true" />
        </button>
      </template>
      <template #default>
        <p class="w-60 p-3 text-p-sm text-ink-gray-7">
          Invoices and payment receipts go to this address. It can differ from
          the account owner's email.
        </p>
      </template>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Popover, TextInput } from 'frappe-ui'

const fruits = [
  'Apricot',
  'Blackberry',
  'Cherry',
  'Date',
  'Elderberry',
  'Fig',
  'Grape',
]

const query = ref('')
const open = ref(false)

const matches = computed(() =>
  fruits.filter((f) => f.toLowerCase().includes(query.value.toLowerCase())),
)

function onInput(value: string) {
  query.value = value
  open.value = value.length > 0 && matches.value.length > 0
}

function pick(fruit: string) {
  query.value = fruit
  open.value = false
}
</script>

<template>
  <!--
    manual: clicking the input places the caret instead of toggling the panel.
    auto-focus false: the panel opens without taking focus off the input.
  -->
  <Popover
    v-model:open="open"
    trigger="manual"
    :auto-focus="false"
    match-trigger-width
  >
    <template #trigger>
      <TextInput
        :model-value="query"
        placeholder="Search fruit"
        class="w-56"
        @update:model-value="onInput"
      />
    </template>
    <template #default>
      <div class="p-1">
        <button
          v-for="fruit in matches"
          :key="fruit"
          type="button"
          class="block w-full rounded-4 px-2 py-1.5 text-left text-base text-ink-gray-8 hover:bg-surface-gray-2"
          @click="pick(fruit)"
        >
          {{ fruit }}
        </button>
      </div>
    </template>
  </Popover>
</template>