feat: playground

[IcetCode]

I've got most of the features done, but still need some help:

• [ ] For some reason, AFloating always appears in the top left corner instead of the correct position.
• [x] Eslint in the playground cannot detect the @ alias path.
• [ ] I'd also like to improve the look and feel of the UI.

[netlify[bot]]

✅ Deploy Preview for anu-vue ready!

Name	Link
🔨 Latest commit	1f54cb66be060e47de674dc005750489ca9577f7
🔍 Latest deploy log	https://app.netlify.com/sites/anu-vue/deploys/64bf3229a9cde40008251eda
😎 Deploy Preview	https://deploy-preview-185--anu-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jd-solanki]

@IcetCode Why running playground nr play:dev ask for sudo password?

[IcetCode]

That may cause by the server option in vite.config.ts configuration, you can remove it.

server: {
  https: true,
  host: true,
}

[jd-solanki]

Actually that's because of vite-plugin-mkcert plugin. Ref.

Is that plugin required?

[IcetCode]

It's for using HTTPS with vite, but it's not a must-have. We could just remove it.

[jd-solanki]

For some reason, AFloating always appears in the top left corner instead of the correct position.

~I guess that's because of iframe~ No it's not because in nuxt dev tools' iframe it works fine!

[IcetCode]

I found during debugging that it's related to the @floating-ui/vue package. When I use @floating-ui/dom instead of @floating-ui/vue to implement the floating component, it works. This is really strange, and I will try to figure out what caused this issue.

• @floating-ui/vue - not working https://play.vuejs.org/#eNptUUtuwjAQvYrlDVSFuGxTg2gXvUC79CaFCXXln+wxEopy947Jpwixs+f9xs8dfwuhOmfgNZfpEHVAZhp32iqOSXGWAHPYKadt8BFZF6HtWRu9ZQsSLV7/kZzgw/gGtTtNjH07DtZZi5HOlDt4l5CRE0RwB2Dbcl66bMwTEQZ0Uj4Euwn9xIuB1BPpJn05O69mmxXrMDYutT7aGmOGvrhJMbyY3kdrSQQbTINQrkx+Z0TvSjp1MVsqvnu/AlIMhIF81OeROSVSd3Uq693MhnXJ4st7gzpIQToykGKO5is+FLq2Tah+k3f0MV3JUCNA+ppdJ2V2X3EBFf9BDKkWom0SmgvZHMHoc6wcoHDBinvVflO9VBvxDMkqXqx75Xre/wFFFcEM
• @floating-ui/dom - working https://play.vuejs.org/#eNqVVU2P0zAQ/StWAG0q2mS1ggOhWy3aEwcEh4ULQVq3cVovjm3Zk35Q5b8zdpw0yS4Hcmjs+Xgz8+YpPUeftE72NYuyaGk3hmsglkGtiaBye5tHYPNolUteaWWAPCglgGtSGlWRqyS9V5XPvsrlMm3TMRgvwCotKDC8EbLs0qB9P7AjIPQ9FXsuPTzBZ7muAZRcrQGxwtlnpyEdb8t0AJzLaB61jS0qqpMnqySOcXZJeXBg9xnxFme7K4WiwOV2UfO0UJVz5tEOQNssTUtqQZwQpmCC700iGaRSV+k0K33LLKY60CaXDTbR0eBIHE9e8D0xrHREhtmp2TLII3JXqdoytWcGnXanDmHKi6t2JO14wXpPx5QVClZIuHsFkyvEi0sdhBnVvVcSmHSF9wtXDT3cBuAf3PK1YD0+IefzcFekwTl9lRTLhKW0p8lCgoQugjm7LuZEyS+qxgYKd/wucT53IU0QklPQx0HOBvmsgX1TlgNXsot7aYGYhpuV7OhTC1bSWiCEs2qjcK/k59VglKtfc+fyEo99wKyTx0ZJC/3Yfk3k1rUfy1qImS80iQqk/jNsynAILKmwzEUOYwcSwLB4Rm5XXWfkGVCyp6J2cGBqFko2E8CBcv4D0Pf2DFEgF1ppzcxnhKZy40LdvCGy3288qfMsabLaeMR328V8Qm9rnSWwYzKOz8c5OTXjKu75un5iG0iotXzbw44QEgsngeijNDdbCRl5fH0+Nvr46OVxeUBp7zs539DVdJseHP2hI6RX+ZQSXpJ4TEsvwRcZG9DsPziTSgalbOQFYURoP82Yj948lUHvGKixtw0EFWxOIPiLN3ca/AMsPdV4eBUKt/0deAG7jFT0uECNuk48gA5iyAhdWyVQHt7sub/2x3ZH7XlNN7+3BrktMvLq5ubGGzdKKJORw46H5BLxFwfGtztMXCtRtJVoUeDXIyPv9bEFU6ZgZmFowWv8VrwLZp9t+R+WkQ/Xb9CEvON4Yaio+QudQGrh

[jd-solanki]

For floating ui dom tooltip still appears at middle

Because of div is block element and we have div as target, sorry

[jd-solanki]

Have you tried in Vue Playground?

Example

It doesn't work there, I hope I have correct import map 🤔

[IcetCode]

Yes, I've tried it and I got the same result as you did, but the same example works in a local project.

[jd-solanki]

I guess we should raise the issue at vue playground with local project and live playground, IDK when they will resolve the issue though 😑

[jd-solanki]

Second thought is if it works fine for dom module then we shouldn't raise it on vue side 😅

Do you mind raising issue at floating UI repo with local project, live vue & live dom example?

[IcetCode]

Finally, I found out that this is a Vue issue. watch() doesn't work after running npm run build for a Vue project. Let's wait for the fix to be merged.

[jd-solanki]

@IcetCode ??

[IcetCode]

@jd-solanki Oh no, sorry, I forgot that I still have an unmerged PR. I'm trying to re-fork the repository to fix the sync issue, but it seems I can't restore it. I may need to recreate a PR.

[IcetCode]

I've sent a restore ticket to see if I can restore it. If not, I will create a new PR.