@directus/themes 1.1.1 → 1.1.3

package/dist/composables/use-fonts.d.ts

@@ -1,5 +1,6 @@
 import { MaybeRef } from 'vue';
 import { Theme } from '../schemas/theme.js';
-export declare const useFonts: (theme: MaybeRef<Theme>) => {
+import { DeepPartial } from '@directus/types';
+export declare const useFonts: (theme: MaybeRef<Theme | DeepPartial<Theme>>) => {
     googleFonts: import('vue').ComputedRef<string[]>;
 };

package/dist/composables/use-fonts.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -1,24 +1,24 @@
-import { computed as y, unref as f, reactive as B, defineComponent as $, toRefs as D, createBlock as G, openBlock as T, Teleport as _, createTextVNode as L, toDisplayString as M } from "vue";
-import { useHead as N } from "@unhead/vue";
+import { computed as y, unref as f, reactive as $, defineComponent as B, toRefs as D, createBlock as G, openBlock as N, Teleport as T, createTextVNode as _, toDisplayString as L } from "vue";
+import { useHead as M } from "@unhead/vue";
 import { get as W, merge as w, mapKeys as E } from "lodash-es";
 import { defineStore as U, storeToRefs as I } from "pinia";
 import P from "decamelize";
 import { flatten as V } from "flat";
 import { cssVar as z } from "@directus/utils/browser";
 import { Type as e } from "@sinclair/typebox";
-const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e.String({ $id: "FontWeight" }), h = e.String({ $id: "Length" }), p = e.String({ $id: "Percentage" }), k = e.String({ $id: "BoxShadow" }), j = e.String({ $id: "Number" }), H = e.String({ $id: "Size" }), s = e.Union([e.String(), e.Literal("thin"), e.Literal("medium"), e.Literal("thick")], {
+const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), s = e.String({ $id: "FontWeight" }), p = e.String({ $id: "Length" }), v = e.String({ $id: "Percentage" }), k = e.String({ $id: "BoxShadow" }), j = e.String({ $id: "Number" }), H = e.String({ $id: "Size" }), h = e.Union([e.String(), e.Literal("thin"), e.Literal("medium"), e.Literal("thick")], {
   $id: "LineWidth"
 }), S = e.Optional(
   e.Object({
-    columnGap: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
-    rowGap: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
+    columnGap: e.Optional(e.Union([e.Ref(p), e.Ref(v)])),
+    rowGap: e.Optional(e.Union([e.Ref(p), e.Ref(v)])),
     field: e.Optional(
       e.Object({
         label: e.Optional(
           e.Object({
             foreground: e.Optional(e.Ref(r)),
             fontFamily: e.Optional(e.Ref(i)),
-            fontWeight: e.Optional(e.Ref(b))
+            fontWeight: e.Optional(e.Ref(s))
           })
         ),
         input: e.Optional(
@@ -34,7 +34,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
             boxShadowHover: e.Optional(e.Ref(k)),
             boxShadowFocus: e.Optional(e.Ref(k)),
             height: e.Optional(e.Ref(H)),
-            padding: e.Optional(e.Union([e.Ref(h), e.Ref(p)]))
+            padding: e.Optional(e.Union([e.Ref(p), e.Ref(v)]))
           })
         )
       })
@@ -43,8 +43,8 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
 ), K = e.Object({
   //////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Base border styles
-  borderRadius: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
-  borderWidth: e.Optional(e.Ref(s)),
+  borderRadius: e.Optional(e.Union([e.Ref(p), e.Ref(v)])),
+  borderWidth: e.Optional(e.Ref(h)),
   //////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Base color palette
   foreground: e.Optional(e.Ref(r)),
@@ -84,25 +84,25 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
       display: e.Optional(
         e.Object({
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       sans: e.Optional(
         e.Object({
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       serif: e.Optional(
         e.Object({
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       monospace: e.Optional(
         e.Object({
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       )
     })
@@ -113,21 +113,21 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
     e.Object({
       background: e.Optional(e.Ref(r)),
       backgroundAccent: e.Optional(e.Ref(r)),
-      borderWidth: e.Optional(e.Ref(s)),
+      borderWidth: e.Optional(e.Ref(h)),
       borderColor: e.Optional(e.Ref(r)),
       project: e.Optional(
         e.Object({
           background: e.Optional(e.Ref(r)),
           foreground: e.Optional(e.Ref(r)),
           fontFamily: e.Optional(e.Ref(i)),
-          borderWidth: e.Optional(e.Ref(s)),
+          borderWidth: e.Optional(e.Ref(h)),
           borderColor: e.Optional(e.Ref(r))
         })
       ),
       modules: e.Optional(
         e.Object({
           background: e.Optional(e.Ref(r)),
-          borderWidth: e.Optional(e.Ref(s)),
+          borderWidth: e.Optional(e.Ref(h)),
           borderColor: e.Optional(e.Ref(r)),
           button: e.Optional(
             e.Object({
@@ -159,7 +159,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
           fontFamily: e.Optional(e.Ref(i)),
           divider: e.Object({
             borderColor: e.Optional(e.Ref(r)),
-            borderWidth: e.Optional(e.Ref(s))
+            borderWidth: e.Optional(e.Ref(h))
           })
         })
       )
@@ -168,7 +168,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
   header: e.Optional(
     e.Object({
       background: e.Optional(e.Ref(r)),
-      borderWidth: e.Optional(e.Ref(s)),
+      borderWidth: e.Optional(e.Ref(h)),
       borderColor: e.Optional(e.Ref(r)),
       boxShadow: e.Optional(e.Ref(k)),
       headline: e.Optional(
@@ -181,7 +181,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
         e.Object({
           foreground: e.Optional(e.Ref(r)),
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       )
     })
@@ -192,7 +192,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
       background: e.Optional(e.Ref(r)),
       foreground: e.Optional(e.Ref(r)),
       fontFamily: e.Optional(e.Ref(i)),
-      borderWidth: e.Optional(e.Ref(s)),
+      borderWidth: e.Optional(e.Ref(h)),
       borderColor: e.Optional(e.Ref(r)),
       section: e.Optional(
         e.Object({
@@ -212,7 +212,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
               backgroundHover: e.Optional(e.Ref(r)),
               backgroundActive: e.Optional(e.Ref(r)),
               fontFamily: e.Optional(e.Ref(i)),
-              borderWidth: e.Optional(e.Ref(s)),
+              borderWidth: e.Optional(e.Ref(h)),
               borderColor: e.Optional(e.Ref(r))
             })
           ),
@@ -242,7 +242,7 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
       menu: e.Optional(
         e.Object({
           background: e.Optional(e.Ref(r)),
-          borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)]))),
+          borderRadius: e.Optional(e.Optional(e.Union([e.Ref(p), e.Ref(v)]))),
           boxShadow: e.Optional(e.Ref(k))
         })
       )
@@ -251,34 +251,34 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
   banner: e.Optional(
     e.Object({
       background: e.Optional(e.Ref(r)),
-      padding: e.Optional(e.Union([e.Ref(h), e.Ref(p)])),
-      borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)]))),
+      padding: e.Optional(e.Union([e.Ref(p), e.Ref(v)])),
+      borderRadius: e.Optional(e.Optional(e.Union([e.Ref(p), e.Ref(v)]))),
       avatar: e.Optional(
         e.Object({
           background: e.Optional(e.Ref(r)),
           foreground: e.Optional(e.Ref(r)),
-          borderRadius: e.Optional(e.Optional(e.Union([e.Ref(h), e.Ref(p)])))
+          borderRadius: e.Optional(e.Optional(e.Union([e.Ref(p), e.Ref(v)])))
         })
       ),
       headline: e.Optional(
         e.Object({
           foreground: e.Optional(e.Ref(r)),
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       title: e.Optional(
         e.Object({
           foreground: e.Optional(e.Ref(r)),
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       subtitle: e.Optional(
         e.Object({
           foreground: e.Optional(e.Ref(r)),
           fontFamily: e.Optional(e.Ref(i)),
-          fontWeight: e.Optional(e.Ref(b))
+          fontWeight: e.Optional(e.Ref(s))
         })
       ),
       art: e.Optional(
@@ -297,49 +297,49 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
   $defs: {
     Color: r,
     FamilyName: i,
-    Length: h,
-    Percentage: p,
-    LineWidth: s,
+    Length: p,
+    Percentage: v,
+    LineWidth: h,
     BoxShadow: k,
     Size: H,
     Number: j
   }
 }, q = (d) => {
-  const v = y(() => {
-    const o = /* @__PURE__ */ new Map(), c = (m, t = []) => {
-      for (const [a, n] of Object.entries(m))
-        typeof n == "object" && n !== null && ("type" in n && n.type === "object" && "properties" in n && c(n.properties, [...t, a]), "$ref" in n && n.$ref === "FamilyName" && (o.has(t) ? o.set(t, { family: a, weight: o.get(t).weight }) : o.set(t, { family: a, weight: null })), "$ref" in n && n.$ref === "FontWeight" && (o.has(t) ? o.set(t, { family: o.get(t).family, weight: a }) : o.set(t, { family: null, weight: a })));
+  const F = y(() => {
+    const n = /* @__PURE__ */ new Map(), c = (b, t = []) => {
+      for (const [a, o] of Object.entries(b))
+        typeof o == "object" && o !== null && ("type" in o && o.type === "object" && "properties" in o && c(o.properties, [...t, a]), "$ref" in o && o.$ref === "FamilyName" && (n.has(t) ? n.set(t, { family: a, weight: n.get(t).weight }) : n.set(t, { family: a, weight: null })), "$ref" in o && o.$ref === "FontWeight" && (n.has(t) ? n.set(t, { family: n.get(t).family, weight: a }) : n.set(t, { family: null, weight: a })));
     };
-    return c(Q.properties.rules.properties), o;
+    return c(Q.properties.rules.properties), n;
   }), u = y(() => {
-    const o = /* @__PURE__ */ new Map();
-    for (const [c, { family: m, weight: t }] of v.value.entries()) {
-      let a = null, n = null;
-      if (m && (a = W(f(d).rules, [...c, m])), t && (n = W(f(d).rules, [...c, t])), a) {
-        const F = a.split(",");
-        for (const l of F) {
-          const g = l.trim();
+    const n = /* @__PURE__ */ new Map();
+    for (const [c, { family: b, weight: t }] of F.value.entries()) {
+      let a = null, o = null;
+      if (b && (a = W(f(d).rules, [...c, b])), t && (o = W(f(d).rules, [...c, t])), a) {
+        const l = a.split(",");
+        for (const m of l) {
+          const g = m.trim();
           if (g.startsWith("var(--")) {
-            F.push(z(g.slice(6, -1)));
+            l.push(z(g.slice(6, -1)));
             continue;
           }
           if ((g.startsWith('"') && g.endsWith('"')) === !1)
             continue;
           const x = g.slice(1, -1);
-          o.has(x) ? o.get(x).add(n ?? "400") : o.set(x, /* @__PURE__ */ new Set([n ?? "400"]));
+          n.has(x) ? n.get(x).add(o ?? "400") : n.set(x, /* @__PURE__ */ new Set([o ?? "400"]));
         }
       }
     }
-    return o;
+    return n;
   });
   return { googleFonts: y(() => {
-    const o = [];
-    for (const [c, m] of u.value.entries())
+    const n = [];
+    for (const [c, b] of u.value.entries())
       if (["Inter", "Merriweather", "Fira Mono"].includes(c) === !1) {
-        const a = Array.from(m).join(";");
-        o.push(`${c.replace(" ", "+")}:wght@${a}`);
+        const a = Array.from(b).sort((o, l) => Number(o) - Number(l)).join(";");
+        n.push(`${c.replaceAll(" ", "+")}:wght@${a}`);
       }
-    return o;
+    return n;
   }) };
 }, R = (d) => d, A = R({
   id: "Directus Default",
@@ -1057,20 +1057,20 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
     }
   }
 }), Y = [A], Z = [C, X, J], ee = U("🎨 Themes", () => {
-  const d = B({ light: Z, dark: Y });
+  const d = $({ light: Z, dark: Y });
   return { themes: d, registerTheme: (u) => {
     u.appearance === "light" ? d.light.push(u) : d.dark.push(u);
   } };
-}), re = (d, v, u, O, o) => {
+}), re = (d, F, u, O, n) => {
   const { themes: c } = I(ee());
   return { theme: y(() => {
-    const t = f(d) ? f(u) : f(v), a = f(d) ? A : C, n = f(d) ? f(o) : f(O), F = f(c)[f(d) ? "dark" : "light"].find((l) => l.id === t);
-    return F ? n ? w({}, a, F, { rules: n }) : w(a, F) : (t && t !== a.id && console.warn(`Theme "${t}" doesn't exist.`), n ? w({}, a, { rules: n }) : a);
+    const t = f(d) ? f(u) : f(F), a = f(d) ? A : C, o = f(d) ? f(n) : f(O), l = f(c)[f(d) ? "dark" : "light"].find((m) => m.id === t);
+    return l ? o ? w({}, a, l, { rules: o }) : w(a, l) : (t && t !== a.id && console.warn(`Theme "${t}" doesn't exist.`), o ? w({}, a, { rules: o }) : a);
   }) };
 }, oe = (d) => {
-  const v = V(d, { delimiter: "--" }), u = (O) => `--theme--${P(O, { separator: "-" })}`;
-  return E(v, (O, o) => u(o));
-}, ge = /* @__PURE__ */ $({
+  const F = V(d, { delimiter: "--" }), u = (O) => `--theme--${P(O, { separator: "-" })}`;
+  return E(F, (O, n) => u(n));
+}, me = /* @__PURE__ */ B({
   __name: "theme-provider",
   props: {
     darkMode: { type: Boolean },
@@ -1080,32 +1080,32 @@ const r = e.String({ $id: "Color" }), i = e.String({ $id: "FamilyName" }), b = e
     themeDarkOverrides: { default: () => ({}) }
   },
   setup(d) {
-    const v = d, { darkMode: u, themeLight: O, themeDark: o, themeLightOverrides: c, themeDarkOverrides: m } = D(v), { theme: t } = re(u, O, o, c, m), a = y(() => oe(f(t).rules)), { googleFonts: n } = q(t);
-    N({
+    const F = d, { darkMode: u, themeLight: O, themeDark: n, themeLightOverrides: c, themeDarkOverrides: b } = D(F), { theme: t } = re(u, O, n, c, b), a = y(() => oe(f(t).rules)), { googleFonts: o } = q(t);
+    M({
       link: y(() => {
-        let l = "";
-        if (n.value.length > 0) {
-          const g = n.value.join("&family=");
-          l += `https://fonts.googleapis.com/css2?family=${g}`, l += `
+        let m = "";
+        if (o.value.length > 0) {
+          const g = o.value.join("&family=");
+          m += `https://fonts.googleapis.com/css2?family=${g}`, m += `
 `;
         }
-        return l ? [
+        return m ? [
           {
             rel: "stylesheet",
-            href: l
+            href: m
           }
         ] : [];
       })
     });
-    const F = y(() => `:root {${Object.entries(f(a)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
-    return (l, g) => (T(), G(_, { to: "#theme" }, [
-      L(M(F.value), 1)
+    const l = y(() => `:root {${Object.entries(f(a)).map(([g, x]) => `${g}: ${x};`).join(" ")}}`);
+    return (m, g) => (N(), G(T, { to: "#theme" }, [
+      _(L(l.value), 1)
     ]));
   }
 });
 export {
   le as Definitions,
-  ge as ThemeProvider,
+  me as ThemeProvider,
   Q as ThemeSchema,
   R as defineTheme,
   oe as rulesToCssVars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/themes",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Themes for Directus",
   "homepage": "https://directus.io",
   "repository": {
@@ -26,7 +26,7 @@
     "decamelize": "6.0.0",
     "flat": "6.0.1",
     "lodash-es": "4.17.21",
-    "@directus/utils": "13.0.6"
+    "@directus/utils": "13.0.8"
   },
   "devDependencies": {
     "@directus/tsconfig": "3.0.0",
@@ -35,11 +35,12 @@
     "@vitejs/plugin-vue": "5.2.1",
     "pinia": "2.3.1",
     "rollup-plugin-node-externals": "8.0.0",
-    "typescript": "5.8.2",
-    "vite": "5.4.14",
+    "typescript": "5.8.3",
+    "vite": "5.4.19",
     "vite-plugin-dts": "4.5.1",
+    "vitest": "3.2.4",
     "vue": "3.5.13",
-    "@directus/types": "13.1.2"
+    "@directus/types": "13.2.0"
   },
   "peerDependencies": {
     "@unhead/vue": "1",
@@ -48,6 +49,8 @@
   },
   "scripts": {
     "build": "vite build",
-    "dev": "vite build --watch"
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }