@ircam/simple-components v2.5.0
@ircam/simple-components
set of web components for audio interfaces and rapid prototyping, created using the lit library.
Documentation
http://ircam-ismm.github.io/simple-components/
Installation
npm install lit @ircam/simple-components --save
Note: this library has never been tested with other framework than lit
, any feedback is welcome.
Since v2, this package has moved to lit@2, which might cause issues if your application is using lit-html@1.x.x and/or lit-element@1.x.x
to update your app, see: https://lit.dev/docs/releases/upgrade/
if you don't want to update your app now, please fall back to version 1.x.x `npm install --save @ircam/simple-components@1.3.0`
Usage
Each components lives in its own file and should be imported separately, e.g.
import '@babel/polyfill';
import { html, render } from 'lit/html.js';
import '@ircam/simple-components/sc-toggle.js'
render(html`
<sc-toggle
@change="${e => console.log(e)}"
></sc-toggle>
`, document.body);
Documentation - List of existing components
see. documentation (http://ircam-ismm.github.io/simple-components/)
Support older browsers
To support older browser, you should import webcomponentsjs/webcomponents-bundle.js
and ./vendors/lit/polyfill-support.js
A possible solution is to copy the file from your node_modules
folder into a directory
exposed by your server using postinstall scripts
In package.json
"scripts": {
"postinstall": "mkdir -p ./vendors && cp -R node_modules/@webcomponents/webcomponentsjs ./vendors/ && cp -R node_modules/lit ./vendors/",
}
<script defer src="./vendors/webcomponentsjs/webcomponents-bundle.js"></script>
<script defer src="./vendors/lit/polyfill-support.js"></script>
Such strategy as been implemented in the docs
directory.
Design Considerations
These design aspects aim at simplifying future wrapping of the components in an editing tool.
Attributes
All components must expose a width
and height
attribute, for squared components (e.g. <sc-bang>
and <sc-toggle>
) the last attribute set wins
Events
- all components should at least expose an
@input
or a@change
event. - they can expose additional events, e.g. button
@press
and@release
- payload should always have
e.details.value
@todos
new elements
<sc-range>
<sc-multislider>
<sc-volume>
(slider and number w/ db and lin output)<sc-pan>
<sc-select>
<sc-radio>
<sc-dial>
(maybe we just have to accept some people like that sort of thing...)
theming
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://lit-element.polymer-project.org/guide/styles#example-theme
License
BSD-3-Clause
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago