@eturnity/eturnity_reusable_components 1.2.36 → 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/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/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,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>
|