kytta / vue-tinybox Goto Github PK

In order not to do testing by hand (including what affects #2 and #13) a testing environment is needed. I propose using Jest for unit tests and Cypress for e2e tests.

Is your feature request related to a problem?
It would be great to have an event propagated when the component is closed

Describe the solution you'd like
Emit an event

Additional context
The reason behind this is my need to wrap the component into another component, where the index is passed down as prop. This prevents leaking the library to the whole codebase. But this issue I get with this is the mutation of the prop directly, I'm fine with this as long I was able to set that prop to null again (on the parent).

Arrows to go left and right and ESC to quit

This is an extension to #2

If the index is submitted via a prop and updated via an event, why not combine it into v-model?

The Question
It's possible to show tinybox only inside a div ?

Additional context
I'm running in a admin template, with left sidebar, but tinybox stay below of the menu...

Even though the output file clearly says export default Tinybox;, Nuxt keeps telling me stuff like export 'default' (imported as 'Tinybox') was not found in 'vue-tinybox'.

The component itself doesn't really work properly in an SSR-environment; gotta look into it.

It would be great to add a caption to the image. Example:

Right now the CSS remains unprefixed. I tried to use PostCSS and Autoprefixer by including the plugins inside postcssPlugins option of rollup-plugin-vue, but wasn't successful

While I do not expect W3C to introduce a <tinybox> HTML element, it's still bad practice to use single-word component names.

Ideas include:

• TinyBox (not my favourite, as I kinda image Tinybox as a single word)
• TinyboxGallery
• TinyboxDisplay

Also some ideas by ChatGPT:

• TinyboxPopup
• TinyboxModal
• TinyboxLightbox
• TinyboxOverlay
• TinyboxDialog
• TinyboxWindow
• TinyboxContainer

An extension to #2.

On mobile phones the photos are pinned to top instead of being in the middle.

A no-thumbs prop would be enough

When navigating the images in the lightbox and the next/previous image is not cached, the previous image is being flashed.

First, Thank you for this tiny little gallery - very simple and useful.
Unfortunately didn't find any lazy load features.

It would be nice to:

• add some loader while image is loading
• add some error stub if image can't be load

For such simple images they are just too huge. It'd be nice to bring down the base64 size to 200 characters or less

Hi,
thank you for your great plugin. However we're approaching the point where the vue 2 have to be replaced with vue 3. Is there any chance for vue 3 support?

Best,
Robert

The docs page should:

• show the implementation guide
• look nicer

When the thumbnail is not provided, the picture itself is being used. However, if it's not square, it gets resized without preserving the aspect ratio.

Being heavily inspired by webflow's lightbox, the component has too many styles that are possibly not needed

On the develop branch after all optimization, the animation of image switching is broken. The backdrop image matches the image that the lightbox is being changed to and the animation is always being played from the left side.