@eturnity/eturnity_reusable_components 1.2.35 → 1.2.37
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 +96 -89
- package/src/components/icon/index.vue +3 -1
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -4,82 +4,87 @@
|
|
|
4
4
|
<br />
|
|
5
5
|
|
|
6
6
|
<modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true">
|
|
7
|
+
<div :style="{ padding: '50px' }">
|
|
8
|
+
<input-number
|
|
9
|
+
:value="value"
|
|
10
|
+
:minNumber="0"
|
|
11
|
+
unitName="mm"
|
|
12
|
+
:numberPrecision="0"
|
|
13
|
+
backgroundColor="transparent"
|
|
14
|
+
borderColor="eturnityGrey"
|
|
15
|
+
inputHeight="34px"
|
|
16
|
+
inputWidth="420px"
|
|
17
|
+
textAlign="left"
|
|
18
|
+
:isInteractive="true"
|
|
19
|
+
:interactionStep="1"
|
|
20
|
+
alignItems="horizontal"
|
|
21
|
+
@on-input="value = $event"
|
|
22
|
+
@input-change="changeHandler"
|
|
23
|
+
@input-focus="focusHandler"
|
|
24
|
+
@input-blur="blurHandler"
|
|
25
|
+
>
|
|
26
|
+
<template v-slot:label>
|
|
27
|
+
<div>Interactive Label</div>
|
|
28
|
+
</template>
|
|
29
|
+
</input-number>
|
|
7
30
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
@input-change="changeHandler"
|
|
25
|
-
@input-focus="focusHandler"
|
|
26
|
-
@input-blur="blurHandler"
|
|
27
|
-
>
|
|
28
|
-
<template v-slot:label>
|
|
29
|
-
<div>
|
|
30
|
-
Interactive Label
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
</input-number>
|
|
31
|
+
<SwitchField
|
|
32
|
+
@on-switch-change="onInputChange($event)"
|
|
33
|
+
:options="[
|
|
34
|
+
{ value: 0, content: 'zero' },
|
|
35
|
+
{ value: 1, content: 'one' },
|
|
36
|
+
{ value: 2, content: 'two' }
|
|
37
|
+
]"
|
|
38
|
+
:value="value"
|
|
39
|
+
label="label"
|
|
40
|
+
toggleColor="red"
|
|
41
|
+
size="large"
|
|
42
|
+
backgroundColor="blue"
|
|
43
|
+
labelAlign="left"
|
|
44
|
+
fontColor="black"
|
|
45
|
+
:disabled="false"
|
|
46
|
+
/>
|
|
34
47
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
value selected: {{selectedValue}}
|
|
60
|
-
</template>
|
|
61
|
-
<template #dropdown>
|
|
62
|
-
<Option v-for="opt in filteredOptionList" :key="opt.id" :value="opt.val">{{ opt.lookFor }}</Option>
|
|
63
|
-
</template>
|
|
64
|
-
</Select>
|
|
65
|
-
{{filteredOptionList }}
|
|
66
|
-
</div>
|
|
48
|
+
<Select
|
|
49
|
+
:value="value"
|
|
50
|
+
selectWidth="100%"
|
|
51
|
+
optionWidth="50%"
|
|
52
|
+
label="that is a label"
|
|
53
|
+
alignItems="vertical"
|
|
54
|
+
colorMode="dark"
|
|
55
|
+
@input-change="value = $event"
|
|
56
|
+
@search-change="searchValue = $event"
|
|
57
|
+
>
|
|
58
|
+
<template #selector="{ selectedValue }">
|
|
59
|
+
value selected: {{ selectedValue }}
|
|
60
|
+
</template>
|
|
61
|
+
<template #dropdown>
|
|
62
|
+
<Option
|
|
63
|
+
v-for="opt in filteredOptionList"
|
|
64
|
+
:key="opt.id"
|
|
65
|
+
:value="opt.val"
|
|
66
|
+
>{{ opt.lookFor }}</Option
|
|
67
|
+
>
|
|
68
|
+
</template>
|
|
69
|
+
</Select>
|
|
70
|
+
{{ filteredOptionList }}
|
|
71
|
+
</div>
|
|
67
72
|
</modal>
|
|
68
|
-
<iconCollection/>
|
|
73
|
+
<iconCollection />
|
|
69
74
|
</page-container>
|
|
70
75
|
</ThemeProvider>
|
|
71
76
|
</template>
|
|
72
77
|
|
|
73
78
|
<script>
|
|
74
|
-
import { ThemeProvider } from
|
|
75
|
-
import theme from
|
|
76
|
-
import styled from
|
|
77
|
-
import InputNumber from
|
|
78
|
-
import Select from
|
|
79
|
-
import SwitchField from
|
|
80
|
-
import Option from
|
|
81
|
-
import Modal from
|
|
82
|
-
|
|
79
|
+
import { ThemeProvider } from 'vue-styled-components'
|
|
80
|
+
import theme from './assets/theme'
|
|
81
|
+
import styled from 'vue-styled-components'
|
|
82
|
+
import InputNumber from '@/components/inputs/inputNumber'
|
|
83
|
+
import Select from '@/components/inputs/select'
|
|
84
|
+
import SwitchField from '@/components/inputs/switchField'
|
|
85
|
+
import Option from '@/components/inputs/select/option'
|
|
86
|
+
import Modal from '@/components/modals/modal'
|
|
87
|
+
import iconCollection from '@/components/icon/iconCollection'
|
|
83
88
|
// import TableDropdown from "@/components/tableDropdown"
|
|
84
89
|
|
|
85
90
|
const PageContainer = styled.div`
|
|
@@ -106,36 +111,38 @@ export default {
|
|
|
106
111
|
},
|
|
107
112
|
data() {
|
|
108
113
|
return {
|
|
109
|
-
value:42,
|
|
110
|
-
value2:42,
|
|
111
|
-
companyName:
|
|
112
|
-
optionList:[
|
|
113
|
-
{id:'a',val:'A',lookFor:'babababa'},
|
|
114
|
-
{id:'b',val:'B',lookFor:'abab'},
|
|
115
|
-
{id:'c',val:'C',lookFor:'ccc'},
|
|
116
|
-
{id:'d',val:'D',lookFor:'ddd'}
|
|
114
|
+
value: 42,
|
|
115
|
+
value2: 42,
|
|
116
|
+
companyName: 'toto',
|
|
117
|
+
optionList: [
|
|
118
|
+
{ id: 'a', val: 'A', lookFor: 'babababa' },
|
|
119
|
+
{ id: 'b', val: 'B', lookFor: 'abab' },
|
|
120
|
+
{ id: 'c', val: 'C', lookFor: 'ccc' },
|
|
121
|
+
{ id: 'd', val: 'D', lookFor: 'ddd' }
|
|
117
122
|
],
|
|
118
|
-
searchValue:
|
|
123
|
+
searchValue: ''
|
|
119
124
|
}
|
|
120
125
|
},
|
|
121
|
-
computed:{
|
|
122
|
-
filteredOptionList(){
|
|
123
|
-
|
|
126
|
+
computed: {
|
|
127
|
+
filteredOptionList() {
|
|
128
|
+
return this.optionList.filter((opt) =>
|
|
129
|
+
opt.lookFor.includes(this.searchValue)
|
|
130
|
+
)
|
|
124
131
|
}
|
|
125
132
|
},
|
|
126
133
|
methods: {
|
|
127
|
-
blurHandler(e){
|
|
128
|
-
console.log('blur',e)
|
|
134
|
+
blurHandler(e) {
|
|
135
|
+
console.log('blur', e)
|
|
129
136
|
},
|
|
130
|
-
changeHandler(e){
|
|
131
|
-
console.log('change',e)
|
|
137
|
+
changeHandler(e) {
|
|
138
|
+
console.log('change', e)
|
|
132
139
|
},
|
|
133
|
-
focusHandler(e){
|
|
134
|
-
console.log('focus',e)
|
|
140
|
+
focusHandler(e) {
|
|
141
|
+
console.log('focus', e)
|
|
135
142
|
},
|
|
136
|
-
inputHandler(e){
|
|
137
|
-
this.value2=e
|
|
138
|
-
console.log('input',e)
|
|
143
|
+
inputHandler(e) {
|
|
144
|
+
this.value2 = e
|
|
145
|
+
console.log('input', e)
|
|
139
146
|
},
|
|
140
147
|
keydownHandler(e) {
|
|
141
148
|
console.log('test', e)
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
|
|
10
10
|
"
|
|
11
11
|
></icon-image>
|
|
12
|
-
</Wrapper>
|
|
12
|
+
</Wrapper>
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
15
|
<script>
|
|
@@ -30,6 +30,8 @@ const Wrapper = styled('div', wrapperAttrs)`
|
|
|
30
30
|
display: inline-block;
|
|
31
31
|
width: ${(props) => props.size};
|
|
32
32
|
height: ${(props) => props.size};
|
|
33
|
+
min-width: ${(props) => props.size};
|
|
34
|
+
min-height: ${(props) => props.size};
|
|
33
35
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
|
|
34
36
|
line-height: 0;
|
|
35
37
|
`
|