inviton-powerduck 0.0.147 → 0.0.148
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.
|
@@ -469,7 +469,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
|
|
|
469
469
|
|
|
470
470
|
private handleCustomRenderResult(h: any, renderFunc: any, originator: CustomRenderOriginator) {
|
|
471
471
|
return (item: any, container: any) => {
|
|
472
|
-
const result = renderFunc(h, item, originator);
|
|
472
|
+
const result = renderFunc(h, item?.dataRow ?? item, originator);
|
|
473
473
|
if (result?.__v_isVNode) {
|
|
474
474
|
const container = document.createElement('span')
|
|
475
475
|
// vue render accepts VNodeChild
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { DropdownListOption, DropdownOptionGroup } from "..";
|
|
2
|
+
|
|
3
|
+
export default class DropdownListHelper {
|
|
4
|
+
static isOptionGroup(item: DropdownListOption | DropdownOptionGroup) {
|
|
5
|
+
if ((item as any).dataRow == null && (item as any).children != null) {
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -5,6 +5,7 @@ import TsxComponent, { Component } from '../../app/vuetsx';
|
|
|
5
5
|
import { PortalUtils } from '../../common/utils/utils';
|
|
6
6
|
import FormItemWrapper from '../form/form-item-wrapper';
|
|
7
7
|
import HtmlLiteral from '../html-literal/html-literal';
|
|
8
|
+
import './css/checkbox.css';
|
|
8
9
|
|
|
9
10
|
interface CheckBoxArgs extends FormItemWrapperArgs {
|
|
10
11
|
value: boolean;
|
|
@@ -93,9 +94,8 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
|
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
renderCheckboxNowUi(h) {
|
|
96
|
-
const checkboxClass = `form-check ${
|
|
97
|
-
this.
|
|
98
|
-
}${this.size === CheckBoxSize.Small ? ' ui-checkbox-sm' : ''}`;
|
|
97
|
+
const checkboxClass = `form-check ${this.wrap ? 'ui-checkbox-wrapped' : 'ui-checkbox-nonwrapped'
|
|
98
|
+
}${this.size === CheckBoxSize.Small ? ' ui-checkbox-sm' : ''}`;
|
|
99
99
|
|
|
100
100
|
return (
|
|
101
101
|
<div class={checkboxClass}>
|
|
@@ -113,8 +113,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
|
|
|
113
113
|
this.uuid = PortalUtils.randomString(12);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
const checkboxClass = `inv-md-checkbox${
|
|
117
|
-
this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''}`;
|
|
116
|
+
const checkboxClass = `inv-md-checkbox${this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''}`;
|
|
118
117
|
|
|
119
118
|
return (
|
|
120
119
|
<div class={checkboxClass}>
|
|
@@ -133,9 +132,8 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
|
|
|
133
132
|
this.uuid = PortalUtils.randomString(12);
|
|
134
133
|
}
|
|
135
134
|
|
|
136
|
-
const checkboxClass = `inv-md-checkbox${
|
|
137
|
-
this.
|
|
138
|
-
}${this.skin === CheckBoxSkin.MinusVariant ? ' inv-md-checkbox-minus' : ''}`;
|
|
135
|
+
const checkboxClass = `inv-md-checkbox${this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''
|
|
136
|
+
}${this.skin === CheckBoxSkin.MinusVariant ? ' inv-md-checkbox-minus' : ''}`;
|
|
139
137
|
|
|
140
138
|
return (
|
|
141
139
|
<div class={checkboxClass}>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
.inv-md-checkbox input[type='checkbox'] {
|
|
2
|
+
border: 0;
|
|
3
|
+
clip: rect(0 0 0 0);
|
|
4
|
+
height: 1px;
|
|
5
|
+
margin: -1px;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
padding: 0;
|
|
8
|
+
position: absolute !important;
|
|
9
|
+
width: 1px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.inv-md-checkbox input[type='checkbox']:active+label:before {
|
|
13
|
+
transition-duration: 0s;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.inv-md-checkbox input[type='checkbox']+label {
|
|
17
|
+
position: relative !important;
|
|
18
|
+
padding-left: 30px;
|
|
19
|
+
vertical-align: top;
|
|
20
|
+
user-select: none;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.inv-md-checkbox input[type='checkbox']+label:before {
|
|
25
|
+
box-sizing: content-box;
|
|
26
|
+
content: '';
|
|
27
|
+
color: #4f8196;
|
|
28
|
+
position: absolute !important;
|
|
29
|
+
top: 11px;
|
|
30
|
+
left: 0;
|
|
31
|
+
width: 14px;
|
|
32
|
+
height: 14px;
|
|
33
|
+
margin-top: -9px;
|
|
34
|
+
border: 2px solid #4f8196;
|
|
35
|
+
text-align: center;
|
|
36
|
+
transition: all 0.4s ease;
|
|
37
|
+
border-radius: 2px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.inv-md-checkbox input[type='checkbox']+label:after {
|
|
41
|
+
box-sizing: content-box;
|
|
42
|
+
content: '';
|
|
43
|
+
background-color: #4f8196;
|
|
44
|
+
position: absolute !important;
|
|
45
|
+
top: 50%;
|
|
46
|
+
left: 4px;
|
|
47
|
+
width: 10px;
|
|
48
|
+
height: 10px;
|
|
49
|
+
margin-top: -5px;
|
|
50
|
+
transform: scale(0);
|
|
51
|
+
transform-origin: 50%;
|
|
52
|
+
transition: transform 200ms ease-out;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.inv-md-checkbox input[type='checkbox']:disabled+label:before {
|
|
56
|
+
border-color: #cccccc;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.inv-md-checkbox input[type='checkbox']:disabled:focus+label:before,
|
|
60
|
+
.inv-md-checkbox input[type='checkbox']:disabled:hover+label:before {
|
|
61
|
+
background-color: inherit;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.inv-md-checkbox input[type='checkbox']:disabled:checked+label:before {
|
|
65
|
+
background-color: #cccccc;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.inv-md-checkbox input[type='checkbox']+label:after {
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
top: 12px;
|
|
71
|
+
left: 4px;
|
|
72
|
+
width: 8px;
|
|
73
|
+
height: 3px;
|
|
74
|
+
margin-top: -4px;
|
|
75
|
+
border-style: solid;
|
|
76
|
+
border-color: #ffffff;
|
|
77
|
+
border-width: 0 0 3px 3px;
|
|
78
|
+
border-image: none;
|
|
79
|
+
transform: rotate(-45deg) scale(0);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.inv-md-checkbox input[type='checkbox']:checked+label:after {
|
|
83
|
+
content: '';
|
|
84
|
+
transform: rotate(-45deg) scale(1);
|
|
85
|
+
transition: transform 200ms ease-out;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.inv-md-checkbox input[type='checkbox']:checked+label:before {
|
|
89
|
+
animation: invMdBorderscale 200ms ease-in;
|
|
90
|
+
background: #4f8196;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.inv-md-checkbox input[type='checkbox']:checked+label:after {
|
|
94
|
+
transform: rotate(-45deg) scale(1);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@keyframes invMdBorderscale {
|
|
98
|
+
50% {
|
|
99
|
+
box-shadow: 0 0 0 2px #4f8196;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.form-check.ui-checkbox-nonwrapped {
|
|
104
|
+
padding-left: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.form-check.ui-checkbox-nonwrapped label {
|
|
108
|
+
width: 100%;
|
|
109
|
+
}
|
|
@@ -1,3 +1,85 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
@keyframes invMdRadioRipple {
|
|
2
|
+
0% {
|
|
3
|
+
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
50% {
|
|
7
|
+
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
100% {
|
|
11
|
+
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.inv-md-radio {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 3px 0px;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.inv-md-radio.inv-md-radio-inline {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.inv-md-radio input[type='radio'] {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.inv-md-radio input[type='radio']:checked+label:before {
|
|
30
|
+
border-color: #337ab7;
|
|
31
|
+
animation: invMdRadioRipple 0.2s linear forwards;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.inv-md-radio input[type='radio']:checked+label:after {
|
|
35
|
+
transform: scale(1);
|
|
3
36
|
}
|
|
37
|
+
|
|
38
|
+
.inv-md-radio label,
|
|
39
|
+
input[type='radio']+label {
|
|
40
|
+
display: inline-block;
|
|
41
|
+
min-height: 20px;
|
|
42
|
+
position: relative;
|
|
43
|
+
padding: 0 30px;
|
|
44
|
+
margin-bottom: 0;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
vertical-align: bottom;
|
|
47
|
+
width: 100%;
|
|
48
|
+
margin-left: 0px !important;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.inv-md-radio label:before,
|
|
52
|
+
.inv-md-radio label:after {
|
|
53
|
+
position: absolute;
|
|
54
|
+
content: '';
|
|
55
|
+
border-radius: 50%;
|
|
56
|
+
transition: all 0.3s ease;
|
|
57
|
+
transition-property: transform, border-color;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.inv-md-radio label:before {
|
|
61
|
+
left: 0;
|
|
62
|
+
top: 0;
|
|
63
|
+
width: 20px;
|
|
64
|
+
height: 20px;
|
|
65
|
+
border: 2px solid rgba(0, 0, 0, 0.54);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.inv-md-radio label:after {
|
|
69
|
+
top: 5px;
|
|
70
|
+
left: 5px;
|
|
71
|
+
width: 10px;
|
|
72
|
+
height: 10px;
|
|
73
|
+
transform: scale(0);
|
|
74
|
+
background: #337ab7;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.inv-md-radio *,
|
|
78
|
+
.inv-md-radio *:before,
|
|
79
|
+
.inv-md-radio *:after {
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.inv-mdfw-radio>.inv-cbrb-inner>label {
|
|
84
|
+
line-height: 20px;
|
|
85
|
+
}
|