VButton ​

<template>
  <div class="v-button-basic">
    <v-button type="primary" :auto-loading="true" @click="handleSubmit">
      Save changes
    </v-button>
    <el-tag type="success">submitted {{ submitCount }} times</el-tag>
    <span class="hint">Call `done()` after the async action finishes.</span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const submitCount = ref(0)

const handleSubmit = (done: () => void) => {
  setTimeout(() => {
    submitCount.value += 1
    ElMessage.success(`Saved successfully (${submitCount.value})`)
    done()
  }, 1000)
}
</script>

<style scoped>
.v-button-basic {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hint {
  color: var(--el-text-color-regular);
}
</style>

<template>
  <div class="v-button-confirm">
    <div class="row">
      <v-button
        type="danger"
        confirm-type="popconfirm"
        :pop-config="{
          title: 'Delete the current draft?',
          confirmButtonText: 'Delete',
          cancelButtonText: 'Keep',
        }"
        @confirm="handlePopConfirm"
        @cancel="handleCancel('Inline popconfirm canceled')"
      >
        Delete draft
      </v-button>
      <span class="hint"
        >Inline confirmation keeps the action close to the trigger.</span
      >
    </div>

    <div class="row">
      <v-button
        type="warning"
        confirm-type="boxconfirm"
        :box-config="{
          title: 'Archive item',
          message:
            'This action uses ElMessageBox.confirm for a stronger interruption.',
          confirmButtonText: 'Archive',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }"
        @confirm="handleBoxConfirm"
        @cancel="handleCancel('Dialog confirmation canceled')"
      >
        Archive item
      </v-button>
      <span class="hint"
        >Dialog confirmation works better for heavier actions.</span
      >
    </div>

    <el-tag type="info">{{ lastAction }}</el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const lastAction = ref('Choose a confirmation flow')

const handlePopConfirm = (done: () => void) => {
  lastAction.value = 'Draft deleted via popconfirm'
  ElMessage.success(lastAction.value)
  done()
}

const handleBoxConfirm = (done: () => void) => {
  lastAction.value = 'Item archived via message box'
  ElMessage.success(lastAction.value)
  done()
}

const handleCancel = (message: string) => {
  lastAction.value = message
  ElMessage.warning(message)
}
</script>

<style scoped>
.v-button-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hint {
  color: var(--el-text-color-regular);
}
</style>

<template>
  <div class="v-button-tooltip">
    <v-button type="primary" tip-content="Run the primary save action.">
      Default tooltip
    </v-button>
    <v-button
      type="success"
      tip-content="This tooltip uses custom placement and effect."
      :tip-config="{
        placement: 'right',
        effect: 'light',
      }"
    >
      Custom tooltip
    </v-button>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped>
.v-button-tooltip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

<template>
  <div class="v-button-complete">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="Debounced async submit">
        <div class="row">
          <v-button
            type="primary"
            :auto-loading="true"
            :debounce="800"
            @click="handleSubmit"
          >
            Save changes
          </v-button>
          <el-tag type="info">submitted {{ submitCount }} times</el-tag>
          <span class="hint">Click rapidly to see the leading debounce.</span>
        </div>
      </el-descriptions-item>

      <el-descriptions-item label="Tooltip with box confirm">
        <div class="row">
          <v-button
            type="danger"
            confirm-type="boxconfirm"
            :auto-full-screen-loading="true"
            tip-content="Requires confirmation and shows a fullscreen loading mask."
            :box-config="{
              title: 'Delete record',
              message: 'This demo simulates a remote delete request.',
            }"
            @confirm="handleDelete"
          >
            Delete record
          </v-button>
          <el-tag type="danger">deleted {{ deleteCount }} times</el-tag>
        </div>
      </el-descriptions-item>

      <el-descriptions-item label="Confirmation result callbacks">
        <div class="row">
          <v-button
            confirm-type="boxconfirm"
            :box-config="{
              title: 'Start sync',
              message: 'Do you want to run a manual sync now?',
              type: 'info',
            }"
            @confirm="handleSync"
            @cancel="handleCancel"
          >
            Start sync
          </v-button>
          <span class="hint">{{ lastAction }}</span>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const submitCount = ref(0)
const deleteCount = ref(0)
const lastAction = ref('Awaiting confirmation result')

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

const handleSubmit = async (done: () => void) => {
  submitCount.value += 1
  await sleep(900)
  ElMessage.success(`Saved successfully (${submitCount.value})`)
  done()
}

const handleDelete = async (done: () => void) => {
  await sleep(1200)
  deleteCount.value += 1
  ElMessage.success(`Deleted record #${deleteCount.value}`)
  done()
}

const handleSync = (done: () => void) => {
  lastAction.value = 'Sync confirmed and started'
  ElMessage.info('Manual sync started')
  done()
}

const handleCancel = () => {
  lastAction.value = 'Sync was canceled'
  ElMessage.warning('Manual sync canceled')
}
</script>

<style scoped>
.v-button-complete {
  width: 100%;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hint {
  color: var(--el-text-color-regular);
}
</style>