#2 Add an option to center Card's content

Author: alies-dev

README.md

@@ -24,6 +24,9 @@ public function cards()
 ```
 
 ## Options
- - `->html('string')`: Set HTML or plain content.
- - `->markdown('string')`: Set Markdown content that will be converted into HTML.
- - `->view('path.to.view', [])`: Specify blade view file and optionally pass an array of data to view.
+ - Set content
+     - `->html('string')`: Set HTML or plain content.
+     - `->markdown('string')`: Set Markdown content that will be converted into HTML.
+     - `->view('path.to.view', [])`: Specify blade view file and optionally pass an array of data to view.
+ - Styling
+    - `->center(true)`: Center card's content.

dist/js/card.js

@@ -1,5 +1,5 @@
 <template>
-    <card class="flex flex-col items-center justify-center">
+    <card class="flex flex-col justify-center" :class="cardClassList">
         <div class="px-3 py-3">
             <section v-html="card.content">
             </section>
@@ -12,7 +12,19 @@
     props: [
       'card',
     ],
+    computed: {
+      textClassList() {
+        return this.card.center ? 'text-center' : '';
+      },
+      cardClassList() {
+        const classes = [];
+        if (this.card.center) {
+          classes.push('items-center');
+        }
 
+        return classes.join(' ');
+      },
+    },
     mounted() {
       //
     },

resources/js/components/Card.vue

@@ -25,6 +25,7 @@ public function __construct($component = null)
         parent::__construct($component);
 
         $this->withMeta([
+            'center' => false,
             'content' => '',
         ]);
     }
@@ -75,4 +76,16 @@ public function view(string $view, array $viewData = [])
 
         return $this->html($htmlContent);
     }
+
+    /**
+     * Center card's content
+     *
+     * @param bool $boolean
+     *
+     * @return HtmlCard
+     */
+    public function center($boolean = true)
+    {
+        return $this->withMeta(['center' => $boolean]);
+    }
 }