@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.
@@ -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
- ? roundViaInteger(this.value, this.numberPrecision)
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 = roundViaInteger(evaluated, this.numberPrecision)
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 = roundViaInteger(newVal, numberPrecision)
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