card-esm

Lightweight TypeScript card components with ESM support.

Features

• 4 core card component types
• 5 visual style variants for each component
• Full TypeScript type definitions
• Framework-agnostic design
• Compatible with Vue3 and Angular15+
• Lightweight implementation with no complex rendering logic

Installation

npm install card-esm

Components

1. BasicCard

Simple card component for displaying content.

import { createBasicCard } from 'card-esm';

const card = createBasicCard({
  variant: 'default',
  children: 'Hello, World!'
});

card.mount(document.getElementById('app'));

2. ImageCard

Card component with image support.

import { createImageCard } from 'card-esm';

const card = createImageCard({
  variant: 'default',
  imageSrc: 'path/to/image.jpg',
  imageAlt: 'Card image',
  title: 'Card Title',
  description: 'Card description'
});

card.mount(document.getElementById('app'));

3. ListCard

Card component with list items.

import { createListCard } from 'card-esm';

const card = createListCard({
  variant: 'default',
  title: 'My List',
  items: [
    { id: 1, content: 'Item 1', icon: '📌' },
    { id: 2, content: 'Item 2', icon: '📌' },
    { id: 3, content: 'Item 3', icon: '📌' }
  ]
});

card.mount(document.getElementById('app'));

4. HoverCard

Card component with hover effects.

import { createHoverCard } from 'card-esm';

const card = createHoverCard({
  variant: 'default',
  children: 'Hover over me!',
  hoverContent: 'Hover content',
  hoverDelay: 200
});

card.mount(document.getElementById('app'));

Variants

Each component supports 5 visual style variants:

• default - Standard styling with shadow
• simple - Minimal styling without shadow
• border - Border-focused styling
• shadow - Enhanced shadow effect
• highlight - Highlighted styling with accent color

Usage in Vue3

<script setup>
import { onMounted } from 'vue';
import { createBasicCard } from 'card-esm';

onMounted(() => {
  const card = createBasicCard({
    variant: 'default',
    children: 'Vue3 Card'
  });
  card.mount(document.getElementById('card-container'));
});
</script>

<template>
  <div id="card-container"></div>
</template>

Usage in Angular15+

import { Component, AfterViewInit, ElementRef } from '@angular/core';
import { createBasicCard } from 'card-esm';

@Component({
  selector: 'app-card',
  template: '<div #cardContainer></div>'
})
export class CardComponent implements AfterViewInit {
  @ViewChild('cardContainer', { static: true }) cardContainer!: ElementRef;

  ngAfterViewInit() {
    const card = createBasicCard({
      variant: 'default',
      children: 'Angular Card'
    });
    card.mount(this.cardContainer.nativeElement);
  }
}

API Reference

Types

type CardVariant = 'default' | 'simple' | 'border' | 'shadow' | 'highlight';

interface BaseCardProps {
  variant?: CardVariant;
  className?: string;
  style?: Record<string, string | number>;
  children?: React.ReactNode | string;
}

interface ImageCardProps extends BaseCardProps {
  imageSrc: string;
  imageAlt?: string;
  title?: string;
  description?: string;
}

interface ListItem {
  id: string | number;
  content: string;
  icon?: string;
}

interface ListCardProps extends BaseCardProps {
  title?: string;
  items: ListItem[];
}

interface HoverCardProps extends BaseCardProps {
  hoverContent?: React.ReactNode | string;
  hoverDelay?: number;
}

Component Methods

All card components share common methods:

• getElement(): HTMLElement - Get the card DOM element
• setVariant(variant: CardVariant): void - Change the visual variant
• mount(container: HTMLElement): void - Mount the card to a container
• unmount(): void - Remove the card from the DOM

Component-specific methods:

ImageCard:

• setImage(src: string, alt?: string): void - Update the image
• setTitle(title: string): void - Update the title
• setDescription(description: string): void - Update the description

ListCard:

• setItems(items: ListItem[]): void - Update all items
• addItem(item: ListItem): void - Add a single item
• removeItem(id: string | number): void - Remove an item by ID
• setTitle(title: string): void - Update the title

HoverCard:

• setHoverContent(content: string | HTMLElement): void - Update hover content
• setHoverDelay(delay: number): void - Update hover delay
• setContent(content: string | HTMLElement): void - Update main content
• destroy(): void - Clean up event listeners and remove from DOM

Building

npm run build

License

MIT