@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.3 → 8.16.2--EPDM-14330.4
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.
package/package.json
CHANGED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<PageContainer>
|
|
3
|
+
<ButtonIcon
|
|
4
|
+
class="button-icon"
|
|
5
|
+
icon-name="sorting"
|
|
6
|
+
:text="$gettext('sort')"
|
|
7
|
+
type="filter"
|
|
8
|
+
@click="toggleOptions"
|
|
9
|
+
/>
|
|
10
|
+
<ButtonWrapper v-if="isOptionsVisible">
|
|
11
|
+
<BoxContainer class="box-container">
|
|
12
|
+
<BoxTitle>{{ $gettext('sort') }}</BoxTitle>
|
|
13
|
+
</BoxContainer>
|
|
14
|
+
</ButtonWrapper>
|
|
15
|
+
</PageContainer>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
import styled from 'vue3-styled-components'
|
|
20
|
+
import ButtonIcon from '../buttons/buttonIcon/index.vue'
|
|
21
|
+
|
|
22
|
+
const PageContainer = styled.div``
|
|
23
|
+
|
|
24
|
+
const ButtonWrapper = styled.div`
|
|
25
|
+
position: relative;
|
|
26
|
+
`
|
|
27
|
+
|
|
28
|
+
const BoxContainer = styled.div`
|
|
29
|
+
position: absolute;
|
|
30
|
+
z-index: 99;
|
|
31
|
+
top: 8px;
|
|
32
|
+
right: 0;
|
|
33
|
+
width: max-content;
|
|
34
|
+
max-width: 500px;
|
|
35
|
+
background-color: ${(props) => props.theme.colors.white};
|
|
36
|
+
border: 1px solid ${(props) => props.theme.semanticColors.grey[300]};
|
|
37
|
+
border-radius: 4px;
|
|
38
|
+
padding: 24px;
|
|
39
|
+
`
|
|
40
|
+
|
|
41
|
+
const BoxTitle = styled.div`
|
|
42
|
+
font-size: 14px;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
color: ${(props) => props.theme.semanticColors.teal[800]};
|
|
45
|
+
margin-bottom: 16px;
|
|
46
|
+
`
|
|
47
|
+
|
|
48
|
+
export default {
|
|
49
|
+
name: 'ViewSettings',
|
|
50
|
+
components: {
|
|
51
|
+
PageContainer,
|
|
52
|
+
ButtonIcon,
|
|
53
|
+
ButtonWrapper,
|
|
54
|
+
BoxContainer,
|
|
55
|
+
BoxTitle,
|
|
56
|
+
},
|
|
57
|
+
props: {},
|
|
58
|
+
data() {
|
|
59
|
+
return {
|
|
60
|
+
isOptionsVisible: false,
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
mounted() {
|
|
64
|
+
// Remove the mounted event listener since we now handle it in toggleOptions
|
|
65
|
+
},
|
|
66
|
+
beforeUnmount() {
|
|
67
|
+
document.removeEventListener('click', this.handleClickOutside)
|
|
68
|
+
},
|
|
69
|
+
methods: {
|
|
70
|
+
toggleOptions() {
|
|
71
|
+
this.isOptionsVisible = !this.isOptionsVisible
|
|
72
|
+
if (this.isOptionsVisible) {
|
|
73
|
+
document.addEventListener('click', this.handleClickOutside)
|
|
74
|
+
} else {
|
|
75
|
+
document.removeEventListener('click', this.handleClickOutside)
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
handleClickOutside(event) {
|
|
79
|
+
const buttonIcon = this.$el.querySelector('.button-icon')
|
|
80
|
+
const boxContainer = this.$el.querySelector('.box-container')
|
|
81
|
+
|
|
82
|
+
if (
|
|
83
|
+
!buttonIcon.contains(event.target) &&
|
|
84
|
+
!boxContainer.contains(event.target)
|
|
85
|
+
) {
|
|
86
|
+
this.isOptionsVisible = false
|
|
87
|
+
document.removeEventListener('click', this.handleClickOutside)
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
}
|
|
92
|
+
</script>
|