neumorphic-peripheral
Version:
A lightweight, framework-agnostic JavaScript/TypeScript library for beautiful neumorphic styling
95 lines (94 loc) • 3.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardComponent = void 0;
exports.card = card;
const base_1 = require("./base");
const utils_1 = require("../utils");
class CardComponent extends base_1.BaseComponent {
constructor(element, config = {}) {
super(element, config);
this._cardConfig = {
variant: 'raised',
size: 'md',
...config
};
}
init() {
this.applyBaseStyles();
this.applyCardStyles();
}
applyCardStyles() {
(0, utils_1.addClassName)(this._element, 'card');
(0, utils_1.addClassName)(this._element, `card-${this._cardConfig.variant}`);
(0, utils_1.addClassName)(this._element, `card-${this._cardConfig.size}`);
// Apply size-based padding
const padding = this._cardConfig.padding || this.getSizePadding();
// Apply core card styles
this._element.style.padding = padding;
this._element.style.boxShadow = this.createShadowStyle(this._cardConfig.variant);
this._element.style.display = this._element.style.display || 'block';
this._element.style.position = 'relative';
// Add hover effect for raised cards
if (this._cardConfig.variant === 'raised') {
this.setupHoverEffect();
}
}
getSizePadding() {
return (0, utils_1.getSizeValue)(this._cardConfig.size, 'padding');
}
setupHoverEffect() {
const originalShadow = this.createShadowStyle(this._cardConfig.variant);
const hoverShadow = this.createHoverShadowStyle(this._cardConfig.variant);
this.addEventListener(this._element, 'mouseenter', () => {
if (!this._config.disabled) {
this._element.style.boxShadow = hoverShadow;
this._element.style.transform = 'translateY(-1px)';
}
});
this.addEventListener(this._element, 'mouseleave', () => {
this._element.style.boxShadow = originalShadow;
this._element.style.transform = 'translateY(0)';
});
}
onUpdate(newConfig) {
const oldCardConfig = { ...this._cardConfig };
this._cardConfig = { ...this._cardConfig, ...newConfig };
// Update variant if changed
if (newConfig.variant && newConfig.variant !== oldCardConfig.variant) {
this._element.classList.remove(`np-card-${oldCardConfig.variant}`);
(0, utils_1.addClassName)(this._element, `card-${newConfig.variant}`);
this._element.style.boxShadow = this.createShadowStyle(newConfig.variant);
}
// Update size if changed
if (newConfig.size && newConfig.size !== oldCardConfig.size) {
this._element.classList.remove(`np-card-${oldCardConfig.size}`);
(0, utils_1.addClassName)(this._element, `card-${newConfig.size}`);
this._element.style.padding = newConfig.padding || this.getSizePadding();
}
// Update padding if changed
if (newConfig.padding && newConfig.padding !== oldCardConfig.padding) {
this._element.style.padding = newConfig.padding;
}
}
// Public API methods
setVariant(variant) {
this.update({ variant });
}
setSize(size) {
this.update({ size });
}
setPadding(padding) {
this.update({ padding });
}
getVariant() {
return this._cardConfig.variant;
}
getSize() {
return this._cardConfig.size;
}
}
exports.CardComponent = CardComponent;
// Factory function for easy usage
function card(element, config = {}) {
return new CardComponent(element, config);
}