Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sbrunner/admin-components
https://github.com/sbrunner/admin-components
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/sbrunner/admin-components
- Owner: sbrunner
- License: bsd-2-clause
- Created: 2024-09-27T13:40:43.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-11-01T18:14:49.000Z (about 2 months ago)
- Last Synced: 2024-11-01T19:19:16.436Z (about 2 months ago)
- Language: TypeScript
- Size: 237 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Admin components
## Introduction
Provide some component to build admin or technical interface, where we don't want to setup a JavaScript build,
to add some interactivity to the page.
## Components
### ``
This component is used to fetch data from an API.
#### Attributes
- `url`: the URL to fetch data from.
- `emit`: the signal name to emit when the data is fetched (counter).
- `trigger`: the signal name to listen to trigger to fetch the data (counter).
- `data`: the signal name to listen to to get the data.
- `state`: the signal name to listen to to get the state of the fetch.
- `interval`: the interval in milliseconds to fetch the data (disabled by default).
- `lines`: the number of lines to display as placeholder during the first fetch (3 by default).
- `line-min`: the minimum number line width in percent to display as placeholder (0 by default).
- `line-max`: the maximum number line width in percent to display as placeholder (100 by default).
#### Slots
- `content`: the content to display when the data is fetched.
### ``
This component is used to display the status of a fetch.
#### Attributes
- `state`: the signal name to listen to to get the state.
- `loading`: the state values to consider as loading (`loading,reloading` by default).
- `success`: the state values to consider as success (`success` by default).
- `error`: the state values to consider as error (`error` by default).
- `no-empty`: if set to `true`, the component will not display anything by default.
### ``
This component is used to create a link to an admin page.
#### Attributes
- `admin-href`: the URL to link to.
- `admin-class`: the class to apply to the link.
- `admin-role`: the role to apply to the link.
- `data`: the signal name to listen to to get the data.
- `emit`: the signal name to emit when we successfully get the data (counter).
- `state` the signal name to listen to to get the state of the fetch.
### ``
This component is used to create a form to send data to an API.
#### Attributes
- `data`: the signal name to listen to to get the data.
- `emit`: the signal name to emit when we successfully send the data (counter).
- `state` the signal name to listen to to get the state of the fetch.
#### `innerText`
The content of the component is used to create the form is parsed as JSON.
Example of table form:
```json
{
"action": "src/data/action.json",
"fields": [
{
"name": "name",
"label": "Name"
},
{
"type": "email",
"name": "email",
"label": "Email"
},
{
"type": "password",
"name": "password",
"label": "Password"
}
]
}
```
Example of one line form:
```json
{
"action": "src/data/action.json",
"type": "line",
"fields": [
{
"name": "name",
"placeholder": "Name"
},
{
"type": "email",
"name": "email",
"placeholder": "Email"
},
{
"type": "password",
"name": "password",
"placeholder": "Password"
}
]
}
```
### Component to exploit the fetched content
```javascript
class MyElement extends window.admin.Element {
render() {
const data = this.dataSignal.value;
return window.lit.map(data.attribute, (item) => window.lit.html\`
\${item?.name}: \${item?.value}
\`);
}
}
window.customElements.define('my-element', MyElement);
```
```html
`;
```