Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@atoms-studio/components

Package Overview
Dependencies
Maintainers
6
Versions
61
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atoms-studio/components - npm Package Compare versions

Comparing version 0.0.0-6bbbfdc to 0.0.0-6e2735f

dist/AppPicture.vue.d.ts

222

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";

@@ -57,13 +41,207 @@ const defaultConfig = {

rel: "noopener noreferrer"
}, slots.default && slots.default()) : h(resolveComponent(props.linkComponent), __spreadValues({
}, 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());
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 +251,2 @@ var index = {

};
export { AppLink, index as default };
export { AppLink, AppPicture, index as default };

2

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"}})});
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;

@@ -7,3 +7,3 @@ {

},
"version": "0.0.0-6bbbfdc",
"version": "0.0.0-6e2735f",
"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-6bbbfdc"
"@atoms-studio/composables": "0.0.0-6e2735f",
"@atoms-studio/nuxt-components": "0.0.0-6e2735f"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc