Merge pull request bootstrap-vue-next#1117 from VividLemon/main

docs: migration wrapper

Author: VividLemon

apps/docs/src/components/MigrationWrapper.vue

@@ -1,18 +1,36 @@
 <template>
-  <b-card> {{ $props }} </b-card>
+  <b-card>
+    <template #header>
+      <div class="mb-2">
+        <h3>{{ component }} - {{ change }}</h3>
+      </div>
+      <b-badge :variant="difficultyVariant">{{ difficulty }}</b-badge>
+    </template>
+    <div class="mb-2">
+      <h4>Rationale:</h4>
+      {{ rationale }}
+    </div>
+    <h4>Fix:</h4>
+    {{ fix }}
+  </b-card>
 </template>
 
 <script setup lang="ts">
-import {BCard} from 'bootstrap-vue-next'
+import {computed} from 'vue'
+import {BBadge, BCard, type ColorVariant} from 'bootstrap-vue-next'
 
-defineProps<{
-  difficulty: 'hard' | 'normal' | 'easy'
+const props = defineProps<{
+  difficulty: 'hard' | 'medium' | 'easy'
   component: string
+  change: string
   /**
    * The rationale for the change
    */
   rationale: string
   fix: string
-  description: string
 }>()
+
+const difficultyVariant = computed<ColorVariant>(() =>
+  props.difficulty === 'hard' ? 'danger' : props.difficulty === 'medium' ? 'warning' : 'success'
+)
 </script>

apps/docs/src/migration-guide.md

@@ -1 +1,45 @@
-# Hello World
+# Migration Guide
+
+<migration-wrapper v-for="(item, i) in changes" :key="i" v-bind="item" class="my-3" />
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import MigrationWrapper from './components/MigrationWrapper.vue'
+
+const changes = computed<{
+  difficulty: 'hard' | 'medium' | 'easy'
+  component: string
+  change: string
+  /**
+   * The rationale for the change
+   */
+  rationale: string
+  fix: string
+  description: string
+}[]>(() => [
+  {
+    change: 'subTitle prop renamed to subtitle',
+    fix: "Any instances of using prop 'subTitle' on BCard should be replaced with 'subtitle'",
+    component: 'BCard',
+    difficulty: 'easy',
+    rationale:
+      "The word 'subtitle' is a single word. CamelCase of the word 'subTitle' indicates that it would be multi word, sub & title. This is incorrect",
+  },
+  {
+    change: 'subTitleTag prop renamed to subtitleTag',
+    fix: "Any instances of using prop 'subTitleTag' on BCard should be replaced with 'subtitleTag'",
+    component: 'BCard',
+    difficulty: 'easy',
+    rationale:
+      "The word 'subtitle' is a single word. CamelCase of the word 'subTitle' indicates that it would be multi word, sub & title. This is incorrect",
+  },
+  {
+    change: 'subTitleTextVariant prop renamed to subtitleTextVariant',
+    fix: "Any instances of using prop 'subTitleTextVariant' on BCard should be replaced with 'subtitleTextVariant'",
+    component: 'BCard',
+    difficulty: 'easy',
+    rationale:
+      "The word 'subtitle' is a single word. CamelCase of the word 'subTitle' indicates that it would be multi word, sub & title. This is incorrect",
+  },
+].sort((a, b) => a.component.localeCompare(b.component)))
+</script>