@sandlada/vue-mdc
Version:
56 lines (55 loc) • 1.77 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import "vue";
import css from "./styles/typography.module.scss.js";
import "./typography.definition.js";
class TypographyDirective {
static variants = [
"label-small",
"label-medium",
"label-large",
"body-small",
"body-medium",
"body-large",
"title-small",
"title-medium",
"title-large",
"headline-small",
"headline-medium",
"headline-large",
"display-small",
"display-medium",
"display-large"
];
static directive = {
mounted: (el, binding) => {
let typoName = binding.value;
const isIncluded = this.variants.includes(typoName);
if (!isIncluded) {
console.warn(`Invalid v-typography input parameter '${typoName}', parameter type should be TTypography(${this.variants.join(" | ")}). If the input parameter is invalid, the default value is body-medium.`);
typoName = "body-medium";
}
el.classList.add(css.typography, css[typoName]);
},
updated: (el, binding) => {
if (binding.oldValue === binding.value)
return;
let typoName = binding.value;
const isIncluded = this.variants.includes(typoName);
if (!isIncluded) {
console.warn(`Invalid v-typography input parameter '${typoName}', parameter type should be TTypography(${this.variants.join(" | ")}). If the input parameter is invalid, the default value is body-medium.`);
typoName = "body-medium";
}
el.classList.remove(css.typography, css[typoName]);
el.classList.add(css.typography, css[typoName]);
}
};
}
const vTypography = TypographyDirective.directive;
export {
vTypography
};
//# sourceMappingURL=typography-directive.js.map