@atoms-studio/components - npm Package Compare versions

Comparing version 0.0.0-a5f4c95 to 0.0.0-a8bc262

dist/AppLink.d.ts

@@ -26,3 +26,3 @@ import type { PropType } from 'vue';
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     to: {
@@ -29,0 +29,0 @@ type: PropType<RouteLocationRaw>;

dist/components.es.js

@@ -1,19 +0,3 @@
-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 { defineComponent, toRefs, inject, h, resolveComponent } from "vue";
-import { useURL } from "@atoms-studio/composables";
+import { defineComponent, toRefs, inject, h, resolveComponent, ref, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, withDirectives, normalizeStyle } from "vue";
+import { useURL, usePicture, useFocalPoint } from "@atoms-studio/composables";
 const INJECTION_KEY = "componentsConfig";
@@ -52,18 +36,235 @@ const defaultConfig = {
     return () => {
-      return isExternal.value && !props.custom ? h("a", {
-        class: "app-link",
-        href: props.disabled ? void 0 : props.to,
-        target: props.forceSelf ? "_self" : "_blank",
-        rel: "noopener noreferrer"
-      }, slots.default && slots.default()) : h(resolveComponent(props.linkComponent), __spreadValues({
-        class: "app-link",
-        to: props.to,
-        custom: props.custom
-      }, props.disabled ? { onClickCapture: (e) => e.preventDefault() } : {}), () => slots.default && slots.default());
+      return isExternal.value && !props.custom ? h(
+        "a",
+        {
+          class: "app-link",
+          href: props.disabled ? void 0 : props.to,
+          target: props.forceSelf ? "_self" : "_blank",
+          rel: "noopener noreferrer"
+        },
+        slots.default && slots.default()
+      ) : h(
+        resolveComponent(props.linkComponent),
+        {
+          class: "app-link",
+          to: props.to,
+          custom: props.custom,
+          ...props.disabled ? { onClickCapture: (e) => e.preventDefault() } : {}
+        },
+        () => slots.default && slots.default()
+      );
     };
   }
 });
+var AppPicture_vue_vue_type_style_index_0_lang = "";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main = defineComponent({
+  props: {
+    image: {
+      type: Object,
+      default: () => ({})
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: "fill"
+    },
+    loadingColor: {
+      type: String,
+      required: false,
+      default: "transparent"
+    },
+    altText: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    base64: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    activateFocalPoint: {
+      type: Boolean,
+      default: true
+    },
+    focalPoint: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {};
+      }
+    },
+    quality: {
+      type: Number,
+      required: false,
+      default: 78
+    },
+    preload: {
+      type: Boolean,
+      default: false
+    },
+    screens: {
+      type: Object,
+      default: () => ({
+        xs: 320,
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        xxl: 1536,
+        "2xl": 1536
+      })
+    },
+    sizes: {
+      type: String,
+      default: "xs:320px sm:640px md:768px lg:1024px xl:1280px xxl:1536px 2xl:1536px"
+    },
+    format: {
+      type: String,
+      default: "webp"
+    },
+    legacyFormat: {
+      type: String,
+      default: ""
+    },
+    datoFocalPoint: {
+      type: Object,
+      required: false,
+      default: () => ({ x: 0.5, y: 0.5 })
+    },
+    datoAutoFormat: {
+      type: Boolean,
+      default: false
+    }
+  },
+  directives: {
+    completed: {
+      mounted(el) {
+        if (el && el.complete) {
+          el.dispatchEvent(new CustomEvent("completed"));
+        }
+      }
+    }
+  },
+  setup(props) {
+    const imgLoaded = ref(false);
+    let setFocalPoint = ref("");
+    const {
+      imageUrl,
+      imageWidth,
+      imageHeight,
+      originalFormat,
+      isTransparent,
+      nFormat,
+      nLegacyFormat,
+      safeDimensions,
+      nSources
+    } = usePicture(
+      props.image,
+      props.format,
+      props.legacyFormat,
+      props.mode,
+      props.quality,
+      props.sizes,
+      props.screens,
+      props.datoFocalPoint,
+      props.datoAutoFormat
+    );
+    if (props.activateFocalPoint && safeDimensions.value && props.focalPoint && !props.datoFocalPoint) {
+      const { focalPoint } = useFocalPoint(
+        props.focalPoint.x,
+        props.focalPoint.y,
+        safeDimensions.value.width,
+        safeDimensions.value.height
+      );
+      setFocalPoint.value = focalPoint.value;
+    }
+    const handleLoaded = () => {
+      imgLoaded.value = true;
+    };
+    const handleCompleted = () => {
+      imgLoaded.value = true;
+    };
+    return {
+      imgLoaded,
+      imageUrl,
+      imageWidth,
+      imageHeight,
+      safeDimensions,
+      setFocalPoint,
+      originalFormat,
+      isTransparent,
+      nFormat,
+      nLegacyFormat,
+      nSources,
+      handleLoaded,
+      handleCompleted
+    };
+  }
+});
+const _hoisted_1 = { class: "app-picture" };
+const _hoisted_2 = { class: "app-picture-wrapper" };
+const _hoisted_3 = ["type", "srcset", "sizes"];
+const _hoisted_4 = ["src", "srcset", "sizes", "alt", "width", "height"];
+const _hoisted_5 = ["width", "height"];
+const _hoisted_6 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_completed = resolveDirective("completed");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      (openBlock(), createElementBlock("picture", {
+        class: normalizeClass([{ loaded: _ctx.imgLoaded }, "app-picture-wrapper-element"]),
+        key: _ctx.nSources[0].src
+      }, [
+        _ctx.nSources[1] ? (openBlock(), createElementBlock("source", {
+          key: 0,
+          type: _ctx.nSources[1].type,
+          srcset: _ctx.nSources[1].srcset,
+          sizes: _ctx.nSources[1].sizes
+        }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+        withDirectives(createElementVNode("img", {
+          src: _ctx.nSources[0].src,
+          srcset: _ctx.nSources[0].srcset,
+          sizes: _ctx.nSources[0].sizes,
+          alt: _ctx.altText,
+          width: _ctx.safeDimensions.width,
+          height: _ctx.safeDimensions.height,
+          class: "app-picture-wrapper-element-img",
+          style: normalizeStyle(_ctx.setFocalPoint),
+          loading: "lazy",
+          onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoaded && _ctx.handleLoaded(...args)),
+          onCompleted: _cache[1] || (_cache[1] = (...args) => _ctx.handleCompleted && _ctx.handleCompleted(...args))
+        }, null, 44, _hoisted_4), [
+          [_directive_completed]
+        ])
+      ], 2)),
+      createElementVNode("div", {
+        class: normalizeClass([{ loaded: _ctx.imgLoaded }, "app-picture-wrapper-placeholder"])
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          class: "app-picture-wrapper-placeholder-svg",
+          width: _ctx.safeDimensions.width,
+          height: _ctx.safeDimensions.height,
+          style: normalizeStyle({ background: _ctx.loadingColor })
+        }, null, 12, _hoisted_5)),
+        createElementVNode("img", {
+          src: _ctx.base64,
+          class: "app-picture-wrapper-placeholder-base64"
+        }, null, 8, _hoisted_6)
+      ], 2)
+    ])
+  ]);
+}
+var AppPicture = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 const install = (app, options) => {
   app.provide(INJECTION_KEY, options);
   app.component("AppLink", AppLink);
+  app.component("AppPicture", AppPicture);
 };
@@ -73,2 +274,2 @@ var index = {
 };
-export { AppLink, index as default };
+export { AppLink, AppPicture, index as default };

dist/components.umd.js

@@ -1,1 +0,1 @@
-var k=Object.defineProperty;var f=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var s=(t,e,n)=>e in t?k(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,u=(t,e)=>{for(var n in e||(e={}))y.call(e,n)&&s(t,n,e[n]);if(f)for(var n of f(e))C.call(e,n)&&s(t,n,e[n]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@atoms-studio/composables")):typeof define=="function"&&define.amd?define(["exports","vue","@atoms-studio/composables"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.components={},t.Vue,t.composables))})(this,function(t,e,n){"use strict";const l="componentsConfig",d={baseUrl:""};var a=e.defineComponent({name:"AppLink",props:{to:{type:[String,Object],required:!0},disabled:{type:Boolean,default:!1},forceSelf:{type:Boolean,default:!1},linkComponent:{type:String,default:"RouterLink"},custom:{type:Boolean,default:!1}},setup(o,{slots:i}){const c=e.toRefs(o),p=e.inject(l,d),{isExternal:m}=n.useURL(c.to,p.baseUrl);return()=>m.value&&!o.custom?e.h("a",{class:"app-link",href:o.disabled?void 0:o.to,target:o.forceSelf?"_self":"_blank",rel:"noopener noreferrer"},i.default&&i.default()):e.h(e.resolveComponent(o.linkComponent),u({class:"app-link",to:o.to,custom:o.custom},o.disabled?{onClickCapture:b=>b.preventDefault()}:{}),()=>i.default&&i.default())}}),r={install:(o,i)=>{o.provide(l,i),o.component("AppLink",a)}};t.AppLink=a,t.default=r,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@atoms-studio/composables")):typeof define=="function"&&define.amd?define(["exports","vue","@atoms-studio/composables"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.components={},o.Vue,o.composables))})(this,function(o,t,c){"use strict";const p="componentsConfig",g={baseUrl:""};var f=t.defineComponent({name:"AppLink",props:{to:{type:[String,Object],required:!0},disabled:{type:Boolean,default:!1},forceSelf:{type:Boolean,default:!1},linkComponent:{type:String,default:"RouterLink"},custom:{type:Boolean,default:!1}},setup(e,{slots:a}){const n=t.toRefs(e),l=t.inject(p,g),{isExternal:i}=c.useURL(n.to,l.baseUrl);return()=>i.value&&!e.custom?t.h("a",{class:"app-link",href:e.disabled?void 0:e.to,target:e.forceSelf?"_self":"_blank",rel:"noopener noreferrer"},a.default&&a.default()):t.h(t.resolveComponent(e.linkComponent),{class:"app-link",to:e.to,custom:e.custom,...e.disabled?{onClickCapture:r=>r.preventDefault()}:{}},()=>a.default&&a.default())}}),q="",h=(e,a)=>{const n=e.__vccOpts||e;for(const[l,i]of a)n[l]=i;return n};const y=t.defineComponent({props:{image:{type:Object,default:()=>({})},mode:{type:String,required:!1,default:"fill"},loadingColor:{type:String,required:!1,default:"transparent"},altText:{type:String,required:!1,default:""},base64:{type:String,required:!1,default:""},activateFocalPoint:{type:Boolean,default:!0},focalPoint:{type:Object,required:!1,default:()=>({})},quality:{type:Number,required:!1,default:78},preload:{type:Boolean,default:!1},screens:{type:Object,default:()=>({xs:320,sm:640,md:768,lg:1024,xl:1280,xxl:1536,"2xl":1536})},sizes:{type:String,default:"xs:320px sm:640px md:768px lg:1024px xl:1280px xxl:1536px 2xl:1536px"},format:{type:String,default:"webp"},legacyFormat:{type:String,default:""},datoFocalPoint:{type:Object,required:!1,default:()=>({x:.5,y:.5})},datoAutoFormat:{type:Boolean,default:!1}},directives:{completed:{mounted(e){e&&e.complete&&e.dispatchEvent(new CustomEvent("completed"))}}},setup(e){const a=t.ref(!1);let n=t.ref("");const{imageUrl:l,imageWidth:i,imageHeight:r,originalFormat:u,isTransparent:s,nFormat:B,nLegacyFormat:v,safeDimensions:d,nSources:z}=c.usePicture(e.image,e.format,e.legacyFormat,e.mode,e.quality,e.sizes,e.screens,e.datoFocalPoint,e.datoAutoFormat);if(e.activateFocalPoint&&d.value&&e.focalPoint&&!e.datoFocalPoint){const{focalPoint:E}=c.useFocalPoint(e.focalPoint.x,e.focalPoint.y,d.value.width,d.value.height);n.value=E.value}return{imgLoaded:a,imageUrl:l,imageWidth:i,imageHeight:r,safeDimensions:d,setFocalPoint:n,originalFormat:u,isTransparent:s,nFormat:B,nLegacyFormat:v,nSources:z,handleLoaded:()=>{a.value=!0},handleCompleted:()=>{a.value=!0}}}}),S={class:"app-picture"},k={class:"app-picture-wrapper"},C=["type","srcset","sizes"],P=["src","srcset","sizes","alt","width","height"],b=["width","height"],w=["src"];function F(e,a,n,l,i,r){const u=t.resolveDirective("completed");return t.openBlock(),t.createElementBlock("div",S,[t.createElementVNode("div",k,[(t.openBlock(),t.createElementBlock("picture",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-element"]),key:e.nSources[0].src},[e.nSources[1]?(t.openBlock(),t.createElementBlock("source",{key:0,type:e.nSources[1].type,srcset:e.nSources[1].srcset,sizes:e.nSources[1].sizes},null,8,C)):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("img",{src:e.nSources[0].src,srcset:e.nSources[0].srcset,sizes:e.nSources[0].sizes,alt:e.altText,width:e.safeDimensions.width,height:e.safeDimensions.height,class:"app-picture-wrapper-element-img",style:t.normalizeStyle(e.setFocalPoint),loading:"lazy",onLoad:a[0]||(a[0]=(...s)=>e.handleLoaded&&e.handleLoaded(...s)),onCompleted:a[1]||(a[1]=(...s)=>e.handleCompleted&&e.handleCompleted(...s))},null,44,P),[[u]])],2)),t.createElementVNode("div",{class:t.normalizeClass([{loaded:e.imgLoaded},"app-picture-wrapper-placeholder"])},[(t.openBlock(),t.createElementBlock("svg",{class:"app-picture-wrapper-placeholder-svg",width:e.safeDimensions.width,height:e.safeDimensions.height,style:t.normalizeStyle({background:e.loadingColor})},null,12,b)),t.createElementVNode("img",{src:e.base64,class:"app-picture-wrapper-placeholder-base64"},null,8,w)],2)])])}var m=h(y,[["render",F]]),L={install:(e,a)=>{e.provide(p,a),e.component("AppLink",f),e.component("AppPicture",m)}};o.AppLink=f,o.AppPicture=m,o.default=L,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/index.d.ts

 import AppLink from './AppLink';
-export { AppLink };
+import AppPicture from './AppPicture.vue';
+export { AppLink, AppPicture };
 declare const _default: {
@@ -4,0 +5,0 @@ install: (app: import("vue").App<any>, options: import("./config").ComponentsConfig) => void;

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.0-a5f4c95",
+  "version": "0.0.0-a8bc262",
   "license": "MIT",
@@ -19,4 +19,9 @@ "files": [
       "require": "./dist/components.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
+  "style": "./dist/style.css",
   "engines": {
@@ -29,3 +34,3 @@ "node": ">=16.0.0"
     "build": "vue-tsc --noEmit && vite build && yarn build:declarations",
-    "build:declarations": "tsc src/index.ts --declaration --emitDeclarationOnly --outDir ./dist",
+    "build:declarations": "vue-tsc src/index.ts --declaration --emitDeclarationOnly --outDir ./dist",
     "test": "vitest --environment jsdom",
@@ -47,4 +52,5 @@ "test:ci": "vitest run --environment jsdom",
   "dependencies": {
-    "@atoms-studio/composables": "0.0.0-a5f4c95"
+    "@atoms-studio/composables": "0.0.0-a8bc262",
+    "@atoms-studio/nuxt-components": "0.0.0-a8bc262"
   }
 }

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

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

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

Improved metrics

Total package byte prevSize

22778

increased by172.14%

Number of package files

10

increased by25%

Lines of code

571

increased by291.1%

Worsened metrics

Dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@atoms-studio/nuxt-components@0.0.0-a8bc262

• + Added@atoms-studio/composables@0.0.0-a8bc262(transitive)

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

• + Added@headlessui/vue@1.7.23(transitive)

• + Added@stencil/core@2.5.2(transitive)

• + Added@tanstack/virtual-core@3.11.2(transitive)

• + Added@tanstack/vue-virtual@3.11.2(transitive)

• + Added@types/fscreen@1.0.4(transitive)

• + Added@vime/core@5.4.1(transitive)

• + Added@vime/vue-next@5.4.1(transitive)

• + Addeddom7@4.0.6(transitive)

• + Addedfscreen@1.2.0(transitive)

• + Addedmitt@3.0.1(transitive)

• + Addedssr-window@4.0.2(transitive)

• + Addedstencil-wormhole@3.4.1(transitive)

• + Addedswiper@8.4.7(transitive)

• + Addedvue-inline-svg@3.1.4(transitive)

• - Removed@atoms-studio/composables@0.0.0-a5f4c95(transitive)

• Updated@atoms-studio/composables@0.0.0-a8bc262