web3-avatar-vue - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/web3-avatar-vue.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue");var c={};Object.defineProperty(c,"__esModule",{value:!0});c.createAvatar=i=c.getGradientColors=void 0;function u(r){var o;const e=(o=r.match(/.{1,7}/g))===null||o===void 0?void 0:o.splice(0,5),t=[];return e==null||e.forEach(d=>{let s=0;for(let n=0;n<d.length;n+=1)s=d.charCodeAt(n)+((s<<5)-s),s=s&s;const l=[0,0,0];for(let n=0;n<3;n+=1){const v=s>>n*8&255;l[n]=v}t.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`)}),t}var i=c.getGradientColors=u;function _(r,o){const e=u(o),t=typeof r=="string"?document.querySelector(r):r;if(!t)throw new Error("Avatar element not found");t.style.borderRadius="50%",t.style.boxShadow="inset 0 0 0 1px rgba(0, 0, 0, 0.1)",t.style.backgroundColor=e[0],t.style.backgroundImage=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue");var d={};Object.defineProperty(d,"__esModule",{value:!0});d.createAvatar=i=d.getGradientColors=void 0;function u(r){var o;const e=(o=r.match(/.{1,7}/g))===null||o===void 0?void 0:o.splice(0,5),t=[];return e==null||e.forEach(c=>{let s=0;for(let n=0;n<c.length;n+=1)s=c.charCodeAt(n)+((s<<5)-s),s=s&s;const l=[0,0,0];for(let n=0;n<3;n+=1){const v=s>>n*8&255;l[n]=v}t.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`)}),t}var i=d.getGradientColors=u;function _(r,o){const e=u(o),t=typeof r=="string"?document.querySelector(r):r;if(!t)throw new Error("Avatar element not found");t.style.borderRadius="50%",t.style.boxShadow="inset 0 0 0 1px rgba(0, 0, 0, 0.1)",t.style.backgroundColor=e[0],t.style.backgroundImage=`
     radial-gradient(at 66% 77%, ${e[1]} 0px, transparent 50%),
@@ -6,2 +6,2 @@ radial-gradient(at 29% 97%, ${e[2]} 0px, transparent 50%),
     radial-gradient(at 29% 88%, ${e[4]} 0px, transparent 50%)
-  `}c.createAvatar=_;c.default=_;const p={class:"web3-avatar"},f=a.defineComponent({__name:"Avatar",props:{address:{type:String,required:!0}},setup(r){const o=r;a.useCssVars(t=>({dc559c76:a.unref(e)[0],dc559c38:a.unref(e)[1],dc559bfa:a.unref(e)[2],dc559bbc:a.unref(e)[3],dc559b7e:a.unref(e)[4]}));const e=a.computed(()=>i(o.address));return(t,d)=>(a.openBlock(),a.createElementBlock("div",p))}});const g=(r,o)=>{const e=r.__vccOpts||r;for(const[t,d]of o)e[t]=d;return e},b=g(f,[["__scopeId","data-v-068a6e54"]]);exports.default=b;
+  `}d.createAvatar=_;d.default=_;const p={class:"web3-avatar"},g=a.defineComponent({__name:"Avatar",props:{address:{type:String,required:!0}},setup(r){const o=r;a.useCssVars(t=>({"6ebd55e8":a.unref(e)[0],"6ebd5607":a.unref(e)[1],"6ebd5626":a.unref(e)[2],"6ebd5645":a.unref(e)[3],"6ebd5664":a.unref(e)[4]}));const e=a.computed(()=>i(o.address));return(t,c)=>(a.openBlock(),a.createElementBlock("div",p))}});const f=(r,o)=>{const e=r.__vccOpts||r;for(const[t,c]of o)e[t]=c;return e},b=f(g,[["__scopeId","data-v-75502b3d"]]);exports.default=b;

dist/web3-avatar-vue.es.js

@@ -1,12 +0,12 @@
-import { defineComponent as v, useCssVars as g, unref as d, computed as f, openBlock as b, createElementBlock as h } from "vue";
+import { defineComponent as v, useCssVars as g, unref as c, computed as b, openBlock as f, createElementBlock as h } from "vue";
 var s = {};
 Object.defineProperty(s, "__esModule", { value: !0 });
 s.createAvatar = u = s.getGradientColors = void 0;
-function i(e) {
+function i(r) {
   var a;
-  const t = (a = e.match(/.{1,7}/g)) === null || a === void 0 ? void 0 : a.splice(0, 5), r = [];
-  return t == null || t.forEach((c) => {
+  const t = (a = r.match(/.{1,7}/g)) === null || a === void 0 ? void 0 : a.splice(0, 5), e = [];
+  return t == null || t.forEach((d) => {
     let n = 0;
-    for (let o = 0; o < c.length; o += 1)
-      n = c.charCodeAt(o) + ((n << 5) - n), n = n & n;
+    for (let o = 0; o < d.length; o += 1)
+      n = d.charCodeAt(o) + ((n << 5) - n), n = n & n;
     const l = [0, 0, 0];
@@ -17,11 +17,11 @@ for (let o = 0; o < 3; o += 1) {
     }
-    r.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`);
-  }), r;
+    e.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`);
+  }), e;
 }
 var u = s.getGradientColors = i;
-function p(e, a) {
-  const t = i(a), r = typeof e == "string" ? document.querySelector(e) : e;
-  if (!r)
+function p(r, a) {
+  const t = i(a), e = typeof r == "string" ? document.querySelector(r) : r;
+  if (!e)
     throw new Error("Avatar element not found");
-  r.style.borderRadius = "50%", r.style.boxShadow = "inset 0 0 0 1px rgba(0, 0, 0, 0.1)", r.style.backgroundColor = t[0], r.style.backgroundImage = `
+  e.style.borderRadius = "50%", e.style.boxShadow = "inset 0 0 0 1px rgba(0, 0, 0, 0.1)", e.style.backgroundColor = t[0], e.style.backgroundImage = `
     radial-gradient(at 66% 77%, ${t[1]} 0px, transparent 50%),
@@ -43,23 +43,23 @@ radial-gradient(at 29% 97%, ${t[2]} 0px, transparent 50%),
   },
-  setup(e) {
-    const a = e;
-    g((r) => ({
-      dc559c76: d(t)[0],
-      dc559c38: d(t)[1],
-      dc559bfa: d(t)[2],
-      dc559bbc: d(t)[3],
-      dc559b7e: d(t)[4]
+  setup(r) {
+    const a = r;
+    g((e) => ({
+      "6ebd55e8": c(t)[0],
+      "6ebd5607": c(t)[1],
+      "6ebd5626": c(t)[2],
+      "6ebd5645": c(t)[3],
+      "6ebd5664": c(t)[4]
     }));
-    const t = f(() => u(a.address));
-    return (r, c) => (b(), h("div", x));
+    const t = b(() => u(a.address));
+    return (e, d) => (f(), h("div", x));
   }
 });
-const A = (e, a) => {
-  const t = e.__vccOpts || e;
-  for (const [r, c] of a)
-    t[r] = c;
+const A = (r, a) => {
+  const t = r.__vccOpts || r;
+  for (const [e, d] of a)
+    t[e] = d;
   return t;
-}, C = /* @__PURE__ */ A(y, [["__scopeId", "data-v-068a6e54"]]);
+}, C = /* @__PURE__ */ A(y, [["__scopeId", "data-v-75502b3d"]]);
 export {
   C as default
 };

dist/web3-avatar-vue.umd.js

@@ -1,7 +0,7 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c["web3-avatar-vue"]={},c.Vue))})(this,function(c,e){"use strict";var u=document.createElement("style");u.textContent=`.web3-avatar[data-v-068a6e54]{--color-av-1: var(--dc559c76);--color-av-2: var(--dc559c38);--color-av-3: var(--dc559bfa);--color-av-4: var(--dc559bbc);--color-av-5: var(--dc559b7e);border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a;background-color:var(--color-av-1);background-image:radial-gradient(at 66% 77%,var(--color-av-2) 0px,transparent 50%),radial-gradient(at 29% 97%,var(--color-av-3) 0px,transparent 50%),radial-gradient(at 99% 86%,var(--color-av-4) 0px,transparent 50%),radial-gradient(at 29% 88%,var(--color-av-5) 0px,transparent 50%)}
-`,document.head.appendChild(u);var s={};Object.defineProperty(s,"__esModule",{value:!0}),s.createAvatar=p=s.getGradientColors=void 0;function v(t){var o;const a=(o=t.match(/.{1,7}/g))===null||o===void 0?void 0:o.splice(0,5),r=[];return a==null||a.forEach(i=>{let d=0;for(let n=0;n<i.length;n+=1)d=i.charCodeAt(n)+((d<<5)-d),d=d&d;const l=[0,0,0];for(let n=0;n<3;n+=1){const x=d>>n*8&255;l[n]=x}r.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`)}),r}var p=s.getGradientColors=v;function _(t,o){const a=v(o),r=typeof t=="string"?document.querySelector(t):t;if(!r)throw new Error("Avatar element not found");r.style.borderRadius="50%",r.style.boxShadow="inset 0 0 0 1px rgba(0, 0, 0, 0.1)",r.style.backgroundColor=a[0],r.style.backgroundImage=`
-    radial-gradient(at 66% 77%, ${a[1]} 0px, transparent 50%),
-    radial-gradient(at 29% 97%, ${a[2]} 0px, transparent 50%),
-    radial-gradient(at 99% 86%, ${a[3]} 0px, transparent 50%),
-    radial-gradient(at 29% 88%, ${a[4]} 0px, transparent 50%)
-  `}s.createAvatar=_,s.default=_;const f={class:"web3-avatar"},g=e.defineComponent({__name:"Avatar",props:{address:{type:String,required:!0}},setup(t){const o=t;e.useCssVars(r=>({dc559c76:e.unref(a)[0],dc559c38:e.unref(a)[1],dc559bfa:e.unref(a)[2],dc559bbc:e.unref(a)[3],dc559b7e:e.unref(a)[4]}));const a=e.computed(()=>p(o.address));return(r,i)=>(e.openBlock(),e.createElementBlock("div",f))}}),h="",b=((t,o)=>{const a=t.__vccOpts||t;for(const[r,i]of o)a[r]=i;return a})(g,[["__scopeId","data-v-068a6e54"]]);c.default=b,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(d=typeof globalThis<"u"?globalThis:d||self,r(d["web3-avatar-vue"]={},d.Vue))})(this,function(d,r){"use strict";var u=document.createElement("style");u.textContent=`.web3-avatar[data-v-75502b3d]{--color-av-1: var(--6ebd55e8);--color-av-2: var(--6ebd5607);--color-av-3: var(--6ebd5626);--color-av-4: var(--6ebd5645);--color-av-5: var(--6ebd5664);border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a;background-color:var(--color-av-1);background-image:radial-gradient(at 66% 77%,var(--color-av-2) 0px,transparent 50%),radial-gradient(at 29% 97%,var(--color-av-3) 0px,transparent 50%),radial-gradient(at 99% 86%,var(--color-av-4) 0px,transparent 50%),radial-gradient(at 29% 88%,var(--color-av-5) 0px,transparent 50%)}
+`,document.head.appendChild(u);var c={};Object.defineProperty(c,"__esModule",{value:!0}),c.createAvatar=p=c.getGradientColors=void 0;function v(t){var o;const e=(o=t.match(/.{1,7}/g))===null||o===void 0?void 0:o.splice(0,5),a=[];return e==null||e.forEach(i=>{let s=0;for(let n=0;n<i.length;n+=1)s=i.charCodeAt(n)+((s<<5)-s),s=s&s;const l=[0,0,0];for(let n=0;n<3;n+=1){const x=s>>n*8&255;l[n]=x}a.push(`rgb(${l[0]}, ${l[1]}, ${l[2]})`)}),a}var p=c.getGradientColors=v;function _(t,o){const e=v(o),a=typeof t=="string"?document.querySelector(t):t;if(!a)throw new Error("Avatar element not found");a.style.borderRadius="50%",a.style.boxShadow="inset 0 0 0 1px rgba(0, 0, 0, 0.1)",a.style.backgroundColor=e[0],a.style.backgroundImage=`
+    radial-gradient(at 66% 77%, ${e[1]} 0px, transparent 50%),
+    radial-gradient(at 29% 97%, ${e[2]} 0px, transparent 50%),
+    radial-gradient(at 99% 86%, ${e[3]} 0px, transparent 50%),
+    radial-gradient(at 29% 88%, ${e[4]} 0px, transparent 50%)
+  `}c.createAvatar=_,c.default=_;const f={class:"web3-avatar"},b=r.defineComponent({__name:"Avatar",props:{address:{type:String,required:!0}},setup(t){const o=t;r.useCssVars(a=>({"6ebd55e8":r.unref(e)[0],"6ebd5607":r.unref(e)[1],"6ebd5626":r.unref(e)[2],"6ebd5645":r.unref(e)[3],"6ebd5664":r.unref(e)[4]}));const e=r.computed(()=>p(o.address));return(a,i)=>(r.openBlock(),r.createElementBlock("div",f))}}),h="",g=((t,o)=>{const e=t.__vccOpts||t;for(const[a,i]of o)e[a]=i;return e})(b,[["__scopeId","data-v-75502b3d"]]);d.default=g,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "web3-avatar-vue",
+  "description": "Vue component for generating beautiful Web3 gradient avatars",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "vitest --environment jsdom --run",
     "build": "vue-tsc && vite build",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build && npm run test"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JackHamer09/web3-avatar.git"
+  },
+  "keywords": [
+    "avatar",
+    "web3",
+    "vue",
+    "gradient",
+    "address",
+    "generator",
+    "ethereum",
+    "eth"
+  ],
+  "author": "JackHamer",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JackHamer09/web3-avatar/issues"
+  },
+  "homepage": "https://github.com/JackHamer09/web3-avatar#readme",
   "files": [
@@ -33,2 +55,4 @@ "dist"
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/test-utils": "^2.3.0",
+    "jsdom": "^21.1.0",
     "path": "^0.12.7",
@@ -39,4 +63,5 @@ "rollup-plugin-typescript2": "^0.34.1",
     "vite-plugin-dts": "^2.0.2",
+    "vitest": "^0.29.1",
     "vue-tsc": "^1.0.24"
   }
 }

README.md

@@ -1,18 +0,104 @@
-# Vue 3 + TypeScript + Vite
+# Web3 Avatar - Vue component
+Web3 Avatar is a lightweight Vue library for generating beautiful gradient avatars from Ethereum addresses. This is Vue version of the library. If you are looking for other versions like [React](https://github.com/JackHamer09/web3-avatar/blob/master/react) or [vanilla JavaScript](https://github.com/JackHamer09/web3-avatar/blob/master/js), please check the [main repository](https://github.com/JackHamer09/web3-avatar).
+Inspired by [Web3 Modal avatar](https://github.com/WalletConnect/web3modal)
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+---
 
-## Recommended IDE Setup
+## Installation
+You can install the library using npm:
+```bash
+npm install web3-avatar-vue # or yarn add web3-avatar-vue
+```
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+---
 
-## Type Support For `.vue` Imports in TS
+## Quick start
+For more detailed usage instructions see the [usage](#usage).
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+```html
+<template>
+   <Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />
+</template>
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+<script setup>
+import Web3Avatar from 'web3-avatar-vue';
+</script>
+```
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+---
+
+## Usage
+1. First, you need to import the `style.css` file which contains the styles for the component.
+   ### Vite, Vue CLI, etc.
+   ```js
+   // main.js
+   import 'web3-avatar-vue/dist/style.css';
+   ```
+
+   ### Nuxt
+   Add the `style.css` file to the `css` array in your Nuxt config file:
+   ```js
+   /// nuxt.config.js
+   export default defineNuxtConfig({
+      ... // other config
+      css: ['web3-avatar-vue/dist/style.css'],
+      ... // other config
+   })
+   ```
+
+   ### Browser
+   ```html
+   <!-- index.html -->
+   <link rel="stylesheet" href="https://unpkg.com/web3-avatar-vue/dist/style.css">
+   ```
+
+2. Then, you can import the component:
+   ### Composition API
+   ```html
+   <script setup>
+   import Web3Avatar from 'web3-avatar-vue';
+   </script>
+   ```
+
+   ### Options API
+   ```js
+   import Web3Avatar from 'web3-avatar-vue';
+
+   new Vue({
+      ...
+      components: {
+         Web3Avatar
+      },
+      ...
+   })
+   ```
+
+   ### Browser
+   ```html
+   <!-- index.html -->
+   <script src="https://unpkg.com/web3-avatar-vue"></script>
+   ```
+
+3. Finally, you can use the component in your template 🎉:
+   ```html
+   <Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />
+   ```
+
+---
+
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `address` | `String` | `null` | Ethereum address |
+
+---
+
+## Test
+```bash
+npm run test # or yarn test
+```
+
+---
+
+## License
+Released under the [MIT License](https://github.com/JackHamer09/web3-avatar/blob/master/LICENSE).

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

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12800

increased by31.12%

Number of package files

11

increased by22.22%

Number of low license alerts

0

decreased by-100%

Lines of code

109

increased by3.81%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

104

increased by447.37%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

10

increased by42.86%

No dependency changes