@vitrosoftware/common-ui-ts 1.1.21 → 1.1.22
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/css/common.css +1 -0
- package/css/std/controls/breadcrumbs/breadcrumbs.css +1 -0
- package/css/std/controls/lookup-picker/lookup-picker-selected-item.css +4 -1
- package/css/std/controls/lookup-picker/lookup-picker-value-list.css +1 -0
- package/css/std/controls/lookup-picker/lookup-picker.css +1 -1
- package/css/std/controls/scrollbar/scrollbar.css +54 -0
- package/css/std/controls/table-view/treegrid.css +4 -0
- package/css/std/controls/tree-view/tree-view.css +1 -1
- package/css/std/controls/uploader/uploader.css +0 -2
- package/css/third-party/perfect-scrollbar/perfect-scrollbar.css +116 -0
- package/dist/constants/Event.d.ts +2 -1
- package/dist/controls/ScrollBar/ScrollBar.d.ts +9 -0
- package/dist/index.css +64 -5
- package/dist/index.d.ts +2 -0
- package/dist/index.js +350 -293
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +350 -294
- package/dist/index.modern.js.map +1 -1
- package/lib/perfect-scrollbar/perfect-scrollbar.min.js +6 -0
- package/lib/perfect-scrollbar/resizeEventListener.js +66 -0
- package/lib/third-party.js +73 -1
- package/package.json +1 -1
- package/src/controls/PdfViewer/js/pdf-viewer.js +45 -13
package/css/common.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/kendo/kendo.css');
|
|
2
|
+
@import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
|
|
2
3
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jstree/style.min.css');
|
|
3
4
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.min.css');
|
|
4
5
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.structure.css');
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.vitro-scrollbar-content {
|
|
2
|
+
height: 100%;
|
|
3
|
+
width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
:global(.ps) {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:global(.ps__rail-y) {
|
|
13
|
+
background-color: #fff !important;
|
|
14
|
+
width: 12px !important;
|
|
15
|
+
border-left: 1px solid #F7F9FC;
|
|
16
|
+
border-top: 1px solid #F7F9FC;
|
|
17
|
+
opacity: 1 !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:global(.ps__rail-x) {
|
|
21
|
+
background-color: #fff !important;
|
|
22
|
+
height: 12px !important;
|
|
23
|
+
border-top: 1px solid #F7F9FC;
|
|
24
|
+
opacity: 1 !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:global(.ps__thumb-x), :global(.ps__thumb-y) {
|
|
28
|
+
background-color: #E4E6EC !important;
|
|
29
|
+
border-radius: 4px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:global(.ps__thumb-y) {
|
|
33
|
+
width: 4px !important;
|
|
34
|
+
right: 3px !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:global(.ps__thumb-x) {
|
|
38
|
+
height: 4px !important;
|
|
39
|
+
top: 3px !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:global(.ps .ps__rail-x):hover, :global(.ps .ps__rail-y):hover, :global(.ps .ps__rail-x):focus,
|
|
43
|
+
:global(.ps .ps__rail-y):focus, :global(.ps .ps__rail-x.ps--clicking), :global(.ps .ps__rail-y.ps--clicking) {
|
|
44
|
+
background-color: #fff;
|
|
45
|
+
opacity: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:global(.ps__rail-y:hover > .ps__thumb-y), :global(.ps__rail-y:focus > .ps__thumb-y), :global(.ps__rail-y.ps--clicking .ps__thumb-y) {
|
|
49
|
+
background-color: #E4E6EC;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:global(.ps__rail-x:hover > .ps__thumb-x), :global(.ps__rail-x:focus > .ps__thumb-x), :global(.ps__rail-x.ps--clicking .ps__thumb-x) {
|
|
53
|
+
background-color: #E4E6EC;
|
|
54
|
+
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
bottom: 24px;
|
|
3
3
|
right: 24px;
|
|
4
4
|
position: absolute;
|
|
5
|
-
transition: all 0.1s ease;
|
|
6
5
|
width: 241px;
|
|
7
6
|
height: 96px;
|
|
8
7
|
z-index: 10000000000000;
|
|
@@ -337,7 +336,6 @@
|
|
|
337
336
|
flex-direction: column;
|
|
338
337
|
align-items: center;
|
|
339
338
|
justify-content: center;
|
|
340
|
-
transition: all 1s ease;
|
|
341
339
|
}
|
|
342
340
|
|
|
343
341
|
.vitro-uploader:global(.vitro-dropzone-active) .vitro-drop-zone {
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Container style
|
|
3
|
+
*/
|
|
4
|
+
.ps {
|
|
5
|
+
overflow: hidden !important;
|
|
6
|
+
overflow-anchor: none;
|
|
7
|
+
-ms-overflow-style: none;
|
|
8
|
+
touch-action: auto;
|
|
9
|
+
-ms-touch-action: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* Scrollbar rail styles
|
|
14
|
+
*/
|
|
15
|
+
.ps__rail-x {
|
|
16
|
+
display: none;
|
|
17
|
+
opacity: 0;
|
|
18
|
+
transition: background-color .2s linear, opacity .2s linear;
|
|
19
|
+
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
|
20
|
+
height: 15px;
|
|
21
|
+
/* there must be 'bottom' or 'top' for ps__rail-x */
|
|
22
|
+
bottom: 0px;
|
|
23
|
+
/* please don't change 'position' */
|
|
24
|
+
position: absolute;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ps__rail-y {
|
|
28
|
+
display: none;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
transition: background-color .2s linear, opacity .2s linear;
|
|
31
|
+
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
|
32
|
+
width: 15px;
|
|
33
|
+
/* there must be 'right' or 'left' for ps__rail-y */
|
|
34
|
+
right: 0;
|
|
35
|
+
/* please don't change 'position' */
|
|
36
|
+
position: absolute;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ps--active-x > .ps__rail-x,
|
|
40
|
+
.ps--active-y > .ps__rail-y {
|
|
41
|
+
display: block;
|
|
42
|
+
background-color: transparent;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ps:hover > .ps__rail-x,
|
|
46
|
+
.ps:hover > .ps__rail-y,
|
|
47
|
+
.ps--focus > .ps__rail-x,
|
|
48
|
+
.ps--focus > .ps__rail-y,
|
|
49
|
+
.ps--scrolling-x > .ps__rail-x,
|
|
50
|
+
.ps--scrolling-y > .ps__rail-y {
|
|
51
|
+
opacity: 0.6;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ps .ps__rail-x:hover,
|
|
55
|
+
.ps .ps__rail-y:hover,
|
|
56
|
+
.ps .ps__rail-x:focus,
|
|
57
|
+
.ps .ps__rail-y:focus,
|
|
58
|
+
.ps .ps__rail-x.ps--clicking,
|
|
59
|
+
.ps .ps__rail-y.ps--clicking {
|
|
60
|
+
background-color: #eee;
|
|
61
|
+
opacity: 0.9;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/*
|
|
65
|
+
* Scrollbar thumb styles
|
|
66
|
+
*/
|
|
67
|
+
.ps__thumb-x {
|
|
68
|
+
background-color: #aaa;
|
|
69
|
+
border-radius: 6px;
|
|
70
|
+
transition: background-color .2s linear, height .2s ease-in-out;
|
|
71
|
+
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
|
|
72
|
+
height: 6px;
|
|
73
|
+
/* there must be 'bottom' for ps__thumb-x */
|
|
74
|
+
bottom: 2px;
|
|
75
|
+
/* please don't change 'position' */
|
|
76
|
+
position: absolute;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.ps__thumb-y {
|
|
80
|
+
background-color: #aaa;
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
transition: background-color .2s linear, width .2s ease-in-out;
|
|
83
|
+
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
|
|
84
|
+
width: 6px;
|
|
85
|
+
/* there must be 'right' for ps__thumb-y */
|
|
86
|
+
right: 2px;
|
|
87
|
+
/* please don't change 'position' */
|
|
88
|
+
position: absolute;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ps__rail-x:hover > .ps__thumb-x,
|
|
92
|
+
.ps__rail-x:focus > .ps__thumb-x,
|
|
93
|
+
.ps__rail-x.ps--clicking .ps__thumb-x {
|
|
94
|
+
background-color: #999;
|
|
95
|
+
height: 11px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ps__rail-y:hover > .ps__thumb-y,
|
|
99
|
+
.ps__rail-y:focus > .ps__thumb-y,
|
|
100
|
+
.ps__rail-y.ps--clicking .ps__thumb-y {
|
|
101
|
+
background-color: #999;
|
|
102
|
+
width: 11px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* MS supports */
|
|
106
|
+
@supports (-ms-overflow-style: none) {
|
|
107
|
+
.ps {
|
|
108
|
+
overflow: auto !important;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
113
|
+
.ps {
|
|
114
|
+
overflow: auto !important;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ScrollBarProps {
|
|
3
|
+
isHideScrollX?: boolean;
|
|
4
|
+
isFocusOnScroll?: boolean;
|
|
5
|
+
onInit?: (container: any) => any;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const ScrollBar: (props: ScrollBarProps) => JSX.Element;
|
|
9
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/kendo/kendo.css');
|
|
2
|
+
@import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
|
|
2
3
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jstree/style.min.css');
|
|
3
4
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.min.css');
|
|
4
5
|
@import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.structure.css');
|
|
@@ -48,11 +49,66 @@
|
|
|
48
49
|
align-items: flex-start;
|
|
49
50
|
}
|
|
50
51
|
}
|
|
52
|
+
._scrollbar_vitro-scrollbar-content_3HXSt5u {
|
|
53
|
+
height: 100%;
|
|
54
|
+
width: 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.ps {
|
|
58
|
+
position: relative;
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.ps__rail-y {
|
|
64
|
+
background-color: #fff !important;
|
|
65
|
+
width: 12px !important;
|
|
66
|
+
border-left: 1px solid #F7F9FC;
|
|
67
|
+
border-top: 1px solid #F7F9FC;
|
|
68
|
+
opacity: 1 !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.ps__rail-x {
|
|
72
|
+
background-color: #fff !important;
|
|
73
|
+
height: 12px !important;
|
|
74
|
+
border-top: 1px solid #F7F9FC;
|
|
75
|
+
opacity: 1 !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ps__thumb-x, .ps__thumb-y {
|
|
79
|
+
background-color: #E4E6EC !important;
|
|
80
|
+
border-radius: 4px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.ps__thumb-y {
|
|
84
|
+
width: 4px !important;
|
|
85
|
+
right: 3px !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ps__thumb-x {
|
|
89
|
+
height: 4px !important;
|
|
90
|
+
top: 3px !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus,
|
|
94
|
+
.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
|
|
95
|
+
background-color: #fff;
|
|
96
|
+
opacity: 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
|
|
100
|
+
background-color: #E4E6EC;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
|
|
104
|
+
background-color: #E4E6EC;
|
|
105
|
+
}
|
|
51
106
|
._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
|
|
52
107
|
display: flex;
|
|
53
108
|
flex-direction: column;
|
|
54
109
|
position: relative;
|
|
55
110
|
margin-bottom: 16px;
|
|
111
|
+
height: 24px;
|
|
56
112
|
}
|
|
57
113
|
|
|
58
114
|
._breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0 {
|
|
@@ -283,7 +339,7 @@
|
|
|
283
339
|
}
|
|
284
340
|
|
|
285
341
|
#TreeView {
|
|
286
|
-
height: 100
|
|
342
|
+
height: calc(100% - 36px);
|
|
287
343
|
flex: 1 1;
|
|
288
344
|
}
|
|
289
345
|
|
|
@@ -445,7 +501,6 @@
|
|
|
445
501
|
bottom: 24px;
|
|
446
502
|
right: 24px;
|
|
447
503
|
position: absolute;
|
|
448
|
-
transition: all 0.1s ease;
|
|
449
504
|
width: 241px;
|
|
450
505
|
height: 96px;
|
|
451
506
|
z-index: 10000000000000;
|
|
@@ -780,7 +835,6 @@
|
|
|
780
835
|
flex-direction: column;
|
|
781
836
|
align-items: center;
|
|
782
837
|
justify-content: center;
|
|
783
|
-
transition: all 1s ease;
|
|
784
838
|
}
|
|
785
839
|
|
|
786
840
|
._uploader_vitro-uploader_237vX7T.vitro-dropzone-active ._uploader_vitro-drop-zone_3w2dluc {
|
|
@@ -2905,9 +2959,13 @@
|
|
|
2905
2959
|
line-height: 21px;
|
|
2906
2960
|
}
|
|
2907
2961
|
._lookup-picker-selected-item_vitro-selected-item_hw-euth {
|
|
2908
|
-
display: inline;
|
|
2962
|
+
display: inline-block;
|
|
2963
|
+
width: -moz-fit-content;
|
|
2964
|
+
width: fit-content;
|
|
2909
2965
|
margin: 0 6px 0 0;
|
|
2910
2966
|
white-space: nowrap;
|
|
2967
|
+
overflow: hidden;
|
|
2968
|
+
text-overflow: ellipsis;
|
|
2911
2969
|
}
|
|
2912
2970
|
|
|
2913
2971
|
._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
|
|
@@ -2941,6 +2999,7 @@
|
|
|
2941
2999
|
}
|
|
2942
3000
|
|
|
2943
3001
|
._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u {
|
|
3002
|
+
width: 100%;
|
|
2944
3003
|
padding: 8px 12px;
|
|
2945
3004
|
cursor: pointer;
|
|
2946
3005
|
border-radius: 0px;
|
|
@@ -3098,7 +3157,7 @@
|
|
|
3098
3157
|
border: none;
|
|
3099
3158
|
background: transparent;
|
|
3100
3159
|
flex: 1 1;
|
|
3101
|
-
min-width:
|
|
3160
|
+
min-width: 30px;
|
|
3102
3161
|
color: #222D44;
|
|
3103
3162
|
font-size: 14px;
|
|
3104
3163
|
line-height: 16px;
|
package/dist/index.d.ts
CHANGED
|
@@ -60,6 +60,7 @@ import { Activity } from './controls/Activity/Activity';
|
|
|
60
60
|
import { ActivityItem, ActivityItemProps } from './controls/ActivityItem/ActivityItem';
|
|
61
61
|
import { Icon } from './controls/Icon/Icon';
|
|
62
62
|
import { EVENT } from './constants/Event';
|
|
63
|
+
import { ScrollBar } from './controls/ScrollBar/ScrollBar';
|
|
63
64
|
export { Breadcrumbs };
|
|
64
65
|
export { TopLevelMenu };
|
|
65
66
|
export { TreeView, TreeViewContext, TREE_VIEW };
|
|
@@ -94,3 +95,4 @@ export { Activity };
|
|
|
94
95
|
export { ActivityItem, ActivityItemProps };
|
|
95
96
|
export { Icon };
|
|
96
97
|
export { EVENT };
|
|
98
|
+
export { ScrollBar };
|