Message Box 消息弹框 ​

<template>
  <u-button plain @click="open">Click to open the Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessage, UMessageBox } from 'uniboot-ui'

import type { Action } from 'uniboot-ui'

const open = () => {
  UMessageBox.alert('This is a message', 'Title', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      UMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>

<template>
  <u-button plain @click="open">Click to open the Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessage, UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      UMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<template>
  <u-button plain @click="open">Click to open Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessage, UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox.prompt('Please input your e-mail', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email',
  })
    .then(({ value }) => {
      UMessage({
        type: 'success',
        message: `Your email is:${value}`,
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Input canceled',
      })
    })
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open">Common VNode</u-button>
    <u-button class="!ml-0" plain @click="open1">Dynamic props</u-button>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { UMessageBox, USwitch } from 'uniboot-ui'

const open = () => {
  UMessageBox({
    title: 'Message',
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}

const open1 = () => {
  const checked = ref<boolean | string | number>(false)
  UMessageBox({
    title: 'Message',
    // Should pass a function if VNode contains dynamic props
    message: () =>
      h(USwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (val: boolean | string | number) => {
          checked.value = val
        },
      }),
  })
}
</script>

<template>
  <u-button plain @click="open">Click to open Message Box</u-button>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { UMessage, UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox({
    title: 'Message',
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = 'Loading...'
        setTimeout(() => {
          done()
          setTimeout(() => {
            instance.confirmButtonLoading = false
          }, 300)
        }, 3000)
      } else {
        done()
      }
    },
  }).then((action) => {
    UMessage({
      type: 'info',
      message: `action: ${action}`,
    })
  })
}
</script>

<template>
  <u-button plain @click="open">Click to open Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox.alert(
    '<strong>proxy is <i>HTML</i> string</strong>',
    'HTML String',
    {
      dangerouslyUseHTMLString: true,
    }
  )
}
</script>

<template>
  <u-button plain @click="open">Click to open Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessage, UMessageBox } from 'uniboot-ui'

import type { Action } from 'uniboot-ui'

const open = () => {
  UMessageBox.confirm(
    'You have unsaved changes, save and proceed?',
    'Confirm',
    {
      distinguishCancelAndClose: true,
      confirmButtonText: 'Save',
      cancelButtonText: 'Discard Changes',
    }
  )
    .then(() => {
      UMessage({
        type: 'info',
        message: 'Changes saved. Proceeding to a new route.',
      })
    })
    .catch((action: Action) => {
      UMessage({
        type: 'info',
        message:
          action === 'cancel'
            ? 'Changes discarded. Proceeding to a new route.'
            : 'Stay in the current route',
      })
    })
}
</script>

<template>
  <u-button plain @click="open">打开居中 Message Box</u-button>
</template>

<script lang="ts" setup>
import { UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox.confirm(
    '描述文本描述文本描述文本描述文本描述文本描述文本描述文本描述文本',
    '内容标题',
    {
      center: true,
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      confirmButtonType: 'danger',
      confirmButtonColor: '#F53F3F',
    }
  )
}
</script>

<template>
  <u-button plain @click="open">Click to open Message Box</u-button>
</template>

<script lang="ts" setup>
import { markRaw } from 'vue'
import { UMessage, UMessageBox } from 'uniboot-ui'
import { Delete } from '@uniboot/icons-vue'

const open = () => {
  UMessageBox.confirm(
    'It will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      icon: markRaw(Delete),
    }
  )
    .then(() => {
      UMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<template>
  <u-button plain @click="open">CircleCheckFilled + 主色（蓝）</u-button>
</template>

<script lang="ts" setup>
import { markRaw } from 'vue'
import { UMessageBox } from 'uniboot-ui'
import { CircleCheckFilled } from '@uniboot/icons-vue'

const open = () => {
  UMessageBox.confirm(
    "使用 `icon` 传入组件（建议 `markRaw`）；配合 `type: 'primary'` 使用与主色一致的图标颜色。",
    '自定义图标',
    {
      confirmButtonText: '知道了',
      cancelButtonText: '关闭',
      type: 'primary',
      icon: markRaw(CircleCheckFilled),
    }
  )
}
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <u-button class="!ml-0" plain @click="open">
      Open a draggable Message Box
    </u-button>
    <u-button class="!ml-0" plain @click="open2">
      Open a overflow draggable Message Box
    </u-button>
    <u-button class="!ml-0" plain @click="open3">
      Open a custom dragging style Message Box
    </u-button>
  </div>
</template>

<script lang="ts" setup>
import { UMessage, UMessageBox } from 'uniboot-ui'

const open = () => {
  UMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      UMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const open2 = () => {
  UMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      draggable: true,
      overflow: true,
    }
  )
    .then(() => {
      UMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const open3 = () => {
  UMessageBox.confirm(
    'This message box has custom dragging styles. Try dragging it to see the effects!',
    'Custom Dragging Style',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'info',
      draggable: true,
      customClass: 'custom-dragging-message-box',
    }
  )
    .then(() => {
      UMessage({
        type: 'success',
        message: 'Action completed',
      })
    })
    .catch(() => {
      UMessage({
        type: 'info',
        message: 'Action canceled',
      })
    })
}
</script>

<style>
.custom-dragging-message-box.is-dragging {
  border: 2px dashed var(--u-color-primary);
  opacity: 0.65;
}
</style>