@uxland/primary-shell 5.2.1 → 5.3.0

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 (9) hide show
  1. package/dist/flow-D-0MTYCm.js +511 -0
  2. package/dist/flow-D-0MTYCm.js.map +1 -0
  3. package/dist/index.js +1962 -1376
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.umd.cjs +178 -138
  6. package/dist/index.umd.cjs.map +1 -1
  7. package/package.json +10 -9
  8. package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/styles.css +75 -70
  9. package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/template.ts +42 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxland/primary-shell",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
4
4
  "description": "Primaria Shell",
5
5
  "author": "UXLand <dev@uxland.es>",
6
6
  "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -25,29 +25,30 @@
25
25
  "url": "https://github.com/uxland/harmonix/issues"
26
26
  },
27
27
  "dependencies": {
28
+ "@lit-labs/virtualizer": "^2.1.0",
28
29
  "@uxland/harmonix": "^1.0.5",
29
30
  "@uxland/harmonix-adapters": "^1.0.1"
30
31
  },
31
32
  "devDependencies": {
32
- "@reduxjs/toolkit": "^2.6.1",
33
- "axios": "^1.7.2",
34
- "date-fns": "^3.6.0",
35
- "ramda": "^0.30.1",
36
33
  "@primaria/plugins-core": "^1.0.14",
34
+ "@reduxjs/toolkit": "^2.6.1",
35
+ "@salut/design-system-salut": "../../design-system-salut-2.4.0.tgz",
36
+ "@types/react": "^19.0.12",
37
37
  "@uxland/lit-utilities": "^1.0.0",
38
38
  "@uxland/localization": "^1.0.3",
39
39
  "@uxland/regions": "^1.0.0",
40
40
  "@uxland/utilities": "^1.0.5",
41
+ "axios": "^1.7.2",
41
42
  "axios-mock-adapter": "^2.0.0",
43
+ "date-fns": "^3.6.0",
42
44
  "inversify": "^6.0.2",
43
- "react": "^19.0.0",
44
- "react-dom": "^19.0.0",
45
- "@types/react": "^19.0.12",
46
45
  "inversify-inject-decorators": "^3.1.0",
47
- "@salut/design-system-salut": "../../design-system-salut-2.4.0.tgz",
48
46
  "jwt-decode": "^4.0.0",
49
47
  "lit": "^3.1.0",
50
48
  "mediatr-ts": "^1.2.1",
49
+ "ramda": "^0.30.1",
50
+ "react": "^19.0.0",
51
+ "react-dom": "^19.0.0",
51
52
  "reflect-metadata": "^0.2.2",
52
53
  "tslib": "^2.3.0",
53
54
  "uxl-quill": "^1.0.1",
package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/styles.css CHANGED
@@ -3,92 +3,97 @@
3
3
  height: 100%;
4
4
  }
5
5
 
6
- .container {
7
- display: flex;
8
- flex-direction: column;
9
- gap: 16px;
6
+ .virtualizer {
7
+ height: 100%;
10
8
  padding-inline: 16px;
11
- padding-top: 16px;
9
+ }
10
+
11
+ .container {
12
12
  min-height: 1px;
13
13
  height: 100%;
14
- overflow-y: auto;
15
- position: relative;
16
14
 
17
- .visit {
15
+ }
16
+
17
+ .visit:first-child{
18
+ margin-top: var(--dss-spacing-md)
19
+ }
20
+
21
+ .visit {
22
+ width: calc(100% - var(--dss-spacing-md) - var(--dss-spacing-md));
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: var(--dss-spacing-md);
26
+ background-color: white;
27
+ border-radius: var(--dss-radius-sm);
28
+ padding: var(--dss-spacing-sm);
29
+ margin-bottom: var(--dss-spacing-md);
30
+
31
+ .visit__header {
18
32
  display: flex;
19
- flex-direction: column;
33
+ flex-direction: row;
34
+ align-items: center;
20
35
  gap: 16px;
21
- background-color: white;
22
- border-radius: var(--dss-radius-sm);
23
- padding: var(--dss-spacing-sm);
24
-
25
- .visit__header {
36
+ .title {
37
+ flex: 1;
38
+ font-size: 14px;
39
+ line-height: 24px;
26
40
  display: flex;
27
41
  flex-direction: row;
28
- align-items: center;
29
- gap: 16px;
30
- .title {
31
- flex: 1;
32
- font-size: 14px;
33
- line-height: 24px;
34
- display: flex;
35
- flex-direction: row;
36
- gap: 12px;
37
- color: var(--color-neutral-800);
38
- }
39
- .title-date {
40
- font-weight: 700;
41
- }
42
- .title-description {
43
- font-weight: 600;
44
- display: flex;
45
- flex-direction: row;
46
- gap: 4px;
47
- }
48
- .highlight {
49
- background-color: yellow;
50
- font-weight: bold;
51
- }
42
+ gap: 12px;
43
+ color: var(--color-neutral-800);
44
+ }
45
+ .title-date {
46
+ font-weight: 700;
52
47
  }
53
- .visit__items {
48
+ .title-description {
49
+ font-weight: 600;
54
50
  display: flex;
55
- flex-direction: column;
56
- gap: 16px;
57
- .item {
58
- border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
59
- &:last-of-type {
60
- border: none;
61
- }
51
+ flex-direction: row;
52
+ gap: 4px;
53
+ }
54
+ .highlight {
55
+ background-color: yellow;
56
+ font-weight: bold;
57
+ }
58
+ }
59
+ .visit__items {
60
+ display: flex;
61
+ flex-direction: column;
62
+ gap: 16px;
63
+ .item {
64
+ border-bottom: var(--dss-border-width-sm) solid va(--color-neutral-200);
65
+ &:last-of-type {
66
+ border: none;
62
67
  }
68
+ }
69
+ }
70
+ .diagnostics {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: 16px;
74
+ .diagnostics__header {
75
+ display: flex;
76
+ flex-direction: row;
77
+ align-items: center;
78
+ gap: 16px;
63
79
  }
64
- .diagnostics {
80
+ .diagnostics__items {
65
81
  display: flex;
66
82
  flex-direction: column;
67
- gap: 16px;
68
- .diagnostics__header {
69
- display: flex;
70
- flex-direction: row;
71
- align-items: center;
72
- gap: 16px;
73
- }
74
- .diagnostics__items {
75
- display: flex;
76
- flex-direction: column;
77
-
78
- .item {
79
- border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
80
- &:last-of-type {
81
- border: none;
82
- }
83
+ .item {
84
+ border-bottom: var(--dss-border-width-sm) solid va(--color-neutral-200);
85
+ &:last-of-type {
86
+ border: none;
83
87
  }
84
88
  }
85
89
  }
86
90
  }
87
- .feedback {
88
- width: 100%;
89
- height: 100%;
90
- display: flex;
91
- align-items: center;
92
- justify-content: center;
93
- }
94
91
  }
92
+ .feedback {
93
+ width: 100%;
94
+ height: 100%;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ }
99
+
package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/template.ts CHANGED
@@ -13,50 +13,60 @@ import {
13
13
  IActivityHistorySubGroup,
14
14
  } from "../../../domain/model";
15
15
  import { translate } from "../../../../localization";
16
+ import { virtualize } from "@lit-labs/virtualizer/virtualize.js";
16
17
 
17
18
  export const template = (props: ActivityHistoryTimeline) => {
18
19
  if (!props._hasUpdatedOnce) {
19
20
  return html`<div class="container"></div>`;
20
21
  }
21
- return html`<div class="container">
22
+ return html`
23
+ <div class="container">
22
24
  ${
23
- props.historyGroups && props.historyGroups.length > 0
24
- ? repeat(props.historyGroups, (itemGroup: IActivityHistoryGroup) => {
25
- return html`
26
- <div class="visit" data-date=${ifDefined(itemGroup.items[0]?.date || itemGroup.subGroups[0]?.items[0]?.date)}>
27
- ${visitHeaderTemplate(props, itemGroup.items[0] || itemGroup.subGroups[0]?.items[0])}
28
- <div class="visit__items">
29
- ${repeat(
30
- itemGroup.items,
31
- (item) => item.id,
32
- (item: IActivityHistoryItemWithComponent) =>
33
- html`<div class="item">${item.component}</div> `,
34
- )}
35
- ${repeat(
36
- itemGroup.subGroups,
37
- (subGroup: IActivityHistorySubGroup) =>
38
- html`
39
- <div class="diagnostics">
40
- ${diagnosticHeaderTemplate(subGroup.items[0])}
41
- <div class="diagnostics__items">${repeat(
42
- subGroup.items,
43
- (item) => item.id,
44
- (item: IActivityHistoryItemWithComponent) =>
45
- html`<div class="item">${item?.component}</div> `,
46
- )}</div>
47
- </div>
48
- `,
49
- )}
50
- </div>
25
+ props.historyGroups?.length > 0
26
+ ? html`
27
+ <div class="virtualizer">
28
+ ${virtualize({
29
+ items: props.historyGroups,
30
+ renderItem: (itemGroup: IActivityHistoryGroup) => html`
31
+ <div class="visit" data-date=${ifDefined(itemGroup.items[0]?.date || itemGroup.subGroups[0]?.items[0]?.date)}>
32
+ ${visitHeaderTemplate(props, itemGroup.items[0] || itemGroup.subGroups[0]?.items[0])}
33
+ <div class="visit__items">
34
+ ${repeat(
35
+ itemGroup.items,
36
+ (item) => item.id,
37
+ (item: IActivityHistoryItemWithComponent) =>
38
+ html`<div class="item">${item.component}</div> `,
39
+ )}
40
+ ${repeat(
41
+ itemGroup.subGroups,
42
+ (subGroup: IActivityHistorySubGroup) => html`
43
+ <div class="diagnostics">
44
+ ${diagnosticHeaderTemplate(subGroup.items[0])}
45
+ <div class="diagnostics__items">
46
+ ${repeat(
47
+ subGroup.items,
48
+ (item) => item.id,
49
+ (item: IActivityHistoryItemWithComponent) =>
50
+ html`<div class="item">${item?.component}</div>`,
51
+ )}
52
+ </div>
53
+ </div>
54
+ `,
55
+ )}
56
+ </div>
57
+ </div>
58
+ `,
59
+ scroller: true,
60
+ })}
51
61
  </div>
52
- `;
53
- })
62
+ `
54
63
  : !props.isAnyCollectionLoadingWithoutAnyLoaded &&
55
64
  !props.isSomeCollectionLoadedAndOtherLoading
56
65
  ? html`<dss-user-feedback class="feedback" imagesrc=${notFound} title=${translate("noResults")}></dss-user-feedback>`
57
66
  : nothing
58
67
  }
59
- </div> `;
68
+ </div>
69
+ `;
60
70
  };
61
71
 
62
72
  const visitHeaderTemplate = (