@atoms-studio/composables - npm Package Compare versions

Comparing version 0.0.0-75bc302 to 0.0.0-780e065

dist/composables.es.js

 import { inject, computed } from "vue";
 /*!
-  * vue-router v4.1.2
+  * vue-router v4.1.6
   * (c) 2022 Eduardo San Martin Morote
@@ -136,3 +136,4 @@ * @license MIT
 const isDatoAsset = (url) => url && url.includes("datocms-assets");
-const usePicture = (image, format, legacyFormat, mode, quality, sizesProp, screensProp, datoFocalPoint, datoAutoFormat) => {
+const isStoryblokAsset = (url) => url && url.includes("a.storyblok");
+const usePicture = (image, format, legacyFormat, mode, quality, sizesProp, screensProp, datoFocalPoint, datoAutoFormat, sbFocalPoint) => {
   const imageUrl = computed(() => {
@@ -195,3 +196,3 @@ return "url" in image ? image.url : "file" in image ? image.file.url : "";
   });
-  const createCfUrlImage = (breakPoint, url, format2 = "jpg", height) => {
+  const createUrlImage = (breakPoint, url, format2 = "jpg", height) => {
     let resizeParams = "";
@@ -206,2 +207,8 @@ if (isCtfAsset(url)) {
     if (isDatoAsset(url)) {
+      if (!datoFocalPoint) {
+        datoFocalPoint = {
+          x: 0.5,
+          y: 0.5
+        };
+      }
       resizeParams = "?";
@@ -214,2 +221,9 @@ resizeParams += `crop=focalpoint&fit=crop&fp-x=${datoFocalPoint.x}&fp-y=${datoFocalPoint.y}&`;
     }
+    if (isStoryblokAsset(url)) {
+      resizeParams = "/m/";
+      resizeParams += breakPoint && height ? `${breakPoint}x${height}/` : breakPoint ? `${breakPoint}x0/` : "";
+      resizeParams += "filters:";
+      resizeParams += sbFocalPoint ? `focal(${sbFocalPoint}):` : "";
+      resizeParams += `quality(${quality})`;
+    }
     return `${url}${resizeParams}`;
@@ -257,3 +271,3 @@ };
         media: `(max-width: ${screenMaxWidth}px)`,
-        src: `${createCfUrlImage(_cWidth, imageUrl.value, format2, _cHeight)}`
+        src: `${createUrlImage(_cWidth, imageUrl.value, format2, _cHeight)}`
       });
@@ -260,0 +274,0 @@ }

dist/composables.umd.js

@@ -1,5 +0,5 @@
-(function(p,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis!="undefined"?globalThis:p||self,e(p.MyLib={},p.Vue))})(this,function(p,e){"use strict";/*!
-  * vue-router v4.1.2
+(function(d,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis!="undefined"?globalThis:d||self,s(d.MyLib={},d.Vue))})(this,function(d,s){"use strict";/*!
+  * vue-router v4.1.6
   * (c) 2022 Eduardo San Martin Morote
   * @license MIT
-  */var D;(function(t){t.pop="pop",t.push="push"})(D||(D={}));var I;(function(t){t.back="back",t.forward="forward",t.unknown=""})(I||(I={}));var U;(function(t){t[t.aborted=4]="aborted",t[t.cancelled=8]="cancelled",t[t.duplicated=16]="duplicated"})(U||(U={}));const A=Symbol(""),V=Symbol("");function _(){return e.inject(A)}function E(){return e.inject(V)}const K=(t,o="replace")=>{const n=E(),r=_();let c;Array.isArray(t)?c=t.reduce((h,a)=>(h[a]={get:f=>f,set:f=>f},h),{}):c=t;const d=Object.keys(c),m=e.computed(()=>{const h={};for(const a of d){const f=n.query[a],g=c[a].get(f);h[a]=g}return h});return{state:m,updateState:h=>{const a={...m.value,...h},f={};for(const g of d){const v=a[g],R=c[g].set(v);f[g]=R}return r[o]({query:{...n.query,...f}})}}},P=(t,o)=>{if(!o)throw new Error("Base is required");const n=e.computed(()=>t.value==="#"),r=e.computed(()=>typeof t.value=="string"?new URL(t.value,o):null),c=e.computed(()=>{var $;return(($=r.value)==null?void 0:$.origin)||""}),d=e.computed(()=>{var $;return n.value?"#":(($=r.value)==null?void 0:$.pathname)||""}),m=e.computed(()=>n.value||r.value!==null&&c.value!==o);return{url:r,origin:c,path:d,isExternal:m,isDummy:n}},C=t=>{var n,r,c;return(c=(r=(n=t.split(/[?#]/).shift())==null?void 0:n.split("/").pop())==null?void 0:r.split(".").pop())!=null?c:"jpg"},H=(t,o=0,n=0)=>{if(o>t||n>t){const r=o/n;Math.max(o,n)===o?(o=t,n=Math.round(o/r)):(n=t,o=Math.round(n*r))}return{width:o,height:n}},k=(t="")=>{if(typeof t=="number")return t;if(typeof t=="string"&&t.replace("px","").match(/^\d+$/g))return parseInt(t,10)},B=t=>t&&t.includes("ctfassets"),F=t=>t&&t.includes("datocms-assets"),O=(t,o,n,r,c,d,m,$,h)=>{const a=e.computed(()=>"url"in t?t.url:"file"in t?t.file.url:""),f=e.computed(()=>"width"in t?t.width:t&&"file"in t?t.file.details.image.width:0),g=e.computed(()=>t&&"height"in t?t.height:t&&"file"in t?t.file.details.image.height:0),v=e.computed(()=>C(a.value)),R=e.computed(()=>["png","webp","gif"].includes(v.value)),b=e.computed(()=>o||(v.value==="svg"?"svg":"webp")),W=e.computed(()=>n||{webp:R.value?"png":"jpeg",svg:"png"}[b.value]||v.value),z=e.computed(()=>H(4e3,f.value,g.value)),X=e.computed(()=>b.value==="svg"?[{srcset:a.value}]:(W.value!==b.value?[W.value,b.value]:[b.value]).map(i=>{const{srcset:y,sizes:s,src:x}=G(i);return{src:x,type:`image/${i}`,sizes:s,srcset:y}})),Y=(S,w,i="jpg",y)=>{let s="";return B(w)&&(s="?",s+=`w=${S}&`,s+=y?`h=${y}&`:"",s+=r?`fit=${r}&`:"",s+=`q=${c}&fm=${i&&i==="jpeg"?"jpg":i}`),F(w)&&(s="?",s+=`crop=focalpoint&fit=crop&fp-x=${$.x}&fp-y=${$.y}&`,s+=`w=${S}&`,s+=y?`h=${y}&`:"",s+=h?"auto=format&":"",s+=`q=${c}&fm=${i&&i==="jpeg"?"jpg":i}`),`${w}${s}`},G=S=>{const w=k(z.value.width),i=k(z.value.height),y=w&&i?i/w:0,s=[],x={};if(typeof d=="string")for(const u of d.split(/[\s,]+/).filter(l=>l)){const l=u.split(":");l.length===2&&(x[l[0].trim()]=l[1].trim())}else Object.assign(x,d);for(const u in x){const l=m&&m[u]||parseInt(u);let j=String(x[u]);const L=j.endsWith("vw");if(!L&&/^\d+$/.test(j)&&(j=j+"px"),!L&&!j.endsWith("px"))continue;let M=parseInt(j);if(!l||!M)continue;L&&(M=Math.round(M/100*l));const J=y?Math.round(M*y):i;s.push({width:M,size:j,screenMaxWidth:l,media:`(max-width: ${l}px)`,src:`${Y(M,a.value,S,J)}`})}s.sort((u,l)=>u.screenMaxWidth-l.screenMaxWidth);const q=s[s.length-1];return q&&(q.media=""),{sizes:s.map(u=>`${u.media?u.media+" ":""}${u.size}`).join(", "),srcset:s.map(u=>`${u.src} ${u.width}w`).join(", "),src:q==null?void 0:q.src}};return{imageUrl:a,imageWidth:f,imageHeight:g,originalFormat:v,isTransparent:R,nFormat:b,nLegacyFormat:W,safeDimensions:z,nSources:X}},Q=(t,o,n,r)=>({focalPoint:e.computed(()=>{const d=t*100/n,m=o*100/r;return{"object-position":`${d}% ${m}%`}})});p.useFocalPoint=Q,p.usePicture=O,p.useRouteState=K,p.useURL=P,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+  */var A;(function(e){e.pop="pop",e.push="push"})(A||(A={}));var D;(function(e){e.back="back",e.forward="forward",e.unknown=""})(D||(D={}));var I;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(I||(I={}));const _=Symbol(""),E=Symbol("");function K(){return s.inject(_)}function k(){return s.inject(E)}const H=(e,o="replace")=>{const n=k(),r=K();let c;Array.isArray(e)?c=e.reduce((h,$)=>(h[$]={get:i=>i,set:i=>i},h),{}):c=e;const m=Object.keys(c),g=s.computed(()=>{const h={};for(const $ of m){const i=n.query[$],w=c[$].get(i);h[$]=w}return h});return{state:g,updateState:h=>{const $={...g.value,...h},i={};for(const w of m){const R=$[w],x=c[w].set(R);i[w]=x}return r[o]({query:{...n.query,...i}})}}},B=(e,o)=>{if(!o)throw new Error("Base is required");const n=s.computed(()=>e.value==="#"),r=s.computed(()=>typeof e.value=="string"?new URL(e.value,o):null),c=s.computed(()=>{var f;return((f=r.value)==null?void 0:f.origin)||""}),m=s.computed(()=>{var f;return n.value?"#":((f=r.value)==null?void 0:f.pathname)||""}),g=s.computed(()=>n.value||r.value!==null&&c.value!==o);return{url:r,origin:c,path:m,isExternal:g,isDummy:n}},C=e=>{var n,r,c;return(c=(r=(n=e.split(/[?#]/).shift())==null?void 0:n.split("/").pop())==null?void 0:r.split(".").pop())!=null?c:"jpg"},O=(e,o=0,n=0)=>{if(o>e||n>e){const r=o/n;Math.max(o,n)===o?(o=e,n=Math.round(o/r)):(n=e,o=Math.round(n*r))}return{width:o,height:n}},U=(e="")=>{if(typeof e=="number")return e;if(typeof e=="string"&&e.replace("px","").match(/^\d+$/g))return parseInt(e,10)},Q=e=>e&&e.includes("ctfassets"),X=e=>e&&e.includes("datocms-assets"),Y=e=>e&&e.includes("a.storyblok"),G=(e,o,n,r,c,m,g,f,h,$)=>{const i=s.computed(()=>"url"in e?e.url:"file"in e?e.file.url:""),w=s.computed(()=>"width"in e?e.width:e&&"file"in e?e.file.details.image.width:0),R=s.computed(()=>e&&"height"in e?e.height:e&&"file"in e?e.file.details.image.height:0),x=s.computed(()=>C(i.value)),V=s.computed(()=>["png","webp","gif"].includes(x.value)),S=s.computed(()=>o||(x.value==="svg"?"svg":"webp")),W=s.computed(()=>n||{webp:V.value?"png":"jpeg",svg:"png"}[S.value]||x.value),z=s.computed(()=>O(4e3,w.value,R.value)),T=s.computed(()=>S.value==="svg"?[{srcset:i.value}]:(W.value!==S.value?[W.value,S.value]:[S.value]).map(l=>{const{srcset:p,sizes:t,src:b}=F(l);return{src:b,type:`image/${l}`,sizes:t,srcset:p}})),Z=(y,j,l="jpg",p)=>{let t="";return Q(j)&&(t="?",t+=`w=${y}&`,t+=p?`h=${p}&`:"",t+=r?`fit=${r}&`:"",t+=`q=${c}&fm=${l&&l==="jpeg"?"jpg":l}`),X(j)&&(f||(f={x:.5,y:.5}),t="?",t+=`crop=focalpoint&fit=crop&fp-x=${f.x}&fp-y=${f.y}&`,t+=`w=${y}&`,t+=p?`h=${p}&`:"",t+=h?"auto=format&":"",t+=`q=${c}&fm=${l&&l==="jpeg"?"jpg":l}`),Y(j)&&(t="/m/",t+=y&&p?`${y}x${p}/`:y?`${y}x0/`:"",t+="filters:",t+=$?`focal(${$}):`:"",t+=`quality(${c})`),`${j}${t}`},F=y=>{const j=U(z.value.width),l=U(z.value.height),p=j&&l?l/j:0,t=[],b={};if(typeof m=="string")for(const u of m.split(/[\s,]+/).filter(a=>a)){const a=u.split(":");a.length===2&&(b[a[0].trim()]=a[1].trim())}else Object.assign(b,m);for(const u in b){const a=g&&g[u]||parseInt(u);let v=String(b[u]);const L=v.endsWith("vw");if(!L&&/^\d+$/.test(v)&&(v=v+"px"),!L&&!v.endsWith("px"))continue;let M=parseInt(v);if(!a||!M)continue;L&&(M=Math.round(M/100*a));const P=p?Math.round(M*p):l;t.push({width:M,size:v,screenMaxWidth:a,media:`(max-width: ${a}px)`,src:`${Z(M,i.value,y,P)}`})}t.sort((u,a)=>u.screenMaxWidth-a.screenMaxWidth);const q=t[t.length-1];return q&&(q.media=""),{sizes:t.map(u=>`${u.media?u.media+" ":""}${u.size}`).join(", "),srcset:t.map(u=>`${u.src} ${u.width}w`).join(", "),src:q==null?void 0:q.src}};return{imageUrl:i,imageWidth:w,imageHeight:R,originalFormat:x,isTransparent:V,nFormat:S,nLegacyFormat:W,safeDimensions:z,nSources:T}},J=(e,o,n,r)=>({focalPoint:s.computed(()=>{const m=e*100/n,g=o*100/r;return{"object-position":`${m}% ${g}%`}})});d.useFocalPoint=J,d.usePicture=G,d.useRouteState=H,d.useURL=B,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/usePicture.d.ts

@@ -37,3 +37,3 @@ import type { ComputedRef } from 'vue';
 }
-export declare const usePicture: (image: ImageUrlObject | ImageFileObject, format: string, legacyFormat: string, mode: string, quality: number, sizesProp: string, screensProp: Record<string, number>, datoFocalPoint: FocalPointObject, datoAutoFormat: boolean) => {
+export declare const usePicture: (image: ImageUrlObject | ImageFileObject, format: string, legacyFormat: string, mode: string, quality: number, sizesProp: string, screensProp: Record<string, number>, datoFocalPoint: FocalPointObject, datoAutoFormat: boolean, sbFocalPoint: string) => {
     imageUrl: ComputedRef<string>;
@@ -40,0 +40,0 @@ imageWidth: ComputedRef<number>;

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.0-75bc302",
+  "version": "0.0.0-780e065",
   "license": "MIT",
@@ -10,0 +10,0 @@ "files": [

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

Improved metrics

Total package byte prevSize

18890

increased by3.86%

Lines of code

411

increased by4.05%

No dependency changes