refactor: CMedia: rename props, change behavior

- replace asidePositionClasses prop with addAsideMargin boolean,
- rename asidePosition to asideVerticalPosition

Author: woothu

src/components/Media/CMedia.vue

@@ -19,12 +19,15 @@ export default {
     CImg
   },
   props: {
-    asidePositionClasses: [String, Array, Object],
+    addAsideMargin: {
+      type: Boolean,
+      default: true
+    },
     addAsideClasses: [String, Array, Object],
     addBodyClasses: [String, Array, Object],
     asideRight: Boolean,
     asideImageProps: Object,
-    asidePosition: {
+    asideVerticalPosition: {
       type: String,
       default: 'start',
       validator: val => ['start', 'center', 'end', 'stretch'].includes(val)
@@ -36,19 +39,16 @@ export default {
         {
           blankColor: '#777777',
           width: '64px',
-          height: this.asidePosition === 'stretch' ? '100%' : '64px'
+          height: this.asideVerticalPosition === 'stretch' ? '100%' : '64px'
         },
         this.asideImageProps || {}
       )
     },
-    computedAsidePositionClasses () {
-      return this.asidePositionClasses || `m${this.asideRight? 'l' : 'r' }-3`
-    },
     asideClasses () {
       return [
-        this.computedAsidePositionClasses,
+        this.addAsideMargin ? `m${this.asideRight? 'l' : 'r' }-3` : '',
         this.addAsideClasses,
-        `align-self-${this.asidePosition}`
+        `align-self-${this.asideVerticalPosition}`
       ]
     },
     mediaBodyClasses () {

src/components/Media/tests/CMedia.spec.js

@@ -5,11 +5,11 @@ const ComponentName = 'CMedia'
 const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
-    asidePositionClasses: 'position-class',
+    addAsideMargin: false,
     addAsideClasses: 'additional-aside-class',
     addBodyClasses: 'additional-body-class',
     asideRight: true,
-    asidePosition: 'stretch'
+    asideVerticalPosition: 'stretch'
   },
   slots: {
     default: 'CMedia content'

src/components/Media/tests/__snapshots__/CMedia.spec.js.snap

@@ -26,7 +26,7 @@ exports[`CMedia renders correctly 2`] = `
   class="media d-flex flex-row-reverse"
 >
   <div
-    class="position-class additional-aside-class align-self-stretch"
+    class="additional-aside-class align-self-stretch"
   >
     <svg
       class=""

src/components/index.d.ts

@@ -360,12 +360,12 @@ export declare class CListGroupitem extends CLink {
 }
 
 export declare class CMedia extends Vue {
-  asidePositionClasses: [string, Array<any>, object]
+  addAsideMargin: boolean
   addAsideClasses: [string, Array<any>, object]
   addBodyClasses: [string, Array<any>, object]
   asideRight: boolean
   asideImageProps: object
-  asidePosition: string
+  asideVerticalPosition: string
 }
 
 export declare class CModal extends Vue {