@tsparticles/palette-dandelion-seeds 4.0.0-beta.0 → 4.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
2
2
 
3
- # tsParticles Dandelion Seeds Palette
3
+ # tsParticles DandelionSeeds Palette
4
4
 
5
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-dandelion-seeds/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-dandelion-seeds) [![npmjs](https://badge.fury.io/js/@tsparticles/palette-dandelion-seeds.svg)](https://www.npmjs.com/package/@tsparticles/palette-dandelion-seeds) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/palette-dandelion-seeds)](https://www.npmjs.com/package/@tsparticles/palette-dandelion-seeds) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-dandelionSeeds/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-dandelionSeeds) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-dandelionSeeds.svg)](https://www.npmjs.com/package/@tsparticles/palette-dandelionSeeds) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-dandelionSeeds) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
6
6
 
7
- [tsParticles](https://github.com/tsparticles/tsparticles) palette for dandelion seeds.
7
+ [tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
8
8
 
9
9
  [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
10
10
 
@@ -12,7 +12,7 @@
12
12
 
13
13
  ## Sample
14
14
 
15
- [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/dandelionSeeds/images/sample.png)](https://particles.js.org/samples/palettes/dandelion-seeds)
15
+ [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/nature/dandelionSeeds/images/sample.png)](https://particles.js.org/samples/palettes/dandelionSeeds)
16
16
 
17
17
  ## Colors
18
18
 
@@ -54,15 +54,18 @@
54
54
  ## Quick checklist
55
55
 
56
56
  1. Install `@tsparticles/engine` (or use the CDN bundle below)
57
- 2. Call the package loader function(s) before `tsParticles.load(...)`
58
- 3. Apply the package options in your `tsParticles.load(...)` config
57
+ 2. Load a base package (for example `@tsparticles/basic`) and call `loadDandelionSeedsPalette` before `tsParticles.load(...)`
58
+ 3. Apply the palette plus a minimal particles configuration in your options
59
+
60
+ A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
59
61
 
60
62
  ## How to use it
61
63
 
62
64
  ### CDN / Vanilla JS / jQuery
63
65
 
64
66
  ```html
65
- <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-dandelion-seeds@3/tsparticles.palette.dandelion-seeds.bundle.min.js"></script>
67
+ <script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
68
+ <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-dandelionSeeds@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
66
69
  ```
67
70
 
68
71
  ### Usage
@@ -70,16 +73,28 @@
70
73
  Once the scripts are loaded you can set up `tsParticles` like this:
71
74
 
72
75
  ```javascript
73
- (async () => {
74
- await loadDandelionSeedsPalette(tsParticles);
76
+ (async engine => {
77
+ await loadBasic(engine);
78
+ await loadDandelionSeedsPalette(engine);
75
79
 
76
- await tsParticles.load({
77
- id: "tsparticles",
78
- options: {
79
- palette: "dandelion-seeds",
80
+ const options = {
81
+ particles: {
82
+ number: { value: 200 },
83
+ shape: { type: "circle" },
84
+ size: { value: { min: 10, max: 15 } },
85
+ move: {
86
+ enable: true,
87
+ speed: 2,
88
+ },
80
89
  },
90
+ palette: "dandelionSeeds",
91
+ };
92
+
93
+ await engine.load({
94
+ id: "tsparticles",
95
+ options,
81
96
  });
82
- })();
97
+ })(tsParticles);
83
98
  ```
84
99
 
85
100
  #### Customization
@@ -87,47 +102,11 @@ Once the scripts are loaded you can set up `tsParticles` like this:
87
102
  **Important ⚠️**
88
103
  You can override all the options defining the properties like in any standard `tsParticles` installation.
89
104
 
90
- ```javascript
91
- tsParticles.load({
92
- id: "tsparticles",
93
- options: {
94
- particles: {
95
- shape: {
96
- type: "square", // starting from v2, this require the square shape script
97
- },
98
- },
99
- palette: "dandelion-seeds",
100
- },
101
- });
102
- ```
103
-
104
- Like in the sample above, the circles will be replaced by squares.
105
-
106
105
  ### Frameworks with a tsParticles component library
107
106
 
108
- Checkout the documentation in the component library repository and call the `loadDandelionSeedsPalette` function instead of `loadFull`, `loadSlim` or similar functions.
109
-
110
- The options shown above are valid for all the component libraries.
111
-
112
- ## Common pitfalls
113
-
114
- - Calling `tsParticles.load(...)` before `loadDandelionSeedsPalette(...)`
115
- - Verify required peer packages before enabling advanced options
116
- - Change one option group at a time to isolate regressions quickly
107
+ Checkout the documentation in the component library repository and call the `loadDandelionSeedsPalette` function.
117
108
 
118
109
  ## Related docs
119
110
 
120
111
  - Presets and palettes catalog: <https://github.com/tsparticles/palettes>
121
112
  - Main docs: <https://particles.js.org/docs/>
122
-
123
- ---
124
-
125
- ```mermaid
126
- flowchart TD
127
-
128
- subgraph pr [Palettes]
129
- padandelionSeeds[Dandelion Seeds]
130
- end
131
-
132
- e[tsParticles Engine] --> padandelionSeeds
133
- ```
@@ -0,0 +1,5 @@
1
+ import { loadDandelionSeedsPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
5
+ export * from "./index.js";
package/browser/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "dandelion-seeds";
2
3
  export async function loadDandelionSeedsPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "dandelion-seeds";
2
+ export async function loadDandelionSeedsPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/cjs/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadDandelionSeedsPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
5
+ export * from "./index.js";
package/cjs/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "dandelion-seeds";
2
3
  export async function loadDandelionSeedsPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "dandelion-seeds";
2
+ export async function loadDandelionSeedsPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/esm/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadDandelionSeedsPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
5
+ export * from "./index.js";
package/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
+ import { options } from "./options.js";
1
2
  const paletteName = "dandelion-seeds";
2
3
  export async function loadDandelionSeedsPalette(engine) {
3
- await engine.pluginManager.register(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "dandelion-seeds";
2
+ export async function loadDandelionSeedsPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@tsparticles/palette-dandelion-seeds",
3
- "version": "4.0.0-beta.0",
3
+ "version": "4.0.0-beta.15",
4
4
  "description": "tsParticles dandelion seeds palette",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/tsparticles/palettes.git",
8
+ "url": "git+https://github.com/tsparticles/tsparticles.git",
9
9
  "directory": "palettes/nature/dandelionSeeds"
10
10
  },
11
11
  "keywords": [
@@ -81,8 +81,7 @@
81
81
  "url": "https://www.buymeacoffee.com/matteobruni"
82
82
  }
83
83
  ],
84
- "jsdelivr": "tsparticles.palette.dandelion-seeds.min.js",
85
- "unpkg": "tsparticles.palette.dandelion-seeds.min.js",
84
+ "sideEffects": false,
86
85
  "browser": "browser/index.js",
87
86
  "main": "cjs/index.js",
88
87
  "module": "esm/index.js",
@@ -96,13 +95,23 @@
96
95
  "umd": "./umd/index.js",
97
96
  "default": "./cjs/index.js"
98
97
  },
99
- "./package.json": "./package.json"
98
+ "./package.json": "./package.json",
99
+ "./lazy": {
100
+ "types": "./types/index.lazy.d.ts",
101
+ "browser": "./browser/index.lazy.js",
102
+ "import": "./esm/index.lazy.js",
103
+ "require": "./cjs/index.lazy.js",
104
+ "umd": "./umd/index.lazy.js",
105
+ "default": "./cjs/index.lazy.js"
106
+ }
100
107
  },
101
108
  "dependencies": {
102
- "@tsparticles/engine": "^4.0.0-beta.11"
109
+ "@tsparticles/engine": "4.0.0-beta.15"
103
110
  },
111
+ "type": "module",
112
+ "jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
113
+ "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
104
114
  "publishConfig": {
105
115
  "access": "public"
106
- },
107
- "type": "module"
116
+ }
108
117
  }