KUI Vue Modal/Dialog Plugin

#KUI, #Vue, #Vue Modal, #Vue Dialog
#Vue Plugin
#Powerful, #Simple, #Easy

We make it simple, lightweight and easy to use.
It will be still update by our team.

Install

npm install @myutex/vue-modal

Setup

import KuiModal from '@myutex/vue-modal';

Vue.use(KuiModal);

Usage

You can choose 2 ways for using methods.

1) Promise

export default {
  created() {
    this.$alert('Pass to alert message!').then(result => {
        window.console.log(result);  
        // return true
    });

    this.$confirm('Pass to confirm message!').then(result => {
        window.console.log(result);
        // return true Or false  
    });  
  }
}

2) Async/Await

export default {
  async created() {
    const alert = await this.$alert('App 에서 Alert 메시지 전달');
    if (alert) {
        // be true
    }

    const confirm = await this.$confirm('App 에서 Confirm 메시지 전달');
    if (confirm) {
        // It works when getting true
    } else {
        // It will be false
    }  
  },
};

##Options with Example

Object type pass for options.

Default language is english.

Alert Modal

• width: '100px'
• buttonColor: 'red'
• buttonMessage: 'type your message'
• lang: 'ko'

lang: 'ko' options for Korean.

Confirm Modal

• width: '150px'
• buttonYesColor: 'red'
• buttonNoColor: 'purple'
• uiStyle: 2
• buttonMessage (Object):
  • yes: 'Yes, I agree'
  • no: 'No, I disagree'
• lang: 'ko'

lang: 'ko' options for Korean.

You can choose 2 ui styles. Default value is 1,
It will work with integrated second ui style when you using value 2

  async created() {
    const alert = await this.$alert('App 에서 Alert 메시지 전달', {
        width: '50px',
        buttonColor: 'red',
        buttonMessage: 'Yes, I agree'
    });
    if (alert) {
        // be true
    }

    const confirm = await this.$confirm('App 에서 Confirm 메시지 전달', {
        width: '100px',
        buttonYesColor: 'red',
        buttonNoColor: 'purple',
        uiStyle: 2,
        buttonMessage: {
            yes: 'Yes, I agree.',
            no: 'No, I disagree.'
        }
     });
    if (confirm) {
        // It works when getting true
    } else {
        // It will be false
    }  
  }

Tip

Follow this if you want to apply font family.

* {
  font-family: Type your fonts;
}

OR

.modal.alert, .modal.confirm {
  font-family: Type your fonts;
}

Finally

Thanks to use our first Vue.js plugin!

Anyone can make issue whenever if you have improvement point or other needs.