inviton-powerduck 0.0.192 → 0.0.193
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.
|
@@ -18,6 +18,7 @@ interface MobileOptimizedHeroFilterArgs {
|
|
|
18
18
|
submitText?: string;
|
|
19
19
|
clickedClear?: () => void;
|
|
20
20
|
clickedSubmit?: () => void;
|
|
21
|
+
modalBackdropCssClass?: string;
|
|
21
22
|
mobileModalCssClass?: string;
|
|
22
23
|
mobileShowClearFilters?: boolean;
|
|
23
24
|
mobileModalSize?: ModalSize;
|
|
@@ -34,6 +35,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
34
35
|
@Prop() clearFilterText?: string;
|
|
35
36
|
@Prop() clickedClear?: () => void;
|
|
36
37
|
@Prop() clickedSubmit?: () => void;
|
|
38
|
+
@Prop() modalBackdropCssClass: string;
|
|
37
39
|
@Prop() mobileModalCssClass?: string;
|
|
38
40
|
@Prop() mobileShowClearFilters?: boolean;
|
|
39
41
|
@Prop() mobileFirstLineText: string;
|
|
@@ -70,7 +72,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
70
72
|
<div class="mohf-input-first-line-text">{this.mobileFirstLineText || (`${PowerduckState.getResourceValue('search')}...`)}</div>
|
|
71
73
|
|
|
72
74
|
{this.mobileSecondLineText?.length > 0
|
|
73
|
-
|
|
75
|
+
&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
|
|
74
76
|
|
|
75
77
|
</div>
|
|
76
78
|
</FlexFormItem>
|
|
@@ -87,7 +89,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
87
89
|
{this.$slots.default?.()}
|
|
88
90
|
</div>
|
|
89
91
|
|
|
90
|
-
<Modal title={this.caption} ref="mobileModal" size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
|
|
92
|
+
<Modal title={this.caption} ref="mobileModal" backdropCssClass={this.modalBackdropCssClass} size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
|
|
91
93
|
<ModalBody>
|
|
92
94
|
<div class="mohf-modal-body-wrap">
|
|
93
95
|
{this.$slots.default?.()}
|
|
@@ -95,16 +97,16 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
|
|
|
95
97
|
</ModalBody>
|
|
96
98
|
<ModalFooter>
|
|
97
99
|
{this.mobileShowClearFilters
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
100
|
+
&& (
|
|
101
|
+
<Button
|
|
102
|
+
layout={ButtonLayout.Secondary}
|
|
103
|
+
text={this.clearFilterText}
|
|
104
|
+
fullWidth={true}
|
|
105
|
+
clicked={() => {
|
|
106
|
+
this.clickedClear();
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
)}
|
|
108
110
|
<Button
|
|
109
111
|
layout={ButtonLayout.Primary}
|
|
110
112
|
text={PowerduckState.getResourceValue('search')}
|
|
@@ -1,5 +1,6 @@
|
|
|
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';
|
|
3
4
|
import { Modal as BootstrapModal } from 'bootstrap';
|
|
4
5
|
import { Prop, toNative } from 'vue-facing-decorator';
|
|
5
6
|
import { globalState } from '../../app/global-state';
|
|
@@ -16,6 +17,7 @@ import './css/modal.css';
|
|
|
16
17
|
|
|
17
18
|
interface ModalArgs {
|
|
18
19
|
title: string;
|
|
20
|
+
backdropCssClass?: string;
|
|
19
21
|
size?: ModalSize;
|
|
20
22
|
icon?: ModalHeaderIcon;
|
|
21
23
|
blocked?: boolean;
|
|
@@ -67,6 +69,7 @@ export class ModalConfig {
|
|
|
67
69
|
@Component
|
|
68
70
|
class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
|
|
69
71
|
@Prop() title!: string;
|
|
72
|
+
@Prop() backdropCssClass!: string;
|
|
70
73
|
@Prop() size!: ModalSize;
|
|
71
74
|
@Prop() icon!: ModalHeaderIcon;
|
|
72
75
|
@Prop() blocked!: boolean;
|
|
@@ -122,10 +125,7 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
|
|
|
122
125
|
return;
|
|
123
126
|
}
|
|
124
127
|
|
|
125
|
-
ModalUtils.bindModalBottomSheetHandle(
|
|
126
|
-
() => this.$refs.modalRoot as HTMLElement,
|
|
127
|
-
() => this.hide()
|
|
128
|
-
)
|
|
128
|
+
ModalUtils.bindModalBottomSheetHandle(() => this.$refs.modalRoot as HTMLElement, () => this.hide());
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
treatMobileAsBottomSheet(): boolean {
|
|
@@ -150,6 +150,13 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
|
|
|
150
150
|
args = args || {};
|
|
151
151
|
this.modalShown = true;
|
|
152
152
|
this.$nextTick(() => {
|
|
153
|
+
if (!isNullOrEmpty(this.backdropCssClass)) {
|
|
154
|
+
const instance: any = this.getModalInstance();
|
|
155
|
+
if (instance._backdrop?._config) {
|
|
156
|
+
instance._backdrop._config.className = `modal-backdrop ${this.backdropCssClass}`;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
153
160
|
ModalUtils.showModal(this, {
|
|
154
161
|
modal: this.getModalInstance(),
|
|
155
162
|
onShown: args.onShown,
|