@overlastic/vue

@overlastic/vue is used to define pop-up components in Vue3 and supports callbacks and usage in templates.

Installation

Use vue-demi to support composition-api usage in Vue2 & 3!

If you are using Vue version below 2.7, please install @vue/composition-api

If you are unable to use composition-api for some reason, use @overlastic/vue2

npm

npm install @overlastic/vue

yarn

yarn add @overlastic/vue

pnpm

pnpm add @overlastic/vue

Usage

Step 1: Define Component

Use useDisclosure to define a pop-up component, which returns the following:

• confirm|cancel returns the result of a Promise, which will destroy the component when duration ends
• visible is used to display the component, executing the Promise result immediately

<!-- overlay.vue -->
<script setup>
import { useDisclosure } from '@overlastic/vue'
import { defineEmits, defineProps } from 'vue'
const props = defineProps({
  title: String,
})

// Get Overlay information from useDisclosure
const { visible, confirm, cancel } = useDisclosure({
  // Duration of pop-up animation, prevents premature destruction of the component
  duration: 1000,
})
</script>

<template>
  <div v-if="visible" @click="confirm(`${title}:confirmed`)">
    {{ title }}
  </div>
</template>

Step 2: Create Pop-up

Use the defineOverlay method to convert the component into a modal dialog, allowing you to call it in your Javascript/Typescript.

import { defineOverlay } from '@overlastic/vue'
import Overlay from './overlay.vue'

// Convert to a callback method
const callback = defineOverlay(Overlay)
// Call the component and get the value of the confirm callback
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"

You can also directly render the component using renderOverlay and skip the defineOverlay method.

import { renderOverlay } from '@overlastic/vue'
import Overlay from './overlay.vue'

const value = await renderOverlay(Overlay, {
  title: 'useDisclosure'
})
// value === "useDisclosure:confirmed"

Template

Components created using @overlastic/vue, besides supporting callback method invocation, still support usage in <template>, which is optional and very useful when migrating old components.

---

When using in <template>, you need to explicitly define modal and event

<!-- overlay.vue -->
<script setup>
import { useDisclosure } from '@overlastic/vue'
import { defineEmits, defineProps } from 'vue-demi'
const props = defineProps({
  title: String,
  // When using in Template, define the field used by v-modal (defaults to visible)
  visible: Boolean
})

// Define the event types used in the component (defaults: cancel, confirm)
defineEmits(['cancel', 'confirm'])

const { visible, confirm, cancel } = useDisclosure()
</script>

After defining the parameters, you can use the pop-up component in the template.

<script setup>
import Overlay from './overlay.vue'
const visible = ref(false)

function confirm(value) {
  // ...
}
function cancel(value) {
  // ...
}
</script>

<template>
  <Overlay v-model:visible="visible" title="Hairyf" @confirm="confirm" @cancel="cancel" />
</template>

If you want to replace with other fields and event names, you can change the events and model configurations.

const props = defineProps({
  title: String,
  modalValue: Boolean
})

defineEmits(['nook', 'ok'])

const { visible, confirm, cancel } = useDisclosure({
  events: { confirm: 'ok', cancel: 'nook' },
  model: 'modalValue',
})