Documentation Updates

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>

docs/.vitepress/components/colors/theme.vue

@@ -22,6 +22,7 @@
 
 <script setup>
 import { ref } from 'vue';
+
 const themeColors = ref([
         {
           name: "primary",

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',

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)
+  }
+}

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.

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;
 }
 ```

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

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:

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.
 

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';

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.
 

docs/guide/guidelines/internationalization.md

@@ -55,16 +55,28 @@ 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'),
-  })
+...
+...
+
+async clearAllEntries(data) {
+    ...
+    ...
+
+      .catch((error) => {
+          console.log(error);
+          throw new Error(
+          i18n.global.t(
+            'pageDeconfigurationRecords.toast.errorDelete',
+            data.length,
+          ),
+        );
+      });
+},
+
 ```

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.
 

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 */