@sandlada/vue-mdc
Version:
122 lines (121 loc) • 5.78 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { createVNode, render } from "vue";
import { Ripple } from "./ripple.js";
import css from "./styles/ripple.module.scss.js";
class RippleDirective {
static createRippleElement = (parent) => {
const rippleComponent = createVNode(Ripple);
render(rippleComponent, parent);
};
static queryRippleElement = (el) => {
return el.querySelector(`.${css.ripple}[data-component="ripple"]`);
};
static isRippleColorProperty = (color) => {
return typeof color === "string";
};
static isRippleOpacityProperty = (opacity) => {
return typeof opacity === "number" && (opacity >= 0 && opacity <= 1);
};
static rippleDirective = {
beforeMount: (el) => {
this.createRippleElement(el);
},
mounted: (el) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
},
updated: (el) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
},
beforeUnmount: (el) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector \`div.${css.ripple}[data-standalone="true"]\` was not found. This is an internal bug, please report it.`);
}
}
};
static colorProgress = (state) => ({
mounted: (el, binding) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
const isColorProperty = this.isRippleColorProperty(binding.value);
if (isColorProperty) {
queriedRippleElement.style.setProperty(`--md-ripple-${state}-color`, `${binding.value}`);
} else {
console.warn(`The parameters of v-ripple-hover-color and v-ripple-pressed-color only accept strings and must be valid CSS color values.`);
}
},
updated: (el, binding) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
const isColorProperty = this.isRippleColorProperty(binding.value);
if (isColorProperty) {
queriedRippleElement.style.setProperty(`--md-ripple-${state}-color`, `${binding.value}`);
} else {
console.warn(`The parameters of v-ripple-hover-color and v-ripple-pressed-color only accept strings and must be valid CSS color values.`);
}
}
});
static hoverColorDirective = this.colorProgress("hover");
static pressedColorDirective = this.colorProgress("pressed");
static opacityProgress = (state) => ({
mounted: (el, binding) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
const isOpacityProperty = this.isRippleOpacityProperty(binding.value);
if (isOpacityProperty) {
queriedRippleElement.style.setProperty(`--md-ripple-${state}-opacity`, `${binding.value}`);
} else {
console.warn(`The parameters of v-ripple-hover-opacity and v-ripple-pressed-opacity only accept numbers, ranging from 0 to 1.`);
}
},
updated: (el, binding) => {
const queriedRippleElement = this.queryRippleElement(el);
if (queriedRippleElement === null || typeof queriedRippleElement === "undefined") {
console.warn(`The DOM object with the target selector 'div.\${css.ripple}[data-standalone="true"]} was not found. This is an internal bug, please report it.`);
return;
}
const isOpacityProperty = this.isRippleOpacityProperty(binding.value);
if (isOpacityProperty) {
queriedRippleElement.style.setProperty(`--md-ripple-${state}-opacity`, `${binding.value}`);
} else {
console.warn(`The parameters of v-ripple-hover-opacity and v-ripple-pressed-opacity only accept numbers, ranging from 0 to 1.`);
}
}
});
static hoverOpacityDirective = this.opacityProgress("hover");
static pressedOpacityDirective = this.opacityProgress("pressed");
}
const vRipple = RippleDirective.rippleDirective;
const vRippleHoverColor = RippleDirective.hoverColorDirective;
const vRipplePressedColor = RippleDirective.pressedColorDirective;
const vRippleHoverOpacity = RippleDirective.hoverOpacityDirective;
const vRipplePressedOpacity = RippleDirective.pressedOpacityDirective;
export {
vRipple,
vRippleHoverColor,
vRippleHoverOpacity,
vRipplePressedColor,
vRipplePressedOpacity
};
//# sourceMappingURL=ripple-directive.js.map