From 08016c8159f0358539ddd0339ef8252a061e8b80 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Tue, 30 Sep 2025 18:46:25 +0530
Subject: [PATCH 1/2] Documentation Fixes

- Documentation fixes

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>
---
 docs/.vitepress/components/colors/reds.vue    | 12 ++++----
 docs/.vitepress/components/colors/theme.vue   |  1 +
 docs/.vitepress/components/colors/yellows.vue |  4 ++-
 docs/.vitepress/theme/index.js                | 21 ++++++++++++++
 docs/customization/index.md                   |  2 +-
 docs/customization/theme.md                   |  9 ++----
 docs/guide/coding-standards/accessibility.md  |  6 ++--
 docs/guide/components/file-upload/index.md    |  2 +-
 docs/guide/components/info-tooltip/index.md   |  2 +-
 docs/guide/components/table/index.md          | 11 +++++--
 docs/guide/guidelines/colors.md               |  4 +--
 docs/guide/guidelines/internationalization.md | 29 ++++++++++++++-----
 docs/guide/index.md                           |  2 +-
 docs/guide/quickstart/page-anatomy.md         |  9 ++++--
 14 files changed, 78 insertions(+), 36 deletions(-)
 create mode 100644 docs/.vitepress/theme/index.js

diff --git a/docs/.vitepress/components/colors/reds.vue b/docs/.vitepress/components/colors/reds.vue
index c8c3cc85d9..914a725081 100644
--- a/docs/.vitepress/components/colors/reds.vue
+++ b/docs/.vitepress/components/colors/reds.vue
@@ -21,12 +21,14 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 const colors = ref([
-        {
-          variable: 'red-500',
-          hex: '#da1416'
-        }
-      ])
+  {
+    variable: 'red-500',
+    hex: '#da1416'
+  }
+]);
 </script>
 
 <style lang="scss" scoped>
diff --git a/docs/.vitepress/components/colors/theme.vue b/docs/.vitepress/components/colors/theme.vue
index 2f57413c39..5bd12c8bd8 100644
--- a/docs/.vitepress/components/colors/theme.vue
+++ b/docs/.vitepress/components/colors/theme.vue
@@ -22,6 +22,7 @@
 
 <script setup>
 import { ref } from 'vue';
+
 const themeColors = ref([
         {
           name: "primary",
diff --git a/docs/.vitepress/components/colors/yellows.vue b/docs/.vitepress/components/colors/yellows.vue
index 84eebe3809..d79e767627 100644
--- a/docs/.vitepress/components/colors/yellows.vue
+++ b/docs/.vitepress/components/colors/yellows.vue
@@ -20,7 +20,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue';
+
 const colors = ref([
         {
           variable: 'yellow-500',
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 0000000000..0563899343
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,21 @@
+import DefaultTheme from 'vitepress/theme'
+import All from '../components/colors/all.vue'
+import Blues from '../components/colors/blues.vue'
+import Grays from '../components/colors/grays.vue'
+import Greens from '../components/colors/greens.vue'
+import Reds from '../components/colors/reds.vue'
+import Yellows from '../components/colors/yellows.vue'
+import Theme from '../components/colors/theme.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('colors-all', All)
+    app.component('colors-blues', Blues)
+    app.component('colors-grays', Grays)
+    app.component('colors-greens', Greens)
+    app.component('colors-reds', Reds)
+    app.component('colors-yellows', Yellows)
+    app.component('colors-theme', Theme)
+  }
+}
\ No newline at end of file
diff --git a/docs/customization/index.md b/docs/customization/index.md
index 63ce0605aa..8b9ce82a79 100644
--- a/docs/customization/index.md
+++ b/docs/customization/index.md
@@ -366,6 +366,6 @@ You might notice that there is an HTML element, `<h2>`, used in the example. Thi
 [Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
 
 Customization of the application requires knowledge of Sass and CSS. It also
-will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+will require becoming familiar with the Bootstrap and Bootstrap-Vue-next component
 libraries. This section outlines the global options and variables that can be
 removed or updated to meet organizational brand guidelines.
diff --git a/docs/customization/theme.md b/docs/customization/theme.md
index c182781608..f44e98406d 100644
--- a/docs/customization/theme.md
+++ b/docs/customization/theme.md
@@ -140,7 +140,7 @@ UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with
 custom values.
 
 The `theme-color` map is used heavily throughout the application. The
-Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map.
+Bootstrap-Vue-next components `variant` prop also utilizes the `theme-color` map.
 This map is the key to customizing the application's color palette. Take a look
 at the [color guidelines](/guide/guidelines/colors) to better understand default
 theme-colors map.
@@ -158,17 +158,12 @@ gray variable values.
 [Learn more about Bootstrap
 colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 
-<!-- ### Bootstrap Color Functions
-- `color('<color map key>)`
-- `theme-color('<theme color map key>)`
-- `gray('<gray color palette key'>)` -->
-
 
 #### Example
 ```SCSS
 .some-selector {
   color: color("blue");
-  background: theme-color("light");
+  background-color: $light;
   border: 1px solid $gray-900;
 }
 ```
diff --git a/docs/guide/coding-standards/accessibility.md b/docs/guide/coding-standards/accessibility.md
index 0a9a1a755f..e408e1181e 100644
--- a/docs/guide/coding-standards/accessibility.md
+++ b/docs/guide/coding-standards/accessibility.md
@@ -41,9 +41,9 @@ The OpenBMC Web UI developers should test their development pages using one of
 the tools listed in the tools section below. If using Chrome, the Lighthouse
 application comes bundled with the browser and also includes testing for
 performance and best practices. If there is an issue that is created when using
-a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue
-repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose).
-Contributing to the Bootstrap-Vue open-source library, when possible, is
+a Bootstrap-Vue-next component, we can [create an issue in the Bootstrap-vue-next
+repo](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/new/choose).
+Contributing to the Bootstrap-Vue-next open-source library, when possible, is
 strongly encouraged.
 
 ## Tools
diff --git a/docs/guide/components/file-upload/index.md b/docs/guide/components/file-upload/index.md
index 517e7cfb2f..cbf64e8443 100644
--- a/docs/guide/components/file-upload/index.md
+++ b/docs/guide/components/file-upload/index.md
@@ -1,6 +1,6 @@
 # FormFile
 
-`FormFile` is a custom component wrapper around the Bootstrap-vue Form File
+`FormFile` is a custom component wrapper around the Bootstrap-vue-next Form File
 component. The purpose of this component is to upload files to the BMC.
 
 To use this component:
diff --git a/docs/guide/components/info-tooltip/index.md b/docs/guide/components/info-tooltip/index.md
index b5d14a85c4..684e4a5ddb 100644
--- a/docs/guide/components/info-tooltip/index.md
+++ b/docs/guide/components/info-tooltip/index.md
@@ -1,6 +1,6 @@
 # InfoTooltip
 
-The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with
+The `InfoTooltip` is a custom component that uses a Bootstrap-vue-next tooltip with
 an info icon. This custom component requires a title property containing the
 tooltip text to display to the user.
 
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 50390d36f1..8caa2cd01f 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -96,6 +96,7 @@ columns and add the following props to the `<BTable>` component:
     :fields="fields"
   />
 </template>
+
 <script setup>
 import { ref } from 'vue';
 
@@ -124,9 +125,7 @@ const fields = ref([
 
 To add an expandable row in the table, add a column for the expand button in the
 fields array. Include the tdClass `table-row-expand` to ensure icon rotation is
-handled. Use the built in [cell
-slot](https://bootstrap-vue.org/docs/components/table#comp-ref-BTable-slots) to
-target the expand button column and add a button with the chevron icon.
+handled.
 
 Include the
 [useTableRowExpandComposable](https://github.com/ibm-openbmc/webui-vue/blob/1060-vue3/src/components/Composables/useTableRowExpandComposable.js).
@@ -175,6 +174,7 @@ format the expanded row content. The slot has access to the row `item` property.
     </template>
   </BTable>
 </template>
+
 <script setup>
 import { ref } from 'vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
@@ -253,6 +253,7 @@ if there are no search matches.
   />
   </BContainer>
 </template>
+
 <script setup>
 import { ref, computed } from 'vue';
 import Search from '@/components/Global/Search';
@@ -312,6 +313,7 @@ component will emit a `@click-table-action` with the event value.
     </template>
   </BTable>
 </template>
+
 <script>
 import { ref } from 'vue';
 import IconDelete from '@carbon/icons-vue/es/trash-can/20';
@@ -390,6 +392,7 @@ from the useTableFilterComposable to show the filtered table data.
     />
   </b-container>
 </template>
+
 <script setup>
 import { ref, computed } from 'vue';
 import TableFilter from '@/components/Global/TableFilter.vue';
@@ -491,6 +494,7 @@ To add table batch actions:
     </BTable>
   </b-container>
 </template>
+
 <script>
 import { ref } from 'vue';
 import TableToolbar from '@/components/Global/TableToolbar.vue';
@@ -602,6 +606,7 @@ To add table pagination:
     </BRow>
   </BContainer>
 </template>
+
 <script>
 import { ref } from 'vue';
 import usePaginationComposable from '@/components/Composables/usePaginationComposable';
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index fe3f2d5d4d..828b142adc 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -5,7 +5,7 @@ values, along with additional blue, green, red, and yellow color variables used
 as accent colors for components. The `.scss` component files use these accent
 colors to override default styles set by the Bootstrap library.
 
-- [Learn more about theme customization](/customization/theme/)
+- [Learn more about theme customization](/customization/theme.md)
 - [Open an issue in the OpenBMC webui-vue
   repo](https://github.com/ibm-openbmc/webui-vue/tree/1060-vue3) to request a
   change
@@ -37,7 +37,7 @@ maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
 <colors-all/>
 
 ## Theme Colors
-The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant
+The theme colors are keys in the `theme-colors` map. Bootstrap has a variant
 prop that accepts any of the `theme-colors` keys to set the theme of a
 component.
 
diff --git a/docs/guide/guidelines/internationalization.md b/docs/guide/guidelines/internationalization.md
index e768c096bf..c325081e0b 100644
--- a/docs/guide/guidelines/internationalization.md
+++ b/docs/guide/guidelines/internationalization.md
@@ -55,16 +55,29 @@ node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue
 pluralization.](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization)
 
 ```json
-"modal": {
-  "deleteDump": "Delete dump | Delete dumps"
+"toast": {
+   "errorDelete": "Error deleting %{count} record. | Error deleting %{count} records."
 }
 ```
 
 ```JS
-this.$bvModal
-  .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
-   title: this.$tc('pageDumps.modal.deleteDump'),
-   okTitle: this.$tc('pageDumps.modal.deleteDump'),
-   cancelTitle: this.$t('global.action.cancel'),
-  })
+...
+...
+
+state: () => ({
+    allDumps: [],
+}),
+
+async deleteAllDumps() {
+  const totalDumpCount = this.allDumps.length;
+    ...
+
+      .catch((error) => {
+        console.log(error);
+        throw new Error(
+          i18n.global.t('pageDumps.toast.errorDeleteDump', totalDumpCount),
+        );
+      });
+},
+
 ```
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 296146cc5b..acc3dc7d49 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -37,5 +37,5 @@ documented in [Customization](/customization/).
 
 ## Components
 The [components section](components/) is a guide to using both custom Vue
-components and components from the Bootstrap-Vue library.
+components and components from the Bootstrap-Vue-next library.
 
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md
index 7598d656ff..f8ec60a3d8 100644
--- a/docs/guide/quickstart/page-anatomy.md
+++ b/docs/guide/quickstart/page-anatomy.md
@@ -8,8 +8,8 @@ When creating a new page, each template consists of at least 3 components:
 - `<page-title>`
 - `<page-section>`
 
-Learn more about the [page title](/guide/components/page-title) and [page
-section](/guide/components/page-section) components.
+Learn more about the [page title](/guide/components/page-title/index.md) and [page
+section](/guide/components/page-section/index.md) components.
 
 ```vue
 <template>
@@ -65,10 +65,13 @@ The final SFC will look like this.
     </page-section>
   </BContainer>
 </template>
-<script>
+
+<script setup>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 
+</script>
+
 <style lang="scss" scoped>
     .example-class {
       /* Styles go here */

From 2bd18bcd2ce0b62d8e647507232830f5b056ed18 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Tue, 30 Sep 2025 18:49:46 +0530
Subject: [PATCH 2/2] Fixed code snippet

- Fixed code snippet
---
 docs/guide/guidelines/internationalization.md | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/guide/guidelines/internationalization.md b/docs/guide/guidelines/internationalization.md
index c325081e0b..3fb347ed79 100644
--- a/docs/guide/guidelines/internationalization.md
+++ b/docs/guide/guidelines/internationalization.md
@@ -64,18 +64,17 @@ pluralization.](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html
 ...
 ...
 
-state: () => ({
-    allDumps: [],
-}),
-
-async deleteAllDumps() {
-  const totalDumpCount = this.allDumps.length;
+async clearAllEntries(data) {
+    ...
     ...
 
       .catch((error) => {
-        console.log(error);
-        throw new Error(
-          i18n.global.t('pageDumps.toast.errorDeleteDump', totalDumpCount),
+          console.log(error);
+          throw new Error(
+          i18n.global.t(
+            'pageDeconfigurationRecords.toast.errorDelete',
+            data.length,
+          ),
         );
       });
 },