@atoms-studio/composables - npm Package Compare versions

Comparing version 0.0.0-a5f4c95 to 0.0.0-b412d29

dist/composables.es.js

@@ -1,2 +0,90 @@
-import { computed } from "vue";
+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
+  * (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;
+(function(NavigationType2) {
+  NavigationType2["pop"] = "pop";
+  NavigationType2["push"] = "push";
+})(NavigationType || (NavigationType = {}));
+var NavigationDirection;
+(function(NavigationDirection2) {
+  NavigationDirection2["back"] = "back";
+  NavigationDirection2["forward"] = "forward";
+  NavigationDirection2["unknown"] = "";
+})(NavigationDirection || (NavigationDirection = {}));
+var NavigationFailureType;
+(function(NavigationFailureType2) {
+  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
+  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
+  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
+})(NavigationFailureType || (NavigationFailureType = {}));
+function useRouter() {
+  return inject(routerKey);
+}
+function useRoute() {
+  return inject(routeLocationKey);
+}
+const useRouteState = (configOrKeys, method = "replace") => {
+  const route = useRoute();
+  const router = useRouter();
+  let config;
+  if (Array.isArray(configOrKeys)) {
+    config = configOrKeys.reduce((acc, key) => {
+      acc[key] = {
+        get: (value) => value,
+        set: (value) => value
+      };
+      return acc;
+    }, {});
+  } else {
+    config = configOrKeys;
+  }
+  const stateKeys = Object.keys(config);
+  const state = computed(() => {
+    const result = {};
+    for (const stateKey of stateKeys) {
+      const queryValue = route.query[stateKey];
+      const stateValue = config[stateKey].get(queryValue);
+      result[stateKey] = stateValue;
+    }
+    return result;
+  });
+  const updateState = (partialState) => {
+    const newState = __spreadValues(__spreadValues({}, state.value), partialState);
+    const newQuery = {};
+    for (const stateKey of stateKeys) {
+      const stateValue = newState[stateKey];
+      const queryValue = config[stateKey].set(stateValue);
+      newQuery[stateKey] = queryValue;
+    }
+    return router[method]({ query: __spreadValues(__spreadValues({}, route.query), newQuery) });
+  };
+  return {
+    state,
+    updateState
+  };
+};
 const useURL = (to, base) => {
@@ -32,2 +120,189 @@ if (!base) {
 };
-export { 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 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,1 +0,5 @@
-(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.MyLib={},u.Vue))})(this,function(u,e){"use strict";const s=(i,o)=>{if(!o)throw new Error("Base is required");const r=e.computed(()=>i.value==="#"),t=e.computed(()=>typeof i.value=="string"?new URL(i.value,o):null),l=e.computed(()=>{var n;return((n=t.value)==null?void 0:n.origin)||""}),d=e.computed(()=>{var n;return r.value?"#":((n=t.value)==null?void 0:n.pathname)||""}),c=e.computed(()=>r.value||t.value!==null&&l.value!==o);return{url:t,origin:l,path:d,isExternal:c,isDummy:r}};u.useURL=s,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+(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
+  * (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"}})});

dist/index.d.ts

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

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.0-a5f4c95",
+  "version": "0.0.0-b412d29",
   "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

19573

increased by412.78%

Number of package files

9

increased by50%

Lines of code

415

increased by822.22%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes