Feat: date display

src/components/MonthPresentation.vue

@@ -1,7 +1,12 @@
 <template>
 <div class="month-presentation">
   <div class="date">
-    {{ TheDate }}
+    <div class="month">
+       {{ theMonth }} 
+    </div> 
+    <div class="year">
+       {{ theYear }} 
+    </div> 
   </div>
   <div id="display">
     <ul>
@@ -37,7 +42,7 @@
         </li>
     </ul>
   </div>
-  <div class="actions">
+  <div>
     <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
     <button class="validate" @click="save" v-show="editing"> Valider </button>
     <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
@@ -47,6 +52,7 @@
 
 <script>
 import { mapActions } from 'vuex'
+import {  parseISO, format } from 'date-fns'
 export default {
   name: 'MonthPresentation',
   props: {
@@ -65,6 +71,15 @@ export default {
         this.monthCopy =  {...this.TheMonth}
       },
   computed: {
+      rawDate: function () {
+            return parseISO(this.TheDate, "yyyy-MM", new Date())
+      },
+      theMonth: function () {
+          return format(this.rawDate, "MMM", )
+      },
+      theYear: function () {
+          return format(this.rawDate, "YYY", )
+      },
   },
   methods: {
     ...mapActions('travail', {
@@ -92,9 +107,15 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
+        /*
         display: inline-flex;
         flex-direction: row;
-        background-color: mintcream;
+        */
+        display: grid;
+        grid-template-columns: 1fr 6fr 150px;
+
+        box-shadow: 2px 2px 5px gray;
+        border-left: 1rem solid black;
         align-items: center;
         justify-content: space-between;
         width: 100%;
@@ -105,8 +126,12 @@ export default {
     }
 
     .date {
-        font-size: 1.5em;
+        font-size: 1em;
         font-weight: bold;
+        border-right: 1px solid black;
+    }
+    .month{
+        font-size: 2em;
     }
 
     ul {