inviton-powerduck 0.0.195 → 0.0.196
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Prop, toNative } from 'vue-facing-decorator';
|
|
2
2
|
import PowerduckState from '../../app/powerduck-state';
|
|
3
3
|
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
4
|
+
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
|
|
4
5
|
import Button from '../button/button';
|
|
5
6
|
import { ButtonLayout } from '../button/button-layout';
|
|
6
7
|
import FlexContainer from '../form/flex-container';
|
|
@@ -9,13 +10,13 @@ import Modal, { ModalSize } from '../modal/modal';
|
|
|
9
10
|
import ModalBody from '../modal/modal-body';
|
|
10
11
|
import ModalFooter from '../modal/modal-footer';
|
|
11
12
|
import './css/mobile-optimized-hero-filter.css';
|
|
12
|
-
import { isNullOrEmpty } from '@powerduck/common/utils/is-null-or-empty';
|
|
13
13
|
|
|
14
14
|
interface MobileOptimizedHeroFilterArgs {
|
|
15
15
|
caption: string;
|
|
16
16
|
isLoading?: boolean;
|
|
17
17
|
cssClass?: string;
|
|
18
|
-
placeholder?: string
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
useIntersectionObserver?: boolean;
|
|
19
20
|
clearFilterText?: string;
|
|
20
21
|
submitText?: string;
|
|
21
22
|
clickedClear?: () => void;
|
|
@@ -34,7 +35,8 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
34
35
|
@Prop() caption: string;
|
|
35
36
|
@Prop() isLoading: boolean;
|
|
36
37
|
@Prop() cssClass?: string;
|
|
37
|
-
@Prop() placeholder?: string
|
|
38
|
+
@Prop() placeholder?: string;
|
|
39
|
+
@Prop() useIntersectionObserver?: boolean;
|
|
38
40
|
@Prop() clearFilterText?: string;
|
|
39
41
|
@Prop() clickedClear?: () => void;
|
|
40
42
|
@Prop() clickedSubmit?: () => void;
|
|
@@ -45,6 +47,26 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
45
47
|
@Prop() mobileSecondLineText: string;
|
|
46
48
|
@Prop() mobileModalSize?: ModalSize;
|
|
47
49
|
|
|
50
|
+
mounted() {
|
|
51
|
+
if (this.useIntersectionObserver) {
|
|
52
|
+
this.$nextTick(() => {
|
|
53
|
+
const observer = new IntersectionObserver(([e]) => {
|
|
54
|
+
e.target.toggleAttribute('data-stuck', e.intersectionRatio < 1);
|
|
55
|
+
}, { threshold: [1] });
|
|
56
|
+
|
|
57
|
+
observer.observe(this.$el);
|
|
58
|
+
(this as any)._observer = observer;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
beforeUnmount(): void {
|
|
64
|
+
if ((this as any)._observer != null) {
|
|
65
|
+
((this as any)._observer as IntersectionObserver).disconnect();
|
|
66
|
+
(this as any)._observer = null;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
48
70
|
showFilterModal() {
|
|
49
71
|
this.getModal().show();
|
|
50
72
|
}
|
|
@@ -83,7 +105,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
83
105
|
<div class="mohf-input-first-line-text">{firstLine}</div>
|
|
84
106
|
|
|
85
107
|
{this.mobileSecondLineText?.length > 0
|
|
86
|
-
|
|
108
|
+
&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
|
|
87
109
|
|
|
88
110
|
</div>
|
|
89
111
|
</FlexFormItem>
|
|
@@ -108,16 +130,16 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
108
130
|
</ModalBody>
|
|
109
131
|
<ModalFooter>
|
|
110
132
|
{this.mobileShowClearFilters
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
133
|
+
&& (
|
|
134
|
+
<Button
|
|
135
|
+
layout={ButtonLayout.Secondary}
|
|
136
|
+
text={this.clearFilterText}
|
|
137
|
+
fullWidth={true}
|
|
138
|
+
clicked={() => {
|
|
139
|
+
this.clickedClear();
|
|
140
|
+
}}
|
|
141
|
+
/>
|
|
142
|
+
)}
|
|
121
143
|
<Button
|
|
122
144
|
layout={ButtonLayout.Primary}
|
|
123
145
|
text={PowerduckState.getResourceValue('search')}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type { VNode } from 'vue';
|
|
2
2
|
import type { ModalOnBeforeShownArgs, ModalOnShownArgs } from './modal-utils';
|
|
3
|
-
import { isNullOrEmpty } from '@powerduck/common/utils/is-null-or-empty';
|
|
4
3
|
import { Modal as BootstrapModal } from 'bootstrap';
|
|
5
4
|
import { Prop, toNative } from 'vue-facing-decorator';
|
|
6
|
-
import { globalState } from '../../app/global-state';
|
|
7
5
|
import PowerduckState from '../../app/powerduck-state';
|
|
8
6
|
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
7
|
+
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
|
|
9
8
|
import { PortalUtils } from '../../common/utils/utils';
|
|
10
9
|
import LoadingIndicator from '../loading-indicator';
|
|
11
10
|
import Teleport from '../teleport/teleport';
|