Vue 3 support - Githubissues

MDolega20 commented 3 years ago

Are you predict support for vue version 3?

MatteoGabriele commented 3 years ago

yes, definitely. I was actually looking at this few days ago. I will try to make some time and migrate it, but I still have to finish another package first. it's in my queue

hi-reeve commented 3 years ago

any update on this?

MatteoGabriele commented 3 years ago

sorry! I thought I was in another repository and wrote the wrong stuff. no, there's no package yet. these "covid year" has been quite intense and I'm trying to cut some time to catch up. sorry for the delay

hi-reeve commented 3 years ago

thankyou for the reply! i hope this got updated soon no need to rush but i hope you take your time thankyou

AlsonicTech commented 2 years ago

Any update on this?

MatteoGabriele commented 2 years ago

I did rewrite in Vue 3 few days ago because I had some time off, but i need to test it still and make sure that it's all good. Maybe I'll release a beta soon.

Ahmed1shihab commented 2 years ago

Any update on this?

MatteoGabriele commented 2 years ago

Yesss! So, unfortunately, I didn't have much time to dedicate to this. Technically is done, but I get some weird warnings from Vue and still need testing. Going to try to work on this during the coming weeks. Sorry for the delay. Life happens 😅

MatteoGabriele commented 2 years ago

If some of you have experience with these errors, a hand would be awesome. I leave the screenshots here

MatteoGabriele commented 2 years ago

This is the repository I'm working at if someone wants to have a look feat/next

MatteoGabriele commented 2 years ago

Alright, I have fixed the issue. It wasn't something from the package, but from the test vue app I'm using to test the package itself. I suppose it's because I link the package locally, so I needed to add this in the app config.

config.resolve.alias.set( "vue$",  path.resolve(__dirname, "node_modules/vue"));

MatteoGabriele commented 2 years ago

I have released a beta version on npm vue-progressive-image@beta I need to finish some stuff, but it looks promising. I need to re-write the whole documentation and probably need couple more tests here and there: mostly to see if it works as expected. Feel free to try it and come back with some feedback: that would be appreciated.

Notes

the component is no longer called ProgressiveImg but ProgressiveImage
fallback prop is now called fallback-src
placeholder prop is now called placeholder-src
it is possible to install globally or add component locally ex import { ProgressiveImage } from 'vue-progressive-image'
props and blur can now be passed per components
still working on global parameters
no more onLoad and onError for main image and placeholder but just @success and @error for the main image

MatteoGabriele commented 2 years ago

I've just released v4.0.0-beta.2 with default lazy loading using the IntersectionObserver API

https://user-images.githubusercontent.com/5337152/167245278-1dd75d45-2d49-4a6c-a796-8f2e8ff96ca6.mov

masterbox commented 2 years ago

Hi and thank you for your great work. I'm currently testing the beta version, and I'm having difficulties using the custom classes feature, which does not seem to be a thing in the beta. Do you plan to implement it ?

MatteoGabriele commented 2 years ago

I've released 4.0.0-beta.3 with custom-class prop.

<progressive-image custom-class="myClass" />

MatteoGabriele commented 2 years ago

It would be nice if you guys could help me QA the new version a bit so I can see when things don't render as expected. I have some issues with the image being smaller than the screen because the placeholder would be taking 100% at first and then get the image size once it's loading.

Do you guys often use the placeholder image?
Should I introduce a default background even before the placeholder kicks in or for instances where the user is not going to use a placeholder image?

hi-reeve commented 2 years ago

It would be nice if you guys could help me QA the new version a bit so I can see when things don't render as expected. I have some issues with the image being smaller than the screen because the placeholder would be taking 100% at first and then get the image size once it's loading.

Do you guys often use the placeholder image?

Should I introduce a default background even before the placeholder kicks in or for instances where the user is not going to use a placeholder image?

i just play with it, and seems like it have incorrect size when the parent size is define. https://stackblitz.com/edit/vitejs-vite-kgqzev?file=src%2FApp.vue&terminal=dev

for the placeholder, i think it is good to have built in placeholder, or maybe as simple as solid color. i personally usually does not use a placeholder image

MatteoGabriele commented 2 years ago

I forgot to add this in my previous comments, but the CSS has been extracted in a separate file, so you need to add it to your entry point.

import { createApp } from "vue";
import App from "./App.vue";
import "vue-progressive-image/dist/style.css"; // <---- plugin style imported
import VueProgressiveImage from "vue-progressive-image";

const app = createApp(App);

app.use(VueProgressiveImage);

app.mount("#app");

hi-reeve commented 2 years ago


import "vue-progressive-image/dist/style.css"; // <---- plugin style imported

the blur does not working? or do i need to set it manually? even when i'm using the placeholder https://stackblitz.com/edit/vitejs-vite-kgqzev?file=src%2FApp.vue&terminal=dev

MatteoGabriele commented 2 years ago

The prop is now called placeholder-src. in your case, it would be weird because you are making the image 100% regardless of the actual size. Doesn't quite work well treated as a background image. I might need to look into that use case

MatteoGabriele commented 2 years ago

@zynth17 looking at your little test application, I've added a new object-cover prop. Having an image that fits a div as background it's a valid use case so for sure worth the addition. Let me know if it works out as expected.

Basically right now you won't need anything at all besides your parent dictating the size and the ProgressImage having the object-cover attribute

<template>
  <div class="container">
    <ProgressiveImage
      object-cover
      src="https://picsum.photos/id/34/450/200"
      placeholder-src="https://picsum.photos/id/34/45/20"
    />
  </div>
</template>

<style>
.container {
  width: 600px;
  height: 400px;
}
</style>

you can find this feature in the new vue-progressive-image@4.0.0-beta.4 release

hi-reeve commented 2 years ago

isnt object-fit with object fit css argument better? that way it will be more flexible? thanks for adding that btw :) goodjob!

MatteoGabriele commented 2 years ago

I took inspiration from what tailwindcss calls the "object-fit: cover" snippet, and also, I don't think there's a need for other types: this is the most common scenario. Worst case, the property can be added, or it's possible to go custom anyways.

masterbox commented 2 years ago

Hi, To answer your question yes I use the placeholder it's a nice feature. Why not have a default one that kicks in before, (like a skeleton ?) but I don't know how it would render (first a solid color, then a blur and then the final image ?)

MatteoGabriele commented 2 years ago

Thanks for your feedback. That sounds a bit too much too quickly. Maybe the skeleton can be an option if you don't provide the placeholder source, otherwise I'd say just a solid light gray could do the trick. I could also create a slot for the placeholder block so that you can put whatever u want while loading the main image. For the time being I'm trying to finish some tests but I think i will release the new version pretty soon and we can improve it while using it.

MatteoGabriele commented 2 years ago

just released version 4.0.0-beta.7, with some minor adjustments, and also the documentation for v4 https://matteo-gabriele.gitbook.io/vue-progressive-image/v/v4/

I will probably release v4 under the latest tag tomorrow or Monday. Feedback about the documentation is appreciated.

MatteoGabriele commented 2 years ago

Probably the last update before release. (v4.0.0-beta.8)

since placeholder images are important for user feedback, they are loaded eagerly by default. Removed the prop load-placeholder and added the lazy-placeholder attribute that can be added if a deeper lazy-loading is needed.
Improved animation transition between pictures
Added the skeleton shimmering effect by default; most visible on instances without placeholders. The shimmer effect animation is also under the prefers-reduced-motion media query to allow people with disabilities to skip the skeleton animation.

most of the values used in the CSS file are now accessible via CSS variables. Here is the list of available variables:

--progressive-image-background-color: #f8f8f8;
--progressive-image-blur: 16px;

--progressive-image-main-fade-ease: ease-in;
--progressive-image-main-fade-speed: 0.9s;

--progressive-image-placeholder-fade-ease: ease-out;
--progressive-image-placeholder-fade-speed: 1.2s;

--progressive-image-skeleton-speed: 2s;
--progressive-image-skeleton-background: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0.6) 50%,
  rgba(255, 255, 255, 0) 100%
);

MatteoGabriele commented 2 years ago

Alright! close in this PR: the v4 has been officially released! 🎉

MatteoGabriele / vue-progressive-image

Vue 3 support #76

Notes