@atoms-studio/composables - npm Package Compare versions

Comparing version 0.0.0-92ccef5 to 0.0.0-99b4fdd

dist/composables.es.js

@@ -1,57 +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 { computed, inject } from "vue";
-const useURL = (to, base) => {
-  if (!base) {
-    throw new Error("Base is required");
-  }
-  const isDummy = computed(() => to.value === "#");
-  const url = computed(() => {
-    if (typeof to.value === "string") {
-      return new URL(to.value, base);
-    }
-    return null;
-  });
-  const origin = computed(() => {
-    var _a;
-    return ((_a = url.value) == null ? void 0 : _a.origin) || "";
-  });
-  const path = computed(() => {
-    var _a;
-    return isDummy.value ? "#" : ((_a = url.value) == null ? void 0 : _a.pathname) || "";
-  });
-  const isExternal = computed(() => {
-    return isDummy.value || url.value !== null && origin.value !== base;
-  });
-  return {
-    url,
-    origin,
-    path,
-    isExternal,
-    isDummy
-  };
-};
+import { inject, computed } from "vue";
 /*!
-  * vue-router v4.0.13
+  * vue-router v4.1.2
   * (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;
@@ -74,2 +24,4 @@ (function(NavigationType2) {
 })(NavigationFailureType || (NavigationFailureType = {}));
+const routerKey = Symbol("");
+const routeLocationKey = Symbol("");
 function useRouter() {
@@ -107,3 +59,3 @@ return inject(routerKey);
   const updateState = (partialState) => {
-    const newState = __spreadValues(__spreadValues({}, state.value), partialState);
+    const newState = { ...state.value, ...partialState };
     const newQuery = {};
@@ -115,3 +67,3 @@ for (const stateKey of stateKeys) {
     }
-    return router[method]({ query: __spreadValues(__spreadValues({}, route.query), newQuery) });
+    return router[method]({ query: { ...route.query, ...newQuery } });
   };
@@ -123,2 +75,219 @@ return {
 };
-export { useRouteState, useURL };
+const useURL = (to, base) => {
+  if (!base) {
+    throw new Error("Base is required");
+  }
+  const isDummy = computed(() => to.value === "#");
+  const url = computed(() => {
+    if (typeof to.value === "string") {
+      return new URL(to.value, base);
+    }
+    return null;
+  });
+  const origin = computed(() => {
+    var _a;
+    return ((_a = url.value) == null ? void 0 : _a.origin) || "";
+  });
+  const path = computed(() => {
+    var _a;
+    return isDummy.value ? "#" : ((_a = url.value) == null ? void 0 : _a.pathname) || "";
+  });
+  const isExternal = computed(() => {
+    return isDummy.value || url.value !== null && origin.value !== base;
+  });
+  return {
+    url,
+    origin,
+    path,
+    isExternal,
+    isDummy
+  };
+};
+const getFileExtension = (url) => {
+  var _a, _b, _c;
+  const extension = (_c = (_b = (_a = url.split(/[?#]/).shift()) == null ? void 0 : _a.split("/").pop()) == null ? void 0 : _b.split(".").pop()) != null ? _c : "jpg";
+  return extension;
+};
+const limitImageDimensions = (max, width = 0, height = 0) => {
+  if (width > max || height > max) {
+    const ratio = width / height;
+    const biggerDimension = Math.max(width, height);
+    if (biggerDimension === width) {
+      width = max;
+      height = Math.round(width / ratio);
+    } else {
+      height = max;
+      width = Math.round(height * ratio);
+    }
+  }
+  return {
+    width,
+    height
+  };
+};
+const parseSize = (input = "") => {
+  if (typeof input === "number") {
+    return input;
+  }
+  if (typeof input === "string") {
+    if (input.replace("px", "").match(/^\d+$/g)) {
+      return parseInt(input, 10);
+    }
+  }
+};
+const isCtfAsset = (url) => url && url.includes("ctfassets");
+const isDatoAsset = (url) => url && url.includes("datocms-assets");
+const usePicture = (image, format, legacyFormat, mode, quality, sizesProp, screensProp, datoFocalPoint, datoAutoFormat) => {
+  const imageUrl = computed(() => {
+    return "url" in image ? image.url : "file" in image ? image.file.url : "";
+  });
+  const imageWidth = computed(() => {
+    return "width" in image ? image.width : image && "file" in image ? image.file.details.image.width : 0;
+  });
+  const imageHeight = computed(() => {
+    return image && "height" in image ? image.height : image && "file" in image ? image.file.details.image.height : 0;
+  });
+  const originalFormat = computed(() => {
+    return getFileExtension(imageUrl.value);
+  });
+  const isTransparent = computed(() => {
+    return ["png", "webp", "gif"].includes(originalFormat.value);
+  });
+  const nFormat = computed(() => {
+    if (format) {
+      return format;
+    }
+    if (originalFormat.value === "svg") {
+      return "svg";
+    }
+    return "webp";
+  });
+  const nLegacyFormat = computed(() => {
+    if (legacyFormat) {
+      return legacyFormat;
+    }
+    const formats = {
+      webp: isTransparent.value ? "png" : "jpeg",
+      svg: "png"
+    };
+    return formats[nFormat.value] || originalFormat.value;
+  });
+  const safeDimensions = computed(() => {
+    return limitImageDimensions(4e3, imageWidth.value, imageHeight.value);
+  });
+  const nSources = computed(() => {
+    if (nFormat.value === "svg") {
+      return [
+        {
+          srcset: imageUrl.value
+        }
+      ];
+    }
+    const formats = nLegacyFormat.value !== nFormat.value ? [nLegacyFormat.value, nFormat.value] : [nFormat.value];
+    const sources = formats.map((format2) => {
+      const { srcset, sizes, src } = getSizes(format2);
+      return {
+        src,
+        type: `image/${format2}`,
+        sizes,
+        srcset
+      };
+    });
+    return sources;
+  });
+  const createCfUrlImage = (breakPoint, url, format2 = "jpg", height) => {
+    let resizeParams = "";
+    if (isCtfAsset(url)) {
+      resizeParams = "?";
+      resizeParams += `w=${breakPoint}&`;
+      resizeParams += height ? `h=${height}&` : "";
+      resizeParams += mode ? `fit=${mode}&` : "";
+      resizeParams += `q=${quality}&fm=${format2 && format2 === "jpeg" ? "jpg" : format2}`;
+    }
+    if (isDatoAsset(url)) {
+      resizeParams = "?";
+      resizeParams += `crop=focalpoint&fit=crop&fp-x=${datoFocalPoint.x}&fp-y=${datoFocalPoint.y}&`;
+      resizeParams += `w=${breakPoint}&`;
+      resizeParams += height ? `h=${height}&` : "";
+      resizeParams += datoAutoFormat ? "auto=format&" : "";
+      resizeParams += `q=${quality}&fm=${format2 && format2 === "jpeg" ? "jpg" : format2}`;
+    }
+    return `${url}${resizeParams}`;
+  };
+  const getSizes = (format2) => {
+    const width = parseSize(safeDimensions.value.width);
+    const height = parseSize(safeDimensions.value.height);
+    const hwRatio = width && height ? height / width : 0;
+    const variants = [];
+    const sizes = {};
+    if (typeof sizesProp === "string") {
+      for (const entry of sizesProp.split(/[\s,]+/).filter((e) => e)) {
+        const s = entry.split(":");
+        if (s.length !== 2) {
+          continue;
+        }
+        sizes[s[0].trim()] = s[1].trim();
+      }
+    } else {
+      Object.assign(sizes, sizesProp);
+    }
+    for (const key in sizes) {
+      const screenMaxWidth = screensProp && screensProp[key] || parseInt(key);
+      let size = String(sizes[key]);
+      const isFluid = size.endsWith("vw");
+      if (!isFluid && /^\d+$/.test(size)) {
+        size = size + "px";
+      }
+      if (!isFluid && !size.endsWith("px")) {
+        continue;
+      }
+      let _cWidth = parseInt(size);
+      if (!screenMaxWidth || !_cWidth) {
+        continue;
+      }
+      if (isFluid) {
+        _cWidth = Math.round(_cWidth / 100 * screenMaxWidth);
+      }
+      const _cHeight = hwRatio ? Math.round(_cWidth * hwRatio) : height;
+      variants.push({
+        width: _cWidth,
+        size,
+        screenMaxWidth,
+        media: `(max-width: ${screenMaxWidth}px)`,
+        src: `${createCfUrlImage(_cWidth, imageUrl.value, format2, _cHeight)}`
+      });
+    }
+    variants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth);
+    const defaultVar = variants[variants.length - 1];
+    if (defaultVar) {
+      defaultVar.media = "";
+    }
+    return {
+      sizes: variants.map((v) => `${v.media ? v.media + " " : ""}${v.size}`).join(", "),
+      srcset: variants.map((v) => `${v.src} ${v.width}w`).join(", "),
+      src: defaultVar == null ? void 0 : defaultVar.src
+    };
+  };
+  return {
+    imageUrl,
+    imageWidth,
+    imageHeight,
+    originalFormat,
+    isTransparent,
+    nFormat,
+    nLegacyFormat,
+    safeDimensions,
+    nSources
+  };
+};
+const useFocalPoint = (x, y, width, height) => {
+  const focalPoint = computed(() => {
+    const focalX = x * 100 / width;
+    const focalY = y * 100 / height;
+    return { "object-position": `${focalX}% ${focalY}%` };
+  });
+  return {
+    focalPoint
+  };
+};
+export { useFocalPoint, usePicture, useRouteState, useURL };

dist/composables.umd.js

@@ -1,5 +0,5 @@
-var U=Object.defineProperty;var q=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var R=(o,t,n)=>t in o?U(o,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[t]=n,y=(o,t)=>{for(var n in t||(t={}))g.call(t,n)&&R(o,n,t[n]);if(q)for(var n of q(t))A.call(t,n)&&R(o,n,t[n]);return o};(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.MyLib={},o.Vue))})(this,function(o,t){"use strict";const n=(e,f)=>{if(!f)throw new Error("Base is required");const l=t.computed(()=>e.value==="#"),a=t.computed(()=>typeof e.value=="string"?new URL(e.value,f):null),u=t.computed(()=>{var d;return((d=a.value)==null?void 0:d.origin)||""}),p=t.computed(()=>{var d;return l.value?"#":((d=a.value)==null?void 0:d.pathname)||""}),m=t.computed(()=>l.value||a.value!==null&&u.value!==f);return{url:a,origin:u,path:p,isExternal:m,isDummy:l}};/*!
-  * vue-router v4.0.13
+(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
   * (c) 2022 Eduardo San Martin Morote
   * @license MIT
-  */const j=typeof Symbol=="function"&&typeof Symbol.toStringTag=="symbol",S=e=>j?Symbol(e):"_vr_"+e,v=S("r"),L=S("rl");var b;(function(e){e.pop="pop",e.push="push"})(b||(b={}));var h;(function(e){e.back="back",e.forward="forward",e.unknown=""})(h||(h={}));var w;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(w||(w={}));function V(){return t.inject(v)}function k(){return t.inject(L)}const _=(e,f="replace")=>{const l=k(),a=V();let u;Array.isArray(e)?u=e.reduce((s,c)=>(s[c]={get:r=>r,set:r=>r},s),{}):u=e;const p=Object.keys(u),m=t.computed(()=>{const s={};for(const c of p){const r=l.query[c],i=u[c].get(r);s[c]=i}return s});return{state:m,updateState:s=>{const c=y(y({},m.value),s),r={};for(const i of p){const K=c[i],M=u[i].set(K);r[i]=M}return a[f]({query:y(y({},l.query),r)})}}};o.useRouteState=_,o.useURL=n,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
+  */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"}})});

dist/index.d.ts

@@ -0,2 +1,4 @@
+export { useRouteState } from './useRouteState';
 export { useURL } from './useURL';
-export { useRouteState } from './useRouteState';
+export { usePicture } from './usePicture';
+export { useFocalPoint } from './useFocalPoint';

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.0-92ccef5",
+  "version": "0.0.0-99b4fdd",
   "license": "MIT",
@@ -10,0 +10,0 @@ "files": [

New 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

18188

increased by93.24%

Number of package files

9

increased by28.57%

Lines of code

395

increased by142.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes