Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manufosela/board-cell
Board Layer webcomponent
https://github.com/manufosela/board-cell
Last synced: about 1 month ago
JSON representation
Board Layer webcomponent
- Host: GitHub
- URL: https://github.com/manufosela/board-cell
- Owner: manufosela
- License: mit
- Created: 2020-12-26T10:50:15.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-15T18:07:06.000Z (about 1 year ago)
- Last Synced: 2024-10-01T14:56:04.800Z (about 1 month ago)
- Language: JavaScript
- Size: 855 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i board-cell
```
## Usage
From npm package:
```html
import 'board-cell/board-cell.js';
```
Or from skypack cdn:
```html
import boardCell from 'https://cdn.skypack.dev/board-cell';
```
To create simple default board-cell 5x5 board with 50px cell size:
```html
```
To create board-cell 10x10 with 50px cell size:
```html
```
To create more complete board-cell 10x10 with 50px cell size, with title, id and onclick event callback:
```html
```
Where: cellclick is a callback function defined by the user
## Linting and formatting
To scan the project for linting and formatting errors, run
```bash
npm run lint
```
To automatically fix linting and formatting errors, run
```bash
npm run format
```
## Testing with Web Test Runner
To execute a single test run:
```bash
npm run test
```
To run the tests in interactive watch mode run:
```bash
npm run test:watch
```
## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```
To build a production version of Storybook, run
```bash
npm run storybook:build
```
## Tooling configs
For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
# USE
## Global Events
The webcomponent listens the next global events:
- board-cell-refresh: to show the data from the board
- board-cell-change-data: to change the data of the board, but not refresh the board drawing
- board-cell-change-all-cell-data: to change the data of all the cells, but not refresh the board drawing
- board-cell-change-cell-content: to change the content of a cell and show it in the board
- board-cell-clear-cell-content: to clear the content of a cell
- board-cell-clear-all-content: to clear the content of all cells
- board-cell-content-clear-row: to clear the content of all cells in a row
- board-cell-content-clear-col: to clear the content of all cells in a column
All events fired must have the following structure the **id** of the web-component.
## Local events
The webcomponent listen the nex local events:
- click: When a cell is clicked execute the `onClick` callback, passed by attribute.
- mouseover and mouseout: if the **hover-cell** attribute is true.
## Events disptach
- wc-ready: dispatch this event when firstUpdate is done