grapesjs-style-gradient - npm Package Compare versions

Comparing version 2.0.14 to 3.0.1

package.json

 {
   "name": "grapesjs-style-gradient",
-  "version": "2.0.14",
+  "version": "3.0.1",
   "description": "Add gradient input to the Style Manager in GrapesJS",
-  "main": "dist/grapesjs-style-gradient.min.js",
+  "main": "dist/index.js",
+  "files": [
+    "dist/"
+  ],
   "repository": {
@@ -23,3 +26,4 @@ "type": "git",
   "devDependencies": {
-    "grapesjs-cli": "^1.0.14"
+    "grapesjs": "^0.20.1",
+    "grapesjs-cli": "^3.0.1"
   },
@@ -26,0 +30,0 @@ "dependencies": {

README.md

@@ -5,2 +5,4 @@ # GrapesJS Style Gradient
 
+> Requires GrapesJS v0.20.1 or higher
+
 [Demo](https://codepen.io/artf/full/bYwdQG/)
@@ -11,3 +13,4 @@
 * Plugin name: `grapesjs-style-gradient`
-* Style properties: `gradient`
+* Style type: `gradient` (the gradient picker input)
+* Built-in Style property: `background-image` (composite type with gradient picker and direction/type selectors)
 
@@ -20,10 +23,9 @@
 
-* `grapickOpts` - Grapick option, default: `{}`
-* `colorPicker` - Custom color picker, check Grapick's repo to get more about it
-  If you leave it empty the native color picker will be used. You can use 'default'
-  string to get the one used by GrapesJS (which is spectrum at the moment of writing)
-* `inputDirection` - Add the gradient direction input under the picker
-  (you can pass an object as a Property Model), default: 1
-* `inputType` - Add the gradient type input under the picker
-  (you can pass an object as a Property Model), default: 1
+| Option | Description | Default |
+|-|-|-
+| `grapickOpts` | [Grapick options](https://github.com/artf/grapick#configurations). | `{}` |
+| `colorPicker` |  Custom color picker, check [Grapick's repo](https://github.com/artf/grapick#add-custom-color-picker) to get more about it. | `undefined` |
+| `selectEdgeStops` | Select, by default, the edge color stops of the gradient picker. | `true` |
+| `styleType` | The id to assign for the gradient picker type. | `'gradient'` |
+| `builtInType` | Built-in property name to use for the composite type with the gradient picker and direction/type selectors. | `'background-image'` |
 
@@ -40,2 +42,4 @@
   * `npm i grapesjs-style-gradient`
+* GIT
+  * `git clone https://github.com/artf/grapesjs-style-gradient.git`
 
@@ -48,2 +52,3 @@
 
+Directly in the browser.
 ```html
@@ -58,5 +63,5 @@ <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
 <script type="text/javascript">
-  var editor = grapesjs.init({
+  const editor = grapesjs.init({
       container : '#gjs',
-      ...
+      // ...
       plugins: ['grapesjs-style-gradient'],
@@ -70,6 +75,38 @@ pluginsOpts: {
 
+Modern javascript
+```js
+import grapesjs from 'grapesjs';
+import plugin from 'grapesjs-style-gradient';
 
+const editor = grapesjs.init({
+  container : '#gjs',
+  // ...
+  plugins: [plugin],
+  pluginsOpts: {
+    [plugin]: { /* options */ }
+  }
+});
 
+// Usage via API
 
+// Add gradient picker as a single input
+editor.StyleManager.addProperty('decorations', {
+  type: 'gradient', // <- new type
+  name: 'Gradient',
+  property: 'background-image',
+  defaults: 'none'
+  full: true,
+});
 
+// Add the new background-image bulti-in type
+editor.StyleManager.addProperty('decorations', {
+  extend: 'background-image', // <- extend the built-in type
+  name: 'Gradient Background',
+});
+```
+
+
+
+
+
 ## Development
@@ -76,0 +113,0 @@

New alerts

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

Improved metrics

Number of lines in readme file

131

increased by39.36%

Worsened metrics

Total package byte prevSize

74787

decreased by-12.43%

Dev dependency count

2

increased by100%

Number of package files

6

decreased by-25%

Lines of code

132

decreased by-52.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes