RTIInternational · hardingalexh · Feb 16, 2025 · Feb 16, 2025 · Feb 16, 2025 · Feb 16, 2025
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,7 +11,7 @@ jobs:
         with:
           node-version: '20.x'
       - run: npm ci
-      - run: npm run lint --no-fix --no-error-on-unmatched-patt
+      - run: npm run lint
 
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -1,53 +1,67 @@
 export default {
-    title: 'Harness-Vue-Bootstrap',
-    description: '',
-    themeConfig: {
-        sidebar: [
-            {
-                text: 'Introduction',
-                collapsible: true,
-                items: [
-                    {text: 'About', link: '/introduction/'},
-                    {text: 'Usage', link: '/introduction/usage'}
-                ]
-            },
-            {
-                text: 'Layouts',
-                collapsible: true,
-                items: [
-                    {text:'Filter Grid', link: '/components/layouts/filterGrid'},
-                    {text:'Chart Grid', link: '/components/layouts/chartGrid'},
-                ]
-            },
-            {
-                text: 'Filters',
-                collapsible: true,
-                items: [
-                    {text: 'Input', link: '/components/filters/input'},
-                    {text: 'Select', link: '/components/filters/select'},
-                    {text: 'Checkbox Group', link: '/components/filters/checkboxGroup'},
-                    {text: 'Multi-Select Listbox', link: '/components/filters/multiselectListbox'},
-                    {text: 'Validation, Styling, Accessibility', link: '/components/filters/validationAndStyling'},
-                ]
-            },
-            {
-                text: 'Charts and Tables',
-                collapsible: true,
-                items: [
-                    {text: 'Basic Table', link: '/components/charts-and-tables/basicTable'},
-                    {text: 'Chart with Table', link: '/components/charts-and-tables/chartWithTable'}
-                ]
-            }
+  title: "Harness-Vue-Bootstrap",
+  description: "",
+  themeConfig: {
+    sidebar: [
+      {
+        text: "Introduction",
+        collapsible: true,
+        items: [
+          { text: "About", link: "/introduction/" },
+          { text: "Usage", link: "/introduction/usage" },
         ],
-        footer: {
-            message: 'Released under the MIT License.',
-            copyright: 'Built by <span class="vp-doc"><a href="https://www.rti.org">RTI International</a></span> Center for Data Science'
-        },
-        nav: [
-            { text: 'Guide', link: '/introduction/' },
+      },
+      {
+        text: "Layouts",
+        collapsible: true,
+        items: [
+          { text: "Filter Grid", link: "/components/layouts/filterGrid" },
+          { text: "Chart Grid", link: "/components/layouts/chartGrid" },
         ],
-        socialLinks: [
-            { icon: 'github', link: 'https://github.com/RTIInternational/harness-vue-bootstrap' }
-        ]
-    }
-  }
+      },
+      {
+        text: "Filters",
+        collapsible: true,
+        items: [
+          { text: "Input", link: "/components/filters/input" },
+          { text: "Select", link: "/components/filters/select" },
+          { text: "Checkbox Group", link: "/components/filters/checkboxGroup" },
+          {
+            text: "Multi-Select Listbox",
+            link: "/components/filters/multiselectListbox",
+          },
+          {
+            text: "Validation, Styling, Accessibility",
+            link: "/components/filters/validationAndStyling",
+          },
+        ],
+      },
+      {
+        text: "Charts and Tables",
+        collapsible: true,
+        items: [
+          {
+            text: "Basic Table",
+            link: "/components/charts-and-tables/basicTable",
+          },
+          {
+            text: "Chart with Table",
+            link: "/components/charts-and-tables/chartWithTable",
+          },
+        ],
+      },
+    ],
+    footer: {
+      message: "Released under the MIT License.",
+      copyright:
+        'Built by <span class="vp-doc"><a href="https://www.rti.org">RTI International</a></span> Center for Data Science',
+    },
+    nav: [{ text: "Guide", link: "/introduction/" }],
+    socialLinks: [
+      {
+        icon: "github",
+        link: "https://github.com/RTIInternational/harness-vue-bootstrap",
+      },
+    ],
+  },
+};
diff --git a/docs/.vitepress/harness-pages/examplePage.js b/docs/.vitepress/harness-pages/examplePage.js
@@ -3,7 +3,7 @@ export default class ExamplePage {
   key = "examplePage";
   pageComponent = {};
   pageProps = {};
-  loadData = async (state, pageObject, hs) => {
+  loadData = async () => {
     return {
       exampleChartWithTable: {
         labels: Array(5)
@@ -116,7 +116,8 @@ export default class ExamplePage {
           {
             key: "exampleOption",
             label: "Example Option",
-            description: "This is a sample description replacing the title attribute",
+            description:
+              "This is a sample description replacing the title attribute",
             default: true,
           },
           {
@@ -126,7 +127,7 @@ export default class ExamplePage {
           {
             key: "exampleOption3",
             label: "Example Option 3",
-            description: "This is a sample description for Example Option 3"
+            description: "This is a sample description for Example Option 3",
           },
         ],
       },
@@ -167,20 +168,19 @@ export default class ExamplePage {
       exampleInputDatalist: {
         label: "Example Input With Datalist",
         component: "HarnessVueBootstrapInput",
-        options: [{key: "", value: ""}, ...searchableOptions],
+        options: [{ key: "", value: "" }, ...searchableOptions],
       },
       exampleInputMinMaxStep: {
         key: "exampleInputMinMaxStep",
         label: "Example Input",
         component: "HarnessVueBootstrapInput",
         props: {
-          type: 'number',
+          type: "number",
           min: 0.05,
           max: 0.24,
-          step: 0.001
+          step: 0.001,
         },
         options: [],
-
       },
       exampleOptionInput: {
         key: "exampleOptionInput",
@@ -253,30 +253,29 @@ export default class ExamplePage {
           step: 1,
           helperText: "Range: 40-50",
           allowValidation: true,
-          invalidFeedback: "Please choose a number between 40 and 50"
-        }
+          invalidFeedback: "Please choose a number between 40 and 50",
+        },
       },
       exampleCheckPickTwo: {
         label: "Example Checkbox With Validation",
         component: "HarnessVueBootstrapCheckboxGroup",
         valueType: "array",
         valueValidator: (harness, value) => value.length >= 2,
         props: {
-
           helperText: "Choose at least two",
           allowValidation: true,
           showValid: true,
           showInvalid: true,
           invalidFeedback: "Please choose at least two",
           validFeedback: "Well done!",
-          multiple: true
+          multiple: true,
         },
         options: [
-          {key: "foo", label: "foo"},
-          {key: "bar", label: "bar"},
-          {key: "foobar", label: "foobar"},
-          {key: "barfoo", label: "barfoo"},
-        ]
+          { key: "foo", label: "foo" },
+          { key: "bar", label: "bar" },
+          { key: "foobar", label: "foobar" },
+          { key: "barfoo", label: "barfoo" },
+        ],
       },
     };
     range.forEach((num) => {
@@ -439,7 +438,7 @@ export default class ExamplePage {
                       ? datum[key].toUpperCase() + " TRANSFORMED UPPERCASE"
                       : datum[key].toLocaleString();
                   return acc;
-                }, {})
+                }, {}),
               );
             });
             return newData;
@@ -481,7 +480,7 @@ export default class ExamplePage {
                 acc[map[key]] =
                   datum[key].toUpperCase() + " TRANSFORMED UPPERCASE";
                 return acc;
-              }, {})
+              }, {}),
             );
           });
           return newData.length ? newData : [];
@@ -506,7 +505,7 @@ export default class ExamplePage {
                 acc[map[key]] =
                   datum[key].toUpperCase() + " TRANSFORMED UPPERCASE";
                 return acc;
-              }, {})
+              }, {}),
             );
           });
           return newData.length ? newData : [];

diff --git a/docs/.vitepress/theme/barChart.vue b/docs/.vitepress/theme/barChart.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <img src="/chart.png" />
+  </div>
+</template>
+<script setup></script>
diff --git a/docs/.vitepress/theme/barchart.vue b/docs/.vitepress/theme/barchart.vue
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -1,20 +1,18 @@
-
-import DefaultTheme from 'vitepress/theme'
+import DefaultTheme from "vitepress/theme";
 import { createPinia } from "pinia";
-import { harnessPlugin, harnessMixin, useHarnessStore } from "@rtidatascience/harness-vue"
-import { harnessVueBootstrap } from "../../../src/harness-vue-bootstrap"
-import barchart from './barchart.vue'
-import pages from "../harness-pages/manifest"
-
-import 'bootstrap/scss/bootstrap.scss'
-import 'bootstrap-icons/font/bootstrap-icons.css'
-
-import './main.css'
-
-
-
+import {
+  harnessPlugin,
+  harnessMixin,
+  useHarnessStore,
+} from "@rtidatascience/harness-vue";
+import { harnessVueBootstrap } from "../../../src/harness-vue-bootstrap";
+import barchart from "./barChart.vue";
+import pages from "../harness-pages/manifest";
 
+import "bootstrap/scss/bootstrap.scss";
+import "bootstrap-icons/font/bootstrap-icons.css";
 
+import "./main.css";
 
 export default {
   ...DefaultTheme,
@@ -25,34 +23,37 @@ export default {
     ctx.app.use(harnessPlugin, { pinia, pages });
     ctx.app.mixin(harnessMixin(pinia));
     ctx.app.use(harnessVueBootstrap);
-    ctx.app.component('barchart', barchart)
-    if(!import.meta.env.SSR){
+    ctx.app.component("barchart", barchart);
+    if (!import.meta.env.SSR) {
       // this function syncs dark mode to bootstrap
       // vitepress uses "dark" as a class on the HTML element
       // bootstrap uses an attribute called "data-bs-theme"
-        function darkModeSyncer(mutationList, observer){
-          mutationList.forEach(mutation => {
-            // sync dark mode to dark
-            if(mutation.target.classList.contains("dark") && mutation.target.getAttribute("data-bs-theme") !== "dark"){
-              mutation.target.setAttribute("data-bs-theme", "dark");
-            }
-
-            // sync dark mode to light
-            if(!mutation.target.classList.contains("dark") && mutation.target.getAttribute("data-bs-theme") === "dark"){
-              mutation.target.setAttribute("data-bs-theme", "");
-            }
-          })
-        }
-        const html = document.querySelector('html');
-        const observer = new MutationObserver(darkModeSyncer)
-      observer.observe(html, {attributes: true})
+      function darkModeSyncer(mutationList) {
+        mutationList.forEach((mutation) => {
+          // sync dark mode to dark
+          if (
+            mutation.target.classList.contains("dark") &&
+            mutation.target.getAttribute("data-bs-theme") !== "dark"
+          ) {
+            mutation.target.setAttribute("data-bs-theme", "dark");
+          }
+
+          // sync dark mode to light
+          if (
+            !mutation.target.classList.contains("dark") &&
+            mutation.target.getAttribute("data-bs-theme") === "dark"
+          ) {
+            mutation.target.setAttribute("data-bs-theme", "");
+          }
+        });
+      }
+      const html = document.querySelector("html");
+      const observer = new MutationObserver(darkModeSyncer);
+      observer.observe(html, { attributes: true });
     }
-
-
-    const harness = useHarnessStore(pinia)
-    const page = harness.getPageStores['examplePage'](pinia)    
-    page.loadData()
-
-
-  }
-}
+
+    const harness = useHarnessStore(pinia);
+    const page = harness.getPageStores["examplePage"](pinia);
+    page.loadData();
+  },
+};