Switch to local PrimeVue imports

src/App.vue

@@ -28,6 +28,7 @@ import { computed, onBeforeMount, onMounted, ref, defineAsyncComponent } from 'v
 import { useRoute } from 'vue-router';
 import { useRecaptchaProvider } from 'vue-recaptcha';
 import { Head } from '@unhead/vue/components';
+import PvToast from 'primevue/toast';
 import NavBar from '@/components/NavBar.vue';
 
 const SessionTimer = defineAsyncComponent(() => import('@/containers/SessionTimer/SessionTimer.vue'));

src/assets/styles/components/checkbox.scss

@@ -0,0 +1,16 @@
+.p-checkbox .p-checkbox-box {
+  border: 2px solid var(--surface-300);
+  background: var(--surface-a);
+  width: 16px;
+  height: 16px;
+  color: var(--text-color);
+  border-radius: var(--border-radius);
+  transition: none;
+}
+
+.p-checkbox-box.p-component.p-highlight {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.25rem;
+}

src/assets/styles/theme.scss

@@ -8,6 +8,7 @@
 @import 'components/defaults';
 
 // Components
+@import 'components/checkbox';
 
 @import 'components/dataview';
 @import 'components/datatable';

src/components/CardAdministration.vue

@@ -160,6 +160,13 @@ import _mapValues from 'lodash/mapValues';
 import _toPairs from 'lodash/toPairs';
 import _without from 'lodash/without';
 import _zip from 'lodash/zip';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvConfirmPopup from 'primevue/confirmpopup';
+import PvDataTable from 'primevue/datatable';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvSpeedDial from 'primevue/speeddial';
+import PvTreeTable from 'primevue/treetable';
 import { batchGetDocs } from '@/helpers/query/utils';
 import { taskDisplayNames } from '@/helpers/reports';
 import { removeEmptyOrgs } from '@/helpers';

src/components/ConsentModal.vue

@@ -23,6 +23,8 @@ import { useI18n } from 'vue-i18n';
 import * as Sentry from '@sentry/vue';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
+import PvConfirmDialog from 'primevue/confirmdialog';
+import PvToast from 'primevue/toast';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import _lowerCase from 'lodash/lowerCase';

src/components/ConsentPicker.vue

@@ -274,9 +274,17 @@
 
 <script setup>
 import { ref, onMounted, watch, computed } from 'vue';
-import { useAuthStore } from '@/store/auth';
 import { marked } from 'marked';
 import _forEach from 'lodash/forEach';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
+import PvPanel from 'primevue/panel';
+import PvRadioButton from 'primevue/radiobutton';
+import PvFieldset from 'primevue/fieldset';
+import { useAuthStore } from '@/store/auth';
 import useLegalDocsQuery from '@/composables/queries/useLegalDocsQuery';
 
 const props = defineProps({

src/components/CreateAdministration.vue

@@ -176,6 +176,13 @@ import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvConfirmDialog from 'primevue/confirmdialog';
+import PvDivider from 'primevue/divider';
+import PvInputText from 'primevue/inputtext';
+import PvRadioButton from 'primevue/radiobutton';
 import _filter from 'lodash/filter';
 import _isEmpty from 'lodash/isEmpty';
 import _toPairs from 'lodash/toPairs';

src/components/CreateAdministrator.vue

@@ -89,7 +89,10 @@ import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDivider from 'primevue/divider';
+import PvInputText from 'primevue/inputtext';
 import _cloneDeep from 'lodash/cloneDeep';
 import _union from 'lodash/union';
 import { useAuthStore } from '@/store/auth';

src/components/CreateOrgs.vue

@@ -208,6 +208,13 @@ import _union from 'lodash/union';
 import _without from 'lodash/without';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvChip from 'primevue/chip';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
 import { useAuthStore } from '@/store/auth';
 import useDistrictsListQuery from '@/composables/queries/useDistrictsListQuery';
 import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQuery';

src/components/EditOrgsForm.vue

@@ -50,12 +50,14 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
 import { fetchDocById } from '@/helpers/query/utils';
 import { useQuery } from '@tanstack/vue-query';
 import PvChips from 'primevue/chips';
+import PvCheckbox from 'primevue/checkbox';
+import PvInputText from 'primevue/inputtext';
 import _isEmpty from 'lodash/isEmpty';
 const props = defineProps({
   orgType: { type: String, required: true },

src/components/EditUsersForm.vue

@@ -209,6 +209,11 @@ import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
 import _isEmpty from 'lodash/isEmpty';
 import _get from 'lodash/get';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 
 const props = defineProps({

src/components/EditVariantDialog.vue

@@ -266,6 +266,15 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import _isEmpty from 'lodash/isEmpty';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDialog from 'primevue/dialog';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvInputSwitch from 'primevue/inputswitch';
+import PvInputText from 'primevue/inputtext';
+import PvTag from 'primevue/tag';
 
 const visible = ref(false);
 const props = defineProps({

src/components/GameTabs.vue

@@ -78,14 +78,17 @@
 </template>
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 import _get from 'lodash/get';
 import _find from 'lodash/find';
 import _findIndex from 'lodash/findIndex';
+import { camelize, getAgeData } from '@bdelab/roar-utils';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
+import PvTag from 'primevue/tag';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-import { camelize, getAgeData } from '@bdelab/roar-utils';
 import VideoPlayer from '@/components/VideoPlayer.vue';
 
 const props = defineProps({

src/components/LEVANTE/RegisterUsersInfo.vue

@@ -35,6 +35,10 @@
   </PvPanel>
 </template>
 
+<script setup>
+import PvPanel from 'primevue/panel';
+</script>
+
 <style scoped>
 .info-message-container {
   display: flex;

src/components/LanguageSelector.vue

@@ -20,6 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import PvDropdown from 'primevue/dropdown';
 import { languageOptions } from '@/translations/i18n.js';
 
 // Convert the object to an array of [key, value] pairs

src/components/ListOrgs.vue

@@ -155,9 +155,14 @@ import { ref, computed, onMounted, watch } from 'vue';
 import * as Sentry from '@sentry/vue';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-import { TOAST_SEVERITIES, TOAST_DEFAULT_LIFE_DURATION } from '@/constants/toasts.js';
-import EditOrgsForm from './EditOrgsForm.vue';
-import RoarModal from './modals/RoarModal.vue';
+import PvButton from 'primevue/button';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputGroup from 'primevue/inputgroup';
+import PvInputText from 'primevue/inputtext';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
+import PvToast from 'primevue/toast';
 import _get from 'lodash/get';
 import _head from 'lodash/head';
 import _kebabCase from 'lodash/kebabCase';
@@ -170,7 +175,11 @@ import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 import useDistrictsListQuery from '@/composables/queries/useDistrictsListQuery';
 import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQuery';
 import useOrgsTableQuery from '@/composables/queries/useOrgsTableQuery';
+import EditOrgsForm from './EditOrgsForm.vue';
+import RoarModal from './modals/RoarModal.vue';
 import { CSV_EXPORT_MAX_RECORD_COUNT } from '@/constants/csvExport';
+import { TOAST_SEVERITIES, TOAST_DEFAULT_LIFE_DURATION } from '@/constants/toasts.js';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const initialized = ref(false);
 const selectedDistrict = ref(undefined);

src/components/ListUsers.vue

@@ -128,13 +128,16 @@ import { storeToRefs } from 'pinia';
 import { useVuelidate } from '@vuelidate/core';
 import { required, sameAs, minLength } from '@vuelidate/validators';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvInputText from 'primevue/inputtext';
 import _isEmpty from 'lodash/isEmpty';
 import { useAuthStore } from '@/store/auth';
 import useOrgUsersQuery from '@/composables/queries/useOrgUsersQuery';
 import { singularizeFirestoreCollection } from '@/helpers';
 import AppSpinner from './AppSpinner.vue';
 import EditUsersForm from './EditUsersForm.vue';
 import RoarModal from './modals/RoarModal.vue';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const authStore = useAuthStore();
 

src/components/NavBar.vue

@@ -73,13 +73,16 @@ import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import _isEmpty from 'lodash/isEmpty';
 import _union from 'lodash/union';
+import PvButton from 'primevue/button';
+import PvImage from 'primevue/image';
+import PvMenubar from 'primevue/menubar';
 import { useAuthStore } from '@/store/auth';
 import { getSidebarActions } from '@/router/sidebarActions';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 import useSignOutMutation from '@/composables/mutations/useSignOutMutation';
-import LanguageSelector from './LanguageSelector.vue';
 import { APP_ROUTES } from '@/constants/routes';
 import ROARLogo from '@/assets/RoarLogo.vue';
+import LanguageSelector from '@/components/LanguageSelector.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();

src/components/OrgPicker.vue

@@ -94,6 +94,14 @@ import { storeToRefs } from 'pinia';
 import _capitalize from 'lodash/capitalize';
 import _get from 'lodash/get';
 import _head from 'lodash/head';
+import PvCheckbox from 'primevue/checkbox';
+import PvChip from 'primevue/chip';
+import PvDropdown from 'primevue/dropdown';
+import PvListbox from 'primevue/listbox';
+import PvPanel from 'primevue/panel';
+import PvScrollPanel from 'primevue/scrollpanel';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
 import { useAuthStore } from '@/store/auth';
 import { orgFetcher, orgFetchAll } from '@/helpers/query/orgs';
 import { orderByDefault } from '@/helpers/query/utils';

src/components/ParticipantSidebar.vue

@@ -19,6 +19,7 @@
 </template>
 <script setup>
 import { ref, computed } from 'vue';
+import PvChart from 'primevue/chart';
 
 const props = defineProps({
   totalGames: { type: Number, required: true, default: 0 },

src/components/RoarDataTable.vue

@@ -565,15 +565,29 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvChip from 'primevue/chip';
+import PvColumn from 'primevue/column';
+import PvColumnGroup from 'primevue/columngroup';
+import PvDataTable from 'primevue/datatable';
+import PvDropdown from 'primevue/dropdown';
+import PvInputNumber from 'primevue/inputnumber';
+import PvInputText from 'primevue/inputtext';
+import PvMultiSelect from 'primevue/multiselect';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvTag from 'primevue/tag';
+import PvTriStateCheckbox from 'primevue/tristatecheckbox';
+import PvRow from 'primevue/row';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
-import SkeletonTable from '@/components/SkeletonTable.vue';
 import _get from 'lodash/get';
 import _map from 'lodash/map';
 import _forEach from 'lodash/forEach';
 import _find from 'lodash/find';
 import _toUpper from 'lodash/toUpper';
 import _startCase from 'lodash/startCase';
 import { supportLevelColors, progressTags } from '@/helpers/reports';
+import SkeletonTable from '@/components/SkeletonTable.vue';
 import TableScoreTag from '@/components/reports/TableScoreTag.vue';
 
 /*
@@ -962,23 +976,6 @@ const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-se
   margin-bottom: 3px;
 }
 
-.p-checkbox .p-checkbox-box {
-  border: 2px solid var(--surface-300);
-  background: var(--surface-a);
-  width: 16px;
-  height: 16px;
-  color: var(--text-color);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-
-.p-checkbox-box.p-component.p-highlight {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 0.25rem;
-}
-
 .circle {
   border-color: white;
   display: inline-block;

src/components/RoarGameCard.vue

@@ -31,6 +31,11 @@
 
 <script setup>
 import { ref } from 'vue';
+import PvButton from 'primevue/button';
+import PvCard from 'primevue/card';
+import PvInlineMessage from 'primevue/inlinemessage';
+import PvTag from 'primevue/tag';
+
 const props = defineProps({
   gameId: { type: String, required: true },
   title: { type: String, required: true },

src/components/SkeletonTable.vue

@@ -13,6 +13,9 @@
 
 <script setup>
 import { ref } from 'vue';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvSkeleton from 'primevue/skeleton';
 
 const skeletonData = ref([
   { col0: '', col1: '', col2: '', col3: '' },

src/components/TaskPicker.vue

@@ -146,8 +146,14 @@ import _toLower from 'lodash/toLower';
 import _isEmpty from 'lodash/isEmpty';
 import _union from 'lodash/union';
 import { VueDraggableNext } from 'vue-draggable-next';
-import VariantCard from './VariantCard.vue';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvDropdown from 'primevue/dropdown';
+import PvInputSwitch from 'primevue/inputswitch';
+import PvInputText from 'primevue/inputtext';
+import PvPanel from 'primevue/panel';
+import PvScrollPanel from 'primevue/scrollpanel';
+import VariantCard from './VariantCard.vue';
 
 const toast = useToast();
 

src/components/VariantCard.vue

@@ -256,6 +256,12 @@
 <script setup>
 import { ref } from 'vue';
 import _toPairs from 'lodash/toPairs';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDialog from 'primevue/dialog';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvTag from 'primevue/tag';
 import EditVariantDialog from '@/components/EditVariantDialog.vue';
 
 const props = defineProps({