# mwcpl

> Master's Web Component Pattern Library

Latest version **0.0.5** (published 2020-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install mwcpl
pnpm add mwcpl
yarn add mwcpl
bun add mwcpl
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-08-23 |
| First published | 2020-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 893.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Žan Ožbot |
| Maintainers | zanozbot |
| Keywords | stencil.js, web components, pattern library, master's project |

## Links

- npm: https://www.npmjs.com/package/mwcpl
- Repository: https://github.com/zanozbot/mwcpl
- Homepage: https://github.com/zanozbot/mwcpl#readme
- Issues: https://github.com/zanozbot/mwcpl/issues
- npm.io page: https://npm.io/package/mwcpl

## Recent versions

- 0.0.5 (latest) — 2020-08-23
- 0.0.4 — 2020-08-22
- 0.0.3 — 2020-08-20
- 0.0.2 — 2020-08-18
- 0.0.1 — 2020-08-18

## README

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# mwcpl

> Master's Web Components Pattern Library

A part of a master's thesis titled Development of universal web components using the Web Components standard.

## Components

| Name                                                                                                          | Issues                                                                                                              |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| [`<mwcpl-button>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-button)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Button%22)         |
| [`<mwcpl-dialog>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-dialog)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Dialog%22)         |
| [`<mwcpl-fab>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-fab)                       | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Fab%22)            |
| [`<mwcpl-form-field>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-form-field)         | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Form+Field%22)     |
| [`<mwcpl-list>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-list)                     | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+List%22)           |
| [`<mwcpl-list-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-list-item)           | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+List+Item%22)      |
| [`<mwcpl-navbar>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-navbar)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Navbar%22)         |
| [`<mwcpl-navbar-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-navbar-item)       | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Navbar+Item%22)    |
| [`<mwcpl-notification>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-notification)     | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Notification%22)   |
| [`<mwcpl-tree-view>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-tree-view)           | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Tree+View%22)      |
| [`<mwcpl-tree-view-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-tree-view-item) | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Tree+View+Item%22) | 

You can experience FOUC before hydration with some components. To fix that set their `visibility` to `hidden`, since this property is overridden upon hydration.<br>
Example

```css
mwcpl-dialog {
    visibility: hidden;
}
```

## Fonts

Master's Web Components Pattern Library defaults to using [Roboto](https://fonts.google.com/specimen/Roboto) font for the text, and the [FontAwesome](https://fontawesome.com/) font for the icons.

```html
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="https://kit.fontawesome.com/**.js" crossorigin="anonymous"></script>
```

## Quickstart

**1.) Install**

Install the pattern library from NPM

```
npm install mwcpl
```

**2.)**

Import the pattern library in you HTML.<br>
Stencil makes sure to lazy load only the used components on the page from the bundle.<br>
All elements can be controlled with JavaScript, just like built-in HTML elements.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master's Web Components Pattern Library</title>
    <script src='node_modules/mwcpl/dist/mwcpl.js'></script>
</head>
<body>
    <mwcpl-button id="button" label="Click here"></mwcpl-button>

    <script>
        const button = document.querySelector("#button");
        button.addEventListener('click', () => {
            alert("Clicked");
        });
    </script>
</body>
</html>
```

**3.) Serve**

Serve your HTML with e.g.

```
npm install http-server
```

and for Windows

```
.\node_modules\.bin\http-server.cmd .
```

or for Linux

```
.\node_modules\.bin\http-server .
```

## Contribute

To start contribute a new web component or a fix using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/zanozbot/mwcpl.git
cd mwcpl
```

and run:

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).

---
_Source: https://npm.io/package/mwcpl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._