https://github.com/johnsonandjohnson/mettle-components
Mettle components are a collection of custom elements based of the Web Components spec to be used in front-end JavaScript applications.
https://github.com/johnsonandjohnson/mettle-components
components custom-elements frond-end javascript web web-components
Last synced: 9 months ago
JSON representation
Mettle components are a collection of custom elements based of the Web Components spec to be used in front-end JavaScript applications.
- Host: GitHub
- URL: https://github.com/johnsonandjohnson/mettle-components
- Owner: johnsonandjohnson
- License: apache-2.0
- Created: 2021-10-15T13:57:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-16T13:54:24.000Z (almost 3 years ago)
- Last Synced: 2025-01-16T07:53:02.985Z (over 1 year ago)
- Topics: components, custom-elements, frond-end, javascript, web, web-components
- Language: JavaScript
- Homepage: https://johnsonandjohnson.github.io/mettle-components/?path=/docs/welcome-introduction--page
- Size: 8.23 MB
- Stars: 8
- Watchers: 6
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Mettle Custom Elements
[](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/codeql-analysis.yml)
[](https://www.npmjs.com/package/@johnsonandjohnson/mettle-components)
[](https://github.com/johnsonandjohnson/mettle-components/actions/workflows/unit-test.yml)
[](https://codecov.io/gh/johnsonandjohnson/mettle-components)
A Suite of custom elements and services to be used on a front-end JavaScript application.
These are built under the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) spec. These tags can be dropped into any front end application like html. You can use this package in addition to your own or with other custom element packages.
> [Mettle Components Documentation](https://johnsonandjohnson.github.io/mettle-components/?path=/docs/welcome-introduction--page)
### Goals
- [x] Use native JS for little to no dependency
- [x] Cross browser support
- [x] Flexible for CSS
- [x] Unit tested
## Project Installation
```sh
$ npm install @johnsonandjohnson/mettle-components --save
```
To include the components to your code
```js
import '@johnsonandjohnson/mettle-components'
```
### Quick Sample
```html
Mettle Component Example
Hover or tap me for tip
Slot HTML/Text
```
To include services to your code
```js
import {
HtmlMarker,
HttpFetch,
I18n,
Observable,
Roles,
Router
} from '@johnsonandjohnson/mettle-components/services'
```
### Quick Sample
```html
Mettle Services Example
import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/services.js'
(async () => {
const htmlMarker = new HtmlMarker()
const htmlString = '<button disabled="${disabled}">Random Disabled</button>'
const div = document.querySelector('#render')
let model = {
disabled: 'disabled'
}
await htmlMarker.render(div, htmlString, model)
window.setInterval(() => {
model.disabled = (Math.random() >= 0.5) ? 'disabled' : ''
htmlMarker.updateModel(model)
}, 1000)
})()
```
## Changelog
[Review our latest changes and updates](CHANGELOG.md)
## Contributing
[](LICENSE)
[](CODE_OF_CONDUCT.md)
Contributions are welcomed!
- Please read our [Contribution guidelines](CONTRIBUTING.md) to learn more about the process.
- Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).