@eturnity/eturnity_reusable_components 1.2.1-beta.1 → 1.2.1-beta.2
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 +116 -58
- package/src/assets/icons/error_icon copy.png +0 -0
- package/src/components/inputs/inputNumber/index.vue +39 -15
- package/src/components/modals/modal/index.vue +6 -27
- package/src/components/modals/modal/modal.stories.js +1 -2
- package/src/components/spinner/index.vue +10 -13
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,100 +1,158 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
|
|
3
3
|
<page-container>
|
|
4
|
+
<main-table titleText="My Table">
|
|
5
|
+
<thead>
|
|
6
|
+
<tr>
|
|
7
|
+
<th>Column 1</th>
|
|
8
|
+
<th>Column 2</th>
|
|
9
|
+
<th>Column 3</th>
|
|
10
|
+
<div />
|
|
11
|
+
</tr>
|
|
12
|
+
</thead>
|
|
13
|
+
<tbody>
|
|
14
|
+
<tr>
|
|
15
|
+
<!-- <table-dropdown
|
|
16
|
+
:colSpan="3"
|
|
17
|
+
:tableItems="getDropdownValues()"
|
|
18
|
+
@toggle-dropdown-open="toggleDropdownOpen()"
|
|
19
|
+
@item-selected="onItemSelected({ item: $event, index })"
|
|
20
|
+
:isOpen="isDropdownOpen()"
|
|
21
|
+
:optionItems="itemOptions"
|
|
22
|
+
:optionsDisplay="['display_name', 'company_item_number', 'model']"
|
|
23
|
+
/> -->
|
|
24
|
+
<td>Test</td>
|
|
25
|
+
<div class="icons-container">
|
|
26
|
+
<three-dots :options="listOptions" :isLoading="false" />
|
|
27
|
+
</div>
|
|
28
|
+
</tr>
|
|
29
|
+
</tbody>
|
|
30
|
+
</main-table>
|
|
31
|
+
<br />
|
|
32
|
+
<br />
|
|
33
|
+
<toggle
|
|
34
|
+
@on-toggle-change="onInputChange($event)"
|
|
35
|
+
:isChecked="inputValue"
|
|
36
|
+
label="My Label Text"
|
|
37
|
+
infoTextMessage="This is my test message"
|
|
38
|
+
infoTextAlign="right"
|
|
39
|
+
labelAlign="right"
|
|
40
|
+
:disabled="false"
|
|
41
|
+
/>
|
|
42
|
+
<br />
|
|
4
43
|
<input-number
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
44
|
+
placeholder="Enter distance"
|
|
45
|
+
:numberPrecision="2"
|
|
46
|
+
:value="inputValue"
|
|
47
|
+
@input-change="onInputChange($event)"
|
|
48
|
+
/>
|
|
49
|
+
<br />
|
|
50
|
+
<page-subtitle text="My Subtitle" infoText="My info Text" />
|
|
51
|
+
<spinner size="30px" />
|
|
52
|
+
<checkbox
|
|
53
|
+
label="Do you accept the Terms?"
|
|
54
|
+
:isChecked="true"
|
|
55
|
+
size="small"
|
|
56
|
+
:isDisabled="false"
|
|
11
57
|
/>
|
|
58
|
+
<external-button text="Click me!" minWidth="500px" />
|
|
12
59
|
</page-container>
|
|
13
60
|
</ThemeProvider>
|
|
14
61
|
</template>
|
|
15
62
|
|
|
16
63
|
<script>
|
|
17
|
-
import { ThemeProvider } from
|
|
18
|
-
import theme from
|
|
19
|
-
import styled from
|
|
20
|
-
import
|
|
64
|
+
import { ThemeProvider } from "vue-styled-components"
|
|
65
|
+
import theme from "./assets/theme"
|
|
66
|
+
import styled from "vue-styled-components"
|
|
67
|
+
import MainTable from "@/components/tables/mainTable"
|
|
68
|
+
import ThreeDots from "@/components/threeDots"
|
|
69
|
+
import Toggle from "@/components/inputs/toggle"
|
|
70
|
+
import InputNumber from "@/components/inputs/inputNumber"
|
|
71
|
+
import Checkbox from "@/components/inputs/checkbox"
|
|
72
|
+
import PageSubtitle from "@/components/pageSubtitle"
|
|
73
|
+
import Spinner from "@/components/spinner"
|
|
74
|
+
import ExternalButton from "@/components/buttons/externalButton"
|
|
75
|
+
// import TableDropdown from "@/components/tableDropdown"
|
|
21
76
|
|
|
22
77
|
const PageContainer = styled.div`
|
|
23
78
|
padding: 40px;
|
|
24
79
|
`
|
|
25
80
|
|
|
26
81
|
export default {
|
|
27
|
-
name:
|
|
82
|
+
name: "App",
|
|
28
83
|
components: {
|
|
29
84
|
ThemeProvider,
|
|
30
85
|
PageContainer,
|
|
31
|
-
|
|
86
|
+
MainTable,
|
|
87
|
+
ThreeDots,
|
|
88
|
+
Toggle,
|
|
89
|
+
InputNumber,
|
|
90
|
+
PageSubtitle,
|
|
91
|
+
Spinner,
|
|
92
|
+
Checkbox,
|
|
93
|
+
ExternalButton,
|
|
32
94
|
// TableDropdown,
|
|
33
95
|
},
|
|
34
96
|
data() {
|
|
35
97
|
return {
|
|
36
|
-
num: 42,
|
|
37
98
|
inputValue: null,
|
|
38
|
-
checkedOption:
|
|
99
|
+
checkedOption: "button_1",
|
|
39
100
|
question: {
|
|
40
101
|
number_format_precision: 4,
|
|
41
102
|
number_min_allowed: 0,
|
|
42
103
|
number_max_allowed: 10,
|
|
43
|
-
unit_short_name:
|
|
104
|
+
unit_short_name: "cm",
|
|
44
105
|
},
|
|
45
106
|
dropdownOpen: false,
|
|
46
107
|
isChecked: false,
|
|
47
108
|
listOptions: [
|
|
48
109
|
{
|
|
49
|
-
name:
|
|
50
|
-
value:
|
|
51
|
-
disabled: true
|
|
110
|
+
name: "Option 1",
|
|
111
|
+
value: "option_1",
|
|
112
|
+
disabled: true,
|
|
52
113
|
},
|
|
53
114
|
{
|
|
54
|
-
name:
|
|
55
|
-
value:
|
|
115
|
+
name: "Option 2",
|
|
116
|
+
value: "option_2",
|
|
56
117
|
},
|
|
57
118
|
{
|
|
58
|
-
name:
|
|
59
|
-
value:
|
|
119
|
+
name: "Option 3",
|
|
120
|
+
value: "option_3",
|
|
60
121
|
},
|
|
61
122
|
{
|
|
62
|
-
name:
|
|
63
|
-
value:
|
|
64
|
-
}
|
|
123
|
+
name: "Option 4",
|
|
124
|
+
value: "option_4",
|
|
125
|
+
},
|
|
65
126
|
],
|
|
66
127
|
itemOptions: [
|
|
67
128
|
{
|
|
68
|
-
display_name:
|
|
69
|
-
company_item_number:
|
|
70
|
-
model:
|
|
71
|
-
id: 1
|
|
129
|
+
display_name: "Test 1",
|
|
130
|
+
company_item_number: "123",
|
|
131
|
+
model: "BTB-2145 Long Text Long Text Long Text Long Text Long Text",
|
|
132
|
+
id: 1,
|
|
72
133
|
},
|
|
73
134
|
{
|
|
74
|
-
display_name:
|
|
75
|
-
company_item_number:
|
|
76
|
-
model:
|
|
77
|
-
id: 2
|
|
135
|
+
display_name: "Test 2",
|
|
136
|
+
company_item_number: "1234",
|
|
137
|
+
model: "BTB-123",
|
|
138
|
+
id: 2,
|
|
78
139
|
},
|
|
79
140
|
{
|
|
80
|
-
display_name:
|
|
81
|
-
company_item_number:
|
|
82
|
-
model:
|
|
83
|
-
id: 3
|
|
141
|
+
display_name: "Test 3",
|
|
142
|
+
company_item_number: "12345",
|
|
143
|
+
model: "BTB-543",
|
|
144
|
+
id: 3,
|
|
84
145
|
},
|
|
85
146
|
{
|
|
86
|
-
display_name:
|
|
87
|
-
company_item_number:
|
|
88
|
-
model:
|
|
89
|
-
id: 4
|
|
90
|
-
}
|
|
91
|
-
]
|
|
147
|
+
display_name: "Test 4",
|
|
148
|
+
company_item_number: "123456",
|
|
149
|
+
model: "BTB-4930",
|
|
150
|
+
id: 4,
|
|
151
|
+
},
|
|
152
|
+
],
|
|
92
153
|
}
|
|
93
154
|
},
|
|
94
155
|
methods: {
|
|
95
|
-
keydownHandler(e) {
|
|
96
|
-
console.log('test', e)
|
|
97
|
-
},
|
|
98
156
|
getTheme() {
|
|
99
157
|
return theme
|
|
100
158
|
},
|
|
@@ -105,7 +163,7 @@ export default {
|
|
|
105
163
|
return this.dropdownOpen
|
|
106
164
|
},
|
|
107
165
|
onClickButton() {
|
|
108
|
-
console.log(
|
|
166
|
+
console.log("Test")
|
|
109
167
|
},
|
|
110
168
|
toggleDropdownOpen() {
|
|
111
169
|
this.dropdownOpen = !this.dropdownOpen
|
|
@@ -116,21 +174,21 @@ export default {
|
|
|
116
174
|
{
|
|
117
175
|
value: this.getComponentInfo({
|
|
118
176
|
row: this.itemOptions[0],
|
|
119
|
-
value:
|
|
120
|
-
})
|
|
177
|
+
value: "display_name",
|
|
178
|
+
}),
|
|
121
179
|
},
|
|
122
180
|
{
|
|
123
181
|
value: this.getComponentInfo({
|
|
124
182
|
row: this.itemOptions[0],
|
|
125
|
-
value:
|
|
126
|
-
})
|
|
183
|
+
value: "company_item_number",
|
|
184
|
+
}),
|
|
127
185
|
},
|
|
128
186
|
{
|
|
129
187
|
value: this.getComponentInfo({
|
|
130
188
|
row: this.itemOptions[0],
|
|
131
|
-
value:
|
|
132
|
-
})
|
|
133
|
-
}
|
|
189
|
+
value: "model",
|
|
190
|
+
}),
|
|
191
|
+
},
|
|
134
192
|
]
|
|
135
193
|
return items
|
|
136
194
|
},
|
|
@@ -141,11 +199,11 @@ export default {
|
|
|
141
199
|
} else if (row[value]) {
|
|
142
200
|
item = row[value]
|
|
143
201
|
} else {
|
|
144
|
-
item =
|
|
202
|
+
item = "-"
|
|
145
203
|
}
|
|
146
204
|
return item
|
|
147
|
-
}
|
|
148
|
-
}
|
|
205
|
+
},
|
|
206
|
+
},
|
|
149
207
|
}
|
|
150
208
|
</script>
|
|
151
209
|
|
|
@@ -155,4 +213,4 @@ body {
|
|
|
155
213
|
height: 100%;
|
|
156
214
|
margin: 0;
|
|
157
215
|
}
|
|
158
|
-
</style>
|
|
216
|
+
</style>
|
|
Binary file
|
|
@@ -14,10 +14,9 @@
|
|
|
14
14
|
</label-wrapper>
|
|
15
15
|
<input-wrapper>
|
|
16
16
|
<input-container
|
|
17
|
-
v-bind="$attrs"
|
|
18
17
|
ref="inputField1"
|
|
19
18
|
:hasUnit="unitName && !!unitName.length"
|
|
20
|
-
:placeholder="
|
|
19
|
+
:placeholder="placeholder"
|
|
21
20
|
:isError="isError"
|
|
22
21
|
:inputWidth="inputWidth"
|
|
23
22
|
:minWidth="minWidth"
|
|
@@ -31,7 +30,6 @@
|
|
|
31
30
|
:textAlign="textAlign"
|
|
32
31
|
:fontSize="fontSize"
|
|
33
32
|
:fontColor="fontColor"
|
|
34
|
-
v-on="$listeners"
|
|
35
33
|
/>
|
|
36
34
|
<unit-container
|
|
37
35
|
v-if="unitName && showLinearUnitName"
|
|
@@ -39,6 +37,11 @@
|
|
|
39
37
|
:isError="isError"
|
|
40
38
|
>{{ unitName }}</unit-container
|
|
41
39
|
>
|
|
40
|
+
<icon
|
|
41
|
+
v-if="(isError || inputIcon) && !showLinearUnitName"
|
|
42
|
+
:class="inputIconImageClass"
|
|
43
|
+
:src="isError ? warningIcon : inputIconImage"
|
|
44
|
+
/>
|
|
42
45
|
</input-wrapper>
|
|
43
46
|
<error-message v-if="isError">{{ errorMessage }}</error-message>
|
|
44
47
|
</container>
|
|
@@ -76,7 +79,7 @@ import {
|
|
|
76
79
|
numberToString
|
|
77
80
|
} from '../../../helpers/numberConverter'
|
|
78
81
|
import InfoText from '../../infoText'
|
|
79
|
-
|
|
82
|
+
import warningIcon from '../../../assets/icons/error_icon.png'
|
|
80
83
|
const Container = styled.div`
|
|
81
84
|
width: 100%;
|
|
82
85
|
position: relative;
|
|
@@ -127,6 +130,15 @@ const InputContainer = styled('input', inputProps)`
|
|
|
127
130
|
outline: none;
|
|
128
131
|
}
|
|
129
132
|
`
|
|
133
|
+
const IconProps = {
|
|
134
|
+
inputIconHeight: String
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
const Icon = styled('img', IconProps)`
|
|
138
|
+
position: absolute;
|
|
139
|
+
right: 10px;
|
|
140
|
+
top: 2px;
|
|
141
|
+
`
|
|
130
142
|
|
|
131
143
|
const InputWrapper = styled.span`
|
|
132
144
|
position: relative;
|
|
@@ -153,10 +165,12 @@ const UnitContainer = styled('span', inputProps)`
|
|
|
153
165
|
`
|
|
154
166
|
|
|
155
167
|
const ErrorMessage = styled.div`
|
|
156
|
-
|
|
168
|
+
margin-top: 5px;
|
|
169
|
+
line-height: 1;
|
|
170
|
+
text-transform: none;
|
|
171
|
+
font-size: 10px;
|
|
157
172
|
color: ${(props) => props.theme.colors.red};
|
|
158
173
|
position: absolute;
|
|
159
|
-
top: calc(100% + 1px);
|
|
160
174
|
`
|
|
161
175
|
|
|
162
176
|
const LabelWrapper = styled.div`
|
|
@@ -180,19 +194,14 @@ export default {
|
|
|
180
194
|
ErrorMessage,
|
|
181
195
|
LabelWrapper,
|
|
182
196
|
LabelText,
|
|
183
|
-
InfoText
|
|
197
|
+
InfoText,
|
|
198
|
+
Icon
|
|
184
199
|
},
|
|
185
|
-
inheritAttrs: false,
|
|
186
200
|
data() {
|
|
187
201
|
return {
|
|
188
202
|
textInput: '',
|
|
189
|
-
isFocused: false
|
|
190
|
-
|
|
191
|
-
},
|
|
192
|
-
computed: {
|
|
193
|
-
displayedPlaceholder() {
|
|
194
|
-
if (this.placeholder) return this.placeholder
|
|
195
|
-
return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
|
|
203
|
+
isFocused: false,
|
|
204
|
+
warningIcon: warningIcon
|
|
196
205
|
}
|
|
197
206
|
},
|
|
198
207
|
props: {
|
|
@@ -275,6 +284,21 @@ export default {
|
|
|
275
284
|
numberToStringEnabled: {
|
|
276
285
|
required: false,
|
|
277
286
|
default: true
|
|
287
|
+
},
|
|
288
|
+
inputIcon: {
|
|
289
|
+
require: false,
|
|
290
|
+
type: Boolean,
|
|
291
|
+
default: false
|
|
292
|
+
},
|
|
293
|
+
inputIconImage: {
|
|
294
|
+
require: false,
|
|
295
|
+
type: String,
|
|
296
|
+
default: ''
|
|
297
|
+
},
|
|
298
|
+
inputIconImageClass: {
|
|
299
|
+
require: false,
|
|
300
|
+
type: Array,
|
|
301
|
+
default: () => []
|
|
278
302
|
}
|
|
279
303
|
},
|
|
280
304
|
methods: {
|
|
@@ -3,19 +3,15 @@
|
|
|
3
3
|
:isOpen="isOpen"
|
|
4
4
|
:class="{ visible: isOpen, hidden: !isOpen }"
|
|
5
5
|
@click.native="onOutsideClose()"
|
|
6
|
-
:backdrop="backdrop"
|
|
7
|
-
:fullwidthSpinner="fullwidthSpinner"
|
|
8
6
|
>
|
|
9
7
|
<modal-container @click.stop>
|
|
10
|
-
<spinner v-if="isLoading" size="50px" :fullWidth="
|
|
11
|
-
<content-container :visible="!isLoading">
|
|
12
|
-
<slot />
|
|
13
|
-
</content-container>
|
|
8
|
+
<spinner v-if="isLoading" size="50px" :fullWidth="true" />
|
|
14
9
|
<close-button
|
|
15
10
|
v-if="!hideClose"
|
|
16
11
|
@click.native="onCloseModal()"
|
|
17
12
|
class="close"
|
|
18
13
|
/>
|
|
14
|
+
<slot />
|
|
19
15
|
</modal-container>
|
|
20
16
|
</page-wrapper>
|
|
21
17
|
</template>
|
|
@@ -32,12 +28,7 @@ import styled from 'vue-styled-components'
|
|
|
32
28
|
import CloseButton from '../../buttons/closeButton'
|
|
33
29
|
import Spinner from '../../spinner'
|
|
34
30
|
|
|
35
|
-
const
|
|
36
|
-
const ContentContainer = styled('div', contentAttrs)`
|
|
37
|
-
visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
|
|
38
|
-
`
|
|
39
|
-
|
|
40
|
-
const pageAttrs = { isOpen: Boolean, backdrop: String }
|
|
31
|
+
const pageAttrs = { isOpen: Boolean }
|
|
41
32
|
const PageWrapper = styled('div', pageAttrs)`
|
|
42
33
|
position: fixed;
|
|
43
34
|
display: grid;
|
|
@@ -45,10 +36,7 @@ const PageWrapper = styled('div', pageAttrs)`
|
|
|
45
36
|
left: 0;
|
|
46
37
|
width: 100%;
|
|
47
38
|
height: 100%;
|
|
48
|
-
background-color:
|
|
49
|
-
props.backdrop == 'dark'
|
|
50
|
-
? 'rgba(0, 0, 0, 0.4)'
|
|
51
|
-
: 'rgba(255, 255, 255, 0.9)'};
|
|
39
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
52
40
|
z-index: 99999;
|
|
53
41
|
overflow: auto;
|
|
54
42
|
|
|
@@ -110,8 +98,7 @@ export default {
|
|
|
110
98
|
PageWrapper,
|
|
111
99
|
ModalContainer,
|
|
112
100
|
CloseButton,
|
|
113
|
-
Spinner
|
|
114
|
-
ContentContainer
|
|
101
|
+
Spinner
|
|
115
102
|
},
|
|
116
103
|
props: {
|
|
117
104
|
isOpen: {
|
|
@@ -129,14 +116,6 @@ export default {
|
|
|
129
116
|
hideClose: {
|
|
130
117
|
required: false,
|
|
131
118
|
default: false
|
|
132
|
-
},
|
|
133
|
-
backdrop: {
|
|
134
|
-
required: false,
|
|
135
|
-
default: 'white'
|
|
136
|
-
},
|
|
137
|
-
fullwidthSpinner: {
|
|
138
|
-
required: false,
|
|
139
|
-
default: true
|
|
140
119
|
}
|
|
141
120
|
},
|
|
142
121
|
methods: {
|
|
@@ -156,4 +135,4 @@ export default {
|
|
|
156
135
|
}
|
|
157
136
|
}
|
|
158
137
|
}
|
|
159
|
-
</script>
|
|
138
|
+
</script>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<script>
|
|
19
19
|
// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
|
|
20
20
|
// <spinner size="30px" />
|
|
21
|
-
import styled from
|
|
21
|
+
import styled from "vue-styled-components"
|
|
22
22
|
|
|
23
23
|
const SpinnerContainer = styled.div`
|
|
24
24
|
position: fixed;
|
|
@@ -37,32 +37,29 @@ const Container = styled.div`
|
|
|
37
37
|
display: grid;
|
|
38
38
|
align-items: center;
|
|
39
39
|
justify-items: center;
|
|
40
|
-
position: absolute;
|
|
41
|
-
width: 100%;
|
|
42
|
-
height: 100%;
|
|
43
40
|
`
|
|
44
41
|
|
|
45
42
|
const spinnerAttrs = { size: String }
|
|
46
|
-
const SpinnerWrapper = styled(
|
|
47
|
-
width: ${(props) => (props.size ? props.size :
|
|
43
|
+
const SpinnerWrapper = styled("img", spinnerAttrs)`
|
|
44
|
+
width: ${(props) => (props.size ? props.size : "60px")};
|
|
48
45
|
`
|
|
49
46
|
|
|
50
47
|
export default {
|
|
51
|
-
name:
|
|
48
|
+
name: "spinner",
|
|
52
49
|
components: {
|
|
53
50
|
Container,
|
|
54
51
|
SpinnerWrapper,
|
|
55
|
-
SpinnerContainer
|
|
52
|
+
SpinnerContainer,
|
|
56
53
|
},
|
|
57
54
|
props: {
|
|
58
55
|
fullWidth: {
|
|
59
56
|
required: false,
|
|
60
|
-
default: false
|
|
57
|
+
default: false,
|
|
61
58
|
},
|
|
62
59
|
size: {
|
|
63
60
|
required: false,
|
|
64
|
-
default: null
|
|
65
|
-
}
|
|
66
|
-
}
|
|
61
|
+
default: null,
|
|
62
|
+
},
|
|
63
|
+
},
|
|
67
64
|
}
|
|
68
|
-
</script>
|
|
65
|
+
</script>
|