@atoms-studio/components - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/components.cjs.js

@@ -413,58 +413,4 @@ 'use strict';
 
-var isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return function (id, style) { return addStyle(id, style); };
-}
-var HEAD;
-var styles = {};
-function addStyle(id, css) {
-    var group = isOldIE ? css.media || 'default' : id;
-    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        var code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                { style.element.setAttribute('media', css.media); }
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            var index = style.ids.size - 1;
-            var textNode = document.createTextNode(code);
-            var nodes = style.element.childNodes;
-            if (nodes[index])
-                { style.element.removeChild(nodes[index]); }
-            if (nodes.length)
-                { style.element.insertBefore(textNode, nodes[index]); }
-            else
-                { style.element.appendChild(textNode); }
-        }
-    }
-}
-
 /* script */
 var __vue_script__ = script;
-
 /* template */
@@ -564,7 +510,3 @@ var __vue_render__ = function() {
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-4dccc7e4_0", { source: "\n.app-picture-wrapper {\n  position: relative;\n}\n.app-picture-wrapper-element {\n  opacity: 0;\n  transition: opacity 0.3s ease-in;\n}\n.app-picture-wrapper-element.loaded {\n  opacity: 1;\n}\n.app-picture-wrapper-element-img {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n.app-picture-wrapper-placeholder {\n  position: relative;\n  transition: opacity 0.3s ease-in;\n}\n.app-picture-wrapper-placeholder.loaded {\n  opacity: 0;\n}\n.app-picture-wrapper-placeholder-svg {\n  width: 100%;\n  height: auto;\n  z-index: 0;\n  pointer-events: none;\n}\n.app-picture-wrapper-placeholder-base64 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.app-picture-wrapper-noscript {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n.app-picture picture img {\n  max-width: 100%;\n  overflow: hidden;\n  transition: opacity 0.3s ease-in;\n}\n", map: {"version":3,"sources":["/Users/rigo/dev/blueprint/packages/components/src/AppPicture.vue"],"names":[],"mappings":";AAsUA;EACA,kBAAA;AACA;AAEA;EACA,UAAA;EACA,gCAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gCAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,oBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,gCAAA;AACA","file":"AppPicture.vue","sourcesContent":["<template>\n  <div class=\"app-picture\">\n    <div class=\"app-picture-wrapper\">\n      <picture\n        :class=\"{ loaded: imgLoaded }\"\n        class=\"app-picture-wrapper-element\"\n      >\n        <source\n          v-if=\"srcWebP\"\n          ref=\"webpsrcsetString\"\n          :data-srcset=\"webpsrcsetString\"\n          :sizes=\"sizesString\"\n          type=\"image/webp\"\n        />\n        <source\n          ref=\"srcsetString\"\n          :data-srcset=\"srcsetString\"\n          :sizes=\"sizesString\"\n        />\n        <img\n          :data-src=\"srcDefault\"\n          :alt=\"altText\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          draggable=\"false\"\n          class=\"app-picture-wrapper-element-img lazyload\"\n          :style=\"setFocalPoint\"\n          @load=\"imageIsLoaded\"\n        />\n      </picture>\n      <div\n        :class=\"{ loaded: imgLoaded }\"\n        class=\"app-picture-wrapper-placeholder\"\n      >\n        <svg\n          class=\"app-picture-wrapper-placeholder-svg\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          :style=\"{ background: loadingColor }\"\n        />\n        <img :src=\"base64\" class=\"app-picture-wrapper-placeholder-base64\" />\n      </div>\n      <noscript inline-template>\n        <img\n          :src=\"srcDefault\"\n          :alt=\"altText\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          class=\"app-picture-wrapper-noscript\"\n        />\n      </noscript>\n    </div>\n  </div>\n</template>\n\n<script>\nconst AppPictureProps = {\n  image: {\n    type: Object,\n    required: true,\n    validator: (obj) => {\n      if (\n        obj &&\n        obj.url &&\n        obj.url.length &&\n        obj.width &&\n        Number.isInteger(obj.width) &&\n        obj.height &&\n        Number.isInteger(obj.height)\n      ) {\n        return true\n      } else {\n        return false\n      }\n    },\n  },\n  mode: {\n    type: String,\n    required: false,\n    default: 'fill',\n  },\n  loadingColor: {\n    type: String,\n    required: false,\n    default: 'transparent',\n  },\n  altText: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  base64: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  activateFocalPoint: {\n    type: Boolean,\n    default: true,\n  },\n  focalPoint: {\n    type: Object,\n    required: false,\n    default: () => {},\n    validator: (obj) => {\n      if (obj) {\n        if (\n          obj.x &&\n          Number.isInteger(obj.x) &&\n          obj.y &&\n          Number.isInteger(obj.y)\n        ) {\n          return true\n        } else {\n          return false\n        }\n      }\n      return true\n    },\n  },\n  srcSetBreakpoints: {\n    type: Array,\n    required: false,\n    default: () => [440, 620, 960, 1300, 1460, 1940, 2600, 3800],\n  },\n  sizesString: {\n    type: String,\n    required: false,\n    default: '100vw',\n  },\n  quality: {\n    type: Number,\n    required: false,\n    default: 78,\n  },\n  aspectRatio: {\n    type: String,\n    required: false,\n    default: '',\n  },\n}\n\nconst resizeImage = (url, options = {}) => {\n  const config = Object.assign(\n    {\n      format: 'jpg',\n      width: 0,\n      height: 0,\n      mode: 'fill',\n      quality: 98,\n    },\n    options,\n  )\n\n  // Contentful does not allow dimensions bigger than 4000\n  const { width, height } = limitImageDimensions(\n    4000,\n    config.width,\n    config.height,\n  )\n\n  let resizeParams = ''\n  if (isCtfAsset(url)) {\n    resizeParams = '?'\n    if (width && height) {\n      resizeParams += `w=${width}&h=${height}&fit=${config.mode}&`\n    }\n\n    resizeParams += `q=${config.quality}&fm=${config.format}`\n  } else if (config.format !== 'jpg') {\n    return ''\n  }\n\n  return `${url}${resizeParams}`\n}\n\nconst limitImageDimensions = (max, width = 0, height = 0) => {\n  if (width > max || height > max) {\n    const ratio = width / height\n\n    const biggerDimension = Math.max(width, height)\n\n    if (biggerDimension === width) {\n      width = max\n      height = Math.round(width / ratio)\n    } else {\n      height = max\n      width = Math.round(height * ratio)\n    }\n  }\n\n  return {\n    width,\n    height,\n  }\n}\n\nconst isCtfAsset = (url) => url && url.includes('ctfassets')\n\nexport default {\n  props: AppPictureProps,\n\n  data() {\n    return {\n      imgLoaded: false,\n    }\n  },\n\n  computed: {\n    imageUrl() {\n      return this.image\n        ? this.image.url\n        : this.image && this.image.file\n        ? this.image.file.url\n        : ''\n    },\n    imageWidth() {\n      return this.image\n        ? this.image.width\n        : this.image && this.image.file\n        ? this.image.file.details.image.width\n        : ''\n    },\n    imageHeight() {\n      return this.image\n        ? this.image.height\n        : this.image && this.image.file\n        ? this.image.file.details.image.height\n        : ''\n    },\n    srcWebP() {\n      return resizeImage(this.imageUrl, {\n        width: this.imageWidth,\n        height: this.imageHeight,\n        mode: this.mode,\n        format: 'webp',\n        quality: this.quality,\n      })\n    },\n    srcDefault() {\n      return resizeImage(this.imageUrl, {\n        width: this.imageWidth,\n        height: this.imageHeight,\n        mode: this.mode,\n        format: 'jpg',\n        quality: this.quality,\n      })\n    },\n    safeDimensions() {\n      return limitImageDimensions(500, this.imageWidth, this.imageHeight)\n    },\n    srcsetString() {\n      let srcset = ''\n\n      if (this.srcSetBreakpoints.length) {\n        for (let i = 0; i < this.srcSetBreakpoints.length; i++) {\n          srcset += `${this.createCfUrlImage(\n            this.srcSetBreakpoints[i],\n            this.imageUrl,\n          )} ${this.srcSetBreakpoints[i]}w, \\n`\n        }\n        return srcset\n      }\n\n      return ''\n    },\n    webpsrcsetString() {\n      let srcset = ''\n\n      if (this.srcSetBreakpoints.length) {\n        for (let i = 0; i < this.srcSetBreakpoints.length; i++) {\n          srcset += `${this.createCfUrlImage(\n            this.srcSetBreakpoints[i],\n            this.imageUrl,\n            'webp',\n          )} ${this.srcSetBreakpoints[i]}w, \\n`\n        }\n        return srcset\n      }\n\n      return ''\n    },\n    setFocalPoint() {\n      if (this.activateFocalPoint && this.image && this.focalPoint) {\n        const focalX = (this.focalPoint.x * 100) / this.imageWidth\n        const focalY = (this.focalPoint.y * 100) / this.imageHeight\n\n        return { 'object-position': `${focalX}% ${focalY}%` }\n      }\n      return ''\n    },\n  },\n\n  methods: {\n    createCfUrlImage(breakPoint, url, format = 'jpg') {\n      let height = ''\n      if (this.aspectRatio) {\n        const formattedRatio = this.aspectRatio.replace(/ /g, '')\n        this.aspectRatioW = parseInt(formattedRatio.split('/')[0])\n        this.aspectRatioH = parseInt(formattedRatio.split('/')[1])\n\n        height = Math.round(\n          (this.aspectRatioH * breakPoint) / this.aspectRatioW,\n        )\n      }\n\n      let resizeParams = ''\n      if (isCtfAsset(url)) {\n        resizeParams = '?'\n        resizeParams += `w=${breakPoint}&`\n        resizeParams +=\n          this.aspectRatio && height && height < 4000 ? `h=${height}&` : ''\n        resizeParams += this.mode ? `fit=${this.mode}&` : ''\n        resizeParams += `q=${this.quality}&fm=${format}`\n      }\n\n      return `${url}${resizeParams}`\n    },\n    imageIsLoaded() {\n      this.imgLoaded = true\n    },\n  },\n}\n</script>\n\n<style>\n.app-picture-wrapper {\n  position: relative;\n}\n\n.app-picture-wrapper-element {\n  opacity: 0;\n  transition: opacity 0.3s ease-in;\n}\n\n.app-picture-wrapper-element.loaded {\n  opacity: 1;\n}\n\n.app-picture-wrapper-element-img {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-placeholder {\n  position: relative;\n  transition: opacity 0.3s ease-in;\n}\n\n.app-picture-wrapper-placeholder.loaded {\n  opacity: 0;\n}\n\n.app-picture-wrapper-placeholder-svg {\n  width: 100%;\n  height: auto;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-placeholder-base64 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-noscript {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.app-picture picture img {\n  max-width: 100%;\n  overflow: hidden;\n  transition: opacity 0.3s ease-in;\n}\n</style>\n"]}, media: undefined });
-
-  };
+  var __vue_inject_styles__ = undefined;
   /* scoped */
@@ -576,2 +518,4 @@ var __vue_scope_id__ = undefined;
   var __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
@@ -591,11 +535,7 @@
     false,
-    createInjector,
     undefined,
+    undefined,
     undefined
   );
 
-if (typeof window === 'undefined') {
-  global.btoa = function (str) { return Buffer.from(str).toString('base64'); };
-}
-
 exports.AppPicture = __vue_component__;

dist/components.esm.js

@@ -409,58 +409,4 @@ //
 
-var isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return function (id, style) { return addStyle(id, style); };
-}
-var HEAD;
-var styles = {};
-function addStyle(id, css) {
-    var group = isOldIE ? css.media || 'default' : id;
-    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        var code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                { style.element.setAttribute('media', css.media); }
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            var index = style.ids.size - 1;
-            var textNode = document.createTextNode(code);
-            var nodes = style.element.childNodes;
-            if (nodes[index])
-                { style.element.removeChild(nodes[index]); }
-            if (nodes.length)
-                { style.element.insertBefore(textNode, nodes[index]); }
-            else
-                { style.element.appendChild(textNode); }
-        }
-    }
-}
-
 /* script */
 var __vue_script__ = script;
-
 /* template */
@@ -560,7 +506,3 @@ var __vue_render__ = function() {
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-4dccc7e4_0", { source: "\n.app-picture-wrapper {\n  position: relative;\n}\n.app-picture-wrapper-element {\n  opacity: 0;\n  transition: opacity 0.3s ease-in;\n}\n.app-picture-wrapper-element.loaded {\n  opacity: 1;\n}\n.app-picture-wrapper-element-img {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n.app-picture-wrapper-placeholder {\n  position: relative;\n  transition: opacity 0.3s ease-in;\n}\n.app-picture-wrapper-placeholder.loaded {\n  opacity: 0;\n}\n.app-picture-wrapper-placeholder-svg {\n  width: 100%;\n  height: auto;\n  z-index: 0;\n  pointer-events: none;\n}\n.app-picture-wrapper-placeholder-base64 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.app-picture-wrapper-noscript {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n.app-picture picture img {\n  max-width: 100%;\n  overflow: hidden;\n  transition: opacity 0.3s ease-in;\n}\n", map: {"version":3,"sources":["/Users/rigo/dev/blueprint/packages/components/src/AppPicture.vue"],"names":[],"mappings":";AAsUA;EACA,kBAAA;AACA;AAEA;EACA,UAAA;EACA,gCAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gCAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;AACA;AAEA;EACA,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,oBAAA;AACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,gCAAA;AACA","file":"AppPicture.vue","sourcesContent":["<template>\n  <div class=\"app-picture\">\n    <div class=\"app-picture-wrapper\">\n      <picture\n        :class=\"{ loaded: imgLoaded }\"\n        class=\"app-picture-wrapper-element\"\n      >\n        <source\n          v-if=\"srcWebP\"\n          ref=\"webpsrcsetString\"\n          :data-srcset=\"webpsrcsetString\"\n          :sizes=\"sizesString\"\n          type=\"image/webp\"\n        />\n        <source\n          ref=\"srcsetString\"\n          :data-srcset=\"srcsetString\"\n          :sizes=\"sizesString\"\n        />\n        <img\n          :data-src=\"srcDefault\"\n          :alt=\"altText\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          draggable=\"false\"\n          class=\"app-picture-wrapper-element-img lazyload\"\n          :style=\"setFocalPoint\"\n          @load=\"imageIsLoaded\"\n        />\n      </picture>\n      <div\n        :class=\"{ loaded: imgLoaded }\"\n        class=\"app-picture-wrapper-placeholder\"\n      >\n        <svg\n          class=\"app-picture-wrapper-placeholder-svg\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          :style=\"{ background: loadingColor }\"\n        />\n        <img :src=\"base64\" class=\"app-picture-wrapper-placeholder-base64\" />\n      </div>\n      <noscript inline-template>\n        <img\n          :src=\"srcDefault\"\n          :alt=\"altText\"\n          :width=\"safeDimensions.width\"\n          :height=\"safeDimensions.height\"\n          class=\"app-picture-wrapper-noscript\"\n        />\n      </noscript>\n    </div>\n  </div>\n</template>\n\n<script>\nconst AppPictureProps = {\n  image: {\n    type: Object,\n    required: true,\n    validator: (obj) => {\n      if (\n        obj &&\n        obj.url &&\n        obj.url.length &&\n        obj.width &&\n        Number.isInteger(obj.width) &&\n        obj.height &&\n        Number.isInteger(obj.height)\n      ) {\n        return true\n      } else {\n        return false\n      }\n    },\n  },\n  mode: {\n    type: String,\n    required: false,\n    default: 'fill',\n  },\n  loadingColor: {\n    type: String,\n    required: false,\n    default: 'transparent',\n  },\n  altText: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  base64: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  activateFocalPoint: {\n    type: Boolean,\n    default: true,\n  },\n  focalPoint: {\n    type: Object,\n    required: false,\n    default: () => {},\n    validator: (obj) => {\n      if (obj) {\n        if (\n          obj.x &&\n          Number.isInteger(obj.x) &&\n          obj.y &&\n          Number.isInteger(obj.y)\n        ) {\n          return true\n        } else {\n          return false\n        }\n      }\n      return true\n    },\n  },\n  srcSetBreakpoints: {\n    type: Array,\n    required: false,\n    default: () => [440, 620, 960, 1300, 1460, 1940, 2600, 3800],\n  },\n  sizesString: {\n    type: String,\n    required: false,\n    default: '100vw',\n  },\n  quality: {\n    type: Number,\n    required: false,\n    default: 78,\n  },\n  aspectRatio: {\n    type: String,\n    required: false,\n    default: '',\n  },\n}\n\nconst resizeImage = (url, options = {}) => {\n  const config = Object.assign(\n    {\n      format: 'jpg',\n      width: 0,\n      height: 0,\n      mode: 'fill',\n      quality: 98,\n    },\n    options,\n  )\n\n  // Contentful does not allow dimensions bigger than 4000\n  const { width, height } = limitImageDimensions(\n    4000,\n    config.width,\n    config.height,\n  )\n\n  let resizeParams = ''\n  if (isCtfAsset(url)) {\n    resizeParams = '?'\n    if (width && height) {\n      resizeParams += `w=${width}&h=${height}&fit=${config.mode}&`\n    }\n\n    resizeParams += `q=${config.quality}&fm=${config.format}`\n  } else if (config.format !== 'jpg') {\n    return ''\n  }\n\n  return `${url}${resizeParams}`\n}\n\nconst limitImageDimensions = (max, width = 0, height = 0) => {\n  if (width > max || height > max) {\n    const ratio = width / height\n\n    const biggerDimension = Math.max(width, height)\n\n    if (biggerDimension === width) {\n      width = max\n      height = Math.round(width / ratio)\n    } else {\n      height = max\n      width = Math.round(height * ratio)\n    }\n  }\n\n  return {\n    width,\n    height,\n  }\n}\n\nconst isCtfAsset = (url) => url && url.includes('ctfassets')\n\nexport default {\n  props: AppPictureProps,\n\n  data() {\n    return {\n      imgLoaded: false,\n    }\n  },\n\n  computed: {\n    imageUrl() {\n      return this.image\n        ? this.image.url\n        : this.image && this.image.file\n        ? this.image.file.url\n        : ''\n    },\n    imageWidth() {\n      return this.image\n        ? this.image.width\n        : this.image && this.image.file\n        ? this.image.file.details.image.width\n        : ''\n    },\n    imageHeight() {\n      return this.image\n        ? this.image.height\n        : this.image && this.image.file\n        ? this.image.file.details.image.height\n        : ''\n    },\n    srcWebP() {\n      return resizeImage(this.imageUrl, {\n        width: this.imageWidth,\n        height: this.imageHeight,\n        mode: this.mode,\n        format: 'webp',\n        quality: this.quality,\n      })\n    },\n    srcDefault() {\n      return resizeImage(this.imageUrl, {\n        width: this.imageWidth,\n        height: this.imageHeight,\n        mode: this.mode,\n        format: 'jpg',\n        quality: this.quality,\n      })\n    },\n    safeDimensions() {\n      return limitImageDimensions(500, this.imageWidth, this.imageHeight)\n    },\n    srcsetString() {\n      let srcset = ''\n\n      if (this.srcSetBreakpoints.length) {\n        for (let i = 0; i < this.srcSetBreakpoints.length; i++) {\n          srcset += `${this.createCfUrlImage(\n            this.srcSetBreakpoints[i],\n            this.imageUrl,\n          )} ${this.srcSetBreakpoints[i]}w, \\n`\n        }\n        return srcset\n      }\n\n      return ''\n    },\n    webpsrcsetString() {\n      let srcset = ''\n\n      if (this.srcSetBreakpoints.length) {\n        for (let i = 0; i < this.srcSetBreakpoints.length; i++) {\n          srcset += `${this.createCfUrlImage(\n            this.srcSetBreakpoints[i],\n            this.imageUrl,\n            'webp',\n          )} ${this.srcSetBreakpoints[i]}w, \\n`\n        }\n        return srcset\n      }\n\n      return ''\n    },\n    setFocalPoint() {\n      if (this.activateFocalPoint && this.image && this.focalPoint) {\n        const focalX = (this.focalPoint.x * 100) / this.imageWidth\n        const focalY = (this.focalPoint.y * 100) / this.imageHeight\n\n        return { 'object-position': `${focalX}% ${focalY}%` }\n      }\n      return ''\n    },\n  },\n\n  methods: {\n    createCfUrlImage(breakPoint, url, format = 'jpg') {\n      let height = ''\n      if (this.aspectRatio) {\n        const formattedRatio = this.aspectRatio.replace(/ /g, '')\n        this.aspectRatioW = parseInt(formattedRatio.split('/')[0])\n        this.aspectRatioH = parseInt(formattedRatio.split('/')[1])\n\n        height = Math.round(\n          (this.aspectRatioH * breakPoint) / this.aspectRatioW,\n        )\n      }\n\n      let resizeParams = ''\n      if (isCtfAsset(url)) {\n        resizeParams = '?'\n        resizeParams += `w=${breakPoint}&`\n        resizeParams +=\n          this.aspectRatio && height && height < 4000 ? `h=${height}&` : ''\n        resizeParams += this.mode ? `fit=${this.mode}&` : ''\n        resizeParams += `q=${this.quality}&fm=${format}`\n      }\n\n      return `${url}${resizeParams}`\n    },\n    imageIsLoaded() {\n      this.imgLoaded = true\n    },\n  },\n}\n</script>\n\n<style>\n.app-picture-wrapper {\n  position: relative;\n}\n\n.app-picture-wrapper-element {\n  opacity: 0;\n  transition: opacity 0.3s ease-in;\n}\n\n.app-picture-wrapper-element.loaded {\n  opacity: 1;\n}\n\n.app-picture-wrapper-element-img {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-placeholder {\n  position: relative;\n  transition: opacity 0.3s ease-in;\n}\n\n.app-picture-wrapper-placeholder.loaded {\n  opacity: 0;\n}\n\n.app-picture-wrapper-placeholder-svg {\n  width: 100%;\n  height: auto;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-placeholder-base64 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.app-picture-wrapper-noscript {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.app-picture picture img {\n  max-width: 100%;\n  overflow: hidden;\n  transition: opacity 0.3s ease-in;\n}\n</style>\n"]}, media: undefined });
-
-  };
+  var __vue_inject_styles__ = undefined;
   /* scoped */
@@ -572,2 +514,4 @@ var __vue_scope_id__ = undefined;
   var __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
@@ -587,11 +531,7 @@
     false,
-    createInjector,
     undefined,
+    undefined,
     undefined
   );
 
-if (typeof window === 'undefined') {
-  global.btoa = function (str) { return Buffer.from(str).toString('base64'); };
-}
-
 export { __vue_component__ as AppPicture };

package.json

 {
   "name": "@atoms-studio/components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/atoms-studio/blueprint#readme",

No alert changes

Improved metrics

Number of package files

5

increased by25%

Worsened metrics

Total package byte prevSize

28355

decreased by-46.84%

Lines of code

998

decreased by-15.14%

No dependency changes