@atoms-studio/composables - npm Package Compare versions

Comparing version 0.0.0-2e73034 to 0.0.0-3cf276b

dist/composables.es.js

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

dist/index.d.ts

 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-2e73034",
+  "version": "0.0.0-3cf276b",
   "license": "MIT",
@@ -42,5 +42,5 @@ "files": [
   "dependencies": {
-    "@atoms-studio/nuxt-components": "0.0.0-2e73034",
+    "@atoms-studio/nuxt-components": "0.0.0-3cf276b",
     "mkdirp": "^0.5.5"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

18789

increased by98.49%

Number of package files

9

increased by28.57%

Lines of code

400

increased by145.4%

Dependency changes

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@atoms-studio/nuxt-components@0.0.0-3cf276b(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.8(transitive)

• + Added@babel/core@7.26.9(transitive)

• + Added@babel/generator@7.26.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.9(transitive)

• + Added@babel/standalone@7.26.9(transitive)

• + Added@babel/template@7.26.9(transitive)

• + Added@babel/traverse@7.26.9(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@nodelib/fs.scandir@2.1.5(transitive)

• + Added@nodelib/fs.stat@2.0.5(transitive)

• + Added@nodelib/fs.walk@1.2.8(transitive)

• + Added@nuxt/kit@3.15.4(transitive)

• + Added@nuxt/schema@3.15.4(transitive)

• + Added@sindresorhus/merge-streams@2.3.0(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Addedacorn@8.14.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedc12@2.0.4(transitive)

• + Addedcaniuse-lite@1.0.30001702(transitive)

• + Addedchokidar@4.0.3(transitive)

• + Addedchownr@2.0.0(transitive)

• + Addedcitty@0.1.6(transitive)

• + Addedconfbox@0.1.80.2.1(transitive)

• + Addedconsola@3.4.0(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addeddefu@6.1.4(transitive)

• + Addeddestr@2.0.3(transitive)

• + Addeddotenv@16.4.7(transitive)

• + Addedelectron-to-chromium@1.5.112(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedescape-string-regexp@5.0.0(transitive)

• + Addedestree-walker@3.0.3(transitive)

• + Addedexsolve@1.0.1(transitive)

• + Addedfast-glob@3.3.3(transitive)

• + Addedfastq@1.19.1(transitive)

• + Addedfdir@6.4.3(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedfs-minipass@2.1.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedgiget@1.2.5(transitive)

• + Addedglob-parent@5.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedglobby@14.1.0(transitive)

• + Addedignore@7.0.3(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedjiti@2.4.2(transitive)

• + Addedjs-tokens@4.0.09.0.1(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedklona@2.0.6(transitive)

• + Addedknitwork@1.2.0(transitive)

• + Addedlocal-pkg@1.1.1(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedmerge2@1.4.1(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addedminipass@3.3.65.0.0(transitive)

• + Addedminizlib@2.1.2(transitive)

• + Addedmkdirp@1.0.4(transitive)

• + Addedmlly@1.7.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-fetch-native@1.6.6(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addednypm@0.5.4(transitive)

• + Addedohash@1.1.62.0.11(transitive)

• + Addedpath-type@6.0.0(transitive)

• + Addedpathe@2.0.3(transitive)

• + Addedperfect-debounce@1.0.0(transitive)

• + Addedpicomatch@2.3.14.0.2(transitive)

• + Addedpkg-types@1.3.12.1.0(transitive)

• + Addedquansync@0.2.8(transitive)

• + Addedqueue-microtask@1.2.3(transitive)

• + Addedrc9@2.1.2(transitive)

• + Addedreaddirp@4.1.2(transitive)

• + Addedreusify@1.1.0(transitive)

• + Addedrun-parallel@1.2.0(transitive)

• + Addedscule@1.3.0(transitive)

• + Addedsemver@6.3.17.7.1(transitive)

• + Addedslash@5.1.0(transitive)

• + Addedstd-env@3.8.1(transitive)

• + Addedstrip-literal@3.0.0(transitive)

• + Addedtar@6.2.1(transitive)

• + Addedtinyexec@0.3.2(transitive)

• + Addedtinyglobby@0.2.12(transitive)

• + Addedto-regex-range@5.0.1(transitive)

• + Addedufo@1.5.4(transitive)

• + Addedunctx@2.4.1(transitive)

• + Addedunicorn-magic@0.3.0(transitive)

• + Addedunimport@4.1.2(transitive)

• + Addedunplugin@2.2.0(transitive)

• + Addedunplugin-utils@0.2.4(transitive)

• + Addeduntyped@1.5.2(transitive)

• + Addedupdate-browserslist-db@1.1.3(transitive)

• + Addedwebpack-virtual-modules@0.6.2(transitive)

• + Addedyallist@3.1.14.0.0(transitive)

• - Removed@atoms-studio/nuxt-components@0.0.0-2e73034(transitive)

• - Removed@vue/devtools-api@6.6.4(transitive)

• - Removedvue-router@4.5.0(transitive)

• Updated@atoms-studio/nuxt-components@0.0.0-3cf276b