inviton-powerduck 0.0.213 → 0.0.215
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/components/dropdown/index.tsx +5 -4
- package/components/input/css/radio-button-enhanced-group.css +53 -0
- package/components/input/radio-button-enhanced-group.tsx +125 -0
- package/components/input/radio-button-group.tsx +1 -0
- package/components/tabs/css/tabs.css +14 -0
- package/components/tabs/tabs.tsx +27 -26
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ import { remove } from '../../common/extensions/array-extensions';
|
|
|
10
10
|
import { capitalize } from '../../common/extensions/string-extensions';
|
|
11
11
|
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
|
|
12
12
|
import { PortalUtils } from '../../common/utils/utils';
|
|
13
|
+
import VueUtils from '../../common/utils/vue-utils';
|
|
13
14
|
import FormItemWrapper from '../form/form-item-wrapper';
|
|
14
15
|
import LoadingIndicator from '../loading-indicator';
|
|
15
16
|
import FilterableSelect from './mobile/legacy_fdd';
|
|
@@ -509,7 +510,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
|
|
|
509
510
|
item?.dataRow ?? item,
|
|
510
511
|
originator,
|
|
511
512
|
);
|
|
512
|
-
if (result
|
|
513
|
+
if (VueUtils.isVNode(result)) {
|
|
513
514
|
const container = document.createElement('span');
|
|
514
515
|
// vue render accepts VNodeChild
|
|
515
516
|
render(result as any, container);
|
|
@@ -1075,7 +1076,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
|
|
|
1075
1076
|
if (tagsTemplate == null && this.tagsShouldPrependContent != false && this.customRenderSelectionResult == null) {
|
|
1076
1077
|
validTagsButtons = true;
|
|
1077
1078
|
tagsTemplate
|
|
1078
|
-
|
|
1079
|
+
= '<li class="select2-selection__choice select2-selection__choice-with-button"><span class="select2-selection__choice__remove" role="presentation"><i class="fas fa-times"></i></span></li>';
|
|
1079
1080
|
s2Args.templateSelection = (state): string | JQuery => {
|
|
1080
1081
|
if (!state) { return ''; }
|
|
1081
1082
|
|
|
@@ -1091,10 +1092,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
|
|
|
1091
1092
|
}
|
|
1092
1093
|
|
|
1093
1094
|
let builder
|
|
1094
|
-
|
|
1095
|
+
= `<span class="ddl-dropdown-resultroot"><span class="ddl-dropdown-resultwrap"><span class="ddl-result-text">${PortalUtils.htmlEscape(state.text || dataItem.text)}</span>`;
|
|
1095
1096
|
(self.tagsButtons(dataItem) || ([] as DropdownListButton[])).forEach((button, i) => {
|
|
1096
1097
|
builder
|
|
1097
|
-
|
|
1098
|
+
+= `<span class="ddl-result-button dll-clickable-button ${button.cssClass
|
|
1098
1099
|
}" data-index="${i
|
|
1099
1100
|
}" role="presentation"><i class="${button.iconCss
|
|
1100
1101
|
}"></i></span>`;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.pd-radio-button-enhanced-group,
|
|
2
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap,
|
|
3
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio {
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio {
|
|
8
|
+
padding: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio.form-check .form-check-input {
|
|
12
|
+
float: none;
|
|
13
|
+
margin: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio>.inv-cbrb-inner {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
padding: 0 14px;
|
|
21
|
+
border: 1px solid #e5e7eb;
|
|
22
|
+
border-radius: 6px;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
transition: all 0.2s;
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio.inv-selected>.inv-cbrb-inner {
|
|
29
|
+
border-color: #2b55cc;
|
|
30
|
+
background: #eff6ff;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.pd-radio-button-enhanced-group>.radio-group-wrap>.inv-mdfw-radio>.inv-cbrb-inner .form-check-label {
|
|
34
|
+
padding: 14px 0;
|
|
35
|
+
padding-left: 14px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.pd-radio-item-extended {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: space-between;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.pd-radio-item-extended-thumb,
|
|
45
|
+
.pd-radio-item-extended-thumb img {
|
|
46
|
+
height: 20px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.pd-radio-item-extended-subtitle {
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
color: #6b7280;
|
|
52
|
+
margin-top: -3px;
|
|
53
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import type { VNode } from 'vue';
|
|
2
|
+
import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
|
|
3
|
+
import type { FormItemWrapperArgs, HintType, MarginType } from '../form/form-item-wrapper';
|
|
4
|
+
import { Prop, toNative } from 'vue-facing-decorator';
|
|
5
|
+
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
6
|
+
import VueUtils from './../../common/utils/vue-utils';
|
|
7
|
+
import RadioButtonGroup from './radio-button-group';
|
|
8
|
+
import './css/radio-button-enhanced-group.css';
|
|
9
|
+
|
|
10
|
+
export interface RadioButtonExtendedItem {
|
|
11
|
+
id: number | string;
|
|
12
|
+
text: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
subtitle?: string;
|
|
15
|
+
image?: string | VNode;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface RadioButtonExtendedGroupArgs extends FormItemWrapperArgs {
|
|
19
|
+
changed: (newValue: RadioButtonExtendedItem) => void;
|
|
20
|
+
customRenderOption?: (h, state: RadioButtonExtendedItem) => any;
|
|
21
|
+
customRenderSelectionResult?: (h, state: RadioButtonExtendedItem) => any;
|
|
22
|
+
options: Array<RadioButtonExtendedItem>;
|
|
23
|
+
selected: RadioButtonExtendedItem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@Component
|
|
27
|
+
class RadioButtonEnhancedGroupComponent extends TsxComponent<RadioButtonExtendedGroupArgs> implements RadioButtonExtendedGroupArgs {
|
|
28
|
+
@Prop() label!: string;
|
|
29
|
+
@Prop() labelButtons!: DropdownButtonItemArgs[];
|
|
30
|
+
@Prop() subtitle!: string;
|
|
31
|
+
@Prop() cssClass!: string;
|
|
32
|
+
@Prop() mandatory!: boolean;
|
|
33
|
+
@Prop() wrap!: boolean;
|
|
34
|
+
@Prop() hint: string;
|
|
35
|
+
@Prop() hintType!: HintType;
|
|
36
|
+
@Prop() appendIcon: string;
|
|
37
|
+
@Prop() prependIcon: string;
|
|
38
|
+
@Prop() appendClicked: () => void;
|
|
39
|
+
@Prop() prependClicked: () => void;
|
|
40
|
+
|
|
41
|
+
@Prop() marginType?: MarginType;
|
|
42
|
+
@Prop() maxWidth?: number;
|
|
43
|
+
|
|
44
|
+
@Prop() changed: (newValue: string | any) => void;
|
|
45
|
+
@Prop() customRenderOption?: (h, state: RadioButtonExtendedItem) => any;
|
|
46
|
+
@Prop() customRenderSelectionResult?: (h, state: RadioButtonExtendedItem) => any;
|
|
47
|
+
@Prop() options: Array<RadioButtonExtendedItem>;
|
|
48
|
+
@Prop() selected: RadioButtonExtendedItem;
|
|
49
|
+
|
|
50
|
+
render(h) {
|
|
51
|
+
return (
|
|
52
|
+
<RadioButtonGroup
|
|
53
|
+
label={this.label}
|
|
54
|
+
mandatory={this.mandatory}
|
|
55
|
+
wrap={this.wrap}
|
|
56
|
+
appendIcon={this.appendIcon}
|
|
57
|
+
prependIcon={this.prependIcon}
|
|
58
|
+
hint={this.hint}
|
|
59
|
+
hintType={this.hintType}
|
|
60
|
+
appendClicked={this.appendClicked}
|
|
61
|
+
prependClicked={this.prependClicked}
|
|
62
|
+
marginType={this.marginType}
|
|
63
|
+
maxWidth={this.maxWidth}
|
|
64
|
+
validationState={this.validationState}
|
|
65
|
+
labelButtons={this.labelButtons}
|
|
66
|
+
subtitle={this.subtitle}
|
|
67
|
+
cssClass={this.cssClass?.length > 0 ? `pd-radio-button-enhanced-group ${this.cssClass}` : 'pd-radio-button-enhanced-group'}
|
|
68
|
+
options={this.options}
|
|
69
|
+
selected={this.selected}
|
|
70
|
+
changed={(e) => {
|
|
71
|
+
this.changed(e);
|
|
72
|
+
}}
|
|
73
|
+
customRenderOption={(h, state: RadioButtonExtendedItem) => {
|
|
74
|
+
if (this.customRenderOption) {
|
|
75
|
+
return this.customRenderOption(h, state);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const disabledCssClass = state.disabled ? ' disabled' : '';
|
|
79
|
+
const subtitle = state.subtitle;
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div class={`pd-radio-item-extended${disabledCssClass}`}>
|
|
83
|
+
<div class="pd-radio-item-extended-name-wrapper">
|
|
84
|
+
<span class={`pd-radio-item-extended-name${disabledCssClass}`}>{state.text}</span>
|
|
85
|
+
|
|
86
|
+
{subtitle && (
|
|
87
|
+
<div class={`pd-radio-item-extended-subtitle${disabledCssClass}`}>{subtitle}</div>
|
|
88
|
+
)}
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
{this.renderImage(
|
|
92
|
+
h,
|
|
93
|
+
state.image,
|
|
94
|
+
state,
|
|
95
|
+
)}
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
}}
|
|
99
|
+
/>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
renderImage(
|
|
104
|
+
h,
|
|
105
|
+
image: string | VNode,
|
|
106
|
+
state: RadioButtonExtendedItem,
|
|
107
|
+
) {
|
|
108
|
+
if (image == null) {
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (VueUtils.isVNode(image)) {
|
|
113
|
+
return (<div class="pd-radio-item-extended-thumb">{image}</div>);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
if ((image as string).includes('/')) {
|
|
117
|
+
return (<div class="pd-radio-item-extended-thumb"><img src={image} alt={state.text} class="pd-radio-item-extended-image" /></div>);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return (<div class="pd-radio-item-extended-thumb"><i class={`pd-radio-item-extended-icon ${image}`} /></div>);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
const RadioButtonEnahancedGroup = toNative(RadioButtonEnhancedGroupComponent);
|
|
125
|
+
export default RadioButtonEnahancedGroup;
|
package/components/tabs/tabs.tsx
CHANGED
|
@@ -9,6 +9,7 @@ import Card from '../card/card';
|
|
|
9
9
|
import CardBody from '../card/card-body';
|
|
10
10
|
import CardHeader from '../card/card-header';
|
|
11
11
|
import HtmlLiteral from '../html-literal/html-literal';
|
|
12
|
+
import './css/tabs.css';
|
|
12
13
|
|
|
13
14
|
export enum TabsRenderMode {
|
|
14
15
|
Normal = 0,
|
|
@@ -198,21 +199,21 @@ class TabsComponent extends TsxComponent<TabsArgs> implements TabsArgs {
|
|
|
198
199
|
<i class={tab.icon}></i>
|
|
199
200
|
{tab.escapeCaption != false
|
|
200
201
|
? (
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
202
|
+
<span>
|
|
203
|
+
<span class="nav-caption-long">{tab.navCaption}</span>
|
|
204
|
+
<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
|
|
205
|
+
</span>
|
|
206
|
+
)
|
|
206
207
|
: (
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
</span>
|
|
208
|
+
<span>
|
|
209
|
+
<span class="nav-caption-long">
|
|
210
|
+
<HtmlLiteral innerHTML={tab.navCaption} />
|
|
211
|
+
</span>
|
|
212
|
+
<span class="nav-caption-short">
|
|
213
|
+
<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
|
|
214
214
|
</span>
|
|
215
|
-
|
|
215
|
+
</span>
|
|
216
|
+
)}
|
|
216
217
|
</a>
|
|
217
218
|
</li>
|
|
218
219
|
))}
|
|
@@ -257,21 +258,21 @@ class TabsComponent extends TsxComponent<TabsArgs> implements TabsArgs {
|
|
|
257
258
|
|
|
258
259
|
{tab.escapeCaption != false
|
|
259
260
|
? (
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
261
|
+
<span>
|
|
262
|
+
<span class="nav-caption-long">{tab.navCaption}</span>
|
|
263
|
+
<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
|
|
264
|
+
</span>
|
|
265
|
+
)
|
|
265
266
|
: (
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
</span>
|
|
267
|
+
<span>
|
|
268
|
+
<span class="nav-caption-long">
|
|
269
|
+
<HtmlLiteral innerHTML={tab.navCaption} />
|
|
270
|
+
</span>
|
|
271
|
+
<span class="nav-caption-short">
|
|
272
|
+
<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
|
|
273
273
|
</span>
|
|
274
|
-
|
|
274
|
+
</span>
|
|
275
|
+
)}
|
|
275
276
|
</a>
|
|
276
277
|
</li>
|
|
277
278
|
))}
|