store components by role and not as widget part

vuejs/client/input.css

@@ -807,6 +807,11 @@ body {
   @apply capitalize-first hover:italic hover:brightness-90 block sm:px-4 py-1 lg:pt-1 lg:pb-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white;
 }
 
+/* CONTENT COMPONENT */
+.content-title {
+  @apply text-lg font-bold mb-2 col-span-12;
+}
+
 /* STAT COMPONENT */
 
 .stat-container {

vuejs/client/src/components/Builder.vue

@@ -9,10 +9,10 @@ import Input from "@components/Forms/Field/Input.vue";
 import Datepicker from "@components/Forms/Field/Datepicker.vue";
 import Button from "@components/Widget/Button.vue";
 import Stat from "@components/Widget/Stat.vue";
-import StatTitle from "@components/Stat/Title.vue";
-import StatSubtitle from "@components/Stat/Subtitle.vue";
-import StatValue from "@components/Stat/Value.vue";
-import StatIcon from "@components/Stat/Icon.vue";
+import TitleStat from "@components/Title/Stat.vue";
+import ContentStat from "@components/Content/Stat.vue";
+import SubtitleStat from "@components/Subtitle/Stat.vue";
+import IconStat from "@components/Icon/Stat.vue";
 
 /**
   @name Builder.vue
@@ -80,13 +80,16 @@ const props = defineProps({
         <Datepicker v-if="widget.type === 'Datepicker'" v-bind="widget.data" />
         <Button v-if="widget.type === 'Button'" v-bind="widget.data" />
         <Stat v-if="widget.type === 'Stat'" v-bind="widget.data" />
-        <StatTitle v-if="widget.type === 'StatTitle'" v-bind="widget.data" />
-        <StatSubtitle
-          v-if="widget.type === 'StatSubtitle'"
+        <TitleStat v-if="widget.type === 'TitleStat'" v-bind="widget.data" />
+        <SubtitleStat
+          v-if="widget.type === 'SubtitleStat'"
           v-bind="widget.data"
         />
-        <StatValue v-if="widget.type === 'StatValue'" v-bind="widget.data" />
-        <StatIcon v-if="widget.type === 'StatIcon'" v-bind="widget.data" />
+        <ContentStat
+          v-if="widget.type === 'ContentStat'"
+          v-bind="widget.data"
+        />
+        <IconStat v-if="widget.type === 'IconStat'" v-bind="widget.data" />
       </template>
     </Grid>
   </GridLayout>

vuejs/client/src/components/Content/Stat.vue

@@ -0,0 +1,33 @@
+<script setup>
+/** 
+  @name Content/Stat.vue
+  @description This component is used with stats to display the stat value.
+  This can be used alone in case we don't need a complete stat widget.
+  In case you have a title, subtitle, stat and icon to display, you can directly use Stat widget.
+    @example
+  {
+    stat: "100",
+    statClass: "text-3xl"
+  }
+  @param {string} stat - The stat value. Can be a translation key or by default raw text.
+  @param {string} [statClass=""] - Additional class, useful when component is used directly on a grid system
+*/
+
+const props = defineProps({
+  stat: {
+    type: String,
+    required: true,
+  },
+  statClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <h5 :class="['stat-value', props.statClass]">
+    {{ $t(props.stat, props.stat) }}
+  </h5>
+</template>

vuejs/client/src/components/Icon/Stat.vue

@@ -1,10 +1,10 @@
 <script setup>
 import Icons from "@/components/Widget/Icons.vue";
 /** 
-  @name Stat/Icon.vue
+  @name Icon/Stat.vue
   @description This component is a icon used with stats.
   This can be used alone in case we don't need a complete stat widget.
-  In case you have a title, subtitle, value and icon to display, you can directly use Stat widget.
+  In case you have a title, subtitle, stat and icon to display, you can directly use Stat widget.
     @example
   {
     iconName: "crown",

vuejs/client/src/components/Stat/Value.vue

@@ -1,33 +0,0 @@
-<script setup>
-/** 
-  @name Stat/Value.vue
-  @description This component is a value used with stats.
-  This can be used alone in case we don't need a complete stat widget.
-  In case you have a title, subtitle, value and icon to display, you can directly use Stat widget.
-    @example
-  {
-    value: "100",
-    valueClass: "text-3xl"
-  }
-  @param {string} value - The value of the stat. Can be a translation key or by default raw text.
-  @param {string} [valueClass=""] - Additional class, useful when component is used directly on a grid system
-*/
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  valueClass: {
-    type: String,
-    required: false,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <h5 :class="['stat-value', props.valueClass]">
-    {{ $t(props.value, props.value) }}
-  </h5>
-</template>

vuejs/client/src/components/Subtitle/Stat.vue

@@ -3,7 +3,7 @@
   @name Stat/Subtitle.vue
   @description This component is a subtitle used with stats.
   This can be used alone in case we don't need a complete stat widget.
-  In case you have a title, subtitle, value and icon to display, you can directly use Stat widget.
+  In case you have a title, subtitle, stat and icon to display, you can directly use Stat widget.
     @example
   {
     subtitle: "Last 30 days",

vuejs/client/src/components/Title/Content.vue

@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  titleClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <h1 v-if="props.title" :class="[props.titleClass, 'content-title']">
+    {{ $t(props.title, props.title) }}
+  </h1>
+</template>

vuejs/client/src/components/Title/Stat.vue

@@ -1,9 +1,9 @@
 <script setup>
 /** 
-  @name Stat/Title.vue
+  @name Title/Stat.vue
   @description This component is a title used with stats.
   This can be used alone in case we don't need a complete stat widget.
-  In case you have a title, subtitle, value and icon to display, you can directly use Stat widget.
+  In case you have a title, subtitle, stat and icon to display, you can directly use Stat widget.
     @example
   {
     title: "Total Users",

vuejs/client/src/components/Widget/Stat.vue

@@ -1,8 +1,8 @@
 <script setup>
-import StatTitle from "@components/Stat/Title.vue";
-import StatValue from "@components/Stat/Value.vue";
-import StatSubtitle from "@components/Stat/Subtitle.vue";
-import StatIcon from "@components/Stat/Icon.vue";
+import TitleStat from "@components/Title/Stat.vue";
+import ContentStat from "@components/Content/Stat.vue";
+import SubtitleStat from "@components/Subtitle/Stat.vue";
+import IconStat from "@components/Icon/Stat.vue";
 
 /** 
   @name Widget/Stat.vue
@@ -73,15 +73,15 @@ const props = defineProps({
         props.iconName ? 'is-icon' : 'no-icon',
       ]"
     >
-      <StatTitle :title="props.title" />
-      <StatValue :value="props.value" />
-      <StatSubtitle
+      <TitleStat :title="props.title" />
+      <ContentStat :value="props.value" />
+      <SubtitleStat
         v-if="props.subtitle"
         :subtitle="props.subtitle"
         :subtitleColor="props.subtitleColor"
       />
     </div>
-    <StatIcon
+    <IconStat
       v-if="props.iconName"
       :iconName="props.iconName"
       :iconColor="props.iconColor"

vuejs/client/src/pages/builder/Builder.vue

@@ -76,7 +76,7 @@ const builder = [
     // We need to send specific data for each widget type
     widgets: [
       {
-        type: "StatIcon",
+        type: "IconStat",
         data: {
           iconName: "crown",
           iconColor: "yellow",
@@ -84,21 +84,21 @@ const builder = [
         },
       },
       {
-        type: "StatTitle",
+        type: "TitleStat",
         data: {
           title: "stat title",
           titleClass: "col-span-12",
         },
       },
       {
-        type: "StatValue",
+        type: "ContentStat",
         data: {
           value: "20",
           valueClass: "col-span-12",
         },
       },
       {
-        type: "StatSubtitle",
+        type: "SubtitleStat",
         data: {
           subtitle: "some subtitle",
           subtitleClass: "col-span-12",