@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.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.
Files changed (83) hide show
  1. package/.prettierrc +6 -8
  2. package/package.json +21 -9
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +78 -79
  6. package/src/assets/svgIcons/adjust_roof.svg +6 -0
  7. package/src/assets/svgIcons/copy.svg +10 -0
  8. package/src/assets/theme.js +3 -3
  9. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  10. package/src/components/addNewButton/index.vue +51 -48
  11. package/src/components/banner/actionBanner/index.vue +55 -54
  12. package/src/components/banner/banner/banner.stories.js +5 -5
  13. package/src/components/banner/banner/index.vue +159 -159
  14. package/src/components/banner/infoBanner/index.vue +53 -41
  15. package/src/components/buttons/buttonIcon/index.vue +122 -125
  16. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  17. package/src/components/buttons/closeButton/index.vue +49 -49
  18. package/src/components/buttons/mainButton/index.vue +119 -119
  19. package/src/components/card/index.vue +70 -70
  20. package/src/components/collapsableInfoText/index.vue +94 -96
  21. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  22. package/src/components/deleteIcon/index.vue +54 -54
  23. package/src/components/draggableInputHandle/index.vue +37 -37
  24. package/src/components/dropdown/Dropdown.stories.js +10 -9
  25. package/src/components/dropdown/index.vue +106 -106
  26. package/src/components/errorMessage/index.vue +52 -52
  27. package/src/components/filter/filterSettings.vue +433 -439
  28. package/src/components/filter/index.vue +135 -135
  29. package/src/components/filter/parentDropdown.vue +73 -73
  30. package/src/components/icon/Icons.stories.js +7 -7
  31. package/src/components/icon/iconCollection.vue +53 -53
  32. package/src/components/icon/index.vue +121 -121
  33. package/src/components/iconWrapper/index.vue +156 -156
  34. package/src/components/infoCard/index.vue +26 -26
  35. package/src/components/infoText/index.vue +132 -133
  36. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  37. package/src/components/inputs/checkbox/index.vue +180 -190
  38. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  39. package/src/components/inputs/inputNumber/index.vue +644 -647
  40. package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
  41. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  42. package/src/components/inputs/inputText/index.vue +336 -337
  43. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  44. package/src/components/inputs/radioButton/index.vue +219 -221
  45. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  46. package/src/components/inputs/searchInput/index.vue +126 -126
  47. package/src/components/inputs/select/index.vue +776 -778
  48. package/src/components/inputs/select/option/index.vue +124 -124
  49. package/src/components/inputs/select/select.stories.js +32 -31
  50. package/src/components/inputs/slider/index.vue +99 -99
  51. package/src/components/inputs/switchField/index.vue +222 -220
  52. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  53. package/src/components/inputs/textAreaInput/index.vue +173 -171
  54. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  55. package/src/components/inputs/toggle/index.vue +217 -214
  56. package/src/components/label/index.vue +82 -82
  57. package/src/components/markerItem/index.vue +66 -68
  58. package/src/components/modals/actionModal/index.vue +54 -54
  59. package/src/components/modals/infoModal/index.vue +36 -39
  60. package/src/components/modals/modal/index.vue +134 -134
  61. package/src/components/modals/modal/modal.stories.js +5 -5
  62. package/src/components/navigationTabs/index.vue +94 -96
  63. package/src/components/pageSubtitle/index.vue +49 -55
  64. package/src/components/pageTitle/index.vue +56 -56
  65. package/src/components/pagination/index.vue +89 -92
  66. package/src/components/progressBar/index.vue +107 -107
  67. package/src/components/projectMarker/index.vue +244 -246
  68. package/src/components/rangeSlider/Slider.vue +465 -491
  69. package/src/components/rangeSlider/index.vue +410 -410
  70. package/src/components/rangeSlider/utils/dom.js +5 -5
  71. package/src/components/selectedOptions/index.vue +119 -119
  72. package/src/components/sideMenu/index.vue +199 -199
  73. package/src/components/spinner/index.vue +57 -57
  74. package/src/components/tableDropdown/index.vue +520 -520
  75. package/src/components/tables/mainTable/index.vue +362 -366
  76. package/src/components/tables/viewTable/index.vue +171 -171
  77. package/src/components/threeDots/index.vue +334 -340
  78. package/src/components/videoThumbnail/index.vue +86 -86
  79. package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
  80. package/src/helpers/numberConverter.js +2 -2
  81. package/src/helpers/translateLang.js +9 -9
  82. package/src/mixins/inputValidations.js +5 -5
  83. package/.eslintrc.js +0 -184
@@ -1,161 +1,160 @@
1
1
  <template>
2
- <ComponentWrapper>
3
- <IconWrapper :size="size">
4
- <IconImg
2
+ <component-wrapper>
3
+ <icon-wrapper :size="size">
4
+ <icon-img
5
5
  @click.prevent="toggleShowInfo()"
6
6
  @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
7
7
  @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
8
8
  >
9
- <RCIcon :color="iconColor" cursor="pointer" name="info" :size="size" />
10
- </IconImg>
11
- <TextOverlay
9
+ <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
10
+ </icon-img>
11
+ <text-overlay
12
12
  v-if="showInfo"
13
- :align-arrow="alignArrow"
14
- :half-computed-text-info-width="halfComputedTextInfoWidth"
15
- :icon-size="size"
16
13
  :width="width"
17
- >
18
- <slot></slot>
14
+ :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
15
+ :alignArrow="alignArrow"
16
+ :iconSize="size"
17
+ ><slot />
19
18
  <span v-html="text"></span>
20
- </TextOverlay>
21
- </IconWrapper>
22
- </ComponentWrapper>
19
+ </text-overlay>
20
+ </icon-wrapper>
21
+ </component-wrapper>
23
22
  </template>
24
23
 
25
24
  <script>
26
- // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
27
- //To use:
28
- // <info-text
29
- // text="Veritatis et quasi architecto beatae vitae"
30
- // size="20px"
31
- // alignArrow="right" // which side the arrow should be on
32
- // />
33
- import theme from '../../assets/theme.js'
34
- import styled from 'vue3-styled-components'
35
- import RCIcon from '../icon'
25
+ // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
26
+ //To use:
27
+ // <info-text
28
+ // text="Veritatis et quasi architecto beatae vitae"
29
+ // size="20px"
30
+ // alignArrow="right" // which side the arrow should be on
31
+ // />
32
+ import theme from '../../assets/theme.js'
33
+ import styled from 'vue3-styled-components'
34
+ import icon from '../icon'
36
35
 
37
- const textAttrs = {
38
- iconSize: String,
39
- alignArrow: String,
40
- width: String,
41
- halfComputedTextInfoWidth: Number,
42
- }
43
- const TextOverlay = styled('div', textAttrs)`
36
+ const textAttrs = {
37
+ iconSize: String,
38
+ alignArrow: String,
39
+ width: String,
40
+ halfComputedTextInfoWidth: Number
41
+ }
42
+ const TextOverlay = styled('div', textAttrs)`
43
+ position: absolute;
44
+ top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
45
+ ${(props) =>
46
+ props.alignArrow === 'left'
47
+ ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
48
+ : props.alignArrow === 'center'
49
+ ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
50
+ : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
51
+ text-align: left;
52
+ background: ${(props) => props.theme.colors.black};
53
+ padding: 10px;
54
+ width: ${(props) => props.width};
55
+ max-width: 400px;
56
+ font-size: 13px;
57
+ font-weight: 400;
58
+ line-height: normal;
59
+ border-radius: 4px;
60
+ z-index: 99;
61
+ color: ${(props) => props.theme.colors.white};
62
+
63
+ :before {
64
+ content: '';
65
+ background-color: ${(props) => props.theme.colors.black};
44
66
  position: absolute;
45
- top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
67
+ top: 2px;
46
68
  ${(props) =>
47
69
  props.alignArrow === 'left'
48
- ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
49
- : props.alignArrow === 'center'
50
- ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
51
- : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
52
- text-align: left;
53
- background: ${(props) => props.theme.colors.black};
54
- padding: 10px;
55
- width: ${(props) => props.width};
56
- max-width: 400px;
57
- font-size: 13px;
58
- font-weight: 400;
59
- line-height: normal;
60
- border-radius: 4px;
61
- z-index: 99;
62
- color: ${(props) => props.theme.colors.white};
63
-
64
- :before {
65
- content: '';
66
- background-color: ${(props) => props.theme.colors.black};
67
- position: absolute;
68
- top: 2px;
69
- ${(props) =>
70
- props.alignArrow === 'left'
71
- ? 'left:40px;'
72
- : props.alignArrow == 'center'
73
- ? 'left: calc(50% + 19px);'
74
- : 'right:-13px;'};
75
- height: 8px;
76
- width: 8px;
77
- transform-origin: center center;
78
- transform: translate(-2em, -0.5em) rotate(45deg);
79
- }
70
+ ? 'left:40px;'
71
+ : props.alignArrow == 'center'
72
+ ? 'left: calc(50% + 19px);'
73
+ : 'right:-13px;'};
74
+ height: 8px;
75
+ width: 8px;
76
+ transform-origin: center center;
77
+ transform: translate(-2em, -0.5em) rotate(45deg);
78
+ }
80
79
 
81
- span a {
82
- color: #2cc0eb;
83
- }
84
- `
80
+ span a {
81
+ color: #2cc0eb;
82
+ }
83
+ `
85
84
 
86
- const iconAttrs = { size: String }
87
- const IconWrapper = styled('div', iconAttrs)`
88
- position: relative;
89
- height: ${(props) => props.size};
90
- `
85
+ const iconAttrs = { size: String }
86
+ const IconWrapper = styled('div', iconAttrs)`
87
+ position: relative;
88
+ height: ${(props) => props.size};
89
+ `
91
90
 
92
- const IconImg = styled.div`
93
- line-height: 0;
94
- `
91
+ const IconImg = styled.div`
92
+ line-height: 0;
93
+ `
95
94
 
96
- const ComponentWrapper = styled.div`
97
- display: inline-block;
98
- `
95
+ const ComponentWrapper = styled.div`
96
+ display: inline-block;
97
+ `
99
98
 
100
- export default {
101
- name: 'InfoText',
102
- components: {
103
- IconWrapper,
104
- TextOverlay,
105
- ComponentWrapper,
106
- IconImg,
107
- RCIcon,
99
+ export default {
100
+ name: 'info-text',
101
+ components: {
102
+ IconWrapper,
103
+ TextOverlay,
104
+ ComponentWrapper,
105
+ IconImg,
106
+ icon
107
+ },
108
+ props: {
109
+ text: {
110
+ required: false
108
111
  },
109
- props: {
110
- text: {
111
- required: false,
112
- },
113
- size: {
114
- required: false,
115
- default: '14px',
116
- },
117
- alignArrow: {
118
- required: false,
119
- default: 'center',
120
- },
121
- openTrigger: {
122
- required: false,
123
- default: 'onHover', // onHover, onClick
124
- },
125
- width: {
126
- required: false,
127
- default: '165px',
128
- },
112
+ size: {
113
+ required: false,
114
+ default: '14px'
129
115
  },
130
- data() {
131
- return {
132
- showInfo: false,
133
- }
116
+ alignArrow: {
117
+ required: false,
118
+ default: 'center'
134
119
  },
135
- computed: {
136
- iconColor() {
137
- return theme.colors.mediumGray
138
- },
139
- halfComputedTextInfoWidth() {
140
- return parseInt(this.width) / 2
141
- },
120
+ openTrigger: {
121
+ required: false,
122
+ default: 'onHover' // onHover, onClick
142
123
  },
143
- methods: {
144
- toggleShowInfo() {
145
- this.showInfo = !this.showInfo
124
+ width: {
125
+ required: false,
126
+ default: '165px'
127
+ }
128
+ },
129
+ methods: {
130
+ toggleShowInfo() {
131
+ this.showInfo = !this.showInfo
146
132
 
147
- if (this.showInfo) {
148
- document.addEventListener('click', this.clickOutside)
149
- } else {
150
- document.removeEventListener('click', this.clickOutside)
151
- }
152
- },
153
- clickOutside(event) {
154
- if (this.$el.contains(event.target)) {
155
- return
156
- }
157
- this.toggleShowInfo()
158
- },
133
+ if (this.showInfo) {
134
+ document.addEventListener('click', this.clickOutside)
135
+ } else {
136
+ document.removeEventListener('click', this.clickOutside)
137
+ }
138
+ },
139
+ clickOutside(event) {
140
+ if (this.$el.contains(event.target)) {
141
+ return
142
+ }
143
+ this.toggleShowInfo()
144
+ }
145
+ },
146
+ data() {
147
+ return {
148
+ showInfo: false
149
+ }
150
+ },
151
+ computed: {
152
+ iconColor() {
153
+ return theme.colors.mediumGray
159
154
  },
155
+ halfComputedTextInfoWidth() {
156
+ return parseInt(this.width) / 2
157
+ }
160
158
  }
159
+ }
161
160
  </script>
@@ -1,7 +1,7 @@
1
- import Checkbox from './index.vue'
1
+ import Checkbox from "./index.vue"
2
2
 
3
3
  export default {
4
- title: 'Checkbox',
4
+ title: "Checkbox",
5
5
  component: Checkbox,
6
6
  // argTypes: {},
7
7
  }
@@ -29,29 +29,29 @@ const Template = (args, { argTypes }) => ({
29
29
  export const Default = Template.bind({})
30
30
  Default.args = {
31
31
  isChecked: true,
32
- size: 'medium', // "small" or "medium"
32
+ size: "medium", // "small" or "medium"
33
33
  isDisabled: false,
34
34
  }
35
35
 
36
36
  export const Small = Template.bind({})
37
37
  Small.args = {
38
38
  isChecked: true,
39
- size: 'small', // "small" or "medium"
39
+ size: "small", // "small" or "medium"
40
40
  isDisabled: false,
41
41
  }
42
42
 
43
43
  export const CustomColor = Template.bind({})
44
44
  CustomColor.args = {
45
45
  isChecked: true,
46
- size: 'medium', // "small" or "medium"
47
- checkColor: 'blue',
48
- backgroundColor: 'red',
46
+ size: "medium", // "small" or "medium"
47
+ checkColor: "blue",
48
+ backgroundColor: "red",
49
49
  isDisabled: false,
50
50
  }
51
51
 
52
52
  export const Disabled = Template.bind({})
53
53
  Disabled.args = {
54
54
  isChecked: false,
55
- size: 'medium', // "small" or "medium"
55
+ size: "medium", // "small" or "medium"
56
56
  isDisabled: true,
57
57
  }