@vuetify/nightly 3.8.0-master.2025-04-06 → 3.8.1-master.2025-04-07

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-master.2025-04-06
+* Vuetify v3.8.1-master.2025-04-07
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2386,93 +2386,144 @@
       themes
     });
   }
+  function createCssClass(lines, selector, content, scope) {
+    lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
+  }
+  function genCssVariables(theme) {
+    const lightOverlay = theme.dark ? 2 : 1;
+    const darkOverlay = theme.dark ? 1 : 2;
+    const variables = [];
+    for (const [key, value] of Object.entries(theme.colors)) {
+      const rgb = parseColor(value);
+      variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
+      if (!key.startsWith('on-')) {
+        variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
+      }
+    }
+    for (const [key, value] of Object.entries(theme.variables)) {
+      const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
+      const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
+      variables.push(`--v-${key}: ${rgb ?? value}`);
+    }
+    return variables;
+  }
+  function genVariation(name, color, variations) {
+    const object = {};
+    if (variations) {
+      for (const variation of ['lighten', 'darken']) {
+        const fn = variation === 'lighten' ? lighten : darken;
+        for (const amount of createRange(variations[variation], 1)) {
+          object[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
+        }
+      }
+    }
+    return object;
+  }
+  function genVariations(colors, variations) {
+    if (!variations) return {};
+    let variationColors = {};
+    for (const name of variations.colors) {
+      const color = colors[name];
+      if (!color) continue;
+      variationColors = {
+        ...variationColors,
+        ...genVariation(name, color, variations)
+      };
+    }
+    return variationColors;
+  }
+  function genOnColors(colors) {
+    const onColors = {};
+    for (const color of Object.keys(colors)) {
+      if (color.startsWith('on-') || colors[`on-${color}`]) continue;
+      const onColor = `on-${color}`;
+      const colorVal = parseColor(colors[color]);
+      onColors[onColor] = getForeground(colorVal);
+    }
+    return onColors;
+  }
+  function getScopedSelector(selector, scope) {
+    if (!scope) return selector;
+    const scopeSelector = `:where(${scope})`;
+    return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
+  }
+  function upsertStyles(styleEl, styles) {
+    if (!styleEl) return;
+    styleEl.innerHTML = styles;
+  }
+  function getOrCreateStyleElement(id, cspNonce) {
+    if (!IN_BROWSER) return null;
+    let style = document.getElementById(id);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = id;
+      style.type = 'text/css';
+      if (cspNonce) style.setAttribute('nonce', cspNonce);
+      document.head.appendChild(style);
+    }
+    return style;
+  }
 
   // Composables
   function createTheme(options) {
     const parsedOptions = parseThemeOptions(options);
-    const name = vue.ref(parsedOptions.defaultTheme);
+    const name = vue.shallowRef(parsedOptions.defaultTheme);
     const themes = vue.ref(parsedOptions.themes);
     const computedThemes = vue.computed(() => {
       const acc = {};
       for (const [name, original] of Object.entries(themes.value)) {
-        const theme = acc[name] = {
+        const colors = {
+          ...original.colors,
+          ...genVariations(original.colors, parsedOptions.variations)
+        };
+        acc[name] = {
           ...original,
           colors: {
-            ...original.colors
+            ...colors,
+            ...genOnColors(colors)
           }
         };
-        if (parsedOptions.variations) {
-          for (const name of parsedOptions.variations.colors) {
-            const color = theme.colors[name];
-            if (!color) continue;
-            for (const variation of ['lighten', 'darken']) {
-              const fn = variation === 'lighten' ? lighten : darken;
-              for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
-              }
-            }
-          }
-        }
-        for (const color of Object.keys(theme.colors)) {
-          if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
-          const onColor = `on-${color}`;
-          const colorVal = parseColor(theme.colors[color]);
-          theme.colors[onColor] = getForeground(colorVal);
-        }
       }
       return acc;
     });
     const current = vue.computed(() => computedThemes.value[name.value]);
-    function createCssClass(lines, selector, content) {
-      lines.push(`${getScopedSelector(selector)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
-    }
-    function getScopedSelector(selector) {
-      if (!parsedOptions.scope) {
-        return selector;
-      }
-      const scopeSelector = `:where(${parsedOptions.scope})`;
-      if (selector === ':root') {
-        return scopeSelector;
-      }
-      return `${scopeSelector} ${selector}`;
-    }
     const styles = vue.computed(() => {
       const lines = [];
       if (current.value?.dark) {
-        createCssClass(lines, ':root', ['color-scheme: dark']);
+        createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
       }
-      createCssClass(lines, ':root', genCssVariables(current.value));
+      createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
       for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]);
+        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)], parsedOptions.scope);
       }
       const bgLines = [];
       const fgLines = [];
       const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
       for (const key of colors) {
-        if (/^on-[a-z]/.test(key)) {
-          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
+        if (key.startsWith('on-')) {
+          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
         } else {
-          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
-          createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
-          createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]);
+          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`], parsedOptions.scope);
+          createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
+          createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope);
         }
       }
       lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
-    function getHead() {
-      return {
-        style: [{
-          textContent: styles.value,
-          id: parsedOptions.stylesheetId,
-          nonce: parsedOptions.cspNonce || false
-        }]
-      };
-    }
     function install(app) {
       if (parsedOptions.isDisabled) return;
       const head = app._context.provides.usehead;
       if (head) {
+        function getHead() {
+          return {
+            style: [{
+              textContent: styles.value,
+              id: parsedOptions.stylesheetId,
+              nonce: parsedOptions.cspNonce || false
+            }]
+          };
+        }
         if (head.push) {
           const entry = head.push(getHead);
           if (IN_BROWSER) {
@@ -2489,7 +2540,6 @@
           }
         }
       } else {
-        let styleEl = IN_BROWSER ? document.getElementById(parsedOptions.stylesheetId) : null;
         if (IN_BROWSER) {
           vue.watch(styles, updateStyles, {
             immediate: true
@@ -2498,15 +2548,7 @@
           updateStyles();
         }
         function updateStyles() {
-          if (typeof document !== 'undefined' && !styleEl) {
-            const el = document.createElement('style');
-            el.type = 'text/css';
-            el.id = parsedOptions.stylesheetId;
-            if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
-            styleEl = el;
-            document.head.appendChild(styleEl);
-          }
-          if (styleEl) styleEl.innerHTML = styles.value;
+          upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
         }
       }
     }
@@ -2530,9 +2572,7 @@
     getCurrentInstance('provideTheme');
     const theme = vue.inject(ThemeSymbol, null);
     if (!theme) throw new Error('Could not find Vuetify theme injection');
-    const name = vue.computed(() => {
-      return props.theme ?? theme.name.value;
-    });
+    const name = vue.computed(() => props.theme ?? theme.name.value);
     const current = vue.computed(() => theme.themes.value[name.value]);
     const themeClasses = vue.computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
     const newTheme = {
@@ -2550,24 +2590,6 @@
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     return theme;
   }
-  function genCssVariables(theme) {
-    const lightOverlay = theme.dark ? 2 : 1;
-    const darkOverlay = theme.dark ? 1 : 2;
-    const variables = [];
-    for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor(value);
-      variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
-      if (!key.startsWith('on-')) {
-        variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
-      }
-    }
-    for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
-      const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-      variables.push(`--v-${key}: ${rgb ?? value}`);
-    }
-    return variables;
-  }
 
   const makeVAppProps = propsFactory({
     ...makeComponentProps(),
@@ -31542,7 +31564,7 @@
       };
     });
   }
-  const version$1 = "3.8.0-master.2025-04-06";
+  const version$1 = "3.8.1-master.2025-04-07";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31827,7 +31849,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.0-master.2025-04-06";
+  const version = "3.8.1-master.2025-04-07";
 
   /* eslint-disable local-rules/sort-imports */