@atoms-studio/composables - npm Package Compare versions

Comparing version 0.0.0-c10a9da to 0.0.0-cb128db

dist/composables.es.js

@@ -1,27 +0,7 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { inject, computed } from "vue";
 /*!
-  * vue-router v4.0.15
+  * vue-router v4.1.6
   * (c) 2022 Eduardo San Martin Morote
   * @license MIT
   */
-const hasSymbol = typeof Symbol === "function" && typeof Symbol.toStringTag === "symbol";
-const PolySymbol = (name) => hasSymbol ? Symbol(name) : "_vr_" + name;
-const routerKey = /* @__PURE__ */ PolySymbol("r");
-const routeLocationKey = /* @__PURE__ */ PolySymbol("rl");
 var NavigationType;
@@ -44,2 +24,4 @@ (function(NavigationType2) {
 })(NavigationFailureType || (NavigationFailureType = {}));
+const routerKey = Symbol("");
+const routeLocationKey = Symbol("");
 function useRouter() {
@@ -77,3 +59,3 @@ return inject(routerKey);
   const updateState = (partialState) => {
-    const newState = __spreadValues(__spreadValues({}, state.value), partialState);
+    const newState = { ...state.value, ...partialState };
     const newQuery = {};
@@ -85,3 +67,3 @@ for (const stateKey of stateKeys) {
     }
-    return router[method]({ query: __spreadValues(__spreadValues({}, route.query), newQuery) });
+    return router[method]({ query: { ...route.query, ...newQuery } });
   };
@@ -157,3 +139,4 @@ return {
 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(() => {
@@ -216,3 +199,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 = "";
@@ -227,2 +210,8 @@ if (isCtfAsset(url)) {
     if (isDatoAsset(url)) {
+      if (!datoFocalPoint) {
+        datoFocalPoint = {
+          x: 0.5,
+          y: 0.5
+        };
+      }
       resizeParams = "?";
@@ -235,2 +224,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}`;
@@ -278,3 +274,3 @@ };
         media: `(max-width: ${screenMaxWidth}px)`,
-        src: `${createCfUrlImage(_cWidth, imageUrl.value, format2, _cHeight)}`
+        src: `${createUrlImage(_cWidth, imageUrl.value, format2, _cHeight)}`
       });
@@ -281,0 +277,0 @@ }

dist/composables.umd.js

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

Worsened metrics

Total package byte prevSize

18890

decreased by-3.49%

Lines of code

411

decreased by-0.96%

No dependency changes