@eturnity/eturnity_reusable_components 8.22.23-EPDM-15888.1 → 8.22.23-EPDM-15547.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/dist/main.es12.js +2 -2
- package/dist/main.es13.js +3 -3
- package/dist/main.es14.js +2 -2
- package/dist/main.es15.js +60 -212
- package/dist/main.es16.js +196 -21
- package/dist/main.es17.js +197 -1037
- package/dist/main.es18.js +21 -224
- package/dist/main.es19.js +1046 -89
- package/dist/main.es20.js +227 -2
- package/dist/main.es21.js +68 -510
- package/dist/main.es22.js +2 -199
- package/dist/main.es23.js +536 -59
- package/dist/main.es24.js +2 -2
- package/dist/main.es5.js +3 -3
- package/dist/main.es6.js +4 -4
- package/dist/main.es9.js +1 -1
- package/package.json +1 -1
- package/src/components/inputs/inputNumber/index.vue +2 -3
- package/src/components/progressStep/index.vue +129 -0
- package/src/components/progressStep/progressStep.stories.js +58 -0
- package/src/helpers/numberConverter.js +1 -10
@@ -230,7 +230,6 @@
|
|
230
230
|
//</inputNumber>
|
231
231
|
import styled from 'vue3-styled-components'
|
232
232
|
import {
|
233
|
-
roundViaInteger,
|
234
233
|
stringToNumber,
|
235
234
|
numberToString,
|
236
235
|
} from '../../../helpers/numberConverter'
|
@@ -862,7 +861,7 @@
|
|
862
861
|
this.inputValue = this.value
|
863
862
|
this.enteredValue =
|
864
863
|
typeof this.value === 'number' && !isNaN(this.value)
|
865
|
-
?
|
864
|
+
? Number(this.value.toFixed(this.numberPrecision))
|
866
865
|
: this.value
|
867
866
|
}
|
868
867
|
},
|
@@ -966,7 +965,7 @@
|
|
966
965
|
minDecimals: this.minDecimals,
|
967
966
|
})
|
968
967
|
} else if (typeof evaluated === 'number') {
|
969
|
-
evaluated =
|
968
|
+
evaluated = evaluated.toFixed(this.numberPrecision)
|
970
969
|
}
|
971
970
|
return evaluated
|
972
971
|
},
|
@@ -0,0 +1,129 @@
|
|
1
|
+
<template>
|
2
|
+
<ProgressionStepContainer :number-of-steps="progressionSteps.length">
|
3
|
+
<template v-for="(step, stepIndex) in progressionSteps" :key="step.index">
|
4
|
+
<ProgressionStepItem>
|
5
|
+
<BoxContainer
|
6
|
+
:is-active="stepIndex == currentStepIndex"
|
7
|
+
:is-valid="stepIndex < currentStepIndex"
|
8
|
+
@click="
|
9
|
+
stepIndex < currentStepIndex ? $emit('on-step-click', step) : null
|
10
|
+
"
|
11
|
+
>
|
12
|
+
<RcIcon
|
13
|
+
v-if="stepIndex < currentStepIndex"
|
14
|
+
color="white"
|
15
|
+
hovered-color="white"
|
16
|
+
name="all_good"
|
17
|
+
:size="'20px'"
|
18
|
+
/>
|
19
|
+
<NumberContainer
|
20
|
+
v-else
|
21
|
+
:is-active="stepIndex === currentStepIndex"
|
22
|
+
:is-valid="stepIndex < currentStepIndex"
|
23
|
+
>
|
24
|
+
{{ step.number }}
|
25
|
+
</NumberContainer>
|
26
|
+
</BoxContainer>
|
27
|
+
<StepLabel>{{ step.label }}</StepLabel>
|
28
|
+
</ProgressionStepItem>
|
29
|
+
<StepIntermediateLine
|
30
|
+
v-if="stepIndex < progressionSteps.length - 1"
|
31
|
+
:is-valid="stepIndex < currentStepIndex"
|
32
|
+
/>
|
33
|
+
</template>
|
34
|
+
</ProgressionStepContainer>
|
35
|
+
</template>
|
36
|
+
|
37
|
+
<script>
|
38
|
+
// import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
|
39
|
+
//To use:
|
40
|
+
// <ProgressionSteps
|
41
|
+
// :current-step="ProgressionStep"
|
42
|
+
// :progression-steps="ProgressionSteps" [{label,value,number}]
|
43
|
+
// @on-step-click="onStepClick"
|
44
|
+
// />
|
45
|
+
import styled from 'vue3-styled-components'
|
46
|
+
import RcIcon from '@eturnity/eturnity_reusable_components/src/components/icon'
|
47
|
+
|
48
|
+
const StyledComponents = {
|
49
|
+
ProgressionStepContainer: styled('div', { numberOfSteps: Number })`
|
50
|
+
display: grid;
|
51
|
+
grid-template-columns:
|
52
|
+
repeat(${({ numberOfSteps }) => numberOfSteps - 1}, auto 1fr)
|
53
|
+
auto;
|
54
|
+
justify-content: center;
|
55
|
+
align-items: center;
|
56
|
+
width: 100%;
|
57
|
+
`,
|
58
|
+
ProgressionStepItem: styled.div`
|
59
|
+
display: flex;
|
60
|
+
flex-direction: row;
|
61
|
+
align-items: center;
|
62
|
+
`,
|
63
|
+
BoxContainer: styled('div', {
|
64
|
+
isActive: Boolean,
|
65
|
+
isValid: Boolean,
|
66
|
+
})`
|
67
|
+
display: flex;
|
68
|
+
justify-content: center;
|
69
|
+
align-items: center;
|
70
|
+
width: 32px;
|
71
|
+
height: 32px;
|
72
|
+
font-size: 16px;
|
73
|
+
background-color: ${({ theme, isValid, isActive }) =>
|
74
|
+
isActive
|
75
|
+
? theme.semanticColors.purple[500]
|
76
|
+
: isValid
|
77
|
+
? theme.semanticColors.purple[200]
|
78
|
+
: theme.semanticColors.purple[100]};
|
79
|
+
color: ${({ theme, isValid, isActive }) =>
|
80
|
+
isActive ? theme.colors.white : theme.semanticColors.teal[800]};
|
81
|
+
margin: 0 10px;
|
82
|
+
border-radius: 5px;
|
83
|
+
cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
|
84
|
+
&:hover {
|
85
|
+
${({ theme, isValid, isActive }) =>
|
86
|
+
isValid
|
87
|
+
? 'background-color:' + theme.semanticColors.purple[100] + ';'
|
88
|
+
: ''}
|
89
|
+
}
|
90
|
+
`,
|
91
|
+
StepIntermediateLine: styled('div', { isValid: Boolean })`
|
92
|
+
height: 2px;
|
93
|
+
margin: 0 10px;
|
94
|
+
background-color: ${({ theme, isValid }) =>
|
95
|
+
isValid
|
96
|
+
? theme.semanticColors.purple[500]
|
97
|
+
: theme.semanticColors.teal[200]};
|
98
|
+
`,
|
99
|
+
StepLabel: styled.div`
|
100
|
+
max-width: 220px;
|
101
|
+
margin: 0 10px;
|
102
|
+
`,
|
103
|
+
NumberContainer: styled.div``,
|
104
|
+
}
|
105
|
+
export default {
|
106
|
+
name: 'ProgressionSteps',
|
107
|
+
components: {
|
108
|
+
...StyledComponents,
|
109
|
+
RcIcon,
|
110
|
+
},
|
111
|
+
props: {
|
112
|
+
progressionSteps: {
|
113
|
+
type: Array,
|
114
|
+
required: true,
|
115
|
+
},
|
116
|
+
currentStep: {
|
117
|
+
type: String,
|
118
|
+
required: true,
|
119
|
+
},
|
120
|
+
},
|
121
|
+
computed: {
|
122
|
+
currentStepIndex() {
|
123
|
+
return this.progressionSteps.findIndex(
|
124
|
+
(step) => step.value === this.currentStep
|
125
|
+
)
|
126
|
+
},
|
127
|
+
},
|
128
|
+
}
|
129
|
+
</script>
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import progressStep from './index.vue'
|
2
|
+
|
3
|
+
export default {
|
4
|
+
title: 'progressStep',
|
5
|
+
component: progressStep,
|
6
|
+
tags: ['autodocs'],
|
7
|
+
parameters: {
|
8
|
+
layout: 'centered',
|
9
|
+
},
|
10
|
+
}
|
11
|
+
|
12
|
+
// import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
|
13
|
+
//To use:
|
14
|
+
// <ProgressionSteps
|
15
|
+
// :current-step="ProgressionStep"
|
16
|
+
// :progression-steps="ProgressionSteps" [{label,value,number}]
|
17
|
+
// @on-step-click="onStepClick"
|
18
|
+
// />
|
19
|
+
|
20
|
+
const PROGRESSION_STEP_LIST = [
|
21
|
+
{
|
22
|
+
label: 'progression step label 1',
|
23
|
+
value: 'step1',
|
24
|
+
number: 1,
|
25
|
+
},
|
26
|
+
{
|
27
|
+
label: 'progression step label 2',
|
28
|
+
value: 'step2',
|
29
|
+
number: 2,
|
30
|
+
},
|
31
|
+
{
|
32
|
+
label: 'progression step label 3',
|
33
|
+
value: 'step3',
|
34
|
+
number: 3,
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
export const Default = {
|
39
|
+
args: {
|
40
|
+
'current-step': 'step1',
|
41
|
+
'progression-steps': PROGRESSION_STEP_LIST,
|
42
|
+
},
|
43
|
+
}
|
44
|
+
|
45
|
+
export const Template = {
|
46
|
+
args: {
|
47
|
+
...Default.args,
|
48
|
+
},
|
49
|
+
render: (args) => ({
|
50
|
+
components: { progressStep },
|
51
|
+
setup() {
|
52
|
+
return { args }
|
53
|
+
},
|
54
|
+
template: `
|
55
|
+
<progressStep v-bind="args"/>
|
56
|
+
`,
|
57
|
+
}),
|
58
|
+
}
|
@@ -87,20 +87,11 @@ export const stringToNumber = ({
|
|
87
87
|
}
|
88
88
|
newVal = parseFloat(newVal)
|
89
89
|
if (numberPrecision !== false) {
|
90
|
-
newVal =
|
90
|
+
newVal = newVal.toFixed(numberPrecision)
|
91
91
|
}
|
92
92
|
return parseFloat(newVal)
|
93
93
|
}
|
94
94
|
|
95
|
-
export const roundViaInteger = (value, numberPrecision) => {
|
96
|
-
if (typeof value === 'string') {
|
97
|
-
value = parseFloat(value)
|
98
|
-
}
|
99
|
-
const factor = Math.pow(10, numberPrecision)
|
100
|
-
const roundedValue = Math.round(value * factor) / factor
|
101
|
-
return roundedValue
|
102
|
-
}
|
103
|
-
|
104
95
|
export const numberToString = ({ value, numberPrecision, minDecimals }) => {
|
105
96
|
const minimumRounding = minDecimals ? minDecimals : 0
|
106
97
|
value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
|