RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/kolirt/vue-modal below:

kolirt/vue-modal: ⚡️ Easy to use and highly customizable Vue3 modal package

Simple Vue3 modal package

Easy to use and highly customizable Vue3 modal package.

Table of Contents

Advantages of using this solution

Less code and simpler modal management
No more importing dozens of modals on every page or manually inserting them into template sections.
Easy control with JS/TS
Open and close modals dynamically using clean JavaScript or TypeScript without unnecessary boilerplate.
Cascading modal support
Seamlessly open multiple modals one after another while preserving their state and context - hassle-free.

Use a simple API to dynamically open and close modals.
Forget about adding tons of static modals in your HTML templates.
Add flexibility to your UI, enabling cascading modal calls with ease.

Note: Suitable for both simple use cases and complex applications requiring deep modal interactions.

Use yarn or npm to install the package @kolirt/vue-modal.

npm install --save @kolirt/vue-modal

yarn add @kolirt/vue-modal

Add dependencies to your main.js:

import { createApp } from 'vue'
import { createModal } from '@kolirt/vue-modal'

const app = createApp({ ... })

app.use(createModal({
  transitionTime: 200,
  animationType: 'slideDown',
  modalStyle: {
    padding: '5rem 2rem',
    align: 'center',
    'z-index': 201
  },
  overlayStyle: {
    'background-color': 'rgba(0, 0, 0, .5)',
    'backdrop-filter': 'blur(5px)',
    'z-index': 200
  }
}))

app.mount('#app')

Add ModalTarget to App.vue

<script setup lang="ts">
  import { ModalTarget } from '@kolirt/vue-modal'
</script>

<template>
  <ModalTarget />
</template>

First, you need to create modal. Instead of SimpleModal, you can implement your own wrapper with your own styles.

<script setup lang="ts">
import { closeModal, confirmModal, SimpleModal } from '@kolirt/vue-modal'

const props = defineProps({
  test: {}
})
</script>

<template>
  <SimpleModal title="Test modal" size="sm">
    <pre>props: {{ props }}</pre>

    <template #footer>
      <button @click="confirmModal({ value: 'some values' })" class="btn btn-primary">Confirm</button>
      <button @click="closeModal()" class="btn btn-primary">Close</button>
    </template>
  </SimpleModal>
</template>

Then you can use your modal.

<script setup lang="ts">
import { openModal } from '@kolirt/vue-modal'
import { defineAsyncComponent } from 'vue'

import TestModal from '@/components/modals/TestModal.vue'

function runModal() {
  openModal(TestModal, {
    test: 'some props'
  })
    // runs when modal is closed via confirmModal
    .then((data) => {
      console.log('success', data)
    })
    // runs when modal is closed via closeModal or esc
    .catch(() => {
      console.log('catch')
    })
}

function runDynamicModal() {
  openModal(
    defineAsyncComponent(() => import('@/components/modals/TestModal.vue')),
    {
      test: 'some props'
    }
  )
    // runs when modal is closed via confirmModal
    .then((data) => {
      console.log('success', data)
    })
    // runs when modal is closed via closeModal or esc
    .catch(() => {
      console.log('catch')
    })
}
</script>

<template>
  <button @click="runModal">Open modal</button>
</template>

Open modal with clearing modal history.

openModal(
  TestModal,
  {
    test: 'some props'
  },
  { force: true }
)
  // runs when modal is closed via confirmModal
  .then((data) => {
    console.log('success', data)
  })
  // runs when modal is closed via closeModal or esc
  .catch(() => {
    console.log('catch')
  })

Component ModalTarget props Prop name Type Default value Description group string 'default' Name of the modals holder withoutOverlay boolean false Disable overlay Arg number Type Description 1 Component vue component 2 object props for component 2 OpenModalOptions options

Demo here

Example here

Check closed issues with FAQ label to get answers for most asked questions.

MIT

Check out my other projects on my GitHub profile.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4