yyf_aka-web-components
Version:
A collection of modern Web Components including counter, data table and custom button components
274 lines (197 loc) • 7.35 kB
Markdown
# 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
```bash
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()`
```html
<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()`
```html
<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>`
**Attributes**: `label`, `variant` (primary|secondary|danger|outline), `size` (sm|md|lg), `disabled`, `loading`
**Events**: `button-click`
**Methods**: `setLoading(boolean)`, `setDisabled(boolean)`, `focus()`
```html
<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
```javascript
import { CounterComponent, DataTable, CustomButton } from 'yyf_aka-web-components';
// Components are automatically registered
```
### CommonJS
```javascript
const { CounterComponent, DataTable, CustomButton } = require('yyf_aka-web-components');
// Components are automatically registered
```
### Browser (UMD)
```html
<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
```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: 'john@example.com' },
{ id: 2, name: 'Jane', email: 'jane@example.com' }
];
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
```bash
npm run build
```
### Development Mode
```bash
npm run dev
```
### Test
```bash
npm test
```
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Built with modern Web Components standards
- Inspired by modern UI/UX design principles
- Uses vanilla JavaScript for maximum compatibility