https://github.com/au-z/cam-el
Foundational Web Components with Smooth Character
https://github.com/au-z/cam-el
components hybridsjs web
Last synced: 6 days ago
JSON representation
Foundational Web Components with Smooth Character
- Host: GitHub
- URL: https://github.com/au-z/cam-el
- Owner: au-z
- Created: 2020-10-26T05:55:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-16T14:55:57.000Z (about 3 years ago)
- Last Synced: 2025-08-24T23:01:39.147Z (10 months ago)
- Topics: components, hybridsjs, web
- Language: TypeScript
- Homepage:
- Size: 3.59 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cam-el
> Foundational Web Components with Smooth Character
These components should help with boilerplate html layout. They're built to be modern, maximally helpful, and minimally intrusive.
## Usage
```bash
npm i @auzmartist/cam-el
```
```js
import { CamBox, CamInput } from '@auzmartist/cam-el'
```
# Components
As per the web components spec, all components are hyphenated. All `cam-el` components are prefixed with `cam-`.
## Layout
### ``
A flex-sensible div replacer. Layout everything with cam-box.
Example:
```html
Foo
Bar
```
#### Attributes
- **m**: margin `"xy | x y"`
- **p**: padding `"xy | x y"`
- **flex**: sets the flex justify-content and align-items properties `"justify/align | justify align"`
- **inline** if set, display with be inline-flex or inline-block
- **dir**: sets the flex-direction
- **wrap**: the flex-wrap rule value
## Forms
### ``
An unopinionated input element which adds useful functionality and smooths over browser quirks.
#### General Attributes
- **m**: margin `"xy | x y"`
- **p**: padding `"xy | x y"`
- **disabled**: disables the input
- **slot**: An optional slot on the left of the input for a label or other content
- **value**: the current value of the input
#### General Events
- **onupdate**: CustomEvent wherein the detail is the current value of the input. This event may be more uniform and useful than the 'input' or 'changed' event. But these default events are still propagated.
#### Text
Proxies the text input.
```html
```
#### Number Input
Proxies the number input and adds features for wraparound value nudging and value clamping. Great for scientific or visualization heavy applications where
Examples:
```html
```
#### Attributes
- **min**: minimum value
- **max**: maximum value
- **step**: step value
- **wrap**: determines if the min and max should "wrap around"
#### Checkbox/Toggle Input
```html
```
#### Attributes
- **toggle**: An alternate UI resembling a horizontal slider
- **checked**: Indicates if the checkbox is checked or toggle is on
#### Radio Input
Because inputs do not share a "name" attribute across shadow DOMs, it's recommended to wrap groups of these in to enforce mutual exclusion and subscribe to the group element's `onupdate` event.
```html
```
#### Email
Proxies the email input
#### Password
Proxies the password input
One could make `` element work their full time job. Other `` variants and improved browser/accessibility support are in development as-needed. Submit an issue if there's something missing you'd like to use.
## Typography
### ``
A dead simple way to use Material Icon ligature fonts.
```html
face
```
## Color
### ``
Render a color swatch in RGB, HSL, or hexadecimal format.
Perfect for presenting a color in UI.
```html
```
### ``
Render an editable HSL color generator.
```html
```
## Canvas
### ``
Renders a canvas behind all the slotted content.
```html
Hello
```
#### Properties
- **run:** (ctx: CanvasRenderingContext2D) => void
- re-renders this function each time
- **throttle:** throttles the rendering to every n milliseconds
#### Events:
- change: {h, s, l, hex}
## Interaction
### ``
Touch and mouse support for draggable slotted content.
```html
```
If you'd prefer to work with the raw eventListeners (`draggableStart`, `draggableDrag`, and `draggableEnd`), you can `import {Draggable} from 'cam-el'` into your project as function getters.
## Miscellaneous / Advanced
These components are much less helpful in isolation, but can be used to supercharge further development with Hybrids JS web components.
### `CamRef`
Used in conjunction with other renderable Hybrids components to provide a reference into a Custom Element's shadow DOM.
#### Usage
```js
export const MyComponent = {
...CamRef('.some-class'),
render: () => html` `,
}
function onRef(host, e) {
/* e.detail will be child component's .some-class element */
}
```
---
## ::part() styles
The library supports style bindings using the ::part() CSS selector modifier for a high degree of customization.
Example
```html
cam-input::part(input) {
border-radius: 0;
}
cam-input::part(label) {
font-family: 'Arial', sans-serif;
}
```
## CSS Variables
- `var(--cam-font, sans-serif)`: the font for all elements
- `var(--cam-unit, 8px)`: the size of a margin and padding unit