ZConfirm

[yash-deepsource]

Description

To create a confirm component.

Tasks

• PLT-4646: Create ZConfirm component logic
• PLT-4647: Create ZConfirm Design spec

Discussed in #10

^{Originally posted by yash-deepsource May 13, 2022}

Description

ZConfirm component that allows warning the users about a whether they really want to do a particular action or not.

More information on them can be found on MDN.

Components

ZConfirm

• Renders a confirm dialog.

Props

Prop	Default	Description
open: Boolean	'false'	Whether the confirm dialog is open or not.
unmount: Boolean	'true'	Whether to unmount the dialog from the DOM when ZConfirm is closed.

Styling

TODO

Events

Event name	Emits	Description
close	state: Boolean	Emitted when the confirm dialog is closed.

Preview

TODO

Code example

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

  const onClose = (newState) => {
    isOpen.value = newState
  }
  const isOpen = ref(false)
</script>
<template>
  <button @click="isOpen = !isOpen"> Toggle </button>
  <z-confirm :open="isOpen" @close="onClose">
    Test
  </z-confirm>
</template>