docs: playground

[m0ksem]

closes https://github.com/epicmaxco/vuestic-ui/issues/4018 closes https://github.com/epicmaxco/vuestic-ui/issues/3702 closes https://github.com/epicmaxco/vuestic-ui/issues/3162

Removed broken Codesandbox and added playground on ui.vuestic.dev.

New button: (not sure about icon tho)

Playground for component example looks like a modal:

http://localhost:3000/ui-elements/button

After user changed something in playground, it can be shared via url. Url looks like:

http://localhost:3000/play

---

I use vue-repl here to make a sandbox. We need a complete ES build in one file for vue-repl, so I build one in nuxt module before docs build start. Vue-repl makes it easy to share state between pages using serialization. So we don't need to store user's changes on backend - it is stored in url. When user open playground from code example in modal url changes to ui.vuestic.dev/play#state so it can be easily shared. When modal is closed, url changes back to docs page.

I believe this will help users to make reproduction easier.

Sandbox supports tailwind, but will not allow installing additional dependencies, what I think OK.

---

This PR also closes https://github.com/epicmaxco/vuestic-ui/issues/4019, I found out this problem when tried to use our es module from CDN.

---

Downside of this PR is that for now, it is impossible to test not latest vuestic version. In such case, I think user still able to make codesandbox reproduction.

[Roman4437]

There's an overflow issue

[Roman4437]

Refreshing the page is causing the modal to break

[Roman4437]

during focus or selection, a default outline appears

[Roman4437]

The background is static and doesn't change with the theme. Also, white background doesn't look good with elements that have dropdowns

[Roman4437]

Some components are not working properly, such as the date-picker or table

[Roman4437]

tailwind classes works unless they are custom or not defined through the docs

[m0ksem]

tailwind classes works unless they are custom or not defined through the docs

I updated PR, might be fixed. Can you share an example where the issue happens? Thanks.

[Roman4437]

tailwind classes works unless they are custom or not defined through the docs

I updated PR, might be fixed. Can you share an example where the issue happens? Thanks.

It's working properly now

[m0ksem]

Looks like <style lang="*" isn't supported yet by vue-repl.

We also need to add config, similar to codesandbox's config, so it can load additional libs, like AGGrid.

[asvae]

For Asva to finish:

Master → 1.8.4

Develop → compiled (npm)

Experimental → compiled (npm)

Master → [1.8.3, 1.8.4]

Develop → [1.8.3, 1.8.4, 1234567a, 123567b]

play - source code

play - vuestic-version

---

• Some examples still use old codesandbox - we need to cover that.

[m0ksem]

For Asva to finish:

Master → 1.8.4

Develop → compiled (npm)

Experimental → compiled (npm)

Master → [1.8.3, 1.8.4]

Develop → [1.8.3, 1.8.4, 1234567a, 123567b]

play - source code

play - vuestic-version

• Some examples still use old codesandbox - we need to cover that.

I have a PR for build tool. Let's deal with it later, when my PR is merged. It will be easy to add a esm-browser build, which we could use from npm.

[asvae]

I moved everything we discussed to this issue. So we can merge this PR.