Merge pull request #138 from Joery-M/dependabot/npm_and_yarn/primevue…

…-4.0.0
Joery-M · Jul 18, 2024 · 32b9822 · 32b9822
2 parents e1fc0fd + 65cb9ad
commit 32b9822
Show file tree

Hide file tree

Showing 14 changed files with 382 additions and 414 deletions.
diff --git a/packages/safelight/index.html b/packages/safelight/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Safelight</title>
     </head>
-    <body class="dark">
+    <body>
         <div id="app"></div>
         <script type="module" src="/src/main.ts"></script>
     </body>

diff --git a/packages/safelight/package.json b/packages/safelight/package.json
@@ -18,7 +18,9 @@
         "type-check": "vue-tsc --noEmit"
     },
     "dependencies": {
+        "@fontsource-variable/inter": "^5.0.19",
         "@phosphor-icons/vue": "^2.2.1",
+        "@primevue/themes": "^4.0.0",
         "@quantco/pnpm-licenses": "^2.1.0",
         "@safelight/shared": "workspace:*",
         "@safelight/timeline": "workspace:*",
@@ -35,7 +37,7 @@
         "mime-matcher": "^1.0.5",
         "monaco-editor": "^0.50.0",
         "pinia": "^2.1.7",
-        "primevue": "^3.53.0",
+        "primevue": "^4.0.0",
         "rxjs": "^7.8.1",
         "uuid": "^10.0.0",
         "vue": "^3.4.31",

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -23,7 +23,17 @@
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
-                    <DataViewLayoutOptions v-model="layout" class="mr-2 min-w-fit" />
+                    <SelectButton
+                        v-model="layout"
+                        :options="['list', 'grid']"
+                        :allow-empty="false"
+                        class="mr-2 min-w-fit"
+                    >
+                        <template #option="{ option }">
+                            <PhList v-if="option === 'list'" />
+                            <PhSquaresFour v-else />
+                        </template>
+                    </SelectButton>
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
                             <PhMagnifyingGlass />
@@ -44,7 +54,7 @@
                                 <PhSortDescending v-else />
                             </template>
                         </Button>
-                        <Dropdown
+                        <Select
                             v-model="sortBy"
                             style="line-height: 1.2"
                             aria-label="Sort by"
@@ -160,7 +170,17 @@
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
-                    <DataViewLayoutOptions v-model="layout" class="mr-2 min-w-fit" />
+                    <SelectButton
+                        v-model="layout"
+                        :options="['list', 'grid']"
+                        :allow-empty="false"
+                        class="mr-2 min-w-fit"
+                    >
+                        <template #option="{ option }">
+                            <PhList v-if="option === 'list'" />
+                            <PhSquaresFour v-else />
+                        </template>
+                    </SelectButton>
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
                             <PhMagnifyingGlass />
@@ -195,11 +215,13 @@
 import { CurrentProject } from '@/stores/currentProject';
 import {
     PhImage,
+    PhList,
     PhMagnifyingGlass,
     PhPlus,
     PhSortAscending,
     PhSortDescending,
     PhSpeakerHigh,
+    PhSquaresFour,
     PhSubtitles,
     PhVideoCamera
 } from '@phosphor-icons/vue';
@@ -213,11 +235,11 @@ import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import DataView from 'primevue/dataview';
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
-import Dropdown from 'primevue/dropdown';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
 import InputText from 'primevue/inputtext';
+import Select from 'primevue/select';
+import SelectButton from 'primevue/selectbutton';
 import Slider from 'primevue/slider';
 import Toolbar from 'primevue/toolbar';
 import { ref, shallowRef, watchEffect } from 'vue';

diff --git a/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue b/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
@@ -75,7 +75,7 @@
             </Button>
         </div>
     </div>
-    <OverlayPanel
+    <Popover
         id="library_item_menu"
         ref="overlay"
         :pt="{
@@ -95,7 +95,7 @@
             <template #center>
                 <Button
                     v-tooltip.bottom="{ value: 'Delete', showDelay: 500 }"
-                    severity="contrast"
+                    severity="secondary"
                     text
                     :disabled="hasItemInTimeline"
                     @click="alertt('yea no')"
@@ -114,7 +114,7 @@
                 }
             }"
         />
-    </OverlayPanel>
+    </Popover>
 </template>
 <script setup lang="ts">
 import { CurrentProject } from '@/stores/currentProject';
@@ -132,7 +132,7 @@ import { MediaType } from '@safelight/shared/Media/Media';
 import Button from 'primevue/button';
 import Menu from 'primevue/menu';
 import type { MenuItem } from 'primevue/menuitem';
-import OverlayPanel from 'primevue/overlaypanel';
+import Popover from 'primevue/popover';
 import Skeleton from 'primevue/skeleton';
 import Toolbar from 'primevue/toolbar';
 import { computed, ref } from 'vue';
@@ -157,7 +157,7 @@ const hasItemInTimeline = computed(
 
 const alertt = (text: string) => window.alert(text);
 
-const overlay = ref<OverlayPanel>();
+const overlay = ref<typeof Popover>();
 
 function closeOtherOverlays() {
     if (document.activeElement && 'blur' in document.activeElement) {

diff --git a/packages/safelight/src/components/Editor/Timeline/Timeline.vue b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
@@ -6,7 +6,7 @@
         :invert-scroll-axes
         :zoom-factor
         :alignment
-        class="h-full"
+        class="timeline h-full"
         @update:playback-position="setPbPos"
     />
 </template>
@@ -103,3 +103,9 @@ const items = reactive<{ [key: string]: TimelineItem }>({
     }
 });
 </script>
+<style lang="scss" scoped>
+.timeline {
+    --surface-100: var(--p-splitter-gutter-background);
+    --red-600: var(--p-red-600);
+}
+</style>
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -25,7 +25,7 @@
             style="
                 border-width: 0;
                 border-right-width: 1px;
-                border-right-color: var(--color-border);
+                border-right-color: var(--p-surface-700);
             "
         />
         <NamespaceSettings class="namespace" :path="selectedPath" />

diff --git a/packages/safelight/src/components/Panels/PanelGroup.vue b/packages/safelight/src/components/Panels/PanelGroup.vue
@@ -14,7 +14,7 @@
                         <Button
                             rounded
                             text
-                            severity="contrast"
+                            severity="secondary"
                             :aria-label="'Close panel ' + item.name"
                             style="width: 20px; height: 20px; padding: 0"
                             @click="removePanel(item as unknown as Panel)"
@@ -28,11 +28,11 @@
             </TabMenu>
             <div
                 class="flex flex-1 items-center justify-start"
-                style="border-bottom: 1px var(--surface-100) solid"
+                style="border-bottom: 1px var(--p-tabmenu-tablist-border-color) solid"
             >
                 <Button
                     rounded
-                    severity="contrast"
+                    severity="secondary"
                     text
                     aria-haspopup="true"
                     aria-controls="panel_add_menu"
@@ -51,7 +51,7 @@
             </Suspense>
         </div>
     </div>
-    <OverlayPanel
+    <Popover
         id="panel_add_menu"
         ref="addOverlay"
         :pt="{
@@ -72,7 +72,7 @@
                 <component :is="item.icon" class="mr-2" />
             </template>
         </Menu>
-    </OverlayPanel>
+    </Popover>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +82,7 @@ import { watchImmediate } from '@vueuse/core';
 import Button from 'primevue/button';
 import Menu from 'primevue/menu';
 import type { MenuItem } from 'primevue/menuitem';
-import OverlayPanel from 'primevue/overlaypanel';
+import Popover from 'primevue/popover';
 import TabMenu from 'primevue/tabmenu';
 import {
     computed,
@@ -149,7 +149,7 @@ const allAvailablePanels = computed<MenuItem[]>(() =>
     }))
 );
 
-const addOverlay = ref<OverlayPanel>();
+const addOverlay = ref<typeof Popover>();
 
 // TODO: Be able to send a signal to the top level to remove a panel from the group
 // OR, be able to modify the local config to affect the top config.
@@ -163,7 +163,7 @@ function addPanel(panel: Panel) {
 
 <style lang="scss">
 .panel-group-menu {
-    .p-menuitem-link {
+    .p-tabmenu-item-link {
         .p-button {
             opacity: 0;
             visibility: hidden;

diff --git a/packages/safelight/src/main.ts b/packages/safelight/src/main.ts
@@ -7,12 +7,13 @@ import PrimeVue, { type PrimeVueConfiguration } from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import DialogService from 'primevue/dialogservice';
 import FocusTrap from 'primevue/focustrap';
-import 'primevue/resources/primevue.min.css';
-import 'primevue/resources/themes/aura-dark-amber/theme.css';
+import { definePreset } from '@primevue/themes';
+import Aura from '@primevue/themes/aura';
 import Tooltip from 'primevue/tooltip';
 
 import App from './App.vue';
 import './style.scss';
+import Ripple from 'primevue/ripple';
 
 export const router = createRouter({
     history: createWebHistory('/'),
@@ -23,11 +24,69 @@ const app = createApp(App);
 
 export const pinia = createPinia();
 
+const mainTheme = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '#fffcf4',
+            100: '#fef0ca',
+            200: '#fde3a1',
+            300: '#fdd777',
+            400: '#fccb4e',
+            500: '#fbbf24',
+            600: '#d5a21f',
+            700: '#b08619',
+            800: '#8a6914',
+            900: '#644c0e',
+            950: '#fbbf24'
+        },
+        colorScheme: {
+            light: {
+                primary: {
+                    color: '#fbbf24',
+                    inverseColor: '#ffffff',
+                    hoverColor: '#644c0e',
+                    activeColor: '#8a6914'
+                },
+                highlight: {
+                    background: '#644c0e',
+                    focusBackground: '#b08619',
+                    color: '#ffffff',
+                    focusColor: '#ffffff'
+                }
+            },
+            dark: {
+                primary: {
+                    color: '#fbbf24',
+                    inverseColor: '#644c0e',
+                    hoverColor: '#fcd34d',
+                    activeColor: '#fde68a'
+                },
+                highlight: {
+                    background: '#fbbf2429',
+                    focusBackground: '#fbbf243d',
+                    color: '#ffffffde',
+                    focusColor: '#ffffffde'
+                }
+            }
+        }
+    }
+});
+
 app.use(pinia);
 app.use(router);
 app.use(PrimeVue, {
     inputStyle: 'outlined',
-    ripple: false
+    ripple: false,
+    theme: {
+        preset: mainTheme,
+        options: {
+            darkModeSelector: '.dark',
+            cssLayer: {
+                name: 'primevue',
+                order: 'tailwind-base, primevue, tailwind-utilities'
+            }
+        }
+    }
 } as PrimeVueConfiguration);
 app.use(ConfirmationService);
 app.use(DialogService);
@@ -36,6 +95,7 @@ app.use(DialogService);
 app.provide('size', 18);
 
 // Directives
+app.directive('ripple', Ripple);
 app.directive('tooltip', Tooltip);
 app.directive('focustrap', FocusTrap);