Skip to content

Commit

Permalink
feat: adding vue-particles tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@matteobruni
matteobruni committed May 25, 2023
1 parent 005f447 commit 8b12d56
Show file tree
Hide file tree
Showing 10 changed files with 309 additions and 919 deletions.
2 changes: 1 addition & 1 deletion apps/nuxt3/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<NuxtWelcome />
<Particles
<vue-particles
id="tsparticles"
:options="options"
:particles-init="particlesInit"
Expand Down
22 changes: 11 additions & 11 deletions apps/vue3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,26 @@
"tsparticles": "^2.9.3",
"tsparticles-demo-configs": "^2.9.3",
"tsparticles-engine": "^2.9.3",
"vue": "^3.2.47",
"vue-router": "^4.1.6",
"vue": "^3.3.4",
"vue-router": "^4.2.1",
"vue3-particles": "^2.9.3"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@tsconfig/node18": "^2.0.0",
"@types/node": "^20.1.0",
"@vitejs/plugin-vue": "^4.2.1",
"@rushstack/eslint-patch": "^1.3.0",
"@tsconfig/node18": "^2.0.1",
"@types/node": "^20.2.3",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.11.1",
"minimatch": "^9.0.0",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.0",
"minimatch": "^9.0.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"typescript": "^5.0.4",
"vite": "^4.3.5",
"vue-tsc": "^1.6.4"
"vite": "^4.3.8",
"vue-tsc": "^1.6.5"
}
}
116 changes: 58 additions & 58 deletions apps/vue3/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,86 +13,86 @@ const particlesInit = async (engine: Engine) => {
</script>

<template>
<header>
<img
alt="Vue logo"
class="logo"
src="./assets/logo.svg"
width="125"
height="125"
/>

<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>

<main>
<TheWelcome />

<Particles id="tsparticles" :options="options" :particlesInit="particlesInit" />
</main>
<header>
<img
alt="Vue logo"
class="logo"
src="./assets/logo.svg"
width="125"
height="125"
/>

<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>

<main>
<TheWelcome />

<vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit" />
</main>
</template>

<style>
@import "./assets/base.css";
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
font-weight: normal;
}
header {
line-height: 1.5;
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
display: block;
margin: 0 auto 2rem;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
.logo {
margin: 0 2rem 0 0;
}
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
.logo {
margin: 0 2rem 0 0;
}
}
</style>
4 changes: 2 additions & 2 deletions components/vue3-alt/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ createApp(App).use(Particles);
```html
<template>
<div id="app">
<Particles
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>

<Particles
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
Expand Down
18 changes: 9 additions & 9 deletions components/vue3-alt/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,25 +95,25 @@
"prettier": "@tsparticles/prettier-config",
"dependencies": {
"tsparticles-engine": "^2.9.3",
"vue": "^3.2.47"
"vue": "^3.3.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@tsconfig/node18": "^2.0.0",
"@rushstack/eslint-patch": "^1.3.0",
"@tsconfig/node18": "^2.0.1",
"@tsparticles/prettier-config": "^1.9.0",
"@types/node": "^20.1.0",
"@vitejs/plugin-vue": "^4.2.1",
"@types/node": "^20.2.3",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.11.1",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.0",
"prettier": "^2.8.8",
"typescript": "^5.0.4",
"vite": "^4.3.5",
"vite": "^4.3.8",
"vite-plugin-dts": "^2.3.0",
"vue-tsc": "^1.6.4"
"vue-tsc": "^1.6.5"
},
"main": "dist/particles.vue3.umd.js",
"module": "dist/particles.vue3.es.js",
Expand Down
1 change: 1 addition & 0 deletions components/vue3-alt/src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import particles from "./Particles.vue";

const VueParticles = (app: App) => {
app.component("Particles", particles);
app.component("vue-particles", particles);
};

export { particles as ParticlesComponent };
Expand Down
4 changes: 2 additions & 2 deletions components/vue3/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ createApp(App).use(Particles);
```html
<template>
<div id="app">
<Particles
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>

<Particles
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
Expand Down
18 changes: 9 additions & 9 deletions components/vue3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,25 +95,25 @@
"prettier": "@tsparticles/prettier-config",
"dependencies": {
"tsparticles-engine": "^2.9.3",
"vue": "^3.2.47"
"vue": "^3.3.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@tsconfig/node18": "^2.0.0",
"@rushstack/eslint-patch": "^1.3.0",
"@tsconfig/node18": "^2.0.1",
"@tsparticles/prettier-config": "^1.9.0",
"@types/node": "^20.1.0",
"@vitejs/plugin-vue": "^4.2.1",
"@types/node": "^20.2.3",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.11.1",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.0",
"prettier": "^2.8.8",
"typescript": "^5.0.4",
"vite": "^4.3.5",
"vite": "^4.3.8",
"vite-plugin-dts": "^2.3.0",
"vue-tsc": "^1.6.4"
"vue-tsc": "^1.6.5"
},
"main": "dist/vue3-particles.umd.js",
"module": "dist/vue3-particles.es.js",
Expand Down
1 change: 1 addition & 0 deletions components/vue3/src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import particles from "./Particles.vue";

const VueParticles = (app: App) => {
app.component("Particles", particles);
app.component("vue-particles", particles);
};

export { particles as ParticlesComponent };
Expand Down
Loading

0 comments on commit 8b12d56

Please sign in to comment.