@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
@@ -2,17 +2,17 @@
2
2
  <Wrapper
3
3
  v-show="!isLoading"
4
4
  :class="viewCardClass"
5
- :min-width="minWidth"
6
5
  :width="width"
6
+ :minWidth="minWidth"
7
7
  >
8
- <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
8
+ <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
9
9
  <CardWrapper v-else>
10
10
  <CardTitle :class="titleClass">
11
11
  {{ $gettext(title) }}
12
- <EtPopover
12
+ <et-popover
13
13
  v-if="showPopover && popoverText !== ''"
14
14
  :text="popoverText"
15
- />
15
+ ></et-popover>
16
16
  </CardTitle>
17
17
  <slot></slot>
18
18
  </CardWrapper>
@@ -20,77 +20,77 @@
20
20
  </template>
21
21
 
22
22
  <script>
23
- import styled from 'vue3-styled-components'
24
- import Spinner from '../spinner'
23
+ import styled from 'vue3-styled-components'
24
+ import Spinner from '../spinner'
25
25
 
26
- const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
27
- const Wrapper = styled('div', WrapperProps)`
28
- max-width: ${(props) => props.width};
29
- min-width: ${(props) => props.minWidth};
30
- padding: 20px;
31
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
32
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
33
- border-radius: 4px;
34
- background-color: ${(props) => props.theme.colors.white};
35
- height: 100%;
36
- `
26
+ const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
27
+ const Wrapper = styled('div', WrapperProps)`
28
+ max-width: ${(props) => props.width};
29
+ min-width: ${(props) => props.minWidth};
30
+ padding: 20px;
31
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
32
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
33
+ border-radius: 4px;
34
+ background-color: ${(props) => props.theme.colors.white};
35
+ height: 100%;
36
+ `
37
37
 
38
- const CardWrapper = styled('div')`
39
- height: 100%;
40
- width: auto;
41
- `
38
+ const CardWrapper = styled('div')`
39
+ height: 100%;
40
+ width: auto;
41
+ `
42
42
 
43
- const CardTitle = styled('p')`
44
- font-size: 14px;
45
- line-height: 1;
46
- color: ${(props) => props.theme.colors.black};
47
- font-weight: 700;
48
- margin-bottom: 10px;
49
- `
43
+ const CardTitle = styled('p')`
44
+ font-size: 14px;
45
+ line-height: 1;
46
+ color: ${(props) => props.theme.colors.black};
47
+ font-weight: 700;
48
+ margin-bottom: 10px;
49
+ `
50
50
 
51
- export default {
52
- name: 'Card',
53
- components: {
54
- Spinner,
55
- Wrapper,
56
- CardTitle,
57
- CardWrapper,
51
+ export default {
52
+ name: 'Card',
53
+ props: {
54
+ title: {
55
+ type: String,
56
+ default: ''
58
57
  },
59
- props: {
60
- title: {
61
- type: String,
62
- default: '',
63
- },
64
- width: {
65
- type: [Number, String],
66
- required: false,
67
- default: '400px',
68
- },
69
- minWidth: {
70
- type: [Number, String],
71
- required: false,
72
- default: null,
73
- },
74
- titleClass: {
75
- type: String,
76
- default: '',
77
- },
78
- showPopover: {
79
- type: Boolean,
80
- default: false,
81
- },
82
- viewCardClass: {
83
- type: String,
84
- default: '',
85
- },
86
- popoverText: {
87
- type: String,
88
- default: '',
89
- },
90
- isLoading: {
91
- type: Boolean,
92
- default: false,
93
- },
58
+ width: {
59
+ type: [Number, String],
60
+ required: false,
61
+ default: '400px'
94
62
  },
63
+ minWidth: {
64
+ type: [Number, String],
65
+ required: false,
66
+ default: null
67
+ },
68
+ titleClass: {
69
+ type: String,
70
+ default: ''
71
+ },
72
+ showPopover: {
73
+ type: Boolean,
74
+ default: false
75
+ },
76
+ viewCardClass: {
77
+ type: String,
78
+ default: ''
79
+ },
80
+ popoverText: {
81
+ type: String,
82
+ default: ''
83
+ },
84
+ isLoading: {
85
+ type: Boolean,
86
+ default: false
87
+ }
88
+ },
89
+ components: {
90
+ Spinner,
91
+ Wrapper,
92
+ CardTitle,
93
+ CardWrapper
95
94
  }
95
+ }
96
96
  </script>
@@ -1,20 +1,18 @@
1
1
  <template>
2
2
  <div>
3
- <Text :expand="showButton && showAll" :font-size="fontSize">
4
- {{ text }}
5
- </Text>
3
+ <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
6
4
  <ToggleContainer>
7
5
  <ToggleButton
8
- v-if="showButton && !showAll"
9
- :font-size="fontSize"
10
6
  @click="toggleHandler"
7
+ v-if="showButton && !showAll"
8
+ :fontSize="fontSize"
11
9
  >
12
10
  {{ $gettext('Show more') }}
13
11
  </ToggleButton>
14
12
  <ToggleButton
15
- v-if="showButton && showAll"
16
- :font-size="fontSize"
17
13
  @click="toggleHandler"
14
+ v-if="showButton && showAll"
15
+ :fontSize="fontSize"
18
16
  >
19
17
  {{ $gettext('Show less') }}
20
18
  </ToggleButton>
@@ -23,105 +21,105 @@
23
21
  </template>
24
22
 
25
23
  <script>
26
- import styled from 'vue3-styled-components'
27
- import theme from '@/assets/theme.js'
24
+ import styled from 'vue3-styled-components'
25
+ import theme from '@/assets/theme.js'
28
26
 
29
- const TextAttrs = {
30
- expand: Boolean,
31
- fontSize: String,
32
- }
33
- const Text = styled('p', TextAttrs)`
34
- display: block;
35
- display: -webkit-box;
36
- line-height: 1.3em;
37
- -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
38
- -webkit-box-orient: vertical;
39
- overflow: hidden;
40
- font-size: ${(props) => props.fontSize}px;
41
- text-overflow: ellipsis;
42
- `
27
+ const TextAttrs = {
28
+ expand: Boolean,
29
+ fontSize: String
30
+ }
31
+ const Text = styled('p', TextAttrs)`
32
+ display: block;
33
+ display: -webkit-box;
34
+ line-height: 1.3em;
35
+ -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
36
+ -webkit-box-orient: vertical;
37
+ overflow: hidden;
38
+ font-size: ${(props) => props.fontSize}px;
39
+ text-overflow: ellipsis;
40
+ `
43
41
 
44
- const ToggleContainer = styled.div`
45
- display: flex;
46
- width: 100%;
47
- `
42
+ const ToggleContainer = styled.div`
43
+ display: flex;
44
+ width: 100%;
45
+ `
48
46
 
49
- const ToggleButton = styled('p', TextAttrs)`
50
- font-size: ${(props) => props.fontSize}px;
51
- cursor: pointer;
52
- color: ${(props) => props.theme.colors.blue};
53
- `
47
+ const ToggleButton = styled('p', TextAttrs)`
48
+ font-size: ${(props) => props.fontSize}px;
49
+ cursor: pointer;
50
+ color: ${(props) => props.theme.colors.blue};
51
+ `
54
52
 
55
- export default {
56
- name: 'CollapsableInfoText',
57
- components: {
58
- Text,
59
- ToggleButton,
60
- ToggleContainer,
53
+ export default {
54
+ name: 'collapsable-info-text',
55
+ props: {
56
+ text: {
57
+ type: String,
58
+ required: true
61
59
  },
62
- props: {
63
- text: {
64
- type: String,
65
- required: true,
66
- },
67
- fontSize: {
68
- type: String,
69
- default: '16px',
70
- },
71
- lineCount: {
72
- type: Number,
73
- default: 3,
74
- },
75
- minWidth: {
76
- type: String,
77
- default: '100%',
78
- },
60
+ fontSize: {
61
+ type: String,
62
+ default: '16px'
79
63
  },
80
- data() {
81
- return {
82
- showButton: true,
83
- showAll: false,
84
- lineBreaks: [],
85
- }
64
+ lineCount: {
65
+ type: Number,
66
+ default: 3
86
67
  },
87
- computed: {
88
- theme() {
89
- return theme
90
- },
91
- },
92
- created() {
93
- // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
94
- // this.lineBreaks = this.text.split('\n')
95
-
96
- // if (this.lineBreaks.length <= this.lineCount) {
97
- // this.showButton = false
98
- // }
68
+ minWidth: {
69
+ type: String,
70
+ default: '100%'
71
+ }
72
+ },
73
+ components: {
74
+ Text,
75
+ ToggleButton,
76
+ ToggleContainer
77
+ },
78
+ data() {
79
+ return {
80
+ showButton: true,
81
+ showAll: false,
82
+ lineBreaks: []
83
+ }
84
+ },
85
+ computed: {
86
+ theme() {
87
+ return theme
88
+ }
89
+ },
90
+ methods: {
91
+ displayText() {
92
+ if (!this.showButton) {
93
+ return this.text
94
+ }
95
+ if (!this.showAll) {
96
+ let countIndex = 0
97
+ this.lineBreaks.forEach((el, index) => {
98
+ if (index < this.lineCount) {
99
+ countIndex += el.length
100
+ }
101
+ })
99
102
 
100
- if (this.text.length <= 170) {
101
- this.showButton = false
103
+ return this.text.slice(0, countIndex + 2) + '...'
104
+ } else {
105
+ return this.text
102
106
  }
103
107
  },
104
- methods: {
105
- displayText() {
106
- if (!this.showButton) {
107
- return this.text
108
- }
109
- if (!this.showAll) {
110
- let countIndex = 0
111
- this.lineBreaks.forEach((el, index) => {
112
- if (index < this.lineCount) {
113
- countIndex += el.length
114
- }
115
- })
108
+ toggleHandler() {
109
+ this.showAll = !this.showAll
110
+ }
111
+ },
112
+ created() {
113
+ // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
114
+ // this.lineBreaks = this.text.split('\n')
116
115
 
117
- return this.text.slice(0, countIndex + 2) + '...'
118
- } else {
119
- return this.text
120
- }
121
- },
122
- toggleHandler() {
123
- this.showAll = !this.showAll
124
- },
125
- },
116
+ // if (this.lineBreaks.length <= this.lineCount) {
117
+ // this.showButton = false
118
+ // }
119
+
120
+ if (this.text.length <= 170) {
121
+ this.showButton = false
122
+ }
126
123
  }
124
+ }
127
125
  </script>
@@ -2,7 +2,7 @@ import DeleteIcon from './index.vue'
2
2
 
3
3
  export default {
4
4
  title: 'DeleteIcon',
5
- component: DeleteIcon,
5
+ component: DeleteIcon
6
6
  // argTypes: {},
7
7
  }
8
8
 
@@ -11,7 +11,7 @@ const Template = (args, { argTypes }) => ({
11
11
  components: { DeleteIcon },
12
12
  // The story's `args` need to be mapped into the template through the `setup()` method
13
13
  props: Object.keys(argTypes),
14
- template: '<delete-icon v-bind="$props" />',
14
+ template: '<delete-icon v-bind="$props" />'
15
15
 
16
16
  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
17
17
  // To use:
@@ -20,10 +20,10 @@ const Template = (args, { argTypes }) => ({
20
20
 
21
21
  export const Default = Template.bind({})
22
22
  Default.args = {
23
- isDisabled: false,
23
+ isDisabled: false
24
24
  }
25
25
 
26
26
  export const Disabled = Template.bind({})
27
27
  Disabled.args = {
28
- isDisabled: true,
28
+ isDisabled: true
29
29
  }
@@ -1,34 +1,34 @@
1
1
  <template>
2
- <Wrapper :is-disabled="isDisabled">
3
- <DeleteIconRed class="icon-red" :hover-bg="hoverBg" />
4
- <DeleteIconGray class="icon-gray" />
5
- </Wrapper>
2
+ <wrapper :isDisabled="isDisabled">
3
+ <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
4
+ <delete-icon-gray class="icon-gray" />
5
+ </wrapper>
6
6
  </template>
7
7
 
8
8
  <script>
9
- // To use:
10
- // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
11
- import styled from 'vue3-styled-components'
12
- import SvgDelete from '../../assets/icons/delete_icon.svg'
13
- import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
9
+ // To use:
10
+ // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
11
+ import styled from 'vue3-styled-components'
12
+ import SvgDelete from '../../assets/icons/delete_icon.svg'
13
+ import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
14
14
 
15
- const wrapperAttrs = { isDisabled: Boolean }
16
- const Wrapper = styled('div', wrapperAttrs)`
17
- width: 30px;
18
- height: 30px;
19
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
15
+ const wrapperAttrs = { isDisabled: Boolean }
16
+ const Wrapper = styled('div', wrapperAttrs)`
17
+ width: 30px;
18
+ height: 30px;
19
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
20
20
 
21
- .icon-red {
22
- display: none;
23
- }
21
+ .icon-red {
22
+ display: none;
23
+ }
24
24
 
25
- .icon-gray {
26
- display: inline;
27
- }
25
+ .icon-gray {
26
+ display: inline;
27
+ }
28
28
 
29
- ${(props) =>
30
- !props.isDisabled &&
31
- `
29
+ ${(props) =>
30
+ !props.isDisabled &&
31
+ `
32
32
  &:hover {
33
33
  .icon-red {
34
34
  display: inline;
@@ -39,40 +39,40 @@
39
39
  }
40
40
  }
41
41
  `}
42
- `
42
+ `
43
43
 
44
- const IconImageAttrs = { hoverBg: String }
45
- const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
46
- &:hover {
47
- background-color: ${(props) =>
48
- props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
49
- border-radius: 4px;
50
- }
51
- `
44
+ const IconImageAttrs = { hoverBg: String }
45
+ const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
46
+ &:hover {
47
+ background-color: ${(props) =>
48
+ props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
49
+ border-radius: 4px;
50
+ }
51
+ `
52
52
 
53
- const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
54
- &:hover {
55
- background-color: ${(props) => props.theme.colors.grey5};
56
- border-radius: 4px;
57
- }
58
- `
53
+ const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
54
+ &:hover {
55
+ background-color: ${(props) => props.theme.colors.grey5};
56
+ border-radius: 4px;
57
+ }
58
+ `
59
59
 
60
- export default {
61
- name: 'DeleteIcon',
62
- components: {
63
- Wrapper,
64
- DeleteIconRed,
65
- DeleteIconGray,
66
- },
67
- props: {
68
- isDisabled: {
69
- required: false,
70
- default: false,
71
- },
72
- hoverBg: {
73
- required: false,
74
- default: '',
75
- },
60
+ export default {
61
+ name: 'delete-icon',
62
+ components: {
63
+ Wrapper,
64
+ DeleteIconRed,
65
+ DeleteIconGray
66
+ },
67
+ props: {
68
+ isDisabled: {
69
+ required: false,
70
+ default: false
76
71
  },
72
+ hoverBg: {
73
+ required: false,
74
+ default: ''
75
+ }
77
76
  }
77
+ }
78
78
  </script>
@@ -1,46 +1,46 @@
1
1
  <template>
2
- <Handle class="handle" :height="height">
3
- <Dot />
4
- <Dot />
5
- <Dot />
2
+ <Handle :height="height" class="handle">
3
+ <Dot></Dot>
4
+ <Dot></Dot>
5
+ <Dot></Dot>
6
6
  </Handle>
7
7
  </template>
8
8
 
9
9
  <script>
10
- import styled from 'vue3-styled-components'
10
+ import styled from 'vue3-styled-components'
11
11
 
12
- const Handle = styled('div', { height: String })`
13
- position: absolute;
14
- left: 0;
15
- margin-right: 10px;
16
- display: flex;
17
- align-items: stretch;
18
- flex-direction: column;
19
- justify-content: center;
20
- width: 14px;
21
- height: ${(props) => props.height};
22
- padding: 0 5px;
23
- background-color: #f3f3f7;
24
- cursor: pointer;
25
- align-items: center;
26
- `
27
- const Dot = styled.div`
28
- display: inline-block;
29
- width: 4px;
30
- height: 4px;
31
- margin: 2px;
32
- background-color: #0068de;
33
- `
12
+ const Handle = styled('div', { height: String })`
13
+ position: absolute;
14
+ left: 0;
15
+ margin-right: 10px;
16
+ display: flex;
17
+ align-items: stretch;
18
+ flex-direction: column;
19
+ justify-content: center;
20
+ width: 14px;
21
+ height: ${(props) => props.height};
22
+ padding: 0 5px;
23
+ background-color: #f3f3f7;
24
+ cursor: pointer;
25
+ align-items: center;
26
+ `
27
+ const Dot = styled.div`
28
+ display: inline-block;
29
+ width: 4px;
30
+ height: 4px;
31
+ margin: 2px;
32
+ background-color: #0068de;
33
+ `
34
34
 
35
- export default {
36
- name: 'DraggableInputHandle',
37
- components: {
38
- Handle,
39
- Dot,
40
- },
41
- props: ['height'],
42
- data() {
43
- return {}
44
- },
35
+ export default {
36
+ name: 'draggableInputHandle',
37
+ props: ['height'],
38
+ components: {
39
+ Handle,
40
+ Dot
41
+ },
42
+ data() {
43
+ return {}
45
44
  }
45
+ }
46
46
  </script>
@@ -2,7 +2,7 @@ import Dropdown from './index.vue'
2
2
 
3
3
  export default {
4
4
  title: 'Dropdown',
5
- component: Dropdown,
5
+ component: Dropdown
6
6
  // argTypes: {},
7
7
  }
8
8
 
@@ -38,16 +38,17 @@ const Template = (args, { argTypes }) => ({
38
38
 
39
39
  export const Default = Template.bind({})
40
40
  Default.args = {
41
- openingMode: 'click',
42
- gap: '0px',
43
- justify: 'left',
44
- width: '150px',
41
+ openingMode:"click",
42
+ gap:"0px",
43
+ justify:"left",
44
+ width:"150px"
45
45
  }
46
46
 
47
47
  export const withHover = Template.bind({})
48
48
  withHover.args = {
49
- openingMode: 'hover',
50
- gap: '20px',
51
- justify: 'right',
52
- width: '250px',
49
+ openingMode:"hover",
50
+ gap:"20px",
51
+ justify:"right",
52
+ width:"250px"
53
53
  }
54
+