313 lines
9.6 KiB
JavaScript
313 lines
9.6 KiB
JavaScript
|
import {
|
||
|
|
IN_BROWSER,
|
||
|
|
RGBtoHex,
|
||
|
|
createRange,
|
||
|
|
darken,
|
||
|
|
getCurrentInstance,
|
||
|
|
getForeground,
|
||
|
|
getLuma,
|
||
|
|
lighten,
|
||
|
|
mergeDeep,
|
||
|
|
parseColor,
|
||
|
|
propsFactory
|
||
|
|
} from "./chunk-I4KGD5X4.js";
|
||
|
|
import {
|
||
|
|
computed,
|
||
|
|
inject,
|
||
|
|
provide,
|
||
|
|
ref,
|
||
|
|
watch,
|
||
|
|
watchEffect
|
||
|
|
} from "./chunk-PD2AWGJV.js";
|
||
|
|
|
||
|
|
// node_modules/vuetify/lib/composables/theme.mjs
|
||
|
|
var ThemeSymbol = Symbol.for("vuetify:theme");
|
||
|
|
var makeThemeProps = propsFactory({
|
||
|
|
theme: String
|
||
|
|
}, "theme");
|
||
|
|
function genDefaults() {
|
||
|
|
return {
|
||
|
|
defaultTheme: "light",
|
||
|
|
variations: {
|
||
|
|
colors: [],
|
||
|
|
lighten: 0,
|
||
|
|
darken: 0
|
||
|
|
},
|
||
|
|
themes: {
|
||
|
|
light: {
|
||
|
|
dark: false,
|
||
|
|
colors: {
|
||
|
|
background: "#FFFFFF",
|
||
|
|
surface: "#FFFFFF",
|
||
|
|
"surface-bright": "#FFFFFF",
|
||
|
|
"surface-light": "#EEEEEE",
|
||
|
|
"surface-variant": "#424242",
|
||
|
|
"on-surface-variant": "#EEEEEE",
|
||
|
|
primary: "#1867C0",
|
||
|
|
"primary-darken-1": "#1F5592",
|
||
|
|
secondary: "#48A9A6",
|
||
|
|
"secondary-darken-1": "#018786",
|
||
|
|
error: "#B00020",
|
||
|
|
info: "#2196F3",
|
||
|
|
success: "#4CAF50",
|
||
|
|
warning: "#FB8C00"
|
||
|
|
},
|
||
|
|
variables: {
|
||
|
|
"border-color": "#000000",
|
||
|
|
"border-opacity": 0.12,
|
||
|
|
"high-emphasis-opacity": 0.87,
|
||
|
|
"medium-emphasis-opacity": 0.6,
|
||
|
|
"disabled-opacity": 0.38,
|
||
|
|
"idle-opacity": 0.04,
|
||
|
|
"hover-opacity": 0.04,
|
||
|
|
"focus-opacity": 0.12,
|
||
|
|
"selected-opacity": 0.08,
|
||
|
|
"activated-opacity": 0.12,
|
||
|
|
"pressed-opacity": 0.12,
|
||
|
|
"dragged-opacity": 0.08,
|
||
|
|
"theme-kbd": "#212529",
|
||
|
|
"theme-on-kbd": "#FFFFFF",
|
||
|
|
"theme-code": "#F5F5F5",
|
||
|
|
"theme-on-code": "#000000"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dark: {
|
||
|
|
dark: true,
|
||
|
|
colors: {
|
||
|
|
background: "#121212",
|
||
|
|
surface: "#212121",
|
||
|
|
"surface-bright": "#ccbfd6",
|
||
|
|
"surface-light": "#424242",
|
||
|
|
"surface-variant": "#a3a3a3",
|
||
|
|
"on-surface-variant": "#424242",
|
||
|
|
primary: "#2196F3",
|
||
|
|
"primary-darken-1": "#277CC1",
|
||
|
|
secondary: "#54B6B2",
|
||
|
|
"secondary-darken-1": "#48A9A6",
|
||
|
|
error: "#CF6679",
|
||
|
|
info: "#2196F3",
|
||
|
|
success: "#4CAF50",
|
||
|
|
warning: "#FB8C00"
|
||
|
|
},
|
||
|
|
variables: {
|
||
|
|
"border-color": "#FFFFFF",
|
||
|
|
"border-opacity": 0.12,
|
||
|
|
"high-emphasis-opacity": 1,
|
||
|
|
"medium-emphasis-opacity": 0.7,
|
||
|
|
"disabled-opacity": 0.5,
|
||
|
|
"idle-opacity": 0.1,
|
||
|
|
"hover-opacity": 0.04,
|
||
|
|
"focus-opacity": 0.12,
|
||
|
|
"selected-opacity": 0.08,
|
||
|
|
"activated-opacity": 0.12,
|
||
|
|
"pressed-opacity": 0.16,
|
||
|
|
"dragged-opacity": 0.08,
|
||
|
|
"theme-kbd": "#212529",
|
||
|
|
"theme-on-kbd": "#FFFFFF",
|
||
|
|
"theme-code": "#343434",
|
||
|
|
"theme-on-code": "#CCCCCC"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function parseThemeOptions() {
|
||
|
|
var _a, _b;
|
||
|
|
let options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : genDefaults();
|
||
|
|
const defaults = genDefaults();
|
||
|
|
if (!options) return {
|
||
|
|
...defaults,
|
||
|
|
isDisabled: true
|
||
|
|
};
|
||
|
|
const themes = {};
|
||
|
|
for (const [key, theme] of Object.entries(options.themes ?? {})) {
|
||
|
|
const defaultTheme = theme.dark || key === "dark" ? (_a = defaults.themes) == null ? void 0 : _a.dark : (_b = defaults.themes) == null ? void 0 : _b.light;
|
||
|
|
themes[key] = mergeDeep(defaultTheme, theme);
|
||
|
|
}
|
||
|
|
return mergeDeep(defaults, {
|
||
|
|
...options,
|
||
|
|
themes
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function createTheme(options) {
|
||
|
|
const parsedOptions = parseThemeOptions(options);
|
||
|
|
const name = ref(parsedOptions.defaultTheme);
|
||
|
|
const themes = ref(parsedOptions.themes);
|
||
|
|
const computedThemes = computed(() => {
|
||
|
|
const acc = {};
|
||
|
|
for (const [name2, original] of Object.entries(themes.value)) {
|
||
|
|
const theme = acc[name2] = {
|
||
|
|
...original,
|
||
|
|
colors: {
|
||
|
|
...original.colors
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if (parsedOptions.variations) {
|
||
|
|
for (const name3 of parsedOptions.variations.colors) {
|
||
|
|
const color = theme.colors[name3];
|
||
|
|
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[`${name3}-${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 = computed(() => computedThemes.value[name.value]);
|
||
|
|
const styles = computed(() => {
|
||
|
|
const lines = [];
|
||
|
|
if (current.value.dark) {
|
||
|
|
createCssClass(lines, ":root", ["color-scheme: dark"]);
|
||
|
|
}
|
||
|
|
createCssClass(lines, ":root", genCssVariables(current.value));
|
||
|
|
for (const [themeName, theme] of Object.entries(computedThemes.value)) {
|
||
|
|
createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? "dark" : "normal"}`, ...genCssVariables(theme)]);
|
||
|
|
}
|
||
|
|
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`]);
|
||
|
|
} 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})`]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
lines.push(...bgLines, ...fgLines);
|
||
|
|
return lines.map((str, i) => i === 0 ? str : ` ${str}`).join("");
|
||
|
|
});
|
||
|
|
function getHead() {
|
||
|
|
return {
|
||
|
|
style: [{
|
||
|
|
children: styles.value,
|
||
|
|
id: "vuetify-theme-stylesheet",
|
||
|
|
nonce: parsedOptions.cspNonce || false
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function install(app) {
|
||
|
|
if (parsedOptions.isDisabled) return;
|
||
|
|
const head = app._context.provides.usehead;
|
||
|
|
if (head) {
|
||
|
|
if (head.push) {
|
||
|
|
const entry = head.push(getHead);
|
||
|
|
if (IN_BROWSER) {
|
||
|
|
watch(styles, () => {
|
||
|
|
entry.patch(getHead);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (IN_BROWSER) {
|
||
|
|
head.addHeadObjs(computed(getHead));
|
||
|
|
watchEffect(() => head.updateDOM());
|
||
|
|
} else {
|
||
|
|
head.addHeadObjs(getHead());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let updateStyles = function() {
|
||
|
|
if (typeof document !== "undefined" && !styleEl) {
|
||
|
|
const el = document.createElement("style");
|
||
|
|
el.type = "text/css";
|
||
|
|
el.id = "vuetify-theme-stylesheet";
|
||
|
|
if (parsedOptions.cspNonce) el.setAttribute("nonce", parsedOptions.cspNonce);
|
||
|
|
styleEl = el;
|
||
|
|
document.head.appendChild(styleEl);
|
||
|
|
}
|
||
|
|
if (styleEl) styleEl.innerHTML = styles.value;
|
||
|
|
};
|
||
|
|
let styleEl = IN_BROWSER ? document.getElementById("vuetify-theme-stylesheet") : null;
|
||
|
|
if (IN_BROWSER) {
|
||
|
|
watch(styles, updateStyles, {
|
||
|
|
immediate: true
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
updateStyles();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const themeClasses = computed(() => parsedOptions.isDisabled ? void 0 : `v-theme--${name.value}`);
|
||
|
|
return {
|
||
|
|
install,
|
||
|
|
isDisabled: parsedOptions.isDisabled,
|
||
|
|
name,
|
||
|
|
themes,
|
||
|
|
current,
|
||
|
|
computedThemes,
|
||
|
|
themeClasses,
|
||
|
|
styles,
|
||
|
|
global: {
|
||
|
|
name,
|
||
|
|
current
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function provideTheme(props) {
|
||
|
|
getCurrentInstance("provideTheme");
|
||
|
|
const theme = inject(ThemeSymbol, null);
|
||
|
|
if (!theme) throw new Error("Could not find Vuetify theme injection");
|
||
|
|
const name = computed(() => {
|
||
|
|
return props.theme ?? theme.name.value;
|
||
|
|
});
|
||
|
|
const current = computed(() => theme.themes.value[name.value]);
|
||
|
|
const themeClasses = computed(() => theme.isDisabled ? void 0 : `v-theme--${name.value}`);
|
||
|
|
const newTheme = {
|
||
|
|
...theme,
|
||
|
|
name,
|
||
|
|
current,
|
||
|
|
themeClasses
|
||
|
|
};
|
||
|
|
provide(ThemeSymbol, newTheme);
|
||
|
|
return newTheme;
|
||
|
|
}
|
||
|
|
function useTheme() {
|
||
|
|
getCurrentInstance("useTheme");
|
||
|
|
const theme = inject(ThemeSymbol, null);
|
||
|
|
if (!theme) throw new Error("Could not find Vuetify theme injection");
|
||
|
|
return theme;
|
||
|
|
}
|
||
|
|
function createCssClass(lines, selector, content) {
|
||
|
|
lines.push(`${selector} {
|
||
|
|
`, ...content.map((line) => ` ${line};
|
||
|
|
`), "}\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) : void 0;
|
||
|
|
const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : void 0;
|
||
|
|
variables.push(`--v-${key}: ${rgb ?? value}`);
|
||
|
|
}
|
||
|
|
return variables;
|
||
|
|
}
|
||
|
|
|
||
|
|
export {
|
||
|
|
ThemeSymbol,
|
||
|
|
makeThemeProps,
|
||
|
|
createTheme,
|
||
|
|
provideTheme,
|
||
|
|
useTheme
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=chunk-CYOEVGGH.js.map
|