@sandlada/vue-mdc
Version:
85 lines (84 loc) • 2.13 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent } from "vue";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { isServer } from "../../utils/is-server.js";
import { DefaultThemes } from "./default-theme-solutions.js";
class ThemeProviderComponent {
name = `${componentNamePrefix}-provider`;
props = {
/**
* Give a function, return a style string.
*/
generateCallback: {
default: null,
type: Function,
required: false
},
theme: {
default: null,
type: String,
required: false
}
};
slots = {};
emits = ["theme-change"];
component = /* @__PURE__ */ defineComponent({
name: this.name,
props: this.props,
slots: this.slots,
emits: this.emits,
data: (props) => ({
_theme: props.theme,
_generateCallback: props.generateCallback
}),
mounted() {
if (isServer()) {
return;
}
this.handleThemeChange();
},
beforeUpdate() {
let changed = false;
if (this._generateCallback !== this.generateCallback) {
this._generateCallback = this.generateCallback;
changed = true;
}
if (this._theme !== this.theme) {
this._theme = this.theme;
changed = true;
}
if (changed) {
this.handleThemeChange();
}
},
updated() {
},
methods: {
handleThemeChange() {
const styleText = this._theme ?? this._generateCallback?.() ?? DefaultThemes.GreenLight;
const event = new CustomEvent("theme-change", {
bubbles: true,
cancelable: false,
composed: true,
detail: {
styleText
}
});
this.$emit("theme-change", event);
document.dispatchEvent(event);
}
},
render() {
return this.$slots.default && this.$slots.default();
}
});
}
const ThemeProvider = new ThemeProviderComponent().component;
export {
ThemeProvider
};
//# sourceMappingURL=theme-provider.js.map