Modal report (#17)

* Base modal implementation

* Modal Report page

* Upgrade multiselect

* Fixed multiselect styling

* fix build err

* rev change

* Added dropdown component, addressed changes

Removed unused classes after vue multiselect was removed
Updated markdown-it and xss

* Update index.js

* fix lint

* Fix prettier code style

* Address most changes

* New dropdown

* Undo comment

Makes the component close when not focused

* Fix accessibility issues

* Fix double focus

* addressed changes to modal

* Run Prettier

* Update ModalReport.vue

* Fixed spacing issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

docs/.vitepress/config.js

@@ -26,6 +26,8 @@ export default {
           { text: 'Drop Area', link: '/components/drop-area' },
           { text: 'Icons', link: '/components/icons' },
           { text: 'Pagination', link: '/components/pagination' },
+          { text: 'Modal', link: '/components/modal' },
+          { text: 'Dropdown Select', link: '/components/dropdown-select' },
           { text: 'Project Card', link: '/components/project-card' },
           { text: 'Environment Indicator', link: '/components/environment-indicator' },
           { text: 'Categories', link: '/components/categories' },

docs/.vitepress/theme/DemoContainer.vue

@@ -2,10 +2,6 @@
   <div class="demo"><slot /></div>
 </template>
 
-<script>
-export default {}
-</script>
-
 <style lang="scss" scoped>
 .demo {
   background: var(--color-raised-bg);
@@ -16,5 +12,8 @@ export default {}
   gap: var(--gap-md);
   align-items: center;
   flex-wrap: wrap;
+  background: var(--color-raised-bg);
+  border-radius: var(--radius-lg);
+  padding: var(--gap-md);
 }
 </style>

docs/components/dropdown-select.md

@@ -0,0 +1,19 @@
+# Dropdown
+
+<DemoContainer>
+  <DropdownSelect
+    id="report-type"
+    v-model="reportType"
+    :options="['Daily', 'Weekly', 'Monthly']"
+    defaultValue="Choose Frequency"
+  />
+</DemoContainer>
+
+```vue
+<DropdownSelect
+  id="report-type"
+  v-model="reportType"
+  :options="['Daily', 'Weekly', 'Monthly']"
+  defaultValue="Choose Frequency"
+/>
+```

docs/components/modal.md

@@ -0,0 +1,22 @@
+# Modal
+:::raw
+
+<DemoContainer>
+  <Button :action="() => this.$refs.reportModal.modal.show()">Show Modal</Button>
+  <ModalReport
+  ref="reportModal"
+  itemType="project"
+  :reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
+  >
+  </ModalReport>
+</DemoContainer>
+:::
+
+```vue
+  <Button :action="() => this.$refs.reportModal.modal.show()">Show Modal</Button>
+  <ModalReport
+  ref="reportModal"
+  itemType="project"
+  :reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
+  />
+```