@vitrosoftware/common-ui-ts 1.1.69 → 1.1.71

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.
Files changed (12) hide show
  1. package/css/common.css +4 -0
  2. package/css/std/controls/criterion/criterion.css +5 -3
  3. package/css/std/controls/route-item/route-item.css +113 -0
  4. package/css/std/controls/search/search.css +10 -1
  5. package/dist/controls/Criterion/ConditionSelect.d.ts +2 -3
  6. package/dist/controls/RouteItem/RouteItem.d.ts +15 -0
  7. package/dist/controls/Search/Search.d.ts +2 -1
  8. package/dist/index.css +133 -4
  9. package/dist/index.d.ts +2 -0
  10. package/dist/index.js +221 -75
  11. package/dist/index.js.map +1 -1
  12. package/package.json +1 -1
package/css/common.css CHANGED
@@ -9,6 +9,10 @@
9
9
  @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
10
10
  @import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
11
11
 
12
+ html, body {
13
+ overscroll-behavior-x: none;
14
+ }
15
+
12
16
  :global(.vitro-opacity-low) {
13
17
  opacity: .3;
14
18
  }
package/css/std/controls/criterion/criterion.css CHANGED
@@ -160,11 +160,13 @@
160
160
  width: 16px;
161
161
  }
162
162
 
163
- .vitro-condition-list {
163
+ .vitro-condition-list-container,
164
+ .vitro-operator-list-container {
164
165
  position: absolute;
165
166
  z-index: 1000000;
166
- top: 14px;
167
- left: 0;
167
+ }
168
+
169
+ .vitro-condition-list {
168
170
  width: fit-content;
169
171
  min-width: 270px;
170
172
  border-radius: 4px;
package/css/std/controls/route-item/route-item.css ADDED
@@ -0,0 +1,113 @@
1
+ .vitro-route-item {
2
+ display: flex;
3
+ width: 100%;
4
+ margin-top: 16px;
5
+ }
6
+
7
+ .vitro-route-item:nth-child(2) {
8
+ margin-top: 0;
9
+ }
10
+
11
+ .vitro-route-item-content {
12
+ width: 100%;
13
+ }
14
+
15
+ .vitro-button-collapse,
16
+ .vitro-button-expand,
17
+ .vitro-button-hide-comment,
18
+ .vitro-button-show-comment {
19
+ width: 24px;
20
+ height: 24px;
21
+ min-width: 24px;
22
+ background-position: center;
23
+ background-size: 100%;
24
+ border: none;
25
+ background-color: transparent;
26
+ }
27
+
28
+ .vitro-button-collapse,
29
+ .vitro-button-expand {
30
+ margin-right: 12px;
31
+ }
32
+
33
+ .vitro-button-collapse {
34
+ /* collapse-bottom.svg URL-encoder for SVG */
35
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_119831)'%3E%3Cpath id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
36
+ }
37
+
38
+ .vitro-button-expand {
39
+ /* collapse-right.svg URL-encoder for SVG */
40
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_118517)'%3E%3Cpath id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
41
+ }
42
+
43
+ .vitro-button-hide-comment {
44
+ /* comment-hidden.svg URL-encoder for SVG */
45
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 2L2 22' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
46
+ }
47
+
48
+ .vitro-button-show-comment {
49
+ /* comment.svg URL-encoder for SVG */
50
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
51
+ }
52
+
53
+ .vitro-avatar {
54
+ margin-right: 8px;
55
+ }
56
+
57
+ .vitro-date {
58
+ color: #222D44;
59
+ font-size: 14px;
60
+ font-family: 'InterMedium';
61
+ margin-left: 8px;
62
+ }
63
+
64
+ .vitro-route-item-header {
65
+ width: 100%;
66
+ justify-content: space-between;
67
+ display: flex;
68
+ margin-bottom: 4px;
69
+ }
70
+
71
+ .vitro-route-item-header > div,
72
+ .vitro-route-item-header > div > div {
73
+ display: flex;
74
+ align-items: center;
75
+ }
76
+
77
+ .vitro-route-item-header > div:last-child > div {
78
+ border-radius: 4px;
79
+ background: #F7F9FC;
80
+ padding: 4px 8px;
81
+ margin-left: 12px;
82
+ }
83
+
84
+ .vitro-route-item-header > div:last-child div a,
85
+ .vitro-route-item-header > div:last-child div a:hover,
86
+ .vitro-route-item-header > div:last-child div a:visited {
87
+ text-decoration: none;
88
+ color: #326AD6;
89
+ }
90
+
91
+ .vitro-flex {
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .vitro-comment {
98
+ padding: 4px 8px;
99
+ margin-top: 4px;
100
+ border-radius: 4px;
101
+ background: #F7F9FC;
102
+ color: #222D44;
103
+ font-size: 14px;
104
+ width: 100%;
105
+ }
106
+
107
+ .vitro-status-color {
108
+ width: 8px;
109
+ height: 8px;
110
+ min-width: 8px;
111
+ margin-right: 8px;
112
+ border-radius: 50%;
113
+ }
package/css/std/controls/search/search.css CHANGED
@@ -27,12 +27,21 @@
27
27
  }
28
28
 
29
29
  .vitro-filter :global(.ps) {
30
- overflow: visible !important;
30
+ max-height: 300px;
31
+ }
32
+
33
+ .vitro-filter :global(.ps.ps--active-y) {
34
+ padding-right: 14px;
35
+ }
36
+
37
+ .vitro-filter :global(.vitro-block:last-child) > div > div {
38
+ margin-bottom: 0;
31
39
  }
32
40
 
33
41
  .vitro-add-field {
34
42
  position: relative;
35
43
  margin-bottom: 16px;
44
+ margin-top: 18px;
36
45
  }
37
46
 
38
47
  .vitro-add-field-button,
package/dist/controls/Criterion/ConditionSelect.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { Condition } from './Condition';
3
3
  interface ConditionSelectProps {
4
4
  itemList: Condition[];
5
5
  defaultValue?: Condition;
6
6
  onSelect: (condition: any) => any;
7
- translateX: number;
8
7
  }
9
- export declare const ConditionSelect: (props: ConditionSelectProps) => JSX.Element;
8
+ export declare const ConditionSelect: React.ForwardRefExoticComponent<ConditionSelectProps & React.RefAttributes<unknown>>;
10
9
  export {};
package/dist/controls/RouteItem/RouteItem.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ interface RouteItemProps {
3
+ id: string;
4
+ userName: string;
5
+ userImage?: string;
6
+ date: string;
7
+ status: string;
8
+ statusColor?: string;
9
+ name: string;
10
+ comment?: string;
11
+ itemUrl?: string;
12
+ children?: React.ReactNode;
13
+ }
14
+ export declare const RouteItem: (props: RouteItemProps) => JSX.Element;
15
+ export {};
package/dist/controls/Search/Search.d.ts CHANGED
@@ -5,6 +5,7 @@ import { Operator } from '../Criterion/Operator';
5
5
  interface SearchProps {
6
6
  fieldList: any[];
7
7
  visibleFieldList?: any[];
8
+ searchCriterionList?: SearchCriterion[];
8
9
  onFilterChange?: (searchCriterionList: SearchCriterion[]) => any;
9
10
  onSubmit: (searchCriterionList: SearchCriterion[]) => any;
10
11
  onCancel: () => any;
@@ -22,7 +23,7 @@ interface SearchProps {
22
23
  labelAddField: string;
23
24
  defaultSearchFieldName: string;
24
25
  inputPlaceholder?: string;
25
- maxFieldCount: number;
26
+ maxFieldCount?: number;
26
27
  }
27
28
  export declare const Search: (props: SearchProps) => JSX.Element;
28
29
  export {};
package/dist/index.css CHANGED
@@ -9,6 +9,10 @@
9
9
  @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
10
10
  @import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
11
11
 
12
+ html, body {
13
+ overscroll-behavior-x: none;
14
+ }
15
+
12
16
  .vitro-opacity-low {
13
17
  opacity: .3;
14
18
  }
@@ -5029,11 +5033,13 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
5029
5033
  width: 16px;
5030
5034
  }
5031
5035
 
5032
- ._criterion_vitro-condition-list_10UIxJI {
5036
+ ._criterion_vitro-condition-list-container_ERfumwB,
5037
+ ._criterion_vitro-operator-list-container_RgT0R_Z {
5033
5038
  position: absolute;
5034
5039
  z-index: 1000000;
5035
- top: 14px;
5036
- left: 0;
5040
+ }
5041
+
5042
+ ._criterion_vitro-condition-list_10UIxJI {
5037
5043
  width: -moz-fit-content;
5038
5044
  width: fit-content;
5039
5045
  min-width: 270px;
@@ -5270,12 +5276,21 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
5270
5276
  }
5271
5277
 
5272
5278
  ._search_vitro-filter_2n-Y-mS .ps {
5273
- overflow: visible !important;
5279
+ max-height: 300px;
5280
+ }
5281
+
5282
+ ._search_vitro-filter_2n-Y-mS .ps.ps--active-y {
5283
+ padding-right: 14px;
5284
+ }
5285
+
5286
+ ._search_vitro-filter_2n-Y-mS .vitro-block:last-child > div > div {
5287
+ margin-bottom: 0;
5274
5288
  }
5275
5289
 
5276
5290
  ._search_vitro-add-field_2hHt1Z2 {
5277
5291
  position: relative;
5278
5292
  margin-bottom: 16px;
5293
+ margin-top: 18px;
5279
5294
  }
5280
5295
 
5281
5296
  ._search_vitro-add-field-button_30hdXYn,
@@ -5363,3 +5378,117 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
5363
5378
  ._checkbox-list_vitro-checkbox-list_1iZSkkv span {
5364
5379
  display: block;
5365
5380
  }
5381
+
5382
+ ._route-item_vitro-route-item_bBCgBZG {
5383
+ display: flex;
5384
+ width: 100%;
5385
+ margin-top: 16px;
5386
+ }
5387
+
5388
+ ._route-item_vitro-route-item_bBCgBZG:nth-child(2) {
5389
+ margin-top: 0;
5390
+ }
5391
+
5392
+ ._route-item_vitro-route-item-content_2CcLogk {
5393
+ width: 100%;
5394
+ }
5395
+
5396
+ ._route-item_vitro-button-collapse_1kVB5Vo,
5397
+ ._route-item_vitro-button-expand_3IuABa1,
5398
+ ._route-item_vitro-button-hide-comment_2CiY-Ch,
5399
+ ._route-item_vitro-button-show-comment_DJt2SLC {
5400
+ width: 24px;
5401
+ height: 24px;
5402
+ min-width: 24px;
5403
+ background-position: center;
5404
+ background-size: 100%;
5405
+ border: none;
5406
+ background-color: transparent;
5407
+ }
5408
+
5409
+ ._route-item_vitro-button-collapse_1kVB5Vo,
5410
+ ._route-item_vitro-button-expand_3IuABa1 {
5411
+ margin-right: 12px;
5412
+ }
5413
+
5414
+ ._route-item_vitro-button-collapse_1kVB5Vo {
5415
+ /* collapse-bottom.svg URL-encoder for SVG */
5416
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_119831)'%3E%3Cpath id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
5417
+ }
5418
+
5419
+ ._route-item_vitro-button-expand_3IuABa1 {
5420
+ /* collapse-right.svg URL-encoder for SVG */
5421
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_118517)'%3E%3Cpath id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
5422
+ }
5423
+
5424
+ ._route-item_vitro-button-hide-comment_2CiY-Ch {
5425
+ /* comment-hidden.svg URL-encoder for SVG */
5426
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 2L2 22' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
5427
+ }
5428
+
5429
+ ._route-item_vitro-button-show-comment_DJt2SLC {
5430
+ /* comment.svg URL-encoder for SVG */
5431
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
5432
+ }
5433
+
5434
+ ._route-item_vitro-avatar_3Dypnmz {
5435
+ margin-right: 8px;
5436
+ }
5437
+
5438
+ ._route-item_vitro-date_3ojnKSb {
5439
+ color: #222D44;
5440
+ font-size: 14px;
5441
+ font-family: 'InterMedium';
5442
+ margin-left: 8px;
5443
+ }
5444
+
5445
+ ._route-item_vitro-route-item-header_y69bLwZ {
5446
+ width: 100%;
5447
+ justify-content: space-between;
5448
+ display: flex;
5449
+ margin-bottom: 4px;
5450
+ }
5451
+
5452
+ ._route-item_vitro-route-item-header_y69bLwZ > div,
5453
+ ._route-item_vitro-route-item-header_y69bLwZ > div > div {
5454
+ display: flex;
5455
+ align-items: center;
5456
+ }
5457
+
5458
+ ._route-item_vitro-route-item-header_y69bLwZ > div:last-child > div {
5459
+ border-radius: 4px;
5460
+ background: #F7F9FC;
5461
+ padding: 4px 8px;
5462
+ margin-left: 12px;
5463
+ }
5464
+
5465
+ ._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a,
5466
+ ._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a:hover,
5467
+ ._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a:visited {
5468
+ text-decoration: none;
5469
+ color: #326AD6;
5470
+ }
5471
+
5472
+ ._route-item_vitro-flex_3ebkqZ9 {
5473
+ display: flex;
5474
+ justify-content: space-between;
5475
+ align-items: center;
5476
+ }
5477
+
5478
+ ._route-item_vitro-comment_2K7RwrZ {
5479
+ padding: 4px 8px;
5480
+ margin-top: 4px;
5481
+ border-radius: 4px;
5482
+ background: #F7F9FC;
5483
+ color: #222D44;
5484
+ font-size: 14px;
5485
+ width: 100%;
5486
+ }
5487
+
5488
+ ._route-item_vitro-status-color_VgXzXKD {
5489
+ width: 8px;
5490
+ height: 8px;
5491
+ min-width: 8px;
5492
+ margin-right: 8px;
5493
+ border-radius: 50%;
5494
+ }
package/dist/index.d.ts CHANGED
@@ -74,6 +74,7 @@ import { Search } from './controls/Search/Search';
74
74
  import { FieldIterator } from './controls/FieldIterator/FieldIterator';
75
75
  import { Tooltip } from './controls/Tooltip/Tooltip';
76
76
  import * as TOOLTIP from './controls/Tooltip/TooltipConstants';
77
+ import { RouteItem } from './controls/RouteItem/RouteItem';
77
78
  export { Breadcrumbs };
78
79
  export { TopLevelMenu };
79
80
  export { TreeView, TreeViewContext, TREE_VIEW, TreeViewProps };
@@ -118,3 +119,4 @@ export { FieldIterator };
118
119
  export { Tooltip, TOOLTIP };
119
120
  export { CONTROL };
120
121
  export { PasswordInput };
122
+ export { RouteItem };