npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuedl

v0.3.10

Published

Vue dialog helper

Downloads

1,911

Readme

Vuedl - vue dialog helper

This module will help you to work with modal dialogs in your project

Inspire of Nuxt.js logic, vuedl also has asyncData, fetch, layout and middleware handlers

NOTE: Module is in initial development. Anything may change at any time.

NPM Version

Used in frameworks

  1. vuetify

  2. bootstrap-vue (not supported, need contributor)

Setup

Install the package from npm

npm install vuedl
import vuedl from 'vuedl'
Vue.use(vuedl, {
  context,
  property
})

Where -- context: is object with context of your application, such as i18n, store, router, etc -- property: is name of Vue property, for access, default is $dialog

After instalation, instance of dialog manager will be available in Vue.prototype.$dialog, or inside Vue instances this.$dialog

Usage

Use dialogs

import MyDialog from './MyDialog'

const dialog = await this.$dialog.show(MyDialog, params, options)

dialog will be instance of DialogManager

Register and use dialog components

Register global dialog component, then it will be available in any vue module

Vue.prototype.$dialog.component('myDialog', MyDialog)

Then you can use it in any code

this.$dialog.myDialog(params, options)

Waiting for user fiil data and click button (when dialog is closing)

const result = await this.$dialog.showAndWait(MyDialog, params)

or

const dialog = await this.$dialog.show(MyDialog, params)
const result = dialog.wait()

result will be object of user inputs, or clicked button, depending on what will be sent in dialog component by the:

this.$emit('submit', inputs)

The layout param

vuedl can use layout templates for wrapping dialogs For registering your own layouts template use

Vue.prototype.$dialog.layout('default', MyLayout)

Example of the layout template

  <v-dialog v-model="isActive" :max-width="width">
    <dialog-child v-bind="$options.propsData" ref="dialog" />
  </v-dialog>

vuedl module will put in layout component mixin with params:

-- width: Number - max width of component -- isActive: Boolean - is dialog active -- show: Function -- close: Function

If dialog showed without layout, this mixin will integrate to dialog instance

After this dialog component must have parameter

{
  layout: 'default'
  ...
}

The asyncData and fetch Method

Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData is called every time before loading the dialog component. This method receives [the context] as the first argument, you can use it to fetch some data and v-dialog will merge it with the component data.

You do NOT have access of the component instance through this inside asyncData because it is called before initiating the component

v-dialog offers you different ways to use asyncData. Choose the one you're the most familiar with:

fetch is use for calling store methods, and not impact to instance data

  1. Returning a Promise. Vuedl will wait for the promise to be resolved before rendering the component.
  2. Using the async/await proposal (learn more about it)
  3. Define a callback as second argument. It has to be called like this: callback(err, data)

Returning a Promise

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

Using async/await

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

Using a callback

export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
  }
}

Displaying the data

The result from asyncData will be merged with data. You can display the data inside your template like you're used to doing:

<template>
  <h1>{{ title }}</h1>
</template>

The overlay

When dialog component has an asyncData or fetch functions, it will show overlay before calling this methods. Overlay will block main window and show loading cursor.

If you want to register your own overlays template

Vue.prototype.$dialog.overlay('default', MyOverlay)

Confirm, alert and prompt dialogs

vuedl has implementations of confirm, alert warning, error or prompt dialog

this.$dialog.confirm({
  text: 'Do you really want to exit?'
}).then(res => {
})
const res = await this.$dialog.warning({
  text: 'Do you really want to exit?'
})
...
const res = await this.$dialog.error({
  text: 'Some error'
})
let res = await this.$dialog.confirm({
  text: 'Do you really want to exit?', 
  title: 'Warning'
})
if (res) {
  ...
}

res will be true or false

For registering your own Confirm template

Vue.prototype.$dialog.component('Confirm', MyConfirmDialog)

For registering your own Prompt template

Vue.prototype.$dialog.component('Prompt', MyPromptDialog)