Skip to content

Commit 0defe19

Browse files
author
Samantha Kraft
committed
multiselect added and filterapplied icon component
1 parent 8004a1a commit 0defe19

38 files changed

+842
-8
lines changed

‎src/App.vue

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,12 @@
246246
/>
247247
</el-row>
248248
</el-col>
249+
<multi-select
250+
:options="multiLevelSelectOptions"
251+
/>
252+
<multi-select
253+
:options="singleLevelSelectOptions"
254+
/>
249255
<el-col class="dropdown-multiselect">
250256
<el-row>
251257
<dropdown-multiselect
@@ -383,6 +389,7 @@
383389
import ContentOverviewCard from './components/ContentOverviewCard.vue'
384390
import ContentTabCard from './components/ContentTabCard.vue'
385391
import EventCard from './components/EventCard.vue'
392+
import MultiSelect from './components/MultiSelect.vue'
386393
387394
import { ref } from 'vue'
388395
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
@@ -508,7 +515,50 @@
508515
href: '/stomach'
509516
}]
510517
}
511-
518+
const multiLevelSelectOptions= [{
519+
value: 1,
520+
label: 'Asia',
521+
children: [{
522+
value: 2,
523+
label: 'China',
524+
}, {
525+
value: 6,
526+
label: 'Japan',
527+
}, {
528+
value: 10,
529+
label: 'Korea',
530+
}]
531+
}, {
532+
value: 14,
533+
label: 'Europe',
534+
children: [{
535+
value: 15,
536+
label: 'France'
537+
}, {
538+
value: 19,
539+
label: 'UK',
540+
}]
541+
}, {
542+
value: 23,
543+
label: 'North America',
544+
children: [{
545+
value: 24,
546+
label: 'US'
547+
}, {
548+
value: 25,
549+
label: 'Canada'
550+
}]
551+
}]
552+
const singleLevelSelectOptions= [{
553+
value: 1,
554+
label: 'Asia',
555+
}, {
556+
value: 14,
557+
label: 'Europe',
558+
}, {
559+
value: 23,
560+
label: 'North America',
561+
}]
512562
513563
const tableData = [{
514564
"id": 37,
@@ -1032,7 +1082,8 @@
10321082
IconCard,
10331083
ContentOverviewCard,
10341084
ContentTabCard,
1035-
EventCard
1085+
EventCard,
1086+
MultiSelect
10361087
},
10371088
name: 'App',
10381089
setup() {
@@ -1109,7 +1160,9 @@
11091160
iconCardData,
11101161
contentOverviewCard,
11111162
contentTabCard: tabCard,
1112-
eventCardEvent
1163+
eventCardEvent,
1164+
singleLevelSelectOptions,
1165+
multiLevelSelectOptions
11131166
11141167
}
11151168
},

‎src/assets/icons/2horpanel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'2horpanel': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M19.5 6.5v11h-15v-11h15zm-1 6h-13v4h13v-4zm0-5h-13v4h13v-4z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/2vertpanel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'2vertpanel': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" d="M19.5 6.5v11h-15v-11h15zm-8 1h-6v9h6v-9zm7 0h-6v9h6v-9z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/3panel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'3panel': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" d="M19.5 6.5v11h-15v-11h15zm-8.5 1H5.5v9H11v-9zm7.5 4.5H12v4.5h6.5V12zm0-4.5H12V11h6.5V7.5z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/4panel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'4panel': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" d="M19.5 6.5v11h-15v-11h15zm-8 6h-6v4h6v-4zm7 0h-6v4h6v-4zm-7-5h-6v4h6v-4zm7 0h-6v4h6v-4z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/about.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'about': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" d="M12 5a7 7 0 11-7 7 7.008 7.008 0 017-7m0-2a9 9 0 109 9 9 9 0 00-9-9z"/><path pid="1" d="M12 7.148a.9.9 0 10.9.9.9.9 0 00-.9-.9zM12 17.148a1 1 0 01-1-1v-5.4a1 1 0 112 0v5.4a1 1 0 01-1 1z"/>'
9+
}
10+
})

‎src/assets/icons/arrow.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'arrow': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" _fill="#909399" d="M12 7.5l-8 8.6h16z"/>'
9+
}
10+
})

‎src/assets/icons/calendar.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'calendar': {
5+
width: 16,
6+
height: 17,
7+
viewBox: '0 0 16 17',
8+
data: '<g _fill="#000" fill-rule="nonzero"><path pid="0" d="M6.168 1.482h3.684v1.744H6.168z"/><path pid="1" d="M13.032 3.226h1.242v2.79H1.705v-2.79h1.242V1.482H.021V17H15.98V1.482h-2.947v1.744zM1.705 15.256V7.76h12.59v7.497H1.705z"/><path pid="2" d="M3.726 0H5.41v4.348H3.726zM10.589 0h1.684v4.348h-1.684z"/></g>'
9+
}
10+
})

‎src/assets/icons/changeBckgd.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'changeBckgd': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M17.5 5.5v8H13V16h4.5v1h-11v-1H11v-2.5H6.5v-8h11zm-1 1h-9v6h9v-6z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/check.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'check': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" d="M17.31 7.48a1 1 0 011.41 0 1 1 0 010 1.42l-7.88 7.59a1 1 0 01-1.41 0l-4.11-4.2a1 1 0 111.42-1.4l3.43 3.5z"/>'
9+
}
10+
})

‎src/assets/icons/close.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'close': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M18.364 7.05L13.414 12l4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95 4.95-4.95 1.414 1.414z" stroke-linecap="square" _fill="#FFF"/>'
9+
}
10+
})

‎src/assets/icons/closeFullScreen.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'closeFullScreen': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M19.75 13.25v1.5h-3.5v3.5h-1.5v-5h5zm-10.5 0v5h-1.5v-3.5h-3.5v-1.5h5zm0-8v5h-5v-1.5l3.5.001V5.25h1.5zm7 0v3.501l3.5-.001v1.5h-5v-5h1.5z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/contact.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'contact': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" d="M19 5.6v7.219h-4.181V16.1l-3.889-3.282H5V5.6h14m2-2H3v11.218h7.2l3.331 2.81 3.288 2.772v-5.582H21V3.6z"/>'
9+
}
10+
})

‎src/assets/icons/dock.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'dock': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g _fill="none" fill-rule="evenodd"><circle pid="0" _fill="#8300BF" fill-rule="nonzero" cx="12" cy="12" r="12"/><g stroke-linecap="square"><path pid="1" d="M10.508 12.257l1.415 1.414-3.718 3.718h2.829v2h-6v-.121h-.122v-1.294l-.06-.06.06-.06v-4.587h2v2.587l3.596-3.597zm8.669-7.426v.12h.121v1.293l.06.061-.06.06v4.587h-2V8.366l-3.596 3.596-1.414-1.414 3.716-3.717h-2.827v-2h6z" _fill="#FFF" fill-rule="nonzero"/></g></g>'
9+
}
10+
})

‎src/assets/icons/fullScreen.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'fullScreen': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M19.751 13.25v5H13.45v-1.5l4.802.001V13.25h1.5zm-14.001 0v3.5h4.801v1.5H4.25v-5h1.5zm4.801-8v1.5H5.75v3.5h-1.5v-5h6.301zm9.2 0v5h-1.5l.001-3.501-4.802.001v-1.5h6.301z" stroke-linecap="square" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/hamburger.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'hamburger': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" d="M20 8H4a1 1 0 010-2h16a1 1 0 010 2zM20 13H4a1 1 0 010-2h16a1 1 0 010 2zM20 18H4a1 1 0 010-2h16a1 1 0 010 2z"/>'
9+
}
10+
})

‎src/assets/icons/help.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'help': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<circle pid="0" cx="12" cy="15.824" r=".753"/><path pid="1" d="M12 14.256a.75.75 0 01-.75-.75v-1c0-.529.419-.818.862-1.124.623-.43 1.138-.83 1.138-1.376A1.209 1.209 0 0012 8.756a1.252 1.252 0 00-1.25 1.25.75.75 0 01-1.5 0A2.753 2.753 0 0112 7.256a2.721 2.721 0 012.75 2.75 3.3 3.3 0 01-1.786 2.61c-.079.055-.152.1-.214.147v.743a.75.75 0 01-.75.75z"/><path pid="2" d="M12 5a7 7 0 11-7 7 7.008 7.008 0 017-7m0-2a9 9 0 109 9 9 9 0 00-9-9z"/>'
9+
}
10+
})

‎src/assets/icons/index.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* eslint-disable */
2+
require('./2horpanel')
3+
require('./2vertpanel')
4+
require('./3panel')
5+
require('./4panel')
6+
require('./about')
7+
require('./arrow')
8+
require('./changeBckgd')
9+
require('./check')
10+
require('./close')
11+
require('./closeFullScreen')
12+
require('./contact')
13+
require('./calendar')
14+
require('./map')
15+
require('./dock')
16+
require('./filterApplied')
17+
require('./fullScreen')
18+
require('./hamburger')
19+
require('./help')
20+
require('./magnifyingGlass')
21+
require('./pause')
22+
require('./permalink')
23+
require('./play')
24+
require('./resetZoom')
25+
require('./singlepanel')
26+
require('./social')
27+
require('./tooltips')
28+
require('./undock')
29+
require('./zoomIn')
30+
require('./zoomOut')

‎src/assets/icons/magnifyingGlass.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'magnifyingGlass': {
5+
width: 16,
6+
height: 16,
7+
viewBox: '0 0 24 24',
8+
data: '<path pid="0" d="M13 4c-3.3 0-6 2.7-6 6 0 1.3.4 2.5 1.1 3.5l-4.8 4.8c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l4.8-4.8c1 .7 2.2 1.1 3.5 1.1 3.3 0 6-2.7 6-6s-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/>'
9+
}
10+
})

‎src/assets/icons/map.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'map': {
5+
width: 13,
6+
height: 17,
7+
viewBox: '0 0 13 17',
8+
data: '<path pid="0" d="M6.478 0C10.072 0 13 2.95 13 6.527c0 4.203-2.485 7.422-5.546 10.104a1.418 1.418 0 01-1.908 0C2.485 13.95 0 10.73 0 6.527 0 2.951 2.928 0 6.478 0zM6.5 4A2.51 2.51 0 019 6.5C9 7.893 7.893 9 6.5 9A2.51 2.51 0 014 6.5C4 5.148 5.148 4 6.5 4z" _fill="#000" fill-rule="evenodd"/>'
9+
}
10+
})

‎src/assets/icons/pause.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'pause': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" d="M10 7v10H8V7h2zm6 0v10h-2V7h2z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/permalink.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'permalink': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" _fill="#8300BF" cx="12" cy="12" r="12"/><path pid="1" d="M8.61 9.525l1.415 1.414-2.475 2.475a2.5 2.5 0 003.416 3.648l.12-.112 2.475-2.475 1.414 1.414-2.475 2.475A4.5 4.5 0 116.136 12l2.475-2.475zm6.011-1.06l1.415 1.414-5.657 5.657-1.415-1.415 5.657-5.657zm4.243-2.829a4.5 4.5 0 010 6.364l-2.475 2.475-1.414-1.414 2.475-2.475a2.5 2.5 0 00-3.416-3.648l-.12.112-2.475 2.475-1.414-1.414L12.5 5.636a4.5 4.5 0 016.364 0z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/play.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'play': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g _fill="none" fill-rule="evenodd"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" _fill="#FFF" d="M16.5 11.5l-7 6v-12z"/></g>'
9+
}
10+
})

‎src/assets/icons/resetZoom.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'resetZoom': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g _fill="none" fill-rule="evenodd"><circle pid="0" _fill="#8300BF" fill-rule="nonzero" cx="12" cy="12" r="12"/><path pid="1" d="M10.5 3a6.5 6.5 0 015.249 10.335l4.249 4.248-1.415 1.415-4.248-4.25A6.5 6.5 0 1110.5 3zm0 2a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm1 4V8h.324a2 2 0 10.613 2h1.021a2.984 2.984 0 01-.522 1.251 3 3 0 11-.435-3.986L12.5 7h1v2h-2z" _fill="#FFF" fill-rule="nonzero"/></g>'
9+
}
10+
})

‎src/assets/icons/singlepanel.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'singlepanel': {
5+
width: 24,
6+
height: 24,
7+
viewBox: '0 0 24 24',
8+
data: '<g fill-rule="nonzero" _fill="none"><circle pid="0" cx="12" cy="12" r="12" _fill="#8300BF"/><path pid="1" d="M19.5 6.5h-15v11h15v-11zm-1 1v9h-13v-9h13z" _fill="#FFF"/></g>'
9+
}
10+
})

‎src/assets/icons/social/facebook.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
var icon = require('vue-svgicon')
3+
icon.register({
4+
'social/facebook': {
5+
width: 32,
6+
height: 32,
7+
viewBox: '0 0 32 32',
8+
data: '<g _fill="#8300BF" fill-rule="nonzero"><path pid="0" d="M16 30c-7.729-.008-13.992-6.271-14-14C2.008 8.271 8.271 2.008 16 2c7.729.008 13.992 6.271 14 14-.008 7.729-6.271 13.992-14 14zm0-26C9.376 4.007 4.007 9.376 4 16c.007 6.624 5.376 11.993 12 12 6.624-.007 11.993-5.376 12-12-.007-6.624-5.376-11.993-12-12z"/><path pid="1" d="M20.704 7.557h-2.543a4.218 4.218 0 00-4.215 4.214v2.543h-2.543v3.415h2.543v6.76h3.415v-6.76h2.544l.871-3.415h-3.415v-2.47a.884.884 0 01.872-.872h2.471V7.557z"/></g>'
9+
}
10+
})

‎src/assets/icons/social/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable */
2+
require('./facebook')
3+
require('./linkedin')
4+
require('./twitter')
5+
require('./twitterFull')
6+
require('./youtubeFull')

0 commit comments

Comments
 (0)