10838 cbyrd upgrade primevue

arches/app/media/js/utils/create-vue-application.js

@@ -6,39 +6,54 @@ import FocusTrap from 'primevue/focustrap';
 import StyleClass from 'primevue/styleclass';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
-import arches from 'arches';
+
+import Aura from 'primevue/themes/aura';
 
 import { createApp } from 'vue';
 import { createGettext } from "vue3-gettext";
 
-export default async function createVueApplication(vueComponent){
+import arches from 'arches';
+
+const DEFAULT_THEME = {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+};
+
+export default async function createVueApplication(vueComponent, themeConfiguration) {
     /**
      * This wrapper allows us to maintain a level of control inside arches-core
      * over Vue apps. For instance this allows us to abstract i18n setup/config
      * away from app initialization, and also allows us to ensure any plugins 
      * we'd like to use across the Arches ecosystem will be available. This also
      * Vue apps more easily extensible if we choose to add plugins or logic in
      * the future.
-     **/ 
+    **/
 
     /**
      * TODO: cbyrd #10501 - we should add an event listener that will re-fetch i18n data
      * and rebuild the app when a specific event is fired from the LanguageSwitcher component.
-    **/ 
-    return fetch(arches.urls.api_get_frontend_i18n_data).then(resp => {
+    **/
+    return fetch(arches.urls.api_get_frontend_i18n_data).then(function(resp) {
         if (!resp.ok) {
             throw new Error(resp.statusText);
         }
         return resp.json();
-    }).then(respJSON => {
+    }).then(function(respJSON) {
         const gettext = createGettext({
             availableLanguages: respJSON['enabled_languages'],
             defaultLanguage: respJSON['language'],
             translations: respJSON['translations'],
         });
 
         const app = createApp(vueComponent);
-        app.use(PrimeVue);
+
+        app.use(PrimeVue, themeConfiguration || DEFAULT_THEME);
         app.use(gettext);
         app.use(ConfirmationService);
         app.use(DialogService);

arches/app/media/js/views/plugin-standalone.js

@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 import createVueApplication from 'utils/create-vue-application';
 
-const pluginData = require('views/plugin-data');
+import pluginData from 'views/plugin-data';
 
 // workaround for webpack failures surrounding dynamic imports
 const vuePluginPath = pluginData['component'].replace('src/', '').replace('.vue', '');

arches/app/templates/base.htm

@@ -46,8 +46,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />
 
     {% block css %}
-        <!-- POC rough out of PrimeVue theme switcher -->
-        <link rel="stylesheet" href="{% webpack_static 'node_modules/primevue/resources/themes/mdc-light-indigo/theme.css' %}" />
         {% render_bundle 'css/arches' 'css' %}
         {% render_bundle 'css/core' 'css' %}
 

arches/app/templates/views/plugin-standalone.htm

@@ -43,8 +43,6 @@
         <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />
 
         {% block css %}
-            <!-- POC rough out of PrimeVue theme switcher -->
-            <link rel="stylesheet" href="{% webpack_static 'node_modules/primevue/resources/themes/mdc-light-indigo/theme.css' %}" />
             <link rel="stylesheet" href="{% webpack_static 'node_modules/font-awesome/css/font-awesome.min.css' %}" />
         {% endblock css %}
 </head>

package.json

@@ -75,7 +75,7 @@
         "moment-timezone": "~0.5.43",
         "nouislider": "11.0.3",
         "numeral": "^2.0.6",
-        "primevue": "^3.51.0",
+        "primevue": "4.0.0-beta.3",
         "proj4": "^2.3.15",
         "regenerator-runtime": "^0.14.1",
         "requirejs": "~2.3.2",

releases/7.6.0.md

@@ -89,7 +89,7 @@ JavaScript:
         @typescript-eslint/eslint-plugin == 6.18.1
         @typescript-eslint/parser == 6.18.1
         eslint-plugin-vue == 9.20.0
-        primevue == 3.51.0
+        primevue == 4.0.0-beta.3
         nodemon == 3.0.2
         sass == 1.70.0
         ts-loader == 9.5.1