Skip to content

Commit 8519f41

Browse files
egauzensegauzens
committed
Added dropdown multiselect component
1 parent 4276d56 commit 8519f41

File tree

6 files changed

+815
-5
lines changed

6 files changed

+815
-5
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sparc-design-system-components-2",
3-
"version": "0.0.13",
3+
"version": "0.0.14",
44
"private": false,
55
"scripts": {
66
"dev": "vite",

‎src/App.vue

Lines changed: 250 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
:visible="dialogVisibleLarge"
106106
@close-download-dialog="dialogVisibleLarge = false"
107107
>
108-
<template class="content" #optionalContent>
108+
<template #optionalContent>
109109
<h1>Direct download</h1>
110110
<div>
111111
<p>You can download the raw files and metadata directly to your computer as a zip archive free of charge.</p>
@@ -115,7 +115,7 @@
115115
<el-button class="download-button">Download</el-button>
116116
</div>
117117
</template>
118-
<template class="content" #mainContent>
118+
<template #mainContent>
119119
<h1>Download from AWS</h1>
120120
<p>
121121
Raw files and metadata are stored in an AWS S3 Requester Pays bucket.
@@ -163,6 +163,34 @@
163163
:display="r.display"
164164
/>
165165
</div>
166+
<el-col class="dropdown-multiselect">
167+
<el-row>
168+
<dropdown-multiselect
169+
:category="oneOptionsDropdownMultiselectCategory"
170+
/>
171+
</el-row>
172+
<el-row>
173+
<dropdown-multiselect
174+
:category="twoOptionsDropdownMultiselectCategory"
175+
:tooltip="dropdownMultiselectTooltip"
176+
/>
177+
</el-row>
178+
<el-row>
179+
<dropdown-multiselect
180+
:category="nineOptionsDropdownMultiselectCategory"
181+
/>
182+
</el-row>
183+
<el-row>
184+
<dropdown-multiselect
185+
:category="fifteenOptionsDropdownMultiselectCategory"
186+
/>
187+
</el-row>
188+
<el-row>
189+
<dropdown-multiselect
190+
:category="multiLevelDropdownMultiselectCategory"
191+
/>
192+
</el-row>
193+
</el-col>
166194
</main>
167195
</template>
168196

@@ -172,6 +200,7 @@
172200
import SparcLogo from './components/SparcLogo.vue'
173201
import LargeModal from './components/LargeModal.vue'
174202
import SparcRadio from './components/SparcRadio.vue'
203+
import DropdownMultiselect from './components/DropdownMultiselect/DropdownMultiselect.vue'
175204
import { ref } from 'vue'
176205
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
177206
@@ -410,13 +439,219 @@
410439
"embargo": false
411440
}]
412441
442+
const dropdownMultiselectTooltip = "This is a very long test<br/>tooltip for the dropdown<br/>multiselect component."
443+
const oneOptionsDropdownMultiselectCategory = {
444+
label: 'One Option',
445+
id: '0',
446+
data: [
447+
{
448+
label: 'One',
449+
id: '1',
450+
}]
451+
}
452+
const twoOptionsDropdownMultiselectCategory = {
453+
label: 'Two Options',
454+
id: '0',
455+
data: [
456+
{
457+
label: 'One',
458+
id: '1',
459+
},
460+
{
461+
label: 'Two',
462+
id: '2',
463+
}]
464+
}
465+
const nineOptionsDropdownMultiselectCategory = {
466+
label: 'Nine Options',
467+
id: '0',
468+
data: [
469+
{
470+
label: 'One.One',
471+
id: '1',
472+
},
473+
{
474+
label: 'One.Two',
475+
id: '2',
476+
},
477+
{
478+
label: 'Three',
479+
id: '3',
480+
},
481+
{
482+
label: 'Four',
483+
id: '4',
484+
},
485+
{
486+
label: 'Five',
487+
id: '5',
488+
},
489+
{
490+
label: 'Six',
491+
id: '6',
492+
},
493+
{
494+
label: 'Seven',
495+
id: '7',
496+
},
497+
{
498+
label: 'Eight',
499+
id: '8',
500+
},
501+
{
502+
label: 'Nine',
503+
id: '9',
504+
}]
505+
}
506+
const multiLevelDropdownMultiselectCategory = {
507+
label: 'Multi-Level',
508+
id: '0',
509+
data: [
510+
{
511+
label: 'One',
512+
id: '1',
513+
children: [
514+
{
515+
label: 'Child One',
516+
id: '6',
517+
},
518+
{
519+
label: 'Child Two',
520+
id: '7',
521+
},
522+
{
523+
label: 'Child Three',
524+
id: '8',
525+
}]
526+
},
527+
{
528+
label: 'Two',
529+
id: '2',
530+
},
531+
{
532+
label: 'Three',
533+
id: '3',
534+
children: [
535+
{
536+
label: 'Child One',
537+
id: '9',
538+
},
539+
{
540+
label: 'Child Two',
541+
id: '10',
542+
},
543+
{
544+
label: 'Child Three',
545+
id: '11',
546+
},
547+
{
548+
label: 'Child Four',
549+
id: '12',
550+
},
551+
{
552+
label: 'Child Five',
553+
id: '13',
554+
},
555+
{
556+
label: 'Child Six',
557+
id: '14',
558+
},
559+
{
560+
label: 'Child Seven',
561+
id: '15',
562+
},
563+
{
564+
label: 'Child Eight',
565+
id: '16',
566+
},
567+
{
568+
label: 'Child Nine',
569+
id: '17',
570+
}]
571+
},
572+
{
573+
label: 'Four',
574+
id: '4',
575+
},
576+
{
577+
label: 'Five',
578+
id: '5',
579+
}]
580+
};
581+
const fifteenOptionsDropdownMultiselectCategory = {
582+
label: 'Fifteen Options',
583+
id: '0',
584+
data: [
585+
{
586+
label: 'One',
587+
id: '1',
588+
},
589+
{
590+
label: 'Two',
591+
id: '2',
592+
},
593+
{
594+
label: 'Three',
595+
id: '3',
596+
},
597+
{
598+
label: 'Four',
599+
id: '4',
600+
},
601+
{
602+
label: 'Five',
603+
id: '5',
604+
},
605+
{
606+
label: 'Six',
607+
id: '6',
608+
},
609+
{
610+
label: 'Seven',
611+
id: '7',
612+
},
613+
{
614+
label: 'Eight',
615+
id: '8',
616+
},
617+
{
618+
label: 'Nine',
619+
id: '9',
620+
},
621+
{
622+
label: 'Ten',
623+
id: '10'
624+
},
625+
{
626+
label: 'Eleven',
627+
id: '11',
628+
},
629+
{
630+
label: 'Twelve',
631+
id: '12',
632+
},
633+
{
634+
label: 'Thirteen',
635+
id: '13',
636+
},
637+
{
638+
label: 'Fourteen',
639+
id: '14',
640+
},
641+
{
642+
label: 'Fifteen',
643+
id: '15'
644+
}]
645+
}
646+
413647
export default {
414648
components: {
415649
HelloWorld,
416650
SparcTooltip,
417651
SparcLogo,
418652
LargeModal,
419-
SparcRadio
653+
SparcRadio,
654+
DropdownMultiselect
420655
},
421656
name: 'App',
422657
setup() {
@@ -457,6 +692,12 @@
457692
const dialogVisibleLarge = ref(false)
458693
459694
return {
695+
dropdownMultiselectTooltip,
696+
oneOptionsDropdownMultiselectCategory,
697+
twoOptionsDropdownMultiselectCategory,
698+
nineOptionsDropdownMultiselectCategory,
699+
multiLevelDropdownMultiselectCategory,
700+
fifteenOptionsDropdownMultiselectCategory,
460701
dialogVisible,
461702
dialogVisibleLarge,
462703
tableData,
@@ -511,6 +752,12 @@ header {
511752
overflow: hidden;
512753
white-space: nowrap;
513754
}
755+
.dropdown-multiselect {
756+
width: 14rem !important;
757+
.el-row:not(:last-child) .dropdown-multiselect-border {
758+
border-bottom: none !important;
759+
}
760+
}
514761
515762
@media (min-width: 1024px) {
516763
header {

0 commit comments

Comments
 (0)