@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.3 → 6.37.0-EPDM-8148.5
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 +6 -3
- package/postcss.config.js +6 -0
- package/src/App.vue +101 -99
- package/src/assets/svgIcons/update.svg +3 -0
- package/src/assets/theme.js +3 -3
- package/src/components/filter/filterSettings.vue +645 -0
- package/src/components/filter/index.vue +132 -0
- package/src/components/filter/parentDropdown.vue +91 -0
- package/src/components/iconWrapper/index.vue +11 -12
- package/src/components/inputs/inputNumber/index.vue +14 -0
- package/src/components/inputs/searchInput/index.vue +20 -10
- package/src/components/inputs/select/index.vue +43 -29
- package/src/components/inputs/select/option/index.vue +5 -1
- package/src/components/tableDropdown/index.vue +9 -18
- package/src/components/tables/mainTable/index.vue +69 -6
- package/src/components/threeDots/index.vue +7 -13
- package/src/helpers/numberConverter.js +5 -14
- package/src/helpers/translateLang.js +14 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eturnity/eturnity_reusable_components",
|
|
3
|
-
"version": "6.37.0-EPDM-8148.
|
|
3
|
+
"version": "6.37.0-EPDM-8148.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vue-cli-service serve",
|
|
@@ -11,11 +11,14 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@vueform/slider": "1.0.5",
|
|
14
|
-
"core-js": "^3.31.1",
|
|
15
14
|
"html-loader": "0.5.5",
|
|
15
|
+
"postcss": "^8.4.25",
|
|
16
16
|
"v-click-outside": "2.1.4",
|
|
17
17
|
"vue": "2.6.11",
|
|
18
|
-
"vue-styled-components": "1.6.0"
|
|
18
|
+
"vue-styled-components": "1.6.0",
|
|
19
|
+
"vue2-datepicker": "3.11.1",
|
|
20
|
+
"vuedraggable": "2.24.3",
|
|
21
|
+
"core-js": "3.31.1"
|
|
19
22
|
},
|
|
20
23
|
"devDependencies": {
|
|
21
24
|
"@storybook/addon-actions": "6.2.8",
|
package/src/App.vue
CHANGED
|
@@ -1,107 +1,109 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
|
|
3
3
|
<page-container>
|
|
4
|
-
<br />
|
|
5
4
|
|
|
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
|
-
|
|
5
|
+
<br/>
|
|
6
|
+
<input-number
|
|
7
|
+
:value="value"
|
|
8
|
+
:minNumber="0"
|
|
9
|
+
unitName="mm"
|
|
10
|
+
:numberPrecision="0"
|
|
11
|
+
backgroundColor="transparent"
|
|
12
|
+
borderColor="eturnityGrey"
|
|
13
|
+
inputHeight="34px"
|
|
14
|
+
inputWidth="420px"
|
|
15
|
+
textAlign="left"
|
|
16
|
+
:isInteractive="true"
|
|
17
|
+
:interactionStep="1"
|
|
18
|
+
@on-input="value = $event"
|
|
19
|
+
@input-change="changeHandler"
|
|
20
|
+
@input-focus="focusHandler"
|
|
21
|
+
@input-blur="blurHandler"
|
|
22
|
+
>
|
|
23
|
+
<template v-slot:label>
|
|
24
|
+
<div>Interactive Label</div>
|
|
25
|
+
</template>
|
|
26
|
+
</input-number>
|
|
27
|
+
|
|
28
|
+
<dropdown-component openingMode="hover" gap="30px">
|
|
29
|
+
<template #trigger><i>Click Me</i></template>
|
|
30
|
+
<template #dropdown>
|
|
31
|
+
<div>
|
|
32
|
+
<a href="">test1</a>
|
|
33
|
+
<button href="">test2</button>
|
|
34
|
+
<br>
|
|
35
|
+
<p>Text</p>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
</dropdown-component>
|
|
39
|
+
|
|
40
|
+
<videoThumbnail
|
|
41
|
+
src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
|
|
42
|
+
playIconColor="red"
|
|
43
|
+
playIconSize="20px"
|
|
44
|
+
width="400px"
|
|
45
|
+
height="600px"
|
|
46
|
+
/>
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
<SwitchField
|
|
49
|
+
@on-switch-change="onInputChange($event)"
|
|
50
|
+
:options="[
|
|
50
51
|
{ value: 0, content: 'zero' },
|
|
51
52
|
{ value: 1, content: 'one' },
|
|
52
53
|
{ value: 2, content: 'two' }
|
|
53
54
|
]"
|
|
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
|
-
|
|
55
|
+
:value="value"
|
|
56
|
+
label="label"
|
|
57
|
+
toggleColor="red"
|
|
58
|
+
size="large"
|
|
59
|
+
backgroundColor="blue"
|
|
60
|
+
labelAlign="left"
|
|
61
|
+
fontColor="black"
|
|
62
|
+
:disabled="false"
|
|
63
|
+
/>
|
|
64
|
+
<icon
|
|
65
|
+
name="opacity"
|
|
66
|
+
color="red"
|
|
67
|
+
hoveredColor="blue"
|
|
68
|
+
size="60px"
|
|
69
|
+
cursor="default"
|
|
70
|
+
isStriked="true"
|
|
71
|
+
/>
|
|
72
|
+
<Select
|
|
73
|
+
:value="value"
|
|
74
|
+
selectWidth="100%"
|
|
75
|
+
optionWidth="50%"
|
|
76
|
+
label="that is a label"
|
|
77
|
+
alignItems="vertical"
|
|
78
|
+
colorMode="dark"
|
|
79
|
+
isSearchable="true"
|
|
80
|
+
@input-change="value = $event"
|
|
81
|
+
@search-change="searchValue = $event"
|
|
82
|
+
>
|
|
83
|
+
<template #selector="{ selectedValue }">
|
|
84
|
+
value selected: {{ selectedValue }}
|
|
85
|
+
</template>
|
|
86
|
+
<template #dropdown>
|
|
87
|
+
<Option
|
|
88
|
+
v-for="opt in filteredOptionList"
|
|
89
|
+
:key="opt.id"
|
|
90
|
+
:value="opt.val"
|
|
91
|
+
>{{ opt.lookFor }}
|
|
92
|
+
</Option
|
|
81
93
|
>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
:value="opt.val"
|
|
90
|
-
>{{ opt.lookFor }}</Option
|
|
91
|
-
>
|
|
92
|
-
</template>
|
|
93
|
-
</Select>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
{{ filteredOptionList }}
|
|
97
|
-
|
|
98
|
-
<iconCollection color="red" />
|
|
94
|
+
</template>
|
|
95
|
+
</Select>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
{{ filteredOptionList }}
|
|
99
|
+
|
|
100
|
+
<iconCollection color="red"/>
|
|
99
101
|
</page-container>
|
|
100
102
|
</ThemeProvider>
|
|
101
103
|
</template>
|
|
102
104
|
|
|
103
105
|
<script>
|
|
104
|
-
import {
|
|
106
|
+
import {ThemeProvider} from 'vue-styled-components'
|
|
105
107
|
import theme from './assets/theme'
|
|
106
108
|
import styled from 'vue-styled-components'
|
|
107
109
|
import InputNumber from '@/components/inputs/inputNumber'
|
|
@@ -144,14 +146,14 @@ export default {
|
|
|
144
146
|
value2: 42,
|
|
145
147
|
companyName: 'toto',
|
|
146
148
|
optionList: [
|
|
147
|
-
{
|
|
148
|
-
{
|
|
149
|
-
{
|
|
150
|
-
{
|
|
151
|
-
{
|
|
152
|
-
{
|
|
153
|
-
{
|
|
154
|
-
{
|
|
149
|
+
{id: 'a', val: 'A', lookFor: 'babababa'},
|
|
150
|
+
{id: 'b', val: 'B', lookFor: 'abab'},
|
|
151
|
+
{id: 'c', val: 'C', lookFor: 'ccc'},
|
|
152
|
+
{id: 'd', val: 'D', lookFor: 'ddd'},
|
|
153
|
+
{id: 'e', val: 'E', lookFor: 'dddee'},
|
|
154
|
+
{id: 'f', val: 'F', lookFor: 'ddfff'},
|
|
155
|
+
{id: 'g', val: 'G', lookFor: 'dggg'},
|
|
156
|
+
{id: 'h', val: 'H', lookFor: 'dddhhh'},
|
|
155
157
|
],
|
|
156
158
|
searchValue: ''
|
|
157
159
|
}
|
|
@@ -159,7 +161,7 @@ export default {
|
|
|
159
161
|
computed: {
|
|
160
162
|
filteredOptionList() {
|
|
161
163
|
return this.optionList.filter((opt) =>
|
|
162
|
-
|
|
164
|
+
opt.lookFor.includes(this.searchValue)
|
|
163
165
|
)
|
|
164
166
|
}
|
|
165
167
|
},
|
|
@@ -222,7 +224,7 @@ export default {
|
|
|
222
224
|
]
|
|
223
225
|
return items
|
|
224
226
|
},
|
|
225
|
-
getComponentInfo({
|
|
227
|
+
getComponentInfo({row, value}) {
|
|
226
228
|
let item
|
|
227
229
|
if (row.selectedValue && row.selectedValue[value]) {
|
|
228
230
|
item = row.selectedValue[value]
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.4545 4.45454L8.90909 7H10.8182C10.8182 9.10636 9.10636 10.8182 7 10.8182C6.35727 10.8182 5.74636 10.6591 5.21818 10.3727L4.28909 11.3018C5.07182 11.7982 6.00091 12.0909 7 12.0909C9.81273 12.0909 12.0909 9.81272 12.0909 7H14L11.4545 4.45454ZM3.18182 7C3.18182 4.89363 4.89364 3.18182 7 3.18182C7.64273 3.18182 8.25364 3.34091 8.78182 3.62727L9.71091 2.69818C8.92818 2.20182 7.99909 1.90909 7 1.90909C4.18727 1.90909 1.90909 4.18727 1.90909 7H0L2.54545 9.54545L5.09091 7H3.18182Z" fill="#263238"/>
|
|
3
|
+
</svg>
|
package/src/assets/theme.js
CHANGED
|
@@ -3,7 +3,7 @@ const theme = {
|
|
|
3
3
|
primary: '#48a2d0',
|
|
4
4
|
secondary: '#fdb813',
|
|
5
5
|
tertiary: '#d5d5d5',
|
|
6
|
-
black: '#
|
|
6
|
+
black: '#263238',
|
|
7
7
|
yellow: '#fdb813',
|
|
8
8
|
darkGray: '#818181',
|
|
9
9
|
gray1: '#666',
|
|
@@ -20,8 +20,8 @@ const theme = {
|
|
|
20
20
|
grey5: '#fafafa',
|
|
21
21
|
grey6: '#555d61',
|
|
22
22
|
green: '#99db0c',
|
|
23
|
-
transparentWhite1:'#ffffff32',
|
|
24
|
-
transparentBlack1:'#263238e6',
|
|
23
|
+
transparentWhite1: '#ffffff32',
|
|
24
|
+
transparentBlack1: '#263238e6',
|
|
25
25
|
disabled: '#dfe1e1',
|
|
26
26
|
eturnityGrey: '#263238'
|
|
27
27
|
},
|