Add textAlign and padding features to Title component

Author: graphieros

src/atoms/Title.vue

@@ -19,13 +19,16 @@ const CONFIG = useNestedProp({
             color: "",
             fontSize: 20,
             bold: true,
+            textAlign: 'center',
+            paddingLeft: 0,
+            paddingRight: 0
         },
         subtitle: {
             cy: "",
             text: "",
             color: "",
             fontSize: 14,
-            bold: false,
+            bold: false
         },
     }
 });
@@ -35,22 +38,22 @@ const CONFIG = useNestedProp({
 <template>
   <div
     :data-cy="CONFIG.title.cy"
-    :style="`width: 100%; text-align:center;color:${
+    :style="`width: calc(100% - ${CONFIG.title.paddingLeft + CONFIG.title.paddingRight}px); text-align:${CONFIG.title.textAlign};color:${
       CONFIG.title.color
     };font-size:${CONFIG.title.fontSize}px;font-weight:${
       CONFIG.title.bold ? 'bold' : ''
-    }`"
+    };padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;`"
   >
     {{ CONFIG.title.text }}
   </div>
   <div
     :data-cy="CONFIG.subtitle.cy"
     v-if="CONFIG.subtitle.text"
-    :style="`width: 100%; text-align:center;color:${
+    :style="`width: calc(100% - ${CONFIG.title.paddingLeft + CONFIG.title.paddingRight}px); text-align:${CONFIG.title.textAlign};color:${
       CONFIG.subtitle.color
     };font-size:${CONFIG.subtitle.fontSize}px;font-weight:${
       CONFIG.subtitle.bold ? 'bold' : ''
-    }`"
+    };padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;`"
   >
     {{ CONFIG.subtitle.text }}
   </div>

src/useConfig.js

@@ -52,6 +52,9 @@ export function useConfig() {
         color: COLOR_BLACK,
         fontSize: FONT._20,
         bold: true,
+        textAlign: POSITION.CENTER,
+        paddingLeft: 0,
+        paddingRight: 0,
         subtitle: {
             color: COLOR_GREY,
             text: "",

types/vue-data-ui.d.ts

@@ -15,6 +15,9 @@ declare module 'vue-data-ui' {
         color?: string;
         fontSize?: number;
         bold?: boolean;
+        textAlign?: TextAlign;
+        paddingLeft?: number;
+        paddingRight?: number;
         subtitle?: {
             color?: string;
             text?: string;