From 640af67d323f19dbcdc0227fcc5a63da66b339dd Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 26 Jan 2024 21:23:22 +0400
Subject: [PATCH] Up trait images

---
 docs/.vuepress/public/trait-categories.png | Bin 0 -> 6420 bytes
 docs/.vuepress/styles/index.styl           |   7 ++++
 docs/modules/Traits.md                     |  42 ++++++++++++++++++---
 3 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 docs/.vuepress/public/trait-categories.png

diff --git a/docs/.vuepress/public/trait-categories.png b/docs/.vuepress/public/trait-categories.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6fcf5dda7683f99caafc0a51acd0703834936eb
GIT binary patch
literal 6420
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
CP4CqJ

literal 0
HcmV?d00001

diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
index bb620c26b..a508c330b 100644
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@@ -3,6 +3,13 @@
   display: block;
 }
 
+.img-ctr-rad {
+  margin: 0 auto;
+  display: block;
+  border-radius: 5px;
+  width: 100%;
+}
+
 .navbar {
   background-color: rgb(111, 41, 67);
   background-image: linear-gradient(120deg, rgb(217, 131, 166), rgb(77, 17, 79));
diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md
index 976b8f34d..4ea666f7a 100644
--- a/docs/modules/Traits.md
+++ b/docs/modules/Traits.md
@@ -7,7 +7,7 @@ title: Trait Manager
 In GrapesJS, Traits define different parameters and behaviors of a component. The user generally will see traits as the *Settings* of a component. A common use of traits is to customize element attributes (eg. `placeholder` for `<input>`) or you can also bind them to the properties of your components and react to their changes.
 
 ::: warning
-This guide is referring to GrapesJS v0.15.3 or higher.<br><br>
+This guide is referring to GrapesJS v0.21.9 or higher.<br><br>
 To get a better understanding of the content in this guide we recommend reading [Components](Components.html) first
 :::
 
@@ -22,7 +22,7 @@ Generally, you define traits on the definition of your new custom components (or
 
 All components, by default, contain two traits: `id` and `title` (at the moment of writing). So, if you select an input and open the Settings panel you will see this:
 
-<img :src="$withBase('/default-traits.png')">
+<img :src="$withBase('/default-traits.png')" class="img-ctr-rad" style="max-width: 200px;" alt="Default traits">
 
 We can start by creating a new custom `input` component in this way:
 
@@ -59,7 +59,7 @@ editor.Components.addType('input', {
 
 Now the result will be
 
-<img :src="$withBase('/input-custom-traits.png')">
+<img :src="$withBase('/input-custom-traits.png')" class="img-ctr-rad" style="max-width: 230px;" alt="Input with custom traits">
 
 If you want you can also define traits dynamically via functions, which will be created on component initialization. It might be useful if you need to create traits based on some other component characteristic.
 
@@ -136,6 +136,36 @@ editor.Components.addType('input', {
 })
 ```
 
+### Categories
+
+It's possible to group your traits into categories, as shown below.
+
+<img :src="$withBase('/trait-categories.png')" class="img-ctr-rad" style="max-width: 250px;" alt="Traits with categories">
+
+```js
+const category1 = { id: 'first', label: 'First category' };
+const category2 = { id: 'second', label: 'Second category', open: false };
+
+editor.Components.addType('input', {
+  model: {
+    defaults: {
+      // ...
+      traits: [
+        { name: 'trait-1', category: category1 },
+        { name: 'trait-2', category: category1 },
+        { name: 'trait-3', category: category2 },
+        { name: 'trait-4', category: category2 },
+        // Traits without categories will be rendered at the bottom
+        { name: 'trait-5' },
+        { name: 'trait-6' },
+      ],
+    },
+  }
+})
+```
+
+
+
 ## Built-in trait types
 
 GrapesJS comes along with few built-in types that you can use to define your traits:
@@ -270,7 +300,7 @@ In that case, you can define a totally new type of trait and bind any kind of el
 
 Let's update the default `link` Component with a new kind of trait. This is the default situation of traits for a simple link.
 
-<img :src="$withBase('/default-link-comp.jpg')">
+<img :src="$withBase('/default-link-comp.jpg')" class="img-ctr-rad" style="max-width: 210px;" alt="Default link component">
 
 Let's just replace all of its traits with a new one, `href-next`, which will allow the user to select the type of href (eg. 'url', 'email', etc.)
 
@@ -343,7 +373,7 @@ editor.Traits.addType('href-next', {
 
 From the example above we simply created our custom inputs (by giving also the possibility to use `option` trait property) and defined some input switch behavior on the type change. Now the result would be something like this
 
-<img :src="$withBase('/docs-init-link-trait.jpg')">
+<img :src="$withBase('/docs-init-link-trait.jpg')" class="img-ctr-rad" style="max-width: 215px;" alt="Link with traits">
 
 ### Update layout
 
@@ -393,7 +423,7 @@ editor.Traits.addType('href-next', {
 });
 ```
 
-<img :src="$withBase('/docs-link-trait-raw.jpg')">
+<img :src="$withBase('/docs-link-trait-raw.jpg')" class="img-ctr-rad" style="max-width: 215px;" alt="Basic custom link trait">
 
 In this case, the result will be quite raw and unstyled but the point of custom trait types is to allow you to reuse your own styled inputs, probably already designed and defined (or implemented in some UI framework).
 For now, let's keep the default input wrapper and continue with the integration of our custom trait.