[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f1u12fpghsmzza":3,"mdc--z07wum-key":23},{"_id":4,"title":5,"slug":6,"excerpt":7,"coverImage":8,"tags":9,"access":14,"publishedAt":15,"views":16,"likes":17,"seo":18,"readingTime":20,"locked":21,"body":22},"6ac40eea7ed2305c5a7a2507","The simplest way to deal with modal dialogs in Vue 3","the-simplest-way-to-deal-with-modal-dialogs-in-vue-3","Turn modal dialogs into async functions with vuejs-confirm-dialog: reuse them, chain them and await the user's answer.","https:\u002F\u002Fres.cloudinary.com\u002Fdqjivljzi\u002Fimage\u002Fupload\u002Fv1791237227\u002Fdev-blog\u002F545e7dcd-f0d3-4aeb-8ed3-e3d3e100abd9.png",[10,11,12,13],"javascript","vue","webdev","tutorial","free","2022-05-07T05:20:00.000Z",17,2,{"title":19,"description":7},"",10,false,"Updated in October 2026 — the [original version of this article](https:\u002F\u002Fdev.to\u002Fgarmideroman\u002Fthe-simplest-way-to-deal-with-modal-dialogs-in-vue-3-59hl) was published on `dev.to` in May 2022\n\nModal dialogs are not a difficult thing to build. They are often used to confirm a user's action, for example deleting data or logging in. It is monotonous work with repetitive logic that gets copied from component to component with minor changes.\n\nBut what if you have dozens or even hundreds of similar dialogs on one page or across the whole project? Or you need to call dialogs in a chain depending on the user's choice? How do you write a reusable function that also keeps the code readable and maintainable?\n\nIt would be useful to have a function that takes a dialog component and controls its rendering. The function returns an object with the dialog state and methods, so you can work with it like a promise. The [vue-modal-dialogs](https:\u002F\u002Fgithub.com\u002Fhjkcai\u002Fvue-modal-dialogs) plugin implemented this idea, but it has not been updated for a long time and does not support Vue 3.\n\nIn this guide, I'll introduce the [vuejs-confirm-dialog](https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog) plugin and show how to use it. I'll start with simple examples and end with a function that completely abstracts a confirmation dialog and can be used in any component of your project. The examples are written in JavaScript for easy reading, but the plugin itself is written in TypeScript, fully typed and documented. Besides the promise API, it has two hooks: `onConfirm` and `onCancel`. They accept a callback and run depending on the user's decision.\n\nThe full documentation lives at [vcd-docs.netlify.app](https:\u002F\u002Fvcd-docs.netlify.app), and a runnable demo is in the [repository](https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog\u002Ftree\u002Fmain\u002Fdemos\u002Fvue3).\n\n## Installation\n\nThe plugin requires Vue 3.5 or newer. Create a new project with the official scaffolding tool and install the plugin:\n\n```bash\nnpm create vue@latest dialogs-guide\ncd dialogs-guide\nnpm i vuejs-confirm-dialog\n```\n\nThen install the plugin in `main.js`:\n\n```javascript\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport * as ConfirmDialog from 'vuejs-confirm-dialog'\n\ncreateApp(App).use(ConfirmDialog).mount('#app')\n```\n\nThis step is recommended rather than required: with the plugin installed, dialog components can `inject()` whatever your app provides (router, i18n, stores). Without it, dialogs still work, just without that context.\n\n## Usage\n\n`createConfirmDialog` takes a component that will act as the modal dialog as its first argument, and an object with the component's props as the second. It returns an object for controlling the dialog: `reveal` renders it, and `onConfirm` takes a callback that runs if the user agrees.\n\nYou don't need to add anything to the template: the library mounts its own render root the first time you call `reveal()`. For a quick test, reuse the `HelloWorld` component from the new project and pass its `msg` prop:\n\n```vue\n\u003C!-- App.vue -->\n\u003Cscript setup>\nimport HelloWorld from '.\u002Fcomponents\u002FHelloWorld.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst { reveal } = createConfirmDialog(HelloWorld, { msg: 'Hi!' })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    type=\"button\"\n    @click=\"reveal()\"\n  >\n    Show dialog\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\nNo additional logic is required. The component renders after `reveal()` and disappears after the user responds.\n\n## Real life example\n\nNow let's write something closer to real use. Create `SimpleDialog.vue` in the `components` folder:\n\n```vue\n\u003Cscript setup>\ndefineProps({ question: String })\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"modal-container\">\n    \u003Cdiv\n      class=\"modal-body\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modal-question\"\n    >\n      \u003Cbutton\n        type=\"button\"\n        class=\"modal-close\"\n        aria-label=\"Close\"\n        @click=\"emit('cancel')\"\n      >\n        ✕\n      \u003C\u002Fbutton>\n      \u003Ch2 id=\"modal-question\">{{ question }}\u003C\u002Fh2>\n      \u003Cdiv class=\"modal-action\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"modal-button\"\n          @click=\"emit('confirm')\"\n        >\n          Confirm\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          class=\"modal-button\"\n          @click=\"emit('cancel')\"\n        >\n          Cancel\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.modal-container {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(0 0 0 \u002F 0.4);\n}\n.modal-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  padding: 20px 40px;\n  border-radius: 10px;\n  background-color: #fff;\n  text-align: center;\n}\n.modal-action {\n  display: flex;\n  gap: 24px;\n  justify-content: center;\n}\n.modal-button {\n  min-height: 40px;\n  padding: 0 24px;\n  border: 0;\n  border-radius: 6px;\n  background-color: #2f6fb0;\n  color: #fff;\n  cursor: pointer;\n}\n.modal-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border: 0;\n  background: none;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n```\n\nThe close icon is a real `\u003Cbutton>`, and `role=\"dialog\"` with `aria-modal` makes screen readers announce it as a dialog. The overlay is `position: fixed`, so it covers the viewport even on a scrolled page.\n\nThe only contract with the plugin: the dialog component must emit `confirm` and `cancel`. There is no need for a `show` prop or `v-if` inside the dialog: the plugin mounts and unmounts it for you.\n\nNow use it to confirm an action, for example hiding the logo. The code that runs after the user agrees goes into the `onConfirm` callback:\n\n```vue\n\u003Cscript setup>\nimport { ref } from 'vue'\nimport SimpleDialog from '.\u002Fcomponents\u002FSimpleDialog.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst showLogo = ref(true)\n\nconst { reveal, onConfirm } = createConfirmDialog(SimpleDialog, {\n  question: 'Are you sure you want to hide the logo?'\n})\n\nonConfirm(() => {\n  showLogo.value = false\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg\n    v-show=\"showLogo\"\n    alt=\"Vue logo\"\n    src=\".\u002Fassets\u002Flogo.svg\"\n    width=\"125\"\n    height=\"125\"\n  >\n  \u003Cbutton\n    type=\"button\"\n    @click=\"reveal()\"\n  >\n    Hide logo\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\n## Awaiting the answer\n\nHooks are not the only option. `reveal()` returns a promise that resolves to `{ data, isCanceled }` once the user decides, so you can write the whole flow with `async\u002Fawait`:\n\n```javascript\nconst dialog = createConfirmDialog(SimpleDialog)\n\nasync function deleteNote(note) {\n  const { isCanceled } = await dialog.reveal({ question: `Delete \"${note.title}\"?` })\n  if (isCanceled) return\n\n  await api.deleteNote(note.id)\n}\n```\n\nNote how the question is passed to `reveal()` instead of `createConfirmDialog()`: props given to `reveal` override the initial ones, so a single dialog instance can ask different questions. Whatever the dialog passes to `emit('confirm', payload)` arrives as `data`. This is also how you build chains of dialogs: await one, then reveal the next depending on the answer.\n\n## Reusing\n\nWhat if many places in the project need a confirmation? There is no need to call `createConfirmDialog` in every component. Create one instance and wrap it in a small function that answers with a boolean:\n\n```javascript\n\u002F\u002F src\u002Fcomposables\u002FconfirmAction.js\nimport SimpleDialog from '..\u002Fcomponents\u002FSimpleDialog.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst dialog = createConfirmDialog(SimpleDialog)\n\nexport async function confirmAction(question) {\n  const { isCanceled } = await dialog.reveal({ question })\n  return !isCanceled\n}\n```\n\nNow use it to confirm opening external links:\n\n```vue\n\u003C!-- App.vue -->\n\u003Cscript setup>\nimport { confirmAction } from '.\u002Fcomposables\u002FconfirmAction'\n\nconst LINKS = [\n  'https:\u002F\u002Fvuejs.org\u002F',\n  'https:\u002F\u002Fgithub.com\u002F',\n  'https:\u002F\u002Fvueuse.org\u002F'\n]\n\nasync function goToLink(link) {\n  if (await confirmAction(`Do you want to go to ${link}?`)) {\n    window.location.href = link\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli\n      v-for=\"link in LINKS\"\n      :key=\"link\"\n    >\n      \u003Cbutton\n        type=\"button\"\n        @click=\"goToLink(link)\"\n      >\n        {{ link }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n```\n\nOne instance plus `await` keeps the calling code linear: no callbacks, and the decision is just an `if`.\n\nOne thing to keep in mind when reusing an instance: props passed to `reveal()` are remembered. If a later call omits a prop, the dialog shows the previous value. Pass `{ chore: true }` as the third argument of `createConfirmDialog` to reset props after every close (and `keepInitial: true` to reset them to the initial values instead of the component defaults).\n\n## Transitions\n\nEnter and leave animations work out of the box. The plugin renders every dialog inside Vue's `\u003CTransitionGroup>` without a `name`, so Vue's default transition classes (`v-enter-active`, `v-leave-to` and the rest) are applied to the root element of your dialog component. All you need is matching CSS, no wrappers and no extra setup.\n\nHere is a dialog where the backdrop fades and the box scales in and out:\n\n```vue\n\u003C!-- TransitionDialog.vue -->\n\u003Cscript setup>\ndefineProps({\n  msg: {\n    type: String,\n    default: 'This modal fades and scales in\u002Fout via \u003CTransitionGroup>'\n  }\n})\n\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"transition-modal\"\n    @click.self=\"emit('cancel')\"\n  >\n    \u003Cdiv class=\"modal-box\">\n      \u003Cp>{{ msg }}\u003C\u002Fp>\n      \u003Cdiv class=\"modal-action\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn btn-primary\"\n          @click=\"emit('confirm', true)\"\n        >\n          Confirm\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn\"\n          @click=\"emit('cancel', false)\"\n        >\n          Cancel\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.transition-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #cecece89;\n}\n\n\u002F* Vue's default transition classes, applied to the dialog's root element *\u002F\n.transition-modal.v-enter-active,\n.transition-modal.v-leave-active {\n  transition: opacity 0.3s ease;\n}\n.transition-modal.v-enter-active .modal-box,\n.transition-modal.v-leave-active .modal-box {\n  transition: transform 0.3s ease;\n}\n.transition-modal.v-enter-from,\n.transition-modal.v-leave-to {\n  opacity: 0;\n}\n.transition-modal.v-enter-from .modal-box,\n.transition-modal.v-leave-to .modal-box {\n  transform: scale(0.85);\n}\n\u003C\u002Fstyle>\n```\n\nA few details worth noting:\n\n- The transition classes are set on the dialog's **root element**, so the selectors start with the root class (`.transition-modal.v-enter-active`). Nested elements are animated through descendant selectors, like the scaling `.modal-box` here.\n- `@click.self` on the backdrop closes the dialog on a click outside the box, but not on clicks inside it.\n- Vue waits for the leave transition to finish before removing the element, so you don't need any timers.\n\nUse it like any other dialog: `createConfirmDialog(TransitionDialog).reveal()`.\n\nA backdrop is not required. The classes go to whatever the root element is, so a dialog without an overlay, such as a toast in the corner, is animated with rules on the root alone:\n\n```vue\n\u003C!-- ToastDialog.vue -->\n\u003Cscript setup>\ndefineProps({ msg: String })\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"toast\"\n    role=\"status\"\n  >\n    \u003Cp>{{ msg }}\u003C\u002Fp>\n    \u003Cbutton\n      type=\"button\"\n      @click=\"emit('confirm')\"\n    >\n      OK\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.toast {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n}\n.toast.v-enter-active,\n.toast.v-leave-active {\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.toast.v-enter-from,\n.toast.v-leave-to {\n  opacity: 0;\n  transform: translateY(12px);\n}\n\u003C\u002Fstyle>\n```\n\nThe one requirement comes from `\u003CTransitionGroup>` itself: the dialog component must render a **single root element**. Transitions won't run if the template has several top-level elements (a fragment), if the root has a `v-if` (while it is false, the root is just a comment node), or if the root is a `\u003CTeleport>`. Scoped styles are fine: the root element gets the scope attribute, so `.toast.v-enter-active` still matches.\n\nIf your animation is not CSS-based (for example, a JavaScript animation library), the `closeDelay` option keeps the component mounted for the given number of milliseconds after it closes: `createConfirmDialog(TransitionDialog, {}, { closeDelay: 300 })`.\n\n## Closing programmatically\n\nSometimes a dialog has to close without the user's action, for example an alert that disappears after a few seconds. The instance has a `close()` method for that; it does not trigger the `onConfirm` or `onCancel` hooks. To close every open dialog at once, call `closeAll()`.\n\n```javascript\nconst alert = createConfirmDialog(Alert)\n\nalert.reveal()\nsetTimeout(() => alert.close(), 3000)\n```\n\n## Nuxt\n\nThe plugin works with SSR as a regular Vue plugin, no separate Nuxt module is needed:\n\n```typescript\n\u002F\u002F plugins\u002Fconfirm-dialog.ts\nimport * as ConfirmDialog from 'vuejs-confirm-dialog'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(ConfirmDialog)\n})\n```\n\nDialogs only ever mount in the browser: the render root is created lazily on the first `reveal()`, and a `reveal()` that happens during server rendering does nothing at all, so no dialog state can leak between requests on a long-lived server.\n\n## Conclusion\n\n`createConfirmDialog` makes modal windows easier to work with: you reuse the logic, await the user's answer and build chains of dialogs, while the plugin takes care of rendering, passing props in and getting data back out.\n\nFor the best developer experience, use it with TypeScript: the props you pass to `createConfirmDialog` and `reveal` are checked against your dialog component.\n\nFeedback, issues and pull requests are welcome on [GitHub](https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog).\n\n## Legacy: Vue 2 and 0.x\n\nEverything above is written for the current 1.x line, which supports Vue 3.5+ only. If your project is still on Vue 2, use the 0.x line: `0.6.0` is the last release with Vue 2 support (through `vue-demi`), and it lives in the [`legacy` branch](https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog\u002Ftree\u002Flegacy). Pin the version so you don't pick up 1.x by accident, and install the Composition API plugin:\n\n```bash\nnpm i vuejs-confirm-dialog@^0.6.0 @vue\u002Fcomposition-api\n```\n\nThe main difference in usage: in 0.x dialogs render through the `\u003CDialogsWrapper\u002F>` component, so it has to be placed in `App.vue`:\n\n```vue\n\u003C!-- App.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"app\">\n    \u003C!-- your app -->\n  \u003C\u002Fdiv>\n  \u003CDialogsWrapper \u002F>\n\u003C\u002Ftemplate>\n```\n\n`0.6.0` also received the fixes collected over the years: a TypeScript error when the dialog component has default prop values, a dialog that sometimes did not close when `reveal()` was immediately followed by `confirm()` or `cancel()`, and the `closeDelay` option for exit animations.\n\nUpgrading from 0.x to 1.x takes three steps: move to Vue 3.5 or newer, remove `\u003CDialogsWrapper\u002F>` from the template, and keep `app.use(ConfirmDialog)` as before.\n",{"data":24,"body":25},{},{"type":26,"children":27},"root",[28,56,61,66,80,110,133,140,145,214,227,366,379,385,411,440,720,732,738,759,2315,2352,2388,2400,2873,2879,2906,3104,3147,3153,3165,3356,3361,3820,3839,3874,3880,3916,3921,4911,4916,4963,4975,4980,5560,5601,5621,5627,5661,5757,5763,5768,5883,5902,5908,5918,5936,5948,5954,5990,6018,6038,6150,6189,6209],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33,36,45,47,54],{"type":34,"value":35},"text","Updated in October 2026 — the ",{"type":29,"tag":37,"props":38,"children":42},"a",{"href":39,"rel":40},"https:\u002F\u002Fdev.to\u002Fgarmideroman\u002Fthe-simplest-way-to-deal-with-modal-dialogs-in-vue-3-59hl",[41],"nofollow",[43],{"type":34,"value":44},"original version of this article",{"type":34,"value":46}," was published on ",{"type":29,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":34,"value":53},"dev.to",{"type":34,"value":55}," in May 2022",{"type":29,"tag":30,"props":57,"children":58},{},[59],{"type":34,"value":60},"Modal dialogs are not a difficult thing to build. They are often used to confirm a user's action, for example deleting data or logging in. It is monotonous work with repetitive logic that gets copied from component to component with minor changes.",{"type":29,"tag":30,"props":62,"children":63},{},[64],{"type":34,"value":65},"But what if you have dozens or even hundreds of similar dialogs on one page or across the whole project? Or you need to call dialogs in a chain depending on the user's choice? How do you write a reusable function that also keeps the code readable and maintainable?",{"type":29,"tag":30,"props":67,"children":68},{},[69,71,78],{"type":34,"value":70},"It would be useful to have a function that takes a dialog component and controls its rendering. The function returns an object with the dialog state and methods, so you can work with it like a promise. The ",{"type":29,"tag":37,"props":72,"children":75},{"href":73,"rel":74},"https:\u002F\u002Fgithub.com\u002Fhjkcai\u002Fvue-modal-dialogs",[41],[76],{"type":34,"value":77},"vue-modal-dialogs",{"type":34,"value":79}," plugin implemented this idea, but it has not been updated for a long time and does not support Vue 3.",{"type":29,"tag":30,"props":81,"children":82},{},[83,85,92,94,100,102,108],{"type":34,"value":84},"In this guide, I'll introduce the ",{"type":29,"tag":37,"props":86,"children":89},{"href":87,"rel":88},"https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog",[41],[90],{"type":34,"value":91},"vuejs-confirm-dialog",{"type":34,"value":93}," plugin and show how to use it. I'll start with simple examples and end with a function that completely abstracts a confirmation dialog and can be used in any component of your project. The examples are written in JavaScript for easy reading, but the plugin itself is written in TypeScript, fully typed and documented. Besides the promise API, it has two hooks: ",{"type":29,"tag":48,"props":95,"children":97},{"className":96},[],[98],{"type":34,"value":99},"onConfirm",{"type":34,"value":101}," and ",{"type":29,"tag":48,"props":103,"children":105},{"className":104},[],[106],{"type":34,"value":107},"onCancel",{"type":34,"value":109},". They accept a callback and run depending on the user's decision.",{"type":29,"tag":30,"props":111,"children":112},{},[113,115,122,124,131],{"type":34,"value":114},"The full documentation lives at ",{"type":29,"tag":37,"props":116,"children":119},{"href":117,"rel":118},"https:\u002F\u002Fvcd-docs.netlify.app",[41],[120],{"type":34,"value":121},"vcd-docs.netlify.app",{"type":34,"value":123},", and a runnable demo is in the ",{"type":29,"tag":37,"props":125,"children":128},{"href":126,"rel":127},"https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog\u002Ftree\u002Fmain\u002Fdemos\u002Fvue3",[41],[129],{"type":34,"value":130},"repository",{"type":34,"value":132},".",{"type":29,"tag":134,"props":135,"children":137},"h2",{"id":136},"installation",[138],{"type":34,"value":139},"Installation",{"type":29,"tag":30,"props":141,"children":142},{},[143],{"type":34,"value":144},"The plugin requires Vue 3.5 or newer. Create a new project with the official scaffolding tool and install the plugin:",{"type":29,"tag":146,"props":147,"children":151},"pre",{"className":148,"code":149,"language":150,"meta":19,"style":19},"language-bash shiki shiki-themes github-dark","npm create vue@latest dialogs-guide\ncd dialogs-guide\nnpm i vuejs-confirm-dialog\n","bash",[152],{"type":29,"tag":48,"props":153,"children":154},{"__ignoreMap":19},[155,183,196],{"type":29,"tag":156,"props":157,"children":160},"span",{"class":158,"line":159},"line",1,[161,167,173,178],{"type":29,"tag":156,"props":162,"children":164},{"style":163},"--shiki-default:#B392F0",[165],{"type":34,"value":166},"npm",{"type":29,"tag":156,"props":168,"children":170},{"style":169},"--shiki-default:#9ECBFF",[171],{"type":34,"value":172}," create",{"type":29,"tag":156,"props":174,"children":175},{"style":169},[176],{"type":34,"value":177}," vue@latest",{"type":29,"tag":156,"props":179,"children":180},{"style":169},[181],{"type":34,"value":182}," dialogs-guide\n",{"type":29,"tag":156,"props":184,"children":185},{"class":158,"line":17},[186,192],{"type":29,"tag":156,"props":187,"children":189},{"style":188},"--shiki-default:#79B8FF",[190],{"type":34,"value":191},"cd",{"type":29,"tag":156,"props":193,"children":194},{"style":169},[195],{"type":34,"value":182},{"type":29,"tag":156,"props":197,"children":199},{"class":158,"line":198},3,[200,204,209],{"type":29,"tag":156,"props":201,"children":202},{"style":163},[203],{"type":34,"value":166},{"type":29,"tag":156,"props":205,"children":206},{"style":169},[207],{"type":34,"value":208}," i",{"type":29,"tag":156,"props":210,"children":211},{"style":169},[212],{"type":34,"value":213}," vuejs-confirm-dialog\n",{"type":29,"tag":30,"props":215,"children":216},{},[217,219,225],{"type":34,"value":218},"Then install the plugin in ",{"type":29,"tag":48,"props":220,"children":222},{"className":221},[],[223],{"type":34,"value":224},"main.js",{"type":34,"value":226},":",{"type":29,"tag":146,"props":228,"children":231},{"className":229,"code":230,"language":10,"meta":19,"style":19},"language-javascript shiki shiki-themes github-dark","import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport * as ConfirmDialog from 'vuejs-confirm-dialog'\n\ncreateApp(App).use(ConfirmDialog).mount('#app')\n",[232],{"type":29,"tag":48,"props":233,"children":234},{"__ignoreMap":19},[235,260,281,312,322],{"type":29,"tag":156,"props":236,"children":237},{"class":158,"line":159},[238,244,250,255],{"type":29,"tag":156,"props":239,"children":241},{"style":240},"--shiki-default:#F97583",[242],{"type":34,"value":243},"import",{"type":29,"tag":156,"props":245,"children":247},{"style":246},"--shiki-default:#E1E4E8",[248],{"type":34,"value":249}," { createApp } ",{"type":29,"tag":156,"props":251,"children":252},{"style":240},[253],{"type":34,"value":254},"from",{"type":29,"tag":156,"props":256,"children":257},{"style":169},[258],{"type":34,"value":259}," 'vue'\n",{"type":29,"tag":156,"props":261,"children":262},{"class":158,"line":17},[263,267,272,276],{"type":29,"tag":156,"props":264,"children":265},{"style":240},[266],{"type":34,"value":243},{"type":29,"tag":156,"props":268,"children":269},{"style":246},[270],{"type":34,"value":271}," App ",{"type":29,"tag":156,"props":273,"children":274},{"style":240},[275],{"type":34,"value":254},{"type":29,"tag":156,"props":277,"children":278},{"style":169},[279],{"type":34,"value":280}," '.\u002FApp.vue'\n",{"type":29,"tag":156,"props":282,"children":283},{"class":158,"line":198},[284,288,293,298,303,307],{"type":29,"tag":156,"props":285,"children":286},{"style":240},[287],{"type":34,"value":243},{"type":29,"tag":156,"props":289,"children":290},{"style":188},[291],{"type":34,"value":292}," *",{"type":29,"tag":156,"props":294,"children":295},{"style":240},[296],{"type":34,"value":297}," as",{"type":29,"tag":156,"props":299,"children":300},{"style":246},[301],{"type":34,"value":302}," ConfirmDialog ",{"type":29,"tag":156,"props":304,"children":305},{"style":240},[306],{"type":34,"value":254},{"type":29,"tag":156,"props":308,"children":309},{"style":169},[310],{"type":34,"value":311}," 'vuejs-confirm-dialog'\n",{"type":29,"tag":156,"props":313,"children":315},{"class":158,"line":314},4,[316],{"type":29,"tag":156,"props":317,"children":319},{"emptyLinePlaceholder":318},true,[320],{"type":34,"value":321},"\n",{"type":29,"tag":156,"props":323,"children":325},{"class":158,"line":324},5,[326,331,336,341,346,351,356,361],{"type":29,"tag":156,"props":327,"children":328},{"style":163},[329],{"type":34,"value":330},"createApp",{"type":29,"tag":156,"props":332,"children":333},{"style":246},[334],{"type":34,"value":335},"(App).",{"type":29,"tag":156,"props":337,"children":338},{"style":163},[339],{"type":34,"value":340},"use",{"type":29,"tag":156,"props":342,"children":343},{"style":246},[344],{"type":34,"value":345},"(ConfirmDialog).",{"type":29,"tag":156,"props":347,"children":348},{"style":163},[349],{"type":34,"value":350},"mount",{"type":29,"tag":156,"props":352,"children":353},{"style":246},[354],{"type":34,"value":355},"(",{"type":29,"tag":156,"props":357,"children":358},{"style":169},[359],{"type":34,"value":360},"'#app'",{"type":29,"tag":156,"props":362,"children":363},{"style":246},[364],{"type":34,"value":365},")\n",{"type":29,"tag":30,"props":367,"children":368},{},[369,371,377],{"type":34,"value":370},"This step is recommended rather than required: with the plugin installed, dialog components can ",{"type":29,"tag":48,"props":372,"children":374},{"className":373},[],[375],{"type":34,"value":376},"inject()",{"type":34,"value":378}," whatever your app provides (router, i18n, stores). Without it, dialogs still work, just without that context.",{"type":29,"tag":134,"props":380,"children":382},{"id":381},"usage",[383],{"type":34,"value":384},"Usage",{"type":29,"tag":30,"props":386,"children":387},{},[388,394,396,402,404,409],{"type":29,"tag":48,"props":389,"children":391},{"className":390},[],[392],{"type":34,"value":393},"createConfirmDialog",{"type":34,"value":395}," takes a component that will act as the modal dialog as its first argument, and an object with the component's props as the second. It returns an object for controlling the dialog: ",{"type":29,"tag":48,"props":397,"children":399},{"className":398},[],[400],{"type":34,"value":401},"reveal",{"type":34,"value":403}," renders it, and ",{"type":29,"tag":48,"props":405,"children":407},{"className":406},[],[408],{"type":34,"value":99},{"type":34,"value":410}," takes a callback that runs if the user agrees.",{"type":29,"tag":30,"props":412,"children":413},{},[414,416,422,424,430,432,438],{"type":34,"value":415},"You don't need to add anything to the template: the library mounts its own render root the first time you call ",{"type":29,"tag":48,"props":417,"children":419},{"className":418},[],[420],{"type":34,"value":421},"reveal()",{"type":34,"value":423},". For a quick test, reuse the ",{"type":29,"tag":48,"props":425,"children":427},{"className":426},[],[428],{"type":34,"value":429},"HelloWorld",{"type":34,"value":431}," component from the new project and pass its ",{"type":29,"tag":48,"props":433,"children":435},{"className":434},[],[436],{"type":34,"value":437},"msg",{"type":34,"value":439}," prop:",{"type":29,"tag":146,"props":441,"children":444},{"className":442,"code":443,"language":11,"meta":19,"style":19},"language-vue shiki shiki-themes github-dark","\u003C!-- App.vue -->\n\u003Cscript setup>\nimport HelloWorld from '.\u002Fcomponents\u002FHelloWorld.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst { reveal } = createConfirmDialog(HelloWorld, { msg: 'Hi!' })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    type=\"button\"\n    @click=\"reveal()\"\n  >\n    Show dialog\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[445],{"type":29,"tag":48,"props":446,"children":447},{"__ignoreMap":19},[448,457,481,502,522,529,577,594,602,619,632,650,668,677,686,704],{"type":29,"tag":156,"props":449,"children":450},{"class":158,"line":159},[451],{"type":29,"tag":156,"props":452,"children":454},{"style":453},"--shiki-default:#6A737D",[455],{"type":34,"value":456},"\u003C!-- App.vue -->\n",{"type":29,"tag":156,"props":458,"children":459},{"class":158,"line":17},[460,465,471,476],{"type":29,"tag":156,"props":461,"children":462},{"style":246},[463],{"type":34,"value":464},"\u003C",{"type":29,"tag":156,"props":466,"children":468},{"style":467},"--shiki-default:#85E89D",[469],{"type":34,"value":470},"script",{"type":29,"tag":156,"props":472,"children":473},{"style":163},[474],{"type":34,"value":475}," setup",{"type":29,"tag":156,"props":477,"children":478},{"style":246},[479],{"type":34,"value":480},">\n",{"type":29,"tag":156,"props":482,"children":483},{"class":158,"line":198},[484,488,493,497],{"type":29,"tag":156,"props":485,"children":486},{"style":240},[487],{"type":34,"value":243},{"type":29,"tag":156,"props":489,"children":490},{"style":246},[491],{"type":34,"value":492}," HelloWorld ",{"type":29,"tag":156,"props":494,"children":495},{"style":240},[496],{"type":34,"value":254},{"type":29,"tag":156,"props":498,"children":499},{"style":169},[500],{"type":34,"value":501}," '.\u002Fcomponents\u002FHelloWorld.vue'\n",{"type":29,"tag":156,"props":503,"children":504},{"class":158,"line":314},[505,509,514,518],{"type":29,"tag":156,"props":506,"children":507},{"style":240},[508],{"type":34,"value":243},{"type":29,"tag":156,"props":510,"children":511},{"style":246},[512],{"type":34,"value":513}," { createConfirmDialog } ",{"type":29,"tag":156,"props":515,"children":516},{"style":240},[517],{"type":34,"value":254},{"type":29,"tag":156,"props":519,"children":520},{"style":169},[521],{"type":34,"value":311},{"type":29,"tag":156,"props":523,"children":524},{"class":158,"line":324},[525],{"type":29,"tag":156,"props":526,"children":527},{"emptyLinePlaceholder":318},[528],{"type":34,"value":321},{"type":29,"tag":156,"props":530,"children":532},{"class":158,"line":531},6,[533,538,543,547,552,557,562,567,572],{"type":29,"tag":156,"props":534,"children":535},{"style":240},[536],{"type":34,"value":537},"const",{"type":29,"tag":156,"props":539,"children":540},{"style":246},[541],{"type":34,"value":542}," { ",{"type":29,"tag":156,"props":544,"children":545},{"style":188},[546],{"type":34,"value":401},{"type":29,"tag":156,"props":548,"children":549},{"style":246},[550],{"type":34,"value":551}," } ",{"type":29,"tag":156,"props":553,"children":554},{"style":240},[555],{"type":34,"value":556},"=",{"type":29,"tag":156,"props":558,"children":559},{"style":163},[560],{"type":34,"value":561}," createConfirmDialog",{"type":29,"tag":156,"props":563,"children":564},{"style":246},[565],{"type":34,"value":566},"(HelloWorld, { msg: ",{"type":29,"tag":156,"props":568,"children":569},{"style":169},[570],{"type":34,"value":571},"'Hi!'",{"type":29,"tag":156,"props":573,"children":574},{"style":246},[575],{"type":34,"value":576}," })\n",{"type":29,"tag":156,"props":578,"children":580},{"class":158,"line":579},7,[581,586,590],{"type":29,"tag":156,"props":582,"children":583},{"style":246},[584],{"type":34,"value":585},"\u003C\u002F",{"type":29,"tag":156,"props":587,"children":588},{"style":467},[589],{"type":34,"value":470},{"type":29,"tag":156,"props":591,"children":592},{"style":246},[593],{"type":34,"value":480},{"type":29,"tag":156,"props":595,"children":597},{"class":158,"line":596},8,[598],{"type":29,"tag":156,"props":599,"children":600},{"emptyLinePlaceholder":318},[601],{"type":34,"value":321},{"type":29,"tag":156,"props":603,"children":605},{"class":158,"line":604},9,[606,610,615],{"type":29,"tag":156,"props":607,"children":608},{"style":246},[609],{"type":34,"value":464},{"type":29,"tag":156,"props":611,"children":612},{"style":467},[613],{"type":34,"value":614},"template",{"type":29,"tag":156,"props":616,"children":617},{"style":246},[618],{"type":34,"value":480},{"type":29,"tag":156,"props":620,"children":621},{"class":158,"line":20},[622,627],{"type":29,"tag":156,"props":623,"children":624},{"style":246},[625],{"type":34,"value":626},"  \u003C",{"type":29,"tag":156,"props":628,"children":629},{"style":467},[630],{"type":34,"value":631},"button\n",{"type":29,"tag":156,"props":633,"children":635},{"class":158,"line":634},11,[636,641,645],{"type":29,"tag":156,"props":637,"children":638},{"style":163},[639],{"type":34,"value":640},"    type",{"type":29,"tag":156,"props":642,"children":643},{"style":246},[644],{"type":34,"value":556},{"type":29,"tag":156,"props":646,"children":647},{"style":169},[648],{"type":34,"value":649},"\"button\"\n",{"type":29,"tag":156,"props":651,"children":653},{"class":158,"line":652},12,[654,659,663],{"type":29,"tag":156,"props":655,"children":656},{"style":163},[657],{"type":34,"value":658},"    @click",{"type":29,"tag":156,"props":660,"children":661},{"style":246},[662],{"type":34,"value":556},{"type":29,"tag":156,"props":664,"children":665},{"style":169},[666],{"type":34,"value":667},"\"reveal()\"\n",{"type":29,"tag":156,"props":669,"children":671},{"class":158,"line":670},13,[672],{"type":29,"tag":156,"props":673,"children":674},{"style":246},[675],{"type":34,"value":676},"  >\n",{"type":29,"tag":156,"props":678,"children":680},{"class":158,"line":679},14,[681],{"type":29,"tag":156,"props":682,"children":683},{"style":246},[684],{"type":34,"value":685},"    Show dialog\n",{"type":29,"tag":156,"props":687,"children":689},{"class":158,"line":688},15,[690,695,700],{"type":29,"tag":156,"props":691,"children":692},{"style":246},[693],{"type":34,"value":694},"  \u003C\u002F",{"type":29,"tag":156,"props":696,"children":697},{"style":467},[698],{"type":34,"value":699},"button",{"type":29,"tag":156,"props":701,"children":702},{"style":246},[703],{"type":34,"value":480},{"type":29,"tag":156,"props":705,"children":707},{"class":158,"line":706},16,[708,712,716],{"type":29,"tag":156,"props":709,"children":710},{"style":246},[711],{"type":34,"value":585},{"type":29,"tag":156,"props":713,"children":714},{"style":467},[715],{"type":34,"value":614},{"type":29,"tag":156,"props":717,"children":718},{"style":246},[719],{"type":34,"value":480},{"type":29,"tag":30,"props":721,"children":722},{},[723,725,730],{"type":34,"value":724},"No additional logic is required. The component renders after ",{"type":29,"tag":48,"props":726,"children":728},{"className":727},[],[729],{"type":34,"value":421},{"type":34,"value":731}," and disappears after the user responds.",{"type":29,"tag":134,"props":733,"children":735},{"id":734},"real-life-example",[736],{"type":34,"value":737},"Real life example",{"type":29,"tag":30,"props":739,"children":740},{},[741,743,749,751,757],{"type":34,"value":742},"Now let's write something closer to real use. Create ",{"type":29,"tag":48,"props":744,"children":746},{"className":745},[],[747],{"type":34,"value":748},"SimpleDialog.vue",{"type":34,"value":750}," in the ",{"type":29,"tag":48,"props":752,"children":754},{"className":753},[],[755],{"type":34,"value":756},"components",{"type":34,"value":758}," folder:",{"type":29,"tag":146,"props":760,"children":762},{"className":442,"code":761,"language":11,"meta":19,"style":19},"\u003Cscript setup>\ndefineProps({ question: String })\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"modal-container\">\n    \u003Cdiv\n      class=\"modal-body\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modal-question\"\n    >\n      \u003Cbutton\n        type=\"button\"\n        class=\"modal-close\"\n        aria-label=\"Close\"\n        @click=\"emit('cancel')\"\n      >\n        ✕\n      \u003C\u002Fbutton>\n      \u003Ch2 id=\"modal-question\">{{ question }}\u003C\u002Fh2>\n      \u003Cdiv class=\"modal-action\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"modal-button\"\n          @click=\"emit('confirm')\"\n        >\n          Confirm\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          class=\"modal-button\"\n          @click=\"emit('cancel')\"\n        >\n          Cancel\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.modal-container {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(0 0 0 \u002F 0.4);\n}\n.modal-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  padding: 20px 40px;\n  border-radius: 10px;\n  background-color: #fff;\n  text-align: center;\n}\n.modal-action {\n  display: flex;\n  gap: 24px;\n  justify-content: center;\n}\n.modal-button {\n  min-height: 40px;\n  padding: 0 24px;\n  border: 0;\n  border-radius: 6px;\n  background-color: #2f6fb0;\n  color: #fff;\n  cursor: pointer;\n}\n.modal-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border: 0;\n  background: none;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[763],{"type":29,"tag":48,"props":764,"children":765},{"__ignoreMap":19},[766,785,798,845,860,867,882,912,925,942,959,976,993,1001,1013,1029,1046,1063,1081,1090,1099,1116,1155,1184,1197,1214,1232,1250,1259,1268,1285,1297,1313,1329,1345,1353,1362,1378,1394,1411,1427,1443,1451,1473,1487,1511,1533,1555,1577,1598,1648,1657,1670,1691,1711,1733,1760,1795,1821,1842,1863,1871,1884,1904,1930,1950,1958,1971,1997,2026,2047,2072,2093,2114,2136,2144,2157,2178,2204,2229,2249,2271,2291,2299],{"type":29,"tag":156,"props":767,"children":768},{"class":158,"line":159},[769,773,777,781],{"type":29,"tag":156,"props":770,"children":771},{"style":246},[772],{"type":34,"value":464},{"type":29,"tag":156,"props":774,"children":775},{"style":467},[776],{"type":34,"value":470},{"type":29,"tag":156,"props":778,"children":779},{"style":163},[780],{"type":34,"value":475},{"type":29,"tag":156,"props":782,"children":783},{"style":246},[784],{"type":34,"value":480},{"type":29,"tag":156,"props":786,"children":787},{"class":158,"line":17},[788,793],{"type":29,"tag":156,"props":789,"children":790},{"style":163},[791],{"type":34,"value":792},"defineProps",{"type":29,"tag":156,"props":794,"children":795},{"style":246},[796],{"type":34,"value":797},"({ question: String })\n",{"type":29,"tag":156,"props":799,"children":800},{"class":158,"line":198},[801,805,810,815,820,825,830,835,840],{"type":29,"tag":156,"props":802,"children":803},{"style":240},[804],{"type":34,"value":537},{"type":29,"tag":156,"props":806,"children":807},{"style":188},[808],{"type":34,"value":809}," emit",{"type":29,"tag":156,"props":811,"children":812},{"style":240},[813],{"type":34,"value":814}," =",{"type":29,"tag":156,"props":816,"children":817},{"style":163},[818],{"type":34,"value":819}," defineEmits",{"type":29,"tag":156,"props":821,"children":822},{"style":246},[823],{"type":34,"value":824},"([",{"type":29,"tag":156,"props":826,"children":827},{"style":169},[828],{"type":34,"value":829},"'confirm'",{"type":29,"tag":156,"props":831,"children":832},{"style":246},[833],{"type":34,"value":834},", ",{"type":29,"tag":156,"props":836,"children":837},{"style":169},[838],{"type":34,"value":839},"'cancel'",{"type":29,"tag":156,"props":841,"children":842},{"style":246},[843],{"type":34,"value":844},"])\n",{"type":29,"tag":156,"props":846,"children":847},{"class":158,"line":314},[848,852,856],{"type":29,"tag":156,"props":849,"children":850},{"style":246},[851],{"type":34,"value":585},{"type":29,"tag":156,"props":853,"children":854},{"style":467},[855],{"type":34,"value":470},{"type":29,"tag":156,"props":857,"children":858},{"style":246},[859],{"type":34,"value":480},{"type":29,"tag":156,"props":861,"children":862},{"class":158,"line":324},[863],{"type":29,"tag":156,"props":864,"children":865},{"emptyLinePlaceholder":318},[866],{"type":34,"value":321},{"type":29,"tag":156,"props":868,"children":869},{"class":158,"line":531},[870,874,878],{"type":29,"tag":156,"props":871,"children":872},{"style":246},[873],{"type":34,"value":464},{"type":29,"tag":156,"props":875,"children":876},{"style":467},[877],{"type":34,"value":614},{"type":29,"tag":156,"props":879,"children":880},{"style":246},[881],{"type":34,"value":480},{"type":29,"tag":156,"props":883,"children":884},{"class":158,"line":579},[885,889,894,899,903,908],{"type":29,"tag":156,"props":886,"children":887},{"style":246},[888],{"type":34,"value":626},{"type":29,"tag":156,"props":890,"children":891},{"style":467},[892],{"type":34,"value":893},"div",{"type":29,"tag":156,"props":895,"children":896},{"style":163},[897],{"type":34,"value":898}," class",{"type":29,"tag":156,"props":900,"children":901},{"style":246},[902],{"type":34,"value":556},{"type":29,"tag":156,"props":904,"children":905},{"style":169},[906],{"type":34,"value":907},"\"modal-container\"",{"type":29,"tag":156,"props":909,"children":910},{"style":246},[911],{"type":34,"value":480},{"type":29,"tag":156,"props":913,"children":914},{"class":158,"line":596},[915,920],{"type":29,"tag":156,"props":916,"children":917},{"style":246},[918],{"type":34,"value":919},"    \u003C",{"type":29,"tag":156,"props":921,"children":922},{"style":467},[923],{"type":34,"value":924},"div\n",{"type":29,"tag":156,"props":926,"children":927},{"class":158,"line":604},[928,933,937],{"type":29,"tag":156,"props":929,"children":930},{"style":163},[931],{"type":34,"value":932},"      class",{"type":29,"tag":156,"props":934,"children":935},{"style":246},[936],{"type":34,"value":556},{"type":29,"tag":156,"props":938,"children":939},{"style":169},[940],{"type":34,"value":941},"\"modal-body\"\n",{"type":29,"tag":156,"props":943,"children":944},{"class":158,"line":20},[945,950,954],{"type":29,"tag":156,"props":946,"children":947},{"style":163},[948],{"type":34,"value":949},"      role",{"type":29,"tag":156,"props":951,"children":952},{"style":246},[953],{"type":34,"value":556},{"type":29,"tag":156,"props":955,"children":956},{"style":169},[957],{"type":34,"value":958},"\"dialog\"\n",{"type":29,"tag":156,"props":960,"children":961},{"class":158,"line":634},[962,967,971],{"type":29,"tag":156,"props":963,"children":964},{"style":163},[965],{"type":34,"value":966},"      aria-modal",{"type":29,"tag":156,"props":968,"children":969},{"style":246},[970],{"type":34,"value":556},{"type":29,"tag":156,"props":972,"children":973},{"style":169},[974],{"type":34,"value":975},"\"true\"\n",{"type":29,"tag":156,"props":977,"children":978},{"class":158,"line":652},[979,984,988],{"type":29,"tag":156,"props":980,"children":981},{"style":163},[982],{"type":34,"value":983},"      aria-labelledby",{"type":29,"tag":156,"props":985,"children":986},{"style":246},[987],{"type":34,"value":556},{"type":29,"tag":156,"props":989,"children":990},{"style":169},[991],{"type":34,"value":992},"\"modal-question\"\n",{"type":29,"tag":156,"props":994,"children":995},{"class":158,"line":670},[996],{"type":29,"tag":156,"props":997,"children":998},{"style":246},[999],{"type":34,"value":1000},"    >\n",{"type":29,"tag":156,"props":1002,"children":1003},{"class":158,"line":679},[1004,1009],{"type":29,"tag":156,"props":1005,"children":1006},{"style":246},[1007],{"type":34,"value":1008},"      \u003C",{"type":29,"tag":156,"props":1010,"children":1011},{"style":467},[1012],{"type":34,"value":631},{"type":29,"tag":156,"props":1014,"children":1015},{"class":158,"line":688},[1016,1021,1025],{"type":29,"tag":156,"props":1017,"children":1018},{"style":163},[1019],{"type":34,"value":1020},"        type",{"type":29,"tag":156,"props":1022,"children":1023},{"style":246},[1024],{"type":34,"value":556},{"type":29,"tag":156,"props":1026,"children":1027},{"style":169},[1028],{"type":34,"value":649},{"type":29,"tag":156,"props":1030,"children":1031},{"class":158,"line":706},[1032,1037,1041],{"type":29,"tag":156,"props":1033,"children":1034},{"style":163},[1035],{"type":34,"value":1036},"        class",{"type":29,"tag":156,"props":1038,"children":1039},{"style":246},[1040],{"type":34,"value":556},{"type":29,"tag":156,"props":1042,"children":1043},{"style":169},[1044],{"type":34,"value":1045},"\"modal-close\"\n",{"type":29,"tag":156,"props":1047,"children":1048},{"class":158,"line":16},[1049,1054,1058],{"type":29,"tag":156,"props":1050,"children":1051},{"style":163},[1052],{"type":34,"value":1053},"        aria-label",{"type":29,"tag":156,"props":1055,"children":1056},{"style":246},[1057],{"type":34,"value":556},{"type":29,"tag":156,"props":1059,"children":1060},{"style":169},[1061],{"type":34,"value":1062},"\"Close\"\n",{"type":29,"tag":156,"props":1064,"children":1066},{"class":158,"line":1065},18,[1067,1072,1076],{"type":29,"tag":156,"props":1068,"children":1069},{"style":163},[1070],{"type":34,"value":1071},"        @click",{"type":29,"tag":156,"props":1073,"children":1074},{"style":246},[1075],{"type":34,"value":556},{"type":29,"tag":156,"props":1077,"children":1078},{"style":169},[1079],{"type":34,"value":1080},"\"emit('cancel')\"\n",{"type":29,"tag":156,"props":1082,"children":1084},{"class":158,"line":1083},19,[1085],{"type":29,"tag":156,"props":1086,"children":1087},{"style":246},[1088],{"type":34,"value":1089},"      >\n",{"type":29,"tag":156,"props":1091,"children":1093},{"class":158,"line":1092},20,[1094],{"type":29,"tag":156,"props":1095,"children":1096},{"style":246},[1097],{"type":34,"value":1098},"        ✕\n",{"type":29,"tag":156,"props":1100,"children":1102},{"class":158,"line":1101},21,[1103,1108,1112],{"type":29,"tag":156,"props":1104,"children":1105},{"style":246},[1106],{"type":34,"value":1107},"      \u003C\u002F",{"type":29,"tag":156,"props":1109,"children":1110},{"style":467},[1111],{"type":34,"value":699},{"type":29,"tag":156,"props":1113,"children":1114},{"style":246},[1115],{"type":34,"value":480},{"type":29,"tag":156,"props":1117,"children":1119},{"class":158,"line":1118},22,[1120,1124,1128,1133,1137,1142,1147,1151],{"type":29,"tag":156,"props":1121,"children":1122},{"style":246},[1123],{"type":34,"value":1008},{"type":29,"tag":156,"props":1125,"children":1126},{"style":467},[1127],{"type":34,"value":134},{"type":29,"tag":156,"props":1129,"children":1130},{"style":163},[1131],{"type":34,"value":1132}," id",{"type":29,"tag":156,"props":1134,"children":1135},{"style":246},[1136],{"type":34,"value":556},{"type":29,"tag":156,"props":1138,"children":1139},{"style":169},[1140],{"type":34,"value":1141},"\"modal-question\"",{"type":29,"tag":156,"props":1143,"children":1144},{"style":246},[1145],{"type":34,"value":1146},">{{ question }}\u003C\u002F",{"type":29,"tag":156,"props":1148,"children":1149},{"style":467},[1150],{"type":34,"value":134},{"type":29,"tag":156,"props":1152,"children":1153},{"style":246},[1154],{"type":34,"value":480},{"type":29,"tag":156,"props":1156,"children":1158},{"class":158,"line":1157},23,[1159,1163,1167,1171,1175,1180],{"type":29,"tag":156,"props":1160,"children":1161},{"style":246},[1162],{"type":34,"value":1008},{"type":29,"tag":156,"props":1164,"children":1165},{"style":467},[1166],{"type":34,"value":893},{"type":29,"tag":156,"props":1168,"children":1169},{"style":163},[1170],{"type":34,"value":898},{"type":29,"tag":156,"props":1172,"children":1173},{"style":246},[1174],{"type":34,"value":556},{"type":29,"tag":156,"props":1176,"children":1177},{"style":169},[1178],{"type":34,"value":1179},"\"modal-action\"",{"type":29,"tag":156,"props":1181,"children":1182},{"style":246},[1183],{"type":34,"value":480},{"type":29,"tag":156,"props":1185,"children":1187},{"class":158,"line":1186},24,[1188,1193],{"type":29,"tag":156,"props":1189,"children":1190},{"style":246},[1191],{"type":34,"value":1192},"        \u003C",{"type":29,"tag":156,"props":1194,"children":1195},{"style":467},[1196],{"type":34,"value":631},{"type":29,"tag":156,"props":1198,"children":1200},{"class":158,"line":1199},25,[1201,1206,1210],{"type":29,"tag":156,"props":1202,"children":1203},{"style":163},[1204],{"type":34,"value":1205},"          type",{"type":29,"tag":156,"props":1207,"children":1208},{"style":246},[1209],{"type":34,"value":556},{"type":29,"tag":156,"props":1211,"children":1212},{"style":169},[1213],{"type":34,"value":649},{"type":29,"tag":156,"props":1215,"children":1217},{"class":158,"line":1216},26,[1218,1223,1227],{"type":29,"tag":156,"props":1219,"children":1220},{"style":163},[1221],{"type":34,"value":1222},"          class",{"type":29,"tag":156,"props":1224,"children":1225},{"style":246},[1226],{"type":34,"value":556},{"type":29,"tag":156,"props":1228,"children":1229},{"style":169},[1230],{"type":34,"value":1231},"\"modal-button\"\n",{"type":29,"tag":156,"props":1233,"children":1235},{"class":158,"line":1234},27,[1236,1241,1245],{"type":29,"tag":156,"props":1237,"children":1238},{"style":163},[1239],{"type":34,"value":1240},"          @click",{"type":29,"tag":156,"props":1242,"children":1243},{"style":246},[1244],{"type":34,"value":556},{"type":29,"tag":156,"props":1246,"children":1247},{"style":169},[1248],{"type":34,"value":1249},"\"emit('confirm')\"\n",{"type":29,"tag":156,"props":1251,"children":1253},{"class":158,"line":1252},28,[1254],{"type":29,"tag":156,"props":1255,"children":1256},{"style":246},[1257],{"type":34,"value":1258},"        >\n",{"type":29,"tag":156,"props":1260,"children":1262},{"class":158,"line":1261},29,[1263],{"type":29,"tag":156,"props":1264,"children":1265},{"style":246},[1266],{"type":34,"value":1267},"          Confirm\n",{"type":29,"tag":156,"props":1269,"children":1271},{"class":158,"line":1270},30,[1272,1277,1281],{"type":29,"tag":156,"props":1273,"children":1274},{"style":246},[1275],{"type":34,"value":1276},"        \u003C\u002F",{"type":29,"tag":156,"props":1278,"children":1279},{"style":467},[1280],{"type":34,"value":699},{"type":29,"tag":156,"props":1282,"children":1283},{"style":246},[1284],{"type":34,"value":480},{"type":29,"tag":156,"props":1286,"children":1288},{"class":158,"line":1287},31,[1289,1293],{"type":29,"tag":156,"props":1290,"children":1291},{"style":246},[1292],{"type":34,"value":1192},{"type":29,"tag":156,"props":1294,"children":1295},{"style":467},[1296],{"type":34,"value":631},{"type":29,"tag":156,"props":1298,"children":1300},{"class":158,"line":1299},32,[1301,1305,1309],{"type":29,"tag":156,"props":1302,"children":1303},{"style":163},[1304],{"type":34,"value":1205},{"type":29,"tag":156,"props":1306,"children":1307},{"style":246},[1308],{"type":34,"value":556},{"type":29,"tag":156,"props":1310,"children":1311},{"style":169},[1312],{"type":34,"value":649},{"type":29,"tag":156,"props":1314,"children":1316},{"class":158,"line":1315},33,[1317,1321,1325],{"type":29,"tag":156,"props":1318,"children":1319},{"style":163},[1320],{"type":34,"value":1222},{"type":29,"tag":156,"props":1322,"children":1323},{"style":246},[1324],{"type":34,"value":556},{"type":29,"tag":156,"props":1326,"children":1327},{"style":169},[1328],{"type":34,"value":1231},{"type":29,"tag":156,"props":1330,"children":1332},{"class":158,"line":1331},34,[1333,1337,1341],{"type":29,"tag":156,"props":1334,"children":1335},{"style":163},[1336],{"type":34,"value":1240},{"type":29,"tag":156,"props":1338,"children":1339},{"style":246},[1340],{"type":34,"value":556},{"type":29,"tag":156,"props":1342,"children":1343},{"style":169},[1344],{"type":34,"value":1080},{"type":29,"tag":156,"props":1346,"children":1348},{"class":158,"line":1347},35,[1349],{"type":29,"tag":156,"props":1350,"children":1351},{"style":246},[1352],{"type":34,"value":1258},{"type":29,"tag":156,"props":1354,"children":1356},{"class":158,"line":1355},36,[1357],{"type":29,"tag":156,"props":1358,"children":1359},{"style":246},[1360],{"type":34,"value":1361},"          Cancel\n",{"type":29,"tag":156,"props":1363,"children":1365},{"class":158,"line":1364},37,[1366,1370,1374],{"type":29,"tag":156,"props":1367,"children":1368},{"style":246},[1369],{"type":34,"value":1276},{"type":29,"tag":156,"props":1371,"children":1372},{"style":467},[1373],{"type":34,"value":699},{"type":29,"tag":156,"props":1375,"children":1376},{"style":246},[1377],{"type":34,"value":480},{"type":29,"tag":156,"props":1379,"children":1381},{"class":158,"line":1380},38,[1382,1386,1390],{"type":29,"tag":156,"props":1383,"children":1384},{"style":246},[1385],{"type":34,"value":1107},{"type":29,"tag":156,"props":1387,"children":1388},{"style":467},[1389],{"type":34,"value":893},{"type":29,"tag":156,"props":1391,"children":1392},{"style":246},[1393],{"type":34,"value":480},{"type":29,"tag":156,"props":1395,"children":1397},{"class":158,"line":1396},39,[1398,1403,1407],{"type":29,"tag":156,"props":1399,"children":1400},{"style":246},[1401],{"type":34,"value":1402},"    \u003C\u002F",{"type":29,"tag":156,"props":1404,"children":1405},{"style":467},[1406],{"type":34,"value":893},{"type":29,"tag":156,"props":1408,"children":1409},{"style":246},[1410],{"type":34,"value":480},{"type":29,"tag":156,"props":1412,"children":1414},{"class":158,"line":1413},40,[1415,1419,1423],{"type":29,"tag":156,"props":1416,"children":1417},{"style":246},[1418],{"type":34,"value":694},{"type":29,"tag":156,"props":1420,"children":1421},{"style":467},[1422],{"type":34,"value":893},{"type":29,"tag":156,"props":1424,"children":1425},{"style":246},[1426],{"type":34,"value":480},{"type":29,"tag":156,"props":1428,"children":1430},{"class":158,"line":1429},41,[1431,1435,1439],{"type":29,"tag":156,"props":1432,"children":1433},{"style":246},[1434],{"type":34,"value":585},{"type":29,"tag":156,"props":1436,"children":1437},{"style":467},[1438],{"type":34,"value":614},{"type":29,"tag":156,"props":1440,"children":1441},{"style":246},[1442],{"type":34,"value":480},{"type":29,"tag":156,"props":1444,"children":1446},{"class":158,"line":1445},42,[1447],{"type":29,"tag":156,"props":1448,"children":1449},{"emptyLinePlaceholder":318},[1450],{"type":34,"value":321},{"type":29,"tag":156,"props":1452,"children":1454},{"class":158,"line":1453},43,[1455,1459,1464,1469],{"type":29,"tag":156,"props":1456,"children":1457},{"style":246},[1458],{"type":34,"value":464},{"type":29,"tag":156,"props":1460,"children":1461},{"style":467},[1462],{"type":34,"value":1463},"style",{"type":29,"tag":156,"props":1465,"children":1466},{"style":163},[1467],{"type":34,"value":1468}," scoped",{"type":29,"tag":156,"props":1470,"children":1471},{"style":246},[1472],{"type":34,"value":480},{"type":29,"tag":156,"props":1474,"children":1476},{"class":158,"line":1475},44,[1477,1482],{"type":29,"tag":156,"props":1478,"children":1479},{"style":163},[1480],{"type":34,"value":1481},".modal-container",{"type":29,"tag":156,"props":1483,"children":1484},{"style":246},[1485],{"type":34,"value":1486}," {\n",{"type":29,"tag":156,"props":1488,"children":1490},{"class":158,"line":1489},45,[1491,1496,1501,1506],{"type":29,"tag":156,"props":1492,"children":1493},{"style":188},[1494],{"type":34,"value":1495},"  position",{"type":29,"tag":156,"props":1497,"children":1498},{"style":246},[1499],{"type":34,"value":1500},": ",{"type":29,"tag":156,"props":1502,"children":1503},{"style":188},[1504],{"type":34,"value":1505},"fixed",{"type":29,"tag":156,"props":1507,"children":1508},{"style":246},[1509],{"type":34,"value":1510},";\n",{"type":29,"tag":156,"props":1512,"children":1514},{"class":158,"line":1513},46,[1515,1520,1524,1529],{"type":29,"tag":156,"props":1516,"children":1517},{"style":188},[1518],{"type":34,"value":1519},"  inset",{"type":29,"tag":156,"props":1521,"children":1522},{"style":246},[1523],{"type":34,"value":1500},{"type":29,"tag":156,"props":1525,"children":1526},{"style":188},[1527],{"type":34,"value":1528},"0",{"type":29,"tag":156,"props":1530,"children":1531},{"style":246},[1532],{"type":34,"value":1510},{"type":29,"tag":156,"props":1534,"children":1536},{"class":158,"line":1535},47,[1537,1542,1546,1551],{"type":29,"tag":156,"props":1538,"children":1539},{"style":188},[1540],{"type":34,"value":1541},"  display",{"type":29,"tag":156,"props":1543,"children":1544},{"style":246},[1545],{"type":34,"value":1500},{"type":29,"tag":156,"props":1547,"children":1548},{"style":188},[1549],{"type":34,"value":1550},"flex",{"type":29,"tag":156,"props":1552,"children":1553},{"style":246},[1554],{"type":34,"value":1510},{"type":29,"tag":156,"props":1556,"children":1558},{"class":158,"line":1557},48,[1559,1564,1568,1573],{"type":29,"tag":156,"props":1560,"children":1561},{"style":188},[1562],{"type":34,"value":1563},"  justify-content",{"type":29,"tag":156,"props":1565,"children":1566},{"style":246},[1567],{"type":34,"value":1500},{"type":29,"tag":156,"props":1569,"children":1570},{"style":188},[1571],{"type":34,"value":1572},"center",{"type":29,"tag":156,"props":1574,"children":1575},{"style":246},[1576],{"type":34,"value":1510},{"type":29,"tag":156,"props":1578,"children":1580},{"class":158,"line":1579},49,[1581,1586,1590,1594],{"type":29,"tag":156,"props":1582,"children":1583},{"style":188},[1584],{"type":34,"value":1585},"  align-items",{"type":29,"tag":156,"props":1587,"children":1588},{"style":246},[1589],{"type":34,"value":1500},{"type":29,"tag":156,"props":1591,"children":1592},{"style":188},[1593],{"type":34,"value":1572},{"type":29,"tag":156,"props":1595,"children":1596},{"style":246},[1597],{"type":34,"value":1510},{"type":29,"tag":156,"props":1599,"children":1601},{"class":158,"line":1600},50,[1602,1607,1611,1616,1620,1624,1629,1633,1638,1643],{"type":29,"tag":156,"props":1603,"children":1604},{"style":188},[1605],{"type":34,"value":1606},"  background-color",{"type":29,"tag":156,"props":1608,"children":1609},{"style":246},[1610],{"type":34,"value":1500},{"type":29,"tag":156,"props":1612,"children":1613},{"style":188},[1614],{"type":34,"value":1615},"rgb",{"type":29,"tag":156,"props":1617,"children":1618},{"style":246},[1619],{"type":34,"value":355},{"type":29,"tag":156,"props":1621,"children":1622},{"style":188},[1623],{"type":34,"value":1528},{"type":29,"tag":156,"props":1625,"children":1626},{"style":188},[1627],{"type":34,"value":1628}," 0",{"type":29,"tag":156,"props":1630,"children":1631},{"style":188},[1632],{"type":34,"value":1628},{"type":29,"tag":156,"props":1634,"children":1635},{"style":246},[1636],{"type":34,"value":1637}," \u002F ",{"type":29,"tag":156,"props":1639,"children":1640},{"style":188},[1641],{"type":34,"value":1642},"0.4",{"type":29,"tag":156,"props":1644,"children":1645},{"style":246},[1646],{"type":34,"value":1647},");\n",{"type":29,"tag":156,"props":1649,"children":1651},{"class":158,"line":1650},51,[1652],{"type":29,"tag":156,"props":1653,"children":1654},{"style":246},[1655],{"type":34,"value":1656},"}\n",{"type":29,"tag":156,"props":1658,"children":1660},{"class":158,"line":1659},52,[1661,1666],{"type":29,"tag":156,"props":1662,"children":1663},{"style":163},[1664],{"type":34,"value":1665},".modal-body",{"type":29,"tag":156,"props":1667,"children":1668},{"style":246},[1669],{"type":34,"value":1486},{"type":29,"tag":156,"props":1671,"children":1673},{"class":158,"line":1672},53,[1674,1678,1682,1687],{"type":29,"tag":156,"props":1675,"children":1676},{"style":188},[1677],{"type":34,"value":1495},{"type":29,"tag":156,"props":1679,"children":1680},{"style":246},[1681],{"type":34,"value":1500},{"type":29,"tag":156,"props":1683,"children":1684},{"style":188},[1685],{"type":34,"value":1686},"relative",{"type":29,"tag":156,"props":1688,"children":1689},{"style":246},[1690],{"type":34,"value":1510},{"type":29,"tag":156,"props":1692,"children":1694},{"class":158,"line":1693},54,[1695,1699,1703,1707],{"type":29,"tag":156,"props":1696,"children":1697},{"style":188},[1698],{"type":34,"value":1541},{"type":29,"tag":156,"props":1700,"children":1701},{"style":246},[1702],{"type":34,"value":1500},{"type":29,"tag":156,"props":1704,"children":1705},{"style":188},[1706],{"type":34,"value":1550},{"type":29,"tag":156,"props":1708,"children":1709},{"style":246},[1710],{"type":34,"value":1510},{"type":29,"tag":156,"props":1712,"children":1714},{"class":158,"line":1713},55,[1715,1720,1724,1729],{"type":29,"tag":156,"props":1716,"children":1717},{"style":188},[1718],{"type":34,"value":1719},"  flex-direction",{"type":29,"tag":156,"props":1721,"children":1722},{"style":246},[1723],{"type":34,"value":1500},{"type":29,"tag":156,"props":1725,"children":1726},{"style":188},[1727],{"type":34,"value":1728},"column",{"type":29,"tag":156,"props":1730,"children":1731},{"style":246},[1732],{"type":34,"value":1510},{"type":29,"tag":156,"props":1734,"children":1736},{"class":158,"line":1735},56,[1737,1742,1746,1751,1756],{"type":29,"tag":156,"props":1738,"children":1739},{"style":188},[1740],{"type":34,"value":1741},"  min-width",{"type":29,"tag":156,"props":1743,"children":1744},{"style":246},[1745],{"type":34,"value":1500},{"type":29,"tag":156,"props":1747,"children":1748},{"style":188},[1749],{"type":34,"value":1750},"250",{"type":29,"tag":156,"props":1752,"children":1753},{"style":240},[1754],{"type":34,"value":1755},"px",{"type":29,"tag":156,"props":1757,"children":1758},{"style":246},[1759],{"type":34,"value":1510},{"type":29,"tag":156,"props":1761,"children":1763},{"class":158,"line":1762},57,[1764,1769,1773,1778,1782,1787,1791],{"type":29,"tag":156,"props":1765,"children":1766},{"style":188},[1767],{"type":34,"value":1768},"  padding",{"type":29,"tag":156,"props":1770,"children":1771},{"style":246},[1772],{"type":34,"value":1500},{"type":29,"tag":156,"props":1774,"children":1775},{"style":188},[1776],{"type":34,"value":1777},"20",{"type":29,"tag":156,"props":1779,"children":1780},{"style":240},[1781],{"type":34,"value":1755},{"type":29,"tag":156,"props":1783,"children":1784},{"style":188},[1785],{"type":34,"value":1786}," 40",{"type":29,"tag":156,"props":1788,"children":1789},{"style":240},[1790],{"type":34,"value":1755},{"type":29,"tag":156,"props":1792,"children":1793},{"style":246},[1794],{"type":34,"value":1510},{"type":29,"tag":156,"props":1796,"children":1798},{"class":158,"line":1797},58,[1799,1804,1808,1813,1817],{"type":29,"tag":156,"props":1800,"children":1801},{"style":188},[1802],{"type":34,"value":1803},"  border-radius",{"type":29,"tag":156,"props":1805,"children":1806},{"style":246},[1807],{"type":34,"value":1500},{"type":29,"tag":156,"props":1809,"children":1810},{"style":188},[1811],{"type":34,"value":1812},"10",{"type":29,"tag":156,"props":1814,"children":1815},{"style":240},[1816],{"type":34,"value":1755},{"type":29,"tag":156,"props":1818,"children":1819},{"style":246},[1820],{"type":34,"value":1510},{"type":29,"tag":156,"props":1822,"children":1824},{"class":158,"line":1823},59,[1825,1829,1833,1838],{"type":29,"tag":156,"props":1826,"children":1827},{"style":188},[1828],{"type":34,"value":1606},{"type":29,"tag":156,"props":1830,"children":1831},{"style":246},[1832],{"type":34,"value":1500},{"type":29,"tag":156,"props":1834,"children":1835},{"style":188},[1836],{"type":34,"value":1837},"#fff",{"type":29,"tag":156,"props":1839,"children":1840},{"style":246},[1841],{"type":34,"value":1510},{"type":29,"tag":156,"props":1843,"children":1845},{"class":158,"line":1844},60,[1846,1851,1855,1859],{"type":29,"tag":156,"props":1847,"children":1848},{"style":188},[1849],{"type":34,"value":1850},"  text-align",{"type":29,"tag":156,"props":1852,"children":1853},{"style":246},[1854],{"type":34,"value":1500},{"type":29,"tag":156,"props":1856,"children":1857},{"style":188},[1858],{"type":34,"value":1572},{"type":29,"tag":156,"props":1860,"children":1861},{"style":246},[1862],{"type":34,"value":1510},{"type":29,"tag":156,"props":1864,"children":1866},{"class":158,"line":1865},61,[1867],{"type":29,"tag":156,"props":1868,"children":1869},{"style":246},[1870],{"type":34,"value":1656},{"type":29,"tag":156,"props":1872,"children":1874},{"class":158,"line":1873},62,[1875,1880],{"type":29,"tag":156,"props":1876,"children":1877},{"style":163},[1878],{"type":34,"value":1879},".modal-action",{"type":29,"tag":156,"props":1881,"children":1882},{"style":246},[1883],{"type":34,"value":1486},{"type":29,"tag":156,"props":1885,"children":1887},{"class":158,"line":1886},63,[1888,1892,1896,1900],{"type":29,"tag":156,"props":1889,"children":1890},{"style":188},[1891],{"type":34,"value":1541},{"type":29,"tag":156,"props":1893,"children":1894},{"style":246},[1895],{"type":34,"value":1500},{"type":29,"tag":156,"props":1897,"children":1898},{"style":188},[1899],{"type":34,"value":1550},{"type":29,"tag":156,"props":1901,"children":1902},{"style":246},[1903],{"type":34,"value":1510},{"type":29,"tag":156,"props":1905,"children":1907},{"class":158,"line":1906},64,[1908,1913,1917,1922,1926],{"type":29,"tag":156,"props":1909,"children":1910},{"style":188},[1911],{"type":34,"value":1912},"  gap",{"type":29,"tag":156,"props":1914,"children":1915},{"style":246},[1916],{"type":34,"value":1500},{"type":29,"tag":156,"props":1918,"children":1919},{"style":188},[1920],{"type":34,"value":1921},"24",{"type":29,"tag":156,"props":1923,"children":1924},{"style":240},[1925],{"type":34,"value":1755},{"type":29,"tag":156,"props":1927,"children":1928},{"style":246},[1929],{"type":34,"value":1510},{"type":29,"tag":156,"props":1931,"children":1933},{"class":158,"line":1932},65,[1934,1938,1942,1946],{"type":29,"tag":156,"props":1935,"children":1936},{"style":188},[1937],{"type":34,"value":1563},{"type":29,"tag":156,"props":1939,"children":1940},{"style":246},[1941],{"type":34,"value":1500},{"type":29,"tag":156,"props":1943,"children":1944},{"style":188},[1945],{"type":34,"value":1572},{"type":29,"tag":156,"props":1947,"children":1948},{"style":246},[1949],{"type":34,"value":1510},{"type":29,"tag":156,"props":1951,"children":1953},{"class":158,"line":1952},66,[1954],{"type":29,"tag":156,"props":1955,"children":1956},{"style":246},[1957],{"type":34,"value":1656},{"type":29,"tag":156,"props":1959,"children":1961},{"class":158,"line":1960},67,[1962,1967],{"type":29,"tag":156,"props":1963,"children":1964},{"style":163},[1965],{"type":34,"value":1966},".modal-button",{"type":29,"tag":156,"props":1968,"children":1969},{"style":246},[1970],{"type":34,"value":1486},{"type":29,"tag":156,"props":1972,"children":1974},{"class":158,"line":1973},68,[1975,1980,1984,1989,1993],{"type":29,"tag":156,"props":1976,"children":1977},{"style":188},[1978],{"type":34,"value":1979},"  min-height",{"type":29,"tag":156,"props":1981,"children":1982},{"style":246},[1983],{"type":34,"value":1500},{"type":29,"tag":156,"props":1985,"children":1986},{"style":188},[1987],{"type":34,"value":1988},"40",{"type":29,"tag":156,"props":1990,"children":1991},{"style":240},[1992],{"type":34,"value":1755},{"type":29,"tag":156,"props":1994,"children":1995},{"style":246},[1996],{"type":34,"value":1510},{"type":29,"tag":156,"props":1998,"children":2000},{"class":158,"line":1999},69,[2001,2005,2009,2013,2018,2022],{"type":29,"tag":156,"props":2002,"children":2003},{"style":188},[2004],{"type":34,"value":1768},{"type":29,"tag":156,"props":2006,"children":2007},{"style":246},[2008],{"type":34,"value":1500},{"type":29,"tag":156,"props":2010,"children":2011},{"style":188},[2012],{"type":34,"value":1528},{"type":29,"tag":156,"props":2014,"children":2015},{"style":188},[2016],{"type":34,"value":2017}," 24",{"type":29,"tag":156,"props":2019,"children":2020},{"style":240},[2021],{"type":34,"value":1755},{"type":29,"tag":156,"props":2023,"children":2024},{"style":246},[2025],{"type":34,"value":1510},{"type":29,"tag":156,"props":2027,"children":2029},{"class":158,"line":2028},70,[2030,2035,2039,2043],{"type":29,"tag":156,"props":2031,"children":2032},{"style":188},[2033],{"type":34,"value":2034},"  border",{"type":29,"tag":156,"props":2036,"children":2037},{"style":246},[2038],{"type":34,"value":1500},{"type":29,"tag":156,"props":2040,"children":2041},{"style":188},[2042],{"type":34,"value":1528},{"type":29,"tag":156,"props":2044,"children":2045},{"style":246},[2046],{"type":34,"value":1510},{"type":29,"tag":156,"props":2048,"children":2050},{"class":158,"line":2049},71,[2051,2055,2059,2064,2068],{"type":29,"tag":156,"props":2052,"children":2053},{"style":188},[2054],{"type":34,"value":1803},{"type":29,"tag":156,"props":2056,"children":2057},{"style":246},[2058],{"type":34,"value":1500},{"type":29,"tag":156,"props":2060,"children":2061},{"style":188},[2062],{"type":34,"value":2063},"6",{"type":29,"tag":156,"props":2065,"children":2066},{"style":240},[2067],{"type":34,"value":1755},{"type":29,"tag":156,"props":2069,"children":2070},{"style":246},[2071],{"type":34,"value":1510},{"type":29,"tag":156,"props":2073,"children":2075},{"class":158,"line":2074},72,[2076,2080,2084,2089],{"type":29,"tag":156,"props":2077,"children":2078},{"style":188},[2079],{"type":34,"value":1606},{"type":29,"tag":156,"props":2081,"children":2082},{"style":246},[2083],{"type":34,"value":1500},{"type":29,"tag":156,"props":2085,"children":2086},{"style":188},[2087],{"type":34,"value":2088},"#2f6fb0",{"type":29,"tag":156,"props":2090,"children":2091},{"style":246},[2092],{"type":34,"value":1510},{"type":29,"tag":156,"props":2094,"children":2096},{"class":158,"line":2095},73,[2097,2102,2106,2110],{"type":29,"tag":156,"props":2098,"children":2099},{"style":188},[2100],{"type":34,"value":2101},"  color",{"type":29,"tag":156,"props":2103,"children":2104},{"style":246},[2105],{"type":34,"value":1500},{"type":29,"tag":156,"props":2107,"children":2108},{"style":188},[2109],{"type":34,"value":1837},{"type":29,"tag":156,"props":2111,"children":2112},{"style":246},[2113],{"type":34,"value":1510},{"type":29,"tag":156,"props":2115,"children":2117},{"class":158,"line":2116},74,[2118,2123,2127,2132],{"type":29,"tag":156,"props":2119,"children":2120},{"style":188},[2121],{"type":34,"value":2122},"  cursor",{"type":29,"tag":156,"props":2124,"children":2125},{"style":246},[2126],{"type":34,"value":1500},{"type":29,"tag":156,"props":2128,"children":2129},{"style":188},[2130],{"type":34,"value":2131},"pointer",{"type":29,"tag":156,"props":2133,"children":2134},{"style":246},[2135],{"type":34,"value":1510},{"type":29,"tag":156,"props":2137,"children":2139},{"class":158,"line":2138},75,[2140],{"type":29,"tag":156,"props":2141,"children":2142},{"style":246},[2143],{"type":34,"value":1656},{"type":29,"tag":156,"props":2145,"children":2147},{"class":158,"line":2146},76,[2148,2153],{"type":29,"tag":156,"props":2149,"children":2150},{"style":163},[2151],{"type":34,"value":2152},".modal-close",{"type":29,"tag":156,"props":2154,"children":2155},{"style":246},[2156],{"type":34,"value":1486},{"type":29,"tag":156,"props":2158,"children":2160},{"class":158,"line":2159},77,[2161,2165,2169,2174],{"type":29,"tag":156,"props":2162,"children":2163},{"style":188},[2164],{"type":34,"value":1495},{"type":29,"tag":156,"props":2166,"children":2167},{"style":246},[2168],{"type":34,"value":1500},{"type":29,"tag":156,"props":2170,"children":2171},{"style":188},[2172],{"type":34,"value":2173},"absolute",{"type":29,"tag":156,"props":2175,"children":2176},{"style":246},[2177],{"type":34,"value":1510},{"type":29,"tag":156,"props":2179,"children":2181},{"class":158,"line":2180},78,[2182,2187,2191,2196,2200],{"type":29,"tag":156,"props":2183,"children":2184},{"style":188},[2185],{"type":34,"value":2186},"  top",{"type":29,"tag":156,"props":2188,"children":2189},{"style":246},[2190],{"type":34,"value":1500},{"type":29,"tag":156,"props":2192,"children":2193},{"style":188},[2194],{"type":34,"value":2195},"8",{"type":29,"tag":156,"props":2197,"children":2198},{"style":240},[2199],{"type":34,"value":1755},{"type":29,"tag":156,"props":2201,"children":2202},{"style":246},[2203],{"type":34,"value":1510},{"type":29,"tag":156,"props":2205,"children":2207},{"class":158,"line":2206},79,[2208,2213,2217,2221,2225],{"type":29,"tag":156,"props":2209,"children":2210},{"style":188},[2211],{"type":34,"value":2212},"  right",{"type":29,"tag":156,"props":2214,"children":2215},{"style":246},[2216],{"type":34,"value":1500},{"type":29,"tag":156,"props":2218,"children":2219},{"style":188},[2220],{"type":34,"value":2195},{"type":29,"tag":156,"props":2222,"children":2223},{"style":240},[2224],{"type":34,"value":1755},{"type":29,"tag":156,"props":2226,"children":2227},{"style":246},[2228],{"type":34,"value":1510},{"type":29,"tag":156,"props":2230,"children":2232},{"class":158,"line":2231},80,[2233,2237,2241,2245],{"type":29,"tag":156,"props":2234,"children":2235},{"style":188},[2236],{"type":34,"value":2034},{"type":29,"tag":156,"props":2238,"children":2239},{"style":246},[2240],{"type":34,"value":1500},{"type":29,"tag":156,"props":2242,"children":2243},{"style":188},[2244],{"type":34,"value":1528},{"type":29,"tag":156,"props":2246,"children":2247},{"style":246},[2248],{"type":34,"value":1510},{"type":29,"tag":156,"props":2250,"children":2252},{"class":158,"line":2251},81,[2253,2258,2262,2267],{"type":29,"tag":156,"props":2254,"children":2255},{"style":188},[2256],{"type":34,"value":2257},"  background",{"type":29,"tag":156,"props":2259,"children":2260},{"style":246},[2261],{"type":34,"value":1500},{"type":29,"tag":156,"props":2263,"children":2264},{"style":188},[2265],{"type":34,"value":2266},"none",{"type":29,"tag":156,"props":2268,"children":2269},{"style":246},[2270],{"type":34,"value":1510},{"type":29,"tag":156,"props":2272,"children":2274},{"class":158,"line":2273},82,[2275,2279,2283,2287],{"type":29,"tag":156,"props":2276,"children":2277},{"style":188},[2278],{"type":34,"value":2122},{"type":29,"tag":156,"props":2280,"children":2281},{"style":246},[2282],{"type":34,"value":1500},{"type":29,"tag":156,"props":2284,"children":2285},{"style":188},[2286],{"type":34,"value":2131},{"type":29,"tag":156,"props":2288,"children":2289},{"style":246},[2290],{"type":34,"value":1510},{"type":29,"tag":156,"props":2292,"children":2294},{"class":158,"line":2293},83,[2295],{"type":29,"tag":156,"props":2296,"children":2297},{"style":246},[2298],{"type":34,"value":1656},{"type":29,"tag":156,"props":2300,"children":2302},{"class":158,"line":2301},84,[2303,2307,2311],{"type":29,"tag":156,"props":2304,"children":2305},{"style":246},[2306],{"type":34,"value":585},{"type":29,"tag":156,"props":2308,"children":2309},{"style":467},[2310],{"type":34,"value":1463},{"type":29,"tag":156,"props":2312,"children":2313},{"style":246},[2314],{"type":34,"value":480},{"type":29,"tag":30,"props":2316,"children":2317},{},[2318,2320,2326,2328,2334,2336,2342,2344,2350],{"type":34,"value":2319},"The close icon is a real ",{"type":29,"tag":48,"props":2321,"children":2323},{"className":2322},[],[2324],{"type":34,"value":2325},"\u003Cbutton>",{"type":34,"value":2327},", and ",{"type":29,"tag":48,"props":2329,"children":2331},{"className":2330},[],[2332],{"type":34,"value":2333},"role=\"dialog\"",{"type":34,"value":2335}," with ",{"type":29,"tag":48,"props":2337,"children":2339},{"className":2338},[],[2340],{"type":34,"value":2341},"aria-modal",{"type":34,"value":2343}," makes screen readers announce it as a dialog. The overlay is ",{"type":29,"tag":48,"props":2345,"children":2347},{"className":2346},[],[2348],{"type":34,"value":2349},"position: fixed",{"type":34,"value":2351},", so it covers the viewport even on a scrolled page.",{"type":29,"tag":30,"props":2353,"children":2354},{},[2355,2357,2363,2364,2370,2372,2378,2380,2386],{"type":34,"value":2356},"The only contract with the plugin: the dialog component must emit ",{"type":29,"tag":48,"props":2358,"children":2360},{"className":2359},[],[2361],{"type":34,"value":2362},"confirm",{"type":34,"value":101},{"type":29,"tag":48,"props":2365,"children":2367},{"className":2366},[],[2368],{"type":34,"value":2369},"cancel",{"type":34,"value":2371},". There is no need for a ",{"type":29,"tag":48,"props":2373,"children":2375},{"className":2374},[],[2376],{"type":34,"value":2377},"show",{"type":34,"value":2379}," prop or ",{"type":29,"tag":48,"props":2381,"children":2383},{"className":2382},[],[2384],{"type":34,"value":2385},"v-if",{"type":34,"value":2387}," inside the dialog: the plugin mounts and unmounts it for you.",{"type":29,"tag":30,"props":2389,"children":2390},{},[2391,2393,2398],{"type":34,"value":2392},"Now use it to confirm an action, for example hiding the logo. The code that runs after the user agrees goes into the ",{"type":29,"tag":48,"props":2394,"children":2396},{"className":2395},[],[2397],{"type":34,"value":99},{"type":34,"value":2399}," callback:",{"type":29,"tag":146,"props":2401,"children":2403},{"className":442,"code":2402,"language":11,"meta":19,"style":19},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport SimpleDialog from '.\u002Fcomponents\u002FSimpleDialog.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst showLogo = ref(true)\n\nconst { reveal, onConfirm } = createConfirmDialog(SimpleDialog, {\n  question: 'Are you sure you want to hide the logo?'\n})\n\nonConfirm(() => {\n  showLogo.value = false\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg\n    v-show=\"showLogo\"\n    alt=\"Vue logo\"\n    src=\".\u002Fassets\u002Flogo.svg\"\n    width=\"125\"\n    height=\"125\"\n  >\n  \u003Cbutton\n    type=\"button\"\n    @click=\"reveal()\"\n  >\n    Hide logo\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[2404],{"type":29,"tag":48,"props":2405,"children":2406},{"__ignoreMap":19},[2407,2426,2446,2467,2486,2493,2527,2534,2574,2587,2595,2602,2623,2640,2647,2662,2669,2684,2696,2713,2730,2747,2764,2780,2787,2798,2813,2828,2835,2843,2858],{"type":29,"tag":156,"props":2408,"children":2409},{"class":158,"line":159},[2410,2414,2418,2422],{"type":29,"tag":156,"props":2411,"children":2412},{"style":246},[2413],{"type":34,"value":464},{"type":29,"tag":156,"props":2415,"children":2416},{"style":467},[2417],{"type":34,"value":470},{"type":29,"tag":156,"props":2419,"children":2420},{"style":163},[2421],{"type":34,"value":475},{"type":29,"tag":156,"props":2423,"children":2424},{"style":246},[2425],{"type":34,"value":480},{"type":29,"tag":156,"props":2427,"children":2428},{"class":158,"line":17},[2429,2433,2438,2442],{"type":29,"tag":156,"props":2430,"children":2431},{"style":240},[2432],{"type":34,"value":243},{"type":29,"tag":156,"props":2434,"children":2435},{"style":246},[2436],{"type":34,"value":2437}," { ref } ",{"type":29,"tag":156,"props":2439,"children":2440},{"style":240},[2441],{"type":34,"value":254},{"type":29,"tag":156,"props":2443,"children":2444},{"style":169},[2445],{"type":34,"value":259},{"type":29,"tag":156,"props":2447,"children":2448},{"class":158,"line":198},[2449,2453,2458,2462],{"type":29,"tag":156,"props":2450,"children":2451},{"style":240},[2452],{"type":34,"value":243},{"type":29,"tag":156,"props":2454,"children":2455},{"style":246},[2456],{"type":34,"value":2457}," SimpleDialog ",{"type":29,"tag":156,"props":2459,"children":2460},{"style":240},[2461],{"type":34,"value":254},{"type":29,"tag":156,"props":2463,"children":2464},{"style":169},[2465],{"type":34,"value":2466}," '.\u002Fcomponents\u002FSimpleDialog.vue'\n",{"type":29,"tag":156,"props":2468,"children":2469},{"class":158,"line":314},[2470,2474,2478,2482],{"type":29,"tag":156,"props":2471,"children":2472},{"style":240},[2473],{"type":34,"value":243},{"type":29,"tag":156,"props":2475,"children":2476},{"style":246},[2477],{"type":34,"value":513},{"type":29,"tag":156,"props":2479,"children":2480},{"style":240},[2481],{"type":34,"value":254},{"type":29,"tag":156,"props":2483,"children":2484},{"style":169},[2485],{"type":34,"value":311},{"type":29,"tag":156,"props":2487,"children":2488},{"class":158,"line":324},[2489],{"type":29,"tag":156,"props":2490,"children":2491},{"emptyLinePlaceholder":318},[2492],{"type":34,"value":321},{"type":29,"tag":156,"props":2494,"children":2495},{"class":158,"line":531},[2496,2500,2505,2509,2514,2518,2523],{"type":29,"tag":156,"props":2497,"children":2498},{"style":240},[2499],{"type":34,"value":537},{"type":29,"tag":156,"props":2501,"children":2502},{"style":188},[2503],{"type":34,"value":2504}," showLogo",{"type":29,"tag":156,"props":2506,"children":2507},{"style":240},[2508],{"type":34,"value":814},{"type":29,"tag":156,"props":2510,"children":2511},{"style":163},[2512],{"type":34,"value":2513}," ref",{"type":29,"tag":156,"props":2515,"children":2516},{"style":246},[2517],{"type":34,"value":355},{"type":29,"tag":156,"props":2519,"children":2520},{"style":188},[2521],{"type":34,"value":2522},"true",{"type":29,"tag":156,"props":2524,"children":2525},{"style":246},[2526],{"type":34,"value":365},{"type":29,"tag":156,"props":2528,"children":2529},{"class":158,"line":579},[2530],{"type":29,"tag":156,"props":2531,"children":2532},{"emptyLinePlaceholder":318},[2533],{"type":34,"value":321},{"type":29,"tag":156,"props":2535,"children":2536},{"class":158,"line":596},[2537,2541,2545,2549,2553,2557,2561,2565,2569],{"type":29,"tag":156,"props":2538,"children":2539},{"style":240},[2540],{"type":34,"value":537},{"type":29,"tag":156,"props":2542,"children":2543},{"style":246},[2544],{"type":34,"value":542},{"type":29,"tag":156,"props":2546,"children":2547},{"style":188},[2548],{"type":34,"value":401},{"type":29,"tag":156,"props":2550,"children":2551},{"style":246},[2552],{"type":34,"value":834},{"type":29,"tag":156,"props":2554,"children":2555},{"style":188},[2556],{"type":34,"value":99},{"type":29,"tag":156,"props":2558,"children":2559},{"style":246},[2560],{"type":34,"value":551},{"type":29,"tag":156,"props":2562,"children":2563},{"style":240},[2564],{"type":34,"value":556},{"type":29,"tag":156,"props":2566,"children":2567},{"style":163},[2568],{"type":34,"value":561},{"type":29,"tag":156,"props":2570,"children":2571},{"style":246},[2572],{"type":34,"value":2573},"(SimpleDialog, {\n",{"type":29,"tag":156,"props":2575,"children":2576},{"class":158,"line":604},[2577,2582],{"type":29,"tag":156,"props":2578,"children":2579},{"style":246},[2580],{"type":34,"value":2581},"  question: ",{"type":29,"tag":156,"props":2583,"children":2584},{"style":169},[2585],{"type":34,"value":2586},"'Are you sure you want to hide the logo?'\n",{"type":29,"tag":156,"props":2588,"children":2589},{"class":158,"line":20},[2590],{"type":29,"tag":156,"props":2591,"children":2592},{"style":246},[2593],{"type":34,"value":2594},"})\n",{"type":29,"tag":156,"props":2596,"children":2597},{"class":158,"line":634},[2598],{"type":29,"tag":156,"props":2599,"children":2600},{"emptyLinePlaceholder":318},[2601],{"type":34,"value":321},{"type":29,"tag":156,"props":2603,"children":2604},{"class":158,"line":652},[2605,2609,2614,2619],{"type":29,"tag":156,"props":2606,"children":2607},{"style":163},[2608],{"type":34,"value":99},{"type":29,"tag":156,"props":2610,"children":2611},{"style":246},[2612],{"type":34,"value":2613},"(() ",{"type":29,"tag":156,"props":2615,"children":2616},{"style":240},[2617],{"type":34,"value":2618},"=>",{"type":29,"tag":156,"props":2620,"children":2621},{"style":246},[2622],{"type":34,"value":1486},{"type":29,"tag":156,"props":2624,"children":2625},{"class":158,"line":670},[2626,2631,2635],{"type":29,"tag":156,"props":2627,"children":2628},{"style":246},[2629],{"type":34,"value":2630},"  showLogo.value ",{"type":29,"tag":156,"props":2632,"children":2633},{"style":240},[2634],{"type":34,"value":556},{"type":29,"tag":156,"props":2636,"children":2637},{"style":188},[2638],{"type":34,"value":2639}," false\n",{"type":29,"tag":156,"props":2641,"children":2642},{"class":158,"line":679},[2643],{"type":29,"tag":156,"props":2644,"children":2645},{"style":246},[2646],{"type":34,"value":2594},{"type":29,"tag":156,"props":2648,"children":2649},{"class":158,"line":688},[2650,2654,2658],{"type":29,"tag":156,"props":2651,"children":2652},{"style":246},[2653],{"type":34,"value":585},{"type":29,"tag":156,"props":2655,"children":2656},{"style":467},[2657],{"type":34,"value":470},{"type":29,"tag":156,"props":2659,"children":2660},{"style":246},[2661],{"type":34,"value":480},{"type":29,"tag":156,"props":2663,"children":2664},{"class":158,"line":706},[2665],{"type":29,"tag":156,"props":2666,"children":2667},{"emptyLinePlaceholder":318},[2668],{"type":34,"value":321},{"type":29,"tag":156,"props":2670,"children":2671},{"class":158,"line":16},[2672,2676,2680],{"type":29,"tag":156,"props":2673,"children":2674},{"style":246},[2675],{"type":34,"value":464},{"type":29,"tag":156,"props":2677,"children":2678},{"style":467},[2679],{"type":34,"value":614},{"type":29,"tag":156,"props":2681,"children":2682},{"style":246},[2683],{"type":34,"value":480},{"type":29,"tag":156,"props":2685,"children":2686},{"class":158,"line":1065},[2687,2691],{"type":29,"tag":156,"props":2688,"children":2689},{"style":246},[2690],{"type":34,"value":626},{"type":29,"tag":156,"props":2692,"children":2693},{"style":467},[2694],{"type":34,"value":2695},"img\n",{"type":29,"tag":156,"props":2697,"children":2698},{"class":158,"line":1083},[2699,2704,2708],{"type":29,"tag":156,"props":2700,"children":2701},{"style":163},[2702],{"type":34,"value":2703},"    v-show",{"type":29,"tag":156,"props":2705,"children":2706},{"style":246},[2707],{"type":34,"value":556},{"type":29,"tag":156,"props":2709,"children":2710},{"style":169},[2711],{"type":34,"value":2712},"\"showLogo\"\n",{"type":29,"tag":156,"props":2714,"children":2715},{"class":158,"line":1092},[2716,2721,2725],{"type":29,"tag":156,"props":2717,"children":2718},{"style":163},[2719],{"type":34,"value":2720},"    alt",{"type":29,"tag":156,"props":2722,"children":2723},{"style":246},[2724],{"type":34,"value":556},{"type":29,"tag":156,"props":2726,"children":2727},{"style":169},[2728],{"type":34,"value":2729},"\"Vue logo\"\n",{"type":29,"tag":156,"props":2731,"children":2732},{"class":158,"line":1101},[2733,2738,2742],{"type":29,"tag":156,"props":2734,"children":2735},{"style":163},[2736],{"type":34,"value":2737},"    src",{"type":29,"tag":156,"props":2739,"children":2740},{"style":246},[2741],{"type":34,"value":556},{"type":29,"tag":156,"props":2743,"children":2744},{"style":169},[2745],{"type":34,"value":2746},"\".\u002Fassets\u002Flogo.svg\"\n",{"type":29,"tag":156,"props":2748,"children":2749},{"class":158,"line":1118},[2750,2755,2759],{"type":29,"tag":156,"props":2751,"children":2752},{"style":163},[2753],{"type":34,"value":2754},"    width",{"type":29,"tag":156,"props":2756,"children":2757},{"style":246},[2758],{"type":34,"value":556},{"type":29,"tag":156,"props":2760,"children":2761},{"style":169},[2762],{"type":34,"value":2763},"\"125\"\n",{"type":29,"tag":156,"props":2765,"children":2766},{"class":158,"line":1157},[2767,2772,2776],{"type":29,"tag":156,"props":2768,"children":2769},{"style":163},[2770],{"type":34,"value":2771},"    height",{"type":29,"tag":156,"props":2773,"children":2774},{"style":246},[2775],{"type":34,"value":556},{"type":29,"tag":156,"props":2777,"children":2778},{"style":169},[2779],{"type":34,"value":2763},{"type":29,"tag":156,"props":2781,"children":2782},{"class":158,"line":1186},[2783],{"type":29,"tag":156,"props":2784,"children":2785},{"style":246},[2786],{"type":34,"value":676},{"type":29,"tag":156,"props":2788,"children":2789},{"class":158,"line":1199},[2790,2794],{"type":29,"tag":156,"props":2791,"children":2792},{"style":246},[2793],{"type":34,"value":626},{"type":29,"tag":156,"props":2795,"children":2796},{"style":467},[2797],{"type":34,"value":631},{"type":29,"tag":156,"props":2799,"children":2800},{"class":158,"line":1216},[2801,2805,2809],{"type":29,"tag":156,"props":2802,"children":2803},{"style":163},[2804],{"type":34,"value":640},{"type":29,"tag":156,"props":2806,"children":2807},{"style":246},[2808],{"type":34,"value":556},{"type":29,"tag":156,"props":2810,"children":2811},{"style":169},[2812],{"type":34,"value":649},{"type":29,"tag":156,"props":2814,"children":2815},{"class":158,"line":1234},[2816,2820,2824],{"type":29,"tag":156,"props":2817,"children":2818},{"style":163},[2819],{"type":34,"value":658},{"type":29,"tag":156,"props":2821,"children":2822},{"style":246},[2823],{"type":34,"value":556},{"type":29,"tag":156,"props":2825,"children":2826},{"style":169},[2827],{"type":34,"value":667},{"type":29,"tag":156,"props":2829,"children":2830},{"class":158,"line":1252},[2831],{"type":29,"tag":156,"props":2832,"children":2833},{"style":246},[2834],{"type":34,"value":676},{"type":29,"tag":156,"props":2836,"children":2837},{"class":158,"line":1261},[2838],{"type":29,"tag":156,"props":2839,"children":2840},{"style":246},[2841],{"type":34,"value":2842},"    Hide logo\n",{"type":29,"tag":156,"props":2844,"children":2845},{"class":158,"line":1270},[2846,2850,2854],{"type":29,"tag":156,"props":2847,"children":2848},{"style":246},[2849],{"type":34,"value":694},{"type":29,"tag":156,"props":2851,"children":2852},{"style":467},[2853],{"type":34,"value":699},{"type":29,"tag":156,"props":2855,"children":2856},{"style":246},[2857],{"type":34,"value":480},{"type":29,"tag":156,"props":2859,"children":2860},{"class":158,"line":1287},[2861,2865,2869],{"type":29,"tag":156,"props":2862,"children":2863},{"style":246},[2864],{"type":34,"value":585},{"type":29,"tag":156,"props":2866,"children":2867},{"style":467},[2868],{"type":34,"value":614},{"type":29,"tag":156,"props":2870,"children":2871},{"style":246},[2872],{"type":34,"value":480},{"type":29,"tag":134,"props":2874,"children":2876},{"id":2875},"awaiting-the-answer",[2877],{"type":34,"value":2878},"Awaiting the answer",{"type":29,"tag":30,"props":2880,"children":2881},{},[2882,2884,2889,2891,2897,2899,2905],{"type":34,"value":2883},"Hooks are not the only option. ",{"type":29,"tag":48,"props":2885,"children":2887},{"className":2886},[],[2888],{"type":34,"value":421},{"type":34,"value":2890}," returns a promise that resolves to ",{"type":29,"tag":48,"props":2892,"children":2894},{"className":2893},[],[2895],{"type":34,"value":2896},"{ data, isCanceled }",{"type":34,"value":2898}," once the user decides, so you can write the whole flow with ",{"type":29,"tag":48,"props":2900,"children":2902},{"className":2901},[],[2903],{"type":34,"value":2904},"async\u002Fawait",{"type":34,"value":226},{"type":29,"tag":146,"props":2907,"children":2909},{"className":229,"code":2908,"language":10,"meta":19,"style":19},"const dialog = createConfirmDialog(SimpleDialog)\n\nasync function deleteNote(note) {\n  const { isCanceled } = await dialog.reveal({ question: `Delete \"${note.title}\"?` })\n  if (isCanceled) return\n\n  await api.deleteNote(note.id)\n}\n",[2910],{"type":29,"tag":48,"props":2911,"children":2912},{"__ignoreMap":19},[2913,2938,2945,2978,3049,3067,3074,3097],{"type":29,"tag":156,"props":2914,"children":2915},{"class":158,"line":159},[2916,2920,2925,2929,2933],{"type":29,"tag":156,"props":2917,"children":2918},{"style":240},[2919],{"type":34,"value":537},{"type":29,"tag":156,"props":2921,"children":2922},{"style":188},[2923],{"type":34,"value":2924}," dialog",{"type":29,"tag":156,"props":2926,"children":2927},{"style":240},[2928],{"type":34,"value":814},{"type":29,"tag":156,"props":2930,"children":2931},{"style":163},[2932],{"type":34,"value":561},{"type":29,"tag":156,"props":2934,"children":2935},{"style":246},[2936],{"type":34,"value":2937},"(SimpleDialog)\n",{"type":29,"tag":156,"props":2939,"children":2940},{"class":158,"line":17},[2941],{"type":29,"tag":156,"props":2942,"children":2943},{"emptyLinePlaceholder":318},[2944],{"type":34,"value":321},{"type":29,"tag":156,"props":2946,"children":2947},{"class":158,"line":198},[2948,2953,2958,2963,2967,2973],{"type":29,"tag":156,"props":2949,"children":2950},{"style":240},[2951],{"type":34,"value":2952},"async",{"type":29,"tag":156,"props":2954,"children":2955},{"style":240},[2956],{"type":34,"value":2957}," function",{"type":29,"tag":156,"props":2959,"children":2960},{"style":163},[2961],{"type":34,"value":2962}," deleteNote",{"type":29,"tag":156,"props":2964,"children":2965},{"style":246},[2966],{"type":34,"value":355},{"type":29,"tag":156,"props":2968,"children":2970},{"style":2969},"--shiki-default:#FFAB70",[2971],{"type":34,"value":2972},"note",{"type":29,"tag":156,"props":2974,"children":2975},{"style":246},[2976],{"type":34,"value":2977},") {\n",{"type":29,"tag":156,"props":2979,"children":2980},{"class":158,"line":314},[2981,2986,2990,2995,2999,3003,3008,3013,3017,3022,3027,3031,3035,3040,3045],{"type":29,"tag":156,"props":2982,"children":2983},{"style":240},[2984],{"type":34,"value":2985},"  const",{"type":29,"tag":156,"props":2987,"children":2988},{"style":246},[2989],{"type":34,"value":542},{"type":29,"tag":156,"props":2991,"children":2992},{"style":188},[2993],{"type":34,"value":2994},"isCanceled",{"type":29,"tag":156,"props":2996,"children":2997},{"style":246},[2998],{"type":34,"value":551},{"type":29,"tag":156,"props":3000,"children":3001},{"style":240},[3002],{"type":34,"value":556},{"type":29,"tag":156,"props":3004,"children":3005},{"style":240},[3006],{"type":34,"value":3007}," await",{"type":29,"tag":156,"props":3009,"children":3010},{"style":246},[3011],{"type":34,"value":3012}," dialog.",{"type":29,"tag":156,"props":3014,"children":3015},{"style":163},[3016],{"type":34,"value":401},{"type":29,"tag":156,"props":3018,"children":3019},{"style":246},[3020],{"type":34,"value":3021},"({ question: ",{"type":29,"tag":156,"props":3023,"children":3024},{"style":169},[3025],{"type":34,"value":3026},"`Delete \"${",{"type":29,"tag":156,"props":3028,"children":3029},{"style":246},[3030],{"type":34,"value":2972},{"type":29,"tag":156,"props":3032,"children":3033},{"style":169},[3034],{"type":34,"value":132},{"type":29,"tag":156,"props":3036,"children":3037},{"style":246},[3038],{"type":34,"value":3039},"title",{"type":29,"tag":156,"props":3041,"children":3042},{"style":169},[3043],{"type":34,"value":3044},"}\"?`",{"type":29,"tag":156,"props":3046,"children":3047},{"style":246},[3048],{"type":34,"value":576},{"type":29,"tag":156,"props":3050,"children":3051},{"class":158,"line":324},[3052,3057,3062],{"type":29,"tag":156,"props":3053,"children":3054},{"style":240},[3055],{"type":34,"value":3056},"  if",{"type":29,"tag":156,"props":3058,"children":3059},{"style":246},[3060],{"type":34,"value":3061}," (isCanceled) ",{"type":29,"tag":156,"props":3063,"children":3064},{"style":240},[3065],{"type":34,"value":3066},"return\n",{"type":29,"tag":156,"props":3068,"children":3069},{"class":158,"line":531},[3070],{"type":29,"tag":156,"props":3071,"children":3072},{"emptyLinePlaceholder":318},[3073],{"type":34,"value":321},{"type":29,"tag":156,"props":3075,"children":3076},{"class":158,"line":579},[3077,3082,3087,3092],{"type":29,"tag":156,"props":3078,"children":3079},{"style":240},[3080],{"type":34,"value":3081},"  await",{"type":29,"tag":156,"props":3083,"children":3084},{"style":246},[3085],{"type":34,"value":3086}," api.",{"type":29,"tag":156,"props":3088,"children":3089},{"style":163},[3090],{"type":34,"value":3091},"deleteNote",{"type":29,"tag":156,"props":3093,"children":3094},{"style":246},[3095],{"type":34,"value":3096},"(note.id)\n",{"type":29,"tag":156,"props":3098,"children":3099},{"class":158,"line":596},[3100],{"type":29,"tag":156,"props":3101,"children":3102},{"style":246},[3103],{"type":34,"value":1656},{"type":29,"tag":30,"props":3105,"children":3106},{},[3107,3109,3114,3116,3122,3124,3129,3131,3137,3139,3145],{"type":34,"value":3108},"Note how the question is passed to ",{"type":29,"tag":48,"props":3110,"children":3112},{"className":3111},[],[3113],{"type":34,"value":421},{"type":34,"value":3115}," instead of ",{"type":29,"tag":48,"props":3117,"children":3119},{"className":3118},[],[3120],{"type":34,"value":3121},"createConfirmDialog()",{"type":34,"value":3123},": props given to ",{"type":29,"tag":48,"props":3125,"children":3127},{"className":3126},[],[3128],{"type":34,"value":401},{"type":34,"value":3130}," override the initial ones, so a single dialog instance can ask different questions. Whatever the dialog passes to ",{"type":29,"tag":48,"props":3132,"children":3134},{"className":3133},[],[3135],{"type":34,"value":3136},"emit('confirm', payload)",{"type":34,"value":3138}," arrives as ",{"type":29,"tag":48,"props":3140,"children":3142},{"className":3141},[],[3143],{"type":34,"value":3144},"data",{"type":34,"value":3146},". This is also how you build chains of dialogs: await one, then reveal the next depending on the answer.",{"type":29,"tag":134,"props":3148,"children":3150},{"id":3149},"reusing",[3151],{"type":34,"value":3152},"Reusing",{"type":29,"tag":30,"props":3154,"children":3155},{},[3156,3158,3163],{"type":34,"value":3157},"What if many places in the project need a confirmation? There is no need to call ",{"type":29,"tag":48,"props":3159,"children":3161},{"className":3160},[],[3162],{"type":34,"value":393},{"type":34,"value":3164}," in every component. Create one instance and wrap it in a small function that answers with a boolean:",{"type":29,"tag":146,"props":3166,"children":3168},{"className":229,"code":3167,"language":10,"meta":19,"style":19},"\u002F\u002F src\u002Fcomposables\u002FconfirmAction.js\nimport SimpleDialog from '..\u002Fcomponents\u002FSimpleDialog.vue'\nimport { createConfirmDialog } from 'vuejs-confirm-dialog'\n\nconst dialog = createConfirmDialog(SimpleDialog)\n\nexport async function confirmAction(question) {\n  const { isCanceled } = await dialog.reveal({ question })\n  return !isCanceled\n}\n",[3169],{"type":29,"tag":48,"props":3170,"children":3171},{"__ignoreMap":19},[3172,3180,3200,3219,3226,3249,3256,3291,3331,3349],{"type":29,"tag":156,"props":3173,"children":3174},{"class":158,"line":159},[3175],{"type":29,"tag":156,"props":3176,"children":3177},{"style":453},[3178],{"type":34,"value":3179},"\u002F\u002F src\u002Fcomposables\u002FconfirmAction.js\n",{"type":29,"tag":156,"props":3181,"children":3182},{"class":158,"line":17},[3183,3187,3191,3195],{"type":29,"tag":156,"props":3184,"children":3185},{"style":240},[3186],{"type":34,"value":243},{"type":29,"tag":156,"props":3188,"children":3189},{"style":246},[3190],{"type":34,"value":2457},{"type":29,"tag":156,"props":3192,"children":3193},{"style":240},[3194],{"type":34,"value":254},{"type":29,"tag":156,"props":3196,"children":3197},{"style":169},[3198],{"type":34,"value":3199}," '..\u002Fcomponents\u002FSimpleDialog.vue'\n",{"type":29,"tag":156,"props":3201,"children":3202},{"class":158,"line":198},[3203,3207,3211,3215],{"type":29,"tag":156,"props":3204,"children":3205},{"style":240},[3206],{"type":34,"value":243},{"type":29,"tag":156,"props":3208,"children":3209},{"style":246},[3210],{"type":34,"value":513},{"type":29,"tag":156,"props":3212,"children":3213},{"style":240},[3214],{"type":34,"value":254},{"type":29,"tag":156,"props":3216,"children":3217},{"style":169},[3218],{"type":34,"value":311},{"type":29,"tag":156,"props":3220,"children":3221},{"class":158,"line":314},[3222],{"type":29,"tag":156,"props":3223,"children":3224},{"emptyLinePlaceholder":318},[3225],{"type":34,"value":321},{"type":29,"tag":156,"props":3227,"children":3228},{"class":158,"line":324},[3229,3233,3237,3241,3245],{"type":29,"tag":156,"props":3230,"children":3231},{"style":240},[3232],{"type":34,"value":537},{"type":29,"tag":156,"props":3234,"children":3235},{"style":188},[3236],{"type":34,"value":2924},{"type":29,"tag":156,"props":3238,"children":3239},{"style":240},[3240],{"type":34,"value":814},{"type":29,"tag":156,"props":3242,"children":3243},{"style":163},[3244],{"type":34,"value":561},{"type":29,"tag":156,"props":3246,"children":3247},{"style":246},[3248],{"type":34,"value":2937},{"type":29,"tag":156,"props":3250,"children":3251},{"class":158,"line":531},[3252],{"type":29,"tag":156,"props":3253,"children":3254},{"emptyLinePlaceholder":318},[3255],{"type":34,"value":321},{"type":29,"tag":156,"props":3257,"children":3258},{"class":158,"line":579},[3259,3264,3269,3273,3278,3282,3287],{"type":29,"tag":156,"props":3260,"children":3261},{"style":240},[3262],{"type":34,"value":3263},"export",{"type":29,"tag":156,"props":3265,"children":3266},{"style":240},[3267],{"type":34,"value":3268}," async",{"type":29,"tag":156,"props":3270,"children":3271},{"style":240},[3272],{"type":34,"value":2957},{"type":29,"tag":156,"props":3274,"children":3275},{"style":163},[3276],{"type":34,"value":3277}," confirmAction",{"type":29,"tag":156,"props":3279,"children":3280},{"style":246},[3281],{"type":34,"value":355},{"type":29,"tag":156,"props":3283,"children":3284},{"style":2969},[3285],{"type":34,"value":3286},"question",{"type":29,"tag":156,"props":3288,"children":3289},{"style":246},[3290],{"type":34,"value":2977},{"type":29,"tag":156,"props":3292,"children":3293},{"class":158,"line":596},[3294,3298,3302,3306,3310,3314,3318,3322,3326],{"type":29,"tag":156,"props":3295,"children":3296},{"style":240},[3297],{"type":34,"value":2985},{"type":29,"tag":156,"props":3299,"children":3300},{"style":246},[3301],{"type":34,"value":542},{"type":29,"tag":156,"props":3303,"children":3304},{"style":188},[3305],{"type":34,"value":2994},{"type":29,"tag":156,"props":3307,"children":3308},{"style":246},[3309],{"type":34,"value":551},{"type":29,"tag":156,"props":3311,"children":3312},{"style":240},[3313],{"type":34,"value":556},{"type":29,"tag":156,"props":3315,"children":3316},{"style":240},[3317],{"type":34,"value":3007},{"type":29,"tag":156,"props":3319,"children":3320},{"style":246},[3321],{"type":34,"value":3012},{"type":29,"tag":156,"props":3323,"children":3324},{"style":163},[3325],{"type":34,"value":401},{"type":29,"tag":156,"props":3327,"children":3328},{"style":246},[3329],{"type":34,"value":3330},"({ question })\n",{"type":29,"tag":156,"props":3332,"children":3333},{"class":158,"line":604},[3334,3339,3344],{"type":29,"tag":156,"props":3335,"children":3336},{"style":240},[3337],{"type":34,"value":3338},"  return",{"type":29,"tag":156,"props":3340,"children":3341},{"style":240},[3342],{"type":34,"value":3343}," !",{"type":29,"tag":156,"props":3345,"children":3346},{"style":246},[3347],{"type":34,"value":3348},"isCanceled\n",{"type":29,"tag":156,"props":3350,"children":3351},{"class":158,"line":20},[3352],{"type":29,"tag":156,"props":3353,"children":3354},{"style":246},[3355],{"type":34,"value":1656},{"type":29,"tag":30,"props":3357,"children":3358},{},[3359],{"type":34,"value":3360},"Now use it to confirm opening external links:",{"type":29,"tag":146,"props":3362,"children":3364},{"className":442,"code":3363,"language":11,"meta":19,"style":19},"\u003C!-- App.vue -->\n\u003Cscript setup>\nimport { confirmAction } from '.\u002Fcomposables\u002FconfirmAction'\n\nconst LINKS = [\n  'https:\u002F\u002Fvuejs.org\u002F',\n  'https:\u002F\u002Fgithub.com\u002F',\n  'https:\u002F\u002Fvueuse.org\u002F'\n]\n\nasync function goToLink(link) {\n  if (await confirmAction(`Do you want to go to ${link}?`)) {\n    window.location.href = link\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli\n      v-for=\"link in LINKS\"\n      :key=\"link\"\n    >\n      \u003Cbutton\n        type=\"button\"\n        @click=\"goToLink(link)\"\n      >\n        {{ link }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[3365],{"type":29,"tag":48,"props":3366,"children":3367},{"__ignoreMap":19},[3368,3375,3394,3415,3422,3443,3456,3468,3476,3484,3491,3520,3564,3581,3589,3596,3611,3618,3633,3649,3661,3678,3695,3702,3713,3728,3744,3751,3759,3774,3790,3805],{"type":29,"tag":156,"props":3369,"children":3370},{"class":158,"line":159},[3371],{"type":29,"tag":156,"props":3372,"children":3373},{"style":453},[3374],{"type":34,"value":456},{"type":29,"tag":156,"props":3376,"children":3377},{"class":158,"line":17},[3378,3382,3386,3390],{"type":29,"tag":156,"props":3379,"children":3380},{"style":246},[3381],{"type":34,"value":464},{"type":29,"tag":156,"props":3383,"children":3384},{"style":467},[3385],{"type":34,"value":470},{"type":29,"tag":156,"props":3387,"children":3388},{"style":163},[3389],{"type":34,"value":475},{"type":29,"tag":156,"props":3391,"children":3392},{"style":246},[3393],{"type":34,"value":480},{"type":29,"tag":156,"props":3395,"children":3396},{"class":158,"line":198},[3397,3401,3406,3410],{"type":29,"tag":156,"props":3398,"children":3399},{"style":240},[3400],{"type":34,"value":243},{"type":29,"tag":156,"props":3402,"children":3403},{"style":246},[3404],{"type":34,"value":3405}," { confirmAction } ",{"type":29,"tag":156,"props":3407,"children":3408},{"style":240},[3409],{"type":34,"value":254},{"type":29,"tag":156,"props":3411,"children":3412},{"style":169},[3413],{"type":34,"value":3414}," '.\u002Fcomposables\u002FconfirmAction'\n",{"type":29,"tag":156,"props":3416,"children":3417},{"class":158,"line":314},[3418],{"type":29,"tag":156,"props":3419,"children":3420},{"emptyLinePlaceholder":318},[3421],{"type":34,"value":321},{"type":29,"tag":156,"props":3423,"children":3424},{"class":158,"line":324},[3425,3429,3434,3438],{"type":29,"tag":156,"props":3426,"children":3427},{"style":240},[3428],{"type":34,"value":537},{"type":29,"tag":156,"props":3430,"children":3431},{"style":188},[3432],{"type":34,"value":3433}," LINKS",{"type":29,"tag":156,"props":3435,"children":3436},{"style":240},[3437],{"type":34,"value":814},{"type":29,"tag":156,"props":3439,"children":3440},{"style":246},[3441],{"type":34,"value":3442}," [\n",{"type":29,"tag":156,"props":3444,"children":3445},{"class":158,"line":531},[3446,3451],{"type":29,"tag":156,"props":3447,"children":3448},{"style":169},[3449],{"type":34,"value":3450},"  'https:\u002F\u002Fvuejs.org\u002F'",{"type":29,"tag":156,"props":3452,"children":3453},{"style":246},[3454],{"type":34,"value":3455},",\n",{"type":29,"tag":156,"props":3457,"children":3458},{"class":158,"line":579},[3459,3464],{"type":29,"tag":156,"props":3460,"children":3461},{"style":169},[3462],{"type":34,"value":3463},"  'https:\u002F\u002Fgithub.com\u002F'",{"type":29,"tag":156,"props":3465,"children":3466},{"style":246},[3467],{"type":34,"value":3455},{"type":29,"tag":156,"props":3469,"children":3470},{"class":158,"line":596},[3471],{"type":29,"tag":156,"props":3472,"children":3473},{"style":169},[3474],{"type":34,"value":3475},"  'https:\u002F\u002Fvueuse.org\u002F'\n",{"type":29,"tag":156,"props":3477,"children":3478},{"class":158,"line":604},[3479],{"type":29,"tag":156,"props":3480,"children":3481},{"style":246},[3482],{"type":34,"value":3483},"]\n",{"type":29,"tag":156,"props":3485,"children":3486},{"class":158,"line":20},[3487],{"type":29,"tag":156,"props":3488,"children":3489},{"emptyLinePlaceholder":318},[3490],{"type":34,"value":321},{"type":29,"tag":156,"props":3492,"children":3493},{"class":158,"line":634},[3494,3498,3502,3507,3511,3516],{"type":29,"tag":156,"props":3495,"children":3496},{"style":240},[3497],{"type":34,"value":2952},{"type":29,"tag":156,"props":3499,"children":3500},{"style":240},[3501],{"type":34,"value":2957},{"type":29,"tag":156,"props":3503,"children":3504},{"style":163},[3505],{"type":34,"value":3506}," goToLink",{"type":29,"tag":156,"props":3508,"children":3509},{"style":246},[3510],{"type":34,"value":355},{"type":29,"tag":156,"props":3512,"children":3513},{"style":2969},[3514],{"type":34,"value":3515},"link",{"type":29,"tag":156,"props":3517,"children":3518},{"style":246},[3519],{"type":34,"value":2977},{"type":29,"tag":156,"props":3521,"children":3522},{"class":158,"line":652},[3523,3527,3532,3537,3541,3545,3550,3554,3559],{"type":29,"tag":156,"props":3524,"children":3525},{"style":240},[3526],{"type":34,"value":3056},{"type":29,"tag":156,"props":3528,"children":3529},{"style":246},[3530],{"type":34,"value":3531}," (",{"type":29,"tag":156,"props":3533,"children":3534},{"style":240},[3535],{"type":34,"value":3536},"await",{"type":29,"tag":156,"props":3538,"children":3539},{"style":163},[3540],{"type":34,"value":3277},{"type":29,"tag":156,"props":3542,"children":3543},{"style":246},[3544],{"type":34,"value":355},{"type":29,"tag":156,"props":3546,"children":3547},{"style":169},[3548],{"type":34,"value":3549},"`Do you want to go to ${",{"type":29,"tag":156,"props":3551,"children":3552},{"style":246},[3553],{"type":34,"value":3515},{"type":29,"tag":156,"props":3555,"children":3556},{"style":169},[3557],{"type":34,"value":3558},"}?`",{"type":29,"tag":156,"props":3560,"children":3561},{"style":246},[3562],{"type":34,"value":3563},")) {\n",{"type":29,"tag":156,"props":3565,"children":3566},{"class":158,"line":670},[3567,3572,3576],{"type":29,"tag":156,"props":3568,"children":3569},{"style":246},[3570],{"type":34,"value":3571},"    window.location.href ",{"type":29,"tag":156,"props":3573,"children":3574},{"style":240},[3575],{"type":34,"value":556},{"type":29,"tag":156,"props":3577,"children":3578},{"style":246},[3579],{"type":34,"value":3580}," link\n",{"type":29,"tag":156,"props":3582,"children":3583},{"class":158,"line":679},[3584],{"type":29,"tag":156,"props":3585,"children":3586},{"style":246},[3587],{"type":34,"value":3588},"  }\n",{"type":29,"tag":156,"props":3590,"children":3591},{"class":158,"line":688},[3592],{"type":29,"tag":156,"props":3593,"children":3594},{"style":246},[3595],{"type":34,"value":1656},{"type":29,"tag":156,"props":3597,"children":3598},{"class":158,"line":706},[3599,3603,3607],{"type":29,"tag":156,"props":3600,"children":3601},{"style":246},[3602],{"type":34,"value":585},{"type":29,"tag":156,"props":3604,"children":3605},{"style":467},[3606],{"type":34,"value":470},{"type":29,"tag":156,"props":3608,"children":3609},{"style":246},[3610],{"type":34,"value":480},{"type":29,"tag":156,"props":3612,"children":3613},{"class":158,"line":16},[3614],{"type":29,"tag":156,"props":3615,"children":3616},{"emptyLinePlaceholder":318},[3617],{"type":34,"value":321},{"type":29,"tag":156,"props":3619,"children":3620},{"class":158,"line":1065},[3621,3625,3629],{"type":29,"tag":156,"props":3622,"children":3623},{"style":246},[3624],{"type":34,"value":464},{"type":29,"tag":156,"props":3626,"children":3627},{"style":467},[3628],{"type":34,"value":614},{"type":29,"tag":156,"props":3630,"children":3631},{"style":246},[3632],{"type":34,"value":480},{"type":29,"tag":156,"props":3634,"children":3635},{"class":158,"line":1083},[3636,3640,3645],{"type":29,"tag":156,"props":3637,"children":3638},{"style":246},[3639],{"type":34,"value":626},{"type":29,"tag":156,"props":3641,"children":3642},{"style":467},[3643],{"type":34,"value":3644},"ul",{"type":29,"tag":156,"props":3646,"children":3647},{"style":246},[3648],{"type":34,"value":480},{"type":29,"tag":156,"props":3650,"children":3651},{"class":158,"line":1092},[3652,3656],{"type":29,"tag":156,"props":3653,"children":3654},{"style":246},[3655],{"type":34,"value":919},{"type":29,"tag":156,"props":3657,"children":3658},{"style":467},[3659],{"type":34,"value":3660},"li\n",{"type":29,"tag":156,"props":3662,"children":3663},{"class":158,"line":1101},[3664,3669,3673],{"type":29,"tag":156,"props":3665,"children":3666},{"style":163},[3667],{"type":34,"value":3668},"      v-for",{"type":29,"tag":156,"props":3670,"children":3671},{"style":246},[3672],{"type":34,"value":556},{"type":29,"tag":156,"props":3674,"children":3675},{"style":169},[3676],{"type":34,"value":3677},"\"link in LINKS\"\n",{"type":29,"tag":156,"props":3679,"children":3680},{"class":158,"line":1118},[3681,3686,3690],{"type":29,"tag":156,"props":3682,"children":3683},{"style":163},[3684],{"type":34,"value":3685},"      :key",{"type":29,"tag":156,"props":3687,"children":3688},{"style":246},[3689],{"type":34,"value":556},{"type":29,"tag":156,"props":3691,"children":3692},{"style":169},[3693],{"type":34,"value":3694},"\"link\"\n",{"type":29,"tag":156,"props":3696,"children":3697},{"class":158,"line":1157},[3698],{"type":29,"tag":156,"props":3699,"children":3700},{"style":246},[3701],{"type":34,"value":1000},{"type":29,"tag":156,"props":3703,"children":3704},{"class":158,"line":1186},[3705,3709],{"type":29,"tag":156,"props":3706,"children":3707},{"style":246},[3708],{"type":34,"value":1008},{"type":29,"tag":156,"props":3710,"children":3711},{"style":467},[3712],{"type":34,"value":631},{"type":29,"tag":156,"props":3714,"children":3715},{"class":158,"line":1199},[3716,3720,3724],{"type":29,"tag":156,"props":3717,"children":3718},{"style":163},[3719],{"type":34,"value":1020},{"type":29,"tag":156,"props":3721,"children":3722},{"style":246},[3723],{"type":34,"value":556},{"type":29,"tag":156,"props":3725,"children":3726},{"style":169},[3727],{"type":34,"value":649},{"type":29,"tag":156,"props":3729,"children":3730},{"class":158,"line":1216},[3731,3735,3739],{"type":29,"tag":156,"props":3732,"children":3733},{"style":163},[3734],{"type":34,"value":1071},{"type":29,"tag":156,"props":3736,"children":3737},{"style":246},[3738],{"type":34,"value":556},{"type":29,"tag":156,"props":3740,"children":3741},{"style":169},[3742],{"type":34,"value":3743},"\"goToLink(link)\"\n",{"type":29,"tag":156,"props":3745,"children":3746},{"class":158,"line":1234},[3747],{"type":29,"tag":156,"props":3748,"children":3749},{"style":246},[3750],{"type":34,"value":1089},{"type":29,"tag":156,"props":3752,"children":3753},{"class":158,"line":1252},[3754],{"type":29,"tag":156,"props":3755,"children":3756},{"style":246},[3757],{"type":34,"value":3758},"        {{ link }}\n",{"type":29,"tag":156,"props":3760,"children":3761},{"class":158,"line":1261},[3762,3766,3770],{"type":29,"tag":156,"props":3763,"children":3764},{"style":246},[3765],{"type":34,"value":1107},{"type":29,"tag":156,"props":3767,"children":3768},{"style":467},[3769],{"type":34,"value":699},{"type":29,"tag":156,"props":3771,"children":3772},{"style":246},[3773],{"type":34,"value":480},{"type":29,"tag":156,"props":3775,"children":3776},{"class":158,"line":1270},[3777,3781,3786],{"type":29,"tag":156,"props":3778,"children":3779},{"style":246},[3780],{"type":34,"value":1402},{"type":29,"tag":156,"props":3782,"children":3783},{"style":467},[3784],{"type":34,"value":3785},"li",{"type":29,"tag":156,"props":3787,"children":3788},{"style":246},[3789],{"type":34,"value":480},{"type":29,"tag":156,"props":3791,"children":3792},{"class":158,"line":1287},[3793,3797,3801],{"type":29,"tag":156,"props":3794,"children":3795},{"style":246},[3796],{"type":34,"value":694},{"type":29,"tag":156,"props":3798,"children":3799},{"style":467},[3800],{"type":34,"value":3644},{"type":29,"tag":156,"props":3802,"children":3803},{"style":246},[3804],{"type":34,"value":480},{"type":29,"tag":156,"props":3806,"children":3807},{"class":158,"line":1299},[3808,3812,3816],{"type":29,"tag":156,"props":3809,"children":3810},{"style":246},[3811],{"type":34,"value":585},{"type":29,"tag":156,"props":3813,"children":3814},{"style":467},[3815],{"type":34,"value":614},{"type":29,"tag":156,"props":3817,"children":3818},{"style":246},[3819],{"type":34,"value":480},{"type":29,"tag":30,"props":3821,"children":3822},{},[3823,3825,3830,3832,3838],{"type":34,"value":3824},"One instance plus ",{"type":29,"tag":48,"props":3826,"children":3828},{"className":3827},[],[3829],{"type":34,"value":3536},{"type":34,"value":3831}," keeps the calling code linear: no callbacks, and the decision is just an ",{"type":29,"tag":48,"props":3833,"children":3835},{"className":3834},[],[3836],{"type":34,"value":3837},"if",{"type":34,"value":132},{"type":29,"tag":30,"props":3840,"children":3841},{},[3842,3844,3849,3851,3857,3859,3864,3866,3872],{"type":34,"value":3843},"One thing to keep in mind when reusing an instance: props passed to ",{"type":29,"tag":48,"props":3845,"children":3847},{"className":3846},[],[3848],{"type":34,"value":421},{"type":34,"value":3850}," are remembered. If a later call omits a prop, the dialog shows the previous value. Pass ",{"type":29,"tag":48,"props":3852,"children":3854},{"className":3853},[],[3855],{"type":34,"value":3856},"{ chore: true }",{"type":34,"value":3858}," as the third argument of ",{"type":29,"tag":48,"props":3860,"children":3862},{"className":3861},[],[3863],{"type":34,"value":393},{"type":34,"value":3865}," to reset props after every close (and ",{"type":29,"tag":48,"props":3867,"children":3869},{"className":3868},[],[3870],{"type":34,"value":3871},"keepInitial: true",{"type":34,"value":3873}," to reset them to the initial values instead of the component defaults).",{"type":29,"tag":134,"props":3875,"children":3877},{"id":3876},"transitions",[3878],{"type":34,"value":3879},"Transitions",{"type":29,"tag":30,"props":3881,"children":3882},{},[3883,3885,3891,3893,3899,3901,3907,3908,3914],{"type":34,"value":3884},"Enter and leave animations work out of the box. The plugin renders every dialog inside Vue's ",{"type":29,"tag":48,"props":3886,"children":3888},{"className":3887},[],[3889],{"type":34,"value":3890},"\u003CTransitionGroup>",{"type":34,"value":3892}," without a ",{"type":29,"tag":48,"props":3894,"children":3896},{"className":3895},[],[3897],{"type":34,"value":3898},"name",{"type":34,"value":3900},", so Vue's default transition classes (",{"type":29,"tag":48,"props":3902,"children":3904},{"className":3903},[],[3905],{"type":34,"value":3906},"v-enter-active",{"type":34,"value":834},{"type":29,"tag":48,"props":3909,"children":3911},{"className":3910},[],[3912],{"type":34,"value":3913},"v-leave-to",{"type":34,"value":3915}," and the rest) are applied to the root element of your dialog component. All you need is matching CSS, no wrappers and no extra setup.",{"type":29,"tag":30,"props":3917,"children":3918},{},[3919],{"type":34,"value":3920},"Here is a dialog where the backdrop fades and the box scales in and out:",{"type":29,"tag":146,"props":3922,"children":3924},{"className":442,"code":3923,"language":11,"meta":19,"style":19},"\u003C!-- TransitionDialog.vue -->\n\u003Cscript setup>\ndefineProps({\n  msg: {\n    type: String,\n    default: 'This modal fades and scales in\u002Fout via \u003CTransitionGroup>'\n  }\n})\n\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"transition-modal\"\n    @click.self=\"emit('cancel')\"\n  >\n    \u003Cdiv class=\"modal-box\">\n      \u003Cp>{{ msg }}\u003C\u002Fp>\n      \u003Cdiv class=\"modal-action\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn btn-primary\"\n          @click=\"emit('confirm', true)\"\n        >\n          Confirm\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn\"\n          @click=\"emit('cancel', false)\"\n        >\n          Cancel\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.transition-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #cecece89;\n}\n\n\u002F* Vue's default transition classes, applied to the dialog's root element *\u002F\n.transition-modal.v-enter-active,\n.transition-modal.v-leave-active {\n  transition: opacity 0.3s ease;\n}\n.transition-modal.v-enter-active .modal-box,\n.transition-modal.v-leave-active .modal-box {\n  transition: transform 0.3s ease;\n}\n.transition-modal.v-enter-from,\n.transition-modal.v-leave-to {\n  opacity: 0;\n}\n.transition-modal.v-enter-from .modal-box,\n.transition-modal.v-leave-to .modal-box {\n  transform: scale(0.85);\n}\n\u003C\u002Fstyle>\n",[3925],{"type":29,"tag":48,"props":3926,"children":3927},{"__ignoreMap":19},[3928,3936,3955,3967,3975,3983,3996,4003,4010,4017,4056,4071,4078,4093,4104,4121,4137,4144,4172,4196,4223,4234,4249,4265,4281,4288,4295,4310,4321,4336,4352,4368,4375,4382,4397,4412,4427,4442,4457,4464,4479,4491,4510,4529,4550,4569,4588,4607,4627,4634,4641,4649,4661,4673,4705,4712,4728,4743,4771,4778,4790,4802,4822,4829,4844,4859,4889,4896],{"type":29,"tag":156,"props":3929,"children":3930},{"class":158,"line":159},[3931],{"type":29,"tag":156,"props":3932,"children":3933},{"style":453},[3934],{"type":34,"value":3935},"\u003C!-- TransitionDialog.vue -->\n",{"type":29,"tag":156,"props":3937,"children":3938},{"class":158,"line":17},[3939,3943,3947,3951],{"type":29,"tag":156,"props":3940,"children":3941},{"style":246},[3942],{"type":34,"value":464},{"type":29,"tag":156,"props":3944,"children":3945},{"style":467},[3946],{"type":34,"value":470},{"type":29,"tag":156,"props":3948,"children":3949},{"style":163},[3950],{"type":34,"value":475},{"type":29,"tag":156,"props":3952,"children":3953},{"style":246},[3954],{"type":34,"value":480},{"type":29,"tag":156,"props":3956,"children":3957},{"class":158,"line":198},[3958,3962],{"type":29,"tag":156,"props":3959,"children":3960},{"style":163},[3961],{"type":34,"value":792},{"type":29,"tag":156,"props":3963,"children":3964},{"style":246},[3965],{"type":34,"value":3966},"({\n",{"type":29,"tag":156,"props":3968,"children":3969},{"class":158,"line":314},[3970],{"type":29,"tag":156,"props":3971,"children":3972},{"style":246},[3973],{"type":34,"value":3974},"  msg: {\n",{"type":29,"tag":156,"props":3976,"children":3977},{"class":158,"line":324},[3978],{"type":29,"tag":156,"props":3979,"children":3980},{"style":246},[3981],{"type":34,"value":3982},"    type: String,\n",{"type":29,"tag":156,"props":3984,"children":3985},{"class":158,"line":531},[3986,3991],{"type":29,"tag":156,"props":3987,"children":3988},{"style":246},[3989],{"type":34,"value":3990},"    default: ",{"type":29,"tag":156,"props":3992,"children":3993},{"style":169},[3994],{"type":34,"value":3995},"'This modal fades and scales in\u002Fout via \u003CTransitionGroup>'\n",{"type":29,"tag":156,"props":3997,"children":3998},{"class":158,"line":579},[3999],{"type":29,"tag":156,"props":4000,"children":4001},{"style":246},[4002],{"type":34,"value":3588},{"type":29,"tag":156,"props":4004,"children":4005},{"class":158,"line":596},[4006],{"type":29,"tag":156,"props":4007,"children":4008},{"style":246},[4009],{"type":34,"value":2594},{"type":29,"tag":156,"props":4011,"children":4012},{"class":158,"line":604},[4013],{"type":29,"tag":156,"props":4014,"children":4015},{"emptyLinePlaceholder":318},[4016],{"type":34,"value":321},{"type":29,"tag":156,"props":4018,"children":4019},{"class":158,"line":20},[4020,4024,4028,4032,4036,4040,4044,4048,4052],{"type":29,"tag":156,"props":4021,"children":4022},{"style":240},[4023],{"type":34,"value":537},{"type":29,"tag":156,"props":4025,"children":4026},{"style":188},[4027],{"type":34,"value":809},{"type":29,"tag":156,"props":4029,"children":4030},{"style":240},[4031],{"type":34,"value":814},{"type":29,"tag":156,"props":4033,"children":4034},{"style":163},[4035],{"type":34,"value":819},{"type":29,"tag":156,"props":4037,"children":4038},{"style":246},[4039],{"type":34,"value":824},{"type":29,"tag":156,"props":4041,"children":4042},{"style":169},[4043],{"type":34,"value":829},{"type":29,"tag":156,"props":4045,"children":4046},{"style":246},[4047],{"type":34,"value":834},{"type":29,"tag":156,"props":4049,"children":4050},{"style":169},[4051],{"type":34,"value":839},{"type":29,"tag":156,"props":4053,"children":4054},{"style":246},[4055],{"type":34,"value":844},{"type":29,"tag":156,"props":4057,"children":4058},{"class":158,"line":634},[4059,4063,4067],{"type":29,"tag":156,"props":4060,"children":4061},{"style":246},[4062],{"type":34,"value":585},{"type":29,"tag":156,"props":4064,"children":4065},{"style":467},[4066],{"type":34,"value":470},{"type":29,"tag":156,"props":4068,"children":4069},{"style":246},[4070],{"type":34,"value":480},{"type":29,"tag":156,"props":4072,"children":4073},{"class":158,"line":652},[4074],{"type":29,"tag":156,"props":4075,"children":4076},{"emptyLinePlaceholder":318},[4077],{"type":34,"value":321},{"type":29,"tag":156,"props":4079,"children":4080},{"class":158,"line":670},[4081,4085,4089],{"type":29,"tag":156,"props":4082,"children":4083},{"style":246},[4084],{"type":34,"value":464},{"type":29,"tag":156,"props":4086,"children":4087},{"style":467},[4088],{"type":34,"value":614},{"type":29,"tag":156,"props":4090,"children":4091},{"style":246},[4092],{"type":34,"value":480},{"type":29,"tag":156,"props":4094,"children":4095},{"class":158,"line":679},[4096,4100],{"type":29,"tag":156,"props":4097,"children":4098},{"style":246},[4099],{"type":34,"value":626},{"type":29,"tag":156,"props":4101,"children":4102},{"style":467},[4103],{"type":34,"value":924},{"type":29,"tag":156,"props":4105,"children":4106},{"class":158,"line":688},[4107,4112,4116],{"type":29,"tag":156,"props":4108,"children":4109},{"style":163},[4110],{"type":34,"value":4111},"    class",{"type":29,"tag":156,"props":4113,"children":4114},{"style":246},[4115],{"type":34,"value":556},{"type":29,"tag":156,"props":4117,"children":4118},{"style":169},[4119],{"type":34,"value":4120},"\"transition-modal\"\n",{"type":29,"tag":156,"props":4122,"children":4123},{"class":158,"line":706},[4124,4129,4133],{"type":29,"tag":156,"props":4125,"children":4126},{"style":163},[4127],{"type":34,"value":4128},"    @click.self",{"type":29,"tag":156,"props":4130,"children":4131},{"style":246},[4132],{"type":34,"value":556},{"type":29,"tag":156,"props":4134,"children":4135},{"style":169},[4136],{"type":34,"value":1080},{"type":29,"tag":156,"props":4138,"children":4139},{"class":158,"line":16},[4140],{"type":29,"tag":156,"props":4141,"children":4142},{"style":246},[4143],{"type":34,"value":676},{"type":29,"tag":156,"props":4145,"children":4146},{"class":158,"line":1065},[4147,4151,4155,4159,4163,4168],{"type":29,"tag":156,"props":4148,"children":4149},{"style":246},[4150],{"type":34,"value":919},{"type":29,"tag":156,"props":4152,"children":4153},{"style":467},[4154],{"type":34,"value":893},{"type":29,"tag":156,"props":4156,"children":4157},{"style":163},[4158],{"type":34,"value":898},{"type":29,"tag":156,"props":4160,"children":4161},{"style":246},[4162],{"type":34,"value":556},{"type":29,"tag":156,"props":4164,"children":4165},{"style":169},[4166],{"type":34,"value":4167},"\"modal-box\"",{"type":29,"tag":156,"props":4169,"children":4170},{"style":246},[4171],{"type":34,"value":480},{"type":29,"tag":156,"props":4173,"children":4174},{"class":158,"line":1083},[4175,4179,4183,4188,4192],{"type":29,"tag":156,"props":4176,"children":4177},{"style":246},[4178],{"type":34,"value":1008},{"type":29,"tag":156,"props":4180,"children":4181},{"style":467},[4182],{"type":34,"value":30},{"type":29,"tag":156,"props":4184,"children":4185},{"style":246},[4186],{"type":34,"value":4187},">{{ msg }}\u003C\u002F",{"type":29,"tag":156,"props":4189,"children":4190},{"style":467},[4191],{"type":34,"value":30},{"type":29,"tag":156,"props":4193,"children":4194},{"style":246},[4195],{"type":34,"value":480},{"type":29,"tag":156,"props":4197,"children":4198},{"class":158,"line":1092},[4199,4203,4207,4211,4215,4219],{"type":29,"tag":156,"props":4200,"children":4201},{"style":246},[4202],{"type":34,"value":1008},{"type":29,"tag":156,"props":4204,"children":4205},{"style":467},[4206],{"type":34,"value":893},{"type":29,"tag":156,"props":4208,"children":4209},{"style":163},[4210],{"type":34,"value":898},{"type":29,"tag":156,"props":4212,"children":4213},{"style":246},[4214],{"type":34,"value":556},{"type":29,"tag":156,"props":4216,"children":4217},{"style":169},[4218],{"type":34,"value":1179},{"type":29,"tag":156,"props":4220,"children":4221},{"style":246},[4222],{"type":34,"value":480},{"type":29,"tag":156,"props":4224,"children":4225},{"class":158,"line":1101},[4226,4230],{"type":29,"tag":156,"props":4227,"children":4228},{"style":246},[4229],{"type":34,"value":1192},{"type":29,"tag":156,"props":4231,"children":4232},{"style":467},[4233],{"type":34,"value":631},{"type":29,"tag":156,"props":4235,"children":4236},{"class":158,"line":1118},[4237,4241,4245],{"type":29,"tag":156,"props":4238,"children":4239},{"style":163},[4240],{"type":34,"value":1205},{"type":29,"tag":156,"props":4242,"children":4243},{"style":246},[4244],{"type":34,"value":556},{"type":29,"tag":156,"props":4246,"children":4247},{"style":169},[4248],{"type":34,"value":649},{"type":29,"tag":156,"props":4250,"children":4251},{"class":158,"line":1157},[4252,4256,4260],{"type":29,"tag":156,"props":4253,"children":4254},{"style":163},[4255],{"type":34,"value":1222},{"type":29,"tag":156,"props":4257,"children":4258},{"style":246},[4259],{"type":34,"value":556},{"type":29,"tag":156,"props":4261,"children":4262},{"style":169},[4263],{"type":34,"value":4264},"\"btn btn-primary\"\n",{"type":29,"tag":156,"props":4266,"children":4267},{"class":158,"line":1186},[4268,4272,4276],{"type":29,"tag":156,"props":4269,"children":4270},{"style":163},[4271],{"type":34,"value":1240},{"type":29,"tag":156,"props":4273,"children":4274},{"style":246},[4275],{"type":34,"value":556},{"type":29,"tag":156,"props":4277,"children":4278},{"style":169},[4279],{"type":34,"value":4280},"\"emit('confirm', true)\"\n",{"type":29,"tag":156,"props":4282,"children":4283},{"class":158,"line":1199},[4284],{"type":29,"tag":156,"props":4285,"children":4286},{"style":246},[4287],{"type":34,"value":1258},{"type":29,"tag":156,"props":4289,"children":4290},{"class":158,"line":1216},[4291],{"type":29,"tag":156,"props":4292,"children":4293},{"style":246},[4294],{"type":34,"value":1267},{"type":29,"tag":156,"props":4296,"children":4297},{"class":158,"line":1234},[4298,4302,4306],{"type":29,"tag":156,"props":4299,"children":4300},{"style":246},[4301],{"type":34,"value":1276},{"type":29,"tag":156,"props":4303,"children":4304},{"style":467},[4305],{"type":34,"value":699},{"type":29,"tag":156,"props":4307,"children":4308},{"style":246},[4309],{"type":34,"value":480},{"type":29,"tag":156,"props":4311,"children":4312},{"class":158,"line":1252},[4313,4317],{"type":29,"tag":156,"props":4314,"children":4315},{"style":246},[4316],{"type":34,"value":1192},{"type":29,"tag":156,"props":4318,"children":4319},{"style":467},[4320],{"type":34,"value":631},{"type":29,"tag":156,"props":4322,"children":4323},{"class":158,"line":1261},[4324,4328,4332],{"type":29,"tag":156,"props":4325,"children":4326},{"style":163},[4327],{"type":34,"value":1205},{"type":29,"tag":156,"props":4329,"children":4330},{"style":246},[4331],{"type":34,"value":556},{"type":29,"tag":156,"props":4333,"children":4334},{"style":169},[4335],{"type":34,"value":649},{"type":29,"tag":156,"props":4337,"children":4338},{"class":158,"line":1270},[4339,4343,4347],{"type":29,"tag":156,"props":4340,"children":4341},{"style":163},[4342],{"type":34,"value":1222},{"type":29,"tag":156,"props":4344,"children":4345},{"style":246},[4346],{"type":34,"value":556},{"type":29,"tag":156,"props":4348,"children":4349},{"style":169},[4350],{"type":34,"value":4351},"\"btn\"\n",{"type":29,"tag":156,"props":4353,"children":4354},{"class":158,"line":1287},[4355,4359,4363],{"type":29,"tag":156,"props":4356,"children":4357},{"style":163},[4358],{"type":34,"value":1240},{"type":29,"tag":156,"props":4360,"children":4361},{"style":246},[4362],{"type":34,"value":556},{"type":29,"tag":156,"props":4364,"children":4365},{"style":169},[4366],{"type":34,"value":4367},"\"emit('cancel', false)\"\n",{"type":29,"tag":156,"props":4369,"children":4370},{"class":158,"line":1299},[4371],{"type":29,"tag":156,"props":4372,"children":4373},{"style":246},[4374],{"type":34,"value":1258},{"type":29,"tag":156,"props":4376,"children":4377},{"class":158,"line":1315},[4378],{"type":29,"tag":156,"props":4379,"children":4380},{"style":246},[4381],{"type":34,"value":1361},{"type":29,"tag":156,"props":4383,"children":4384},{"class":158,"line":1331},[4385,4389,4393],{"type":29,"tag":156,"props":4386,"children":4387},{"style":246},[4388],{"type":34,"value":1276},{"type":29,"tag":156,"props":4390,"children":4391},{"style":467},[4392],{"type":34,"value":699},{"type":29,"tag":156,"props":4394,"children":4395},{"style":246},[4396],{"type":34,"value":480},{"type":29,"tag":156,"props":4398,"children":4399},{"class":158,"line":1347},[4400,4404,4408],{"type":29,"tag":156,"props":4401,"children":4402},{"style":246},[4403],{"type":34,"value":1107},{"type":29,"tag":156,"props":4405,"children":4406},{"style":467},[4407],{"type":34,"value":893},{"type":29,"tag":156,"props":4409,"children":4410},{"style":246},[4411],{"type":34,"value":480},{"type":29,"tag":156,"props":4413,"children":4414},{"class":158,"line":1355},[4415,4419,4423],{"type":29,"tag":156,"props":4416,"children":4417},{"style":246},[4418],{"type":34,"value":1402},{"type":29,"tag":156,"props":4420,"children":4421},{"style":467},[4422],{"type":34,"value":893},{"type":29,"tag":156,"props":4424,"children":4425},{"style":246},[4426],{"type":34,"value":480},{"type":29,"tag":156,"props":4428,"children":4429},{"class":158,"line":1364},[4430,4434,4438],{"type":29,"tag":156,"props":4431,"children":4432},{"style":246},[4433],{"type":34,"value":694},{"type":29,"tag":156,"props":4435,"children":4436},{"style":467},[4437],{"type":34,"value":893},{"type":29,"tag":156,"props":4439,"children":4440},{"style":246},[4441],{"type":34,"value":480},{"type":29,"tag":156,"props":4443,"children":4444},{"class":158,"line":1380},[4445,4449,4453],{"type":29,"tag":156,"props":4446,"children":4447},{"style":246},[4448],{"type":34,"value":585},{"type":29,"tag":156,"props":4450,"children":4451},{"style":467},[4452],{"type":34,"value":614},{"type":29,"tag":156,"props":4454,"children":4455},{"style":246},[4456],{"type":34,"value":480},{"type":29,"tag":156,"props":4458,"children":4459},{"class":158,"line":1396},[4460],{"type":29,"tag":156,"props":4461,"children":4462},{"emptyLinePlaceholder":318},[4463],{"type":34,"value":321},{"type":29,"tag":156,"props":4465,"children":4466},{"class":158,"line":1413},[4467,4471,4475],{"type":29,"tag":156,"props":4468,"children":4469},{"style":246},[4470],{"type":34,"value":464},{"type":29,"tag":156,"props":4472,"children":4473},{"style":467},[4474],{"type":34,"value":1463},{"type":29,"tag":156,"props":4476,"children":4477},{"style":246},[4478],{"type":34,"value":480},{"type":29,"tag":156,"props":4480,"children":4481},{"class":158,"line":1429},[4482,4487],{"type":29,"tag":156,"props":4483,"children":4484},{"style":163},[4485],{"type":34,"value":4486},".transition-modal",{"type":29,"tag":156,"props":4488,"children":4489},{"style":246},[4490],{"type":34,"value":1486},{"type":29,"tag":156,"props":4492,"children":4493},{"class":158,"line":1445},[4494,4498,4502,4506],{"type":29,"tag":156,"props":4495,"children":4496},{"style":188},[4497],{"type":34,"value":1495},{"type":29,"tag":156,"props":4499,"children":4500},{"style":246},[4501],{"type":34,"value":1500},{"type":29,"tag":156,"props":4503,"children":4504},{"style":188},[4505],{"type":34,"value":1505},{"type":29,"tag":156,"props":4507,"children":4508},{"style":246},[4509],{"type":34,"value":1510},{"type":29,"tag":156,"props":4511,"children":4512},{"class":158,"line":1453},[4513,4517,4521,4525],{"type":29,"tag":156,"props":4514,"children":4515},{"style":188},[4516],{"type":34,"value":1519},{"type":29,"tag":156,"props":4518,"children":4519},{"style":246},[4520],{"type":34,"value":1500},{"type":29,"tag":156,"props":4522,"children":4523},{"style":188},[4524],{"type":34,"value":1528},{"type":29,"tag":156,"props":4526,"children":4527},{"style":246},[4528],{"type":34,"value":1510},{"type":29,"tag":156,"props":4530,"children":4531},{"class":158,"line":1475},[4532,4537,4541,4546],{"type":29,"tag":156,"props":4533,"children":4534},{"style":188},[4535],{"type":34,"value":4536},"  z-index",{"type":29,"tag":156,"props":4538,"children":4539},{"style":246},[4540],{"type":34,"value":1500},{"type":29,"tag":156,"props":4542,"children":4543},{"style":188},[4544],{"type":34,"value":4545},"100",{"type":29,"tag":156,"props":4547,"children":4548},{"style":246},[4549],{"type":34,"value":1510},{"type":29,"tag":156,"props":4551,"children":4552},{"class":158,"line":1489},[4553,4557,4561,4565],{"type":29,"tag":156,"props":4554,"children":4555},{"style":188},[4556],{"type":34,"value":1541},{"type":29,"tag":156,"props":4558,"children":4559},{"style":246},[4560],{"type":34,"value":1500},{"type":29,"tag":156,"props":4562,"children":4563},{"style":188},[4564],{"type":34,"value":1550},{"type":29,"tag":156,"props":4566,"children":4567},{"style":246},[4568],{"type":34,"value":1510},{"type":29,"tag":156,"props":4570,"children":4571},{"class":158,"line":1513},[4572,4576,4580,4584],{"type":29,"tag":156,"props":4573,"children":4574},{"style":188},[4575],{"type":34,"value":1585},{"type":29,"tag":156,"props":4577,"children":4578},{"style":246},[4579],{"type":34,"value":1500},{"type":29,"tag":156,"props":4581,"children":4582},{"style":188},[4583],{"type":34,"value":1572},{"type":29,"tag":156,"props":4585,"children":4586},{"style":246},[4587],{"type":34,"value":1510},{"type":29,"tag":156,"props":4589,"children":4590},{"class":158,"line":1535},[4591,4595,4599,4603],{"type":29,"tag":156,"props":4592,"children":4593},{"style":188},[4594],{"type":34,"value":1563},{"type":29,"tag":156,"props":4596,"children":4597},{"style":246},[4598],{"type":34,"value":1500},{"type":29,"tag":156,"props":4600,"children":4601},{"style":188},[4602],{"type":34,"value":1572},{"type":29,"tag":156,"props":4604,"children":4605},{"style":246},[4606],{"type":34,"value":1510},{"type":29,"tag":156,"props":4608,"children":4609},{"class":158,"line":1557},[4610,4614,4618,4623],{"type":29,"tag":156,"props":4611,"children":4612},{"style":188},[4613],{"type":34,"value":1606},{"type":29,"tag":156,"props":4615,"children":4616},{"style":246},[4617],{"type":34,"value":1500},{"type":29,"tag":156,"props":4619,"children":4620},{"style":188},[4621],{"type":34,"value":4622},"#cecece89",{"type":29,"tag":156,"props":4624,"children":4625},{"style":246},[4626],{"type":34,"value":1510},{"type":29,"tag":156,"props":4628,"children":4629},{"class":158,"line":1579},[4630],{"type":29,"tag":156,"props":4631,"children":4632},{"style":246},[4633],{"type":34,"value":1656},{"type":29,"tag":156,"props":4635,"children":4636},{"class":158,"line":1600},[4637],{"type":29,"tag":156,"props":4638,"children":4639},{"emptyLinePlaceholder":318},[4640],{"type":34,"value":321},{"type":29,"tag":156,"props":4642,"children":4643},{"class":158,"line":1650},[4644],{"type":29,"tag":156,"props":4645,"children":4646},{"style":453},[4647],{"type":34,"value":4648},"\u002F* Vue's default transition classes, applied to the dialog's root element *\u002F\n",{"type":29,"tag":156,"props":4650,"children":4651},{"class":158,"line":1659},[4652,4657],{"type":29,"tag":156,"props":4653,"children":4654},{"style":163},[4655],{"type":34,"value":4656},".transition-modal.v-enter-active",{"type":29,"tag":156,"props":4658,"children":4659},{"style":246},[4660],{"type":34,"value":3455},{"type":29,"tag":156,"props":4662,"children":4663},{"class":158,"line":1672},[4664,4669],{"type":29,"tag":156,"props":4665,"children":4666},{"style":163},[4667],{"type":34,"value":4668},".transition-modal.v-leave-active",{"type":29,"tag":156,"props":4670,"children":4671},{"style":246},[4672],{"type":34,"value":1486},{"type":29,"tag":156,"props":4674,"children":4675},{"class":158,"line":1693},[4676,4681,4686,4691,4696,4701],{"type":29,"tag":156,"props":4677,"children":4678},{"style":188},[4679],{"type":34,"value":4680},"  transition",{"type":29,"tag":156,"props":4682,"children":4683},{"style":246},[4684],{"type":34,"value":4685},": opacity ",{"type":29,"tag":156,"props":4687,"children":4688},{"style":188},[4689],{"type":34,"value":4690},"0.3",{"type":29,"tag":156,"props":4692,"children":4693},{"style":240},[4694],{"type":34,"value":4695},"s",{"type":29,"tag":156,"props":4697,"children":4698},{"style":188},[4699],{"type":34,"value":4700}," ease",{"type":29,"tag":156,"props":4702,"children":4703},{"style":246},[4704],{"type":34,"value":1510},{"type":29,"tag":156,"props":4706,"children":4707},{"class":158,"line":1713},[4708],{"type":29,"tag":156,"props":4709,"children":4710},{"style":246},[4711],{"type":34,"value":1656},{"type":29,"tag":156,"props":4713,"children":4714},{"class":158,"line":1735},[4715,4719,4724],{"type":29,"tag":156,"props":4716,"children":4717},{"style":163},[4718],{"type":34,"value":4656},{"type":29,"tag":156,"props":4720,"children":4721},{"style":163},[4722],{"type":34,"value":4723}," .modal-box",{"type":29,"tag":156,"props":4725,"children":4726},{"style":246},[4727],{"type":34,"value":3455},{"type":29,"tag":156,"props":4729,"children":4730},{"class":158,"line":1762},[4731,4735,4739],{"type":29,"tag":156,"props":4732,"children":4733},{"style":163},[4734],{"type":34,"value":4668},{"type":29,"tag":156,"props":4736,"children":4737},{"style":163},[4738],{"type":34,"value":4723},{"type":29,"tag":156,"props":4740,"children":4741},{"style":246},[4742],{"type":34,"value":1486},{"type":29,"tag":156,"props":4744,"children":4745},{"class":158,"line":1797},[4746,4750,4755,4759,4763,4767],{"type":29,"tag":156,"props":4747,"children":4748},{"style":188},[4749],{"type":34,"value":4680},{"type":29,"tag":156,"props":4751,"children":4752},{"style":246},[4753],{"type":34,"value":4754},": transform ",{"type":29,"tag":156,"props":4756,"children":4757},{"style":188},[4758],{"type":34,"value":4690},{"type":29,"tag":156,"props":4760,"children":4761},{"style":240},[4762],{"type":34,"value":4695},{"type":29,"tag":156,"props":4764,"children":4765},{"style":188},[4766],{"type":34,"value":4700},{"type":29,"tag":156,"props":4768,"children":4769},{"style":246},[4770],{"type":34,"value":1510},{"type":29,"tag":156,"props":4772,"children":4773},{"class":158,"line":1823},[4774],{"type":29,"tag":156,"props":4775,"children":4776},{"style":246},[4777],{"type":34,"value":1656},{"type":29,"tag":156,"props":4779,"children":4780},{"class":158,"line":1844},[4781,4786],{"type":29,"tag":156,"props":4782,"children":4783},{"style":163},[4784],{"type":34,"value":4785},".transition-modal.v-enter-from",{"type":29,"tag":156,"props":4787,"children":4788},{"style":246},[4789],{"type":34,"value":3455},{"type":29,"tag":156,"props":4791,"children":4792},{"class":158,"line":1865},[4793,4798],{"type":29,"tag":156,"props":4794,"children":4795},{"style":163},[4796],{"type":34,"value":4797},".transition-modal.v-leave-to",{"type":29,"tag":156,"props":4799,"children":4800},{"style":246},[4801],{"type":34,"value":1486},{"type":29,"tag":156,"props":4803,"children":4804},{"class":158,"line":1873},[4805,4810,4814,4818],{"type":29,"tag":156,"props":4806,"children":4807},{"style":188},[4808],{"type":34,"value":4809},"  opacity",{"type":29,"tag":156,"props":4811,"children":4812},{"style":246},[4813],{"type":34,"value":1500},{"type":29,"tag":156,"props":4815,"children":4816},{"style":188},[4817],{"type":34,"value":1528},{"type":29,"tag":156,"props":4819,"children":4820},{"style":246},[4821],{"type":34,"value":1510},{"type":29,"tag":156,"props":4823,"children":4824},{"class":158,"line":1886},[4825],{"type":29,"tag":156,"props":4826,"children":4827},{"style":246},[4828],{"type":34,"value":1656},{"type":29,"tag":156,"props":4830,"children":4831},{"class":158,"line":1906},[4832,4836,4840],{"type":29,"tag":156,"props":4833,"children":4834},{"style":163},[4835],{"type":34,"value":4785},{"type":29,"tag":156,"props":4837,"children":4838},{"style":163},[4839],{"type":34,"value":4723},{"type":29,"tag":156,"props":4841,"children":4842},{"style":246},[4843],{"type":34,"value":3455},{"type":29,"tag":156,"props":4845,"children":4846},{"class":158,"line":1932},[4847,4851,4855],{"type":29,"tag":156,"props":4848,"children":4849},{"style":163},[4850],{"type":34,"value":4797},{"type":29,"tag":156,"props":4852,"children":4853},{"style":163},[4854],{"type":34,"value":4723},{"type":29,"tag":156,"props":4856,"children":4857},{"style":246},[4858],{"type":34,"value":1486},{"type":29,"tag":156,"props":4860,"children":4861},{"class":158,"line":1952},[4862,4867,4871,4876,4880,4885],{"type":29,"tag":156,"props":4863,"children":4864},{"style":188},[4865],{"type":34,"value":4866},"  transform",{"type":29,"tag":156,"props":4868,"children":4869},{"style":246},[4870],{"type":34,"value":1500},{"type":29,"tag":156,"props":4872,"children":4873},{"style":188},[4874],{"type":34,"value":4875},"scale",{"type":29,"tag":156,"props":4877,"children":4878},{"style":246},[4879],{"type":34,"value":355},{"type":29,"tag":156,"props":4881,"children":4882},{"style":188},[4883],{"type":34,"value":4884},"0.85",{"type":29,"tag":156,"props":4886,"children":4887},{"style":246},[4888],{"type":34,"value":1647},{"type":29,"tag":156,"props":4890,"children":4891},{"class":158,"line":1960},[4892],{"type":29,"tag":156,"props":4893,"children":4894},{"style":246},[4895],{"type":34,"value":1656},{"type":29,"tag":156,"props":4897,"children":4898},{"class":158,"line":1973},[4899,4903,4907],{"type":29,"tag":156,"props":4900,"children":4901},{"style":246},[4902],{"type":34,"value":585},{"type":29,"tag":156,"props":4904,"children":4905},{"style":467},[4906],{"type":34,"value":1463},{"type":29,"tag":156,"props":4908,"children":4909},{"style":246},[4910],{"type":34,"value":480},{"type":29,"tag":30,"props":4912,"children":4913},{},[4914],{"type":34,"value":4915},"A few details worth noting:",{"type":29,"tag":3644,"props":4917,"children":4918},{},[4919,4947,4958],{"type":29,"tag":3785,"props":4920,"children":4921},{},[4922,4924,4930,4932,4937,4939,4945],{"type":34,"value":4923},"The transition classes are set on the dialog's ",{"type":29,"tag":4925,"props":4926,"children":4927},"strong",{},[4928],{"type":34,"value":4929},"root element",{"type":34,"value":4931},", so the selectors start with the root class (",{"type":29,"tag":48,"props":4933,"children":4935},{"className":4934},[],[4936],{"type":34,"value":4656},{"type":34,"value":4938},"). Nested elements are animated through descendant selectors, like the scaling ",{"type":29,"tag":48,"props":4940,"children":4942},{"className":4941},[],[4943],{"type":34,"value":4944},".modal-box",{"type":34,"value":4946}," here.",{"type":29,"tag":3785,"props":4948,"children":4949},{},[4950,4956],{"type":29,"tag":48,"props":4951,"children":4953},{"className":4952},[],[4954],{"type":34,"value":4955},"@click.self",{"type":34,"value":4957}," on the backdrop closes the dialog on a click outside the box, but not on clicks inside it.",{"type":29,"tag":3785,"props":4959,"children":4960},{},[4961],{"type":34,"value":4962},"Vue waits for the leave transition to finish before removing the element, so you don't need any timers.",{"type":29,"tag":30,"props":4964,"children":4965},{},[4966,4968,4974],{"type":34,"value":4967},"Use it like any other dialog: ",{"type":29,"tag":48,"props":4969,"children":4971},{"className":4970},[],[4972],{"type":34,"value":4973},"createConfirmDialog(TransitionDialog).reveal()",{"type":34,"value":132},{"type":29,"tag":30,"props":4976,"children":4977},{},[4978],{"type":34,"value":4979},"A backdrop is not required. The classes go to whatever the root element is, so a dialog without an overlay, such as a toast in the corner, is animated with rules on the root alone:",{"type":29,"tag":146,"props":4981,"children":4983},{"className":442,"code":4982,"language":11,"meta":19,"style":19},"\u003C!-- ToastDialog.vue -->\n\u003Cscript setup>\ndefineProps({ msg: String })\nconst emit = defineEmits(['confirm', 'cancel'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"toast\"\n    role=\"status\"\n  >\n    \u003Cp>{{ msg }}\u003C\u002Fp>\n    \u003Cbutton\n      type=\"button\"\n      @click=\"emit('confirm')\"\n    >\n      OK\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.toast {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n}\n.toast.v-enter-active,\n.toast.v-leave-active {\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.toast.v-enter-from,\n.toast.v-leave-to {\n  opacity: 0;\n  transform: translateY(12px);\n}\n\u003C\u002Fstyle>\n",[4984],{"type":29,"tag":48,"props":4985,"children":4986},{"__ignoreMap":19},[4987,4995,5014,5026,5065,5080,5087,5102,5113,5129,5146,5153,5176,5187,5203,5219,5226,5234,5249,5264,5279,5286,5301,5313,5332,5356,5380,5387,5399,5411,5455,5462,5474,5486,5505,5538,5545],{"type":29,"tag":156,"props":4988,"children":4989},{"class":158,"line":159},[4990],{"type":29,"tag":156,"props":4991,"children":4992},{"style":453},[4993],{"type":34,"value":4994},"\u003C!-- ToastDialog.vue -->\n",{"type":29,"tag":156,"props":4996,"children":4997},{"class":158,"line":17},[4998,5002,5006,5010],{"type":29,"tag":156,"props":4999,"children":5000},{"style":246},[5001],{"type":34,"value":464},{"type":29,"tag":156,"props":5003,"children":5004},{"style":467},[5005],{"type":34,"value":470},{"type":29,"tag":156,"props":5007,"children":5008},{"style":163},[5009],{"type":34,"value":475},{"type":29,"tag":156,"props":5011,"children":5012},{"style":246},[5013],{"type":34,"value":480},{"type":29,"tag":156,"props":5015,"children":5016},{"class":158,"line":198},[5017,5021],{"type":29,"tag":156,"props":5018,"children":5019},{"style":163},[5020],{"type":34,"value":792},{"type":29,"tag":156,"props":5022,"children":5023},{"style":246},[5024],{"type":34,"value":5025},"({ msg: String })\n",{"type":29,"tag":156,"props":5027,"children":5028},{"class":158,"line":314},[5029,5033,5037,5041,5045,5049,5053,5057,5061],{"type":29,"tag":156,"props":5030,"children":5031},{"style":240},[5032],{"type":34,"value":537},{"type":29,"tag":156,"props":5034,"children":5035},{"style":188},[5036],{"type":34,"value":809},{"type":29,"tag":156,"props":5038,"children":5039},{"style":240},[5040],{"type":34,"value":814},{"type":29,"tag":156,"props":5042,"children":5043},{"style":163},[5044],{"type":34,"value":819},{"type":29,"tag":156,"props":5046,"children":5047},{"style":246},[5048],{"type":34,"value":824},{"type":29,"tag":156,"props":5050,"children":5051},{"style":169},[5052],{"type":34,"value":829},{"type":29,"tag":156,"props":5054,"children":5055},{"style":246},[5056],{"type":34,"value":834},{"type":29,"tag":156,"props":5058,"children":5059},{"style":169},[5060],{"type":34,"value":839},{"type":29,"tag":156,"props":5062,"children":5063},{"style":246},[5064],{"type":34,"value":844},{"type":29,"tag":156,"props":5066,"children":5067},{"class":158,"line":324},[5068,5072,5076],{"type":29,"tag":156,"props":5069,"children":5070},{"style":246},[5071],{"type":34,"value":585},{"type":29,"tag":156,"props":5073,"children":5074},{"style":467},[5075],{"type":34,"value":470},{"type":29,"tag":156,"props":5077,"children":5078},{"style":246},[5079],{"type":34,"value":480},{"type":29,"tag":156,"props":5081,"children":5082},{"class":158,"line":531},[5083],{"type":29,"tag":156,"props":5084,"children":5085},{"emptyLinePlaceholder":318},[5086],{"type":34,"value":321},{"type":29,"tag":156,"props":5088,"children":5089},{"class":158,"line":579},[5090,5094,5098],{"type":29,"tag":156,"props":5091,"children":5092},{"style":246},[5093],{"type":34,"value":464},{"type":29,"tag":156,"props":5095,"children":5096},{"style":467},[5097],{"type":34,"value":614},{"type":29,"tag":156,"props":5099,"children":5100},{"style":246},[5101],{"type":34,"value":480},{"type":29,"tag":156,"props":5103,"children":5104},{"class":158,"line":596},[5105,5109],{"type":29,"tag":156,"props":5106,"children":5107},{"style":246},[5108],{"type":34,"value":626},{"type":29,"tag":156,"props":5110,"children":5111},{"style":467},[5112],{"type":34,"value":924},{"type":29,"tag":156,"props":5114,"children":5115},{"class":158,"line":604},[5116,5120,5124],{"type":29,"tag":156,"props":5117,"children":5118},{"style":163},[5119],{"type":34,"value":4111},{"type":29,"tag":156,"props":5121,"children":5122},{"style":246},[5123],{"type":34,"value":556},{"type":29,"tag":156,"props":5125,"children":5126},{"style":169},[5127],{"type":34,"value":5128},"\"toast\"\n",{"type":29,"tag":156,"props":5130,"children":5131},{"class":158,"line":20},[5132,5137,5141],{"type":29,"tag":156,"props":5133,"children":5134},{"style":163},[5135],{"type":34,"value":5136},"    role",{"type":29,"tag":156,"props":5138,"children":5139},{"style":246},[5140],{"type":34,"value":556},{"type":29,"tag":156,"props":5142,"children":5143},{"style":169},[5144],{"type":34,"value":5145},"\"status\"\n",{"type":29,"tag":156,"props":5147,"children":5148},{"class":158,"line":634},[5149],{"type":29,"tag":156,"props":5150,"children":5151},{"style":246},[5152],{"type":34,"value":676},{"type":29,"tag":156,"props":5154,"children":5155},{"class":158,"line":652},[5156,5160,5164,5168,5172],{"type":29,"tag":156,"props":5157,"children":5158},{"style":246},[5159],{"type":34,"value":919},{"type":29,"tag":156,"props":5161,"children":5162},{"style":467},[5163],{"type":34,"value":30},{"type":29,"tag":156,"props":5165,"children":5166},{"style":246},[5167],{"type":34,"value":4187},{"type":29,"tag":156,"props":5169,"children":5170},{"style":467},[5171],{"type":34,"value":30},{"type":29,"tag":156,"props":5173,"children":5174},{"style":246},[5175],{"type":34,"value":480},{"type":29,"tag":156,"props":5177,"children":5178},{"class":158,"line":670},[5179,5183],{"type":29,"tag":156,"props":5180,"children":5181},{"style":246},[5182],{"type":34,"value":919},{"type":29,"tag":156,"props":5184,"children":5185},{"style":467},[5186],{"type":34,"value":631},{"type":29,"tag":156,"props":5188,"children":5189},{"class":158,"line":679},[5190,5195,5199],{"type":29,"tag":156,"props":5191,"children":5192},{"style":163},[5193],{"type":34,"value":5194},"      type",{"type":29,"tag":156,"props":5196,"children":5197},{"style":246},[5198],{"type":34,"value":556},{"type":29,"tag":156,"props":5200,"children":5201},{"style":169},[5202],{"type":34,"value":649},{"type":29,"tag":156,"props":5204,"children":5205},{"class":158,"line":688},[5206,5211,5215],{"type":29,"tag":156,"props":5207,"children":5208},{"style":163},[5209],{"type":34,"value":5210},"      @click",{"type":29,"tag":156,"props":5212,"children":5213},{"style":246},[5214],{"type":34,"value":556},{"type":29,"tag":156,"props":5216,"children":5217},{"style":169},[5218],{"type":34,"value":1249},{"type":29,"tag":156,"props":5220,"children":5221},{"class":158,"line":706},[5222],{"type":29,"tag":156,"props":5223,"children":5224},{"style":246},[5225],{"type":34,"value":1000},{"type":29,"tag":156,"props":5227,"children":5228},{"class":158,"line":16},[5229],{"type":29,"tag":156,"props":5230,"children":5231},{"style":246},[5232],{"type":34,"value":5233},"      OK\n",{"type":29,"tag":156,"props":5235,"children":5236},{"class":158,"line":1065},[5237,5241,5245],{"type":29,"tag":156,"props":5238,"children":5239},{"style":246},[5240],{"type":34,"value":1402},{"type":29,"tag":156,"props":5242,"children":5243},{"style":467},[5244],{"type":34,"value":699},{"type":29,"tag":156,"props":5246,"children":5247},{"style":246},[5248],{"type":34,"value":480},{"type":29,"tag":156,"props":5250,"children":5251},{"class":158,"line":1083},[5252,5256,5260],{"type":29,"tag":156,"props":5253,"children":5254},{"style":246},[5255],{"type":34,"value":694},{"type":29,"tag":156,"props":5257,"children":5258},{"style":467},[5259],{"type":34,"value":893},{"type":29,"tag":156,"props":5261,"children":5262},{"style":246},[5263],{"type":34,"value":480},{"type":29,"tag":156,"props":5265,"children":5266},{"class":158,"line":1092},[5267,5271,5275],{"type":29,"tag":156,"props":5268,"children":5269},{"style":246},[5270],{"type":34,"value":585},{"type":29,"tag":156,"props":5272,"children":5273},{"style":467},[5274],{"type":34,"value":614},{"type":29,"tag":156,"props":5276,"children":5277},{"style":246},[5278],{"type":34,"value":480},{"type":29,"tag":156,"props":5280,"children":5281},{"class":158,"line":1101},[5282],{"type":29,"tag":156,"props":5283,"children":5284},{"emptyLinePlaceholder":318},[5285],{"type":34,"value":321},{"type":29,"tag":156,"props":5287,"children":5288},{"class":158,"line":1118},[5289,5293,5297],{"type":29,"tag":156,"props":5290,"children":5291},{"style":246},[5292],{"type":34,"value":464},{"type":29,"tag":156,"props":5294,"children":5295},{"style":467},[5296],{"type":34,"value":1463},{"type":29,"tag":156,"props":5298,"children":5299},{"style":246},[5300],{"type":34,"value":480},{"type":29,"tag":156,"props":5302,"children":5303},{"class":158,"line":1157},[5304,5309],{"type":29,"tag":156,"props":5305,"children":5306},{"style":163},[5307],{"type":34,"value":5308},".toast",{"type":29,"tag":156,"props":5310,"children":5311},{"style":246},[5312],{"type":34,"value":1486},{"type":29,"tag":156,"props":5314,"children":5315},{"class":158,"line":1186},[5316,5320,5324,5328],{"type":29,"tag":156,"props":5317,"children":5318},{"style":188},[5319],{"type":34,"value":1495},{"type":29,"tag":156,"props":5321,"children":5322},{"style":246},[5323],{"type":34,"value":1500},{"type":29,"tag":156,"props":5325,"children":5326},{"style":188},[5327],{"type":34,"value":1505},{"type":29,"tag":156,"props":5329,"children":5330},{"style":246},[5331],{"type":34,"value":1510},{"type":29,"tag":156,"props":5333,"children":5334},{"class":158,"line":1199},[5335,5339,5343,5348,5352],{"type":29,"tag":156,"props":5336,"children":5337},{"style":188},[5338],{"type":34,"value":2212},{"type":29,"tag":156,"props":5340,"children":5341},{"style":246},[5342],{"type":34,"value":1500},{"type":29,"tag":156,"props":5344,"children":5345},{"style":188},[5346],{"type":34,"value":5347},"16",{"type":29,"tag":156,"props":5349,"children":5350},{"style":240},[5351],{"type":34,"value":1755},{"type":29,"tag":156,"props":5353,"children":5354},{"style":246},[5355],{"type":34,"value":1510},{"type":29,"tag":156,"props":5357,"children":5358},{"class":158,"line":1216},[5359,5364,5368,5372,5376],{"type":29,"tag":156,"props":5360,"children":5361},{"style":188},[5362],{"type":34,"value":5363},"  bottom",{"type":29,"tag":156,"props":5365,"children":5366},{"style":246},[5367],{"type":34,"value":1500},{"type":29,"tag":156,"props":5369,"children":5370},{"style":188},[5371],{"type":34,"value":5347},{"type":29,"tag":156,"props":5373,"children":5374},{"style":240},[5375],{"type":34,"value":1755},{"type":29,"tag":156,"props":5377,"children":5378},{"style":246},[5379],{"type":34,"value":1510},{"type":29,"tag":156,"props":5381,"children":5382},{"class":158,"line":1234},[5383],{"type":29,"tag":156,"props":5384,"children":5385},{"style":246},[5386],{"type":34,"value":1656},{"type":29,"tag":156,"props":5388,"children":5389},{"class":158,"line":1252},[5390,5395],{"type":29,"tag":156,"props":5391,"children":5392},{"style":163},[5393],{"type":34,"value":5394},".toast.v-enter-active",{"type":29,"tag":156,"props":5396,"children":5397},{"style":246},[5398],{"type":34,"value":3455},{"type":29,"tag":156,"props":5400,"children":5401},{"class":158,"line":1261},[5402,5407],{"type":29,"tag":156,"props":5403,"children":5404},{"style":163},[5405],{"type":34,"value":5406},".toast.v-leave-active",{"type":29,"tag":156,"props":5408,"children":5409},{"style":246},[5410],{"type":34,"value":1486},{"type":29,"tag":156,"props":5412,"children":5413},{"class":158,"line":1270},[5414,5418,5422,5426,5430,5434,5439,5443,5447,5451],{"type":29,"tag":156,"props":5415,"children":5416},{"style":188},[5417],{"type":34,"value":4680},{"type":29,"tag":156,"props":5419,"children":5420},{"style":246},[5421],{"type":34,"value":4685},{"type":29,"tag":156,"props":5423,"children":5424},{"style":188},[5425],{"type":34,"value":4690},{"type":29,"tag":156,"props":5427,"children":5428},{"style":240},[5429],{"type":34,"value":4695},{"type":29,"tag":156,"props":5431,"children":5432},{"style":188},[5433],{"type":34,"value":4700},{"type":29,"tag":156,"props":5435,"children":5436},{"style":246},[5437],{"type":34,"value":5438},", transform ",{"type":29,"tag":156,"props":5440,"children":5441},{"style":188},[5442],{"type":34,"value":4690},{"type":29,"tag":156,"props":5444,"children":5445},{"style":240},[5446],{"type":34,"value":4695},{"type":29,"tag":156,"props":5448,"children":5449},{"style":188},[5450],{"type":34,"value":4700},{"type":29,"tag":156,"props":5452,"children":5453},{"style":246},[5454],{"type":34,"value":1510},{"type":29,"tag":156,"props":5456,"children":5457},{"class":158,"line":1287},[5458],{"type":29,"tag":156,"props":5459,"children":5460},{"style":246},[5461],{"type":34,"value":1656},{"type":29,"tag":156,"props":5463,"children":5464},{"class":158,"line":1299},[5465,5470],{"type":29,"tag":156,"props":5466,"children":5467},{"style":163},[5468],{"type":34,"value":5469},".toast.v-enter-from",{"type":29,"tag":156,"props":5471,"children":5472},{"style":246},[5473],{"type":34,"value":3455},{"type":29,"tag":156,"props":5475,"children":5476},{"class":158,"line":1315},[5477,5482],{"type":29,"tag":156,"props":5478,"children":5479},{"style":163},[5480],{"type":34,"value":5481},".toast.v-leave-to",{"type":29,"tag":156,"props":5483,"children":5484},{"style":246},[5485],{"type":34,"value":1486},{"type":29,"tag":156,"props":5487,"children":5488},{"class":158,"line":1331},[5489,5493,5497,5501],{"type":29,"tag":156,"props":5490,"children":5491},{"style":188},[5492],{"type":34,"value":4809},{"type":29,"tag":156,"props":5494,"children":5495},{"style":246},[5496],{"type":34,"value":1500},{"type":29,"tag":156,"props":5498,"children":5499},{"style":188},[5500],{"type":34,"value":1528},{"type":29,"tag":156,"props":5502,"children":5503},{"style":246},[5504],{"type":34,"value":1510},{"type":29,"tag":156,"props":5506,"children":5507},{"class":158,"line":1347},[5508,5512,5516,5521,5525,5530,5534],{"type":29,"tag":156,"props":5509,"children":5510},{"style":188},[5511],{"type":34,"value":4866},{"type":29,"tag":156,"props":5513,"children":5514},{"style":246},[5515],{"type":34,"value":1500},{"type":29,"tag":156,"props":5517,"children":5518},{"style":188},[5519],{"type":34,"value":5520},"translateY",{"type":29,"tag":156,"props":5522,"children":5523},{"style":246},[5524],{"type":34,"value":355},{"type":29,"tag":156,"props":5526,"children":5527},{"style":188},[5528],{"type":34,"value":5529},"12",{"type":29,"tag":156,"props":5531,"children":5532},{"style":240},[5533],{"type":34,"value":1755},{"type":29,"tag":156,"props":5535,"children":5536},{"style":246},[5537],{"type":34,"value":1647},{"type":29,"tag":156,"props":5539,"children":5540},{"class":158,"line":1355},[5541],{"type":29,"tag":156,"props":5542,"children":5543},{"style":246},[5544],{"type":34,"value":1656},{"type":29,"tag":156,"props":5546,"children":5547},{"class":158,"line":1364},[5548,5552,5556],{"type":29,"tag":156,"props":5549,"children":5550},{"style":246},[5551],{"type":34,"value":585},{"type":29,"tag":156,"props":5553,"children":5554},{"style":467},[5555],{"type":34,"value":1463},{"type":29,"tag":156,"props":5557,"children":5558},{"style":246},[5559],{"type":34,"value":480},{"type":29,"tag":30,"props":5561,"children":5562},{},[5563,5565,5570,5572,5577,5579,5584,5586,5592,5594,5599],{"type":34,"value":5564},"The one requirement comes from ",{"type":29,"tag":48,"props":5566,"children":5568},{"className":5567},[],[5569],{"type":34,"value":3890},{"type":34,"value":5571}," itself: the dialog component must render a ",{"type":29,"tag":4925,"props":5573,"children":5574},{},[5575],{"type":34,"value":5576},"single root element",{"type":34,"value":5578},". Transitions won't run if the template has several top-level elements (a fragment), if the root has a ",{"type":29,"tag":48,"props":5580,"children":5582},{"className":5581},[],[5583],{"type":34,"value":2385},{"type":34,"value":5585}," (while it is false, the root is just a comment node), or if the root is a ",{"type":29,"tag":48,"props":5587,"children":5589},{"className":5588},[],[5590],{"type":34,"value":5591},"\u003CTeleport>",{"type":34,"value":5593},". Scoped styles are fine: the root element gets the scope attribute, so ",{"type":29,"tag":48,"props":5595,"children":5597},{"className":5596},[],[5598],{"type":34,"value":5394},{"type":34,"value":5600}," still matches.",{"type":29,"tag":30,"props":5602,"children":5603},{},[5604,5606,5612,5614,5620],{"type":34,"value":5605},"If your animation is not CSS-based (for example, a JavaScript animation library), the ",{"type":29,"tag":48,"props":5607,"children":5609},{"className":5608},[],[5610],{"type":34,"value":5611},"closeDelay",{"type":34,"value":5613}," option keeps the component mounted for the given number of milliseconds after it closes: ",{"type":29,"tag":48,"props":5615,"children":5617},{"className":5616},[],[5618],{"type":34,"value":5619},"createConfirmDialog(TransitionDialog, {}, { closeDelay: 300 })",{"type":34,"value":132},{"type":29,"tag":134,"props":5622,"children":5624},{"id":5623},"closing-programmatically",[5625],{"type":34,"value":5626},"Closing programmatically",{"type":29,"tag":30,"props":5628,"children":5629},{},[5630,5632,5638,5640,5645,5647,5652,5654,5660],{"type":34,"value":5631},"Sometimes a dialog has to close without the user's action, for example an alert that disappears after a few seconds. The instance has a ",{"type":29,"tag":48,"props":5633,"children":5635},{"className":5634},[],[5636],{"type":34,"value":5637},"close()",{"type":34,"value":5639}," method for that; it does not trigger the ",{"type":29,"tag":48,"props":5641,"children":5643},{"className":5642},[],[5644],{"type":34,"value":99},{"type":34,"value":5646}," or ",{"type":29,"tag":48,"props":5648,"children":5650},{"className":5649},[],[5651],{"type":34,"value":107},{"type":34,"value":5653}," hooks. To close every open dialog at once, call ",{"type":29,"tag":48,"props":5655,"children":5657},{"className":5656},[],[5658],{"type":34,"value":5659},"closeAll()",{"type":34,"value":132},{"type":29,"tag":146,"props":5662,"children":5664},{"className":229,"code":5663,"language":10,"meta":19,"style":19},"const alert = createConfirmDialog(Alert)\n\nalert.reveal()\nsetTimeout(() => alert.close(), 3000)\n",[5665],{"type":29,"tag":48,"props":5666,"children":5667},{"__ignoreMap":19},[5668,5693,5700,5717],{"type":29,"tag":156,"props":5669,"children":5670},{"class":158,"line":159},[5671,5675,5680,5684,5688],{"type":29,"tag":156,"props":5672,"children":5673},{"style":240},[5674],{"type":34,"value":537},{"type":29,"tag":156,"props":5676,"children":5677},{"style":188},[5678],{"type":34,"value":5679}," alert",{"type":29,"tag":156,"props":5681,"children":5682},{"style":240},[5683],{"type":34,"value":814},{"type":29,"tag":156,"props":5685,"children":5686},{"style":163},[5687],{"type":34,"value":561},{"type":29,"tag":156,"props":5689,"children":5690},{"style":246},[5691],{"type":34,"value":5692},"(Alert)\n",{"type":29,"tag":156,"props":5694,"children":5695},{"class":158,"line":17},[5696],{"type":29,"tag":156,"props":5697,"children":5698},{"emptyLinePlaceholder":318},[5699],{"type":34,"value":321},{"type":29,"tag":156,"props":5701,"children":5702},{"class":158,"line":198},[5703,5708,5712],{"type":29,"tag":156,"props":5704,"children":5705},{"style":246},[5706],{"type":34,"value":5707},"alert.",{"type":29,"tag":156,"props":5709,"children":5710},{"style":163},[5711],{"type":34,"value":401},{"type":29,"tag":156,"props":5713,"children":5714},{"style":246},[5715],{"type":34,"value":5716},"()\n",{"type":29,"tag":156,"props":5718,"children":5719},{"class":158,"line":314},[5720,5725,5729,5733,5738,5743,5748,5753],{"type":29,"tag":156,"props":5721,"children":5722},{"style":163},[5723],{"type":34,"value":5724},"setTimeout",{"type":29,"tag":156,"props":5726,"children":5727},{"style":246},[5728],{"type":34,"value":2613},{"type":29,"tag":156,"props":5730,"children":5731},{"style":240},[5732],{"type":34,"value":2618},{"type":29,"tag":156,"props":5734,"children":5735},{"style":246},[5736],{"type":34,"value":5737}," alert.",{"type":29,"tag":156,"props":5739,"children":5740},{"style":163},[5741],{"type":34,"value":5742},"close",{"type":29,"tag":156,"props":5744,"children":5745},{"style":246},[5746],{"type":34,"value":5747},"(), ",{"type":29,"tag":156,"props":5749,"children":5750},{"style":188},[5751],{"type":34,"value":5752},"3000",{"type":29,"tag":156,"props":5754,"children":5755},{"style":246},[5756],{"type":34,"value":365},{"type":29,"tag":134,"props":5758,"children":5760},{"id":5759},"nuxt",[5761],{"type":34,"value":5762},"Nuxt",{"type":29,"tag":30,"props":5764,"children":5765},{},[5766],{"type":34,"value":5767},"The plugin works with SSR as a regular Vue plugin, no separate Nuxt module is needed:",{"type":29,"tag":146,"props":5769,"children":5773},{"className":5770,"code":5771,"language":5772,"meta":19,"style":19},"language-typescript shiki shiki-themes github-dark","\u002F\u002F plugins\u002Fconfirm-dialog.ts\nimport * as ConfirmDialog from 'vuejs-confirm-dialog'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(ConfirmDialog)\n})\n","typescript",[5774],{"type":29,"tag":48,"props":5775,"children":5776},{"__ignoreMap":19},[5777,5785,5812,5819,5859,5876],{"type":29,"tag":156,"props":5778,"children":5779},{"class":158,"line":159},[5780],{"type":29,"tag":156,"props":5781,"children":5782},{"style":453},[5783],{"type":34,"value":5784},"\u002F\u002F plugins\u002Fconfirm-dialog.ts\n",{"type":29,"tag":156,"props":5786,"children":5787},{"class":158,"line":17},[5788,5792,5796,5800,5804,5808],{"type":29,"tag":156,"props":5789,"children":5790},{"style":240},[5791],{"type":34,"value":243},{"type":29,"tag":156,"props":5793,"children":5794},{"style":188},[5795],{"type":34,"value":292},{"type":29,"tag":156,"props":5797,"children":5798},{"style":240},[5799],{"type":34,"value":297},{"type":29,"tag":156,"props":5801,"children":5802},{"style":246},[5803],{"type":34,"value":302},{"type":29,"tag":156,"props":5805,"children":5806},{"style":240},[5807],{"type":34,"value":254},{"type":29,"tag":156,"props":5809,"children":5810},{"style":169},[5811],{"type":34,"value":311},{"type":29,"tag":156,"props":5813,"children":5814},{"class":158,"line":198},[5815],{"type":29,"tag":156,"props":5816,"children":5817},{"emptyLinePlaceholder":318},[5818],{"type":34,"value":321},{"type":29,"tag":156,"props":5820,"children":5821},{"class":158,"line":314},[5822,5826,5831,5836,5841,5846,5851,5855],{"type":29,"tag":156,"props":5823,"children":5824},{"style":240},[5825],{"type":34,"value":3263},{"type":29,"tag":156,"props":5827,"children":5828},{"style":240},[5829],{"type":34,"value":5830}," default",{"type":29,"tag":156,"props":5832,"children":5833},{"style":163},[5834],{"type":34,"value":5835}," defineNuxtPlugin",{"type":29,"tag":156,"props":5837,"children":5838},{"style":246},[5839],{"type":34,"value":5840},"((",{"type":29,"tag":156,"props":5842,"children":5843},{"style":2969},[5844],{"type":34,"value":5845},"nuxtApp",{"type":29,"tag":156,"props":5847,"children":5848},{"style":246},[5849],{"type":34,"value":5850},") ",{"type":29,"tag":156,"props":5852,"children":5853},{"style":240},[5854],{"type":34,"value":2618},{"type":29,"tag":156,"props":5856,"children":5857},{"style":246},[5858],{"type":34,"value":1486},{"type":29,"tag":156,"props":5860,"children":5861},{"class":158,"line":324},[5862,5867,5871],{"type":29,"tag":156,"props":5863,"children":5864},{"style":246},[5865],{"type":34,"value":5866},"  nuxtApp.vueApp.",{"type":29,"tag":156,"props":5868,"children":5869},{"style":163},[5870],{"type":34,"value":340},{"type":29,"tag":156,"props":5872,"children":5873},{"style":246},[5874],{"type":34,"value":5875},"(ConfirmDialog)\n",{"type":29,"tag":156,"props":5877,"children":5878},{"class":158,"line":531},[5879],{"type":29,"tag":156,"props":5880,"children":5881},{"style":246},[5882],{"type":34,"value":2594},{"type":29,"tag":30,"props":5884,"children":5885},{},[5886,5888,5893,5895,5900],{"type":34,"value":5887},"Dialogs only ever mount in the browser: the render root is created lazily on the first ",{"type":29,"tag":48,"props":5889,"children":5891},{"className":5890},[],[5892],{"type":34,"value":421},{"type":34,"value":5894},", and a ",{"type":29,"tag":48,"props":5896,"children":5898},{"className":5897},[],[5899],{"type":34,"value":421},{"type":34,"value":5901}," that happens during server rendering does nothing at all, so no dialog state can leak between requests on a long-lived server.",{"type":29,"tag":134,"props":5903,"children":5905},{"id":5904},"conclusion",[5906],{"type":34,"value":5907},"Conclusion",{"type":29,"tag":30,"props":5909,"children":5910},{},[5911,5916],{"type":29,"tag":48,"props":5912,"children":5914},{"className":5913},[],[5915],{"type":34,"value":393},{"type":34,"value":5917}," makes modal windows easier to work with: you reuse the logic, await the user's answer and build chains of dialogs, while the plugin takes care of rendering, passing props in and getting data back out.",{"type":29,"tag":30,"props":5919,"children":5920},{},[5921,5923,5928,5929,5934],{"type":34,"value":5922},"For the best developer experience, use it with TypeScript: the props you pass to ",{"type":29,"tag":48,"props":5924,"children":5926},{"className":5925},[],[5927],{"type":34,"value":393},{"type":34,"value":101},{"type":29,"tag":48,"props":5930,"children":5932},{"className":5931},[],[5933],{"type":34,"value":401},{"type":34,"value":5935}," are checked against your dialog component.",{"type":29,"tag":30,"props":5937,"children":5938},{},[5939,5941,5947],{"type":34,"value":5940},"Feedback, issues and pull requests are welcome on ",{"type":29,"tag":37,"props":5942,"children":5944},{"href":87,"rel":5943},[41],[5945],{"type":34,"value":5946},"GitHub",{"type":34,"value":132},{"type":29,"tag":134,"props":5949,"children":5951},{"id":5950},"legacy-vue-2-and-0x",[5952],{"type":34,"value":5953},"Legacy: Vue 2 and 0.x",{"type":29,"tag":30,"props":5955,"children":5956},{},[5957,5959,5965,5967,5973,5975,5988],{"type":34,"value":5958},"Everything above is written for the current 1.x line, which supports Vue 3.5+ only. If your project is still on Vue 2, use the 0.x line: ",{"type":29,"tag":48,"props":5960,"children":5962},{"className":5961},[],[5963],{"type":34,"value":5964},"0.6.0",{"type":34,"value":5966}," is the last release with Vue 2 support (through ",{"type":29,"tag":48,"props":5968,"children":5970},{"className":5969},[],[5971],{"type":34,"value":5972},"vue-demi",{"type":34,"value":5974},"), and it lives in the ",{"type":29,"tag":37,"props":5976,"children":5979},{"href":5977,"rel":5978},"https:\u002F\u002Fgithub.com\u002Fharmyderoman\u002Fvuejs-confirm-dialog\u002Ftree\u002Flegacy",[41],[5980,5986],{"type":29,"tag":48,"props":5981,"children":5983},{"className":5982},[],[5984],{"type":34,"value":5985},"legacy",{"type":34,"value":5987}," branch",{"type":34,"value":5989},". Pin the version so you don't pick up 1.x by accident, and install the Composition API plugin:",{"type":29,"tag":146,"props":5991,"children":5993},{"className":148,"code":5992,"language":150,"meta":19,"style":19},"npm i vuejs-confirm-dialog@^0.6.0 @vue\u002Fcomposition-api\n",[5994],{"type":29,"tag":48,"props":5995,"children":5996},{"__ignoreMap":19},[5997],{"type":29,"tag":156,"props":5998,"children":5999},{"class":158,"line":159},[6000,6004,6008,6013],{"type":29,"tag":156,"props":6001,"children":6002},{"style":163},[6003],{"type":34,"value":166},{"type":29,"tag":156,"props":6005,"children":6006},{"style":169},[6007],{"type":34,"value":208},{"type":29,"tag":156,"props":6009,"children":6010},{"style":169},[6011],{"type":34,"value":6012}," vuejs-confirm-dialog@^0.6.0",{"type":29,"tag":156,"props":6014,"children":6015},{"style":169},[6016],{"type":34,"value":6017}," @vue\u002Fcomposition-api\n",{"type":29,"tag":30,"props":6019,"children":6020},{},[6021,6023,6029,6031,6037],{"type":34,"value":6022},"The main difference in usage: in 0.x dialogs render through the ",{"type":29,"tag":48,"props":6024,"children":6026},{"className":6025},[],[6027],{"type":34,"value":6028},"\u003CDialogsWrapper\u002F>",{"type":34,"value":6030}," component, so it has to be placed in ",{"type":29,"tag":48,"props":6032,"children":6034},{"className":6033},[],[6035],{"type":34,"value":6036},"App.vue",{"type":34,"value":226},{"type":29,"tag":146,"props":6039,"children":6041},{"className":442,"code":6040,"language":11,"meta":19,"style":19},"\u003C!-- App.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"app\">\n    \u003C!-- your app -->\n  \u003C\u002Fdiv>\n  \u003CDialogsWrapper \u002F>\n\u003C\u002Ftemplate>\n",[6042],{"type":29,"tag":48,"props":6043,"children":6044},{"__ignoreMap":19},[6045,6052,6067,6095,6103,6118,6135],{"type":29,"tag":156,"props":6046,"children":6047},{"class":158,"line":159},[6048],{"type":29,"tag":156,"props":6049,"children":6050},{"style":453},[6051],{"type":34,"value":456},{"type":29,"tag":156,"props":6053,"children":6054},{"class":158,"line":17},[6055,6059,6063],{"type":29,"tag":156,"props":6056,"children":6057},{"style":246},[6058],{"type":34,"value":464},{"type":29,"tag":156,"props":6060,"children":6061},{"style":467},[6062],{"type":34,"value":614},{"type":29,"tag":156,"props":6064,"children":6065},{"style":246},[6066],{"type":34,"value":480},{"type":29,"tag":156,"props":6068,"children":6069},{"class":158,"line":198},[6070,6074,6078,6082,6086,6091],{"type":29,"tag":156,"props":6071,"children":6072},{"style":246},[6073],{"type":34,"value":626},{"type":29,"tag":156,"props":6075,"children":6076},{"style":467},[6077],{"type":34,"value":893},{"type":29,"tag":156,"props":6079,"children":6080},{"style":163},[6081],{"type":34,"value":898},{"type":29,"tag":156,"props":6083,"children":6084},{"style":246},[6085],{"type":34,"value":556},{"type":29,"tag":156,"props":6087,"children":6088},{"style":169},[6089],{"type":34,"value":6090},"\"app\"",{"type":29,"tag":156,"props":6092,"children":6093},{"style":246},[6094],{"type":34,"value":480},{"type":29,"tag":156,"props":6096,"children":6097},{"class":158,"line":314},[6098],{"type":29,"tag":156,"props":6099,"children":6100},{"style":453},[6101],{"type":34,"value":6102},"    \u003C!-- your app -->\n",{"type":29,"tag":156,"props":6104,"children":6105},{"class":158,"line":324},[6106,6110,6114],{"type":29,"tag":156,"props":6107,"children":6108},{"style":246},[6109],{"type":34,"value":694},{"type":29,"tag":156,"props":6111,"children":6112},{"style":467},[6113],{"type":34,"value":893},{"type":29,"tag":156,"props":6115,"children":6116},{"style":246},[6117],{"type":34,"value":480},{"type":29,"tag":156,"props":6119,"children":6120},{"class":158,"line":531},[6121,6125,6130],{"type":29,"tag":156,"props":6122,"children":6123},{"style":246},[6124],{"type":34,"value":626},{"type":29,"tag":156,"props":6126,"children":6127},{"style":467},[6128],{"type":34,"value":6129},"DialogsWrapper",{"type":29,"tag":156,"props":6131,"children":6132},{"style":246},[6133],{"type":34,"value":6134}," \u002F>\n",{"type":29,"tag":156,"props":6136,"children":6137},{"class":158,"line":579},[6138,6142,6146],{"type":29,"tag":156,"props":6139,"children":6140},{"style":246},[6141],{"type":34,"value":585},{"type":29,"tag":156,"props":6143,"children":6144},{"style":467},[6145],{"type":34,"value":614},{"type":29,"tag":156,"props":6147,"children":6148},{"style":246},[6149],{"type":34,"value":480},{"type":29,"tag":30,"props":6151,"children":6152},{},[6153,6158,6160,6165,6167,6173,6174,6180,6182,6187],{"type":29,"tag":48,"props":6154,"children":6156},{"className":6155},[],[6157],{"type":34,"value":5964},{"type":34,"value":6159}," also received the fixes collected over the years: a TypeScript error when the dialog component has default prop values, a dialog that sometimes did not close when ",{"type":29,"tag":48,"props":6161,"children":6163},{"className":6162},[],[6164],{"type":34,"value":421},{"type":34,"value":6166}," was immediately followed by ",{"type":29,"tag":48,"props":6168,"children":6170},{"className":6169},[],[6171],{"type":34,"value":6172},"confirm()",{"type":34,"value":5646},{"type":29,"tag":48,"props":6175,"children":6177},{"className":6176},[],[6178],{"type":34,"value":6179},"cancel()",{"type":34,"value":6181},", and the ",{"type":29,"tag":48,"props":6183,"children":6185},{"className":6184},[],[6186],{"type":34,"value":5611},{"type":34,"value":6188}," option for exit animations.",{"type":29,"tag":30,"props":6190,"children":6191},{},[6192,6194,6199,6201,6207],{"type":34,"value":6193},"Upgrading from 0.x to 1.x takes three steps: move to Vue 3.5 or newer, remove ",{"type":29,"tag":48,"props":6195,"children":6197},{"className":6196},[],[6198],{"type":34,"value":6028},{"type":34,"value":6200}," from the template, and keep ",{"type":29,"tag":48,"props":6202,"children":6204},{"className":6203},[],[6205],{"type":34,"value":6206},"app.use(ConfirmDialog)",{"type":34,"value":6208}," as before.",{"type":29,"tag":1463,"props":6210,"children":6211},{},[6212],{"type":34,"value":6213},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"]