@sandlada/vue-mdc
Version:
58 lines (57 loc) • 2.72 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import "vue";
import "./elevation.definition.js";
import css from "./styles/elevation.module.scss.js";
class ElevationDirective {
static wrapElevationLevel = (binding) => {
if (typeof binding.value === "undefined") {
console.warn(`It is recommended to specify a parameter for v-elevation, and the recommended parameters range from 0 to 5. If you do not specify a parameter, the default value is 3.`);
return `1`;
} else if (binding.value >= 0 && binding.value <= 5) {
return `${binding.value}`;
} else if (binding.value < 0 || binding.value > 5) {
console.warn(`It is recommended to set the value of the level setting of the component of Elevation to 0 to 5. If an incorrect argument is provided, the default value is \`${binding.value < 0 ? 0 : 5}\``);
return `${binding.value < 0 ? 0 : 5}`;
} else {
console.warn(`Incorrect v-elevation data provided \`${binding.value}\`. To safely set elevation, if an incorrect type argument is provided, the default value is 0.`);
return `0`;
}
};
static queryElevationElementFromEl = (el) => {
return el.querySelector(`span.${css.elevation}[data-standalone="true"]`);
};
static createElevationElement = () => {
const elevationElement = document.createElement("span");
elevationElement.setAttribute("data-standalone", "true");
elevationElement.setAttribute("aria-hidden", "true");
elevationElement.classList.add(css.elevation);
return elevationElement;
};
static directive = {
beforeMount: (el) => {
el.appendChild(this.createElevationElement());
},
mounted: (el, binding) => {
const queriedElevationElement = this.queryElevationElementFromEl(el);
const elevationElement = typeof queriedElevationElement !== "undefined" && queriedElevationElement !== null ? queriedElevationElement : this.createElevationElement();
const level = this.wrapElevationLevel(binding);
elevationElement.style.setProperty("--md-elevation-level", level);
},
updated: (el, binding) => {
const queriedElevationElement = this.queryElevationElementFromEl(el);
const elevationElement = typeof queriedElevationElement !== "undefined" && queriedElevationElement !== null ? queriedElevationElement : this.createElevationElement();
const level = this.wrapElevationLevel(binding);
elevationElement.style.removeProperty("--md-elevation-level");
elevationElement.style.setProperty("--md-elevation-level", level);
}
};
}
const vElevation = ElevationDirective.directive;
export {
vElevation
};
//# sourceMappingURL=elevation-directive.js.map