inviton-powerduck 0.0.214 → 0.0.216
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.
|
@@ -0,0 +1,59 @@
|
|
|
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-left: 14px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.pd-radio-item-extended {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.pd-radio-item-extended .pd-radio-item-extended-name-wrapper {
|
|
44
|
+
height: 48px;
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.pd-radio-item-extended-thumb,
|
|
51
|
+
.pd-radio-item-extended-thumb img {
|
|
52
|
+
height: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.pd-radio-item-extended-subtitle {
|
|
56
|
+
font-size: 12px;
|
|
57
|
+
color: #6b7280;
|
|
58
|
+
margin-top: -3px;
|
|
59
|
+
}
|
|
@@ -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;
|
|
@@ -5,7 +5,6 @@ import { Prop, toNative } from 'vue-facing-decorator';
|
|
|
5
5
|
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
6
6
|
import { capitalize } from '../../common/extensions/string-extensions';
|
|
7
7
|
import { PortalUtils } from '../../common/utils/utils';
|
|
8
|
-
import VueUtils from '../../common/utils/vue-utils';
|
|
9
8
|
import FormItemWrapper from '../form/form-item-wrapper';
|
|
10
9
|
import HtmlLiteral from '../html-literal/html-literal';
|
|
11
10
|
import './css/radio-button-group.css';
|
|
@@ -147,7 +146,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
|
|
|
147
146
|
return '';
|
|
148
147
|
}
|
|
149
148
|
|
|
150
|
-
if (
|
|
149
|
+
if (renderResult?.__v_isVNode) {
|
|
151
150
|
const container = document.createElement('div');
|
|
152
151
|
render(renderResult as any, container);
|
|
153
152
|
return container.innerHTML;
|
|
@@ -239,6 +238,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
|
|
|
239
238
|
'inv-rbchb',
|
|
240
239
|
'form-check',
|
|
241
240
|
'inv-mdfw-radio',
|
|
241
|
+
selected ? 'inv-selected' : '',
|
|
242
242
|
isSmall ? 'inv-md-radio-sm' : '',
|
|
243
243
|
].join(' ');
|
|
244
244
|
|