@atoms-studio/components - npm Package Compare versions

Comparing version 0.0.0-7331f61 to 0.0.0-79507d2

dist/AppPicture.vue.d.ts

 import type { PropType, Ref } from 'vue';
+import type { FocalPointObject } from '@atoms-studio/composables/dist/usePicture';
 interface ImageUrlObject {
@@ -85,2 +86,14 @@ url: string;
     };
+    datoFocalPoint: {
+        type: PropType<FocalPointObject>;
+        required: false;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    datoAutoFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
@@ -167,2 +180,14 @@ imgLoaded: Ref<boolean>;
     };
+    datoFocalPoint: {
+        type: PropType<FocalPointObject>;
+        required: false;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    datoAutoFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
@@ -182,3 +207,5 @@ image: ImageUrlObject | ImageFileObject;
     legacyFormat: string;
+    datoFocalPoint: FocalPointObject;
+    datoAutoFormat: boolean;
 }>;
 export default _default;

dist/components.es.js

@@ -142,2 +142,11 @@ var __defProp = Object.defineProperty;
       default: ""
+    },
+    datoFocalPoint: {
+      type: Object,
+      required: false,
+      default: () => ({ x: 0.5, y: 0.5 })
+    },
+    datoAutoFormat: {
+      type: Boolean,
+      default: false
     }
@@ -167,4 +176,4 @@ },
       nSources
-    } = usePicture(props.image, props.format, props.legacyFormat, props.mode, props.quality, props.sizes, props.screens);
-    if (props.activateFocalPoint && safeDimensions.value && props.focalPoint) {
+    } = usePicture(props.image, props.format, props.legacyFormat, props.mode, props.quality, props.sizes, props.screens, props.datoFocalPoint, props.datoAutoFormat);
+    if (props.activateFocalPoint && safeDimensions.value && props.focalPoint && !props.datoFocalPoint) {
       const { focalPoint } = useFocalPoint(props.focalPoint.x, props.focalPoint.y, safeDimensions.value.width, safeDimensions.value.height);
@@ -171,0 +180,0 @@ setFocalPoint.value = focalPoint.value;

dist/components.umd.js

@@ -1,1 +0,1 @@
-(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@atoms-studio/composables")):typeof define=="function"&&define.amd?define(["exports","vue","@atoms-studio/composables"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.components={},n.Vue,n.composables))})(this,function(n,t,a){"use strict";var D=Object.defineProperty;var g=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var h=(n,t,a)=>t in n?D(n,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[t]=a,y=(n,t)=>{for(var a in t||(t={}))N.call(t,a)&&h(n,a,t[a]);if(g)for(var a of g(t))j.call(t,a)&&h(n,a,t[a]);return n};const u="componentsConfig",S={baseUrl:""};var f=t.defineComponent({name:"AppLink",props:{to:{type:[String,Object],required:!0},disabled:{type:Boolean,default:!1},forceSelf:{type:Boolean,default:!1},linkComponent:{type:String,default:"RouterLink"},custom:{type:Boolean,default:!1}},setup(e,{slots:o}){const l=t.toRefs(e),i=t.inject(u,S),{isExternal:s}=a.useURL(l.to,i.baseUrl);return()=>s.value&&!e.custom?t.h("a",{class:"app-link",href:e.disabled?void 0:e.to,target:e.forceSelf?"_self":"_blank",rel:"noopener noreferrer"},o.default&&o.default()):t.h(t.resolveComponent(e.linkComponent),y({class:"app-link",to:e.to,custom:e.custom},e.disabled?{onClickCapture:d=>d.preventDefault()}:{}),()=>o.default&&o.default())}}),O="",k=(e,o)=>{const l=e.__vccOpts||e;for(const[i,s]of o)l[i]=s;return l};const C=t.defineComponent({props:{image:{type:Object,default:()=>({})},mode:{type:String,required:!1,default:"fill"},loadingColor:{type:String,required:!1,default:"transparent"},altText:{type:String,required:!1,default:""},base64:{type:String,required:!1,default:""},activateFocalPoint:{type:Boolean,default:!0},focalPoint:{type:Object,required:!1,default:()=>({})},quality:{type:Number,required:!1,default:78},preload:{type:Boolean,default:!1},screens:{type:Object,default:()=>({xs:320,sm:640,md:768,lg:1024,xl:1280,xxl:1536,"2xl":1536})},sizes:{type:String,default:"xs:320px sm:640px md:768px lg:1024px xl:1280px xxl:1536px 2xl:1536px"},format:{type:String,default:"webp"},legacyFormat:{type:String,default:""}},directives:{completed:{mounted(e){e&&e.complete&&e.dispatchEvent(new CustomEvent("completed"))}}},setup(e){const o=t.ref(!1);let l=t.ref("");const{imageUrl:i,imageWidth:s,imageHeight:d,originalFormat:p,isTransparent:r,nFormat:q,nLegacyFormat:F,safeDimensions:c,nSources:_}=a.usePicture(e.image,e.format,e.legacyFormat,e.mode,e.quality,e.sizes,e.screens);if(e.activateFocalPoint&&c.value&&e.focalPoint){const{focalPoint:A}=a.useFocalPoint(e.focalPoint.x,e.focalPoint.y,c.value.width,c.value.height);l.value=A.value}return{imgLoaded:o,imageUrl:i,imageWidth:s,imageHeight:d,safeDimensions:c,setFocalPoint:l,originalFormat:p,isTransparent:r,nFormat:q,nLegacyFormat:F,nSources:_,handleLoaded:()=>{o.value=!0},handleCompleted:()=>{o.value=!0}}}}),b={class:"app-picture"},P={class:"app-picture-wrapper"},w=["type","srcset","sizes"],L=["src","srcset","sizes","alt","width","height"],v=["width","height"],z=["src"];function B(e,o,l,i,s,d){const p=t.resolveDirective("completed");return t.openBlock(),t.createElementBlock("div",b,[t.createElementVNode("div",P,[(t.openBlock(),t.createElementBlock("picture",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-element"]),key:e.nSources[0].src},[e.nSources[1]?(t.openBlock(),t.createElementBlock("source",{key:0,type:e.nSources[1].type,srcset:e.nSources[1].srcset,sizes:e.nSources[1].sizes},null,8,w)):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("img",{src:e.nSources[0].src,srcset:e.nSources[0].srcset,sizes:e.nSources[0].sizes,alt:e.altText,width:e.safeDimensions.width,height:e.safeDimensions.height,class:"app-picture-wrapper-element-img",style:t.normalizeStyle(e.setFocalPoint),loading:"lazy",onLoad:o[0]||(o[0]=(...r)=>e.handleLoaded&&e.handleLoaded(...r)),onCompleted:o[1]||(o[1]=(...r)=>e.handleCompleted&&e.handleCompleted(...r))},null,44,L),[[p]])],2)),t.createElementVNode("div",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-placeholder"])},[(t.openBlock(),t.createElementBlock("svg",{class:"app-picture-wrapper-placeholder-svg",width:e.safeDimensions.width,height:e.safeDimensions.height,style:t.normalizeStyle({background:e.loadingColor})},null,12,v)),t.createElementVNode("img",{src:e.base64,class:"app-picture-wrapper-placeholder-base64"},null,8,z)],2)])])}var m=k(C,[["render",B]]),E={install:(e,o)=>{e.provide(u,o),e.component("AppLink",f),e.component("AppPicture",m)}};n.AppLink=f,n.AppPicture=m,n.default=E,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@atoms-studio/composables")):typeof define=="function"&&define.amd?define(["exports","vue","@atoms-studio/composables"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.components={},a.Vue,a.composables))})(this,function(a,t,n){"use strict";var j=Object.defineProperty;var g=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var h=(a,t,n)=>t in a?j(a,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):a[t]=n,y=(a,t)=>{for(var n in t||(t={}))D.call(t,n)&&h(a,n,t[n]);if(g)for(var n of g(t))N.call(t,n)&&h(a,n,t[n]);return a};const p="componentsConfig",S={baseUrl:""};var f=t.defineComponent({name:"AppLink",props:{to:{type:[String,Object],required:!0},disabled:{type:Boolean,default:!1},forceSelf:{type:Boolean,default:!1},linkComponent:{type:String,default:"RouterLink"},custom:{type:Boolean,default:!1}},setup(e,{slots:o}){const l=t.toRefs(e),i=t.inject(p,S),{isExternal:s}=n.useURL(l.to,i.baseUrl);return()=>s.value&&!e.custom?t.h("a",{class:"app-link",href:e.disabled?void 0:e.to,target:e.forceSelf?"_self":"_blank",rel:"noopener noreferrer"},o.default&&o.default()):t.h(t.resolveComponent(e.linkComponent),y({class:"app-link",to:e.to,custom:e.custom},e.disabled?{onClickCapture:d=>d.preventDefault()}:{}),()=>o.default&&o.default())}}),O="",k=(e,o)=>{const l=e.__vccOpts||e;for(const[i,s]of o)l[i]=s;return l};const C=t.defineComponent({props:{image:{type:Object,default:()=>({})},mode:{type:String,required:!1,default:"fill"},loadingColor:{type:String,required:!1,default:"transparent"},altText:{type:String,required:!1,default:""},base64:{type:String,required:!1,default:""},activateFocalPoint:{type:Boolean,default:!0},focalPoint:{type:Object,required:!1,default:()=>({})},quality:{type:Number,required:!1,default:78},preload:{type:Boolean,default:!1},screens:{type:Object,default:()=>({xs:320,sm:640,md:768,lg:1024,xl:1280,xxl:1536,"2xl":1536})},sizes:{type:String,default:"xs:320px sm:640px md:768px lg:1024px xl:1280px xxl:1536px 2xl:1536px"},format:{type:String,default:"webp"},legacyFormat:{type:String,default:""},datoFocalPoint:{type:Object,required:!1,default:()=>({x:.5,y:.5})},datoAutoFormat:{type:Boolean,default:!1}},directives:{completed:{mounted(e){e&&e.complete&&e.dispatchEvent(new CustomEvent("completed"))}}},setup(e){const o=t.ref(!1);let l=t.ref("");const{imageUrl:i,imageWidth:s,imageHeight:d,originalFormat:u,isTransparent:r,nFormat:E,nLegacyFormat:q,safeDimensions:c,nSources:A}=n.usePicture(e.image,e.format,e.legacyFormat,e.mode,e.quality,e.sizes,e.screens,e.datoFocalPoint,e.datoAutoFormat);if(e.activateFocalPoint&&c.value&&e.focalPoint&&!e.datoFocalPoint){const{focalPoint:_}=n.useFocalPoint(e.focalPoint.x,e.focalPoint.y,c.value.width,c.value.height);l.value=_.value}return{imgLoaded:o,imageUrl:i,imageWidth:s,imageHeight:d,safeDimensions:c,setFocalPoint:l,originalFormat:u,isTransparent:r,nFormat:E,nLegacyFormat:q,nSources:A,handleLoaded:()=>{o.value=!0},handleCompleted:()=>{o.value=!0}}}}),P={class:"app-picture"},b={class:"app-picture-wrapper"},w=["type","srcset","sizes"],F=["src","srcset","sizes","alt","width","height"],L=["width","height"],B=["src"];function v(e,o,l,i,s,d){const u=t.resolveDirective("completed");return t.openBlock(),t.createElementBlock("div",P,[t.createElementVNode("div",b,[(t.openBlock(),t.createElementBlock("picture",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-element"]),key:e.nSources[0].src},[e.nSources[1]?(t.openBlock(),t.createElementBlock("source",{key:0,type:e.nSources[1].type,srcset:e.nSources[1].srcset,sizes:e.nSources[1].sizes},null,8,w)):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("img",{src:e.nSources[0].src,srcset:e.nSources[0].srcset,sizes:e.nSources[0].sizes,alt:e.altText,width:e.safeDimensions.width,height:e.safeDimensions.height,class:"app-picture-wrapper-element-img",style:t.normalizeStyle(e.setFocalPoint),loading:"lazy",onLoad:o[0]||(o[0]=(...r)=>e.handleLoaded&&e.handleLoaded(...r)),onCompleted:o[1]||(o[1]=(...r)=>e.handleCompleted&&e.handleCompleted(...r))},null,44,F),[[u]])],2)),t.createElementVNode("div",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-placeholder"])},[(t.openBlock(),t.createElementBlock("svg",{class:"app-picture-wrapper-placeholder-svg",width:e.safeDimensions.width,height:e.safeDimensions.height,style:t.normalizeStyle({background:e.loadingColor})},null,12,L)),t.createElementVNode("img",{src:e.base64,class:"app-picture-wrapper-placeholder-base64"},null,8,B)],2)])])}var m=k(C,[["render",v]]),z={install:(e,o)=>{e.provide(p,o),e.component("AppLink",f),e.component("AppPicture",m)}};a.AppLink=f,a.AppPicture=m,a.default=z,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.0-7331f61",
+  "version": "0.0.0-79507d2",
   "license": "MIT",
@@ -50,5 +50,5 @@ "files": [
   "dependencies": {
-    "@atoms-studio/composables": "0.0.0-7331f61",
-    "@atoms-studio/nuxt-components": "0.0.0-7331f61"
+    "@atoms-studio/composables": "0.0.0-79507d2",
+    "@atoms-studio/nuxt-components": "0.0.0-79507d2"
   }
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23664

increased by4.87%

Lines of code

564

increased by6.82%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@atoms-studio/composables@0.0.0-79507d2(transitive)

• + Added@atoms-studio/nuxt-components@0.0.0-79507d2(transitive)

• + Added@headlessui/vue@1.7.23(transitive)

• + Added@tanstack/virtual-core@3.13.2(transitive)

• + Added@tanstack/vue-virtual@3.13.2(transitive)

• - Removed@atoms-studio/composables@0.0.0-7331f61(transitive)

• - Removed@atoms-studio/nuxt-components@0.0.0-7331f61(transitive)

• Updated@atoms-studio/composables@0.0.0-79507d2

• Updated@atoms-studio/nuxt-components@0.0.0-79507d2