Nomenclature Predictably Misunderstood

    @johnsonandjohnson/mettle-components

    1.11.0 • Public • Published

    Mettle Logo

    Mettle Custom Elements

    CodeQL npm Unit Test codecov

    A Suite of custom elements and services to be used on a front-end JavaScript application.

    These are built under the 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

    Goals

    • [x] Use native JS for little to no dependency
    • [x] Cross browser support
    • [x] Flexible for CSS
    • [x] Unit tested

    Project Installation

    $ npm install @johnsonandjohnson/mettle-components --save

    To include the components to your code

    import '@johnsonandjohnson/mettle-components'

    Quick Sample

    <html>
      <head>
        <title>Mettle Component Example</title>
      </head>
      <body>
        <span id="id-44629472-5691-4c53-b7f0-c5488854761b">
          Hover or tap me for tip
        </span>
        <mettle-tool-tip
          data-for="id-44629472-5691-4c53-b7f0-c5488854761b">
            <p>Slot HTML/Text</p>
        </mettle-tool-tip>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/index.js"></script>
      </body>
    </html>

    To include services to your code

    import { 
      HtmlMarker,
      HttpFetch,
      I18n,
      Observable,
      Roles,
      Router
    } from '@johnsonandjohnson/mettle-components/services'

    Quick Sample

    <html>
      <head>
        <title>Mettle Services Example</title>
      </head>
      <body>
        <div id="render"></div>
    
        <script type="module">
          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)
          })()
        </script>
      </body>
    </html>

    Changelog

    Review our latest changes and updates

    Contributing

    License Contributor Covenant

    Contributions are welcomed!

    Install

    npm i @johnsonandjohnson/mettle-components

    DownloadsWeekly Downloads

    1

    Version

    1.11.0

    License

    Apache-2.0

    Unpacked Size

    11.7 MB

    Total Files

    251

    Last publish

    Collaborators

    • jjoswg
    • gforti