@eturnity/eturnity_reusable_components 1.2.43 → 1.2.45-3d-master.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/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
<page-container>
|
|
4
4
|
<br />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
<div :style="{ padding: '50px' }">
|
|
6
|
+
|
|
8
7
|
<input-number
|
|
9
8
|
:value="value"
|
|
10
9
|
:minNumber="0"
|
|
@@ -45,6 +44,50 @@
|
|
|
45
44
|
:disabled="false"
|
|
46
45
|
/>
|
|
47
46
|
|
|
47
|
+
<Select
|
|
48
|
+
:value="value"
|
|
49
|
+
selectWidth="100%"
|
|
50
|
+
optionWidth="50%"
|
|
51
|
+
label="that is a label"
|
|
52
|
+
alignItems="vertical"
|
|
53
|
+
colorMode="dark"
|
|
54
|
+
@input-change="value = $event"
|
|
55
|
+
@search-change="searchValue = $event"
|
|
56
|
+
>
|
|
57
|
+
<template #selector="{ selectedValue }">
|
|
58
|
+
value selected: {{ selectedValue }}
|
|
59
|
+
</template>
|
|
60
|
+
<template #dropdown>
|
|
61
|
+
<Option
|
|
62
|
+
v-for="opt in filteredOptionList"
|
|
63
|
+
:key="opt.id"
|
|
64
|
+
:value="opt.val"
|
|
65
|
+
>{{ opt.lookFor }}</Option
|
|
66
|
+
>
|
|
67
|
+
</template>
|
|
68
|
+
</Select>
|
|
69
|
+
<Select
|
|
70
|
+
:value="value"
|
|
71
|
+
selectWidth="100%"
|
|
72
|
+
optionWidth="50%"
|
|
73
|
+
label="that is a label"
|
|
74
|
+
alignItems="vertical"
|
|
75
|
+
colorMode="dark"
|
|
76
|
+
@input-change="value = $event"
|
|
77
|
+
@search-change="searchValue = $event"
|
|
78
|
+
>
|
|
79
|
+
<template #selector="{ selectedValue }">
|
|
80
|
+
value selected: {{ selectedValue }}
|
|
81
|
+
</template>
|
|
82
|
+
<template #dropdown>
|
|
83
|
+
<Option
|
|
84
|
+
v-for="opt in filteredOptionList"
|
|
85
|
+
:key="opt.id"
|
|
86
|
+
:value="opt.val"
|
|
87
|
+
>{{ opt.lookFor }}</Option
|
|
88
|
+
>
|
|
89
|
+
</template>
|
|
90
|
+
</Select>
|
|
48
91
|
<Select
|
|
49
92
|
:value="value"
|
|
50
93
|
selectWidth="100%"
|
|
@@ -68,8 +111,7 @@
|
|
|
68
111
|
</template>
|
|
69
112
|
</Select>
|
|
70
113
|
{{ filteredOptionList }}
|
|
71
|
-
|
|
72
|
-
</modal>
|
|
114
|
+
|
|
73
115
|
<iconCollection />
|
|
74
116
|
</page-container>
|
|
75
117
|
</ThemeProvider>
|
|
@@ -83,7 +125,6 @@ import InputNumber from '@/components/inputs/inputNumber'
|
|
|
83
125
|
import Select from '@/components/inputs/select'
|
|
84
126
|
import SwitchField from '@/components/inputs/switchField'
|
|
85
127
|
import Option from '@/components/inputs/select/option'
|
|
86
|
-
import Modal from '@/components/modals/modal'
|
|
87
128
|
import iconCollection from '@/components/icon/iconCollection'
|
|
88
129
|
// import TableDropdown from "@/components/tableDropdown"
|
|
89
130
|
|
|
@@ -103,7 +144,6 @@ export default {
|
|
|
103
144
|
ThemeProvider,
|
|
104
145
|
PageContainer,
|
|
105
146
|
InputNumber,
|
|
106
|
-
Modal,
|
|
107
147
|
Option,
|
|
108
148
|
Select,
|
|
109
149
|
SwitchField,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<div v-else>
|
|
45
45
|
<slot name="selector" :selectedValue="selectedValue"></slot>
|
|
46
46
|
</div>
|
|
47
|
-
<Caret :isUp="isDropdownOpen"
|
|
47
|
+
<Caret :isUp="isDropdownOpen" >
|
|
48
48
|
<icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
|
|
49
49
|
</Caret>
|
|
50
50
|
</selectButton>
|
|
@@ -289,7 +289,8 @@ const InputWrapper = styled('div', inputAttrs)`
|
|
|
289
289
|
blur(){
|
|
290
290
|
this.isActive=false
|
|
291
291
|
},
|
|
292
|
-
toggleDropdown(
|
|
292
|
+
toggleDropdown(){
|
|
293
|
+
console.log('toggleDropdown')
|
|
293
294
|
if(this.isSearchBarVisible){return}
|
|
294
295
|
this.isDropdownOpen=!this.isDropdownOpen
|
|
295
296
|
if (this.isDropdownOpen) {
|
|
@@ -340,6 +341,7 @@ const InputWrapper = styled('div', inputAttrs)`
|
|
|
340
341
|
}))
|
|
341
342
|
},
|
|
342
343
|
clickOutside(event) {
|
|
344
|
+
console.log("click outside",event)
|
|
343
345
|
if (this.$el==event.target || this.$el.contains(event.target)) {
|
|
344
346
|
return
|
|
345
347
|
}
|
|
@@ -1,102 +1,80 @@
|
|
|
1
1
|
export const translateLang = (lang) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
2
|
+
// this is needed so that we use the correct keys for Phrase
|
|
3
|
+
if (lang === 'en') {
|
|
4
|
+
return 'english'
|
|
5
|
+
} else if (lang === 'en-us') {
|
|
6
|
+
return 'english_us'
|
|
7
|
+
} else if (lang === 'en-gb') {
|
|
8
|
+
return 'english_uk'
|
|
9
|
+
} else if (lang === 'de' || lang === 'de-de') {
|
|
10
|
+
return 'german'
|
|
11
|
+
} else if (lang === 'de-ch') {
|
|
12
|
+
return 'german_ch'
|
|
13
|
+
} else if (lang === 'de-lu') {
|
|
14
|
+
return 'german_lu'
|
|
15
|
+
} else if (lang === 'de-be') {
|
|
16
|
+
return 'german_be'
|
|
17
|
+
} else if (lang === 'fr' || lang === 'fr-fr') {
|
|
18
|
+
return 'french'
|
|
19
|
+
} else if (lang === 'fr-be') {
|
|
20
|
+
return 'french_be'
|
|
21
|
+
} else if (lang === 'fr-lu') {
|
|
22
|
+
return 'french_lu'
|
|
23
|
+
} else if (lang === 'fr-ch') {
|
|
24
|
+
return 'french_ch'
|
|
25
|
+
} else if (lang === 'it' || lang === 'it-it') {
|
|
26
|
+
return 'italian'
|
|
27
|
+
} else if (lang === 'it-ch') {
|
|
28
|
+
return 'italian_ch'
|
|
29
|
+
} else if (lang === 'da-dk') {
|
|
30
|
+
return 'danish'
|
|
31
|
+
} else if (lang === 'pl-pl') {
|
|
32
|
+
return 'polish'
|
|
33
|
+
} else if (lang === 'sv-se') {
|
|
34
|
+
return 'swedish'
|
|
35
|
+
} else if (lang === 'no-no') {
|
|
36
|
+
return 'norwegian'
|
|
37
|
+
} else if (lang === 'nl-nl' || lang === 'nl') {
|
|
38
|
+
return 'nl-nl'
|
|
39
|
+
} else if (lang === 'cs') {
|
|
40
|
+
return 'czech'
|
|
41
|
+
} else if (lang === 'fi-fi') {
|
|
42
|
+
return 'finnish'
|
|
43
|
+
} else if (lang === 'pt-pt') {
|
|
44
|
+
return 'portuguese'
|
|
45
|
+
} else if (lang === 'es-es') {
|
|
46
|
+
return 'spanish'
|
|
47
|
+
} else {
|
|
48
|
+
return lang
|
|
49
|
+
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
export const datePickerLang = (lang) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
lang === '
|
|
56
|
-
|
|
57
|
-
lang === '
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
lang === 'fr-ch' ||
|
|
63
|
-
lang === 'fr-lu' ||
|
|
64
|
-
lang === 'fr-be'
|
|
65
|
-
) {
|
|
66
|
-
return 'fr'
|
|
67
|
-
} else if (lang === 'it-it' || lang === 'it-ch') {
|
|
68
|
-
return 'it'
|
|
69
|
-
} else {
|
|
70
|
-
return lang
|
|
71
|
-
}
|
|
53
|
+
if (lang === 'de-de' || lang === 'de-ch' || lang === 'de-lu' || lang === 'de-be') {
|
|
54
|
+
return 'de'
|
|
55
|
+
} else if (lang === 'fr-fr' || lang === 'fr-ch' || lang === 'fr-lu' || lang === 'fr-be') {
|
|
56
|
+
return 'fr'
|
|
57
|
+
} else if (lang === 'it-it' || lang === 'it-ch') {
|
|
58
|
+
return 'it'
|
|
59
|
+
} else {
|
|
60
|
+
return lang
|
|
61
|
+
}
|
|
72
62
|
}
|
|
73
63
|
|
|
74
64
|
export const tinyLanguage = (lang) => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
lang === '
|
|
78
|
-
|
|
79
|
-
lang === '
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
return 'fr_FR'
|
|
91
|
-
} else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
|
|
92
|
-
return 'it'
|
|
93
|
-
} else if (lang === 'en-us') {
|
|
94
|
-
return null
|
|
95
|
-
} else {
|
|
96
|
-
let langCode = lang.replace(/-/g, '_').split('')
|
|
97
|
-
langCode[3] = langCode[3].toUpperCase()
|
|
98
|
-
langCode[4] = langCode[4].toUpperCase()
|
|
99
|
-
langCode = langCode.join('')
|
|
100
|
-
return langCode
|
|
101
|
-
}
|
|
65
|
+
if (lang === 'de' || lang === 'de-de' || lang === 'de-ch' || lang === 'de-lu' || lang === 'de-be') {
|
|
66
|
+
return 'de'
|
|
67
|
+
} else if (lang === 'fr' || lang === 'fr-fr' || lang === 'fr-ch' || lang === 'fr-lu' || lang === 'fr-be') {
|
|
68
|
+
return 'fr_FR'
|
|
69
|
+
} else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
|
|
70
|
+
return 'it-IT'
|
|
71
|
+
} else if (lang === 'en-us') {
|
|
72
|
+
return null
|
|
73
|
+
} else {
|
|
74
|
+
let langCode = lang.replace(/-/g, '_').split('')
|
|
75
|
+
langCode[3] = langCode[3].toUpperCase()
|
|
76
|
+
langCode[4] = langCode[4].toUpperCase()
|
|
77
|
+
langCode = langCode.join('')
|
|
78
|
+
return langCode
|
|
79
|
+
}
|
|
102
80
|
}
|