@data-fair/lib-vue 1.13.12 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.13.12",
+  "version": "1.15.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [

package/session.d.ts

@@ -42,11 +42,26 @@ export interface Colors {
     admin: string;
     'on-admin': string;
 }
+interface FullSiteInfo {
+    main?: boolean;
+    theme: {
+        logo?: string;
+        colors: Colors;
+        dark: boolean;
+        darkColors?: Colors;
+        hc: boolean;
+        hcColors?: Colors;
+        hcDark: boolean;
+        hcDarkColors?: Colors;
+    };
+}
 export interface SiteInfo {
     main?: boolean;
     logo?: string;
+    dark?: boolean;
     colors: Colors;
 }
+type Theme = 'default' | 'dark' | 'hc' | 'hc-dark';
 export interface Session {
     state: SessionState;
     user: ComputedRef<SessionState['user']>;
@@ -54,8 +69,9 @@ export interface Session {
     account: ComputedRef<SessionState['account']>;
     accountRole: ComputedRef<SessionState['accountRole']>;
     lang: ComputedRef<SessionState['lang']>;
-    dark: ComputedRef<SessionState['dark']>;
+    theme: Ref<null | Theme>;
     site: Ref<SiteInfo | null>;
+    fullSite: Ref<FullSiteInfo | null>;
     loginUrl: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => string;
     login: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => void;
     logout: (redirect?: string) => Promise<void>;
@@ -65,7 +81,7 @@ export interface Session {
     cancelDeletion: () => Promise<void>;
     keepalive: () => Promise<void>;
     refreshSiteInfo: () => Promise<void>;
-    switchDark: (value: boolean) => void;
+    switchTheme: (value: Theme) => void;
     switchLang: (value: string) => void;
     topLocation: Ref<Location | undefined>;
     options: SessionOptions;
@@ -86,8 +102,9 @@ export declare function createSession(initOptions: Partial<SessionOptions>): Pro
     account: ComputedRef<SessionState["account"]>;
     accountRole: ComputedRef<SessionState["accountRole"]>;
     lang: ComputedRef<SessionState["lang"]>;
-    dark: ComputedRef<SessionState["dark"]>;
+    theme: Ref<null | Theme>;
     site: Ref<SiteInfo | null>;
+    fullSite: Ref<FullSiteInfo | null>;
     loginUrl: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => string;
     login: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => void;
     logout: (redirect?: string) => Promise<void>;
@@ -97,7 +114,7 @@ export declare function createSession(initOptions: Partial<SessionOptions>): Pro
     cancelDeletion: () => Promise<void>;
     keepalive: () => Promise<void>;
     refreshSiteInfo: () => Promise<void>;
-    switchDark: (value: boolean) => void;
+    switchTheme: (value: Theme) => void;
     switchLang: (value: string) => void;
     topLocation: Ref<Location | undefined>;
     options: SessionOptions;

package/session.js

@@ -9,6 +9,15 @@ export * from '@data-fair/lib-common-types/session/index.js'
 const Cookies = cookiesModule
 const debug = Debug('session')
 debug.log = console.log.bind(console)
+function getDefaultTheme (site) {
+  // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
+  const preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const preferHC = window.matchMedia && window.matchMedia('(forced-colors: active)').matches
+  if (site.theme.hcDark && preferDark && preferHC) { return 'hc-dark' }
+  if (site.theme.hc && preferHC) { return 'hc' }
+  if (site.theme.dark && preferDark) { return 'dark' }
+  return 'default'
+}
 function jwtDecodeAlive (jwt) {
   if (!jwt) { return }
   const decoded = jwtDecode(jwt)
@@ -57,12 +66,13 @@ export async function getSession (initOptions) {
   })
   // the core state of the session that is filled by reading cookies
   const state = reactive({})
+  const fullSite = ref(null)
   const site = ref(null)
+  const theme = ref(null)
   // cookies are the source of truth and this information is transformed into the state reactive object
   const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie)
   const readState = () => {
-    const darkCookie = cookies.get('theme_dark')
-    state.dark = darkCookie === '1' || darkCookie === 'true'
+    theme.value = cookies.get('theme') ?? null
     const langCookie = cookies.get('i18n_lang')
     state.lang = langCookie ?? options.defaultLang
     const idToken = cookies.get('id_token')
@@ -198,15 +208,15 @@ export async function getSession (initOptions) {
     await customFetch(`${options.directoryUrl}/api/users/${state.user.id}`, { method: 'PATCH', body: ({ plannedDeletion: null }) })
     readState()
   }
-  const switchDark = (value) => {
-    const maxAge = 60 * 60 * 24 * 365 // 1 year
-    cookies.set('theme_dark', `${value}`, { maxAge, path: cookiesPath })
-    readState()
-  }
   const switchLang = (value) => {
     const maxAge = 60 * 60 * 24 * 365 // 1 year
     cookies.set('i18n_lang', value, { maxAge, path: cookiesPath })
-    readState()
+    goTo(null)
+  }
+  const switchTheme = (value) => {
+    const maxAge = 60 * 60 * 24 * 365 // 1 year
+    cookies.set('theme', value, { maxAge, path: cookiesPath })
+    goTo(null)
   }
   const keepalive = async () => {
     if (state.user == null) { return }
@@ -226,7 +236,27 @@ export async function getSession (initOptions) {
   }
   const refreshSiteInfo = async () => {
     const siteInfo = await customFetch(`${options.directoryUrl}/api/sites/_public`) ?? null
-    site.value = siteInfo
+    if (siteInfo.theme) {
+      fullSite.value = siteInfo
+      const partialSite = {
+        main: siteInfo.main,
+        logo: siteInfo.theme.logo,
+        colors: siteInfo.theme.colors
+      }
+      if (theme.value == null) { theme.value = getDefaultTheme(siteInfo) }
+      if (theme.value === 'hc') { partialSite.colors = siteInfo.theme.hcColors }
+      if (theme.value === 'dark') {
+        partialSite.colors = siteInfo.theme.darkColors
+        partialSite.dark = true
+      }
+      if (theme.value === 'hc-dark') {
+        partialSite.colors = siteInfo.theme.hcDarkColors
+        partialSite.dark = true
+      }
+      site.value = partialSite
+    } else {
+      site.value = siteInfo
+    }
   }
   if (options.siteInfo) { await refreshSiteInfo() }
   // immediately performs a keepalive, but only on top windows (not iframes or popups)
@@ -252,9 +282,10 @@ export async function getSession (initOptions) {
     user: computed(() => state.user),
     account: computed(() => state.account),
     accountRole: computed(() => state.accountRole),
-    dark: computed(() => state.dark),
     lang: computed(() => state.lang),
+    theme,
     site,
+    fullSite,
     loginUrl,
     login,
     logout,
@@ -264,7 +295,7 @@ export async function getSession (initOptions) {
     cancelDeletion,
     keepalive,
     refreshSiteInfo,
-    switchDark,
+    switchTheme,
     switchLang,
     topLocation,
     options