inviton-powerduck 0.0.194 → 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.
|
@@ -62,6 +62,10 @@
|
|
|
62
62
|
display: block;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
+
.mohf-input.mohf-placeholder .mohf-input-first-line-text {
|
|
66
|
+
color: #b7b7b7;
|
|
67
|
+
}
|
|
68
|
+
|
|
65
69
|
@media (max-width: 991.98px) {
|
|
66
70
|
.mohf-mobile-root {
|
|
67
71
|
display: block;
|
|
@@ -128,4 +132,4 @@
|
|
|
128
132
|
padding-left: 12px;
|
|
129
133
|
padding-right: 12px;
|
|
130
134
|
}
|
|
131
|
-
}
|
|
135
|
+
}
|
|
@@ -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';
|
|
@@ -14,6 +15,8 @@ interface MobileOptimizedHeroFilterArgs {
|
|
|
14
15
|
caption: string;
|
|
15
16
|
isLoading?: boolean;
|
|
16
17
|
cssClass?: string;
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
useIntersectionObserver?: boolean;
|
|
17
20
|
clearFilterText?: string;
|
|
18
21
|
submitText?: string;
|
|
19
22
|
clickedClear?: () => void;
|
|
@@ -32,6 +35,8 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
32
35
|
@Prop() caption: string;
|
|
33
36
|
@Prop() isLoading: boolean;
|
|
34
37
|
@Prop() cssClass?: string;
|
|
38
|
+
@Prop() placeholder?: string;
|
|
39
|
+
@Prop() useIntersectionObserver?: boolean;
|
|
35
40
|
@Prop() clearFilterText?: string;
|
|
36
41
|
@Prop() clickedClear?: () => void;
|
|
37
42
|
@Prop() clickedSubmit?: () => void;
|
|
@@ -42,6 +47,26 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
42
47
|
@Prop() mobileSecondLineText: string;
|
|
43
48
|
@Prop() mobileModalSize?: ModalSize;
|
|
44
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
|
+
|
|
45
70
|
showFilterModal() {
|
|
46
71
|
this.getModal().show();
|
|
47
72
|
}
|
|
@@ -55,11 +80,19 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
55
80
|
}
|
|
56
81
|
|
|
57
82
|
render(h) {
|
|
83
|
+
let firstLine = this.mobileFirstLineText;
|
|
84
|
+
let isPlaceholder = false;
|
|
85
|
+
|
|
86
|
+
if (isNullOrEmpty(firstLine)) {
|
|
87
|
+
firstLine = this.placeholder ?? `${PowerduckState.getResourceValue('search')}...`;
|
|
88
|
+
isPlaceholder = true;
|
|
89
|
+
}
|
|
90
|
+
|
|
58
91
|
return (
|
|
59
92
|
<div class={`mohf-root${this.cssClass ? ` ${this.cssClass}` : ''}`}>
|
|
60
93
|
<div class="mohf-mobile-root">
|
|
61
94
|
<div class="mohf-upper-spacer"></div>
|
|
62
|
-
<div class=
|
|
95
|
+
<div class={`mohf-input${isPlaceholder ? ' mohf-placeholder' : ''}`}>
|
|
63
96
|
<div class="mohf-input-outer" onClick={() => { this.showFilterModal(); }}>
|
|
64
97
|
<div class="mohf-input-inner">
|
|
65
98
|
<FlexContainer cssClass="mohf-input-flexwrap" fullWidthOnMobile={false}>
|
|
@@ -69,7 +102,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
69
102
|
|
|
70
103
|
<FlexFormItem cssClass="mohf-input-main-wrap" flexFill={true}>
|
|
71
104
|
<div class="mohf-input-main-inner">
|
|
72
|
-
<div class="mohf-input-first-line-text">{
|
|
105
|
+
<div class="mohf-input-first-line-text">{firstLine}</div>
|
|
73
106
|
|
|
74
107
|
{this.mobileSecondLineText?.length > 0
|
|
75
108
|
&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
|
|
@@ -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';
|