@eturnity/eturnity_reusable_components 1.2.36 → 1.2.38
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/assets/svgIcons/dislike.svg +3 -0
- package/src/assets/svgIcons/external_icon.svg +5 -0
- package/src/assets/svgIcons/like.svg +3 -0
- package/src/assets/theme.js +1 -1
- package/src/components/buttons/buttonIcon/index.vue +142 -0
- package/src/components/inputs/inputNumber/index.vue +70 -64
- package/src/components/buttons/externalButton/index.vue +0 -101
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)
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6.40533 12.7951L9.87682 9.32359C10.1087 9.09174 10.2403 8.77216 10.2403 8.44005V2.18009C10.2403 1.4908 9.6763 0.92684 8.98702 0.92684H3.34741C2.84611 0.92684 2.39494 1.22762 2.19442 1.68505L0.151629 6.45366C-0.374734 7.69437 0.53387 9.07294 1.88111 9.07294H5.42153L4.82624 11.9429C4.76358 12.2562 4.85757 12.5758 5.08315 12.8013C5.45286 13.1648 6.04189 13.1648 6.40533 12.7951ZM12.7468 0.92684C12.0575 0.92684 11.4935 1.4908 11.4935 2.18009V7.19307C11.4935 7.88236 12.0575 8.44632 12.7468 8.44632C13.436 8.44632 14 7.88236 14 7.19307V2.18009C14 1.4908 13.436 0.92684 12.7468 0.92684Z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
|
2
|
+
<path d="m12.6 14h-11.4c-0.7 0-1.3-0.6-1.3-1.3v-11.4c0-0.7 0.6-1.3 1.3-1.3h4.8v2h-3.1c-0.5 0-1 0.4-1 0.9v8.3c0 0.4 0.5 0.8 1 0.8h8.3c0.4 0 0.9-0.4 0.9-0.9v-3.1h2v4.7c-0.2 0.7-0.7 1.3-1.5 1.3z"/>
|
|
3
|
+
<path d="m7.9 0h6v6z"/>
|
|
4
|
+
<path d="m5.7 9.8l-1.4-1.5 7.1-7.1 1.4 1.4z"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.59467 1.20492L4.12318 4.67641C3.89133 4.90826 3.75974 5.22784 3.75974 5.55995V11.8199C3.75974 12.5092 4.3237 13.0732 5.01298 13.0732H10.6526C11.1539 13.0732 11.6051 12.7724 11.8056 12.3149L13.8484 7.54634C14.3747 6.30563 13.4661 4.92706 12.1189 4.92706H8.57847L9.17376 2.05713C9.23642 1.74381 9.14243 1.42424 8.91685 1.19865C8.54714 0.835211 7.95811 0.835211 7.59467 1.20492V1.20492ZM1.25325 13.0732C1.94253 13.0732 2.50649 12.5092 2.50649 11.8199V6.80693C2.50649 6.11764 1.94253 5.55368 1.25325 5.55368C0.563961 5.55368 0 6.11764 0 6.80693V11.8199C0 12.5092 0.563961 13.0732 1.25325 13.0732Z"/>
|
|
3
|
+
</svg>
|
package/src/assets/theme.js
CHANGED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<page-container>
|
|
3
|
+
<button-wrapper
|
|
4
|
+
:isDisabled="isDisabled"
|
|
5
|
+
:minWidth="minWidth"
|
|
6
|
+
:customColor="customColor"
|
|
7
|
+
:height="height"
|
|
8
|
+
>
|
|
9
|
+
<icon-container :width="height">
|
|
10
|
+
<icon
|
|
11
|
+
:name="iconName"
|
|
12
|
+
:color="fontColor ? fontColor : theme.colors.white"
|
|
13
|
+
size="14px"
|
|
14
|
+
/>
|
|
15
|
+
</icon-container>
|
|
16
|
+
<button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
|
|
17
|
+
</button-wrapper>
|
|
18
|
+
</page-container>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
|
|
23
|
+
// <button-icon
|
|
24
|
+
// :isDisabled="true"
|
|
25
|
+
// text="Click Me"
|
|
26
|
+
// minWidth="300px"
|
|
27
|
+
// customColor="#000"
|
|
28
|
+
// iconName="external_icon"
|
|
29
|
+
// fontColor="white"
|
|
30
|
+
// fontSize="12px"
|
|
31
|
+
// height="24px"
|
|
32
|
+
// />
|
|
33
|
+
|
|
34
|
+
import Icon from "../../icon"
|
|
35
|
+
import styled from "vue-styled-components"
|
|
36
|
+
import Theme from "@/assets/theme";
|
|
37
|
+
|
|
38
|
+
const PageContainer = styled.div``
|
|
39
|
+
|
|
40
|
+
const ButtonAttrs = {
|
|
41
|
+
isDisabled: Boolean,
|
|
42
|
+
minWidth: String,
|
|
43
|
+
customColor: String,
|
|
44
|
+
height: String
|
|
45
|
+
}
|
|
46
|
+
const ButtonWrapper = styled("div", ButtonAttrs)`
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-template-columns: auto 1fr;
|
|
49
|
+
background-color: ${(props) =>
|
|
50
|
+
props.isDisabled
|
|
51
|
+
? props.theme.colors.disabled
|
|
52
|
+
: props.customColor
|
|
53
|
+
? props.customColor
|
|
54
|
+
: props.theme.colors.yellow};
|
|
55
|
+
cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
|
|
56
|
+
user-select: none;
|
|
57
|
+
border-radius: 4px;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
|
|
60
|
+
height: ${(props) => props.height};
|
|
61
|
+
|
|
62
|
+
&:hover {
|
|
63
|
+
opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:active {
|
|
67
|
+
opacity: 1;
|
|
68
|
+
}
|
|
69
|
+
`
|
|
70
|
+
|
|
71
|
+
const ButtonContainerAttrs = {
|
|
72
|
+
fontSize: String,
|
|
73
|
+
fontColor: String
|
|
74
|
+
}
|
|
75
|
+
const ButtonContainer = styled('div', ButtonContainerAttrs)`
|
|
76
|
+
font-size: ${(props) => props.fontSize};
|
|
77
|
+
color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
padding: 0 15px;
|
|
82
|
+
`
|
|
83
|
+
|
|
84
|
+
const IconContainerAttrs = {
|
|
85
|
+
width: String
|
|
86
|
+
}
|
|
87
|
+
const IconContainer = styled('div', IconContainerAttrs)`
|
|
88
|
+
display: grid;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-items: center;
|
|
91
|
+
width: ${(props) => props.width};
|
|
92
|
+
background: ${(props) => props.theme.colors.white + '1a'};
|
|
93
|
+
`
|
|
94
|
+
|
|
95
|
+
export default {
|
|
96
|
+
name: "button-icon",
|
|
97
|
+
components: {
|
|
98
|
+
PageContainer,
|
|
99
|
+
ButtonContainer,
|
|
100
|
+
ButtonWrapper,
|
|
101
|
+
IconContainer,
|
|
102
|
+
Icon
|
|
103
|
+
},
|
|
104
|
+
props: {
|
|
105
|
+
isDisabled: {
|
|
106
|
+
required: false,
|
|
107
|
+
default: false
|
|
108
|
+
},
|
|
109
|
+
text: {
|
|
110
|
+
required: true
|
|
111
|
+
},
|
|
112
|
+
minWidth: {
|
|
113
|
+
required: false,
|
|
114
|
+
default: null
|
|
115
|
+
},
|
|
116
|
+
customColor: {
|
|
117
|
+
required: false,
|
|
118
|
+
default: null
|
|
119
|
+
},
|
|
120
|
+
iconName: {
|
|
121
|
+
required: true
|
|
122
|
+
},
|
|
123
|
+
fontColor: {
|
|
124
|
+
required: false,
|
|
125
|
+
default: null
|
|
126
|
+
},
|
|
127
|
+
fontSize: {
|
|
128
|
+
required: false,
|
|
129
|
+
default: '13px'
|
|
130
|
+
},
|
|
131
|
+
height: {
|
|
132
|
+
required: false,
|
|
133
|
+
default: '30px'
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
data () {
|
|
137
|
+
return {
|
|
138
|
+
theme: Theme
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
</script>
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<container :inputWidth="inputWidth" :alignItems="alignItems">
|
|
3
|
-
<label-slot-wrapper
|
|
3
|
+
<label-slot-wrapper
|
|
4
|
+
v-if="hasLabelSlot"
|
|
5
|
+
:isInteractive="isInteractive"
|
|
6
|
+
@mousedown="initInteraction"
|
|
7
|
+
>
|
|
4
8
|
<slot name="label"></slot>
|
|
5
9
|
</label-slot-wrapper>
|
|
6
|
-
|
|
10
|
+
|
|
7
11
|
<label-wrapper v-if="labelText">
|
|
8
12
|
<label-text :labelFontColor="labelFontColor">
|
|
9
13
|
{{ labelText }}
|
|
@@ -108,23 +112,23 @@ const inputProps = {
|
|
|
108
112
|
textAlign: String,
|
|
109
113
|
fontSize: String,
|
|
110
114
|
fontColor: String,
|
|
111
|
-
backgroundColor:String,
|
|
115
|
+
backgroundColor: String,
|
|
112
116
|
hasSlot: Boolean,
|
|
113
117
|
hasLabelSlot: Boolean,
|
|
114
118
|
slotSize: String,
|
|
115
|
-
inputHeight:String,
|
|
116
|
-
isInteractive:Boolean,
|
|
117
|
-
alignItems:String,
|
|
118
|
-
labelFontColor:String,
|
|
119
|
-
borderColor:String
|
|
119
|
+
inputHeight: String,
|
|
120
|
+
isInteractive: Boolean,
|
|
121
|
+
alignItems: String,
|
|
122
|
+
labelFontColor: String,
|
|
123
|
+
borderColor: String
|
|
120
124
|
}
|
|
121
125
|
|
|
122
126
|
const Container = styled('div', inputProps)`
|
|
123
127
|
width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
|
|
124
128
|
position: relative;
|
|
125
|
-
display:grid;
|
|
129
|
+
display: grid;
|
|
126
130
|
grid-template-columns: ${(props) =>
|
|
127
|
-
props.alignItems ===
|
|
131
|
+
props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
|
|
128
132
|
`
|
|
129
133
|
|
|
130
134
|
const InputContainer = styled('input', inputProps)`
|
|
@@ -133,18 +137,16 @@ const InputContainer = styled('input', inputProps)`
|
|
|
133
137
|
? '1px solid ' + props.theme.colors.red
|
|
134
138
|
: props.noBorder
|
|
135
139
|
? 'none'
|
|
136
|
-
: props.borderColor
|
|
137
|
-
props.theme.colors[props.borderColor]
|
|
138
|
-
|
|
139
|
-
|
|
140
|
+
: props.borderColor
|
|
141
|
+
? props.theme.colors[props.borderColor]
|
|
142
|
+
? '1px solid ' + props.theme.colors[props.borderColor]
|
|
143
|
+
: '1px solid ' + props.borderColor
|
|
140
144
|
: '1px solid ' + props.theme.colors.grey4};
|
|
141
145
|
padding-top: 11px;
|
|
142
146
|
padding-bottom: 11px;
|
|
143
147
|
padding-left: 10px;
|
|
144
148
|
padding-right: ${(props) =>
|
|
145
|
-
props.slotSize
|
|
146
|
-
? 'calc(' + props.slotSize + ' + 10px)'
|
|
147
|
-
: '5px'};
|
|
149
|
+
props.slotSize ? 'calc(' + props.slotSize + ' + 10px)' : '5px'};
|
|
148
150
|
border-radius: 4px;
|
|
149
151
|
text-align: ${(props) => props.textAlign};
|
|
150
152
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
|
|
@@ -157,10 +159,12 @@ const InputContainer = styled('input', inputProps)`
|
|
|
157
159
|
: props.fontColor
|
|
158
160
|
? props.fontColor + ' !important'
|
|
159
161
|
: props.theme.colors.black};
|
|
160
|
-
background-color
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
162
|
+
background-color: ${(props) =>
|
|
163
|
+
props.backgroundColor
|
|
164
|
+
? props.backgroundColor + ' !important'
|
|
165
|
+
: props.theme.colors.white};
|
|
166
|
+
width: ${(props) =>
|
|
167
|
+
props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
|
|
164
168
|
min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
|
|
165
169
|
background-color: ${(props) =>
|
|
166
170
|
props.isDisabled ? props.theme.colors.grey5 : '#fff'};
|
|
@@ -198,7 +202,7 @@ const UnitContainer = styled('span', inputProps)`
|
|
|
198
202
|
: props.theme.colors.mediumGray};
|
|
199
203
|
position: absolute;
|
|
200
204
|
right: 10px;
|
|
201
|
-
top:
|
|
205
|
+
top: 10px;
|
|
202
206
|
padding-left: 10px;
|
|
203
207
|
text-align: right;
|
|
204
208
|
color: ${(props) =>
|
|
@@ -232,23 +236,26 @@ const SlotContainer = styled('span', inputProps)`
|
|
|
232
236
|
: props.theme.colors.mediumGray};
|
|
233
237
|
`
|
|
234
238
|
|
|
235
|
-
const LabelWrapper = styled('div',inputProps)`
|
|
239
|
+
const LabelWrapper = styled('div', inputProps)`
|
|
236
240
|
display: flex;
|
|
237
241
|
align-items: center;
|
|
238
242
|
gap: 10px;
|
|
239
243
|
margin-bottom: 8px;
|
|
240
|
-
cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
|
|
244
|
+
cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
|
|
241
245
|
`
|
|
242
|
-
const LabelSlotWrapper = styled('div',inputProps)`
|
|
246
|
+
const LabelSlotWrapper = styled('div', inputProps)`
|
|
243
247
|
display: flex;
|
|
244
248
|
gap: 10px;
|
|
245
|
-
align-items:center;
|
|
246
|
-
cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
|
|
249
|
+
align-items: center;
|
|
250
|
+
cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
|
|
247
251
|
`
|
|
248
252
|
|
|
249
|
-
const LabelText = styled('div',inputProps)`
|
|
253
|
+
const LabelText = styled('div', inputProps)`
|
|
250
254
|
font-size: 13px;
|
|
251
|
-
color: ${(props) =>
|
|
255
|
+
color: ${(props) =>
|
|
256
|
+
props.theme.colors[props.labelFontColor]
|
|
257
|
+
? props.theme.colors[props.labelFontColor]
|
|
258
|
+
: props.labelFontColor};
|
|
252
259
|
font-weight: 700;
|
|
253
260
|
`
|
|
254
261
|
|
|
@@ -265,7 +272,7 @@ export default {
|
|
|
265
272
|
LabelText,
|
|
266
273
|
InfoText,
|
|
267
274
|
Icon,
|
|
268
|
-
SlotContainer
|
|
275
|
+
SlotContainer
|
|
269
276
|
},
|
|
270
277
|
inheritAttrs: false,
|
|
271
278
|
data() {
|
|
@@ -306,7 +313,7 @@ export default {
|
|
|
306
313
|
},
|
|
307
314
|
alignItems: {
|
|
308
315
|
required: false,
|
|
309
|
-
default:
|
|
316
|
+
default: 'vertical'
|
|
310
317
|
},
|
|
311
318
|
errorMessage: {
|
|
312
319
|
required: false,
|
|
@@ -332,8 +339,8 @@ export default {
|
|
|
332
339
|
required: false,
|
|
333
340
|
default: false
|
|
334
341
|
},
|
|
335
|
-
borderColor:{
|
|
336
|
-
required:false
|
|
342
|
+
borderColor: {
|
|
343
|
+
required: false
|
|
337
344
|
},
|
|
338
345
|
textAlign: {
|
|
339
346
|
required: false,
|
|
@@ -347,9 +354,9 @@ export default {
|
|
|
347
354
|
required: false,
|
|
348
355
|
default: false
|
|
349
356
|
},
|
|
350
|
-
interactionStep:{
|
|
351
|
-
required:false,
|
|
352
|
-
default:1
|
|
357
|
+
interactionStep: {
|
|
358
|
+
required: false,
|
|
359
|
+
default: 1
|
|
353
360
|
},
|
|
354
361
|
labelText: {
|
|
355
362
|
required: false,
|
|
@@ -401,9 +408,9 @@ export default {
|
|
|
401
408
|
slotSize: {
|
|
402
409
|
required: false
|
|
403
410
|
},
|
|
404
|
-
labelFontColor:{
|
|
405
|
-
required:false,
|
|
406
|
-
default:'eturnityGrey'
|
|
411
|
+
labelFontColor: {
|
|
412
|
+
required: false,
|
|
413
|
+
default: 'eturnityGrey'
|
|
407
414
|
}
|
|
408
415
|
},
|
|
409
416
|
computed: {
|
|
@@ -414,9 +421,9 @@ export default {
|
|
|
414
421
|
hasSlot() {
|
|
415
422
|
return !!this.$slots.default
|
|
416
423
|
},
|
|
417
|
-
hasLabelSlot(){
|
|
424
|
+
hasLabelSlot() {
|
|
418
425
|
return !!this.$slots.label
|
|
419
|
-
}
|
|
426
|
+
}
|
|
420
427
|
},
|
|
421
428
|
methods: {
|
|
422
429
|
onChangeHandler(event) {
|
|
@@ -465,13 +472,13 @@ export default {
|
|
|
465
472
|
}
|
|
466
473
|
return evaluated
|
|
467
474
|
},
|
|
468
|
-
onInput(value){
|
|
475
|
+
onInput(value) {
|
|
469
476
|
let evaluatedVal
|
|
470
|
-
try{
|
|
471
|
-
|
|
472
|
-
}finally {
|
|
473
|
-
if(evaluatedVal){
|
|
474
|
-
|
|
477
|
+
try {
|
|
478
|
+
evaluatedVal = this.onEvaluateCode(value)
|
|
479
|
+
} finally {
|
|
480
|
+
if (evaluatedVal) {
|
|
481
|
+
this.$emit('on-input', evaluatedVal)
|
|
475
482
|
}
|
|
476
483
|
}
|
|
477
484
|
},
|
|
@@ -543,31 +550,30 @@ export default {
|
|
|
543
550
|
}
|
|
544
551
|
},
|
|
545
552
|
initInteraction(e) {
|
|
546
|
-
window.addEventListener('mousemove', this.interact, false)
|
|
547
|
-
window.addEventListener('mouseup', this.stopInteract, false)
|
|
548
|
-
e.preventDefault()
|
|
553
|
+
window.addEventListener('mousemove', this.interact, false)
|
|
554
|
+
window.addEventListener('mouseup', this.stopInteract, false)
|
|
555
|
+
e.preventDefault()
|
|
549
556
|
this.focusInput()
|
|
550
557
|
},
|
|
551
558
|
interact(e) {
|
|
552
|
-
e.preventDefault()
|
|
553
|
-
let value=parseFloat(this.value || 0)
|
|
554
|
-
console.log(
|
|
555
|
-
value+=parseFloat(this.interactionStep)*parseInt(e.movementX)
|
|
556
|
-
this.$emit('on-input',value)
|
|
559
|
+
e.preventDefault()
|
|
560
|
+
let value = parseFloat(this.value || 0)
|
|
561
|
+
console.log('value', value)
|
|
562
|
+
value += parseFloat(this.interactionStep) * parseInt(e.movementX)
|
|
563
|
+
this.$emit('on-input', value)
|
|
557
564
|
|
|
558
|
-
this.textInput=numberToString({
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
})
|
|
565
|
+
this.textInput = numberToString({
|
|
566
|
+
value: value && value.length ? value : this.minNumber,
|
|
567
|
+
numberPrecision: this.numberPrecision
|
|
568
|
+
})
|
|
563
569
|
//this.value=value
|
|
564
570
|
},
|
|
565
571
|
stopInteract(e) {
|
|
566
|
-
e.preventDefault()
|
|
567
|
-
window.removeEventListener('mousemove', this.interact, false)
|
|
568
|
-
window.removeEventListener('mouseup', this.stopInteract, false)
|
|
572
|
+
e.preventDefault()
|
|
573
|
+
window.removeEventListener('mousemove', this.interact, false)
|
|
574
|
+
window.removeEventListener('mouseup', this.stopInteract, false)
|
|
569
575
|
this.blurInput()
|
|
570
|
-
}
|
|
576
|
+
}
|
|
571
577
|
},
|
|
572
578
|
created() {
|
|
573
579
|
if (this.value) {
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<page-container>
|
|
3
|
-
<button-wrapper
|
|
4
|
-
:isDisabled="isDisabled"
|
|
5
|
-
:minWidth="minWidth"
|
|
6
|
-
:customColor="customColor"
|
|
7
|
-
>
|
|
8
|
-
<icon-container>
|
|
9
|
-
<icon-element
|
|
10
|
-
:src="require('../../../assets/icons/external_icon.svg')"
|
|
11
|
-
/>
|
|
12
|
-
</icon-container>
|
|
13
|
-
<button-container>{{ text }}</button-container>
|
|
14
|
-
</button-wrapper>
|
|
15
|
-
</page-container>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script>
|
|
19
|
-
// import ExternalButton from "@eturnity/eturnity_reusable_components/src/components/buttons/externalButton"
|
|
20
|
-
// <main-button
|
|
21
|
-
// :isDisabled="true"
|
|
22
|
-
// text="Click Me"
|
|
23
|
-
// minWidth="300px"
|
|
24
|
-
// customColor="#000"
|
|
25
|
-
// />
|
|
26
|
-
|
|
27
|
-
import styled from "vue-styled-components"
|
|
28
|
-
|
|
29
|
-
const PageContainer = styled.div``
|
|
30
|
-
|
|
31
|
-
const ButtonAttrs = {
|
|
32
|
-
isDisabled: Boolean,
|
|
33
|
-
minWidth: String,
|
|
34
|
-
customColor: String,
|
|
35
|
-
}
|
|
36
|
-
const ButtonWrapper = styled("div", ButtonAttrs)`
|
|
37
|
-
display: grid;
|
|
38
|
-
grid-template-columns: auto 1fr;
|
|
39
|
-
background-color: ${(props) =>
|
|
40
|
-
props.isDisabled
|
|
41
|
-
? props.theme.colors.disabled
|
|
42
|
-
: props.customColor
|
|
43
|
-
? props.customColor
|
|
44
|
-
: props.theme.colors.yellow};
|
|
45
|
-
cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
|
|
46
|
-
user-select: none;
|
|
47
|
-
border-radius: 4px;
|
|
48
|
-
min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
|
|
49
|
-
|
|
50
|
-
&:hover {
|
|
51
|
-
opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&:active {
|
|
55
|
-
opacity: 1;
|
|
56
|
-
}
|
|
57
|
-
`
|
|
58
|
-
|
|
59
|
-
const ButtonContainer = styled.div`
|
|
60
|
-
padding: 7px 15px;
|
|
61
|
-
font-size: 13px;
|
|
62
|
-
color: ${(props) => props.theme.colors.white};
|
|
63
|
-
text-align: center;
|
|
64
|
-
`
|
|
65
|
-
|
|
66
|
-
const IconContainer = styled.div`
|
|
67
|
-
display: grid;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-items: center;
|
|
70
|
-
`
|
|
71
|
-
|
|
72
|
-
const IconElement = styled.img``
|
|
73
|
-
|
|
74
|
-
export default {
|
|
75
|
-
name: "external-button",
|
|
76
|
-
components: {
|
|
77
|
-
PageContainer,
|
|
78
|
-
ButtonContainer,
|
|
79
|
-
ButtonWrapper,
|
|
80
|
-
IconContainer,
|
|
81
|
-
IconElement,
|
|
82
|
-
},
|
|
83
|
-
props: {
|
|
84
|
-
isDisabled: {
|
|
85
|
-
required: false,
|
|
86
|
-
default: false,
|
|
87
|
-
},
|
|
88
|
-
text: {
|
|
89
|
-
required: true,
|
|
90
|
-
},
|
|
91
|
-
minWidth: {
|
|
92
|
-
required: false,
|
|
93
|
-
default: null,
|
|
94
|
-
},
|
|
95
|
-
customColor: {
|
|
96
|
-
required: false,
|
|
97
|
-
default: null,
|
|
98
|
-
},
|
|
99
|
-
},
|
|
100
|
-
}
|
|
101
|
-
</script>
|