@eturnity/eturnity_reusable_components 7.10.0-EPDM-10285.0 → 7.10.0-EPDM-10290.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 +1 -1
- package/src/App.vue +25 -162
- package/src/assets/svgIcons/split.svg +63 -14
- package/src/components/inputs/inputNumber/index.vue +7 -2
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -14,87 +14,42 @@
|
|
|
14
14
|
textAlign="left"
|
|
15
15
|
:isInteractive="true"
|
|
16
16
|
:interactionStep="1"
|
|
17
|
-
@on-input="
|
|
17
|
+
@on-input="inputHandler"
|
|
18
18
|
@input-change="changeHandler"
|
|
19
19
|
@input-focus="focusHandler"
|
|
20
20
|
@input-blur="blurHandler"
|
|
21
21
|
>
|
|
22
22
|
<template v-slot:label>
|
|
23
|
-
<div>Interactive Label</div>
|
|
23
|
+
<div>Interactive Label 1</div>
|
|
24
24
|
</template>
|
|
25
25
|
</input-number>
|
|
26
26
|
|
|
27
|
-
<
|
|
28
|
-
<template #trigger><i>Click Me</i></template>
|
|
29
|
-
<template #dropdown>
|
|
30
|
-
<div>
|
|
31
|
-
<a href="">test1</a>
|
|
32
|
-
<button href="">test2</button>
|
|
33
|
-
<br />
|
|
34
|
-
<p>Text</p>
|
|
35
|
-
</div>
|
|
36
|
-
</template>
|
|
37
|
-
</dropdown-component>
|
|
38
|
-
|
|
39
|
-
<videoThumbnail
|
|
40
|
-
src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
|
|
41
|
-
playIconColor="red"
|
|
42
|
-
playIconSize="20px"
|
|
43
|
-
width="400px"
|
|
44
|
-
height="600px"
|
|
45
|
-
/>
|
|
27
|
+
<hr>
|
|
46
28
|
|
|
47
|
-
<
|
|
48
|
-
@on-switch-change="onInputChange($event)"
|
|
49
|
-
:options="[
|
|
50
|
-
{ value: 0, content: 'zero' },
|
|
51
|
-
{ value: 1, content: 'one' },
|
|
52
|
-
{ value: 2, content: 'two' }
|
|
53
|
-
]"
|
|
54
|
-
:value="value"
|
|
55
|
-
label="label"
|
|
56
|
-
toggleColor="red"
|
|
57
|
-
size="large"
|
|
58
|
-
backgroundColor="blue"
|
|
59
|
-
labelAlign="left"
|
|
60
|
-
fontColor="black"
|
|
61
|
-
:disabled="false"
|
|
62
|
-
/>
|
|
63
|
-
<icon
|
|
64
|
-
name="opacity"
|
|
65
|
-
color="red"
|
|
66
|
-
hoveredColor="blue"
|
|
67
|
-
size="60px"
|
|
68
|
-
cursor="default"
|
|
69
|
-
isStriked="true"
|
|
70
|
-
/>
|
|
71
|
-
<Select
|
|
29
|
+
<input-number
|
|
72
30
|
:value="value"
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
31
|
+
:minNumber="0"
|
|
32
|
+
unitName="mm"
|
|
33
|
+
:numberPrecision="0"
|
|
34
|
+
backgroundColor="transparent"
|
|
35
|
+
borderColor="eturnityGrey"
|
|
36
|
+
inputHeight="34px"
|
|
37
|
+
inputWidth="420px"
|
|
38
|
+
textAlign="left"
|
|
39
|
+
:isInteractive="true"
|
|
40
|
+
:interactionStep="1"
|
|
41
|
+
@on-input="inputHandler"
|
|
42
|
+
@input-change="changeHandler"
|
|
43
|
+
@input-focus="focusHandler"
|
|
44
|
+
@input-blur="blurHandler"
|
|
81
45
|
>
|
|
82
|
-
<template
|
|
83
|
-
|
|
84
|
-
</template>
|
|
85
|
-
<template #dropdown>
|
|
86
|
-
<Option
|
|
87
|
-
v-for="opt in filteredOptionList"
|
|
88
|
-
:key="opt.id"
|
|
89
|
-
:value="opt.val"
|
|
90
|
-
>{{ opt.lookFor }}
|
|
91
|
-
</Option>
|
|
46
|
+
<template v-slot:label>
|
|
47
|
+
<div>Interactive Label 2</div>
|
|
92
48
|
</template>
|
|
93
|
-
</
|
|
94
|
-
|
|
95
|
-
{{ filteredOptionList }}
|
|
49
|
+
</input-number>
|
|
96
50
|
|
|
97
|
-
<
|
|
51
|
+
<hr>
|
|
52
|
+
<button @click="value=42">Click to set at 42</button>
|
|
98
53
|
</page-container>
|
|
99
54
|
</ThemeProvider>
|
|
100
55
|
</template>
|
|
@@ -104,64 +59,24 @@ import { ThemeProvider } from 'vue-styled-components'
|
|
|
104
59
|
import theme from './assets/theme'
|
|
105
60
|
import styled from 'vue-styled-components'
|
|
106
61
|
import InputNumber from '@/components/inputs/inputNumber'
|
|
107
|
-
import Select from '@/components/inputs/select'
|
|
108
|
-
import SwitchField from '@/components/inputs/switchField'
|
|
109
|
-
import Option from '@/components/inputs/select/option'
|
|
110
|
-
import iconCollection from '@/components/icon/iconCollection'
|
|
111
|
-
import dropdownComponent from '@/components/dropdown'
|
|
112
|
-
import videoThumbnail from '@/components/videoThumbnail'
|
|
113
|
-
import icon from '@/components/icon'
|
|
114
|
-
// import infoCard from '@/components/infoCard'
|
|
115
|
-
// import TableDropdown from "@/components/tableDropdown"
|
|
116
62
|
|
|
117
63
|
const PageContainer = styled.div`
|
|
118
64
|
padding: 40px;
|
|
119
65
|
`
|
|
120
66
|
|
|
121
|
-
// const RowContainer = styled.div`
|
|
122
|
-
// display: inline-flex;
|
|
123
|
-
// gap: 10px;
|
|
124
|
-
// flex-wrap: wrap;
|
|
125
|
-
// `
|
|
126
|
-
|
|
127
67
|
export default {
|
|
128
68
|
name: 'App',
|
|
129
69
|
components: {
|
|
130
70
|
ThemeProvider,
|
|
131
71
|
PageContainer,
|
|
132
72
|
InputNumber,
|
|
133
|
-
Option,
|
|
134
|
-
Select,
|
|
135
|
-
SwitchField,
|
|
136
|
-
iconCollection,
|
|
137
|
-
dropdownComponent,
|
|
138
|
-
videoThumbnail,
|
|
139
|
-
icon,
|
|
140
73
|
},
|
|
141
74
|
data() {
|
|
142
75
|
return {
|
|
143
76
|
value: 42,
|
|
144
|
-
value2: 42,
|
|
145
|
-
companyName: 'toto',
|
|
146
|
-
optionList: [
|
|
147
|
-
{ id: 'a', val: 'A', lookFor: 'babababa' },
|
|
148
|
-
{ id: 'b', val: 'B', lookFor: 'abab' },
|
|
149
|
-
{ id: 'c', val: 'C', lookFor: 'ccc' },
|
|
150
|
-
{ id: 'd', val: 'D', lookFor: 'ddd' },
|
|
151
|
-
{ id: 'e', val: 'E', lookFor: 'dddee' },
|
|
152
|
-
{ id: 'f', val: 'F', lookFor: 'ddfff' },
|
|
153
|
-
{ id: 'g', val: 'G', lookFor: 'dggg' },
|
|
154
|
-
{ id: 'h', val: 'H', lookFor: 'dddhhh' }
|
|
155
|
-
],
|
|
156
|
-
searchValue: ''
|
|
157
77
|
}
|
|
158
78
|
},
|
|
159
79
|
computed: {
|
|
160
|
-
filteredOptionList() {
|
|
161
|
-
return this.optionList.filter((opt) =>
|
|
162
|
-
opt.lookFor.includes(this.searchValue)
|
|
163
|
-
)
|
|
164
|
-
}
|
|
165
80
|
},
|
|
166
81
|
methods: {
|
|
167
82
|
blurHandler(e) {
|
|
@@ -174,64 +89,12 @@ export default {
|
|
|
174
89
|
console.log('focus', e)
|
|
175
90
|
},
|
|
176
91
|
inputHandler(e) {
|
|
177
|
-
this.value2 = e
|
|
178
92
|
console.log('input', e)
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
console.log('test', e)
|
|
93
|
+
//this.value = e
|
|
94
|
+
setTimeout(()=>{this.value = e},1000)
|
|
182
95
|
},
|
|
183
96
|
getTheme() {
|
|
184
97
|
return theme
|
|
185
|
-
},
|
|
186
|
-
onInputChange(event) {
|
|
187
|
-
this.inputValue = event
|
|
188
|
-
},
|
|
189
|
-
onInputBlur(event) {
|
|
190
|
-
console.log(event)
|
|
191
|
-
},
|
|
192
|
-
isDropdownOpen() {
|
|
193
|
-
return this.dropdownOpen
|
|
194
|
-
},
|
|
195
|
-
onClickButton() {
|
|
196
|
-
console.log('Test')
|
|
197
|
-
},
|
|
198
|
-
toggleDropdownOpen() {
|
|
199
|
-
this.dropdownOpen = !this.dropdownOpen
|
|
200
|
-
},
|
|
201
|
-
getDropdownValues() {
|
|
202
|
-
let items = []
|
|
203
|
-
items = [
|
|
204
|
-
{
|
|
205
|
-
value: this.getComponentInfo({
|
|
206
|
-
row: this.itemOptions[0],
|
|
207
|
-
value: 'display_name'
|
|
208
|
-
})
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
value: this.getComponentInfo({
|
|
212
|
-
row: this.itemOptions[0],
|
|
213
|
-
value: 'company_item_number'
|
|
214
|
-
})
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
value: this.getComponentInfo({
|
|
218
|
-
row: this.itemOptions[0],
|
|
219
|
-
value: 'model'
|
|
220
|
-
})
|
|
221
|
-
}
|
|
222
|
-
]
|
|
223
|
-
return items
|
|
224
|
-
},
|
|
225
|
-
getComponentInfo({ row, value }) {
|
|
226
|
-
let item
|
|
227
|
-
if (row.selectedValue && row.selectedValue[value]) {
|
|
228
|
-
item = row.selectedValue[value]
|
|
229
|
-
} else if (row[value]) {
|
|
230
|
-
item = row[value]
|
|
231
|
-
} else {
|
|
232
|
-
item = '-'
|
|
233
|
-
}
|
|
234
|
-
return item
|
|
235
98
|
}
|
|
236
99
|
}
|
|
237
100
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
2
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
3
4
|
<svg
|
|
4
5
|
version="1.1"
|
|
5
|
-
id="
|
|
6
|
+
id="svg438"
|
|
6
7
|
width="838"
|
|
7
8
|
height="833"
|
|
8
9
|
viewBox="0 0 838 833"
|
|
@@ -13,9 +14,26 @@
|
|
|
13
14
|
xmlns="http://www.w3.org/2000/svg"
|
|
14
15
|
xmlns:svg="http://www.w3.org/2000/svg">
|
|
15
16
|
<defs
|
|
16
|
-
id="
|
|
17
|
+
id="defs442">
|
|
18
|
+
<linearGradient
|
|
19
|
+
id="linearGradient7383"
|
|
20
|
+
inkscape:swatch="solid">
|
|
21
|
+
<stop
|
|
22
|
+
style="stop-color:#ffffff;stop-opacity:1;"
|
|
23
|
+
offset="0"
|
|
24
|
+
id="stop7381" />
|
|
25
|
+
</linearGradient>
|
|
26
|
+
<linearGradient
|
|
27
|
+
id="linearGradient6933"
|
|
28
|
+
inkscape:swatch="solid">
|
|
29
|
+
<stop
|
|
30
|
+
style="stop-color:#000000;stop-opacity:1;"
|
|
31
|
+
offset="0"
|
|
32
|
+
id="stop6931" />
|
|
33
|
+
</linearGradient>
|
|
34
|
+
</defs>
|
|
17
35
|
<sodipodi:namedview
|
|
18
|
-
id="
|
|
36
|
+
id="namedview440"
|
|
19
37
|
pagecolor="#ffffff"
|
|
20
38
|
bordercolor="#666666"
|
|
21
39
|
borderopacity="1.0"
|
|
@@ -24,22 +42,53 @@
|
|
|
24
42
|
inkscape:pagecheckerboard="0"
|
|
25
43
|
showgrid="false"
|
|
26
44
|
inkscape:zoom="0.95078031"
|
|
27
|
-
inkscape:cx="
|
|
28
|
-
inkscape:cy="
|
|
45
|
+
inkscape:cx="466.45896"
|
|
46
|
+
inkscape:cy="549.02273"
|
|
29
47
|
inkscape:window-width="1920"
|
|
30
48
|
inkscape:window-height="1007"
|
|
31
|
-
inkscape:window-x="
|
|
32
|
-
inkscape:window-y="
|
|
49
|
+
inkscape:window-x="0"
|
|
50
|
+
inkscape:window-y="0"
|
|
33
51
|
inkscape:window-maximized="1"
|
|
34
|
-
inkscape:current-layer="
|
|
52
|
+
inkscape:current-layer="g444" />
|
|
35
53
|
<g
|
|
36
54
|
inkscape:groupmode="layer"
|
|
37
55
|
inkscape:label="Image"
|
|
38
|
-
id="
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
56
|
+
id="g444">
|
|
57
|
+
<circle
|
|
58
|
+
id="path5141"
|
|
59
|
+
style="fill:none;stroke:#fffeff;stroke-opacity:1"
|
|
60
|
+
cx="0.66903824"
|
|
61
|
+
cy="263.65976"
|
|
62
|
+
r="0.52949077" />
|
|
63
|
+
<circle
|
|
64
|
+
id="path5143"
|
|
65
|
+
style="fill:none;stroke:#fffeff;stroke-opacity:1"
|
|
66
|
+
cx="0.66903824"
|
|
67
|
+
cy="263.65976"
|
|
68
|
+
r="0.52949077" />
|
|
69
|
+
<g
|
|
70
|
+
id="path5184"
|
|
71
|
+
style="stroke:#fffeff;stroke-opacity:1;fill:none">
|
|
72
|
+
<path
|
|
73
|
+
style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
74
|
+
d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
|
|
75
|
+
id="path6861" />
|
|
76
|
+
<path
|
|
77
|
+
style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
78
|
+
d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
|
|
79
|
+
id="path6863" />
|
|
80
|
+
</g>
|
|
81
|
+
<g
|
|
82
|
+
id="path5186"
|
|
83
|
+
style="stroke:#fffeff;stroke-opacity:1;fill:none">
|
|
84
|
+
<path
|
|
85
|
+
style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
86
|
+
d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
|
|
87
|
+
id="path6855" />
|
|
88
|
+
<path
|
|
89
|
+
style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
90
|
+
d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
|
|
91
|
+
id="path6857" />
|
|
92
|
+
</g>
|
|
44
93
|
</g>
|
|
45
94
|
</svg>
|
|
@@ -100,7 +100,9 @@
|
|
|
100
100
|
// labelInfoAlign="left"
|
|
101
101
|
// :minNumber="0"
|
|
102
102
|
// fontColor="blue"
|
|
103
|
-
//
|
|
103
|
+
// >
|
|
104
|
+
//<template name=label><img>....</template>
|
|
105
|
+
//</inputNumber>
|
|
104
106
|
import styled from 'vue-styled-components'
|
|
105
107
|
import {
|
|
106
108
|
stringToNumber,
|
|
@@ -469,7 +471,7 @@ export default {
|
|
|
469
471
|
}
|
|
470
472
|
},
|
|
471
473
|
methods: {
|
|
472
|
-
onEnterPress(
|
|
474
|
+
onEnterPress(){
|
|
473
475
|
this.$emit('on-enter-click')
|
|
474
476
|
this.$refs.inputField1.$el.blur()
|
|
475
477
|
},
|
|
@@ -549,6 +551,9 @@ export default {
|
|
|
549
551
|
return array
|
|
550
552
|
},
|
|
551
553
|
onInput(value) {
|
|
554
|
+
// if(!this.isFocused){
|
|
555
|
+
// return
|
|
556
|
+
// }
|
|
552
557
|
if (this.isBlurred) {
|
|
553
558
|
this.isBlurred = false
|
|
554
559
|
return
|