@eturnity/eturnity_reusable_components 7.30.3 → 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 (81) hide show
  1. package/.eslintrc.js +184 -0
  2. package/.prettierrc +8 -6
  3. package/package.json +9 -21
  4. package/src/App.vue +79 -78
  5. package/src/assets/theme.js +3 -3
  6. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  7. package/src/components/addNewButton/index.vue +48 -51
  8. package/src/components/banner/actionBanner/index.vue +54 -55
  9. package/src/components/banner/banner/banner.stories.js +5 -5
  10. package/src/components/banner/banner/index.vue +159 -159
  11. package/src/components/banner/infoBanner/index.vue +41 -53
  12. package/src/components/buttons/buttonIcon/index.vue +125 -122
  13. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  14. package/src/components/buttons/closeButton/index.vue +49 -49
  15. package/src/components/buttons/mainButton/index.vue +108 -108
  16. package/src/components/card/index.vue +70 -70
  17. package/src/components/collapsableInfoText/index.vue +96 -94
  18. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  19. package/src/components/deleteIcon/index.vue +54 -54
  20. package/src/components/draggableInputHandle/index.vue +37 -37
  21. package/src/components/dropdown/Dropdown.stories.js +9 -10
  22. package/src/components/dropdown/index.vue +106 -106
  23. package/src/components/errorMessage/index.vue +52 -52
  24. package/src/components/filter/filterSettings.vue +428 -422
  25. package/src/components/filter/index.vue +135 -135
  26. package/src/components/filter/parentDropdown.vue +73 -73
  27. package/src/components/icon/Icons.stories.js +7 -7
  28. package/src/components/icon/iconCollection.vue +53 -53
  29. package/src/components/icon/index.vue +122 -122
  30. package/src/components/iconWrapper/index.vue +156 -156
  31. package/src/components/infoCard/index.vue +30 -32
  32. package/src/components/infoText/index.vue +142 -137
  33. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  34. package/src/components/inputs/checkbox/index.vue +190 -180
  35. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  36. package/src/components/inputs/inputNumber/index.vue +696 -696
  37. package/src/components/inputs/inputNumberQuestion/index.vue +185 -182
  38. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  39. package/src/components/inputs/inputText/index.vue +337 -336
  40. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  41. package/src/components/inputs/radioButton/index.vue +222 -219
  42. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  43. package/src/components/inputs/searchInput/index.vue +127 -126
  44. package/src/components/inputs/select/index.vue +792 -791
  45. package/src/components/inputs/select/option/index.vue +124 -124
  46. package/src/components/inputs/select/select.stories.js +31 -32
  47. package/src/components/inputs/slider/index.vue +99 -99
  48. package/src/components/inputs/switchField/index.vue +220 -222
  49. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  50. package/src/components/inputs/textAreaInput/index.vue +171 -173
  51. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  52. package/src/components/inputs/toggle/index.vue +214 -217
  53. package/src/components/label/index.vue +82 -82
  54. package/src/components/markerItem/index.vue +68 -66
  55. package/src/components/modals/actionModal/index.vue +54 -54
  56. package/src/components/modals/infoModal/index.vue +39 -36
  57. package/src/components/modals/modal/index.vue +134 -134
  58. package/src/components/modals/modal/modal.stories.js +5 -5
  59. package/src/components/navigationTabs/index.vue +96 -94
  60. package/src/components/pageSubtitle/index.vue +55 -49
  61. package/src/components/pageTitle/index.vue +56 -56
  62. package/src/components/pagination/index.vue +92 -89
  63. package/src/components/progressBar/index.vue +107 -107
  64. package/src/components/projectMarker/index.vue +246 -244
  65. package/src/components/rangeSlider/Slider.vue +491 -465
  66. package/src/components/rangeSlider/index.vue +410 -410
  67. package/src/components/rangeSlider/utils/dom.js +5 -5
  68. package/src/components/selectedOptions/index.vue +119 -119
  69. package/src/components/sideMenu/index.vue +199 -199
  70. package/src/components/spinner/index.vue +57 -57
  71. package/src/components/tableDropdown/index.vue +520 -520
  72. package/src/components/tables/mainTable/index.vue +417 -400
  73. package/src/components/tables/viewTable/index.vue +171 -171
  74. package/src/components/threeDots/index.vue +340 -334
  75. package/src/components/videoThumbnail/index.vue +86 -86
  76. package/src/components/videoThumbnail/videoThumbnail.stories.js +14 -16
  77. package/src/helpers/numberConverter.js +2 -2
  78. package/src/helpers/translateLang.js +9 -9
  79. package/src/mixins/inputValidations.js +5 -5
  80. package/public/favicon.ico +0 -0
  81. package/public/index.html +0 -17
@@ -1,142 +1,145 @@
1
1
  <template>
2
- <page-container>
3
- <button-wrapper
4
- :isDisabled="isDisabled"
5
- :minWidth="minWidth"
6
- :customColor="customColor"
2
+ <PageContainer>
3
+ <ButtonWrapper
4
+ :custom-color="customColor"
7
5
  :height="height"
6
+ :is-disabled="isDisabled"
7
+ :min-width="minWidth"
8
8
  >
9
- <icon-container :width="height">
10
- <icon
11
- :name="iconName"
12
- :color="fontColor ? fontColor : theme.colors.white"
13
- size="14px"
9
+ <IconContainer :width="height">
10
+ <Icon
11
+ :color="fontColor ? fontColor : theme.colors.white"
12
+ :name="iconName"
13
+ size="14px"
14
14
  />
15
- </icon-container>
16
- <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
17
- </button-wrapper>
18
- </page-container>
15
+ </IconContainer>
16
+ <ButtonContainer :font-color="fontColor" :font-size="fontSize">
17
+ {{ text }}
18
+ </ButtonContainer>
19
+ </ButtonWrapper>
20
+ </PageContainer>
19
21
  </template>
20
22
 
21
23
  <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
- // />
24
+ // import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
25
+ // <button-icon
26
+ // :isDisabled="true"
27
+ // text="Click Me"
28
+ // minWidth="300px"
29
+ // customColor="#000"
30
+ // iconName="external_icon"
31
+ // fontColor="white"
32
+ // fontSize="12px"
33
+ // height="24px"
34
+ // />
33
35
 
34
- import Icon from "../../icon"
35
- import styled from "vue3-styled-components"
36
- import Theme from "@/assets/theme";
36
+ import Icon from '../../icon'
37
+ import styled from 'vue3-styled-components'
38
+ import Theme from '@/assets/theme'
37
39
 
38
- const PageContainer = styled.div``
40
+ const PageContainer = styled.div``
39
41
 
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")};
42
+ const ButtonAttrs = {
43
+ isDisabled: Boolean,
44
+ minWidth: String,
45
+ customColor: String,
46
+ height: String,
64
47
  }
48
+ const ButtonWrapper = styled('div', ButtonAttrs)`
49
+ display: grid;
50
+ grid-template-columns: auto 1fr;
51
+ background-color: ${(props) =>
52
+ props.isDisabled
53
+ ? props.theme.colors.disabled
54
+ : props.customColor
55
+ ? props.customColor
56
+ : props.theme.colors.yellow};
57
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
58
+ user-select: none;
59
+ border-radius: 4px;
60
+ overflow: hidden;
61
+ min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
62
+ height: ${(props) => props.height};
65
63
 
66
- &:active {
67
- opacity: 1;
68
- }
69
- `
64
+ &:hover {
65
+ opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
66
+ }
70
67
 
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
- `
68
+ &:active {
69
+ opacity: 1;
70
+ }
71
+ `
83
72
 
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
- `
73
+ const ButtonContainerAttrs = {
74
+ fontSize: String,
75
+ fontColor: String,
76
+ }
77
+ const ButtonContainer = styled('div', ButtonContainerAttrs)`
78
+ font-size: ${(props) => props.fontSize};
79
+ color: ${(props) =>
80
+ props.fontColor ? props.fontColor : props.theme.colors.white};
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ padding: 0 15px;
85
+ `
94
86
 
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
87
+ const IconContainerAttrs = {
88
+ width: String,
89
+ }
90
+ const IconContainer = styled('div', IconContainerAttrs)`
91
+ display: grid;
92
+ align-items: center;
93
+ justify-items: center;
94
+ width: ${(props) => props.width};
95
+ background: ${(props) => props.theme.colors.white + '1a'};
96
+ `
97
+
98
+ export default {
99
+ name: 'ButtonIcon',
100
+ components: {
101
+ PageContainer,
102
+ ButtonContainer,
103
+ ButtonWrapper,
104
+ IconContainer,
105
+ Icon,
122
106
  },
123
- fontColor: {
124
- required: false,
125
- default: null
107
+ props: {
108
+ isDisabled: {
109
+ required: false,
110
+ default: false,
111
+ },
112
+ text: {
113
+ required: true,
114
+ },
115
+ minWidth: {
116
+ required: false,
117
+ default: null,
118
+ },
119
+ customColor: {
120
+ required: false,
121
+ default: null,
122
+ },
123
+ iconName: {
124
+ required: true,
125
+ },
126
+ fontColor: {
127
+ required: false,
128
+ default: null,
129
+ },
130
+ fontSize: {
131
+ required: false,
132
+ default: '13px',
133
+ },
134
+ height: {
135
+ required: false,
136
+ default: '30px',
137
+ },
126
138
  },
127
- fontSize: {
128
- required: false,
129
- default: '13px'
139
+ data() {
140
+ return {
141
+ theme: Theme,
142
+ }
130
143
  },
131
- height: {
132
- required: false,
133
- default: '30px'
134
- }
135
- },
136
- data () {
137
- return {
138
- theme: Theme
139
- }
140
144
  }
141
- }
142
145
  </script>
@@ -1,7 +1,7 @@
1
- import CloseButton from "./index.vue"
1
+ import CloseButton from './index.vue'
2
2
 
3
3
  export default {
4
- title: "CloseButton",
4
+ title: 'CloseButton',
5
5
  component: CloseButton,
6
6
  // argTypes: {},
7
7
  }
@@ -25,5 +25,5 @@ Default.args = {}
25
25
 
26
26
  export const ColorButton = Template.bind({})
27
27
  ColorButton.args = {
28
- color: "orange",
28
+ color: 'orange',
29
29
  }
@@ -1,61 +1,61 @@
1
1
  <template>
2
- <wrapper>
3
- <container>
4
- <left-line :color="color" />
5
- <right-line :color="color" />
6
- </container>
7
- </wrapper>
2
+ <Wrapper>
3
+ <Container>
4
+ <LeftLine :color="color" />
5
+ <RightLine :color="color" />
6
+ </Container>
7
+ </Wrapper>
8
8
  </template>
9
9
 
10
10
  <script>
11
- // To use:
12
- // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
13
- // <close-button
14
- // color="#fff"
15
- // />
16
- import styled from 'vue3-styled-components'
11
+ // To use:
12
+ // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
13
+ // <close-button
14
+ // color="#fff"
15
+ // />
16
+ import styled from 'vue3-styled-components'
17
17
 
18
- const Container = styled.div`
19
- position: relative;
20
- width: 26px;
21
- height: 25px;
22
- `
18
+ const Container = styled.div`
19
+ position: relative;
20
+ width: 26px;
21
+ height: 25px;
22
+ `
23
23
 
24
- const Wrapper = styled.div`
25
- display: inline-block;
26
- cursor: pointer;
27
- `
24
+ const Wrapper = styled.div`
25
+ display: inline-block;
26
+ cursor: pointer;
27
+ `
28
28
 
29
- const lineAttrs = { color: String }
30
- const Line = styled('div', lineAttrs)`
31
- width: 20px;
32
- height: 2px;
33
- background-color: ${(props) =>
34
- props.color ? props.color : props.theme.colors.red};
35
- position: absolute;
36
- top: 11px; //half of the height of the parent
37
- `
29
+ const lineAttrs = { color: String }
30
+ const Line = styled('div', lineAttrs)`
31
+ width: 20px;
32
+ height: 2px;
33
+ background-color: ${(props) =>
34
+ props.color ? props.color : props.theme.colors.red};
35
+ position: absolute;
36
+ top: 11px; //half of the height of the parent
37
+ `
38
38
 
39
- const LeftLine = styled(Line)`
40
- transform: rotate(135deg);
41
- `
39
+ const LeftLine = styled(Line)`
40
+ transform: rotate(135deg);
41
+ `
42
42
 
43
- const RightLine = styled(Line)`
44
- transform: rotate(45deg);
45
- `
43
+ const RightLine = styled(Line)`
44
+ transform: rotate(45deg);
45
+ `
46
46
 
47
- export default {
48
- name: 'close-button',
49
- components: {
50
- Container,
51
- Wrapper,
52
- LeftLine,
53
- RightLine
54
- },
55
- props: {
56
- color: {
57
- required: false
58
- }
47
+ export default {
48
+ name: 'CloseButton',
49
+ components: {
50
+ Container,
51
+ Wrapper,
52
+ LeftLine,
53
+ RightLine,
54
+ },
55
+ props: {
56
+ color: {
57
+ required: false,
58
+ },
59
+ },
59
60
  }
60
- }
61
61
  </script>
@@ -1,21 +1,21 @@
1
1
  <template>
2
- <page-container>
3
- <button-container
2
+ <PageContainer>
3
+ <ButtonContainer
4
4
  :id="id"
5
- :type="type"
6
- :minWidth="minWidth"
7
- :isDisabled="isDisabled"
8
- :customColor="customColor"
9
- :noWrap="noWrap"
5
+ :custom-color="customColor"
10
6
  :data-id="dataId"
11
- :fontColor="fontColor"
7
+ :font-color="fontColor"
8
+ :is-disabled="isDisabled"
9
+ :min-width="minWidth"
10
+ :no-wrap="noWrap"
11
+ :type="type"
12
12
  >
13
- <Label :hasIcon="Boolean(icon)">
14
- <icon v-if="icon" :name="icon" size="14px" />
13
+ <Label :has-icon="Boolean(icon)">
14
+ <Icon v-if="icon" :name="icon" size="14px" />
15
15
  {{ text }}
16
16
  </Label>
17
- </button-container>
18
- </page-container>
17
+ </ButtonContainer>
18
+ </PageContainer>
19
19
  </template>
20
20
 
21
21
  <script>
@@ -31,110 +31,110 @@
31
31
  // :data-id="test_data_id"
32
32
  // />
33
33
 
34
- import styled from 'vue3-styled-components'
35
- import Icon from '../../icon'
34
+ import styled from 'vue3-styled-components'
35
+ import Icon from '../../icon'
36
36
 
37
- const PageContainer = styled.div``
37
+ const PageContainer = styled.div``
38
38
 
39
- const ButtonAttrs = {
40
- type: String,
41
- isDisabled: Boolean,
42
- minWidth: String,
43
- customColor: String,
44
- fontColor: String,
45
- noWrap: Boolean
46
- }
47
- const ButtonContainer = styled('div', ButtonAttrs)`
48
- padding: 7px 15px;
49
- font-size: 13px;
50
- color: ${(props) =>
51
- props.fontColor ? props.fontColor : props.theme.colors.white};
52
- background-color: ${(props) =>
53
- props.isDisabled
54
- ? props.theme.colors.disabled
55
- : props.customColor
56
- ? props.customColor
57
- : props.type === 'primary'
58
- ? props.theme.colors.black
59
- : props.type === 'secondary'
60
- ? props.theme.colors.grey3
61
- : props.type === 'cancel'
62
- ? props.theme.colors.red
63
- : props.theme.colors.black};
64
- border-radius: 4px;
65
- text-align: center;
66
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
67
- user-select: none;
68
- ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
69
- ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
70
-
71
- &:hover {
72
- opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
39
+ const ButtonAttrs = {
40
+ type: String,
41
+ isDisabled: Boolean,
42
+ minWidth: String,
43
+ customColor: String,
44
+ fontColor: String,
45
+ noWrap: Boolean,
73
46
  }
47
+ const ButtonContainer = styled('div', ButtonAttrs)`
48
+ padding: 7px 15px;
49
+ font-size: 13px;
50
+ color: ${(props) =>
51
+ props.fontColor ? props.fontColor : props.theme.colors.white};
52
+ background-color: ${(props) =>
53
+ props.isDisabled
54
+ ? props.theme.colors.disabled
55
+ : props.customColor
56
+ ? props.customColor
57
+ : props.type === 'primary'
58
+ ? props.theme.colors.black
59
+ : props.type === 'secondary'
60
+ ? props.theme.colors.grey3
61
+ : props.type === 'cancel'
62
+ ? props.theme.colors.red
63
+ : props.theme.colors.black};
64
+ border-radius: 4px;
65
+ text-align: center;
66
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
67
+ user-select: none;
68
+ ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
69
+ ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
74
70
 
75
- &:active {
76
- opacity: 1;
77
- }
78
- `
71
+ &:hover {
72
+ opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
73
+ }
79
74
 
80
- const LabelAttrs = {
81
- hasIcon: Boolean
82
- }
75
+ &:active {
76
+ opacity: 1;
77
+ }
78
+ `
83
79
 
84
- const Label = styled('span', LabelAttrs)`
85
- display: flex;
86
- align-items: center;
87
- justify-content: center;
88
- gap: ${(props) => (props.hasIcon ? '5px' : '0')};
89
- `
80
+ const LabelAttrs = {
81
+ hasIcon: Boolean,
82
+ }
90
83
 
91
- export default {
92
- name: 'main-button',
93
- components: {
94
- Icon,
95
- Label,
96
- PageContainer,
97
- ButtonContainer
98
- },
99
- props: {
100
- type: {
101
- required: false,
102
- default: 'primary'
103
- },
104
- isDisabled: {
105
- required: false,
106
- default: false
107
- },
108
- icon: {
109
- required: false,
110
- default: null
111
- },
112
- text: {
113
- required: true
114
- },
115
- customColor: {
116
- required: false,
117
- default: null
118
- },
119
- fontColor: {
120
- required: false
121
- },
122
- noWrap: {
123
- required: false,
124
- default: false
125
- },
126
- minWidth: {
127
- required: false,
128
- default: null
84
+ const Label = styled('span', LabelAttrs)`
85
+ display: flex;
86
+ align-items: center;
87
+ justify-content: center;
88
+ gap: ${(props) => (props.hasIcon ? '5px' : '0')};
89
+ `
90
+
91
+ export default {
92
+ name: 'MainButton',
93
+ components: {
94
+ Icon,
95
+ Label,
96
+ PageContainer,
97
+ ButtonContainer,
129
98
  },
130
- id: {
131
- required: false,
132
- default: null
99
+ props: {
100
+ type: {
101
+ required: false,
102
+ default: 'primary',
103
+ },
104
+ isDisabled: {
105
+ required: false,
106
+ default: false,
107
+ },
108
+ icon: {
109
+ required: false,
110
+ default: null,
111
+ },
112
+ text: {
113
+ required: true,
114
+ },
115
+ customColor: {
116
+ required: false,
117
+ default: null,
118
+ },
119
+ fontColor: {
120
+ required: false,
121
+ },
122
+ noWrap: {
123
+ required: false,
124
+ default: false,
125
+ },
126
+ minWidth: {
127
+ required: false,
128
+ default: null,
129
+ },
130
+ id: {
131
+ required: false,
132
+ default: null,
133
+ },
134
+ dataId: {
135
+ type: String,
136
+ default: '',
137
+ },
133
138
  },
134
- dataId: {
135
- type: String,
136
- default: ''
137
- }
138
139
  }
139
- }
140
140
  </script>