diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json index 5d4c67f98d..1a5937e735 100644 --- a/packages/client/hmi-client/package.json +++ b/packages/client/hmi-client/package.json @@ -34,6 +34,8 @@ "@lumino/commands": "2.1.3", "@lumino/coreutils": "2.1.2", "@lumino/widgets": "2.1.0", + "@primevue/core": "4.0.3", + "@primevue/themes": "4.0.3", "@uncharted.software/design-tokens": "1.1.0", "@vue/runtime-dom": "3.4.38", "@vueup/vue-quill": "1.2.0", @@ -60,9 +62,8 @@ "pinia": "2.1.7", "pixi-viewport": "4.37.0", "pixi.js": "7.0.5", - "primeflex": "3.3.1", "primeicons": "7.0.0", - "primevue": "3.53.0", + "primevue": "4.0.3", "pyodide": "0.25.1", "sass": "1.56.1", "uuid": "9.0.1", diff --git a/packages/client/hmi-client/src/assets/css/facets-overrides.scss b/packages/client/hmi-client/src/assets/css/facets-overrides.scss deleted file mode 100644 index 81ee11c924..0000000000 --- a/packages/client/hmi-client/src/assets/css/facets-overrides.scss +++ /dev/null @@ -1,63 +0,0 @@ -facet-terms { - // Hide the rectangle that appears to the left of an item on hover - --facet-terms-tick-color: transparent; - - // Faint background that includes the label and the bar - --facet-terms-selected-background: var(--surface-highlight); - - // Bar 0 is the darker, "front", bar. Bar 1 is the lighter "behind" bar. - - // No item in the group is selected - // No item in the group is being hovered - --facet-terms-bar-0-normal: var(--primary-color); - - // We should give the appearance of just green bars on a white background - --facet-terms-bar-1-normal: var(--surface-section); - --facet-terms-bar-1-normal-contrast-hover: var(--surface-hover); - --facet-terms-bar-1-normal-contrast: var(--surface-section); - --facet-terms-bar-1-selected: var(--primary-color-lighter); - - // Another item in the group is being hovered - --facet-terms-bar-0-normal-contrast: var(--primary-color); - // This item is being hovered - --facet-terms-bar-0-normal-contrast-hover: var(--primary-color); - - // This item is selected - // No item in the group is being hovered - --facet-terms-bar-0-selected: var(--primary-color); - // Another item in the group is being hovered - --facet-terms-bar-0-selected-contrast: var(--primary-color); - // This item is being hovered - --facet-terms-bar-0-selected-contrast-hover: var(--primary-color); - - // Another item in the group is selected - // This item is hovered - --facet-terms-bar-0-muted-contrast-hover: var(--primary-color); - --facet-terms-bar-1-muted-contrast-hover: var(--primary-color); -} - -facet-bars { - // Hide the rectangle that appears to the left of an item on hover - --facet-bars-tick-color: transparent; - --facet-bars-0-selected: var(--primary-color); - --facet-bars-0-selected-contrast: var(--primary-color-light); - --facet-bars-0-selected-contrast-hover: var(--primary-color); - --facet-bars-1-unselected-contrast-hover: var(--primary-color-lighter); - --facet-bars-0-unselected-contrast-hover:var(--primary-color); - :deep(.facet-bars-selection-computed) { - border-color: var(--primary-color); - background-color: var(--surface-highlight); - } - :deep(.facet-bars-selection-handle-left) { - border-right-color: var(--primary-color); - } - :deep(.facet-bars-selection-handle-right) { - border-left-color: var(--primary-color); - } - :deep(.facet-bars-selection-clear-button) { - background-color: var(--primary-color); - } - :deep(.facet-bars-value-background) { - background-color: var(--surface-highlight); - } -} diff --git a/packages/client/hmi-client/src/assets/css/style.scss b/packages/client/hmi-client/src/assets/css/style.scss index 4ee2c86ff4..12df4d714a 100644 --- a/packages/client/hmi-client/src/assets/css/style.scss +++ b/packages/client/hmi-client/src/assets/css/style.scss @@ -189,7 +189,7 @@ border: 1px solid var(--surface-border); border-radius: var(--border-radius-medium); } - + /* Markdown style overrides */ .markdown-text { & h1 { diff --git a/packages/client/hmi-client/src/main.ts b/packages/client/hmi-client/src/main.ts index f677420941..40646aafb2 100644 --- a/packages/client/hmi-client/src/main.ts +++ b/packages/client/hmi-client/src/main.ts @@ -3,6 +3,7 @@ import { RouteLocationNormalized } from 'vue-router'; import { createPinia } from 'pinia'; import ConfirmationService from 'primevue/confirmationservice'; import PrimeVue from 'primevue/config'; +import Theme from '@/theme'; import ToastService from 'primevue/toastservice'; import Tooltip from 'primevue/tooltip'; import VueFeather from 'vue-feather'; @@ -36,11 +37,12 @@ await clientEventServiceInit(); // This is to prevent the Keycloak from redirecting to the hash value after authentication. window.location.hash = ''; +// Set up the Vue application with the plugins and components app .use(router) .use(ToastService) .use(ConfirmationService) - .use(PrimeVue, { ripple: true }) + .use(PrimeVue, Theme) .use(VueKatex) .directive('tooltip', Tooltip) .directive('focus', { diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue index 58ea4eaf30..2ac2d6fe9d 100644 --- a/packages/client/hmi-client/src/page/Home.vue +++ b/packages/client/hmi-client/src/page/Home.vue @@ -179,7 +179,7 @@ import { Project, ClientEventType, ProgressState } from '@/types/Types'; import { Vue3Lottie } from 'vue3-lottie'; import EmptySeed from '@/assets/images/lottie-empty-seed.json'; import TeraInputText from '@/components/widgets/tera-input-text.vue'; -import { FilterService } from 'primevue/api'; +import { FilterService } from '@primevue/core/api'; import { useNotificationManager } from '@/composables/notificationManager'; import teraUploadProjectModal from '@/components/project/tera-upload-project-modal.vue'; diff --git a/packages/client/hmi-client/src/theme.ts b/packages/client/hmi-client/src/theme.ts new file mode 100644 index 0000000000..1ccddbc421 --- /dev/null +++ b/packages/client/hmi-client/src/theme.ts @@ -0,0 +1,13 @@ +import Lara from '@primevue/themes/lara'; + +export default { + theme: { + preset: Lara, + options: { + cssLayer: { + name: 'primevue', + order: 'tailwind-base, primevue, tailwind-utilities' + } + } + } +}; diff --git a/yarn.lock b/yarn.lock index 6e6be31537..1646ed04bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2734,6 +2734,53 @@ __metadata: languageName: node linkType: hard +"@primeuix/styled@npm:^0.0.5": + version: 0.0.5 + resolution: "@primeuix/styled@npm:0.0.5" + dependencies: + "@primeuix/utils": "npm:^0.0.5" + checksum: 10/073c0a2af07eb716eedccb157a8f43dd123de6d3a4b33d49d13bf8d9181b028d8c4253a1bfb93a08908503420da1194e6464b4a5a9a8131fe4059350936ebd99 + languageName: node + linkType: hard + +"@primeuix/utils@npm:^0.0.5": + version: 0.0.5 + resolution: "@primeuix/utils@npm:0.0.5" + checksum: 10/0d55cd7f2f05112bbe995165f41f76ad188a19445bc93ce17ae037b3324b9992dcc2a2dd754977431bbc50c58daafe128c791a485f016ca09b0a1b6ef2f9abc4 + languageName: node + linkType: hard + +"@primevue/core@npm:4.0.3": + version: 4.0.3 + resolution: "@primevue/core@npm:4.0.3" + dependencies: + "@primeuix/styled": "npm:^0.0.5" + "@primeuix/utils": "npm:^0.0.5" + peerDependencies: + vue: ^3.0.0 + checksum: 10/c378103d113ca6e0e185023f7f2408e81c22d41451939cd839a385a9028edeb1fe9a1bd7ce5a232a8cd959cfaa5a585e8279365c626e05b32f701b9452ac6ae6 + languageName: node + linkType: hard + +"@primevue/icons@npm:4.0.3": + version: 4.0.3 + resolution: "@primevue/icons@npm:4.0.3" + dependencies: + "@primeuix/utils": "npm:^0.0.5" + "@primevue/core": "npm:4.0.3" + checksum: 10/3a94842ed7a5955b25ff7fca6525451c69321ec9dcecfd9bac33c8d5c431c72ab1dd1dd038a9ad98393f7fba203f45710cda5302649fc5989283602e4d6022c0 + languageName: node + linkType: hard + +"@primevue/themes@npm:4.0.3": + version: 4.0.3 + resolution: "@primevue/themes@npm:4.0.3" + dependencies: + "@primeuix/styled": "npm:^0.0.5" + checksum: 10/141973e0f91c33bd4d3a8be983acac4377b0dd0515f6ea6471cba30438d98517a39c5e454996d915c9e3cda4d49f3d6d8f83c7e9ea9ade8e3e3660d3b0a1025c + languageName: node + linkType: hard + "@rjsf/core@npm:^3.1.0": version: 3.2.1 resolution: "@rjsf/core@npm:3.2.1" @@ -8843,6 +8890,8 @@ __metadata: "@lumino/widgets": "npm:2.1.0" "@playwright/experimental-ct-vue": "npm:1.31.2" "@playwright/test": "npm:1.31.2" + "@primevue/core": "npm:4.0.3" + "@primevue/themes": "npm:4.0.3" "@rushstack/eslint-patch": "npm:1.10.4" "@types/d3": "npm:7.4.3" "@types/lodash": "npm:4.17.10" @@ -8877,9 +8926,8 @@ __metadata: pinia: "npm:2.1.7" pixi-viewport: "npm:4.37.0" pixi.js: "npm:7.0.5" - primeflex: "npm:3.3.1" primeicons: "npm:7.0.0" - primevue: "npm:3.53.0" + primevue: "npm:4.0.3" pyodide: "npm:0.25.1" sass: "npm:1.56.1" typescript: "npm:5.4.5" @@ -12477,13 +12525,6 @@ __metadata: languageName: node linkType: hard -"primeflex@npm:3.3.1": - version: 3.3.1 - resolution: "primeflex@npm:3.3.1" - checksum: 10/5f35983c3040c7eb0a3b4b823b685f7b64e4bfc3ef70047f1f547a869c46df939680c368fa0b29e5e138c4d35360b67211013c2c80dbfa661f3a138195ca8182 - languageName: node - linkType: hard - "primeicons@npm:7.0.0": version: 7.0.0 resolution: "primeicons@npm:7.0.0" @@ -12491,12 +12532,15 @@ __metadata: languageName: node linkType: hard -"primevue@npm:3.53.0": - version: 3.53.0 - resolution: "primevue@npm:3.53.0" - peerDependencies: - vue: ^3.0.0 - checksum: 10/a99e556ac7f2302286fc28d3c9b76f84dc7c69b70516a3e15adf47a2a63ead4dd9a0c893df4c9ab29a1502334e68784c467af0799082f0f8ba97bff8723060d8 +"primevue@npm:4.0.3": + version: 4.0.3 + resolution: "primevue@npm:4.0.3" + dependencies: + "@primeuix/styled": "npm:^0.0.5" + "@primeuix/utils": "npm:^0.0.5" + "@primevue/core": "npm:4.0.3" + "@primevue/icons": "npm:4.0.3" + checksum: 10/58769782c308a06b42d0a08560835d96888f6977202d820621e8c28ccf6976bf237fd979d0b137558a0bd47794de02e5d47a8067b9049dc3b4bf7bd294cd8072 languageName: node linkType: hard