@aw-studio/vue-lit-image-next - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/index.js

@@ -1,6 +0,7 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, mergeProps, createCommentVNode } from 'vue';
+import { defineComponent, useAttrs, computed, inject, openBlock, createElementBlock, createElementVNode, mergeProps, unref } from 'vue';
 import 'lazysizes';
 
+var _hoisted_1 = { class: "image-container" };
+var _hoisted_2 = ["src", "data-srcset"];
 var script = defineComponent({
-    name: 'LitImage',
     props: {
@@ -12,9 +13,8 @@ image: {
     },
-    methods: {
-        /**
-         * get the existing conversionsizes and sort them
-         */
-        getMediaConversions: function () {
+    setup: function (__props) {
+        var props = __props;
+        var attrs = useAttrs();
+        var getMediaConversions = function () {
             var imageConversions = [];
-            var sortable = Object.fromEntries(Object.entries(this.conversionSizes).sort(function (_a, _b) {
+            var sortable = Object.fromEntries(Object.entries(conversionSizes.value).sort(function (_a, _b) {
                 var a = _a[1];
@@ -29,40 +29,36 @@ var b = _b[1];
             return imageConversions;
-        },
-    },
-    computed: {
-        /**
-         * Get the thumbnail image
-         */
-        thumbnail: function () {
-            var conversionName = this.getMediaConversions()[0][0];
+        };
+        var thumbnail = computed(function () {
+            var conversionName = getMediaConversions()[0][0];
             // Check if image is object or array of image objects
-            if (!Array.isArray(this.image)) {
-                if (this.image.conversion_urls.hasOwnProperty(conversionName)) {
-                    return this.image.conversion_urls[conversionName];
+            if (!Array.isArray(props.image)) {
+                if (props.image.conversion_urls.hasOwnProperty(conversionName)) {
+                    return props.image.conversion_urls[conversionName];
                 }
-                return this.image.url;
+                return props.image.url;
             }
             else {
-                if (this.image[0].conversion_urls.hasOwnProperty(conversionName)) {
-                    return this.image[0].conversion_urls[conversionName];
+                if (props.image[0].conversion_urls.hasOwnProperty(conversionName)) {
+                    return props.image[0].conversion_urls[conversionName];
                 }
-                return this.image[0].url;
+                return props.image[0].url;
             }
-        },
-        locale: function () {
+        });
+        computed(function () {
             return window.location.pathname.split('/')[1];
-        },
-        conversionSizes: function () {
-            var sizes = this.$litImageOptions.conversions;
+        });
+        var litImageOptions = inject('litImageOptions');
+        var conversionSizes = computed(function () {
+            var sizes = litImageOptions.conversions;
             return sizes;
-        },
-        dataSrcset: function () {
+        });
+        var dataSrcset = computed(function () {
             var srcset = '';
-            var conversions = this.getMediaConversions();
+            var conversions = getMediaConversions();
             var urls = [];
             // Check if image is object or array of image objects
-            if (!Array.isArray(this.image)) {
-                for (var _i = 0, _a = Object.entries(this.image.conversion_urls); _i < _a.length; _i++) {
+            if (!Array.isArray(props.image)) {
+                for (var _i = 0, _a = Object.entries(props.image.conversion_urls); _i < _a.length; _i++) {
                     var _b = _a[_i], key = _b[0], value = _b[1];
-                    if (key in this.conversionSizes) {
+                    if (key in conversionSizes.value) {
                         urls.push([key, value]);
@@ -73,5 +69,5 @@ }
             else {
-                for (var _c = 0, _d = Object.entries(this.image[0].conversion_urls); _c < _d.length; _c++) {
+                for (var _c = 0, _d = Object.entries(props.image[0].conversion_urls); _c < _d.length; _c++) {
                     var _e = _d[_c], key = _e[0], value = _e[1];
-                    if (key in this.conversionSizes) {
+                    if (key in conversionSizes.value) {
                         urls.push([key, value]);
@@ -89,24 +85,17 @@ }
             return srcset;
-        },
-    },
+        });
+        return function (_ctx, _cache) {
+            return (openBlock(), createElementBlock("div", _hoisted_1, [
+                createElementVNode("img", mergeProps({
+                    src: unref(thumbnail),
+                    class: "lazyload lazyload-animation lit-image"
+                }, unref(attrs), {
+                    "data-srcset": unref(dataSrcset),
+                    "data-sizes": "auto"
+                }), null, 16 /* FULL_PROPS */, _hoisted_2)
+            ]));
+        };
+    }
 });
 
-const _hoisted_1 = { class: "image-container" };
-const _hoisted_2 = ["src", "data-srcset"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("img", mergeProps({
-      src: _ctx.thumbnail,
-      class: "lazyload lazyload-animation lit-imge"
-    }, _ctx.$attrs, {
-      "data-srcset": _ctx.dataSrcset,
-      "data-sizes": "auto"
-    }), null, 16 /* FULL_PROPS */, _hoisted_2),
-    createCommentVNode(" TODO: "),
-    createCommentVNode(" :alt=\"alt\"\n            :title=\"title\" ")
-  ]))
-}
-
-script.render = render;
 script.__file = "src/LitImage.vue";
@@ -117,2 +106,3 @@
         app.config.globalProperties.$litImageOptions = options;
+        app.provide('litImageOptions', options);
         app.component('LitImage', script);
@@ -119,0 +109,0 @@ },

package.json

 {
     "name": "@aw-studio/vue-lit-image-next",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "description": "A vue-lit-image that supports vue 3.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.ts

@@ -8,2 +8,3 @@ import { App } from 'vue';
         app.config.globalProperties.$litImageOptions = options;
+        app.provide('litImageOptions', options);
 
@@ -10,0 +11,0 @@ app.component('LitImage', LitImage);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

25746

decreased by-2.28%

Lines of code

536

decreased by-1.29%

No dependency changes