this is default behavior on some popular alert library https://limonte.github.io/sweetalert2/ https://getbootstrap.com/docs/3.3/javascript/#modals http://materializecss.com/modals.html#!
consider to introduce this behavior on vue2-simplert

Must update webpack to version 2.x

Button should have custom class I think

SweetAlert support custom icon, if code is easy I think will be good for us to add this feature.

Hi,

Tried to install your wonderful package but error occurs as follow:

{ [Error: ./~/vue2-simplert/src/components/simplert/index.vue
Module not found: Error: Can't resolve 'scss-loader' in '/var/www/html/project/node_modules/vue2-simplert/src/components/simplert'
resolve 'scss-loader' in '/var/www/html/project/node_modules/vue2-simplert/src/components/simplert'
  Parsed request is a module
  using description file: /var/www/html/project/node_modules/vue2-simplert/package.json (relative path: ./src/components/simplert)
  after using description file: /var/www/html/project/node_modules/vue2-simplert/package.json (relative path: ./src/components/simplert)
    resolve as module
      module variation scss-loader-loader

I am using Laravel 5.3 and here is my package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "laravel-echo": "^1.2.5",
    "node-sass": "^4.5.3",
    "pusher-js": "^4.0.0",
    "sass-loader": "^6.0.6",
    "scss-loader": "0.0.1",
    "vue2-dropzone": "^2.3.5",
    "vue2-simplert": "^0.3.0"
  }
}

My node's version is v8.0.0 and npm is 5.0.0

I did run npm install node-sass scss-loader --save and it does not work

please do assist

Regards

I get

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
at Object. (vue2-simplert.js:6)
at Object. (vue2-simplert.js:6)
at e (vue2-simplert.js:6)
at n.exports.n (vue2-simplert.js:6)
at vue2-simplert.js:6
at webpackJsonp.491.t (vue2-simplert.js:6)
at Object.491 (vue2-simplert.js:6)
at webpack_require (bootstrap 3a212dd…:54)
at Object.165 (customers.js:1)
at webpack_require (bootstrap 3a212dd…:54)

Hi all,

Currently, I'm doing a Single Page Application (SPA) project, and am using Simplert. The navigation bar, sidebar and the contents are all different components.

I'm currently invoking the Simplert from the content component. So, is there a way to cover the entire browser page (including the sidebar and navigation bar) with the Simplert modal?

Hi everyone ✋
I would like to know who are using Vue2-Simplert and how you use it.

Please share your experiences and usage below!

Thank you ❤️

Now demo that show custom color button not working well, need to fix it

This development will be split as new repository here : https://github.com/mazipan/vue2-simplert-plugin

• Idea : https://github.com/hilongjw/vue-progressbar
• Goal : can install vue2-simplert as global plugins without set in each components

Open for all contributor 👍

As a feature, it would be nice if we could disable the click on modal event so the user is forced to click on a button to continue. This makes more sense now that the second button is a feature.

Hey Thanks For such great plugin.
But when I am trying to use this getting below error,
https://www.screencast.com/t/6NE7QkXUu

Can you please help me on this.

[Vue warn]: Failed to mount component: template or render function not defined.

found in

--->

Related with issue in vue-jest issues#45

Now, demo page have no meta tag for support SEO.
Please provide ya.

Hi,

So basically what I want to do is show an alert saying "Do you want to delete this record?" --> Confirm or Cancel. If the user clicks "Confirm", another alert will appear and says "Successfully deleted!"
I'm having an issue where i'm unable to show the 2nd alert component which says "Successfully deleted."

HTML code:

      <!-- Simplert Notification -->
      <simplert 
        :useRadius="true"
        :useIcon="true"
        ref="simplert">
      </simplert>

This is my Vue code:

  methods: {
    deleteBtn () {
      let confirmFn = function () {
        let obj2 = {
          title: 'Success',
          message: 'Staff record successfully deleted!',
          type: 'success'
        }
        this.$refs.simplert.openSimplert(obj2)
      }
      let obj = {
        title: 'Warning',
        message: 'Are you sure you want to delete staff record?',
        type: 'warning',
        useConfirmBtn: true,
        onConfirm: confirmFn
      }
      this.$refs.simplert.openSimplert(obj)
    }
  }

The error is shown for obj2:
Uncaught TypeError: Cannot read property 'openSimplert' of undefined

How should I go about doing this?

Thank you!

Hello!

Can I define a custom label on a close button?

Hi,

is it possible to control the alert position?

Now, there is no demo for this use case

When I am following your example and do in app.vue import Simplert from './simplert.vue' I get:

This dependency was not found in node_modules:

• ./simplert.vue

Did you forget to run npm install --save for it?

However, if I try import Simplert from 'vue2-simplert/dist/vue2-simplert.js' it will work but it seems I cannot get the modal to appear.

Project created with vue-cli wepback template
Thanks.

Hi,

I try to add some elements under buttons, just like

<button class="btn btn-danger">
    <i class="fa fa-trash"></i> Delete!
</button>

Unfortunately, customConfirmBtnText would do this, <i class="fa fa-trash"> Delete!</i>, as TEXT instead of HTML.

But it a little bit fall away from spirit of MVVM ,if it could be done by customConfirmBtnText.

I'm wondering whether the slot of Vue is in this project?
So, I can custom child elements under Button, even components!

<simplert id="simplert" :useRadius="true" :useIcon="true" ref="simplert">
    <template slot="confirmBtn" slot-scope="data">
        <icon :name="data.iconName"></icon>
        {{data.customConfirmBtnText}}
    </template>
</simplert>

Thanks.

Hi, I set up empty vuejs webpack project and add vue2-simplert component. But when I build project, I get error:
ERROR in static/js/vendor.9cdb516fd1e83e5588b9.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue2-simplert/src/main-dist.js:4,0][static/js/vendor.9cdb516fd1e83e5588b9.js:27114,16]

How to reproduce:

vue init webpack my-project
cd my-project
npm install
npm install vue2-simplert --save

use simplert in App.vue

npm run dev   -> app works

npm run build  -> build fails

Hi, I found this is great and I really want use this.

But I'm not good at front-end stuff, so I don't use NPM.

I tried it like this, https://jsbin.com/vomifupiku/edit?html,js,console,output

But it doesn't work.

How can I use the vue2-simplert with simiple <script>?

Prefer use useRadius or isRadius is better.
Make sure not breaking changes.
Make old props deprecated.

Hello!
I trying integrate server side rendering in my project.
When I add vue2-simplert

import Simplert from 'vue2-simplert'

I get error

ReferenceError: document is not defined

Does have way for use vue2-simplert with server side rendering?

Thank you

假如我有好多个页面，岂不是有好多个modal~,

We need to create 2nd button instead of using single button.

HI,
tried to install your wonderful package but error occurs as follow

ERROR in ./node_modules/vue2-simplert/src/Simplert.vue
    Module parse failed: [...]\node_modules\vue2-simplert\src\Simplert.vue Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | <template>
    |   <div class="simplert" role="modal" :class="classSimplert" @click="closeOverlay">
    |     <div class="simplert__content" :class="classContent">
     @ ./node_modules/vue2-simplert/src/main-dist.js 1:0-37
     @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./_src/views/fields/Index.vue
     @ ./_src/views/fields/Index.vue
     @ ./_src/router/routes.js
     @ ./_src/router/index.js
     @ ./_src/boot-app.js

package.json
"vue2-simplert": "^0.5.5"

Tnx.

Now click overlay not close popup, maybe class checking that make it buggy.
Try using indexof instead of ===

Hi,

great lib, but contains some global CSS styles, which changes my site design if I use it.

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  font-size: 62.5%; }

*, *:before, *:after {
  box-sizing: inherit; }

I think it is not need to use this lib.
Btw, it would be good to extract styles to a CSS file.

Now, you should not change button color directly, you should use customCloseBtnClass for manipulate color.

I try the demo site but, when clicked, its show all icons at once, with no text and can't click the button. Something its wrong?

When using a second Simplert, It triggers the function on close from the first one, not the second one. The second alert is never actually even seen. Perhaps I'm using it incorrectly?

I try to use "customConfirmBtnClass" to set up confirm button class, e.g. 'btn-warning'
then the confirm btn class is like "simplert__confirm simplert__confirm--radius btn-warning"

Finally the background-color style is re-write by "simplert__confirm"

There is condition when we need alert without any button showing, so we need add this configuration

Please add padding so, content have more space

If you want to add your company/project logo that using Vue2-Simplert in our demo page, you can attach the logo in this issue.

Thanks

In top of component we should have to adding custom class to override CSS in the bottom

I need contribution guide in this repo.
You can see the sample contribution guide from this pull request
https://github.com/mazipan/vue-currency-filter/pull/5/files

Thanks for your help 🎉🎉🎉

In the documentation it is written that there is a breaking change for useRadius, but nowhere is says what it does. I tried putting it true or false, can't seem to get what is the difference.

Hi,
Would you like to use scoped styles instead of these global ones.
I don't think it is a good practice that changing box-sizing of the root element in simplert.

Unit test will help us to avoid potential bugs.
Need to implement unit test.