@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +184 -0
- package/.prettierrc +8 -6
- package/package.json +9 -21
- package/src/App.vue +79 -78
- package/src/assets/theme.js +3 -3
- package/src/components/addNewButton/AddNewButton.stories.js +2 -2
- package/src/components/addNewButton/index.vue +48 -51
- package/src/components/banner/actionBanner/index.vue +54 -55
- package/src/components/banner/banner/banner.stories.js +5 -5
- package/src/components/banner/banner/index.vue +159 -159
- package/src/components/banner/infoBanner/index.vue +41 -53
- package/src/components/buttons/buttonIcon/index.vue +125 -122
- package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
- package/src/components/buttons/closeButton/index.vue +49 -49
- package/src/components/buttons/mainButton/index.vue +108 -108
- package/src/components/card/index.vue +70 -70
- package/src/components/collapsableInfoText/index.vue +96 -94
- package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
- package/src/components/deleteIcon/index.vue +54 -54
- package/src/components/draggableInputHandle/index.vue +37 -37
- package/src/components/dropdown/Dropdown.stories.js +9 -10
- package/src/components/dropdown/index.vue +106 -106
- package/src/components/errorMessage/index.vue +52 -52
- package/src/components/filter/filterSettings.vue +428 -422
- package/src/components/filter/index.vue +135 -135
- package/src/components/filter/parentDropdown.vue +73 -73
- package/src/components/icon/Icons.stories.js +7 -7
- package/src/components/icon/iconCollection.vue +53 -53
- package/src/components/icon/index.vue +122 -122
- package/src/components/iconWrapper/index.vue +156 -156
- package/src/components/infoCard/index.vue +30 -32
- package/src/components/infoText/index.vue +142 -137
- package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
- package/src/components/inputs/checkbox/index.vue +190 -180
- package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
- package/src/components/inputs/inputNumber/index.vue +696 -696
- package/src/components/inputs/inputNumberQuestion/index.vue +185 -182
- package/src/components/inputs/inputText/InputText.stories.js +22 -22
- package/src/components/inputs/inputText/index.vue +337 -336
- package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
- package/src/components/inputs/radioButton/index.vue +222 -219
- package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
- package/src/components/inputs/searchInput/index.vue +127 -126
- package/src/components/inputs/select/index.vue +792 -791
- package/src/components/inputs/select/option/index.vue +124 -124
- package/src/components/inputs/select/select.stories.js +31 -32
- package/src/components/inputs/slider/index.vue +99 -99
- package/src/components/inputs/switchField/index.vue +220 -222
- package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
- package/src/components/inputs/textAreaInput/index.vue +171 -173
- package/src/components/inputs/toggle/Toggle.stories.js +14 -14
- package/src/components/inputs/toggle/index.vue +214 -217
- package/src/components/label/index.vue +82 -82
- package/src/components/markerItem/index.vue +68 -66
- package/src/components/modals/actionModal/index.vue +54 -54
- package/src/components/modals/infoModal/index.vue +39 -36
- package/src/components/modals/modal/index.vue +134 -134
- package/src/components/modals/modal/modal.stories.js +5 -5
- package/src/components/navigationTabs/index.vue +96 -94
- package/src/components/pageSubtitle/index.vue +55 -49
- package/src/components/pageTitle/index.vue +56 -56
- package/src/components/pagination/index.vue +92 -89
- package/src/components/progressBar/index.vue +107 -107
- package/src/components/projectMarker/index.vue +246 -244
- package/src/components/rangeSlider/Slider.vue +491 -465
- package/src/components/rangeSlider/index.vue +410 -410
- package/src/components/rangeSlider/utils/dom.js +5 -5
- package/src/components/selectedOptions/index.vue +119 -119
- package/src/components/sideMenu/index.vue +199 -199
- package/src/components/spinner/index.vue +57 -57
- package/src/components/tableDropdown/index.vue +520 -520
- package/src/components/tables/mainTable/index.vue +417 -400
- package/src/components/tables/viewTable/index.vue +171 -171
- package/src/components/threeDots/index.vue +340 -334
- package/src/components/videoThumbnail/index.vue +86 -86
- package/src/components/videoThumbnail/videoThumbnail.stories.js +14 -16
- package/src/helpers/numberConverter.js +2 -2
- package/src/helpers/translateLang.js +9 -9
- package/src/mixins/inputValidations.js +5 -5
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
@@ -1,154 +1,154 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
<
|
2
|
+
<PageWrapper ref="dropdown">
|
3
|
+
<ParentDropdown
|
4
|
+
:dropdown-text="dropdownText ? dropdownText : 'Default view'"
|
5
|
+
:is-open="isDropdownOpen"
|
4
6
|
@on-toggle="onToggleDropdown()"
|
5
|
-
:isOpen="isDropdownOpen"
|
6
|
-
:dropdownText="dropdownText ? dropdownText : 'Default view'"
|
7
7
|
/>
|
8
|
-
<
|
8
|
+
<FilterSettings
|
9
9
|
v-if="isDropdownOpen"
|
10
|
-
:
|
11
|
-
:
|
12
|
-
:
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
10
|
+
:active-language="activeLanguage"
|
11
|
+
:active-view="activeView"
|
12
|
+
:button-text="buttonText"
|
13
|
+
:filter-data="filterData"
|
14
|
+
:filter-views="filterViews"
|
15
|
+
:has-active-view="hasActiveView"
|
16
|
+
:settings-translations="settingsTranslations"
|
17
|
+
@on-apply-current-view="onApplyCurrentView()"
|
17
18
|
@on-cancel-view="onCancelSettings()"
|
19
|
+
@on-container-click="onContainerClick()"
|
18
20
|
@on-drag-change="$emit('on-drag-change', $event)"
|
19
|
-
@on-
|
21
|
+
@on-filter-change="onFilterChange($event)"
|
20
22
|
@on-prevent-close="onPreventClose($event)"
|
21
23
|
@on-reset-filters="onResetFilters()"
|
22
|
-
@on-
|
23
|
-
|
24
|
-
|
25
|
-
:activeLanguage="activeLanguage"
|
26
|
-
:settingsTranslations="settingsTranslations"
|
24
|
+
@on-save-new-view="$emit('on-save-new-view')"
|
25
|
+
@on-view-delete="onViewDelete($event)"
|
26
|
+
@on-view-select="onViewSelect($event)"
|
27
27
|
/>
|
28
|
-
</
|
28
|
+
</PageWrapper>
|
29
29
|
</template>
|
30
30
|
|
31
31
|
<script>
|
32
|
-
import styled from 'vue3-styled-components'
|
33
|
-
import
|
34
|
-
import
|
32
|
+
import styled from 'vue3-styled-components'
|
33
|
+
import ParentDropdown from './parentDropdown'
|
34
|
+
import FilterSettings from './filterSettings'
|
35
35
|
|
36
|
-
const PageWrapper = styled.div`
|
37
|
-
|
38
|
-
`
|
36
|
+
const PageWrapper = styled.div`
|
37
|
+
position: relative;
|
38
|
+
`
|
39
39
|
|
40
|
-
export default {
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
}
|
84
|
-
},
|
85
|
-
methods: {
|
86
|
-
onToggleDropdown() {
|
87
|
-
this.isDropdownOpen = !this.isDropdownOpen
|
88
|
-
},
|
89
|
-
onContainerClick() {
|
90
|
-
// due to newer versions of Chrome (121), contains() is not always working.
|
91
|
-
// So, we need to add this so that the filter modal won't close
|
92
|
-
// when we open a dropdown. EPDM-9732
|
93
|
-
this.preventOutsideClick = true
|
94
|
-
setTimeout(() => {
|
95
|
-
this.preventOutsideClick = false
|
96
|
-
}, 100)
|
97
|
-
},
|
98
|
-
clickOutside(event) {
|
99
|
-
if (
|
100
|
-
this.$refs.dropdown &&
|
101
|
-
!this.$refs.dropdown.$el.contains(event.target) &&
|
102
|
-
!this.preventOutsideClick
|
103
|
-
) {
|
104
|
-
this.isDropdownOpen = false
|
40
|
+
export default {
|
41
|
+
name: 'FilterComponent',
|
42
|
+
components: {
|
43
|
+
ParentDropdown,
|
44
|
+
PageWrapper,
|
45
|
+
FilterSettings,
|
46
|
+
},
|
47
|
+
props: {
|
48
|
+
filterData: {
|
49
|
+
required: true,
|
50
|
+
},
|
51
|
+
dropdownText: {
|
52
|
+
required: false,
|
53
|
+
},
|
54
|
+
filterViews: {
|
55
|
+
required: true,
|
56
|
+
},
|
57
|
+
activeView: {
|
58
|
+
required: false,
|
59
|
+
default: null,
|
60
|
+
},
|
61
|
+
buttonText: {
|
62
|
+
required: false,
|
63
|
+
},
|
64
|
+
hasActiveView: {
|
65
|
+
required: false,
|
66
|
+
},
|
67
|
+
activeLanguage: {
|
68
|
+
required: false,
|
69
|
+
default: 'en-us',
|
70
|
+
},
|
71
|
+
settingsTranslations: {
|
72
|
+
required: false,
|
73
|
+
},
|
74
|
+
closeDropdown: {
|
75
|
+
required: false,
|
76
|
+
},
|
77
|
+
},
|
78
|
+
data() {
|
79
|
+
return {
|
80
|
+
isDropdownOpen: false,
|
81
|
+
activeFilter: null,
|
82
|
+
preventOutsideClick: false,
|
105
83
|
}
|
106
84
|
},
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
this.
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
85
|
+
watch: {
|
86
|
+
closeDropdown(newVal) {
|
87
|
+
if (newVal) {
|
88
|
+
this.isDropdownOpen = false
|
89
|
+
}
|
90
|
+
},
|
91
|
+
},
|
92
|
+
mounted() {
|
93
|
+
document.addEventListener('click', this.clickOutside)
|
94
|
+
},
|
95
|
+
beforeDestroy() {
|
96
|
+
document.removeEventListener('click', this.clickOutside)
|
97
|
+
},
|
98
|
+
methods: {
|
99
|
+
onToggleDropdown() {
|
100
|
+
this.isDropdownOpen = !this.isDropdownOpen
|
101
|
+
},
|
102
|
+
onContainerClick() {
|
103
|
+
// due to newer versions of Chrome (121), contains() is not always working.
|
104
|
+
// So, we need to add this so that the filter modal won't close
|
105
|
+
// when we open a dropdown. EPDM-9732
|
106
|
+
this.preventOutsideClick = true
|
107
|
+
setTimeout(() => {
|
108
|
+
this.preventOutsideClick = false
|
109
|
+
}, 100)
|
110
|
+
},
|
111
|
+
clickOutside(event) {
|
112
|
+
if (
|
113
|
+
this.$refs.dropdown &&
|
114
|
+
!this.$refs.dropdown.$el.contains(event.target) &&
|
115
|
+
!this.preventOutsideClick
|
116
|
+
) {
|
117
|
+
this.isDropdownOpen = false
|
118
|
+
}
|
119
|
+
},
|
120
|
+
onPreventClose(value) {
|
121
|
+
setTimeout(() => {
|
122
|
+
this.preventOutsideClick = value
|
123
|
+
}, 100)
|
124
|
+
},
|
125
|
+
onFilterChange(data) {
|
126
|
+
// this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
|
127
|
+
// because clicking the calendar does not trigger the @focus
|
128
|
+
this.preventOutsideClick = true
|
129
|
+
this.$emit('on-filter-settings-change', data)
|
130
|
+
this.onPreventClose(false)
|
131
|
+
},
|
132
|
+
onCancelSettings() {
|
133
|
+
this.onToggleDropdown()
|
134
|
+
this.$emit('on-cancel-view')
|
135
|
+
},
|
136
|
+
onViewSelect(item) {
|
137
|
+
this.onToggleDropdown()
|
138
|
+
this.$emit('on-filter-view-select', item)
|
139
|
+
},
|
140
|
+
onViewDelete(item) {
|
141
|
+
this.onToggleDropdown()
|
142
|
+
this.$emit('on-filter-view-delete', item)
|
143
|
+
},
|
144
|
+
onApplyCurrentView() {
|
145
|
+
this.onToggleDropdown()
|
146
|
+
this.$emit('on-apply-current-view')
|
147
|
+
},
|
148
|
+
onResetFilters() {
|
149
|
+
this.onToggleDropdown()
|
150
|
+
this.$emit('on-reset-filters')
|
151
|
+
},
|
126
152
|
},
|
127
|
-
onViewDelete(item) {
|
128
|
-
this.onToggleDropdown()
|
129
|
-
this.$emit('on-filter-view-delete', item)
|
130
|
-
},
|
131
|
-
onApplyCurrentView() {
|
132
|
-
this.onToggleDropdown()
|
133
|
-
this.$emit('on-apply-current-view')
|
134
|
-
},
|
135
|
-
onResetFilters() {
|
136
|
-
this.onToggleDropdown()
|
137
|
-
this.$emit('on-reset-filters')
|
138
|
-
}
|
139
|
-
},
|
140
|
-
mounted() {
|
141
|
-
document.addEventListener('click', this.clickOutside)
|
142
|
-
},
|
143
|
-
beforeDestroy() {
|
144
|
-
document.removeEventListener('click', this.clickOutside)
|
145
|
-
},
|
146
|
-
watch: {
|
147
|
-
closeDropdown(newVal) {
|
148
|
-
if (newVal) {
|
149
|
-
this.isDropdownOpen = false
|
150
|
-
}
|
151
|
-
}
|
152
153
|
}
|
153
|
-
}
|
154
154
|
</script>
|
@@ -1,91 +1,91 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
<
|
4
|
-
<
|
5
|
-
</
|
6
|
-
<
|
7
|
-
<
|
2
|
+
<PageWrapper @click="$emit('on-toggle')">
|
3
|
+
<IconWrapper>
|
4
|
+
<Icon name="settings" size="18px" />
|
5
|
+
</IconWrapper>
|
6
|
+
<TitleWrapper :is-open="isOpen">
|
7
|
+
<TitleText>
|
8
8
|
{{ dropdownText }}
|
9
|
-
</
|
10
|
-
<
|
11
|
-
<
|
12
|
-
@click.stop="$emit('on-toggle')"
|
9
|
+
</TitleText>
|
10
|
+
<ArrowWrapper>
|
11
|
+
<Icon
|
13
12
|
:name="isOpen ? 'arrow_up' : 'arrow_down'"
|
14
13
|
size="12px"
|
14
|
+
@click.stop="$emit('on-toggle')"
|
15
15
|
/>
|
16
|
-
</
|
17
|
-
</
|
18
|
-
</
|
16
|
+
</ArrowWrapper>
|
17
|
+
</TitleWrapper>
|
18
|
+
</PageWrapper>
|
19
19
|
</template>
|
20
20
|
|
21
21
|
<script>
|
22
|
-
import styled from 'vue3-styled-components'
|
23
|
-
import Icon from '../icon'
|
22
|
+
import styled from 'vue3-styled-components'
|
23
|
+
import Icon from '../icon'
|
24
24
|
|
25
|
-
const PageWrapper = styled.div`
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
`
|
25
|
+
const PageWrapper = styled.div`
|
26
|
+
display: grid;
|
27
|
+
grid-template-columns: auto auto;
|
28
|
+
cursor: pointer;
|
29
|
+
`
|
30
30
|
|
31
|
-
const IconWrapper = styled.div`
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
`
|
31
|
+
const IconWrapper = styled.div`
|
32
|
+
display: grid;
|
33
|
+
align-items: center;
|
34
|
+
justify-items: center;
|
35
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
36
|
+
border-radius: 4px 0px 0px 4px;
|
37
|
+
padding: 6px;
|
38
|
+
`
|
39
39
|
|
40
|
-
const TitleAttrs = { isOpen: Boolean }
|
41
|
-
const TitleWrapper = styled('div', TitleAttrs)`
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
`
|
40
|
+
const TitleAttrs = { isOpen: Boolean }
|
41
|
+
const TitleWrapper = styled('div', TitleAttrs)`
|
42
|
+
display: grid;
|
43
|
+
grid-template-columns: auto auto;
|
44
|
+
align-items: center;
|
45
|
+
justify-items: center;
|
46
|
+
grid-gap: 10px;
|
47
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
48
|
+
background-color: ${(props) =>
|
49
|
+
props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
|
50
|
+
border-left: none;
|
51
|
+
border-radius: 0px 4px 4px 0px;
|
52
|
+
padding: 6px 14px;
|
53
|
+
user-select: none;
|
54
|
+
`
|
55
55
|
|
56
|
-
const TitleText = styled.div`
|
57
|
-
|
58
|
-
`
|
56
|
+
const TitleText = styled.div`
|
57
|
+
font-size: 13px;
|
58
|
+
`
|
59
59
|
|
60
|
-
const ArrowWrapper = styled.div`
|
61
|
-
|
62
|
-
|
60
|
+
const ArrowWrapper = styled.div`
|
61
|
+
display: grid;
|
62
|
+
align-items: center;
|
63
63
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
`
|
64
|
+
div {
|
65
|
+
height: auto !important;
|
66
|
+
min-height: unset;
|
67
|
+
}
|
68
|
+
`
|
69
69
|
|
70
|
-
export default {
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
70
|
+
export default {
|
71
|
+
name: 'ParentDropdown',
|
72
|
+
components: {
|
73
|
+
PageWrapper,
|
74
|
+
Icon,
|
75
|
+
IconWrapper,
|
76
|
+
TitleWrapper,
|
77
|
+
TitleText,
|
78
|
+
ArrowWrapper,
|
79
|
+
},
|
80
|
+
props: {
|
81
|
+
isOpen: {
|
82
|
+
required: true,
|
83
|
+
default: false,
|
84
|
+
},
|
85
|
+
dropdownText: {
|
86
|
+
required: true,
|
87
|
+
default: 'View',
|
88
|
+
},
|
84
89
|
},
|
85
|
-
dropdownText: {
|
86
|
-
required: true,
|
87
|
-
default: 'View'
|
88
|
-
}
|
89
90
|
}
|
90
|
-
}
|
91
91
|
</script>
|
@@ -1,17 +1,17 @@
|
|
1
|
-
import
|
1
|
+
import IconCollection from './iconCollection.vue'
|
2
2
|
|
3
3
|
export default {
|
4
4
|
title: 'icon',
|
5
|
-
component:
|
5
|
+
component: IconCollection,
|
6
6
|
// argTypes: {},
|
7
7
|
}
|
8
8
|
|
9
9
|
const Template = (args, { argTypes }) => ({
|
10
10
|
// Components used in your story `template` are defined in the `components` object
|
11
|
-
components: {
|
11
|
+
components: { IconCollection },
|
12
12
|
// The story's `args` need to be mapped into the template through the `setup()` method
|
13
13
|
props: Object.keys(argTypes),
|
14
|
-
template: '<
|
14
|
+
template: '<IconCollection v-bind="$props" />',
|
15
15
|
|
16
16
|
// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
|
17
17
|
// How to use:
|
@@ -25,17 +25,17 @@ const Template = (args, { argTypes }) => ({
|
|
25
25
|
|
26
26
|
export const Default = Template.bind({})
|
27
27
|
Default.args = {
|
28
|
-
size: '30px'
|
28
|
+
size: '30px',
|
29
29
|
}
|
30
30
|
|
31
31
|
export const withColor = Template.bind({})
|
32
32
|
withColor.args = {
|
33
33
|
size: '30px',
|
34
34
|
color: 'red',
|
35
|
-
hoveredColor: 'crimson'
|
35
|
+
hoveredColor: 'crimson',
|
36
36
|
}
|
37
37
|
|
38
38
|
export const large = Template.bind({})
|
39
39
|
large.args = {
|
40
|
-
size: '60px'
|
40
|
+
size: '60px',
|
41
41
|
}
|
@@ -1,68 +1,68 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
<
|
2
|
+
<Wrapper>
|
3
|
+
<IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
|
4
4
|
<div>
|
5
|
-
<
|
5
|
+
<RCIcon
|
6
|
+
:color="color"
|
7
|
+
:hovered-color="hoveredColor"
|
6
8
|
:name="iconItem.name"
|
7
9
|
:size="size"
|
8
|
-
:hoveredColor="hoveredColor"
|
9
|
-
:color="color"
|
10
10
|
/>
|
11
11
|
</div>
|
12
12
|
<h3>{{ iconItem.name }}</h3>
|
13
|
-
</
|
14
|
-
</
|
13
|
+
</IconWrapper>
|
14
|
+
</Wrapper>
|
15
15
|
</template>
|
16
16
|
|
17
17
|
<script>
|
18
|
-
import
|
19
|
-
import styled from 'vue3-styled-components'
|
18
|
+
import RCIcon from './index.vue'
|
19
|
+
import styled from 'vue3-styled-components'
|
20
20
|
|
21
|
-
const Wrapper = styled.div`
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
`
|
28
|
-
const IconWrapper = styled.div`
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
`
|
38
|
-
export default {
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
21
|
+
const Wrapper = styled.div`
|
22
|
+
display: block;
|
23
|
+
text-align: center;
|
24
|
+
justify-items: center;
|
25
|
+
width: 100%;
|
26
|
+
background-color: #ccc;
|
27
|
+
`
|
28
|
+
const IconWrapper = styled.div`
|
29
|
+
display: inline-flex;
|
30
|
+
flex-direction: column;
|
31
|
+
background-color: white;
|
32
|
+
border-radius: 6px;
|
33
|
+
padding: 10px;
|
34
|
+
width: 220px;
|
35
|
+
text-align: center;
|
36
|
+
margin: 10px;
|
37
|
+
`
|
38
|
+
export default {
|
39
|
+
name: 'CollectionComponent',
|
40
|
+
components: { RCIcon, IconWrapper, Wrapper },
|
41
|
+
props: {
|
42
|
+
size: { required: false },
|
43
|
+
color: { required: false },
|
44
|
+
hoveredColor: { required: false },
|
45
|
+
},
|
46
|
+
data() {
|
47
|
+
return {
|
48
|
+
iconList: [],
|
49
|
+
}
|
50
|
+
},
|
51
51
|
|
52
|
-
|
53
|
-
|
54
|
-
|
52
|
+
mounted() {
|
53
|
+
this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
|
54
|
+
},
|
55
55
|
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
56
|
+
methods: {
|
57
|
+
importAll(r) {
|
58
|
+
r.keys().forEach((key) =>
|
59
|
+
this.iconList.push({
|
60
|
+
pathLong: r(key),
|
61
|
+
pathShort: key,
|
62
|
+
name: key.replace('.svg', '').replace('./', ''),
|
63
|
+
})
|
64
|
+
)
|
65
|
+
},
|
66
|
+
},
|
66
67
|
}
|
67
|
-
}
|
68
68
|
</script>
|