yyf_aka-web-components

v1.1.0

Published

a year ago

A collection of modern Web Components including counter, data table and custom button components

0High
0Medium
0Low

yyf_aka

web-components custom-elements shadow-dom counter data-table button custom-button vanilla-js es6 modern-web

Web Components Demo

A collection of modern Web Components including counter, data table and custom button components, built with vanilla JavaScript and Shadow DOM.

🚀 Features

Custom Elements: Create reusable HTML components
Shadow DOM: Encapsulate styles and behavior, avoid style conflicts
HTML Templates: Use <slot> elements for content distribution
Responsive Design: Adapt to different screen sizes
Modern UI: Beautiful gradient colors and animation effects

📦 Installation

npm install yyf_aka-web-components

🎯 Components

1. Counter Component

A basic counter component with increment, decrement, reset, and step switching capabilities.

Tag: <counter-component>

Attributes: initial, step, min, max

Events: counter-change

Methods: getValue(), setValue(), reset(), increment(), decrement()

<counter-component initial="5" step="2" min="0" max="20"></counter-component>

2. Data Table

A feature-complete data table with search, sort, pagination, and custom column rendering.

Tag: <data-table>

Attributes: page-size, searchable, sortable, pagination

Events: row-added, row-updated, row-deleted, row-view, row-edit

Methods: setData(), setColumns(), addRow(), updateRow(), deleteRow()

<data-table page-size="5" searchable="true" sortable="true" pagination="true"></data-table>

3. Custom Button

A versatile button component supporting variants, sizes, loading/disabled states, and events.

Tag: <custom-button>

Events: button-click

Methods: setLoading(boolean), setDisabled(boolean), focus()

<custom-button variant="primary" size="md" label="Submit"></custom-button>
<custom-button variant="outline">Custom Content</custom-button>
<custom-button variant="danger" size="lg" loading label="Processing"></custom-button>

🛠️ Usage

ES6 Modules

import { CounterComponent, DataTable, CustomButton } from 'yyf_aka-web-components';

// Components are automatically registered

CommonJS

const { CounterComponent, DataTable, CustomButton } = require('yyf_aka-web-components');

// Components are automatically registered

Browser (UMD)

<script src="node_modules/yyf_aka-web-components/dist/index.umd.js"></script>
<script>
  // Components are automatically registered
  // window.CustomButton is also available for direct access
  // e.g., document.querySelector('custom-button').setLoading(true)
</script>

Direct HTML

<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/yyf_aka-web-components/dist/index.umd.js"></script>
</head>
<body>
    <counter-component initial="10" step="5"></counter-component>
    
    <data-table page-size="3" searchable="true"></data-table>

    <custom-button id="btn" variant="primary" size="md" label="Save"></custom-button>
    
    <script>
        // Set up data table
        const dataTable = document.querySelector('data-table');
        const sampleData = [
            { id: 1, name: 'John', email: '[email protected]' },
            { id: 2, name: 'Jane', email: '[email protected]' }
        ];
        
        const columns = [
            { key: 'id', label: 'ID' },
            { key: 'name', label: 'Name' },
            { key: 'email', label: 'Email' }
        ];
        
        dataTable.setData(sampleData);
        dataTable.setColumns(columns);

        // Custom Button demo
        const btn = document.getElementById('btn');
        btn.addEventListener('button-click', (e) => {
          console.log('button clicked', e.detail);
        });
    </script>
</body>
</html>

🎨 Technical Features

Shadow DOM

Style encapsulation, avoid global style pollution
Component internal style isolation
Use ::slotted() selector to style slot content

Custom Events

Use CustomEvent for component communication
Event bubbling and composition support
Detailed event data passing

Lifecycle Methods

connectedCallback(): Called when component is mounted
disconnectedCallback(): Called when component is unmounted
attributeChangedCallback(): Called when attributes change

Responsive Design

CSS media queries for mobile devices
Flexible layout system
Touch-friendly interaction design

🌟 Browser Support

Chrome 67+
Firefox 63+
Safari 10.1+
Edge 79+

📚 API Reference

Counter Component

Properties

initial: Initial value (default: 0)
step: Step size (default: 1)
min: Minimum value (optional)
max: Maximum value (optional)

Methods

getValue(): Get current value
setValue(value): Set new value
reset(): Reset to initial value
increment(): Increase by step
decrement(): Decrease by step

Events

counter-change: Fired when value changes
- detail.action: Action type ('increment', 'decrement', 'reset', 'set')
- detail.value: New value
- detail.oldValue: Previous value

Data Table

Properties

page-size: Rows per page (default: 10)
searchable: Enable search (default: true)
sortable: Enable sorting (default: true)
pagination: Enable pagination (default: true)

Methods

setData(data): Set table data
setColumns(columns): Set column definitions
addRow(row): Add new row
updateRow(index, row): Update row at index
deleteRow(index): Delete row at index
getData(): Get all data
getFilteredData(): Get filtered data

Events

row-added: Fired when row is added
row-updated: Fired when row is updated
row-deleted: Fired when row is deleted
row-view: Fired when row is viewed
row-edit: Fired when row is edited

Custom Button

Properties / Attributes

label: Text label for the button (fallback when no slot content)
variant: Visual style, one of primary | secondary | danger | outline (default: primary)
size: Size, one of sm | md | lg (default: md)
disabled: Disable interaction when present
loading: Show loading spinner and disable interaction when present

Methods

setLoading(isLoading: boolean): Toggle loading state
setDisabled(isDisabled: boolean): Toggle disabled state
focus(): Focus the inner native button

Events

button-click: Fired when the button is clicked (and not disabled/loading)
- detail.label: Button label
- detail.variant: Variant name
- detail.size: Size name

🔧 Development

Build

npm run build

Development Mode

npm run dev

Test

npm test

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with modern Web Components standards
Inspired by modern UI/UX design principles
Uses vanilla JavaScript for maximum compatibility

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Web Components Demo

🚀 Features

📦 Installation

🎯 Components

1. Counter Component

2. Data Table

3. Custom Button

🛠️ Usage

ES6 Modules

CommonJS

Browser (UMD)

Direct HTML

🎨 Technical Features

Shadow DOM

Custom Events

Lifecycle Methods

Responsive Design

🌟 Browser Support

📚 API Reference

Counter Component

Properties

Methods

Events

Data Table

Properties

Methods

Events

Custom Button

Properties / Attributes

Methods

Events

🔧 Development

Build

Development Mode

Test

🤝 Contributing

📄 License

🙏 Acknowledgments