Update

docs/.vitepress/theme/MyLayout.vue

@@ -1,8 +1,9 @@
 <script setup>
   import DefaultTheme from 'vitepress/theme'
   import { useRoute } from 'vitepress'
-  import { computed, ref } from "vue";
+  import { computed, ref, onMounted } from "vue";
   import { useSidebar } from 'vitepress/theme'
+  import mediumZoom from 'medium-zoom/dist/pure'
   const route = useRoute()
 
   const { sidebar } = useSidebar()
@@ -51,6 +52,10 @@
     const text = tmp.textContent || tmp.innerText || "";
     return text.replace(/\p{Emoji}/gu, '');
   }
+
+  onMounted(() => {
+    mediumZoom('[data-zoomable]', { background: 'var(--zoom-bg)' });
+  });
 </script>
 
 <template>

docs/.vitepress/theme/custom.scss

@@ -111,9 +111,28 @@ a.box-button {
     row-gap: 10px;
   }
 }
+
+.vp-doc blockquote > * {
+  color: var(--vp-c-text-2);
+}
+
+@import 'medium-zoom/dist/style.css';
+:root {
+  --zoom-bg: black;
+}
+.medium-zoom--opened .medium-zoom-overlay {
+  z-index: 999;
+  opacity: 0.5;
+}
+
+.medium-zoom-image--opened {
+  z-index: 1000;
+}
+
 @media (max-width: 1110px){
   .preview-img {
-      display: flex;
-      flex-direction: column;
+    display: flex;
+    flex-direction: column;
   }
-}
+}
+

docs/.vitepress/theme/index.js

@@ -27,5 +27,5 @@ export default {
     components.forEach(component => {
       app.component(component.name, component)
     })
-  }
+  },
 }

docs/RedM/clothing-store.md

@@ -425,36 +425,6 @@ end)
 
 ## 5. Compatibility issues
 
-### <Badge type="rsg" text="RSG" /> Fix clothes after character creation
-Go in `rsg-apperance\client\functions.lua` line 531 and add edit these line :
-```lua:line-numbers=530
-TriggerServerEvent("rsg-appearance:SetPlayerBucket" , 0)
-TriggerServerEvent("rsg-appearance:SaveSkin", CreatorCache, ClothesCache) -- [!code --]
-local newClothesData = {}  -- [!code ++]
-for k, v in pairs(ClothesCache) do   -- [!code ++]
-		local id = tonumber(v.model)   -- [!code ++]
-		if id >= 1 then   -- [!code ++]
-				if IsPedMale(PlayerPedId()) then   -- [!code ++]
-						if clothing["male"][k] ~= nil then   -- [!code ++]
-								if clothing["male"][k][id] ~= nil then   -- [!code ++]
-										if clothing["male"][k][id][tonumber(v.texture)] ~= nil then   -- [!code ++]
-												newClothesData[k] = {hash = tonumber(clothing["male"][k][id][tonumber(v.texture)].hash)}   -- [!code ++]
-										end   -- [!code ++]
-								end   -- [!code ++]
-						end   -- [!code ++]
-				else   -- [!code ++]
-						if clothing["female"][k] ~= nil then   -- [!code ++]
-								if clothing["female"][k][id] ~= nil then   -- [!code ++]
-										if clothing["female"][k][id][tonumber(v.texture)] ~= nil then   -- [!code ++]
-												newClothesData[k] = {hash = tonumber(clothing["female"][k][id][tonumber(v.texture)].hash)}   -- [!code ++]
-										end   -- [!code ++]
-								end   -- [!code ++]
-						end   -- [!code ++]
-				end   -- [!code ++]
-		end   -- [!code ++]
-end   -- [!code ++]
-TriggerServerEvent("rsg-appearance:SaveSkin", CreatorCache, newClothesData)   -- [!code ++]
-```
 ### <Badge type="rsg" text="RSG" /> Fix rsg-bathing
 Go in `rsg-bathing\fxmanifest.lua` line 24 and remove the `rsg-wardrobe` dependency
 ```lua:line-numbers=21

docs/jo_libs/modules/menu/client.md

@@ -105,7 +105,7 @@ menu:addItem({
 > display the price at the right of the item title  
 
 `statistics` : *table*  <BadgeOptional />
-> the list of statistics  
+> the list of [statistics](./Statistic.md)  
 
 `disabled` : *boolean*  <BadgeOptional />  
 > if the item is disabled (grey in the menu)  
@@ -343,4 +343,118 @@ Replace the `redemrp_menu_base` resource by the one delivered with the library
 # New assets
 
 ## Add a new icon
-Add you .png file in the `nui\menu\assets\images\icons` folder
+Add you .png file in the `nui\menu\assets\images\icons` folder
+
+# Definition variations
+
+## Statistics
+Statistics table is displayed at the bottom of the menu. 5 types of statistics are available:
+[Bar](#bar), [Bar-style](#bar-style), [Icon](#icon), [Texts](#texts) and [Weapon-bar](#weapon-bar)  
+There is an example of this 5 types:
+<img src="/images/preview_statistics.jpg" class="data-zoomable" data-zoomable style="height:20em"/>
+
+### Bar
+A statistic with **10 bars**
+#### Syntax
+```lua
+{label = "", type = "bar", value = {current,max}}
+```
+#### Keys
+`label` : *string*
+> the left label
+  
+`type` : *string*
+
+`value` : *table*
+> For the left to the right, `current` are white, `max` are grey, all the rest is dark grey  
+> `value.current` : *integer (0<>10* - the number of white bar  
+> `value.max` : *integer (0<>10* - the number of grey bar
+  
+
+#### Example
+![](/images/preview_statistics_bar.jpg){data-zoomable}
+```lua
+local menu = jo.menu.create('menu1',{})
+menu.addItem({
+  title = "Item",
+  statistics = {
+    {label = "The label", type = "bar", value = {3,8}}
+  }
+})
+menu:send()
+jo.menu.setCurrentMenu('menu1')
+jo.menu.show(true)
+```
+### Bar-style
+A statistic with unlimted bar defined with CSS classes
+#### Syntax
+```lua
+{label = "", type = "bar-style", value = {'','',''}}
+```
+#### Keys
+`label` : *string*
+> the left label
+  
+`type` : *string*
+
+`value` : *table*
+> A list of string to define the CSS classes of bar, 1 string = 1 bar  
+> If the string is empty, the bar is dark grey.
+> CSS classes:  
+> * `active` : Opacity = 1 
+> * `fgold` : Gold  
+> * `fred` : Red  
+> * `possible` : Opacity = 0.5  
+>  
+> *CSS classes can be combinated*  
+  
+
+#### Example
+![](/images/preview_statistics_bar-style.jpg){data-zoomable}
+```lua
+local menu = jo.menu.create('menu1',{})
+menu.addItem({
+  title = "Item",
+  statistics = {
+    {label = "The label", type="bar-style", value = {
+      "active",       --the 1st bar: opacity = 1
+      "active fgold", --the 2nd bar: opacity = 1 + gold
+      "active fred",  --the 3rd bar: opacity = 1 + red
+      "possible fred",--the 4th bar: opacity = 0.5 + red
+      "possible",     --the 4th bar: opacity = 0.5
+      "",             --the 5th bar: opacity = 0.2
+    }},
+  }
+})
+menu:send()
+jo.menu.setCurrentMenu('menu1')
+jo.menu.show(true)
+```
+
+### Texts
+Basic statistic with two labels
+#### Syntax
+```lua
+{label = "", value = ""}
+```
+#### Keys
+`label` : *string*
+> The left label
+  
+`value` : *string*
+> The right label
+  
+#### Example
+![](/images/preview_statistics_text.jpg){data-zoomable}
+```lua
+local menu = jo.menu.create('menu1',{})
+menu.addItem({
+  title = "Item",
+  statistics = {
+    {label = "The label", value = "The value"}
+  }
+})
+menu:send()
+jo.menu.setCurrentMenu('menu1')
+jo.menu.show(true)
+```

package.json

@@ -5,6 +5,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "medium-zoom": "^1.1.0",
     "primeicons": "^7.0.0",
     "primevue": "^3.51.0",
     "vitepress": "^1.0.0-rc.20",