Example from demo does not work

[itelmenko]

Hello!

I have tried this example:

<sweet-modal icon="error" hide-close-button blocking overlay-theme="dark" modal-theme="dark">
    This is an error ...

    <sweet-button slot="button" color="red" v-on:click="closeExample('darkWithBlockingError')">Press this Button</sweet-button>
</sweet-modal>

and I get error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Also if I use example:

<sweet-modal>This is an alert.</sweet-modal>

I have not errors. But I see empty white layer without dialog window after this.$refs.modal.open(); Div with class .sweet-modal has style display:none;

I have tried on Vue 2.1.10 and Vue 2.3.3

[bluefirex]

For as stated in the README you have to supply your own implementation. SweetModal does not come with buttons.

As for the other issue I'll look into it.

[mirzap]

I have the same issue. It's not related to this sweet-button. As @itelmenko stated even most simple example <sweet-modal>This is an alert.</sweet-modal> does not work. It just shows an empty white or black layer (depending on theme).

And if I change style for .sweet-modal class to display:block modal appears.

[mirzap]

I found issue in my case. I'm using Laravel Spark in current project, and by default sweet-alert css is loaded which contains some collision classes. Removed that and works like a charm. @itelmenko you probably have some collision class to.

[jonnywilliamson]

@mirzap Ah yes, just discovered this as well.

Having sweet-alert installed causes lots of css problems. What a shame.

[mikerogne]

@mirzap Any guidance on a fix, or what specific classes are conflicting?

[mikerogne]

Ok, so... within Laravel Spark application, public/css/sweetalert.css does have something like:

.sweet-alert { ... display: none; ... }

That's... weird? Changing to block does fix it for me.

[bluefirex]

I pushed a possible fix for this issue in the master branch (f8b3ac35c1cb26c994ccecc6523638a864f28547). Can you try if that solves it?

[mikerogne]

Not sure how I test it?

[bluefirex]

Remove the current version from npm, clone this repo, run npm i on it and manually place it in the node_modules folder

[mikerogne]

Got it, using: "sweet-modal-vue": "adeptoas/sweet-modal-vue#master", in package.json

Shows: └── sweet-modal-vue@1.2.0 (git://github.com/adeptoas/sweet-modal-vue.git#f8b3ac35c1cb26c994ccecc6523638a864f28547)

[mikerogne]

And actually, that both fixes the display issue itself, AND the non-centered issue I was having :)

You, sir, are a rockstar!

[bluefirex]

Awesome! I'll release this fix in an update in a few days together with a few other fixes.

[mikerogne]

Fantastic, thanks a bunch!!! 👍 👍

[itelmenko]

It does not work for me still. Because:

[Vue warn]: Unknown custom element: <sweet-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

What is sweet-button?

[itelmenko]

However if I don't use sweet-button It also does not work for me.

[bluefirex]

sweet-button is only available in the demo.

What does not work for your?

[itelmenko]

What does not work for your?

All details in start post are actual after removing sweet-button also

[bluefirex]

Fixed in c05fb535b10cb39d2bfa17c218d198471a1e37da + f8b3ac35c1cb26c994ccecc6523638a864f28547, released in v2.0.0