From 4ae778636209aebc229184fe01d69799a54bc98f Mon Sep 17 00:00:00 2001 From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com> Date: Fri, 24 Mar 2023 15:15:34 -0400 Subject: [PATCH] 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 --- docs/.vitepress/config.js | 2 + docs/.vitepress/theme/DemoContainer.vue | 7 +- docs/components/dropdown-select.md | 19 + docs/components/modal.md | 22 + lib/assets/styles/classes.scss | 15 + lib/assets/styles/defaults.scss | 17 +- lib/components/base/DropdownSelect.vue | 235 +++ lib/components/base/Modal.vue | 121 ++ lib/components/base/ModalReport.vue | 149 ++ lib/components/index.js | 3 + lib/components/parse.js | 136 ++ lib/index.js | 2 +- package.json | 5 +- yarn.lock | 2075 +++++++++++++++++++++++ 14 files changed, 2801 insertions(+), 7 deletions(-) create mode 100644 docs/components/dropdown-select.md create mode 100644 docs/components/modal.md create mode 100644 lib/components/base/DropdownSelect.vue create mode 100644 lib/components/base/Modal.vue create mode 100644 lib/components/base/ModalReport.vue create mode 100644 lib/components/parse.js create mode 100644 yarn.lock diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 5ddf33fb1..e6738f6fe 100644 --- a/docs/.vitepress/config.js +++ b/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' }, diff --git a/docs/.vitepress/theme/DemoContainer.vue b/docs/.vitepress/theme/DemoContainer.vue index 2cb11e8ab..dbbbb7b23 100644 --- a/docs/.vitepress/theme/DemoContainer.vue +++ b/docs/.vitepress/theme/DemoContainer.vue @@ -2,10 +2,6 @@
- - diff --git a/docs/components/dropdown-select.md b/docs/components/dropdown-select.md new file mode 100644 index 000000000..4ec472f08 --- /dev/null +++ b/docs/components/dropdown-select.md @@ -0,0 +1,19 @@ +# Dropdown + + + + + +```vue + +``` diff --git a/docs/components/modal.md b/docs/components/modal.md new file mode 100644 index 000000000..38db5222f --- /dev/null +++ b/docs/components/modal.md @@ -0,0 +1,22 @@ +# Modal +:::raw + + + + + + +::: + +```vue + + +``` diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss index 064833c8c..e4be2067b 100644 --- a/lib/assets/styles/classes.scss +++ b/lib/assets/styles/classes.scss @@ -753,3 +753,18 @@ a, } } } + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background: url(http://dropdown/arrow/url/) no-repeat; + background-position: right center; + background-color: #cccccc; + color: #000000; + border: 1px solid #000000; +} diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss index 3c8274fea..297a307e8 100644 --- a/lib/assets/styles/defaults.scss +++ b/lib/assets/styles/defaults.scss @@ -51,7 +51,8 @@ a.uncolored { color: inherit; } -input[type='text'] { +input[type='text'], +textarea { border-radius: var(--radius-md); box-sizing: border-box; border: 2px solid transparent; @@ -157,3 +158,17 @@ button { transform: none !important; } } + +input, +button { + &:disabled { + cursor: not-allowed !important; + } +} + +@media (prefers-reduced-motion) { + .button-animation, + button { + transform: none !important; + } +} diff --git a/lib/components/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue new file mode 100644 index 000000000..73119bf9d --- /dev/null +++ b/lib/components/base/DropdownSelect.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/lib/components/base/Modal.vue b/lib/components/base/Modal.vue new file mode 100644 index 000000000..53943a909 --- /dev/null +++ b/lib/components/base/Modal.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/lib/components/base/ModalReport.vue b/lib/components/base/ModalReport.vue new file mode 100644 index 000000000..dc18a8c45 --- /dev/null +++ b/lib/components/base/ModalReport.vue @@ -0,0 +1,149 @@ +