@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

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 (67) hide show
  1. package/.prettierrc +7 -0
  2. package/package.json +20 -6
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +70 -75
  6. package/src/assets/svgIcons/copy.svg +10 -0
  7. package/src/components/addNewButton/index.vue +27 -24
  8. package/src/components/banner/actionBanner/index.vue +30 -32
  9. package/src/components/banner/banner/index.vue +80 -88
  10. package/src/components/banner/infoBanner/index.vue +44 -36
  11. package/src/components/buttons/buttonIcon/index.vue +78 -83
  12. package/src/components/buttons/closeButton/index.vue +26 -26
  13. package/src/components/buttons/mainButton/index.vue +76 -80
  14. package/src/components/card/index.vue +52 -56
  15. package/src/components/collapsableInfoText/index.vue +76 -81
  16. package/src/components/deleteIcon/index.vue +28 -31
  17. package/src/components/draggableInputHandle/index.vue +17 -20
  18. package/src/components/dropdown/Dropdown.stories.js +8 -8
  19. package/src/components/dropdown/index.vue +72 -75
  20. package/src/components/errorMessage/index.vue +23 -23
  21. package/src/components/filter/filterSettings.vue +329 -349
  22. package/src/components/filter/index.vue +130 -130
  23. package/src/components/filter/parentDropdown.vue +40 -43
  24. package/src/components/icon/Icons.stories.js +4 -4
  25. package/src/components/icon/iconCache.js +1 -1
  26. package/src/components/icon/iconCollection.vue +37 -40
  27. package/src/components/icon/index.vue +65 -72
  28. package/src/components/iconWrapper/index.vue +118 -122
  29. package/src/components/infoCard/index.vue +17 -20
  30. package/src/components/infoText/index.vue +82 -88
  31. package/src/components/inputs/checkbox/index.vue +94 -91
  32. package/src/components/inputs/inputNumber/index.vue +488 -508
  33. package/src/components/inputs/inputNumberQuestion/index.vue +124 -127
  34. package/src/components/inputs/inputText/index.vue +252 -265
  35. package/src/components/inputs/radioButton/index.vue +120 -135
  36. package/src/components/inputs/searchInput/index.vue +81 -84
  37. package/src/components/inputs/select/index.vue +631 -644
  38. package/src/components/inputs/select/option/index.vue +91 -91
  39. package/src/components/inputs/select/select.stories.js +7 -7
  40. package/src/components/inputs/slider/index.vue +46 -46
  41. package/src/components/inputs/switchField/index.vue +152 -159
  42. package/src/components/inputs/textAreaInput/index.vue +113 -120
  43. package/src/components/inputs/toggle/index.vue +127 -137
  44. package/src/components/label/index.vue +61 -64
  45. package/src/components/markerItem/index.vue +40 -40
  46. package/src/components/modals/actionModal/index.vue +29 -32
  47. package/src/components/modals/infoModal/index.vue +27 -34
  48. package/src/components/modals/modal/index.vue +80 -88
  49. package/src/components/navigationTabs/index.vue +47 -50
  50. package/src/components/pageSubtitle/index.vue +29 -33
  51. package/src/components/pageTitle/index.vue +39 -47
  52. package/src/components/pagination/index.vue +62 -64
  53. package/src/components/progressBar/index.vue +67 -70
  54. package/src/components/projectMarker/index.vue +163 -172
  55. package/src/components/rangeSlider/Slider.vue +449 -449
  56. package/src/components/rangeSlider/index.vue +270 -282
  57. package/src/components/rangeSlider/utils/dom.js +3 -3
  58. package/src/components/selectedOptions/index.vue +51 -51
  59. package/src/components/sideMenu/index.vue +109 -117
  60. package/src/components/spinner/index.vue +34 -37
  61. package/src/components/tableDropdown/index.vue +326 -343
  62. package/src/components/tables/mainTable/index.vue +106 -109
  63. package/src/components/tables/viewTable/index.vue +92 -105
  64. package/src/components/threeDots/index.vue +171 -174
  65. package/src/components/videoThumbnail/index.vue +59 -67
  66. package/src/components/videoThumbnail/videoThumbnail.stories.js +6 -6
  67. package/.eslintrc.js +0 -125
package/.prettierrc ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "semi": false,
3
+ "singleQuote": true,
4
+ "useTabs": false,
5
+ "trailingComma": "none",
6
+ "printWidth": 80
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.24.3-EPDM-11320.0",
3
+ "version": "7.24.3-EPDM-11143.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -22,14 +22,28 @@
22
22
  "vuedraggable": "4.1.0"
23
23
  },
24
24
  "devDependencies": {
25
- "babel-eslint": "10.1.0",
25
+ "@babel/core": "7.12.16",
26
+ "@babel/eslint-parser": "7.12.16",
27
+ "@vue/cli-plugin-babel": "5.0.8",
26
28
  "@vue/cli-plugin-eslint": "5.0.8",
27
29
  "@vue/cli-service": "5.0.8",
28
30
  "@vue/compiler-sfc": "3.3.4",
29
- "eslint": "8.0.1",
30
- "eslint-config-prettier": "8.8.0",
31
- "eslint-plugin-prettier": "4.2.1",
32
- "eslint-plugin-vue": "9.14.1"
31
+ "eslint": "7.32.0",
32
+ "eslint-plugin-vue": "8.0.3"
33
+ },
34
+ "eslintConfig": {
35
+ "root": true,
36
+ "env": {
37
+ "node": true
38
+ },
39
+ "extends": [
40
+ "plugin:vue/essential",
41
+ "eslint:recommended"
42
+ ],
43
+ "parserOptions": {
44
+ "parser": "@babel/eslint-parser"
45
+ },
46
+ "rules": {}
33
47
  },
34
48
  "browserslist": [
35
49
  "> 1%",
package/public/favicon.ico ADDED
Binary file
package/public/index.html ADDED
@@ -0,0 +1,17 @@
1
+ <!DOCTYPE html>
2
+ <html lang="">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
+ <title><%= htmlWebpackPlugin.options.title %></title>
9
+ </head>
10
+ <body>
11
+ <noscript>
12
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+ </noscript>
14
+ <div id="app"></div>
15
+ <!-- built files will be auto injected -->
16
+ </body>
17
+ </html>
package/src/App.vue CHANGED
@@ -1,108 +1,103 @@
1
1
  <template>
2
- <ThemeProvider
3
- :style="{ height: '100%' }"
4
- :theme="getTheme()"
5
- >
6
- <PageContainer>
2
+ <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
+ <page-container>
7
4
  <br />
8
- <InputNumber
9
- background-color="transparent"
10
- border-color="eturnityGrey"
11
- input-height="34px"
12
- input-width="420px"
13
- :interaction-step="1"
14
- :is-interactive="true"
15
- :min-number="0"
16
- :number-precision="0"
17
- text-align="left"
18
- unit-name="mm"
5
+ <input-number
19
6
  :value="value"
20
- @input-blur="blurHandler"
7
+ :minNumber="0"
8
+ unitName="mm"
9
+ :numberPrecision="0"
10
+ backgroundColor="transparent"
11
+ borderColor="eturnityGrey"
12
+ inputHeight="34px"
13
+ inputWidth="420px"
14
+ textAlign="left"
15
+ :isInteractive="true"
16
+ :interactionStep="1"
17
+ @on-input="inputHandler"
21
18
  @input-change="changeHandler"
22
19
  @input-focus="focusHandler"
23
- @on-input="inputHandler"
20
+ @input-blur="blurHandler"
24
21
  >
25
- <template #label>
22
+ <template v-slot:label>
26
23
  <div>Interactive Label 1</div>
27
24
  </template>
28
- </InputNumber>
25
+ </input-number>
29
26
 
30
- <hr />
27
+ <hr>
31
28
 
32
- <InputNumber
33
- background-color="transparent"
34
- border-color="eturnityGrey"
35
- input-height="34px"
36
- input-width="420px"
37
- :interaction-step="1"
38
- :is-interactive="true"
39
- :min-number="0"
40
- :number-precision="0"
41
- text-align="left"
42
- unit-name="mm"
29
+ <input-number
43
30
  :value="value"
44
- @input-blur="blurHandler"
31
+ :minNumber="0"
32
+ unitName="mm"
33
+ :numberPrecision="0"
34
+ backgroundColor="transparent"
35
+ borderColor="eturnityGrey"
36
+ inputHeight="34px"
37
+ inputWidth="420px"
38
+ textAlign="left"
39
+ :isInteractive="true"
40
+ :interactionStep="1"
41
+ @on-input="inputHandler"
45
42
  @input-change="changeHandler"
46
43
  @input-focus="focusHandler"
47
- @on-input="inputHandler"
44
+ @input-blur="blurHandler"
48
45
  >
49
- <template #label>
46
+ <template v-slot:label>
50
47
  <div>Interactive Label 2</div>
51
48
  </template>
52
- </InputNumber>
49
+ </input-number>
53
50
 
54
- <hr />
55
- <button @click="value=42">
56
- Click to set at 42
57
- </button>
58
- </PageContainer>
51
+ <hr>
52
+ <button @click="value=42">Click to set at 42</button>
53
+ </page-container>
59
54
  </ThemeProvider>
60
55
  </template>
61
56
 
62
57
  <script>
63
- import { ThemeProvider } from 'vue3-styled-components'
64
- import theme from './assets/theme'
65
- import styled from 'vue3-styled-components'
66
- import InputNumber from '@/components/inputs/inputNumber'
58
+ import { ThemeProvider } from 'vue3-styled-components'
59
+ import theme from './assets/theme'
60
+ import styled from 'vue3-styled-components'
61
+ import InputNumber from '@/components/inputs/inputNumber'
67
62
 
68
- const PageContainer = styled.div`
63
+ const PageContainer = styled.div`
69
64
  padding: 40px;
70
65
  `
71
66
 
72
- export default {
73
- name: 'App',
74
- components: {
75
- ThemeProvider,
76
- PageContainer,
77
- InputNumber,
67
+ export default {
68
+ name: 'App',
69
+ components: {
70
+ ThemeProvider,
71
+ PageContainer,
72
+ InputNumber,
73
+ },
74
+ data() {
75
+ return {
76
+ value: 42,
77
+ }
78
+ },
79
+ computed: {
80
+ },
81
+ methods: {
82
+ blurHandler(e) {
83
+ console.log('blur', e)
78
84
  },
79
- data() {
80
- return {
81
- value: 42,
82
- }
85
+ changeHandler(e) {
86
+ console.log('change', e)
83
87
  },
84
- computed: {
88
+ focusHandler(e) {
89
+ console.log('focus', e)
85
90
  },
86
- methods: {
87
- blurHandler(e) {
88
- console.log('blur', e)
89
- },
90
- changeHandler(e) {
91
- console.log('change', e)
92
- },
93
- focusHandler(e) {
94
- console.log('focus', e)
95
- },
96
- inputHandler(e) {
97
- console.log('input', e)
98
- //this.value = e
99
- setTimeout(() => {this.value = e}, 1000)
100
- },
101
- getTheme() {
102
- return theme
103
- }
91
+ inputHandler(e) {
92
+ console.log('input', e)
93
+ //this.value = e
94
+ setTimeout(()=>{this.value = e},1000)
95
+ },
96
+ getTheme() {
97
+ return theme
104
98
  }
105
99
  }
100
+ }
106
101
  </script>
107
102
 
108
103
  <style>
package/src/assets/svgIcons/copy.svg ADDED
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
3
+ <svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
4
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5
+ <g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
6
+ <path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
7
+ </path>
8
+ </g>
9
+ </g>
10
+ </svg>
package/src/components/addNewButton/index.vue CHANGED
@@ -1,24 +1,24 @@
1
1
  <template>
2
- <PageContainer :should-position="shouldPosition">
3
- <ButtonContainer :data-id="dataId">
2
+ <page-container :shouldPosition="shouldPosition">
3
+ <button-container :data-id="dataId">
4
4
  <PlusButtonSvg />
5
- </ButtonContainer>
6
- </PageContainer>
5
+ </button-container>
6
+ </page-container>
7
7
  </template>
8
8
 
9
9
  <script>
10
10
  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
11
- import styled from 'vue3-styled-components'
12
- import PlusButtonSvg from '../../assets/icons/plus_button.svg'
11
+ import styled from 'vue3-styled-components'
12
+ import PlusButtonSvg from '../../assets/icons/plus_button.svg'
13
13
 
14
- const pageAttrs = { shouldPosition: Boolean }
15
- const PageContainer = styled('div', pageAttrs)`
14
+ const pageAttrs = { shouldPosition: Boolean }
15
+ const PageContainer = styled('div', pageAttrs)`
16
16
  position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
17
17
  bottom: 30px;
18
18
  right: 30px;
19
19
  `
20
20
 
21
- const ButtonContainer = styled.div`
21
+ const ButtonContainer = styled.div`
22
22
  height: 60px;
23
23
  width: 60px;
24
24
  background-color: ${(props) => props.theme.colors.green};
@@ -40,22 +40,25 @@
40
40
  }
41
41
  `
42
42
 
43
- export default {
44
- name: 'AddNewButton',
45
- components: {
46
- PageContainer,
47
- ButtonContainer,
48
- PlusButtonSvg
43
+ const PlusButton = styled.img``
44
+
45
+ export default {
46
+ name: 'add-new-button',
47
+ components: {
48
+ PageContainer,
49
+ ButtonContainer,
50
+ PlusButton,
51
+ PlusButtonSvg
52
+ },
53
+ props: {
54
+ shouldPosition: {
55
+ required: false,
56
+ default: true
49
57
  },
50
- props: {
51
- shouldPosition: {
52
- required: false,
53
- default: true
54
- },
55
- dataId: {
56
- type: String,
57
- default: ''
58
- }
58
+ dataId: {
59
+ type: String,
60
+ default: ''
59
61
  }
60
62
  }
63
+ }
61
64
  </script>
package/src/components/banner/actionBanner/index.vue CHANGED
@@ -1,30 +1,28 @@
1
1
  <template>
2
- <Modal
3
- :is-open="isOpen"
4
- @on-close="closeModal"
5
- >
6
- <ModalContainer>
7
- <ModalTitle v-if="$slots.title">
2
+ <Modal :is-open="isOpen" @on-close="closeModal">
3
+ <modalContainer>
4
+ <modalTitle v-if="$slots.title">
8
5
  <slot name="title"></slot>
9
- </ModalTitle>
10
- <TextContainer v-if="$slots.body">
6
+ </modalTitle>
7
+ <textContainer v-if="$slots.body">
11
8
  <slot name="body"></slot>
12
- </TextContainer>
13
- <ButtonContainer v-if="$slots.buttons">
9
+ </textContainer>
10
+ <buttonContainer v-if="$slots.buttons">
14
11
  <slot name="buttons"></slot>
15
- </ButtonContainer>
16
- </ModalContainer>
12
+ </buttonContainer>
13
+ </modalContainer>
17
14
  </Modal>
18
15
  </template>
19
16
  <script>
20
- import styled from 'vue3-styled-components'
21
- import Modal from '../modal'
22
- const ModalContainer = styled.div`
17
+ import styled from 'vue3-styled-components'
18
+ import { mapActions, mapState } from 'vuex'
19
+ import Modal from '../modal'
20
+ const modalContainer = styled.div`
23
21
  width: 450px;
24
22
  min-height: 205px;
25
23
  padding: 40px 40px 30px 40px;
26
24
  `
27
- const ModalTitle = styled.div`
25
+ const modalTitle = styled.div`
28
26
  color: ${(props) => props.theme.colors.black};
29
27
  font-family: ${(props) => props.theme.fonts.mainFont};
30
28
  font-size: 18px;
@@ -33,12 +31,12 @@
33
31
  line-height: 120%;
34
32
  text-transform: uppercase;
35
33
  `
36
- const ButtonContainer = styled.div`
34
+ const buttonContainer = styled.div`
37
35
  display: inline-flex;
38
36
  align-items: flex-start;
39
37
  gap: 20px;
40
38
  `
41
- const TextContainer = styled.div`
39
+ const textContainer = styled.div`
42
40
  color: ${(props) => props.theme.colors.black};
43
41
  font-family: ${(props) => props.theme.fonts.mainFont};
44
42
  font-size: 13px;
@@ -48,20 +46,20 @@
48
46
  padding: 30px 0px;
49
47
  white-space: pre-wrap;
50
48
  `
51
- export default {
52
- name: 'ActionModal',
53
- components: {
54
- Modal,
55
- ModalContainer,
56
- ModalTitle,
57
- ButtonContainer,
58
- TextContainer
59
- },
60
- props: ['isOpen'],
61
- methods: {
62
- closeModal() {
63
- this.$emit('on-close')
64
- }
49
+ export default {
50
+ name: 'actionModal',
51
+ props: ['isOpen'],
52
+ components: {
53
+ Modal,
54
+ modalContainer,
55
+ modalTitle,
56
+ buttonContainer,
57
+ textContainer
58
+ },
59
+ methods: {
60
+ closeModal() {
61
+ this.$emit('on-close')
65
62
  }
66
63
  }
64
+ }
67
65
  </script>
package/src/components/banner/banner/index.vue CHANGED
@@ -1,26 +1,18 @@
1
1
  <template>
2
- <PageWrapper
3
- :backdrop="backdrop"
4
- :class="{ visible: isOpen, hidden: !isOpen }"
5
- :is-open="isOpen"
2
+ <page-wrapper
6
3
  :position="position"
4
+ :isOpen="isOpen"
5
+ :class="{ visible: isOpen, hidden: !isOpen }"
6
+ :backdrop="backdrop"
7
7
  >
8
- <ModalContainer @click="onClickModalContainer">
9
- <Spinner
10
- v-if="isLoading"
11
- :limited-to-modal="true"
12
- size="50px"
13
- />
14
- <ContentContainer :visible="!isLoading">
15
- <slot></slot>
16
- </ContentContainer>
17
- <CloseButton
18
- v-if="!hideClose"
19
- class="close"
20
- @click="onCloseModal()"
21
- />
22
- </ModalContainer>
23
- </PageWrapper>
8
+ <modal-container @click="onClickModalContainer">
9
+ <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
10
+ <content-container :visible="!isLoading">
11
+ <slot />
12
+ </content-container>
13
+ <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
14
+ </modal-container>
15
+ </page-wrapper>
24
16
  </template>
25
17
 
26
18
  <script>
@@ -34,17 +26,17 @@
34
26
  // <div>Data....</div>
35
27
  // </modal>
36
28
 
37
- import styled from 'vue3-styled-components'
38
- import CloseButton from '../../buttons/closeButton'
39
- import Spinner from '../../spinner'
29
+ import styled from 'vue3-styled-components'
30
+ import CloseButton from '../../buttons/closeButton'
31
+ import Spinner from '../../spinner'
40
32
 
41
- const contentAttrs = { visible: Boolean }
42
- const ContentContainer = styled('div', contentAttrs)`
33
+ const contentAttrs = { visible: Boolean }
34
+ const ContentContainer = styled('div', contentAttrs)`
43
35
  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
44
36
  `
45
37
 
46
- const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
47
- const PageWrapper = styled('div', pageAttrs)`
38
+ const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
39
+ const PageWrapper = styled('div', pageAttrs)`
48
40
  position: ${(props) => props.position}
49
41
  display: grid;
50
42
  top: 0;
@@ -54,7 +46,7 @@
54
46
  background-color: ${(props) =>
55
47
  props.backdrop == 'dark'
56
48
  ? 'rgba(0, 0, 0, 0.4)'
57
- : 'rgba(255, 255, 255, 0.9)'};
49
+ : 'rgba(255, 255, 255, 0.9)'};
58
50
  z-index: 99999;
59
51
  overflow: auto;
60
52
 
@@ -75,7 +67,7 @@
75
67
  }
76
68
  `
77
69
 
78
- const ModalContainer = styled.div`
70
+ const ModalContainer = styled.div`
79
71
  align-self: center;
80
72
  justify-self: center;
81
73
  position: relative;
@@ -126,71 +118,71 @@
126
118
  }
127
119
  `
128
120
 
129
- export default {
130
- name: 'Modal',
131
- components: {
132
- PageWrapper,
133
- ModalContainer,
134
- CloseButton,
135
- Spinner,
136
- ContentContainer
121
+ export default {
122
+ name: 'modal',
123
+ components: {
124
+ PageWrapper,
125
+ ModalContainer,
126
+ CloseButton,
127
+ Spinner,
128
+ ContentContainer
129
+ },
130
+ props: {
131
+ isOpen: {
132
+ required: true,
133
+ default: false
137
134
  },
138
- props: {
139
- isOpen: {
140
- required: true,
141
- default: false
142
- },
143
- isLoading: {
144
- required: false,
145
- default: false
146
- },
147
- hideClose: {
148
- required: false,
149
- default: false
150
- },
151
- backdrop: {
152
- required: false,
153
- default: 'white'
154
- },
155
- position: {
156
- required: false,
157
- default: 'fixed'
158
- },
159
- stopPropagation: {
160
- type: Boolean,
161
- default: true
162
- }
135
+ isLoading: {
136
+ required: false,
137
+ default: false
163
138
  },
164
- watch: {
165
- isOpen: {
166
- immediate: true,
167
- handler(isOpen) {
168
- document.body.style.overflow = isOpen ? 'hidden' : ''
169
- if (isOpen) {
170
- window.addEventListener('keydown', this.handleKeyDown)
171
- } else {
172
- window.removeEventListener('keydown', this.handleKeyDown)
173
- }
174
- }
175
- }
139
+ hideClose: {
140
+ required: false,
141
+ default: false
176
142
  },
177
- beforeDestroy() {
178
- window.removeEventListener('keydown', this.handleKeyDown)
143
+ backdrop: {
144
+ required: false,
145
+ default: 'white'
179
146
  },
180
- methods: {
181
- onCloseModal() {
182
- this.$emit('on-close')
183
- },
184
- handleKeyDown({ key }) {
185
- if (key === 'Escape') {
186
- this.onCloseModal()
187
- }
188
- },
189
- onClickModalContainer(event) {
190
- if (this.stopPropagation) {
191
- event.stopPropagation()
147
+ position: {
148
+ required: false,
149
+ default: 'fixed'
150
+ },
151
+ stopPropagation: {
152
+ type: Boolean,
153
+ default: true
154
+ }
155
+ },
156
+ beforeDestroy() {
157
+ window.removeEventListener('keydown', this.handleKeyDown)
158
+ },
159
+ methods: {
160
+ onCloseModal() {
161
+ this.$emit('on-close')
162
+ },
163
+ handleKeyDown({ key }) {
164
+ if (key === 'Escape') {
165
+ this.onCloseModal()
166
+ }
167
+ },
168
+ onClickModalContainer(event) {
169
+ if (this.stopPropagation) {
170
+ event.stopPropagation()
171
+ }
172
+ }
173
+ },
174
+ watch: {
175
+ isOpen: {
176
+ immediate: true,
177
+ handler(isOpen) {
178
+ document.body.style.overflow = isOpen ? 'hidden' : ''
179
+ if (isOpen) {
180
+ window.addEventListener('keydown', this.handleKeyDown)
181
+ } else {
182
+ window.removeEventListener('keydown', this.handleKeyDown)
192
183
  }
193
184
  }
194
185
  }
195
186
  }
187
+ }
196
188
  </script>